/* ALTERNO PARFUM — páginas de destino (QR) */
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(../fonts/BarlowCondensed-ExtraBold.woff) format("woff")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(../fonts/BarlowCondensed-Bold.woff) format("woff")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../fonts/JetBrainsMono-Regular.woff) format("woff")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url(../fonts/JetBrainsMono-Bold.woff) format("woff")}

:root{
  --kraft:#DAA26A; --papel:#F4EFE6; --tinta:#000;
  --f-display:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
  --f-mono:"JetBrains Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  --paso:1.1s;      /* tiempo entre una línea y la siguiente */
  --caida:1.6s;     /* duración de cada caída */
  --inicio:.5s;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:#141210;color:var(--papel);font-family:var(--f-mono);font-size:16px;line-height:1.55}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--kraft);outline-offset:3px}

.exp{position:relative;min-height:100vh;min-height:100svh;isolation:isolate}
/* Fondo: foto (si existe) sobre degradado de respaldo. Fijo para que el texto pase encima. */
.exp .bg{position:fixed;inset:0;z-index:-2;background-color:var(--c1);
  background-image:var(--foto,none),radial-gradient(120% 80% at 70% 15%,var(--c2) 0%,transparent 60%),linear-gradient(160deg,var(--c1) 0%,var(--c1) 45%,#141210 100%);
  background-size:cover,cover,cover;background-position:center,center,center;
  animation:acercar 40s ease-out both}
.exp .velo{position:fixed;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,9,8,.45) 0%,rgba(10,9,8,.2) 70%,rgba(10,9,8,0) 100%),linear-gradient(180deg,rgba(10,9,8,.62) 0%,rgba(10,9,8,.46) 32%,rgba(10,9,8,.62) 60%,rgba(10,9,8,.88) 100%)}
@keyframes acercar{from{transform:scale(1.08)}to{transform:scale(1)}}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px))}
.top img{height:34px;width:auto;display:block}
.saltar{background:rgba(0,0,0,.45);border:1px solid rgba(244,239,230,.6);color:var(--papel);font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;cursor:pointer}
.saltar:hover{background:#000}

.texto{max-width:760px;margin:0 auto;padding:6vh max(20px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--kraft);text-shadow:0 1px 2px rgba(0,0,0,.85)}
.nombre{font-family:var(--f-display);font-weight:800;font-size:clamp(64px,17vw,150px);line-height:.88;letter-spacing:-.01em;margin:10px 0 6px;text-transform:uppercase;text-shadow:0 2px 30px rgba(0,0,0,.35);overflow-wrap:anywhere}
.nombre .ch{display:inline-block;white-space:pre}
.coords{font-size:13px;letter-spacing:.08em;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.85)}
.bloque{margin-top:5vh}
.rotulo{text-shadow:0 1px 2px rgba(0,0,0,.85);display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--kraft);margin-bottom:14px}
.rotulo::after{content:"";flex:1;height:1px;background:rgba(218,162,106,.6)}
.frase{font-size:clamp(17px,2.4vw,21px);line-height:1.5;margin:0 0 14px;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 18px rgba(0,0,0,.65);max-width:34ch}
.insp-nombre{text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 18px rgba(0,0,0,.5);font-family:var(--f-display);font-weight:700;font-size:clamp(30px,6vw,46px);line-height:1.05;margin:0 0 16px;color:var(--papel)}
.insp-nombre small{display:block;font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--kraft);margin-bottom:6px}
.cierre{text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 24px rgba(0,0,0,.5);font-family:var(--f-display);font-weight:800;font-size:clamp(34px,7vw,56px);line-height:1;margin:6vh 0 0;text-transform:uppercase}
.cierre span{display:block;font-family:var(--f-mono);font-weight:400;font-size:14px;text-transform:none;letter-spacing:0;margin-top:10px;opacity:.85}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-block;text-decoration:none;text-align:center;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:14px 20px;border:1px solid var(--kraft)}
.btn.prim{background:var(--kraft);color:#000}
.btn.prim:hover{background:#000;color:var(--kraft)}
.btn.sec{background:rgba(0,0,0,.4);color:var(--papel);border-color:rgba(244,239,230,.6)}
.btn.sec:hover{background:#000}
.legal{font-size:11px;line-height:1.5;opacity:.75;margin-top:28px;max-width:60ch}
.credito{position:fixed;right:max(8px,env(safe-area-inset-right,0px));bottom:calc(6px + env(safe-area-inset-bottom,0px));font-size:10px;opacity:.7;z-index:2}

/* Caída: cada elemento [data-i] cae con su propio retraso */
.cae{animation:caer var(--caida) cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--inicio) + var(--i) * var(--paso))}
.nombre .ch{animation:caerLetra 1.1s cubic-bezier(.25,.8,.3,1) both;animation-delay:calc(var(--inicio) + var(--i) * .09s)}
@keyframes caer{0%{opacity:0;transform:translateY(-46px);filter:blur(5px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes caerLetra{0%{opacity:0;transform:translateY(-1.1em) rotate(-4deg)}70%{opacity:1}100%{opacity:1;transform:none}}
.ya .cae,.ya .nombre .ch{animation-duration:.25s;animation-delay:0s!important}
.ya .saltar{visibility:hidden}
@media (prefers-reduced-motion:reduce){.cae,.nombre .ch,.exp .bg{animation:none!important}.saltar{display:none}}

/* Índice de destinos */
.indice{max-width:1100px;margin:0 auto;padding:4vh 16px 60px}
.indice h1{font-family:var(--f-display);font-weight:800;font-size:clamp(48px,9vw,96px);line-height:.9;text-transform:uppercase;margin:6px 0 24px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tarjeta{position:relative;display:block;aspect-ratio:4/5;text-decoration:none;color:var(--papel);overflow:hidden;border:1px solid rgba(244,239,230,.25);
  background-color:var(--c1);background-image:var(--foto,none),linear-gradient(160deg,var(--c1),#141210);background-size:cover;background-position:center}
.tarjeta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75))}
.tarjeta span{position:absolute;left:14px;right:14px;bottom:14px;z-index:1}
.tarjeta b{display:block;font-family:var(--f-display);font-weight:800;font-size:34px;line-height:.95;text-transform:uppercase}
.tarjeta i{font-style:normal;font-size:12px;opacity:.85}
.tarjeta:hover{border-color:var(--kraft)}