/* =====================================================================
   Touri · sitio.css — un solo CSS para todo touri.global
   Base: Propuesta 1 "Pasaporte de viaje" (propuestas/v1/estilos.css), aprobada por la clienta.

   CLASES REUTILIZABLES (portada, páginas legales y 404):
   - Página:      body > a.saltar + header.barra + main#contenido + footer.pie
   - Barra:       .barra > .barra__in > a.barra__marca(img) + nav.barra__nav(a) +
                  .barra__acciones > nav.idioma(a.idioma__op[aria-current=page]) + a.boton.boton--chico
   - Pie:         .pie > .pie__in > img.pie__marca + p.pie__lema + nav.pie__nav(a, button.pie__cookies)
                  + nav.idioma.idioma--pie + p.pie__legal
   - Botones:     .boton  .boton--chico  .boton--ancho  .boton--claro (sobre fondo oscuro)  .enlace
   - Tipografía:  .seccion__baja (bajada)  h1/h2 ligeros (Geist 300, como istmodigital.net); h3 con peso
   - Secciones:   .seccion (contenedor con margen superior)  .seccion__cab (cabecera de sección)
   - Documento:   main.doc > header.doc__cab (h1 + p.doc__fecha) + nav.doc__indice(ol) +
                  div.prosa (h2, h3, p, ul, ol, table, a)
   - Recuadros:   .nota (aviso dorado)  .nota--alerta (terracota)
   - Sellos SVG:  svg.sello > .sello__borde, text.sello__anillo (requiere <path id="anillo"> en la página)
   - Utilidad:    .oculto (visible solo para lectores de pantalla)
   Colores en :root (--verde, --crema, --papel, --noche, --oro, --oro-tinta, --terra).
   Contraste: --oro NUNCA como texto sobre fondo claro; usar --oro-tinta.
   Fuente Geist (OFL) servida desde /fonts: sin peticiones a terceros antes del consentimiento.
   ===================================================================== */

@font-face{font-family:"Geist";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("/fonts/geist-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}


:root{
  --crema:#F6F1E7;      /* fondo principal (la app) */
  --papel:#EEEDBF;      /* crema de marca: campos y páginas */
  --verde:#1F4E1B;      /* tinta y acción */
  --verde-2:#3E5A3B;    /* texto secundario (6.8:1 sobre crema) */
  --noche:#0B1D0C;
  --oro:#BDA357;        /* sellos y detalles, nunca texto pequeño sobre claro */
  --oro-tinta:#6E5B1F;  /* dorado legible sobre crema (5.9:1) */
  --terra:#8B5133;      /* errores y avisos (5.6:1) */
  --borde:#6B7466;      /* borde de campos: 3:1 sobre crema */

  --f:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-mega:clamp(3rem, 8.4vw, 8.5rem);
  --t-h1:clamp(2.75rem, 6.2vw, 6rem);
  --t-h2:clamp(2.25rem, 4.6vw, 4.5rem);
  --t-h3:clamp(1.5rem, 2.1vw, 2rem);
  --t-cuerpo:clamp(1.0625rem, 1.15vw, 1.1875rem);
  --t-chico:.9375rem;

  --margen:clamp(1.25rem, 3.2vw, 3rem);
  --ancho:1360px;
  --sep:clamp(6rem, 12vw, 11rem);
  --radio:22px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{
  margin:0;background:var(--crema);color:var(--verde);
  font-family:var(--f);font-size:var(--t-cuerpo);line-height:1.55;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01";
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.035em;line-height:1;text-wrap:balance}
/* Títulos grandes finos, como istmodigital.net (.hV-h1): Geist 300, -0.02em, 1.1 */
h1,h2{font-weight:300;letter-spacing:-.02em;line-height:1.1}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1.5px}
button{font:inherit;color:inherit}
::selection{background:var(--verde);color:var(--crema)}
:focus-visible{outline:3px solid var(--oro-tinta);outline-offset:3px;border-radius:6px}
/* Sobre fondos oscuros el dorado-tinta no se ve: contorno crema (>3:1 sobre --noche y --verde) */
.pie :focus-visible,.contacto :focus-visible,.consent :focus-visible,.legendaria :focus-visible{outline-color:var(--crema)}
html{scrollbar-color:var(--verde-2) var(--papel)}
.oculto-svg{position:absolute}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg .relleno{fill:currentColor;stroke:none}

.saltar{position:absolute;left:1rem;top:-4rem;z-index:50;background:var(--verde);color:var(--crema);padding:.75rem 1rem;border-radius:999px;text-decoration:none}
.saltar:focus{top:1rem}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--verde);color:var(--crema);
  padding:1.05rem 1.6rem;border-radius:999px;border:0;cursor:pointer;
  font-weight:600;font-size:1.0625rem;text-decoration:none;letter-spacing:-.01em;
  transition:transform .35s var(--ease), background-color .25s;
}
.boton svg{width:20px;height:20px;transition:transform .35s var(--ease)}
.boton:hover{background:var(--noche)}
.boton:hover svg{transform:translateX(4px)}
.boton:active{transform:scale(.97)}
.boton--chico{padding:.7rem 1.15rem;font-size:.9375rem;white-space:nowrap}
.boton--ancho{width:100%;justify-content:center}

/* ---------- Barra ---------- */
.barra{position:sticky;top:0;z-index:20;background:var(--crema);transition:background-color .3s}
.barra.es-baja{background:var(--papel)}
.barra__in{max-width:var(--ancho);margin:0 auto;padding:.85rem var(--margen);display:flex;align-items:center;gap:1.5rem}
.barra__marca img{height:42px;width:auto}
.barra__nav{display:none;gap:2rem;margin-left:auto}
.barra__nav a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.35em;font-weight:500;font-size:1rem;padding:.4rem 0;transition:text-decoration-color .25s}
.barra__nav a:hover{text-decoration-color:currentColor}
.barra__acciones{display:flex;align-items:center;gap:.75rem;margin-left:auto}
@media (min-width:960px){.barra__nav{display:flex}.barra__acciones{margin-left:1rem}}

.idioma{display:inline-flex;background:var(--papel);border-radius:999px;padding:3px}
.idioma__op{border:0;background:transparent;padding:.4rem .7rem;border-radius:999px;font-weight:600;font-size:.875rem;cursor:pointer;letter-spacing:.02em;color:var(--verde)}
.idioma__op[aria-pressed="true"]{background:var(--verde);color:var(--crema)}
.idioma__op:hover:not([aria-pressed="true"]){background:var(--crema)}

