/* ═══════════════════════════════════════════════════════════════
   EL VIAJE DE VUELTA · MARRUECOS · 9-16 enero 2027
   Sistema visual heredado del folleto (viajes/folleto.html).
   Fraunces 400 (NUNCA negrita) + Figtree 300.

   v2 · 9-sep-2026 — REDISEÑO. Tres cosas nuevas y ninguna toca el copy:
     1. ESCALA DE RADIO (--r1…--r4 + píldora). Antes no había ni uno.
     2. COLOR SACADO DE LAS PROPIAS FOTOS (arena, terracota, índigo,
        noche, oliva). Muestreado píxel a píxel del banco de imágenes,
        todos en la misma franja de saturación. Nunca decorativo:
        fondos alternos, cifras, filetes y estados de botón.
     3. MOVIMIENTO: parallax en las bandas, entradas con recorrido real
        (48 px + escala .988→1) y escalonadas, y cuatro @keyframes.
        Todo con transform/opacity. Todo se apaga con reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ─── superficies ─── */
  --crema:#F8F6F2;
  --blanco:#FFFFFF;
  --arena-luz:#F1EAE0;          /* fondo alterno cálido */
  --tinta:#1E1E1E;
  --acento:#B7B1A7;
  --gris:#6A6A6A;
  --filete:rgba(183,177,167,.55);

  /* ─── color de las fotos ───
     Muestreado del banco: 22-A-huella-4x4 y w1-05-mesa-grupo (arena),
     04-B-puerta-indigo y 09-A-atlas (terracota), 26-A-via-lactea y
     43-B-mesa-desierto (índigo), W04-A-noche-estrellas (noche),
     40-B-hamam y 05-A-pueblo-atlas (oliva). Saturación 25-38 % en los
     cinco: son variaciones del mismo aire, no un arcoíris. */
  --arena:#B7A188;
  --terracota:#8B5240;
  --indigo:#2E4562;
  --noche:#18212D;
  --oliva:#6C6E52;

  /* ─── radios ─── */
  --r1:6px;
  --r2:14px;
  --r3:clamp(18px,4.5vw,26px);
  --r4:clamp(22px,6vw,44px);
  --rp:999px;

  /* ─── movimiento ─── */
  --ease:cubic-bezier(.22,.61,.24,1);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ancho:64rem;
  --gutter:1.5rem;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
  background:var(--noche);       /* lo que asoma detrás de las curvas */
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:300;
  font-size:1.0625rem;      /* 17px */
  line-height:1.75;
  overflow-x:hidden;
  max-width:100%;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* RED DE SEGURIDAD contra el desbordamiento horizontal.
   No sustituye a arreglar la causa: solo evita que un descuido
   futuro rompa el scroll en móvil. */
img,video,svg,iframe,table,pre{max-width:100%}
img,video{display:block;height:auto}
code{overflow-wrap:break-word;word-break:break-word}

/* ─────────── tipografía ─────────── */

h1,h2,h3,h4,.serif{
  font-family:var(--serif);
  font-weight:400;                 /* NUNCA negrita */
  font-variation-settings:"SOFT" 0,"WONK" 0;
  letter-spacing:-.02em;
  line-height:1.08;
}
h1{font-size:clamp(3.15rem,15.5vw,6.6rem);letter-spacing:-.038em;line-height:.92}
h2{font-size:clamp(2.05rem,8.4vw,3.6rem);line-height:1.05}
h3{font-size:clamp(1.35rem,5.2vw,1.85rem);line-height:1.2}
h4{font-size:1.1rem;line-height:1.3;letter-spacing:-.01em}

.antetitulo{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.3em;
  color:var(--gris);
  line-height:1.6;
}

p{max-width:34rem}
p + p{margin-top:1.15em}

.grande{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,6vw,2.15rem);
  line-height:1.3;
  letter-spacing:-.025em;
  max-width:20ch;
}

.chico{font-size:.9rem;line-height:1.7;color:var(--gris)}
strong{font-weight:500}
em{font-style:italic}

a{color:inherit}

hr{
  border:0;
  border-top:.5px solid var(--acento);
  width:3rem;
  margin:1.75rem 0;
}
hr.ancho{width:100%;border-top-color:var(--filete)}

/* ─────────── estructura ─────────── */

