/* saltouruguay.com — PORTADA (2026-09-23): la maqueta "naranja" del 18-set llevada al sitio.
   Agua mineral en sombra (verde petróleo), hueso, un solo naranja (el calor del agua y los cítricos) y el agua del
   acuífero, que aparece en el río y al fondo de la página. Se apoya en study.css (barra, pie, bloques de datos) y le
   cambia paleta y letra con variables, así clima.css y energia.css siguen sirviendo sin tocarlos.
   18-oct-2026: la portada pasa a la letra de visitsalto como el resto del sitio (Cormorant Garamond en lo grande, Manrope
   en el texto, Geist Mono en datos); se van los ejes de ancho de Archivo. Foto bajo el SALTO, miniaturas fijas en las
   puertas y la grilla "Salto, en fotos". */
.hm{
  --bg:#07100F;--bg-2:#0B1817;--bg-3:#112423;
  --ln:rgba(233,230,219,.1);--ln-2:rgba(233,230,219,.2);
  --fg:#E9E6DB;--fg-2:#B3BCB6;--fg-3:#7E918E;
  --heat:#FF5A1E;--water:#63D6C6;
  --acc:var(--heat);--acc-text:#FF6A33;--acc-soft:rgba(255,90,30,.14);
  --acc2:#F2A33A;--acc2-text:#F2A33A;--acc2-soft:rgba(242,163,58,.16);
  --acc3:var(--water);--acc3-text:var(--water);--acc3-soft:rgba(99,214,198,.14);
  --lime:#B9D98A;--on-acc:#07100F;--ink:#07100F;--ink-fg:#E9E6DB;
  --wrap:1560px;--rail:84px;--ease-out:cubic-bezier(.16,1,.3,1)
}
html:has(body.hm){background:#07100F}
body.hm::before{display:none}
/* grano fino para que los oscuros planos no parezcan plantilla */
body.hm::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:60;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hm ::selection{background:var(--heat);color:var(--bg)}
.hm .skip{background:var(--heat);color:var(--bg)}
.hm .kicker{color:var(--acc-text)}
.hm .h2{font-weight:600}
.hm .label{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--fg-3);margin:0 0 clamp(20px,3vw,40px)}
.hm .label i{font-style:normal;color:var(--heat)}

/* ---------- barra: transparente sobre la portada, se asienta al bajar ---------- */
.hm .st-nav{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .4s var(--ease),border-color .4s var(--ease)}
.hm .st-nav.scrolled{background:rgba(7,16,15,.84);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);border-bottom-color:var(--ln)}
.hm .brand-t{font-weight:700;letter-spacing:-.01em}
.hm .lang:hover{border-color:var(--heat);color:var(--heat)}

/* ---------- regla de profundidad ---------- */
.hm-rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:900;pointer-events:none;display:flex;align-items:center;justify-content:center;
  border-right:1px solid rgba(233,230,219,.08);background:linear-gradient(180deg,rgba(7,16,15,.9),rgba(7,16,15,.55) 30%,rgba(7,16,15,.9));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.hm-rail-track{position:absolute;top:22vh;bottom:22vh;left:50%;width:1px;background:rgba(233,230,219,.08)}
.hm-rail-fill{position:absolute;left:0;top:0;width:1px;height:0;background:linear-gradient(180deg,var(--heat),var(--water))}
.hm-rail-read{rotate:-90deg;white-space:nowrap;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.hm-rail-read b{color:var(--fg);font-weight:500;letter-spacing:.04em}
@media (max-width:860px){.hm-rail{display:none}}
@media (min-width:861px){.hm .wrap,.hm .st-nav{padding-left:calc(var(--gutter) + var(--rail))}}

/* ---------- portada ---------- */
.hm-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 76px) 0 clamp(26px,5vh,60px)}
.hm-field{position:absolute;inset:0;z-index:-2;  /* 31-oct-2026: velo vivo: oscurece sólo arriba (la barra) y abajo (el texto), el medio queda libre */
  background:linear-gradient(180deg,rgba(5,12,12,.5) 0%,rgba(7,16,15,.05) 24%,rgba(7,16,15,0) 54%,rgba(7,16,15,.42) 80%,rgba(12,26,24,.9) 100%),
             radial-gradient(120% 70% at 18% 108%,rgba(255,90,30,.3),transparent 62%)}