/* ---------- Hero ---------- */
.hero{
  max-width:var(--ancho);margin:0 auto;padding:clamp(1.5rem,4vw,3.5rem) var(--margen) 0;
  display:grid;gap:clamp(3rem,6vw,5rem);align-items:center;
}
/* Foto de fondo a todo el ancho detrás del título (dueño, 30/10, segunda vuelta): la vista aérea del
   Casco tiene que VERSE. Velo verde noche (no crema: el crema la lavaba) y texto claro encima. El velo es
   más denso solo donde va texto pequeño (bajada, tiendas): ahí se mide >= 4.5:1 sobre los píxeles reales.
   En móvil la foto cubre solo el bloque de texto (fila 1 de la grilla); la tarjeta va debajo, sobre crema. */
.hero{position:relative;isolation:isolate}
.hero>:not(.hero__fondo){position:relative;z-index:1}
.hero__fondo{position:relative;z-index:0;grid-row:1;grid-column:1;align-self:stretch;overflow:hidden;pointer-events:none;background:var(--noche);
  margin:calc(-1 * clamp(1.5rem,4vw,3.5rem)) calc(-1 * var(--margen)) 0}
.hero__texto{grid-row:1;grid-column:1;padding-bottom:clamp(2.5rem,8vw,3.5rem)}
.hero__fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;animation:deriva 30s ease-in-out infinite alternate}
.hero__fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,29,12,.6) 0%,rgba(11,29,12,.58) 24%,rgba(11,29,12,.72) 40%,rgba(11,29,12,.72) 82%,rgba(11,29,12,.62) 100%)}
@media (min-width:960px){
  .hero__fondo{position:absolute;inset:0 auto 0 50%;width:100vw;margin:0;transform:translateX(-50%);grid-row:auto;grid-column:auto}
  .hero__texto{grid-row:auto;grid-column:auto;padding-bottom:0}
  .hero__fondo img{object-position:50% 62%}
  .hero__fondo::after{background:
    linear-gradient(90deg,rgba(11,29,12,.74) 0%,rgba(11,29,12,.68) 38%,rgba(11,29,12,.34) 62%,rgba(11,29,12,.18) 100%)}
}
/* Texto del héroe sobre la foto */
.hero__baja{color:var(--crema)}
.hero .tienda{border-color:rgba(238,237,191,.75);color:var(--crema)}
.hero .tienda small{color:var(--papel)}
.hero .tienda:hover{background:rgba(246,241,231,.1)}
.hero .boton--claro:hover{background:var(--papel)}
.hero :focus-visible{outline-color:var(--crema)}
.hero h1{font-size:var(--t-h1);font-weight:300;letter-spacing:-.02em;line-height:1.08;max-width:12ch;color:var(--crema)}
.hero__baja{margin-top:1.6rem;max-width:34rem;font-size:clamp(1.125rem,1.4vw,1.3125rem)}
.hero__acciones{margin-top:2.2rem}
.tiendas{display:grid;grid-template-columns:repeat(2,max-content);gap:.6rem;margin-top:1.25rem}
@media (max-width:420px){.tiendas{grid-template-columns:1fr 1fr}.tienda{padding:.55rem .6rem;gap:.45rem}.tienda span{font-size:.9rem;white-space:nowrap}.tienda__ico{width:22px;height:22px}}
.tienda{
  display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;
  padding:.6rem 1.1rem .6rem .9rem;border-radius:14px;
  border:2px dashed var(--verde-2);color:var(--verde);
  transition:background-color .25s, transform .35s var(--ease);
}
.tienda:hover{background:var(--papel)}
.tienda:active{transform:scale(.97)}
.tienda__ico{width:26px;height:26px;flex:none}
.tienda span{display:flex;flex-direction:column;line-height:1.1;font-weight:650;font-size:1.0625rem}
.tienda small{font-weight:500;font-size:.75rem;color:var(--verde-2)}

.hero__pagina{position:relative;padding:12px;background:var(--papel);border-radius:28px;margin:.5rem 3% 5.5rem 6%}
.hero__pagina::after{content:"";position:absolute;z-index:1;inset:7px;border:2px dashed rgba(110,91,31,.45);border-radius:22px;pointer-events:none}
.hero__foto{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/5}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform-origin:60% 40%}
.telefono.telefono--hero{position:absolute;z-index:2;left:-5%;bottom:-4.5rem;width:50%;max-width:280px}
.sello--hero{position:absolute;z-index:3;top:-1.6rem;right:-1.2rem;width:clamp(120px,30%,190px);transform:rotate(-12deg);color:var(--verde)}
.hero__touri{position:absolute;z-index:3;right:-4%;bottom:-3.2rem;width:38%;max-width:210px;filter:drop-shadow(0 10px 14px rgba(11,29,12,.18))}

@media (min-width:960px){
  .hero{grid-template-columns:1.05fr 1fr;min-height:calc(100svh - 72px);padding-bottom:2rem}
  .hero__pagina{margin:0 0 3rem 10%}
  .telefono.telefono--hero{left:-12%;bottom:-3.5rem;width:44%}
  .hero__touri{right:-3%;bottom:-3rem;width:34%}
}

/* ---------- Teléfono dibujado ----------
   Marco en CSS; barra de estado propia (9:41, iconos genéricos) y la captura entera,
   a su proporción real 720x1426, sin deformar. Todo se mide en cqw: se ve igual a 390 y a 1440. */