.envoltorio{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.estrecho{max-width:44rem}

section{
  /* Ritmo vertical. Se apretó el 9-sep-2026: el aire de 8rem arriba y
     abajo en trece secciones seguidas no estaba trabajando, solo
     alargaba el scroll. 6,5rem sigue separando de sobra. */
  padding:clamp(3.5rem,10.5vw,6.5rem) 0;
  background:var(--crema);
  position:relative;
}
section.blanca{background:var(--blanco)}
section.arena{background:var(--arena-luz)}
section.tinta{background:var(--tinta);color:var(--crema)}
section.tinta .antetitulo{color:var(--acento)}
section.tinta hr{border-top-color:rgba(183,177,167,.4)}

/* ─────────── LAS CURVAS ───────────
   La hoja de contenido monta sobre la banda de imagen con una curva
   generosa. Es el gesto que quita las "líneas muy afiladas": no hay
   ni un encuentro a inglete entre una foto y el papel. */
.curva{
  border-top-left-radius:var(--r4);
  border-top-right-radius:var(--r4);
  margin-top:calc(-1 * var(--r4));
  z-index:3;
}
.curva-inf{
  border-bottom-left-radius:var(--r4);
  border-bottom-right-radius:var(--r4);
  margin-bottom:calc(-1 * var(--r4));
  z-index:3;
}
.pie.curva{padding-top:calc(3.5rem + var(--r4))}

/* ─────────── imagen a sangre ─────────── */

.pleno{
  position:relative;
  min-height:80vh;
  min-height:80svh;
  display:flex;
  align-items:flex-end;
  padding:0;
  overflow:hidden;
  background:var(--noche);
  z-index:1;
}
.pleno.corta{min-height:60vh;min-height:60svh}
.pleno.alta{min-height:92vh;min-height:92svh}

/* La capa es la que mueve el parallax; el .fondo, dentro, es el que
   hace la deriva lenta. Separados para que las dos transformaciones
   no se pisen. */
.capa{position:absolute;left:0;right:0;top:-70px;bottom:-70px;z-index:0}
.pleno .fondo,
.pleno-fondo .fondo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.capa picture{display:contents}

.pleno .velo,
.pleno-fondo .velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(14,12,10,.76) 0%,
    rgba(14,12,10,.40) 34%,
    rgba(14,12,10,.08) 64%,
    rgba(14,12,10,.26) 100%);
}
.velo.suave{
  background:linear-gradient(to top,
    rgba(248,246,242,.72) 0%,
    rgba(248,246,242,.20) 32%,
    rgba(248,246,242,0) 60%);
}
.velo.fuerte{
  background:linear-gradient(to bottom,
    rgba(24,33,45,.90) 0%,
    rgba(24,33,45,.80) 45%,
    rgba(24,33,45,.90) 100%);
}
.pleno .encima{
  position:relative;z-index:2;
  width:100%;
  padding:clamp(3rem,9vw,5.5rem) 0 clamp(3.5rem,10vw,6rem);
  color:#fff;
}
.pleno .encima h1,
.pleno .encima h2,
.pleno .encima h3,
.pleno .encima p,
.pleno .encima .grande{color:#fff}
.pleno .encima .antetitulo{color:rgba(255,255,255,.82)}
.pleno .encima hr{border-top-color:rgba(255,255,255,.45)}
.pleno .encima h2{font-size:clamp(2.4rem,9.6vw,4.4rem)}

/* Banda clara: la foto es de tono alto, así que el texto va en tinta. */
.pleno.clara .encima{color:var(--tinta)}
.pleno.clara .encima h1,
.pleno.clara .encima h2,
.pleno.clara .encima p,
.pleno.clara .encima .grande{color:var(--tinta)}
.pleno.clara .encima .antetitulo{color:var(--gris)}

/* Banda de silencio: ni una palabra, a propósito. */
.pleno.silencio{min-height:46vh;min-height:46svh}
@media (min-width:820px){.pleno.silencio{min-height:56vh;min-height:56svh}}

/* Sección con vídeo/foto de fondo pero con contenido normal encima. */
.pleno-fondo{
  position:relative;
  overflow:hidden;
  background:var(--noche);
  padding:clamp(3.75rem,11vw,7rem) 0;
  z-index:1;
}
.pleno-fondo > .envoltorio{position:relative;z-index:2}
/* Explícito para que no dependa del orden de las reglas: la banda con
   fondo monta sobre la anterior, y la hoja siguiente monta sobre ella. */
.pleno-fondo.curva{z-index:2}

/* Panel de papel flotando sobre la imagen. Resuelve de una vez la
   legibilidad y mete la curva grande en el centro de la página. */
.panel{
  background:var(--crema);
  border-radius:var(--r4);
  padding:clamp(1.75rem,7vw,3.5rem);
  box-shadow:0 40px 90px -40px rgba(10,14,20,.75);
}
.panel > .antetitulo:first-child{margin-top:0}

/* Pie recurrente de la pieza, discreto, sobre las bandas mudas.
   Es el mismo literal que ya está en el pie de página.
   El bottom SUMA var(--r4) porque la sección siguiente lleva .curva y
   monta sobre la banda justo esos píxeles: sin sumarlos, la curva se
   comía la línea por abajo. */
.firma-banda{
  position:absolute;
  left:0;right:0;
  bottom:calc(var(--r4) + clamp(1.25rem,4.5vw,2.25rem));
  z-index:2;
  padding:0 var(--gutter);
  /* A la derecha, no centrada: su banda es de media pantalla, así que
     centrada cae justo debajo del botón fijo del índice, que vive
     siempre arriba a la izquierda. Verificado el 10-sep-2026. */
  text-align:right;
  font-family:var(--serif);
  font-weight:400;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:rgba(30,30,30,.5);
}
/* En móvil la línea entera medía más de 400 px con ese interletraje y
   la banda la cortaba por los dos lados. Se aprieta, no se recorta:
   el literal es el mismo que en el pie de página. */
@media (max-width:559.98px){
  .firma-banda{font-size:.5rem;letter-spacing:.14em}
}
.pleno:not(.clara) .firma-banda{color:rgba(255,255,255,.55)}

/* ─────────── pantalla partida ─────────── */

.partida{display:block}
.partida .media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#EDEAE4;
  border-radius:var(--r3);
  box-shadow:0 30px 60px -38px rgba(30,30,30,.55);
}
.partida .media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.partida .texto{padding:clamp(2.25rem,8vw,3rem) 0 0}

@media (min-width:820px){
  .partida{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2.5rem,5vw,4.5rem);
    align-items:center;
  }
  .partida .media{aspect-ratio:3/4}
  .partida .texto{padding:0}
  .partida.invertida .media{order:2}
  .partida:hover .media img{transform:scale(1.045)}
}

/* Una imagen que se sale del margen — solo cuando hay sitio de sobra,
   para que no pueda generar scroll horizontal en ningún ancho. */
@media (min-width:1200px){
  .partida.desbordada .media{width:calc(100% + 5rem)}
  .partida.desbordada.invertida .media{margin-right:-5rem}
  .partida.desbordada:not(.invertida) .media{margin-left:-5rem}
}

/* ─────────── listas con filete, nunca viñetas ─────────── */