.hm-photo{position:absolute;inset:0;z-index:-3;margin:0;overflow:hidden;background:#07100F}
.hm-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);opacity:1;filter:brightness(1.14) saturate(1.08) contrast(1.02)}  /* 31-oct-2026: "la foto del hero más clara" (Mathias) */  /* 31-oct-2026: la foto entera y con color (antes .62 y apagada: "a cementerio, gótico", Mathias) */
.hm-steam{position:absolute;inset:0;z-index:-1;opacity:.25;filter:blur(6px);
  background:radial-gradient(40% 50% at 20% 90%,rgba(233,230,219,.1),transparent 70%),
             radial-gradient(35% 45% at 62% 96%,rgba(233,230,219,.08),transparent 70%),
             radial-gradient(30% 40% at 88% 88%,rgba(233,230,219,.06),transparent 70%);
  animation:hm-steam 22s ease-in-out infinite alternate}
@keyframes hm-steam{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,-6%,0) scale(1.12)}}
.hm-meta{position:absolute;top:calc(var(--nav-h) + clamp(12px,3vh,36px));left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:.72rem;letter-spacing:.06em;color:var(--fg-3)}
.hm-where{display:flex;flex-wrap:wrap;gap:4px 14px}
.hm-clock:not(:empty)::before{content:"·";margin-right:14px;color:var(--heat)}
.hm .clima-pill{position:static;background:rgba(7,16,15,.6);font-family:var(--f)}
.hm .clima-pill[hidden]{display:none}
.hm .clima-pill:hover{border-color:var(--heat)}

/* SALTO / URUGUAY / las cuatro puertas: tres filas que se deslizan en sentidos alternos */
.hm-stack{margin-bottom:clamp(28px,5vh,56px)}
.hm-row{display:flex;width:max-content;font-size:clamp(3rem,11.5vw,10.8rem);will-change:transform}
.hm-row b{font-family:var(--f);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.025em;padding-right:.26em;white-space:nowrap}  /* 31-oct-2026: Manrope negra en vez de Cormorant en mayúsculas (lápida) */
.hm-row.r1 b{color:var(--fg);text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hm-row.out b{color:rgba(233,230,219,.22);-webkit-text-stroke:0}  /* sin contorno (letra grabada) */
.hm-row.heat b{color:var(--heat);text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hm-row.r1{animation:hm-in 1.05s var(--ease-out) both,hm-left 46s linear infinite}
.hm-row.r2{animation:hm-in 1.05s var(--ease-out) .12s both,hm-right 62s linear infinite}
.hm-row.r3{animation:hm-in 1.05s var(--ease-out) .24s both,hm-left 54s linear infinite}
@keyframes hm-in{from{clip-path:inset(-16% 0 100% 0)}to{clip-path:inset(-16% 0 -8% 0)}}  /* 18-oct: Cormorant asoma por arriba de la caja de .82 de interlineado; el recorte final deja aire */
@keyframes hm-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.333%,0,0)}}
@keyframes hm-right{from{transform:translate3d(-33.333%,0,0)}to{transform:translate3d(0,0,0)}}

.hm-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,64px);align-items:end}
.hm-lede{max-width:46ch;font-size:clamp(1.08rem,1.1vw + .8rem,1.5rem);line-height:1.45;color:var(--fg)}
.hm-lede em{font-style:normal;color:var(--heat);font-weight:600}
.hm-actions{display:flex;gap:12px;flex-wrap:wrap}