/* .telefono solo define el contenedor (cqw = su ancho); el marco lo dibuja la pantalla */
.telefono{container-type:inline-size;position:relative}
.telefono__pantalla{
  position:relative;overflow:hidden;isolation:isolate;background:var(--crema);
  border:3.4cqw solid var(--noche);border-radius:14cqw;
  box-shadow:0 0 0 1.5px #3a5038, 0 30px 50px -24px rgba(11,29,12,.5), 0 8px 18px -10px rgba(11,29,12,.35);
}
.telefono__estado{
  display:flex;align-items:center;justify-content:space-between;
  height:10.5cqw;padding:0 7.5cqw 0 9cqw;background:var(--crema);color:var(--noche);position:relative;
}
.telefono__hora{font-size:4.4cqw;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.telefono__isla{position:absolute;left:50%;top:2.2cqw;width:27cqw;height:6.6cqw;margin-left:-13.5cqw;border-radius:99px;background:var(--noche)}
.telefono__iconos{display:flex;align-items:center;gap:1.5cqw}
.telefono__iconos svg{height:3.2cqw;width:auto;stroke-width:1.5}
.telefono__iconos svg:last-child{height:3.4cqw}
.telefono__iconos .trazo{fill:none;stroke:currentColor;stroke-width:1.6}
.telefono__iconos .trazo-fino{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.5}
.telefono__pantalla>img{display:block;width:100%;height:auto;aspect-ratio:720/1426;object-fit:cover;object-position:top}
.telefono__inicio{display:block;height:5cqw;background:var(--crema);position:relative}
.telefono__inicio::after{content:"";position:absolute;left:50%;top:1.6cqw;width:34cqw;margin-left:-17cqw;height:1.3cqw;border-radius:99px;background:var(--noche);opacity:.85}

/* ---------- Sellos ---------- */
.sello{overflow:visible}
.sello__borde{stroke:currentColor;stroke-width:3.2;fill:none}
.sello__borde--punto{stroke-dasharray:1.5 6;stroke-width:3.4}
.sello__anillo{font-family:var(--f);font-size:15.5px;font-weight:700;letter-spacing:2.6px;fill:currentColor;stroke:none}
.sello__grande{font-family:var(--f);font-size:40px;font-weight:750;letter-spacing:-1px;fill:currentColor;stroke:none}
.sello__grande--chico{font-size:34px}
.sello__chico{font-family:var(--f);font-size:12px;font-weight:700;letter-spacing:3px;fill:currentColor;stroke:none}
.sello--oro{color:var(--oro)}
.sello--tinta{color:var(--oro-tinta)}

/* ---------- Lema ---------- */
.lema{background:var(--verde);color:var(--crema);margin-top:clamp(5rem,8vw,7rem);padding:clamp(3rem,7vw,6rem) var(--margen);text-align:center}
.lema p:first-child{font-size:var(--t-mega);font-weight:700;letter-spacing:-.05em;line-height:.9;text-transform:uppercase}
.lema span{display:inline-block}
.lema span:nth-child(2){color:var(--oro)}
.lema__trad{margin-top:1.4rem;font-size:clamp(1.125rem,1.6vw,1.375rem);color:var(--papel)}

/* ---------- Secciones ---------- */
.seccion{max-width:var(--ancho);margin:var(--sep) auto 0;padding:0 var(--margen)}
.seccion__cab{display:grid;gap:1.1rem;max-width:44rem;margin-bottom:clamp(3rem,6vw,5rem)}
.seccion__cab--ancha{max-width:52rem}
.seccion__cab h2{font-size:var(--t-h2)}
.seccion__baja{font-size:clamp(1.125rem,1.35vw,1.25rem);max-width:38rem}

/* ---------- Cómo funciona: la ruta ---------- */
.ruta{list-style:none;margin:0;padding:0;display:grid;gap:3.25rem;position:relative}
.paso{position:relative;z-index:1;display:grid;grid-template-columns:88px 1fr;column-gap:1.5rem;row-gap:.6rem;align-items:start}
.paso h3{font-size:var(--t-h3);grid-column:2;padding-top:.6rem}
.paso p{grid-column:2;max-width:26rem;color:var(--verde-2)}
.paso__sello{grid-row:1 / span 2;width:88px;height:88px;border-radius:50%;background:var(--crema);border:2.5px dashed var(--verde);display:grid;place-items:center;position:relative}
.paso__sello::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--papel)}
.paso__sello svg{width:36px;height:36px;position:relative;z-index:1;stroke-width:1.8}
.paso__sello--oro{border-color:var(--oro-tinta);color:var(--oro-tinta)}
.paso__sello--oro::after{background:#E9DDB4}
@media (min-width:860px){
  .ruta{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem)}
  .paso{grid-template-columns:1fr;row-gap:1rem}
  .paso__sello{grid-row:auto;width:88px;height:88px;margin-bottom:1rem}
  .paso h3,.paso p{grid-column:1}
  .paso h3{padding-top:0}
}

/* ---------- El camino punteado (pasos e historias) ----------
   Una sola pieza: JS la mide entre la primera y la última parada, la orienta (vertical en
   móvil, horizontal en los pasos de escritorio) y le pasa --p (0 a 1) según el scroll.
   El trazo se revela con clip-path; los puntos avanzan solos (transform) mientras se ve. */