.lista{list-style:none;margin-top:1.5rem}
.lista li{
  font-size:1rem;
  line-height:1.6;
  padding:.85rem 0;
  border-bottom:.5px solid var(--filete);
  display:flex;
  gap:1.1rem;
  align-items:baseline;
}
.lista li:first-child{border-top:.5px solid var(--filete)}
.lista li .n{
  font-family:var(--serif);
  font-weight:400;
  color:var(--terracota);
  font-size:.85rem;
  flex:0 0 1.9rem;
  letter-spacing:.06em;
}
.lista.simple li{display:block}
.lista.no li{color:var(--gris)}

/* ─────────── cifras ─────────── */

.cifras{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1.75rem,6vw,3rem) 1rem;
  margin-top:2.5rem;
}
@media (min-width:640px){.cifras{grid-template-columns:repeat(4,1fr)}}
.cifra{
  padding-top:1.1rem;
  border-top:.5px solid var(--filete);
}
.cifra .n{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem,12vw,4.4rem);
  line-height:1;
  letter-spacing:-.045em;
  color:var(--terracota);
}
.cifra .t{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--gris);
  margin-top:.6rem;
  line-height:1.4;
}

/* ─────────── bloques centrados (romper la columna única) ─────────── */

.centrado{text-align:center}
.centrado p,.centrado .grande,.centrado h1,.centrado h2{margin-left:auto;margin-right:auto}
.centrado hr{margin-left:auto;margin-right:auto}
.centrado .cifra{text-align:center}

/* ─────────── dos columnas ─────────── */

.dos{display:block}
.dos > * + *{margin-top:2.75rem}
@media (min-width:760px){
  .dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
  .dos > * + *{margin-top:0}
}

/* ─────────── estado del grupo (escasez real) ─────────── */