/* botones en píldora: hueso lleno y contorno */
.btn-s,.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:600;font-size:.94rem;text-decoration:none;border:1px solid var(--fg);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease-out)}
.btn-s{background:var(--fg);color:var(--bg)}
.btn-s:hover{background:var(--heat);border-color:var(--heat);color:var(--bg)}
.btn-o{background:transparent;color:var(--fg);border-color:var(--ln-2)}
.btn-o:hover{border-color:var(--fg)}
.btn-s:hover,.btn-o:hover{transform:translateY(-2px)}
.btn-s .dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- cinta ---------- */
.hm-ticker{border-block:1px solid rgba(233,230,219,.08);background:var(--bg-2);overflow:hidden;padding-block:14px}
.hm-ticker-track{display:flex;width:max-content;animation:hm-left 60s linear infinite;font-weight:600;font-size:clamp(.82rem,1vw,.98rem);letter-spacing:.01em;color:var(--fg-3)}
.hm-ticker:hover .hm-ticker-track{animation-play-state:paused}
.hm-ticker-track span{padding-right:1.6em;white-space:nowrap}
.hm-ticker-track i{font-style:normal;color:var(--heat);padding-left:1.6em}

/* ---------- frase ---------- */
.hm-say .say{max-width:22ch;font-family:var(--fd);font-weight:500;font-size:clamp(2.3rem,5.8vw,5.2rem);line-height:1.04;letter-spacing:0;color:var(--fg);text-wrap:balance}
.hm-say .quiet{color:var(--fg-3)}
.hm-say .say-note{margin-top:clamp(28px,4vw,48px);max-width:52ch;color:var(--fg-3);font-size:clamp(.98rem,.5vw + .85rem,1.1rem);line-height:1.6}

/* revelado con máscara (solo si corrió home.js, que pone .hm-js; sin JS el texto está a la vista) */
.hm-js .mask{clip-path:inset(0 0 102% 0)}
.hm-js .mask.in{clip-path:inset(0 0 -10% 0);transition:clip-path 1.1s var(--ease-out)}
.hm-js .mask.in.d1{transition-delay:.08s}

/* ---------- puertas ---------- */
.hm-doors{padding-top:clamp(20px,3vw,40px)}
.door-list{border-top:1px solid rgba(233,230,219,.08)}
.hm .door{display:block;position:relative;overflow:hidden;border-bottom:1px solid rgba(233,230,219,.08);color:var(--fg);text-decoration:none}
.hm .door::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(255,90,30,.13),transparent 70%);transition:width .6s var(--ease-out);pointer-events:none}
.hm .door:hover::before,.hm .door:focus-visible::before{width:100%}
.door-in{position:relative;z-index:1;display:grid;grid-template-columns:clamp(84px,9vw,140px) 2.5rem minmax(0,1.25fr) minmax(0,1fr) auto;gap:clamp(14px,2.6vw,40px);align-items:center;padding-block:clamp(22px,3vw,40px)}
.door-pic{display:block;aspect-ratio:1;overflow:hidden;border-radius:4px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.door-pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.door-idx{align-self:start;padding-top:.6em;font-size:.78rem;letter-spacing:.08em;color:var(--fg-3)}
.door-name{font-family:var(--fd);font-weight:600;text-transform:uppercase;font-size:clamp(2.1rem,5vw,4.6rem);line-height:.95;letter-spacing:.03em;transition:color .4s var(--ease),transform .5s var(--ease-out)}
.door-desc{max-width:40ch;color:var(--fg-3);font-size:clamp(.94rem,.5vw + .82rem,1.06rem);line-height:1.5}
.door-tag{display:block;margin-top:8px;font-size:.7rem;letter-spacing:.08em;color:var(--acc-text)}
.door-go{display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--ln-2);transition:background .35s var(--ease),border-color .35s var(--ease),color .35s,transform .45s var(--ease-out)}
.door-go svg{width:18px;height:18px}
@media (hover:hover){
  .hm .door:hover .door-name{color:var(--heat);transform:translateX(6px)}
  .hm .door:hover .door-go{background:var(--heat);border-color:var(--heat);color:var(--bg);transform:rotate(-45deg)}
  .hm .door:hover .door-pic img{transform:scale(1.06)}
}
.hm .door:focus-visible{outline-offset:-3px}
@media (max-width:760px){
  .door-in{grid-template-columns:clamp(72px,22vw,96px) minmax(0,1fr);row-gap:8px;align-items:start}
  .door-pic{grid-column:1;grid-row:1/4}.door-idx{padding-top:0}.door-idx,.door-name,.door-desc{grid-column:2}
  .door-go{display:none}
}