.camino{position:absolute;left:0;top:0;width:4px;height:var(--largo,0px);pointer-events:none;z-index:0;--p:0}
.camino[data-eje="x"]{width:var(--largo,0px);height:4px}
.camino__pista,.camino__trazo{position:absolute;inset:0;overflow:hidden}
.camino__pista{background:radial-gradient(circle,rgba(110,91,31,.3) 1.5px,transparent 2px) 0 0/4px 11px repeat-y}
.camino[data-eje="x"] .camino__pista{background-size:11px 4px;background-repeat:repeat-x}
.camino__trazo{clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0)}
.camino[data-eje="x"] .camino__trazo{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.camino__puntos{
  position:absolute;left:0;right:0;top:-22px;bottom:0;
  background:radial-gradient(circle,var(--oro-tinta) 1.9px,transparent 2.4px) 0 0/4px 11px repeat-y;
}
.camino[data-eje="x"] .camino__puntos{top:0;bottom:0;left:-22px;right:0;background-size:11px 4px;background-repeat:repeat-x}
.camino.anda .camino__puntos{animation:avanzaY 1.1s linear infinite}
.camino.anda[data-eje="x"] .camino__puntos{animation-name:avanzaX}
@keyframes avanzaY{to{transform:translateY(22px)}}
@keyframes avanzaX{to{transform:translateX(22px)}}
.camino__marca{
  position:absolute;left:2px;top:0;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;
  background:var(--crema);border:2px solid var(--oro-tinta);color:var(--oro-tinta);display:grid;place-items:center;
  transform:translate3d(0,calc(var(--p) * var(--largo,0px)),0);z-index:2;
  box-shadow:0 6px 12px -5px rgba(11,29,12,.4);
  opacity:var(--ver-marca,0);transition:opacity .3s;
}
.camino[data-eje="x"] .camino__marca{left:0;top:2px;transform:translate3d(calc(var(--p) * var(--largo,0px)),0,0)}
.camino__marca svg{width:20px;height:20px;stroke-width:1.8}
.camino.anda .camino__marca svg{animation:brujula 2.4s ease-in-out infinite alternate}
@keyframes brujula{from{transform:rotate(-25deg)}to{transform:rotate(20deg)}}

/* La parada que el camino ya alcanzó se "estampa" */
.js .parada{transition:transform .5s cubic-bezier(.3,1.5,.5,1), background-color .3s, border-color .3s, box-shadow .3s}
.paso__sello svg{transition:opacity .3s}
.js .paso__sello.parada:not(.alcanzada){transform:scale(.86)}
.js .paso__sello.parada:not(.alcanzada) svg{opacity:.4}
.paso__sello.alcanzada{box-shadow:0 0 0 6px rgba(189,163,87,.25)}

/* ---------- Historias: relatos en la ruta ---------- */
.historias__cuerpo{display:grid;gap:2.5rem}
.historias__foto{margin:0}
.historias__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio)}
.historias__foto figcaption{margin-top:.8rem;font-size:var(--t-chico);color:var(--verde-2);max-width:30rem}
.relatos{list-style:none;margin:0;padding:0;display:grid;gap:2.75rem;position:relative}
.relato{position:relative;padding-left:3rem}
.relato>*:not(.relato__punto){position:relative;z-index:1}
.relato__punto{position:absolute;z-index:1;left:6px;top:.1rem;width:22px;height:22px;border-radius:50%;background:var(--crema);border:3px solid var(--verde-2)}
.relato__punto.alcanzada{background:var(--verde);border-color:var(--verde);box-shadow:0 0 0 5px rgba(189,163,87,.3)}
.js .relato__punto:not(.alcanzada){transform:scale(.8)}
.relato__n{font-size:var(--t-chico);font-weight:600;color:var(--oro-tinta);font-variant-numeric:tabular-nums}
.relato h3{font-size:clamp(1.75rem,2.6vw,2.5rem);margin-top:.35rem}
.relato blockquote{margin:.85rem 0 0;max-width:32rem}
.relato blockquote p{font-size:clamp(1.0625rem,1.2vw,1.1875rem);line-height:1.6}
.relato blockquote p::before{content:"\201C"}
.relato blockquote p::after{content:"\201D"}
@media (min-width:960px){
  .historias__cuerpo{grid-template-columns:5fr 6fr;gap:clamp(3rem,6vw,6rem);align-items:start}
  .historias__foto{position:sticky;top:7rem}
  .historias__foto img{aspect-ratio:4/5}
  .relatos{gap:4rem;padding-top:.5rem}
  .relato{padding-left:3.5rem}
}

/* ---------- Legendaria ---------- */
.legendaria{
  position:relative;margin-top:clamp(4rem,8vw,7rem);background:var(--noche);color:var(--papel);
  border-radius:32px;padding:clamp(2rem,5vw,4.5rem);display:grid;gap:2rem;align-items:center;overflow:hidden;
}
.legendaria::before{content:"";position:absolute;inset:12px;border:2px dashed rgba(189,163,87,.55);border-radius:24px;pointer-events:none}
.legendaria__sello{position:relative;width:min(100%,340px);aspect-ratio:1;margin:0 auto}
.legendaria__sello .sello{position:absolute;inset:0;width:100%;height:100%}
.legendaria__sello img{position:absolute;inset:22%;width:56%;height:56%;object-fit:contain}
.legendaria__tipo{color:var(--oro);font-weight:650;font-size:1rem;letter-spacing:.01em}
.legendaria h3{font-size:clamp(2.25rem,4.4vw,4.25rem);color:var(--oro);margin-top:.9rem;font-weight:300;letter-spacing:-.02em;line-height:1.1}
.legendaria blockquote{margin:1.5rem 0 0;max-width:36rem}
.legendaria blockquote p{font-size:clamp(1.125rem,1.4vw,1.3125rem);color:var(--papel)}
@media (min-width:860px){.legendaria{grid-template-columns:minmax(260px,5fr) 7fr;gap:clamp(2.5rem,5vw,5rem)}}

/* ---------- También en el camino ---------- */
.tambien{margin-top:clamp(4rem,8vw,7rem);display:grid;gap:1.25rem}
.tambien__foto{margin:0;position:relative;border-radius:var(--radio);overflow:hidden;aspect-ratio:4/3}
.tambien__foto img{width:100%;height:100%;object-fit:cover}
.tambien__foto figcaption{position:absolute;left:12px;bottom:12px;background:var(--crema);color:var(--verde);font-weight:600;font-size:.9375rem;padding:.35rem .8rem;border-radius:999px}
.tambien__texto{padding-top:1rem}
.tambien__texto h3{font-size:var(--t-h3)}
.tambien__lista{list-style:none;padding:0;margin:1rem 0 1.25rem;display:grid;gap:.15rem}
.tambien__lista li{font-size:clamp(1.375rem,2vw,1.75rem);font-weight:600;letter-spacing:-.025em;display:flex;align-items:center;gap:.75rem}
.tambien__lista li::before{content:"";width:12px;height:12px;border-radius:50%;border:2.5px solid var(--oro-tinta);flex:none}
.tambien__texto p{color:var(--verde-2);max-width:24rem}
@media (min-width:720px){.tambien{grid-template-columns:1fr 1fr}.tambien__texto{grid-column:1 / -1}}
@media (min-width:1080px){.tambien{grid-template-columns:4fr 3fr 4fr;align-items:end}.tambien__foto--b{aspect-ratio:3/4}.tambien__texto{grid-column:auto;padding:0 0 .5rem}}