.estado{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  border:.5px solid var(--acento);
  padding:.55rem 1.15rem;
  font-family:var(--serif);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:400;
  color:var(--tinta);
  background:rgba(248,246,242,.9);
  border-radius:var(--rp);
}
.pleno .estado,.pleno-fondo .estado{
  color:#fff;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.estado .punto{
  position:relative;
  width:6px;height:6px;border-radius:50%;
  background:var(--terracota);
  flex:0 0 auto;
}
.pleno .estado .punto{background:#fff}
.estado .punto::after{
  content:"";
  position:absolute;inset:-4px;
  border-radius:50%;
  border:1px solid currentColor;
  color:inherit;
  opacity:0;
}
.estado .punto{animation:latido 3s ease-in-out infinite}
.estado .punto::after{animation:halo 3s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes halo{
  0%{opacity:.5;transform:scale(.7)}
  70%{opacity:0;transform:scale(1.9)}
  100%{opacity:0;transform:scale(1.9)}
}

/* ─────────── tramos de precio ─────────── */

.tramos{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:2rem;
}
.tramos th{
  font-weight:400;
  font-family:var(--serif);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--gris);
  text-align:left;
  padding:0 .9rem .75rem;
  border-bottom:.5px solid var(--filete);
}
.tramos th:first-child{padding-left:1rem}
.tramos th:last-child{text-align:right;padding-right:1rem}
.tramos td{
  padding:1.1rem .9rem;
  border-bottom:.5px solid var(--filete);
  font-size:.98rem;
  vertical-align:baseline;
  line-height:1.45;
}
.tramos td:first-child{padding-left:1rem}
.tramos td:last-child{
  text-align:right;
  padding-right:1rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.35rem;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.tramos .quedan{
  display:block;
  font-size:.78rem;
  color:var(--gris);
  letter-spacing:.02em;
  margin-top:.15rem;
}
.tramos tr.agotado td{color:var(--acento)}
.tramos tr.agotado td:last-child{text-decoration:line-through}
/* El tramo vigente ya no se marca con un punto suelto: se marca con
   una ficha de color arena y esquinas redondeadas. */
.tramos tr.vigente td{
  background:var(--arena-luz);
  border-bottom-color:transparent;
}
.tramos tr.vigente td:first-child{
  border-radius:var(--r2) 0 0 var(--r2);
  box-shadow:inset 2px 0 0 var(--terracota);
}
.tramos tr.vigente td:last-child{border-radius:0 var(--r2) var(--r2) 0}

/* ─────────── cajas ─────────── */

.caja{
  border:.5px solid var(--filete);
  border-radius:var(--r3);
  padding:clamp(1.5rem,6vw,2.25rem);
  background:var(--blanco);
}
section.blanca .caja,section.arena .caja{background:var(--crema)}
.panel .caja{background:var(--blanco)}
.caja.marcada{border-color:var(--tinta)}

.aviso{
  border-left:2px solid var(--terracota);
  border-radius:0 var(--r2) var(--r2) 0;
  background:rgba(183,161,136,.14);
  padding:1rem 1.25rem;
  margin:1.75rem 0;
}

/* ─────────── objeciones y FAQ ─────────── */

.objecion{
  background:var(--blanco);
  border:.5px solid var(--filete);
  border-radius:var(--r3);
  padding:clamp(1.6rem,6vw,2.4rem);
  margin-top:1rem;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
section.blanca .objecion{background:var(--crema)}
.objecion:first-of-type{margin-top:1.75rem}
@media (min-width:820px){
  .objecion:hover{transform:translateY(-3px);box-shadow:0 26px 50px -34px rgba(30,30,30,.5)}
}
.objecion h3{margin-bottom:1rem}
.objecion h3::before{content:"«";color:var(--terracota)}
.objecion h3::after{content:"»";color:var(--terracota)}

details.faq{
  border-bottom:.5px solid var(--filete);
  border-radius:var(--r2);
  transition:background .45s var(--ease);
}
details.faq:first-of-type{border-top:.5px solid var(--filete)}
details.faq[open]{background:var(--arena-luz);border-bottom-color:transparent}
section.arena details.faq[open]{background:var(--blanco)}
details.faq > summary{
  list-style:none;
  cursor:pointer;
  padding:1.15rem 2.75rem 1.15rem 1rem;
  position:relative;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.05rem;
  line-height:1.4;
  letter-spacing:-.01em;
}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary::after{
  content:"";
  position:absolute;right:1.15rem;top:1.7rem;
  width:11px;height:11px;
  border-right:.5px solid var(--terracota);
  border-bottom:.5px solid var(--terracota);
  transform:rotate(45deg);
  transition:transform .4s var(--ease);
}
details.faq[open] > summary::after{transform:rotate(-135deg)}
details.faq .cuerpo{padding:0 1rem 1.5rem;animation:despliega .5s var(--ease) both}
details.faq .cuerpo p{font-size:1rem}
@keyframes despliega{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}

/* ─────────── botones ─────────── */

.boton{
  display:inline-block;
  font-family:var(--sans);
  font-weight:400;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  padding:1.15rem 2.35rem;
  background:var(--tinta);
  color:var(--crema);
  border:.5px solid var(--tinta);
  border-radius:var(--rp);
  cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),
             border-color .4s var(--ease),transform .4s var(--ease),
             box-shadow .4s var(--ease);
}
.boton:hover{
  background:var(--terracota);
  border-color:var(--terracota);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 32px -14px rgba(139,82,64,.7);
}
.boton:active{transform:translateY(0)}
.pleno .boton,.pleno-fondo .boton{background:#fff;color:var(--tinta);border-color:#fff}
.pleno .boton:hover,.pleno-fondo .boton:hover{
  background:var(--terracota);border-color:var(--terracota);color:#fff;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
}
.boton.claro{background:transparent;color:var(--tinta)}
.boton.claro:hover{background:var(--tinta);border-color:var(--tinta);color:var(--crema)}
/* Sobre fondo oscuro (secciones .pleno/.pleno-fondo) el texto e borde tienen
   que ser claros, si no el botón "claro" queda invisible sobre el fondo oscuro. */
.pleno .boton.claro,.pleno-fondo .boton.claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.pleno .boton.claro:hover,.pleno-fondo .boton.claro:hover{background:#fff;color:var(--tinta);border-color:#fff}
.boton.ancho{display:block;width:100%}
.boton[disabled]{opacity:.35;pointer-events:none}

.bajo-boton{margin-top:1rem;font-size:.85rem;color:var(--gris);max-width:32rem}
.pleno .bajo-boton{color:rgba(255,255,255,.82)}

/* ─────────── indicador de scroll de la portada ─────────── */

.cue{
  position:absolute;
  left:50%;bottom:calc(var(--r4) + .9rem);
  transform:translateX(-50%);
  z-index:3;
  width:1px;height:clamp(34px,7vw,54px);
  overflow:hidden;
  background:rgba(255,255,255,.18);
}
.cue span{
  display:block;width:100%;height:100%;
  background:rgba(255,255,255,.85);
  animation:cae 2.6s var(--ease) infinite;
}
/* En móvil el filete del cue cae justo encima de la última línea de la
   portada ("Las plazas se abren el 1 de octubre…") y la cruza. En una
   pantalla de teléfono nadie necesita que le digan que hay que
   deslizar, así que ahí no se pone. */
@media (max-width:699.98px){.cue{display:none}}
@keyframes cae{
  0%{transform:scaleY(0);transform-origin:top}
  42%{transform:scaleY(1);transform-origin:top}
  58%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ─────────── barra de progreso ─────────── */

.progreso{
  position:fixed;left:0;right:0;top:0;height:2px;
  z-index:80;pointer-events:none;
  background:transparent;
}
.progreso span{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--arena),var(--terracota));
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* ─────────── barra fija de móvil ─────────── */

.barra{
  position:fixed;
  left:.7rem;right:.7rem;
  bottom:calc(.7rem + env(safe-area-inset-bottom));
  z-index:60;
  background:rgba(248,246,242,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:.5px solid var(--filete);
  border-radius:var(--rp);
  box-shadow:0 16px 38px -18px rgba(30,30,30,.55);
  padding:.55rem .6rem .55rem 1.15rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  transform:translate3d(0,150%,0);
  transition:transform .55s var(--ease);
}
.barra.visible{transform:translate3d(0,0,0)}
.barra .dato{
  flex:1 1 auto;
  min-width:0;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--gris);
  line-height:1.3;
}
.barra .boton{flex:0 0 auto;padding:.8rem 1.25rem;font-size:.7rem;letter-spacing:.1em}
@media (min-width:900px){.barra{display:none}}

/* ─────────── pie ─────────── */

.pie{
  background:var(--crema);
  border-top:.5px solid var(--filete);
  padding:3.5rem 0 7.5rem;
  font-size:.82rem;
  color:var(--gris);
  position:relative;
  z-index:3;
}
@media (min-width:900px){.pie{padding-bottom:3.5rem}}
.pie .marca{
  font-family:var(--serif);
  font-weight:400;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.26em;
  color:var(--acento);
}
.pie ul{list-style:none;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
.pie a{
  color:var(--gris);text-decoration:none;
  border-bottom:.5px solid var(--filete);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.pie a:hover{color:var(--terracota);border-color:var(--terracota)}
.pie .legalito{margin-top:1.75rem;max-width:46rem;font-size:.78rem;line-height:1.7}

/* ─────────── banner de cookies ─────────── */

.cookies{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:90;
  background:var(--blanco);
  border-top:.5px solid var(--tinta);
  border-radius:var(--r3) var(--r3) 0 0;
  padding:1.75rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  display:none;
  box-shadow:0 -24px 60px rgba(20,25,32,.16);
}
.cookies.abierto{display:block;animation:sube .5s var(--ease) both}
@keyframes sube{from{transform:translate3d(0,100%,0)}to{transform:none}}
.cookies .interior{max-width:var(--ancho);margin:0 auto}
.cookies h2{font-size:1.4rem;margin-bottom:.75rem}
.cookies p{font-size:.88rem;line-height:1.65;max-width:46rem}
.cookies .botones{
  display:grid;
  grid-template-columns:1fr;
  gap:.6rem;
  margin-top:1.35rem;
}
@media (min-width:620px){
  .cookies .botones{grid-template-columns:repeat(3,minmax(0,1fr));max-width:34rem}
}
/* los tres botones son idénticos: exigencia de la guía AEPD */
.cookies .botones .boton{
  width:100%;
  padding:.95rem 1rem;
  font-size:.72rem;
  letter-spacing:.12em;
  background:var(--blanco);
  color:var(--tinta);
  border:.5px solid var(--tinta);
}
.cookies .botones .boton:hover{
  background:var(--tinta);border-color:var(--tinta);color:var(--crema);
  box-shadow:none;transform:none;
}

.panel-cookies{margin-top:1.75rem;display:none}
.panel-cookies.abierto{display:block;animation:despliega .45s var(--ease) both}
.panel-cookies .fila{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1rem 0;
  border-top:.5px solid var(--filete);
}
.panel-cookies .fila input{
  margin-top:.35rem;
  width:1.1rem;height:1.1rem;
  accent-color:var(--terracota);
  flex:0 0 auto;
}
.panel-cookies .fila .txt{font-size:.85rem;line-height:1.6}
.panel-cookies .fila .txt b{font-weight:500;display:block;font-size:.9rem}

/* ─────────── casillas del checkout ─────────── */

.casilla{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1.35rem 0;
  border-top:.5px solid var(--filete);
}
.casilla input[type=checkbox]{
  margin-top:.3rem;
  width:1.25rem;height:1.25rem;
  accent-color:var(--terracota);
  flex:0 0 auto;
}
/* min-width:0 + overflow-wrap:anywhere son obligatorios aquí: sin ellos
   el ancho mínimo del <label> lo fija la dirección de correo entera
   (rubensebastian@desbloqueatuidentidad.com = 292 px), y la casilla
   opcional desbordaba la pantalla por debajo de 375 px. */
.casilla label{
  font-size:.95rem;
  line-height:1.65;
  cursor:pointer;
  min-width:0;
  overflow-wrap:anywhere;
}
.casilla.opcional{
  border:.5px solid var(--filete);
  border-radius:var(--r3);
  padding:1.35rem;
  margin-top:2.5rem;
}
.error{color:#8A2F1F;font-size:.85rem;margin-top:.5rem;display:none}
.error.visible{display:block}

/* ─────────── marcadores de material pendiente ─────────── */

.hueco{
  background:#EDEAE4;
  border:.5px dashed var(--acento);
  border-radius:var(--r3);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem;
  min-height:14rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--acento);
  line-height:2;
}
.pendiente{
  display:inline-block;
  border:.5px dashed var(--acento);
  border-radius:var(--rp);
  padding:.15rem .7rem;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--gris);
  text-transform:none;
}

/* marcador de hueco 16:9, solo visible en modo revisión */
.marca-w1{display:none}
html[data-revision="si"] .marca-w1{
  display:block;
  position:absolute;left:0;bottom:0;z-index:5;
  background:rgba(30,30,30,.82);
  color:#fff;
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.4rem .7rem;
}

/* ─────────── dos estados de la página ─────────── */

html[data-estado="preapertura"] .solo-venta{display:none !important}
html[data-estado="venta"] .solo-preapertura{display:none !important}

/* ─────────── vídeo: escritorio sí, móvil no ───────────
   El bucle apaisado solo existe a partir de 820 px. Debajo se ve el
   póster, que es la misma imagen y pesa 25-42 KB. */
.solo-esc{display:none}
@media (min-width:820px){
  .solo-esc{display:block}
  .solo-mov{display:none}
}

/* ─────────── aparición progresiva ───────────
   Recorrido real: 48 px y escala .988 → 1. Escalonada entre hermanos
   con --d, que lo pone el JS. La clase .js SOLO la añade app.js cuando
   ya ha instalado el mecanismo de revelado: si el script falla o no
   llega, no se oculta absolutamente nada. */
html.js .rev{
  opacity:0;
  transform:translate3d(0,48px,0) scale(.988);
}
html.js .rev.dentro{
  opacity:1;
  transform:none;
  transition:opacity .95s var(--ease) var(--d,0ms),
             transform 1.05s var(--ease) var(--d,0ms);
}
/* Revelado sin animación: lo que ya quedaba por encima al cargar
   (ancla, recarga con scroll restaurado, scroll muy rápido). */
html.js .rev.al-vuelo{transition:none;opacity:1;transform:none}

/* Deriva lenta de las fotos de banda. El parallax va en .capa, así que
   las dos transformaciones no compiten. */
@keyframes deriva{
  from{transform:scale(1.05)}
  to{transform:scale(1.14)}
}
.pleno img.fondo,.pleno-fondo img.fondo{
  animation:deriva 26s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion:reduce){
  html.js .rev{opacity:1;transform:none}
  .pleno img.fondo,.pleno-fondo img.fondo,
  .estado .punto,.estado .punto::after,
  .cue span,.cookies.abierto,.panel-cookies.abierto,
  details.faq .cuerpo{animation:none}
  .capa{transform:none !important}
  .boton:hover,.objecion:hover{transform:none}
  .partida:hover .media img{transform:none}
}

/* ─────────── páginas de texto legal ─────────── */

.doc{max-width:44rem;margin:0 auto}
.doc h1{font-size:clamp(2rem,8vw,3rem);letter-spacing:-.025em;line-height:1.05}
.doc h2{font-size:clamp(1.45rem,5.5vw,2rem);margin-top:2.5rem}
.doc h3{font-size:1.2rem;margin-top:2rem}
.doc p,.doc li{font-size:1rem;line-height:1.8;max-width:none}
.doc p{margin-top:1rem}
.doc ul,.doc ol{margin:1rem 0 0 1.25rem}
.doc li{margin-top:.5rem}
.doc ul{list-style:none;margin-left:0}
.doc ul > li{padding-left:1.25rem;position:relative}
.doc ul > li::before{
  content:"";
  position:absolute;left:0;top:.85em;
  width:.6rem;height:0;
  border-top:.5px solid var(--acento);
}
.doc table{
  width:100%;
  border-collapse:collapse;
  margin-top:1.5rem;
  font-size:.9rem;
}

/* ── TABLAS EN MÓVIL ──────────────────────────────────────────────
   Debajo de 700 px las tablas legales NO se desplazan en horizontal:
   se apilan en fichas, con el nombre de la columna delante de cada
   dato (data-col). Motivo: la tabla de cookies mide 581 px de ancho
   y en un móvil de 390 px quedaba dentro de un scroller invisible
   que casi nadie descubre. El contenido es exactamente el mismo.
   ───────────────────────────────────────────────────────────────── */
@media (max-width:699.98px){
  .doc table.apilada,
  .doc table.apilada tbody,
  .doc table.apilada tr,
  .doc table.apilada td{display:block;width:100%}
  .doc table.apilada tr:first-child{display:none}   /* fila de encabezados */
  .doc table.apilada tr{
    border-bottom:.5px solid var(--filete);
    padding:.35rem 0 .9rem;
  }
  .doc table.apilada tr:last-child{border-bottom:0}
  .doc table.apilada td{
    border:0;
    padding:.45rem 0 0;
    line-height:1.6;
  }
  .doc table.apilada td[data-col]::before{
    content:attr(data-col);
    display:block;
    font-family:var(--serif);
    font-weight:400;
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--gris);
    margin-bottom:.15rem;
  }
  /* una celda vacía no deja un rótulo huérfano */
  .doc table.apilada td:empty{display:none}
}
.doc th,.doc td{
  text-align:left;
  padding:.8rem .9rem .8rem 0;
  border-bottom:.5px solid var(--filete);
  vertical-align:top;
  line-height:1.55;
}
.doc th{
  font-family:var(--serif);
  font-weight:400;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gris);
}

.resumen{
  border:.5px solid var(--tinta);
  border-radius:var(--r3);
  padding:clamp(1.5rem,6vw,2.25rem);
  margin-top:2.5rem;
  background:var(--blanco);
}
.resumen .antetitulo{margin-bottom:1rem}
.resumen ul{margin-top:0}

.destacado{
  border:.5px solid var(--acento);
  border-left:2px solid var(--terracota);
  border-radius:0 var(--r3) var(--r3) 0;
  padding:clamp(1.35rem,5vw,1.85rem);
  margin-top:2rem;
  background:var(--blanco);
}
.destacado > :first-child{margin-top:0}

.volver{
  display:inline-block;
  font-family:var(--serif);
  font-weight:400;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--gris);
  text-decoration:none;
  border-bottom:.5px solid var(--filete);
  padding-bottom:.25rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.volver:hover{color:var(--terracota);border-color:var(--terracota)}

/* accesibilidad del foco */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--terracota);
  outline-offset:3px;
  border-radius:var(--r1);
}

/* Enlace de salto. Se oculta recortándolo, NO sacándolo a left:-9999px:
   así no existe ningún elemento fuera del lienzo que pueda arrastrar
   scroll horizontal en ningún navegador. */
.saltar{
  position:absolute;left:0;top:0;
  width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
  background:var(--tinta);color:var(--crema);
  padding:0;z-index:100;
}
.saltar:focus{
  position:fixed;left:1rem;top:1rem;
  width:auto;height:auto;overflow:visible;
  clip:auto;clip-path:none;
  padding:.75rem 1.25rem;
  border-radius:var(--rp);
}

/* ─────────── grupo completo (12/12) ───────────
   Lo enciende js/app.js cuando no queda ningún tramo con plazas. */
.solo-completo{display:none}
html.completo .solo-completo{display:block}
html.completo .ocultar-si-completo{display:none}


/* ═══════════════════════════════════════════════════════════════
   v3 · 9-sep-2026 — TRES AÑADIDOS, todos aditivos: ninguna regla
   anterior se ha tocado.
     1 · ÍNDICE DE LECTURA fijo   2 · DÍA A DÍA (acordeón)
     3 · CARRUSEL, sin dependencias
   ═══════════════════════════════════════════════════════════════ */

/* Anclas: las .curva suben var(--r4) sobre su hoja de papel, así
   que sin compensar el salto aterriza en la foto anterior. */
section[id]{scroll-margin-top:.75rem}
section.curva[id]{scroll-margin-top:calc(.75rem - var(--r4))}


/* ── 1 · ÍNDICE. Mismo disparador que .barra y en el borde
   contrario: índice arriba, CTA abajo. Nunca se pisan. ── */

.indice-abrir{
  position:fixed;
  top:calc(.7rem + env(safe-area-inset-top));
  left:.7rem;
  z-index:71;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.62rem 1.05rem;
  background:rgba(248,246,242,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:.5px solid var(--filete);
  border-radius:var(--rp);
  box-shadow:0 14px 30px -18px rgba(30,30,30,.55);
  font-family:var(--serif);
  font-weight:400;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.26em;
  color:var(--tinta);
  cursor:pointer;
  transform:translate3d(0,calc(-100% - 1.6rem),0);
  transition:transform .55s var(--ease),background .3s var(--ease);
}
.indice.visible .indice-abrir{transform:translate3d(0,0,0)}
.indice-abrir:hover{background:var(--crema)}

/* Tres filetes de .5px, el lenguaje de los <hr>. */
.indice-abrir .rayas{display:block;width:15px;flex:0 0 auto}
.indice-abrir .rayas i{
  display:block;height:0;
  border-top:.5px solid var(--tinta);
  margin-bottom:3.5px;
  transition:width .35s var(--ease);
}
.indice-abrir .rayas i:nth-child(2){width:68%}
.indice-abrir .rayas i:nth-child(3){width:42%;margin-bottom:0}
.indice-abrir[aria-expanded="true"] .rayas i:nth-child(2),
.indice-abrir[aria-expanded="true"] .rayas i:nth-child(3){width:100%}
.indice-abrir .rot .b{display:none}
.indice-abrir[aria-expanded="true"] .rot .a{display:none}
.indice-abrir[aria-expanded="true"] .rot .b{display:inline}

.indice-scrim{
  position:fixed;inset:0;z-index:69;
  background:rgba(24,33,45,.30);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.indice-scrim[hidden]{display:none}

.indice-panel{
  position:fixed;
  top:calc(.7rem + 3.05rem + env(safe-area-inset-top));
  left:.7rem;
  z-index:71;
  width:min(21.5rem,calc(100vw - 1.4rem));
  max-height:min(42rem,calc(100vh - 9.5rem));
  max-height:min(42rem,calc(100svh - 9.5rem));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:var(--crema);
  border:.5px solid var(--filete);
  border-radius:var(--r3);
  box-shadow:0 34px 70px -28px rgba(30,30,30,.6);
  padding:1.25rem 1.35rem 1.1rem;
  animation:despliega .35s var(--ease) both;
}
.indice-panel[hidden]{display:none}
.indice-panel > .antetitulo{
  font-size:.58rem;letter-spacing:.28em;
  color:var(--acento);
  padding-bottom:.85rem;
  border-bottom:.5px solid var(--filete);
}
.indice-panel ol{list-style:none;margin:0}
.indice-panel li a{
  display:grid;
  grid-template-columns:2.15rem 1fr;
  gap:.4rem;
  align-items:baseline;
  padding:.62rem 0;
  border-bottom:.5px solid var(--filete);
  text-decoration:none;
  color:var(--tinta);
  font-family:var(--serif);
  font-weight:400;
  font-size:.94rem;
  line-height:1.32;
  letter-spacing:-.012em;
  transition:color .3s var(--ease);
}
.indice-panel li:last-child a{border-bottom:0}
.indice-panel li a .n{
  font-size:.66rem;
  letter-spacing:.12em;
  color:var(--acento);
  transition:color .3s var(--ease);
}
.indice-panel li a:hover,
.indice-panel li a:hover .n,
.indice-panel li a[aria-current="true"],
.indice-panel li a[aria-current="true"] .n{color:var(--terracota)}

/* En tablet, el disparador se separa del borde. */
@media (min-width:900px){
  .indice-abrir{top:1.4rem;left:1.4rem;padding:.7rem 1.2rem}
  .indice-panel{top:calc(1.4rem + 3.2rem);left:1.4rem;max-height:min(44rem,calc(100vh - 6rem))}
}


/* ── 2 · DÍA A DÍA. Idioma de details.faq, con cabecera de dos
   líneas para no confundirse con la lista de El recorrido. ── */

.dias{margin-top:clamp(2rem,7vw,3rem)}

details.dia{
  border-bottom:.5px solid var(--filete);
  border-radius:var(--r2);
  transition:background .45s var(--ease);
}
details.dia:first-of-type{border-top:.5px solid var(--filete)}
details.dia[open]{background:var(--blanco);border-bottom-color:transparent}

details.dia > summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:2.75rem 1fr;
  gap:.4rem;
  align-items:start;
  padding:1.05rem 2.6rem 1.05rem 1rem;
  position:relative;
}
details.dia > summary::-webkit-details-marker{display:none}
details.dia > summary::after{
  content:"";
  position:absolute;right:1.15rem;top:1.95rem;
  width:10px;height:10px;
  border-right:.5px solid var(--terracota);
  border-bottom:.5px solid var(--terracota);
  transform:rotate(45deg);
  transition:transform .4s var(--ease);
}
details.dia[open] > summary::after{transform:rotate(-135deg)}

details.dia .n{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.45rem;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--terracota);
  padding-top:.5rem;
}
details.dia .fecha{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:.56rem;
  text-transform:uppercase;
  letter-spacing:.26em;
  color:var(--gris);
  line-height:1.7;
}
details.dia .tit{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.12rem;
  line-height:1.25;
  letter-spacing:-.018em;
  margin-top:.08rem;
}

details.dia .cuerpo{
  padding:0 1rem 1.65rem;
  animation:despliega .5s var(--ease) both;
}
details.dia .foto{
  aspect-ratio:3/2;
  overflow:hidden;
  background:#EDEAE4;
  border-radius:var(--r2);
}
details.dia .foto img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--pos,50% 50%);
}
details.dia .txt{padding-top:1.15rem}
details.dia .txt p{font-size:1rem;max-width:36rem}