/* ---------- fotos (29-set-2026): bandas a sangre entre bloques + la del Arapey junto a la historia ---------- */
.hm-band{position:relative;margin:0;height:clamp(260px,46vw,620px);overflow:hidden;border-top:1px solid rgba(233,230,219,.08)}
.hm-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.hm-band figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:16px;padding:44px var(--gutter) 14px;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(233,230,219,.86);background:linear-gradient(0deg,rgba(7,16,15,.8),rgba(7,16,15,0))}
.hm-band figcaption span:empty{display:none}
@media (min-width:861px){.hm-band figcaption{padding-left:calc(var(--rail,0px) + var(--gutter))}}
.hm-say{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.say-photo{margin:0;position:relative}
.say-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:var(--pos,50% 50%);border-radius:var(--r)}
.say-photo figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.say-photo figcaption span:empty{display:none}
@media (max-width:860px){.hm-say{grid-template-columns:1fr}.hm-band{height:clamp(220px,60vw,420px)}.hm-band figcaption{flex-direction:column;gap:4px}}

/* ---------- bloques en vivo: la paleta nueva les llega por variables ---------- */
.hm-data{border-top:1px solid rgba(233,230,219,.08)}
.hm-rio{--acc:var(--water);--acc-text:var(--water);--acc-soft:rgba(99,214,198,.14)}
.hm-rio .kicker{color:#FF6A33}
.hm-mercados{border-top:0}

/* ---------- la huerta del mes + la luna (29-set-2026) ---------- */
.hu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(300px,1.25fr);gap:clamp(28px,4vw,56px);align-items:start}
.hu-k{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin:0 0 14px}
.hu-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hu-list li{padding:9px 15px;border:1px solid var(--ln-2);border-radius:999px;font-weight:600;font-size:.95rem;line-height:1.1;color:var(--fg)}
.hu-list.full li{background:var(--heat);border-color:var(--heat);color:#07100F}
.hu-list.part li{border-style:dashed;color:var(--fg-2)}
.hu-list:empty::before{content:"—";color:var(--fg-3)}
.hu-luna{padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--ln)}
.hu-rec{margin:clamp(24px,3vw,36px) 0 0;max-width:78ch;font-size:1rem;line-height:1.55;color:var(--fg-2)}
.hu-rec a{color:var(--fg);text-decoration:none;border-bottom:1px solid rgba(233,230,219,.28);transition:border-color .2s}
.hu-rec a:hover{border-bottom-color:var(--heat)}
.hu-rec a.more{color:var(--heat);border-bottom-color:transparent}
@media (max-width:960px){.hu-grid{grid-template-columns:1fr 1fr}.hu-luna{grid-column:1/-1;padding:clamp(20px,3vw,32px) 0 0;border-left:0;border-top:1px solid var(--ln)}}
@media (max-width:560px){.hu-grid{grid-template-columns:1fr}}