/* ---------- Funciones ---------- */
.funciones__cuerpo{display:grid;gap:2.5rem}
.funciones__lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;order:1}
.func-desc{margin-top:.9rem;text-align:center;font-size:1rem;color:var(--verde);min-height:3em}
.func{
  width:100%;display:flex;gap:1rem;align-items:flex-start;text-align:left;cursor:pointer;
  background:transparent;border:0;border-radius:18px;padding:1rem 1.1rem;
  transition:background-color .25s, transform .35s var(--ease);
}
.func svg{width:28px;height:28px;flex:none;margin-top:2px;color:var(--verde)}
.func span{display:flex;flex-direction:column;gap:.15rem;color:var(--verde-2);font-size:1rem}
.func strong{font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:640;letter-spacing:-.025em;color:var(--verde)}
.func:hover{background:var(--papel)}
.func:active{transform:scale(.985)}
.func[aria-pressed="true"]{background:var(--verde)}
.func[aria-pressed="true"] svg,.func[aria-pressed="true"] strong{color:var(--crema)}
.func[aria-pressed="true"] span{color:var(--papel)}
@media (max-width:959px){
  .func{width:auto;padding:.6rem .95rem;border-radius:999px;gap:.5rem;align-items:center;background:var(--papel)}
  .func svg{width:20px;height:20px;margin:0}
  .func span{font-size:0;gap:0}
  .func strong{font-size:1rem}
}
@media (min-width:960px){.func-desc{display:none}.funciones__lista{display:grid;gap:.4rem}}
.funciones__telefono{order:2;width:min(64%,260px);margin:0 auto}
.funciones__telefono img{transition:opacity .3s ease}
.funciones__telefono img.cambia{opacity:0}
.funciones__nota{margin-top:1rem;text-align:center;font-size:.875rem;color:var(--verde-2)}
.extras{order:3;list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.extras li{display:flex;gap:1rem;align-items:flex-start}
.extras svg{width:26px;height:26px;flex:none;color:var(--oro-tinta);margin-top:2px}
.extras span{display:flex;flex-direction:column;color:var(--verde-2);font-size:1rem}
.extras strong{color:var(--verde);font-size:1.1875rem;font-weight:640;letter-spacing:-.02em}
@media (min-width:960px){
  .funciones__cuerpo{grid-template-columns:5fr 4fr 3fr;align-items:center;gap:clamp(2rem,4vw,4.5rem)}
  .funciones__lista,.funciones__telefono,.extras{order:0}
  .funciones__telefono{width:100%;max-width:330px}
  .extras{padding-left:2rem;border-left:3px dotted var(--oro)}
}

.niveles{margin-top:clamp(4rem,8vw,7rem);background:var(--papel);border-radius:32px;padding:clamp(1.75rem,5vw,3.5rem) 0;display:grid;gap:1.5rem;overflow:hidden}
.niveles__texto,.niveles__escena{padding:0 clamp(1.5rem,5vw,3.5rem)}
.niveles__texto h3{font-size:clamp(2rem,3.4vw,3rem)}
.niveles__texto p{margin-top:.8rem;max-width:30rem;color:var(--verde-2)}
.niveles__escena{margin:0;display:grid;justify-items:center;text-align:center;gap:.5rem}
.niveles__marco{position:relative;width:min(70vw,280px);aspect-ratio:1;display:grid;place-items:center}
.niveles__marco::before{content:"";position:absolute;inset:6%;border-radius:50%;border:2.5px dashed rgba(110,91,31,.45);background:var(--crema)}
.niveles__marco img{position:relative;width:88%;height:88%;object-fit:contain;transition:opacity .22s ease, transform .45s var(--ease)}
.niveles__marco img.cambia{opacity:0;transform:scale(.9) translateY(6px)}
.niveles__escena figcaption{display:grid;gap:.1rem}
.niveles__escena figcaption span{font-size:var(--t-chico);font-weight:600;color:var(--oro-tinta);font-variant-numeric:tabular-nums}
.niveles__escena figcaption strong{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:650;letter-spacing:-.03em}
.niveles__riel{
  list-style:none;margin:0;padding:.5rem clamp(1.5rem,5vw,3.5rem) .75rem;display:flex;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scroll-padding-inline:clamp(1.5rem,5vw,3.5rem);
}
.niveles__riel::-webkit-scrollbar{display:none}
.niveles__riel li{flex:none;scroll-snap-align:start;position:relative}
.niveles__riel li+li::before{content:"";position:absolute;left:-7px;top:32px;width:14px;border-top:3px dotted rgba(110,91,31,.35)}
.niveles__riel li.logrado+li.logrado::before{border-top-color:var(--oro-tinta)}
.nivel{
  width:66px;min-height:92px;margin:0 7px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;justify-items:center;align-content:start;gap:.25rem;color:var(--verde-2);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;border-radius:12px;
}
.nivel img{width:64px;height:64px;border-radius:50%;background:var(--crema);border:2px solid transparent;object-fit:contain;padding:3px;
  filter:grayscale(.85);opacity:.55;transition:filter .3s, opacity .3s, border-color .3s, transform .35s var(--ease)}
.logrado .nivel img{filter:none;opacity:1}
.nivel[aria-pressed="true"]{color:var(--verde)}
.nivel[aria-pressed="true"] img{border-color:var(--verde);transform:scale(1.08)}
.nivel--oro[aria-pressed="true"] img{border-color:var(--oro-tinta)}
.nivel:active img{transform:scale(.94)}
@media (min-width:960px){
  .niveles{grid-template-columns:minmax(300px,4fr) 7fr;align-items:center;row-gap:1.25rem;padding:3.5rem 0}
  .niveles__texto{grid-column:2;grid-row:1;padding-left:0;align-self:end}
  .niveles__escena{grid-column:1;grid-row:1 / span 2}
  .niveles__marco{width:300px}
  .niveles__riel{grid-column:2;grid-row:2;padding-left:0;display:grid;grid-template-columns:repeat(10,1fr);row-gap:.75rem;overflow:visible;align-self:start}
  .nivel{margin:0 auto}
  .niveles__riel li:nth-child(10n+1)::before{display:none}
}

/* ---------- Registro ---------- */
.registro{max-width:none;padding:var(--sep) var(--margen);background:var(--papel)}
.registro__in{max-width:calc(var(--ancho) - 2 * var(--margen));margin:0 auto;display:grid;gap:3rem}
.registro__cab{display:grid;gap:1.1rem;align-content:start}
.registro__cab h2{font-size:var(--t-h2)}
.registro__touri{width:min(40%,260px);margin-top:.5rem}
@media (min-width:960px){.registro__touri{width:min(56%,260px)}}
@media (min-width:960px){
  .registro__in{grid-template-columns:5fr 7fr;column-gap:clamp(3rem,6vw,6rem);align-items:start}
  .registro__cab{position:sticky;top:7rem}
}

.ficha{position:relative;background:var(--crema);border-radius:28px;padding:clamp(1.5rem,4vw,3rem)}
.ficha::before{content:"";position:absolute;inset:10px;border:2px dashed rgba(110,91,31,.45);border-radius:20px;pointer-events:none}
.ficha__sello{position:absolute;top:-2.4rem;right:-.6rem;width:118px;transform:rotate(9deg);pointer-events:none}
.ficha__cuerpo{position:relative;display:grid;gap:1.5rem}
.ficha__fila{display:grid;gap:1.5rem}
.ficha__cuerpo[hidden]{display:none}
@media (min-width:640px){.ficha__fila{grid-template-columns:1fr 1fr}}

.campo{display:grid;gap:.5rem;margin:0;padding:0;border:0;min-width:0}
.campo legend,.campo>label{font-weight:620;font-size:1rem;padding:0;margin-bottom:.5rem}
.campo>label{margin-bottom:0}
.campo--tipo legend{font-size:1.1875rem;letter-spacing:-.015em;padding-right:120px}
.opcional{font-weight:450;color:var(--verde-2)}
.obligatorio{font-weight:450;color:var(--oro-tinta)}
.campo input[type=text],.campo input[type=email],.campo textarea{
  width:100%;font:inherit;font-size:1.0625rem;color:var(--verde);background:#fff;
  border:1.5px solid var(--borde);border-radius:14px;padding:.85rem 1rem;
  transition:border-color .2s, box-shadow .2s;
}
.campo textarea{resize:vertical;min-height:7.5rem}
.campo input::placeholder,.campo textarea::placeholder{color:#5F6A5B}
.campo input:hover,.campo textarea:hover{border-color:var(--verde)}
.campo input:focus,.campo textarea:focus{outline:0;border-color:var(--verde);box-shadow:0 0 0 3px rgba(31,78,27,.22)}
.campo input:disabled{background:#ECE8DE;border-style:dashed;color:var(--verde-2);cursor:not-allowed}
.campo.con-error input,.campo.con-error textarea{border-color:var(--terra);box-shadow:0 0 0 3px rgba(139,81,51,.18)}

.opciones{display:flex;flex-wrap:wrap;gap:.6rem}
.opcion{position:relative;cursor:pointer}
.opcion input,.segmento input{position:absolute;opacity:0;width:1px;height:1px}
.opcion span{display:inline-block;padding:.7rem 1.1rem;border-radius:999px;border:1.5px solid var(--borde);font-weight:550;font-size:1rem;transition:background-color .2s,border-color .2s}
.opcion:hover span{border-color:var(--verde)}
.opcion input:checked + span{background:var(--verde);border-color:var(--verde);color:var(--crema)}
.opcion input:focus-visible + span,.segmento input:focus-visible + span{outline:3px solid var(--oro-tinta);outline-offset:3px}

.segmento{display:inline-flex;background:#fff;border:1.5px solid var(--borde);border-radius:999px;padding:3px;width:max-content}
.segmento label{cursor:pointer;position:relative}
.segmento span{display:block;padding:.6rem 1rem;border-radius:999px;font-weight:550;font-size:1rem}
.segmento input:checked + span{background:var(--verde);color:var(--crema)}

.casilla{display:flex;gap:.8rem;align-items:flex-start;cursor:pointer;font-size:1rem}
.casilla input{appearance:none;flex:none;width:24px;height:24px;margin:1px 0 0;border:1.8px solid var(--borde);border-radius:7px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.casilla input::after{content:"";width:11px;height:6px;border:solid var(--crema);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.casilla input:checked{background:var(--verde);border-color:var(--verde)}
.casilla input:checked::after{opacity:1}
.casilla small{display:block;color:var(--verde-2);font-size:.9375rem}
.casilla--anon{background:var(--papel);border-radius:16px;padding:1rem 1.1rem;font-weight:600}
.casilla--anon small{font-weight:450}
.casilla.con-error input{border-color:var(--terra);box-shadow:0 0 0 3px rgba(139,81,51,.18)}

#datos-personales{transition:opacity .25s}
#datos-personales.anonimo{opacity:.55}

.error{display:flex;gap:.5rem;align-items:flex-start;color:var(--terra);font-weight:550;font-size:.9375rem}
.error svg{width:18px;height:18px;flex:none;margin-top:2px}
.error[hidden]{display:none}

.captcha{display:flex;align-items:center;gap:.8rem;background:#E7E4DC;color:#4A4F45;border-radius:10px;padding:1rem 1.1rem;font-weight:600;font-size:.9375rem;max-width:320px}
.captcha__caja{width:24px;height:24px;border-radius:5px;border:2px solid #7A7F73;background:#fff;flex:none}
.captcha small{margin-left:auto;font-weight:450;font-size:.8125rem;color:#555A50}

.ficha__enviado{position:relative;display:grid;justify-items:center;text-align:center;gap:1rem;padding:2rem 0 1rem}
.ficha__enviado[hidden]{display:none}
.ficha__enviado img{width:170px}
.ficha__enviado h3{font-size:clamp(2rem,3.6vw,3rem)}
.ficha__enviado p{max-width:28rem;color:var(--verde-2)}
.enlace{background:none;border:0;font-weight:600;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;padding:.5rem}
.ficha.enviada .ficha__sello{transform:rotate(-6deg) scale(1.08);color:var(--verde)}


/* ---------- Preguntas ---------- */
.preguntas{display:grid;gap:2rem}
.preguntas .seccion__cab{margin-bottom:0;align-content:start}
.preguntas__touri{width:min(48%,220px);margin-top:1rem}
@media (min-width:960px){.preguntas{grid-template-columns:5fr 7fr;column-gap:clamp(3rem,6vw,6rem)}}
.acordeon details{border-bottom:3px dotted rgba(110,91,31,.55)}
.acordeon details:first-child{border-top:3px dotted rgba(110,91,31,.55)}
.acordeon summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.4rem .25rem;font-size:clamp(1.25rem,1.8vw,1.625rem);font-weight:300;letter-spacing:-.02em;line-height:1.25;
  transition:color .2s;
}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{
  content:"";flex:none;width:40px;height:40px;border-radius:50%;background:var(--papel)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E1B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/20px no-repeat;
  transition:transform .35s var(--ease), background-color .2s;
}
.acordeon summary:hover::after{background-color:#E3E2AE}
.acordeon details[open] summary::after{transform:rotate(45deg)}
.acordeon details p{padding:0 3.5rem 1.6rem .25rem;max-width:42rem}
/* Apertura suave: la altura se interpola donde el navegador lo sabe hacer (::details-content +
   interpolate-size); en el resto se abre de golpe, que también está bien. La respuesta entra con
   un desliz corto en todos. Al cerrar no se anima la respuesta: salir es más rápido que entrar. */
.acordeon details{interpolate-size:allow-keywords}
.acordeon details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.acordeon details[open]::details-content{block-size:auto}
.acordeon details[open] p{animation:respuesta .5s .05s var(--ease) both}
@keyframes respuesta{from{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.acordeon details::details-content{transition:none}}

/* ---------- Contacto ---------- */
.contacto{margin-top:var(--sep);background:var(--verde);color:var(--crema);display:grid}
.contacto__foto{margin:0;aspect-ratio:16/10;overflow:hidden}
.contacto__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.contacto__texto{padding:clamp(3rem,7vw,6rem) var(--margen);display:grid;gap:1.2rem;align-content:center}
.contacto h2{font-size:var(--t-h2);color:var(--crema)}
.contacto__texto>p{max-width:30rem;color:var(--papel)}
.canales{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.75rem;max-width:30rem}
.canal{display:flex;align-items:center;gap:1rem;text-decoration:none;background:var(--noche);border-radius:20px;padding:1.1rem 1.3rem;transition:background-color .25s, transform .35s var(--ease)}
.canal svg{width:32px;height:32px;flex:none;color:var(--oro)}
.canal span{display:flex;flex-direction:column;font-size:.9375rem;color:var(--papel)}
.canal strong{font-size:1.375rem;font-weight:640;letter-spacing:-.02em;color:var(--crema)}
.canal:hover{background:#06120A;transform:translateX(4px)}
@media (min-width:960px){.contacto{grid-template-columns:1fr 1fr}.contacto__foto{aspect-ratio:auto;min-height:620px}}

/* ---------- Pie ---------- */
.pie{background:var(--noche);color:var(--papel)}
.pie__in{max-width:var(--ancho);margin:0 auto;padding:clamp(3.5rem,7vw,6rem) var(--margen) 2rem;display:grid;gap:2rem}
.pie__marca{width:min(100%,640px);height:auto}
.pie__lema{font-size:1.125rem;max-width:28rem}
.pie__nav{display:flex;flex-wrap:wrap;gap:1.75rem}
.pie__nav a{font-weight:600;text-decoration:none;padding:.25rem 0;border-bottom:2px dotted var(--oro)}
.pie__nav a:hover{color:var(--oro)}
.idioma--pie{background:#1A2E1B;width:max-content}
.idioma--pie .idioma__op{color:var(--papel)}
.idioma--pie .idioma__op[aria-pressed="true"]{background:var(--oro);color:var(--noche)}
.idioma--pie .idioma__op:hover:not([aria-pressed="true"]){background:#26402A}
.pie__legal{font-size:.875rem;color:#C9C8A3;padding-top:1.5rem;border-top:2px dotted rgba(189,163,87,.4)}
@media (min-width:960px){
  .pie__in{grid-template-columns:1fr auto;align-items:end}
  .pie__marca,.pie__lema{grid-column:1}
  .pie__nav{grid-column:1}
  .idioma--pie{grid-column:2;grid-row:3;justify-self:end}
  .pie__legal{grid-column:1 / -1}
}


/* ---------- Movimiento ---------- */
.js .entra{opacity:0;transform:translateY(24px)}
.js .entra.visible{opacity:1;transform:none;transition:opacity .8s var(--ease), transform .9s var(--ease);transition-delay:var(--retraso,0ms)}
.js .estampa{opacity:0;transform:scale(1.35) rotate(-24deg)}
.js .estampa.visible{opacity:1;transition:opacity .35s ease, transform .55s cubic-bezier(.3,1.6,.5,1);transition-delay:var(--retraso,0ms)}
.js .sello--hero.estampa.visible{transform:rotate(-12deg)}
.js .ficha__sello.estampa.visible{transform:rotate(9deg)}
.js .legendaria__sello .estampa.visible,.js .paso__sello.estampa.visible{transform:none}
.hero__foto img{animation:deriva 22s ease-in-out infinite alternate}
/* Héroe: entra solo con CSS al cargar, sin esperar a sitio.js (el H1 nunca depende de JS) */
.aparece{animation:aparece .8s var(--ease) both}
.hero__baja.aparece{animation-delay:75ms}
.hero__acciones.aparece{animation-delay:150ms}
.tiendas.aparece{animation-delay:225ms}
.destino.aparece{animation-delay:300ms}
@keyframes aparece{from{opacity:0;transform:translateY(24px)}}
/* Salvaguarda: si sitio.js no llega a correr (marca html.js-listo), a los 3 s se muestra todo */
.js:not(.js-listo) .entra,.js:not(.js-listo) .estampa{animation:salvaguarda .4s 3s forwards}
@keyframes salvaguarda{to{opacity:1;transform:none}}
@keyframes deriva{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .js .entra,.js .estampa{opacity:1;transform:none}
  .js .sello--hero.estampa{transform:rotate(-12deg)}
  .js .ficha__sello.estampa{transform:rotate(9deg)}
}

/* ---------- Al dedo: objetivos de 44 px y nada que dependa del hover ---------- */
.idioma__op{min-height:44px;min-width:44px}
.boton--chico{min-height:44px}
.func{min-height:48px}
.opcion span{display:inline-flex;align-items:center;min-height:46px}
.segmento span{display:flex;align-items:center;min-height:44px}
.enlace{min-height:44px}
.pie__nav a{display:inline-flex;align-items:center;min-height:44px}
.tienda{min-height:56px}
@media (hover:none){
  .canal:hover{transform:none;background:var(--noche)}
  .boton:hover svg{transform:none}
  .func:hover:not([aria-pressed="true"]){background:var(--papel)}
  .tienda:hover{background:transparent}
}
.canal:active{transform:scale(.98)}
a,button,summary,label{-webkit-tap-highlight-color:rgba(31,78,27,.12)}

@media (prefers-reduced-motion:reduce){
  .camino__puntos,.camino__marca svg{animation:none!important}
  .js .paso__sello.parada,.js .relato__punto{transform:none}
}

/* ---------- Ritmo en móvil ---------- */
.registro{padding:clamp(3.75rem,9vw,var(--sep)) var(--margen)}
@media (max-width:959px){
  .registro__cab,.preguntas .seccion__cab{grid-template-columns:1fr auto;column-gap:.75rem}
  .registro__cab>*,.preguntas .seccion__cab>*{grid-column:1 / -1}
  .registro__cab h2,.preguntas .seccion__cab h2{grid-column:1;grid-row:1}
  .registro__touri,.preguntas__touri{grid-column:2!important;grid-row:1;align-self:end;width:clamp(88px,26vw,130px);margin:0}
  .preguntas .seccion__cab{margin-bottom:.5rem}
}
@media (max-width:959px){
  .legendaria__sello{width:min(100%,250px)}
}
@media (max-width:600px){.hero h1{max-width:none}}
.barra__marca{display:block;padding:1px 0}

/* =====================================================================
   SITIO FINAL — lo que no existía en la maqueta
   ===================================================================== */
.oculto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Selector de idioma: ahora son enlaces entre páginas */
a.idioma__op{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.idioma__op[aria-current="page"]{background:var(--verde);color:var(--crema)}
.idioma__op:hover:not([aria-current="page"]){background:var(--crema)}
.idioma--pie .idioma__op[aria-current="page"]{background:var(--oro);color:var(--noche)}
.idioma--pie .idioma__op:hover:not([aria-current="page"]){background:#26402A}

/* Primer destino: el sitio no queda amarrado al Casco */
.destino{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;margin-top:1.6rem;padding-top:1.1rem;border-top:2px dotted rgba(189,163,87,.6);max-width:34rem;font-size:var(--t-chico)}
.destino__aqui{display:inline-flex;align-items:center;gap:.45rem;font-weight:650;color:var(--crema)}
.destino__aqui svg{width:20px;height:20px;color:var(--oro);flex:none}
.destino__luego{color:var(--papel)}

/* Botones: variante sobre oscuro y estado ocupado */
.boton--claro{background:var(--crema);color:var(--verde)}
.boton--claro:hover{background:var(--papel)}
.boton[aria-busy="true"]{cursor:progress;opacity:.8}

/* Formulario real */
.trampa{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.verificacion{display:grid;gap:.5rem;min-height:65px;min-width:0}
.ficha__aviso{display:flex;gap:.6rem;align-items:flex-start;background:#F3E4DA;color:#6A3A22;border-radius:14px;padding:.9rem 1rem;font-weight:550;font-size:.9375rem}
.ficha__aviso svg{width:20px;height:20px;flex:none;margin-top:1px}
.ficha__aviso[hidden]{display:none}

/* Contacto: enlaces aún sin dato */
.canal[data-pendiente]{cursor:default}

/* Pie: correo y botón que reabre el aviso de cookies */
.pie__cookies{background:none;border:0;padding:.25rem 0;min-height:44px;font-weight:600;color:var(--papel);border-bottom:2px dotted var(--oro);cursor:pointer;display:inline-flex;align-items:center}
.pie__cookies:hover{color:var(--oro)}
.pie__contacto{font-size:.9375rem;color:#C9C8A3}
.pie__contacto a{color:var(--papel)}

/* ---------- Aviso de cookies (Ley 81 de 2019) ----------
   Cada pieza fija su color: el título NUNCA hereda el de h2/h3 (bug de título negro sobre negro). */
.consent{position:fixed;z-index:60;left:.75rem;right:.75rem;bottom:.75rem;
  max-width:34rem;margin-left:auto;background:var(--noche);color:var(--papel);border-radius:20px;padding:1.15rem 1.2rem 1.2rem;
  box-shadow:0 18px 40px -12px rgba(11,29,12,.55);border:1px solid #2B402C;
  transform:translateY(calc(100% + 2rem));opacity:0;transition:transform .45s var(--ease),opacity .3s}
.consent[hidden]{display:none}
.consent.ver{transform:none;opacity:1}
.consent__titulo{margin:0;font-size:1.0625rem;font-weight:650;letter-spacing:-.015em;line-height:1.3;color:var(--crema)}
.consent__texto{margin-top:.4rem;font-size:.9375rem;line-height:1.5;color:var(--papel)}
.consent__texto a{color:var(--crema)}
.consent__acciones{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.consent__acciones .boton{padding:.7rem 1.2rem;font-size:.9375rem;min-height:44px}
.consent__rechazar{background:transparent;color:var(--crema);border:1.5px solid #6D7F6B}
.consent__rechazar:hover{background:#1A2E1B}

/* ---------- Página de documento (legales, soporte) ---------- */
.doc{max-width:48rem;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) var(--margen) var(--sep)}
.doc__cab{display:grid;gap:1rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.doc__cab h1{font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:-.02em;line-height:1.1}
.doc__fecha{font-size:var(--t-chico);color:var(--verde-2)}
.doc__indice{background:var(--papel);border-radius:20px;padding:1.25rem 1.4rem;margin-bottom:2.5rem}
.doc__indice ol{margin:.5rem 0 0;padding-left:1.25rem;display:grid;gap:.35rem}
.prosa{font-size:1.0625rem;line-height:1.7}
.prosa>*+*{margin-top:1rem}
.prosa h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:3rem;letter-spacing:-.02em;line-height:1.1;scroll-margin-top:6rem}
.prosa h3{font-size:1.25rem;margin-top:2rem;letter-spacing:-.02em;line-height:1.2}
.prosa ul,.prosa ol{padding-left:1.3rem}
.prosa li+li{margin-top:.4rem}
.prosa a{font-weight:600;color:var(--verde)}
.prosa table{width:100%;border-collapse:collapse;font-size:.9375rem;display:block;overflow-x:auto}
.prosa th,.prosa td{text-align:left;padding:.7rem .8rem;border-bottom:2px dotted rgba(110,91,31,.4);vertical-align:top}
.prosa th{font-weight:650;background:var(--papel)}
.nota{background:var(--papel);border-radius:16px;padding:1rem 1.15rem;border:2px dashed rgba(110,91,31,.45)}
.nota--alerta{background:#F3E4DA;border-color:rgba(139,81,51,.55);color:#5C3420}

@media (prefers-reduced-motion:reduce){.consent{transition:none}}

/* Teléfonos de 360 px: los dos botones de tienda no deben ensanchar la columna del héroe */
@media (max-width:959px){.hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:380px){
  .barra__in{gap:.75rem}
  .barra__acciones{gap:.5rem}
  .barra .boton--chico{padding:.7rem .85rem}
  .tiendas{gap:.45rem}
  .tienda{padding:.5rem .55rem;gap:.4rem}
  .tienda__ico{width:20px;height:20px}
  .tienda span{font-size:.8125rem;white-space:normal}
  .tienda small{font-size:.75rem}
}

/* <picture> (versión animada o quieta según prefers-reduced-motion) no debe crear caja:
   así la <img> sigue siendo la pieza del grid o del posicionado, igual que en la maqueta */
picture{display:contents}