/* La frase del folleto. No se carga una tercera familia por ocho
   líneas: Fraunces itálica, que ya viene pedida. */
details.dia .nota{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:1.12rem;
  line-height:1.4;
  letter-spacing:-.015em;
  color:var(--terracota);
  margin-top:1.05rem;
}

@media (min-width:700px){
  details.dia .cuerpo{
    display:grid;
    grid-template-columns:14rem 1fr;
    gap:2rem;
    padding-left:3.75rem;
  }
  details.dia .foto{aspect-ratio:3/4}
  details.dia .txt{padding-top:0}
}


/* ── 3 · CARRUSEL. scroll-snap nativo, cero CDN. Vive en
   .partida .media y hereda radio, sombra y proporción. ── */

.carrusel{position:relative}
.carrusel .pista{
  position:absolute;inset:0;
  display:flex;
  list-style:none;
  margin:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carrusel .pista::-webkit-scrollbar{display:none}
.carrusel .diapo{
  flex:0 0 100%;
  height:100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  position:relative;
}
.carrusel .diapo img{width:100%;height:100%;object-fit:cover}
/* el zoom de hover no tiene sentido sobre un carrusel */
.partida:hover .carrusel .diapo img{transform:none}

.carrusel .sombra{
  position:absolute;left:0;right:0;bottom:0;
  height:54%;
  z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(14,12,10,.80) 0%,
    rgba(14,12,10,.36) 46%,
    rgba(14,12,10,0) 100%);
}
.carrusel .mandos{
  position:absolute;left:0;right:0;bottom:0;
  z-index:2;
  padding:1rem 1rem 1.05rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.carrusel .segmentos{display:flex;gap:.4rem}
.carrusel .segmentos i{
  flex:1 1 0;
  height:0;
  border-top:.5px solid rgba(255,255,255,.45);
  transition:border-top-color .4s var(--ease),border-top-width .4s var(--ease);
}
.carrusel .segmentos i.on{border-top-color:#fff;border-top-width:1.5px}

.carrusel .fila-mandos{display:flex;align-items:flex-end;gap:.7rem}
.carrusel .pie-diapo{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1.55;
  color:#fff;
  padding-bottom:.35rem;
}
.carrusel .cuenta{
  flex:0 0 auto;
  font-family:var(--serif);
  font-weight:400;
  font-size:.6rem;
  letter-spacing:.16em;
  color:rgba(255,255,255,.78);
  white-space:nowrap;
  padding-bottom:.5rem;
}
.carrusel .flecha{
  flex:0 0 auto;
  width:2.3rem;height:2.3rem;
  border-radius:50%;
  border:.5px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  cursor:pointer;
  position:relative;
  transition:background .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease);
}
.carrusel .flecha::after{
  content:"";
  position:absolute;top:50%;left:50%;
  width:7px;height:7px;
  border-right:.5px solid #fff;
  border-bottom:.5px solid #fff;
}
.carrusel .flecha.prev::after{transform:translate(-30%,-50%) rotate(135deg)}
.carrusel .flecha.next::after{transform:translate(-70%,-50%) rotate(-45deg)}
.carrusel .flecha:hover{background:rgba(255,255,255,.3);border-color:#fff}
.carrusel .flecha[disabled]{opacity:.28;cursor:default}
/* sin JS las flechas no obedecen a nadie: no se pintan */
html:not(.js-carrusel) .carrusel .flecha{display:none}

@media (max-width:359.98px){
  .carrusel .mandos{padding:.8rem .8rem .85rem}
  .carrusel .pie-diapo{font-size:.58rem;letter-spacing:.14em}
  .carrusel .cuenta{display:none}
}


/* ── movimiento reducido, también en lo nuevo ── */
@media (prefers-reduced-motion:reduce){
  .indice-abrir,.indice-abrir .rayas i{transition:none}
  .indice-panel{animation:none}
  details.dia .cuerpo{animation:none}
  .carrusel .pista{scroll-behavior:auto}
  html{scroll-behavior:auto}
}

/* ── sección alojamientos: rejilla de 3 fotos de referencia ── */
.rejilla-alojamientos{display:grid;grid-template-columns:1fr;gap:2.25rem;margin-top:2.5rem}
@media (min-width:760px){
  .rejilla-alojamientos{grid-template-columns:1fr 1fr 1fr;gap:1.75rem}
}
.rejilla-alojamientos figure{margin:0}
.rejilla-alojamientos .marco{
  aspect-ratio:4/5;border-radius:var(--r3);overflow:hidden;background:#EDEAE4;
}
.rejilla-alojamientos img{width:100%;height:100%;object-fit:cover;display:block}
.rejilla-alojamientos figcaption{margin-top:.85rem}
.rejilla-alojamientos .zona{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento);display:block;margin-bottom:.35rem
}

/* ── aviso de urgencia sobre la tabla de tramos ── */
.urgencia{
  display:inline-flex;align-items:center;gap:.65rem;margin-top:1.75rem;
  font-family:var(--sans);font-size:.85rem;color:var(--tinta)
}
.punto-urgencia{
  position:relative;width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:#3E7A4F; /* verde por defecto */
  animation:latido 3s ease-in-out infinite
}
.punto-urgencia::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid currentColor;color:#3E7A4F;opacity:0;
  animation:halo 3s ease-in-out infinite
}
.punto-urgencia.rojo{background:#B7402E}
.punto-urgencia.rojo::after{color:#B7402E}

/* ── botón por fila en la tabla de tramos ── */
.tramos th:last-child,.tramos td:last-child{text-align:right}
.boton-fila{
  display:inline-block;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;padding:.55rem 1.1rem;
  border-radius:var(--rp);border:.5px solid var(--tinta);color:var(--tinta);
  transition:background .3s var(--ease),color .3s var(--ease)
}
.tramos tr.vigente .boton-fila{background:var(--tinta);color:var(--crema)}
.tramos tr.vigente .boton-fila:hover{background:var(--terracota);border-color:var(--terracota)}
.tramos tr:not(.vigente) .boton-fila{
  opacity:.4;border-color:var(--gris);color:var(--gris);
  pointer-events:none;cursor:default
}