/* ---------- próximos eventos, como cartelera ---------- */
.hm-agenda{border-top:1px solid rgba(233,230,219,.08)}
.ag-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ag-h{font-weight:600;font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:1;letter-spacing:0;max-width:14ch;color:var(--fg)}
.listing{list-style:none;margin-top:clamp(30px,4vw,54px);border-top:1px solid var(--ln-2)}
.listing:empty{display:none}
.entry{border-bottom:1px solid var(--ln);--k:var(--heat)}
.entry a{position:relative;isolation:isolate;display:grid;grid-template-columns:clamp(128px,14vw,200px) minmax(0,1fr) minmax(0,auto);gap:clamp(12px,2.4vw,36px);align-items:baseline;padding-block:clamp(16px,2.2vw,28px);color:var(--fg);text-decoration:none}
.entry a::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);z-index:-1;background:var(--k);opacity:0;transition:opacity .3s var(--ease)}
.entry a:hover::before{opacity:.09}
.e-when{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--k);white-space:nowrap}
.e-when b{display:block;margin-top:5px;font-weight:500;font-size:.86rem;letter-spacing:.03em;color:var(--fg)}
.e-what{font-family:var(--fd);font-weight:600;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.08;letter-spacing:0;text-wrap:balance;transition:transform .4s var(--ease-out)}
.entry a:hover .e-what{transform:translateX(10px)}
.e-where{max-width:28ch;font-size:.9rem;line-height:1.4;color:var(--fg-3);text-align:right}
.entry.c-musica{--k:#F28C8C}.entry.c-teatro{--k:#F2A33A}.entry.c-arte{--k:#63D6C6}.entry.c-charlas{--k:#E9E6DB}.entry.c-ferias{--k:#F2A33A}
.entry.c-deporte{--k:#B9D98A}.entry.c-familia{--k:#FF7A45}.entry.c-turismo{--k:#63D6C6}.entry.c-otros{--k:#B3BCB6}
@media (max-width:720px){.entry a{grid-template-columns:1fr;gap:6px}.e-when b{display:inline;margin:0 0 0 8px}.e-where{text-align:left}}

/* ---------- el acuífero: el fondo de la página ---------- */
.hm-aquifer{position:relative;overflow:hidden;padding-block:clamp(88px,13vh,190px);background:linear-gradient(180deg,var(--bg) 0%,#061513 34%,#04201E 68%,#062B28 100%)}
.aq-strata{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:repeating-linear-gradient(177deg,rgba(99,214,198,.09) 0 1px,transparent 1px 26px)}
.aq-bubbles{position:absolute;inset:0;pointer-events:none}
.bub{position:absolute;bottom:-10%;width:var(--s);height:var(--s);border-radius:50%;border:1px solid rgba(99,214,198,.35);opacity:0;animation:hm-rise var(--t) linear infinite;animation-delay:var(--d)}
@keyframes hm-rise{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:.7}100%{transform:translateY(-110vh) scale(1.25);opacity:0}}
.hm-aquifer .wrap{position:relative}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(22px,3vw,44px);margin-top:clamp(36px,5vw,64px)}
.fig dt{font-weight:700;font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg)}
.fig dd{margin:.6em 0 0;max-width:26ch;font-size:.96rem;line-height:1.45;color:var(--fg-3)}
.fig.heat dt{color:var(--heat)}.fig.water dt{color:var(--water)}
.aq-line{margin-top:clamp(44px,6vw,80px);max-width:30ch;font-family:var(--fd);font-size:clamp(1.5rem,1.6vw + 1rem,2.3rem);font-weight:500;line-height:1.25;letter-spacing:0;color:var(--fg)}
@media (max-width:900px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- cierre ---------- */
.hm-outro{position:relative;overflow:hidden;padding-block:clamp(90px,14vh,200px);background:linear-gradient(180deg,#062B28,#07100F 70%)}
.outro-big{margin-bottom:clamp(26px,4vw,48px);font-family:var(--fd);font-weight:500;font-size:clamp(3.4rem,11vw,10rem);line-height:.92;letter-spacing:-.01em;color:var(--fg)}
.outro-big em{font-style:italic;color:var(--heat)}
.outro-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hm .st-foot{border-top-color:rgba(233,230,219,.08)}
.hm .foot-brand .coords{color:var(--heat)}
.hm .foot-doors a:hover{color:var(--heat)}

/* ---------- teléfono ---------- */
@media (max-width:760px){
  .hm-hero{min-height:0;padding-top:calc(var(--nav-h) + 92px)}
  .hm-row{font-size:clamp(3rem,19vw,5.8rem)}
  .hm-foot{grid-template-columns:1fr;align-items:start}
  .hm-actions .btn-s,.hm-actions .btn-o{flex:1 1 100%}
  .hm-say .say{font-size:clamp(1.8rem,8.4vw,2.6rem)}
}
@media (max-width:480px){.figures{grid-template-columns:1fr 1fr;gap:28px 16px}.fig dt{font-size:2.3rem}}

/* ---------- menos movimiento: todo quieto y a la vista (study.css ya apaga animaciones y transiciones) ---------- */
@media (prefers-reduced-motion:reduce){
  .hm-row,.hm-ticker-track,.hm-steam,.bub{animation:none!important}
  .hm-js .mask{clip-path:none}
}

/* la tercera fila: las cuatro puertas (24-set, pedido de Mathias; antes decía 40 °C). Tres copias largas: -33,333 % = una */
.hm-row.puertas{animation:hm-in 1.05s var(--ease-out) .24s both,hm-left var(--dur,90s) linear infinite}
.hm-row.puertas b{padding-right:0}
.hm-row.puertas i{font-style:normal;font-weight:400;padding-inline:.22em;color:rgba(233,230,219,.5)}

/* ---------- Salto, en fotos (18-oct-2026): seis postales entre la cinta y la historia ---------- */
.hm-fotos{padding-bottom:0}
.fotos-grid{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.fotos-grid a{display:block;color:var(--fg);text-decoration:none}
.fotos-grid figure{margin:0}
.fotos-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:var(--pos,50% 50%);border-radius:4px;transition:transform .7s var(--ease-out),filter .4s}
.fotos-grid a:hover img{transform:scale(1.02);filter:brightness(1.06)}
.fotos-grid figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.fotos-grid figcaption span:empty{display:none}
.fotos-grid a:hover figcaption span:first-child{color:var(--fg)}
@media (max-width:960px){.fotos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .fotos-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .fotos-grid::-webkit-scrollbar{display:none}
  .fotos-grid li{flex:0 0 78vw;scroll-snap-align:start}
  .fotos-grid figcaption{flex-direction:column;gap:2px}
}

/* ---------- buscador y páginas de cada puerta (31-oct-2026): todo lo que hay, a un clic desde la portada ---------- */
.hm-find{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(8px,1.5vw,16px)}
.find{position:relative;max-width:780px}
.find input{width:100%;height:62px;padding:0 22px;border:1px solid var(--ln-2);border-radius:14px;background:rgba(233,230,219,.05);color:var(--fg);font:inherit;font-size:1.06rem;outline:0;transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
.find input::placeholder{color:var(--fg-3)}
.find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.find input:focus{border-color:var(--heat);background:rgba(233,230,219,.07)}
.find-out{list-style:none;margin:8px 0 0;padding:6px;border:1px solid var(--ln);border-radius:14px;background:var(--bg-2);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.find-out li a{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:11px 14px;border-radius:10px;color:var(--fg);text-decoration:none}
.find-out li a:hover,.find-out li a:focus{background:var(--bg-3)}
.find-out li a b{font-weight:600}
.find-out li a .mono{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.find-out li.none{padding:11px 14px;color:var(--fg-3)}
.find-quick{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-top:16px;font-size:.94rem}
.find-quick .mono{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.find-quick a{color:var(--fg);text-decoration:none;border-bottom:1px solid rgba(233,230,219,.28);transition:border-color .2s,color .2s}
.find-quick a:hover{color:var(--heat);border-bottom-color:var(--heat)}
/* ---------- la letra del hero para todo lo grande de la portada (31-oct-2026, Mathias: "usala para todo") ---------- */
.hm h2,.hm .h2,.hm h3,.hm .ag-h,.hm-say .say,.e-what,.outro-big,.aq-line,.door-name{font-family:var(--f)}
.hm .h2{font-weight:700;letter-spacing:-.02em;font-size:clamp(1.9rem,1.2rem + 2.4vw,3.3rem);line-height:1.05}
.ag-h{font-weight:700;letter-spacing:-.02em;font-size:clamp(1.9rem,4vw,3.4rem)}
.hm-say .say{font-weight:700;letter-spacing:-.02em;line-height:1.04;font-size:clamp(1.9rem,4.4vw,4rem)}
.e-what{font-weight:600;letter-spacing:-.01em;font-size:clamp(1.25rem,2.2vw,1.9rem)}
.outro-big{font-weight:800;letter-spacing:-.03em;font-size:clamp(2.8rem,9vw,8rem);line-height:.95}
.outro-big em{font-style:normal}
.aq-line{font-weight:500;letter-spacing:-.01em;font-size:clamp(1.3rem,1.2vw + .9rem,1.9rem);line-height:1.3}
.door-name{font-weight:800;letter-spacing:-.025em;line-height:.95;font-size:clamp(2rem,4.4vw,4rem)}
@media (max-width:760px){.hm-say .say{font-size:clamp(1.7rem,7.6vw,2.4rem)}}

/* ---------- las páginas de cada puerta, en un desplegable (31-oct-2026, Mathias: "un submenú desplegable en lugar") ----------
   La fila sigue siendo el enlace grande (.door-main). Debajo, un botón "Las 9 páginas de Vivir" abre un panel que baja con
   filas numeradas en tres columnas; sin JS el panel queda abierto. --col = dónde empieza la columna del nombre. */
.hm .door-main{display:block;color:var(--fg);text-decoration:none}
.door{--col:calc(clamp(84px,9vw,140px) + 2.5rem + 2 * clamp(14px,2.6vw,40px))}
.door-sub-wrap{position:relative;z-index:1}
.door-tog{display:flex;align-items:center;gap:12px;width:100%;margin-top:calc(-1 * clamp(6px,1.2vw,14px));padding:0 0 clamp(16px,2vw,22px) var(--col);background:none;border:0;color:var(--fg-3);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-align:left;transition:color .2s}
.door-tog:hover,.door-tog[aria-expanded="true"]{color:var(--heat)}
.door-tog i{position:relative;flex:none;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;transition:background .3s,color .3s}
.door-tog i::before,.door-tog i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.door-tog i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease-out)}
.door-tog[aria-expanded="true"] i::after{transform:translate(-50%,-50%) rotate(0)}
.door-tog:focus-visible{outline-offset:4px}
.door-sub{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ease-out)}
.hm-js .door-sub{grid-template-rows:0fr}
.hm-js .door-sub.open{grid-template-rows:1fr}
.door-sub-in{overflow:hidden;min-height:0;padding-left:var(--col)}
.door-pages{list-style:none;margin:0;padding:6px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,3vw,44px);border-top:1px solid rgba(233,230,219,.1)}
.door-pages li{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease-out);transition-delay:calc(var(--i,0) * 40ms)}
.door-sub.open .door-pages li,html:not(.hm-js) .door-pages li{opacity:1;transform:none}
.door-pages a{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(233,230,219,.07);color:var(--fg);text-decoration:none;font-size:.98rem;font-weight:500;line-height:1.3;transition:color .2s,padding-left .25s var(--ease-out)}
.door-pages a .mono{flex:none;width:2.2ch;font-size:.66rem;letter-spacing:.08em;color:var(--heat)}
.door-pages a:hover{color:var(--heat);padding-left:4px}
.door-all{display:inline-flex;align-items:center;gap:10px;margin:18px 0 clamp(24px,3vw,40px);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);text-decoration:none;border-bottom:1px solid rgba(233,230,219,.3);padding-bottom:4px;transition:color .2s,border-color .2s}
.door-all:hover{color:var(--heat);border-bottom-color:var(--heat)}
@media (max-width:1100px){.door-pages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .door{--col:calc(clamp(72px,22vw,96px) + 8px)}
  .door-tog{margin-top:0}
  .door-pages{grid-template-columns:1fr}
}