/* ===========================================================================
   Una noche antes de Navidad — Colección 2026
   Paleta, tipografía y ritmo del documento maestro de campaña.
   =========================================================================== */

:root {
  --tinta:      #17120F;   /* fondo principal, espresso oscuro */
  --tinta-alta: #1E1813;   /* superficies elevadas */
  --tinta-honda:#080605;   /* fondo del escenario de la colección */
  --marfil:     #F4EADC;   /* texto principal */
  --beige:      #B9AA98;   /* texto secundario */
  --oro:        #C59A4A;   /* acento: líneas, indicadores, detalles */
  --oro-tenue:  rgba(197, 154, 74, 0.24);
  --velo:       rgba(23, 18, 15, 0.72);

  --serif: "Bodoni Moda", "Didot", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ancho: 1180px;
  --canal: clamp(1.25rem, 5vw, 3.5rem);
  --aire:  clamp(4.5rem, 11vw, 8.5rem);
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* La cabecera es fija: sin este margen, cada clic del menú dejaba el
     título de la sección escondido detrás de la barra. */
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--marfil);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif); font-weight: 400;
  letter-spacing: 0.005em; line-height: 1.1; margin: 0;
  font-optical-sizing: auto;
}

a { color: inherit; }

::selection { background: var(--oro); color: var(--tinta); }

/* Las partes que pone el navegador también son parte del diseño. */
html { scrollbar-color: var(--oro-tenue) var(--tinta); }
input, textarea, select { caret-color: var(--oro); }
a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tinta); }
::-webkit-scrollbar-thumb { background: rgba(197, 154, 74, 0.28); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(197, 154, 74, 0.5); }

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 2px;
}

.oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.salto {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  background: var(--oro); color: var(--tinta);
  padding: 0.7rem 1.25rem; border-radius: 0 0 2px 2px;
  font-weight: 600; text-decoration: none; z-index: 200;
}
.salto:focus { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- estructura */

.caja { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--canal); }
.caja--angosta { max-width: 760px; }

.seccion { padding-block: var(--aire); position: relative; }
.seccion--borde::before {
  content: ""; position: absolute; inset-inline: var(--canal); top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro-tenue) 20%, var(--oro-tenue) 80%, transparent);
}

.titulo { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.5rem); max-width: 18ch; }

.parrafo { color: var(--beige); margin: 1.25rem 0 0; max-width: 62ch; }
.parrafo--guia { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); }
.parrafo--tenue { font-size: 0.92rem; }

.pie-nota { color: var(--beige); font-size: 0.9rem; margin: 2.25rem 0 0; text-align: center; }

/* ---------------------------------------------------------------- botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.95rem 1.7rem;
  font: 500 0.95rem/1 var(--sans); letter-spacing: 0.04em;
  text-decoration: none; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; white-space: nowrap;
  /* La clase nació para enlaces. Al usarla en <button> hay que neutralizar
     el fondo gris que pone el navegador, o el texto marfil queda ilegible. */
  background: transparent; color: inherit; -webkit-appearance: none; appearance: none;
  transition: background-color 0.25s var(--curva), color 0.25s var(--curva),
              border-color 0.25s var(--curva), transform 0.25s var(--curva);
}
.boton--oro    { background: var(--oro); color: #14100D; font-weight: 600; }
.boton--oro:hover    { background: #D8AE5E; transform: translateY(-1px); }
.boton--linea  { border-color: rgba(244, 234, 220, 0.4); color: var(--marfil); }
.boton--linea:hover  { border-color: var(--marfil); background: rgba(244, 234, 220, 0.07); }
.boton--sutil  { border-color: var(--oro-tenue); color: var(--oro); padding: 0.6rem 1.15rem; }
.boton--sutil:hover  { background: rgba(197, 154, 74, 0.12); }
.boton--ancho  { width: 100%; padding-block: 1.1rem; }
.boton[disabled] { opacity: 0.45; pointer-events: none; }

/* ---------------------------------------------------------------- cabecera */

.cabecera {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top);
  transition: padding 0.4s var(--curva), background-color 0.3s var(--curva),
              border-color 0.3s var(--curva);
}

/* Al bajar, la barra se despega de los bordes y queda como una píldora
   flotante. El movimiento lo hace el padding del contenedor exterior y el
   radio del interior: nada de reposicionar, así que no hay reflow. */
.cabecera.solida {
  padding-top: calc(env(safe-area-inset-top) + 0.7rem);
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
}
.cabecera__caja {
  max-width: var(--ancho); margin-inline: auto;
  padding: 0.9rem var(--canal);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.35s var(--curva), border-color 0.35s var(--curva),
              border-radius 0.4s var(--curva), padding 0.4s var(--curva),
              box-shadow 0.4s var(--curva);
}
.cabecera.solida .cabecera__caja {
  background: rgba(23, 18, 15, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--oro-tenue);
  border-radius: 999px;
  padding-inline: clamp(1.1rem, 2.5vw, 1.75rem);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-transparency: reduce) {
  .cabecera.solida .cabecera__caja {
    background: var(--tinta);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

.marca { text-decoration: none; display: grid; gap: 0.15rem; align-content: center; min-height: 44px; }
.marca__nombre { font-family: var(--serif); font-size: 1.1rem; line-height: 1.1; }
.marca__ano { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro); }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { font-size: 0.88rem; text-decoration: none; color: var(--beige); transition: color 0.2s var(--curva); }
.nav a:hover, .nav a[aria-current="true"] { color: var(--marfil); }
.nav .boton--sutil { color: var(--oro); }

.menu {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; margin-right: -0.6rem;
  place-items: center;
}
.menu__barras, .menu__barras::before, .menu__barras::after {
  display: block; width: 22px; height: 1px; background: var(--marfil);
  transition: transform 0.3s var(--curva), opacity 0.2s var(--curva);
}
.menu__barras::before, .menu__barras::after { content: ""; position: relative; }
.menu__barras::before { top: -7px; }
.menu__barras::after  { top: 6px; }
.menu[aria-expanded="true"] .menu__barras { background: transparent; }
.menu[aria-expanded="true"] .menu__barras::before { transform: translateY(7px) rotate(45deg); }
.menu[aria-expanded="true"] .menu__barras::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------- portada */

.portada {
  position: relative; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  /* La cabecera es fija y mide unos 87px: sin este margen el titular
     quedaba cortado detrás de ella. */
  padding-top: clamp(7rem, 15vh, 10rem);
  overflow: hidden;
  /* Negro profundo arriba que cede al fondo base abajo, más un halo muy
     tenue detrás del titular. Da la sensación de una habitación a oscuras
     con la luz entrando por el centro. */
  background:
    radial-gradient(120% 70% at 50% 28%, rgba(197, 154, 74, 0.09), transparent 62%),
    linear-gradient(to bottom, #000 0%, var(--tinta-honda) 32%, var(--tinta) 82%);
}

.portada__texto {
  position: relative; z-index: 2; width: 100%; max-width: 46rem;
  margin-inline: auto; padding-inline: var(--canal);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  justify-content: center;
}
.portada__titulo   { order: 1; }
.portada__entrada  { order: 2; }
.credito           { order: 3; }
.portada__acciones { order: 4; }
/* La nota va al final: primero el nombre y la promesa, y sólo después la
   razón para no dejarlo para después. Sin el orden explícito cae al
   principio y compite con el titular. */
.portada__nota     { order: 5; }

.credito {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--beige); margin: 1.6rem 0 0;
  max-width: 34ch; line-height: 1.9;
  padding-top: 1.3rem; border-top: 1px solid var(--oro-tenue);
}
.portada__titulo {
  font-size: clamp(2.6rem, 1rem + 7vw, 7rem);
  max-width: none; letter-spacing: -0.005em; line-height: 1.02;
}
.portada__entrada {
  color: var(--marfil); opacity: 0.82; max-width: 44ch;
  font-size: clamp(1.02rem, 0.97rem + 0.4vw, 1.2rem); margin: 1.4rem 0 0;
}
.portada__acciones {
  display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.9rem;
  justify-content: center;
}
/* Fechas y escasez, debajo de los botones. Estuvo oculta mientras no
   había fechas confirmadas; ahora que las hay, es lo que da la razón para
   no dejarlo para después. Discreta a propósito: la urgencia se dice una
   vez, no se grita. */
.portada__nota {
  margin: 1.4rem auto 0; max-width: 34ch;
  font-size: 0.82rem; line-height: 1.6;
  letter-spacing: 0.04em; color: var(--beige);
}
.portada__nota:empty { display: none; }

/* ------------------------------------------- portada en teléfono */
/* En un iPhone con la barra de Safari abajo y la barra fija de reserva,
   la altura útil se queda en unos 640px. Con las medidas de escritorio
   el texto llegaba justo hasta ahí y la fila de retratos quedaba fuera
   de cuadro: lo primero que engancha son las fotografías, así que tienen
   que asomar sin desplazar. Aquí se recorta cada espacio hasta que caben. */
@media (max-width: 880px) {
  .portada {
    /* La cabecera mide 76px; 12 de aire bastan. */
    padding-top: 5.5rem;
    padding-bottom: 1rem;
    /* Clave: en escritorio la portada mide una pantalla y el bloque de
       texto se lleva todo el espacio sobrante (1fr), así que la fila de
       retratos queda pegada abajo, fuera de cuadro en un teléfono. Aquí
       la portada mide lo que mide su contenido y las fotos suben solas
       hasta quedar a la vista. */
    min-height: 0;
    grid-template-rows: auto auto;
  }
  .portada__titulo  { font-size: clamp(2.3rem, 1rem + 6.4vw, 3.2rem); line-height: 1.0; }
  .portada__entrada { font-size: 0.98rem; line-height: 1.55; margin-top: 1rem; max-width: 34ch; }
  .credito          { margin-top: 1.1rem; padding-top: 0.95rem; line-height: 1.75; font-size: 0.66rem; }
  .portada__acciones { margin-top: 1.25rem; gap: 0.6rem; }
  .portada__nota    { margin-top: 1rem; font-size: 0.76rem; line-height: 1.5; }
  .marquesina       { padding-block: 0.9rem 0; }
}

/* Teléfono con poca altura útil: un iPhone con la barra de Safari abajo
   deja unos 640px, y ahí sólo asomaban 21px de fotografía, que no engancha
   a nadie. Se recorta hasta que se ve la tira completa. El crédito de las
   tres marcas es lo que más cede: se repite en su propia sección y en el
   pie, así que arriba puede ir compacto. */
@media (max-width: 880px) and (max-height: 720px) {
  .portada          { padding-top: 5rem; }
  .portada__titulo  { font-size: 2rem; }
  .portada__entrada { font-size: 0.9rem; margin-top: 0.8rem; }
  .credito {
    margin-top: 0.8rem; padding-top: 0; border-top: 0;
    font-size: 0.6rem; line-height: 1.5; max-width: 44ch;
  }
  .portada__acciones { margin-top: 0.9rem; gap: 0.5rem; }
  .portada__nota    { margin-top: 0.75rem; font-size: 0.7rem; line-height: 1.45; }
  .marquesina       { padding-block: 0.6rem 0; }
}

/* Entrada de la portada. El texto no aparece de golpe: cada pieza sube en
   secuencia al cargar. Es lo primero que se ve y lo que decide si la página
   se siente viva o impresa. */
@media (prefers-reduced-motion: no-preference) {
  .portada__titulo,
  .portada__entrada,
  .credito,
  .portada__acciones,
  .marquesina {
    animation: entradaPortada 0.95s var(--curva) both;
  }
  .portada__titulo   { animation-delay: 0.08s; }
  .portada__entrada  { animation-delay: 0.26s; }
  .credito           { animation-delay: 0.40s; }
  .portada__acciones { animation-delay: 0.52s; }
  .marquesina        { animation-delay: 0.64s; }
}

@keyframes entradaPortada {
  from { opacity: 0; transform: translateY(1.6rem); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------- cierre de la portada */
/* Hacía falta un final claro: la portada terminaba y la siguiente sección
   empezaba sin que nada marcara el corte. */
.portada::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--oro-tenue) 20%, var(--oro-tenue) 80%, transparent);
}

/* -------------------------------------------------------------- marquesina */
/* Fila de retratos que avanza despacio bajo el titular. Ocupa una banda
   propia, así las fotografías tienen presencia sin cruzarse con el texto.
   La pista lleva la lista duplicada y se desplaza justo el ancho de la
   primera mitad, de modo que el ciclo cierra sin salto. */

.marquesina {
  position: relative; z-index: 1;
  width: 100%; overflow: hidden;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquesina__pista {
  display: flex; gap: clamp(0.6rem, 1.4vw, 1rem);
  width: max-content;
  animation: desfile 72s linear infinite;
}
.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }

.marquesina .foto {
  flex: none;
  height: clamp(9rem, 20vw, 15rem);
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  border: 1px solid rgba(244, 234, 220, 0.1);
}
/* Inclinación alterna, muy leve: da vida sin volverse un collage torcido. */
.marquesina .foto:nth-child(odd)  { transform: rotate(-1.2deg); }
.marquesina .foto:nth-child(even) { transform: rotate(1.6deg); }

@keyframes desfile {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(0.3rem, 0.7vw, 0.5rem))); }
}

@media (max-width: 880px) {
  .portada { padding-top: clamp(6rem, 13vh, 8rem); }
  .marquesina .foto { height: clamp(7.5rem, 32vw, 11rem); }
}

/* ---------------------------------------------------------------- foto base */

.foto { position: relative; overflow: hidden; background: var(--tinta-alta); }
.foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.5s var(--curva);
}
.foto img.cargando, .toma img.cargando { opacity: 0; }
.foto__fondo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(18px); transform: scale(1.1);
}

/* La miniatura borrosa va detrás; la fotografía real, encima. */
.foto picture, .toma picture, .portada__foto picture, .cierre__foto picture {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
}

/* ------------------------------------------------------------ desplegable */
/* La fotografía del concepto entra inclinada hacia atrás y se endereza al
   bajar. Sin marco de dispositivo ni sombras de producto: sólo el borde
   dorado tenue de la casa. Todo es transform, así que corre en GPU. */

.desplegable {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  perspective: 1200px;
  perspective-origin: center 20%;
}
.desplegable__marco {
  max-width: 62rem; margin-inline: auto;
  border: 1px solid var(--oro-tenue);
  border-radius: 2px;
  padding: clamp(0.4rem, 0.9vw, 0.7rem);
  background: var(--tinta-alta);
  transform-origin: center top;
  /* Valores por defecto: derecha. El JS sólo los modifica si puede. */
  transform: rotateX(0deg) scale(1);
  will-change: transform;
}
/* Sin aspect-ratio fijo: la proporción llega desde la propia fotografía
   (ver pintarConcepto), de modo que nunca se recorta. */
.desplegable__marco .foto { border-radius: 1px; }
.desplegable__marco { max-width: 48rem; }

@media (max-width: 880px) {
  .desplegable { perspective: 900px; }

}

/* ---------------------------------------------------------------- paquetes */

.paquetes {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin-top: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}

.paquete {
  position: relative;
  background: var(--tinta-alta);
  border: 1px solid rgba(244, 234, 220, 0.09);
  border-radius: 2px;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 1.5rem;
  transition: border-color 0.3s var(--curva), transform 0.3s var(--curva);
}
.paquete:hover { border-color: var(--oro-tenue); }
.paquete--destacado {
  border-color: var(--oro-tenue);
  background: linear-gradient(180deg, rgba(197,154,74,0.07), var(--tinta-alta) 45%);
}
@media (min-width: 900px) {
  .paquete--destacado { transform: translateY(-1.25rem); }
  .paquete--destacado:hover { transform: translateY(-1.6rem); }
}

.paquete__etiqueta {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--oro); color: #14100D;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.4rem 0.95rem; border-radius: 2px; white-space: nowrap;
}

.paquete__capitulo {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--oro); margin: 0 0 0.5rem;
}
.paquete__nombre { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.25rem); }
.paquete__mensaje {
  font-family: var(--serif); font-style: italic; font-optical-sizing: auto;
  font-size: 1.08rem; line-height: 1.4; color: var(--beige);
  margin: 0.65rem 0 0;
}

.precio { border-block: 1px solid rgba(244, 234, 220, 0.09); padding-block: 1.35rem; }
.precio__rotulo { font-size: 0.78rem; color: var(--beige); margin: 0 0 0.35rem; }
/* El ahorro en dorado, que es el acento de la casa, y el cierre en beige:
   el dato que empuja destaca, el que contextualiza acompaña. */
.precio__ahorro {
  margin: 0.65rem 0 0; color: var(--oro);
  font-size: 0.95rem; font-weight: 500;
}
.precio__cierre {
  margin: 0.35rem 0 0; color: var(--beige);
  font-size: 0.82rem; letter-spacing: 0.02em;
}
.precio__preventa { font-family: var(--serif); font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3rem); line-height: 1; }
.precio__preventa small { font-size: 0.38em; letter-spacing: 0.08em; color: var(--beige); margin-left: 0.4rem; }
.precio__regular { font-size: 0.88rem; color: var(--beige); margin: 0.55rem 0 0; }
.precio__regular s { text-decoration-color: rgba(185, 170, 152, 0.6); }

.detalles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
/* Rejilla en vez de flex: el icono, el dato y la nota caen siempre en la
   misma columna, así el ojo puede comparar los tres paquetes bajando en
   vertical sin perder la referencia. */
.detalles li {
  display: grid; grid-template-columns: 17px 1fr; gap: 0.15rem 0.8rem;
  align-items: start; font-size: 0.94rem;
}
.detalles li > b { grid-column: 2; }
.detalles li > span { grid-column: 2; font-size: 0.86rem; line-height: 1.4; }
.detalles svg { flex: 0 0 17px; margin-top: 0.22rem; stroke: var(--oro); fill: none; stroke-width: 1.4; }
.detalles b { font-weight: 600; }
.detalles span { color: var(--beige); }
.detalles li.extra b { color: var(--oro); }

.paquete .boton { margin-top: auto; }

/* ---------------------------------------------------------------- rincones */

.selector {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: clamp(2rem, 5vw, 3rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
/* Los botones de capítulo: en píldora, con el capítulo en pequeño arriba y
   el nombre debajo. El activo se llena de dorado y se adelanta un punto. */
.selector button {
  position: relative; overflow: hidden;
  display: grid; gap: 0.15rem; justify-items: start;
  font: 500 0.92rem/1.15 var(--sans); letter-spacing: 0.02em;
  color: var(--beige); background: rgba(244, 234, 220, 0.03); cursor: pointer;
  border: 1px solid rgba(244, 234, 220, 0.14); border-radius: 999px;
  padding: 0.7rem 1.35rem; min-height: 46px;
  transition: color 0.3s var(--curva), background-color 0.3s var(--curva),
              border-color 0.3s var(--curva), transform 0.3s var(--curva);
}
.selector button .orden {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.7;
}
.selector button:hover {
  color: var(--marfil); border-color: rgba(244, 234, 220, 0.34);
  background: rgba(244, 234, 220, 0.06);
}
.selector button[aria-selected="true"] {
  background: var(--oro); border-color: var(--oro); color: #14100D; font-weight: 600;
  transform: translateY(-2px);
}
.selector button[aria-selected="true"] .orden { opacity: 0.75; }

.rincon { margin-bottom: clamp(3.5rem, 8vw, 5.5rem); }
.rincon:last-child { margin-bottom: 0; }

.rincon__encabezado {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.5rem 1.5rem;
  padding-bottom: 1rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--oro-tenue);
}
.rincon__nombre { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); }
.rincon__resumen { color: var(--beige); font-size: 0.94rem; margin: 0.3rem 0 0; }
.rincon__conteo { font-size: 0.8rem; color: var(--beige); }

.galeria { display: grid; gap: clamp(0.5rem, 1.2vw, 0.85rem); grid-template-columns: repeat(4, 1fr); }
.galeria .toma { grid-column: span 1; }
.galeria .toma--principal { grid-column: span 2; grid-row: span 2; }

.toma {
  position: relative; padding: 0; border: 0; border-radius: 2px;
  background: var(--tinta-alta); cursor: zoom-in; overflow: hidden;
  aspect-ratio: 3 / 4;
  transition: transform 0.35s var(--curva);
}
.toma img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s var(--curva), transform 0.6s var(--curva); }
.toma:hover img { transform: scale(1.035); }
.toma::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(244, 234, 220, 0.07);
  transition: box-shadow 0.25s var(--curva);
}
.toma:hover::after, .toma:focus-visible::after { box-shadow: inset 0 0 0 1px var(--oro-tenue); }

.leyenda { color: var(--beige); font-size: 0.86rem; font-style: italic; margin: 1.1rem 0 0; }

/* ---------------------------------------------------------------- pasos */

.pasos {
  list-style: none; counter-reset: paso; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0;
  display: grid; gap: 0; max-width: 760px;
}
.pasos li {
  counter-increment: paso;
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 0 1.25rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(244, 234, 220, 0.09);
}
.pasos li:last-child { border-bottom: 1px solid rgba(244, 234, 220, 0.09); }
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--serif); font-size: 1.5rem; color: var(--oro); line-height: 1.1;
}
.pasos h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; }
.pasos p { margin: 0.3rem 0 0; color: var(--beige); font-size: 0.94rem; }

/* ---------------------------------------------------------------- marcas */

.marcas {
  display: grid; gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.marca-tarjeta { border-top: 1px solid var(--oro-tenue); padding-top: 1.5rem; }
.marca-tarjeta h3 { font-size: 1.3rem; }

/* Franja de altura fija para que las tres marcas se alineen aunque una
   muestre logotipo y otra su nombre. El logotipo se pinta recortando su
   silueta sobre marfil: así toma el color de la paleta y no depende de
   que el archivo venga en el tono correcto. */
.marca-tarjeta__marca { height: 3.5rem; display: flex; align-items: center; }
.marca-tarjeta__logo {
  display: block; height: 100%; aspect-ratio: var(--prop, 1);
  background: var(--marfil);
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain;         mask-size: contain;
  -webkit-mask-repeat: no-repeat;     mask-repeat: no-repeat;
}
.marca-tarjeta__texto { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; margin: 0; }
.marca-tarjeta p { color: var(--beige); font-size: 0.94rem; margin: 0.6rem 0 0; }
.marca-tarjeta a { color: var(--oro); font-size: 0.85rem; text-decoration: none; display: inline-block; margin-top: 0.9rem; border-bottom: 1px solid var(--oro-tenue); }
.marca-tarjeta a:hover { border-bottom-color: var(--oro); }

/* ---------------------------------------------------------------- faq */

.faq { margin-top: clamp(2.25rem, 5vw, 3rem); }
.faq details { border-bottom: 1px solid rgba(244, 234, 220, 0.09); }
.faq details:first-child { border-top: 1px solid rgba(244, 234, 220, 0.09); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.4rem 2.5rem 1.4rem 0;
  position: relative; font-weight: 500; font-size: 1rem;
  transition: color 0.2s var(--curva);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--oro); }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1px solid var(--oro); border-bottom: 1px solid var(--oro);
  transform: rotate(45deg); transition: transform 0.3s var(--curva);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq p { color: var(--beige); margin: 0 0 1.5rem; max-width: 62ch; font-size: 0.96rem; }

/* ---------------------------------------------------------------- cierre */

.cierre { position: relative; overflow: hidden; }
.cierre__foto { position: absolute; inset: 0; z-index: 0; }
.cierre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cierre__velo {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, var(--tinta) 30%, rgba(23,18,15,0.9) 55%, rgba(23,18,15,0.7));
}
.cierre__caja {
  position: relative; z-index: 2;
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .cierre__caja { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- formulario */

.forma {
  background: rgba(30, 24, 19, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--oro-tenue); border-radius: 2px;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr;
}
.forma__intro {
  grid-column: 1 / -1; margin: 0; font-size: 0.86rem; color: var(--beige);
  padding-bottom: 0.5rem; border-bottom: 1px solid rgba(244, 234, 220, 0.09);
}
/* Detalles opcionales, plegados. Comprar tiene que ser fácil: de entrada
   se ven tres campos y el botón. Fecha, hora y lo demás siguen ahí para
   quien los quiera dar, pero no como diez preguntas antes de escribir. */
.forma__mas { grid-column: 1 / -1; }
.forma__mas > summary {
  cursor: pointer; list-style: none;
  font-size: 0.86rem; color: var(--oro);
  padding: 0.85rem 1.6rem 0.85rem 0; position: relative;
  border-top: 1px solid rgba(244, 234, 220, 0.09);
  transition: color 0.2s var(--curva);
}
.forma__mas > summary::-webkit-details-marker { display: none; }
.forma__mas > summary:hover { color: var(--marfil); }
.forma__mas > summary::after {
  content: ""; position: absolute; right: 0.3rem; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1px solid var(--oro); border-bottom: 1px solid var(--oro);
  transform: rotate(45deg); transition: transform 0.3s var(--curva);
}
.forma__mas[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.forma__mas-campos {
  display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr;
  padding-top: 0.35rem;
}

.campo { grid-column: 1 / -1; display: grid; gap: 0.45rem; }
.campo--mitad { grid-column: span 1; }
.campo label { font-size: 0.85rem; color: var(--beige); }
.req { color: var(--oro); }
.opc { color: rgba(185, 170, 152, 0.65); font-size: 0.92em; }

.campo input, .campo select, .campo textarea {
  font: 400 0.98rem/1.5 var(--sans);
  color: var(--marfil); background: rgba(23, 18, 15, 0.7);
  border: 1px solid rgba(244, 234, 220, 0.16); border-radius: 2px;
  padding: 0.8rem 0.9rem; width: 100%;
  transition: border-color 0.2s var(--curva);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: rgba(244, 234, 220, 0.3); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--oro); outline: none; box-shadow: 0 0 0 1px var(--oro); }
.campo textarea { resize: vertical; min-height: 5rem; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%), linear-gradient(135deg, var(--oro) 50%, transparent 50%); background-position: right 1.05rem center, right 0.8rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.campo select option { background: var(--tinta-alta); color: var(--marfil); }
.campo input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(72%) sepia(35%) saturate(500%) hue-rotate(2deg); cursor: pointer; }

.campo--check { grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; }
.campo--check input {
  width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; accent-color: var(--oro); flex: none;
}
/* Amplía el área tocable de la casilla sin agrandar el cuadro dibujado. */
.campo--check { position: relative; padding: 0.45rem 0; }
.campo--check label::before { content: ""; position: absolute; inset: 0 auto 0 -0.6rem; width: 44px; }
.campo--check label { font-size: 0.85rem; line-height: 1.5; }

.forma__aviso {
  grid-column: 1 / -1; margin: -0.35rem 0 0;
  font-size: 0.8rem; color: var(--beige);
}
.forma__aviso a { color: var(--oro); }

.forma__error { grid-column: 1 / -1; margin: 0; color: #E4A08A; font-size: 0.88rem; }
.forma .boton { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- pie */

.pie { border-top: 1px solid var(--oro-tenue); padding-block: clamp(3rem, 7vw, 4.5rem) clamp(6rem, 10vw, 4rem); }
.pie__rejilla {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
  align-items: start;
}
.pie__marca { display: grid; gap: 0.75rem; }
.pie__columna { display: grid; gap: 0.6rem; align-content: start; }
.pie__titulo {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--oro); margin: 0 0 0.35rem;
}
.pie__columna a {
  color: var(--marfil); opacity: 0.78; text-decoration: none;
  font-size: 0.9rem; width: fit-content;
  border-bottom: 1px solid transparent;
  transition: opacity 0.25s var(--curva), border-color 0.25s var(--curva);
}
.pie__columna a:hover { opacity: 1; border-bottom-color: var(--oro-tenue); }
.pie__dato { margin: 0; color: var(--beige); font-size: 0.86rem; line-height: 1.5; }
.pie__redes { flex-direction: column; align-items: flex-start; gap: 0.6rem; }

@media (max-width: 880px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .pie__rejilla { grid-template-columns: 1fr; }
}
.pie__colaboracion { font-family: var(--serif); font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem); margin: 0; }
.pie__linea { color: var(--beige); font-size: 0.86rem; margin: 0; max-width: 42ch; }
.pie__legal { color: var(--beige); font-size: 0.78rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; opacity: 0.7; border-top: 1px solid rgba(244,234,220,0.08); padding-top: 1.5rem; }
.pie__legal { font-size: 0.78rem; opacity: 0.7; }
.pie__redes { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.pie__redes a { color: var(--oro); font-size: 0.85rem; text-decoration: none; border-bottom: 1px solid var(--oro-tenue); }
.pie__redes a:hover { border-bottom-color: var(--oro); }

/* ---------------------------------------------------------------- barra móvil */

:root { --barra-alto: 4.75rem; }

.barra {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem var(--canal) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(23, 18, 15, 0.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--oro-tenue);
}
.barra__texto { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro); }
.barra .boton { padding: 0.85rem 1.2rem; min-height: 44px; font-size: 0.86rem; }

/* ---------------------------------------------------------------- visor */

.visor {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; border: 0; background: rgba(15, 11, 9, 0.97);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  color: var(--marfil);
}
.visor::backdrop { background: rgba(15, 11, 9, 0.9); }
.visor[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }

.visor__marco { margin: 0; padding: clamp(1rem, 3vw, 2.5rem) clamp(0.85rem, 3vw, 1.5rem); display: grid; gap: 1rem; justify-items: center; min-height: 0; }
.visor__marco img { max-height: calc(100dvh - 8rem); width: auto; max-width: 100%; object-fit: contain; }
.visor__marco figcaption { color: var(--beige); font-size: 0.84rem; text-align: center; padding-inline: 1rem; max-width: 60ch; }

.visor__cerrar, .visor__nav {
  background: none; border: 0; cursor: pointer; color: var(--marfil);
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center;
  transition: color 0.2s var(--curva);
}
.visor__cerrar:hover, .visor__nav:hover { color: var(--oro); }
.visor__cerrar { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; }
.visor__cerrar::before, .visor__cerrar::after {
  content: ""; position: absolute; width: 20px; height: 1px; background: currentColor;
}
.visor__cerrar::before { transform: rotate(45deg); }
.visor__cerrar::after  { transform: rotate(-45deg); }
.visor__nav::before {
  content: ""; width: 12px; height: 12px;
  border-top: 1px solid currentColor; border-left: 1px solid currentColor;
}
.visor__nav--previo::before     { transform: rotate(-45deg); }
.visor__nav--siguiente::before  { transform: rotate(135deg); }

/* ---------------------------------------------------------------- aviso borrador */

#aviso-borrador {
  position: relative; z-index: 150;
  background: #2A2016; border-bottom: 1px solid var(--oro);
  padding: 0.9rem var(--canal); font-size: 0.82rem; line-height: 1.55;
}
#aviso-borrador b { color: var(--oro); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; }
#aviso-borrador ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--beige); columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { #aviso-borrador ul { columns: 1; } }
.pendiente {
  display: inline-block; background: rgba(197, 154, 74, 0.16); color: var(--oro);
  border: 1px dashed var(--oro-tenue); border-radius: 2px;
  padding: 0.1rem 0.5rem; font-size: 0.76rem; letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------- aparición */

.aparece {
  opacity: 0; transform: translateY(1.75rem);
  transition: opacity 0.8s var(--curva), transform 0.8s var(--curva);
  transition-delay: var(--retraso, 0ms);
  will-change: opacity, transform;
}
.aparece.visible { opacity: 1; transform: none; will-change: auto; }

/* Variantes: que el recorrido no repita siempre el mismo gesto. */
.aparece--foto    { transform: translateY(1.25rem) scale(0.965); }
.aparece--lateral { transform: translateX(-1.5rem); }
/* La sección entera no se desvanece: sólo sirve para disparar su línea. */
.aparece--solo-linea { opacity: 1; transform: none; }
.aparece--foto.visible,
.aparece--lateral.visible { transform: none; }

/* ------------------------------------------------------------ al tocar */
/* En un teléfono no hay hover: la única respuesta posible es la del dedo.
   Sin esto, cada toque se siente muerto y la página parece un documento. */

.boton:active,
.selector button:active,
.coverflow__flecha:active,
.faq summary:active { transform: scale(0.97); }

.toma:active img { transform: scale(1.03); }
.coverflow__carta:not([data-pos="0"]):active { opacity: 0.9; }
.paquete:active, .testimonio:active { border-color: var(--oro-tenue); }

.boton, .selector button, .coverflow__flecha, .toma img,
.coverflow__carta, .faq summary {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .menu { display: grid; }
  .nav {
    position: fixed; inset: 0 0 auto; top: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--tinta); padding: 5.5rem var(--canal) 2.5rem;
    border-bottom: 1px solid var(--oro-tenue);
    transform: translateY(-100%); transition: transform 0.35s var(--curva);
    visibility: hidden;
  }
  .nav.abierto { transform: translateY(0); visibility: visible; }
  .nav a { padding: 1rem 0; font-size: 1.05rem; border-bottom: 1px solid rgba(244,234,220,0.07); }
  .nav .boton--sutil { margin-top: 1.25rem; justify-content: center; border-bottom: 1px solid var(--oro-tenue); }
  .barra { display: flex; }

  /* Tarjetas más compactas: en un teléfono entra más de un paquete por
     pantalla y la comparación deja de exigir desplazamientos largos. */
  .paquete { padding: 1.5rem 1.35rem; gap: 1.15rem; }
  .paquete__mensaje { font-size: 1rem; margin-top: 0.5rem; }
  .precio { padding-block: 1.1rem; }
  .detalles { gap: 0.7rem; }
  .paquetes { gap: 1rem; }
  /* La barra es fixed y flotaba sobre los botones de portada y sobre el pie.
     Reservamos su altura para que nada quede debajo. */
  body { padding-bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom)); }
  .portada { padding-bottom: calc(clamp(3rem, 8vw, 5.5rem) + var(--barra-alto)); }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  /* Las 23 de 24 fotografías son verticales. Forzarlas a 4/3 recortaba el
     44% de la altura y se comía caras y manos. La principal ocupa el ancho
     completo y conserva su proporción; las de apoyo van de a dos. */
  .galeria .toma--principal {
    grid-column: span 2; grid-row: span 1;
    aspect-ratio: 4 / 5;
  }
  .portada { min-height: 92svh; }
  .visor[open] { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .visor__nav { position: absolute; bottom: 1rem; }
  .visor__nav--previo { left: 15%; }
  .visor__nav--siguiente { right: 15%; }
}

@media (max-width: 540px) {
  .tira { grid-template-columns: 1fr 1fr; }
  .tira .foto:nth-child(3) { display: none; }
  .forma { grid-template-columns: 1fr; }
  .forma__mas-campos { grid-template-columns: 1fr 1fr; }
  .campo--mitad { grid-column: span 1; }
}

/* ------------------------------------------------------------- coverflow */
/* Escenario en perspectiva con los tres capítulos. La foto manda: el texto
   vive debajo, nunca encima, para no cruzar rostros ni manos. Sin
   degradados ni resplandores dorados: el dorado sólo marca el activo. */

.coverflow { position: relative; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.coverflow__escena {
  position: relative;
  /* Alto = tarjeta (3/4 de su ancho invertido) más aire para los laterales
     girados. Atado al ancho de la tarjeta para que no sobre espacio. */
  height: calc(clamp(12rem, 26vw, 17rem) * 4 / 3 + 2.5rem);
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
  outline-offset: 6px;
  /* El gesto horizontal es nuestro; el vertical sigue siendo de la página. */
  touch-action: pan-y;
  transition: transform 0.45s var(--curva);
}
.coverflow__escena.arrastrando {
  transition: none;
  cursor: grabbing;
  user-select: none; -webkit-user-select: none;
}

.coverflow__carta {
  position: absolute;
  width: clamp(12rem, 26vw, 17rem);
  aspect-ratio: 3 / 4;          /* vertical, como las fotografías */
  border: 1px solid rgba(244, 234, 220, 0.14);
  border-radius: 2px;
  overflow: hidden;
  background: var(--tinta-alta);
  padding: 0;
  transform-origin: center center;
  transition: transform 0.8s var(--curva), opacity 0.8s var(--curva),
              filter 0.8s var(--curva), border-color 0.3s var(--curva);
  cursor: pointer;
}
.coverflow__carta img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Posiciones. El activo al frente y nítido; los laterales girados y atenuados. */
.coverflow__carta[data-pos="0"] {
  transform: translateX(0) scale(1) rotateY(0deg);
  opacity: 1; z-index: 30; filter: none;
  border-color: var(--oro-tenue);
  cursor: default;
}
.coverflow__carta[data-pos="1"]  { transform: translateX(62%)  scale(0.84) rotateY(-24deg); opacity: 0.6; z-index: 20; filter: brightness(0.7); }
.coverflow__carta[data-pos="-1"] { transform: translateX(-62%) scale(0.84) rotateY(24deg);  opacity: 0.6; z-index: 20; filter: brightness(0.7); }
.coverflow__carta[data-pos="2"]  { transform: translateX(108%) scale(0.7)  rotateY(-34deg); opacity: 0.3; z-index: 10; filter: brightness(0.5); }
.coverflow__carta[data-pos="-2"] { transform: translateX(-108%) scale(0.7) rotateY(34deg);  opacity: 0.3; z-index: 10; filter: brightness(0.5); }

.coverflow__carta:not([data-pos="0"]):hover { opacity: 0.85; filter: brightness(0.85); }

/* Texto del capítulo activo, debajo del escenario */

.coverflow__capitulo {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--oro); margin: 0 0 0.6rem;
}
.coverflow__nombre { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin: 0; }
.coverflow__mensaje {
  font-family: var(--serif); font-style: italic; color: var(--beige);
  font-size: 1.05rem; margin: 0.6rem auto 0; max-width: 38ch;
}
.coverflow__escenas {
  margin: 1.1rem auto 0; color: var(--marfil); opacity: 0.8;
  font-size: 0.9rem; max-width: 44ch;
}


/* Flechas */
/* El gesto manda; la flecha sólo está por si alguien la busca. Sin pastilla
   ni desenfoque: una punta fina que no compite con la fotografía. Al llegar
   al extremo se apaga en vez de desaparecer, para que el carrusel no parezca
   roto ni cambie de ancho. */
.coverflow__flecha {
  position: absolute; top: clamp(10rem, 23vw, 15rem); transform: translateY(-50%);
  width: 44px; height: 44px;
  background: transparent; border: 0; appearance: none; -webkit-appearance: none;
  cursor: pointer; z-index: 40;
  opacity: 0.4;
  transition: opacity 0.25s var(--curva);
}
.coverflow__flecha:hover, .coverflow__flecha:focus-visible { opacity: 1; }
.coverflow__flecha:disabled { opacity: 0.1; cursor: default; }
.coverflow__flecha--previo { left: 0; }
.coverflow__flecha--siguiente { right: 0; }
.coverflow__flecha::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 10px; height: 10px;
  border-top: 1px solid var(--marfil); border-right: 1px solid var(--marfil);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}
.coverflow__flecha--previo::before  { transform: rotate(-135deg); margin-left: 18px; }
.coverflow__flecha--siguiente::before { transform: rotate(45deg); margin-right: 18px; }

/* Indicadores */
.coverflow__puntos { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.coverflow__puntos span {
  height: 6px; width: 6px; border-radius: 999px;
  background: rgba(244, 234, 220, 0.25);
  transition: width 0.35s var(--curva), background-color 0.35s var(--curva);
}
.coverflow__puntos span.activo { width: 26px; background: var(--oro); }

@media (max-width: 880px) {
  .coverflow__carta { width: clamp(11rem, 46vw, 14rem); }
  .coverflow__escena { height: calc(clamp(11rem, 46vw, 14rem) * 4 / 3 + 2rem); }

  /* En un teléfono las tarjetas laterales salen del encuadre y su banda
     quedaba cortada contra el borde. Sólo la activa muestra nombre, precio
     y distintivo; el resto acompaña como contexto visual. */
  .coverflow__carta:not([data-pos="0"]) .coverflow__banda,
  .coverflow__carta:not([data-pos="0"]) .coverflow__marca { opacity: 0; }
  .coverflow__carta[data-pos="2"], .coverflow__carta[data-pos="-2"] { opacity: 0.18; }
  .coverflow__flecha { width: 38px; height: 38px; opacity: 0.28; }
}

/* ---------------------------------------------- banda de las tarjetas */
/* Nombre y precio sobre la propia tarjeta: el deslizamiento comunica la
   diferencia sin obligar a leer el panel de abajo. Va en la franja inferior,
   nunca sobre rostros. */

.coverflow__banda {
  /* La <picture> de dentro lleva z-index:1 y .foto no crea contexto de
     apilamiento, así que sube al de la tarjeta. Sin este índice la foto
     tapaba la banda. */
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 2.5rem 0.9rem 0.8rem;
  background: linear-gradient(to top, rgba(8,6,5,0.92) 32%, rgba(8,6,5,0));
  transition: opacity 0.5s var(--curva);
  text-align: left; pointer-events: none;
}
.coverflow__banda-nombre {
  font-family: var(--serif); font-size: 1.15rem; color: var(--marfil);
  line-height: 1.1; font-optical-sizing: auto;
}
.coverflow__banda-precio { font-size: 0.82rem; color: var(--oro); letter-spacing: 0.04em; }
.coverflow__marca {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  background: var(--oro); color: #14100D;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: 2px; pointer-events: none;
}

/* --------------------------------------------------- detalle del capítulo */

.detalle {
  max-width: 44rem; margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border: 1px solid rgba(244, 234, 220, 0.12);
  border-radius: 2px;
  background: rgba(244, 234, 220, 0.025);
  display: grid; gap: 1.4rem;
}
.detalle__cabeza { text-align: center; }
.detalle__capitulo {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--oro); margin: 0 0 0.5rem;
}
.detalle__nombre { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem); margin: 0; }
.detalle__mensaje {
  font-family: var(--serif); font-style: italic; font-optical-sizing: auto;
  color: var(--beige); font-size: 1.05rem; margin: 0.6rem auto 0; max-width: 36ch;
}
.detalle__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.boton--texto {
  border-color: transparent; color: var(--beige);
  padding-inline: 0.9rem;
}
.boton--texto:hover { color: var(--marfil); border-color: var(--oro-tenue); }

/* ------------------------------------------------- transición de sección */
/* Una línea fina que se dibuja de izquierda a derecha cuando la sección
   entra en pantalla. Marca el cambio de una a otra sin recurrir a parallax
   ni a efectos que compitan con las fotografías. */

/* La línea se dibuja de izquierda a derecha al entrar la sección: marca el
   cambio de una a otra sin parallax ni efectos que compitan con las fotos. */
.seccion--borde::before {
  transform-origin: center;
  scale: 0 1;
  transition: scale 1.1s var(--curva);
}
.seccion--borde.visible::before { scale: 1 1; }

/* ---------------------------------------------------------- conmutador */
/* Preventa contra precio regular. No es una opción de compra: es un
   comparador. Por eso arranca siempre en preventa y vuelve el dato de
   contexto explícito debajo. */

.conmutador {
  position: relative; display: inline-flex; margin: clamp(2rem, 4vw, 3rem) auto 0;
  border: 1px solid var(--oro-tenue); border-radius: 999px; padding: 0.25rem;
  background: rgba(8, 6, 5, 0.5);
}
.conmutador__op {
  position: relative; z-index: 1;
  background: none; border: 0; cursor: pointer;
  font: 500 0.88rem/1 var(--sans); letter-spacing: 0.02em;
  color: var(--beige); padding: 0.7rem 1.2rem; border-radius: 999px;
  min-height: 44px;
  transition: color 0.3s var(--curva);
}
.conmutador__op.activo { color: #14100D; }
.conmutador__indicador {
  position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0.25rem;
  width: calc(50% - 0.25rem); border-radius: 999px;
  background: var(--oro);
  transition: transform 0.4s var(--curva);
}
.conmutador[data-modo="regular"] .conmutador__indicador { transform: translateX(100%); }
.conmutador__nota {
  text-align: center; color: var(--beige); font-size: 0.86rem;
  margin: 0.9rem 0 0; min-height: 1.3em;
}

/* -------------------------------------------------------------- planes */

.planes {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1.4rem, 2.5vw, 1.9rem);
  border: 1px solid rgba(244, 234, 220, 0.11);
  border-radius: 2px;
  background: rgba(244, 234, 220, 0.025);
  transition: border-color 0.35s var(--curva), background-color 0.35s var(--curva),
              transform 0.35s var(--curva);
}
.plan--destacado {
  border-color: var(--oro);
  background: linear-gradient(180deg, rgba(197,154,74,0.12), rgba(244,234,220,0.02) 55%);
}
.plan--destacado .plan__nombre { color: var(--marfil); }
.plan--destacado .plan__monto { font-size: clamp(2.3rem, 1.8rem + 1.9vw, 3.2rem); }
/* La tarjeta del capítulo que muestra el carrusel se adelanta. */
.plan--activo { border-color: var(--oro); background: rgba(197, 154, 74, 0.05); }
@media (min-width: 900px) {
  .plan--destacado { transform: translateY(-1rem); }
  .plan--activo { transform: translateY(-0.4rem); }
  .plan--destacado.plan--activo { transform: translateY(-1.4rem); }
}

/* En teléfono los tres apilados obligaban a bajar y bajar, y comparar se
   volvía imposible. Ahora van en fila con anclaje: se deslizan de lado,
   siempre a la misma altura, y se comparan de un vistazo. */
@media (max-width: 880px) {
  .planes {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Más angostas: los vecinos asoman de verdad por los dos lados y se
       entiende sin leer nada que hay uno antes y uno después. */
    grid-auto-columns: 76%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12%;
    margin-inline: calc(var(--canal) * -1);
    padding: 1.5rem 12% 0.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .planes::-webkit-scrollbar { display: none; }
  .plan { scroll-snap-align: center; height: 100%; }
  /* Los vecinos se atenúan: la del centro es la que se está mirando. */
  .plan { opacity: 0.5; transition: opacity 0.45s var(--curva); }
  .plan--enfoque { opacity: 1; }
  .plan--destacado { border-width: 2px; }
}

/* Señal de que hay más de uno al lado */
/* Un empujón breve la primera vez que la fila aparece: se mueve sola y
   vuelve. Es la manera más clara de decir "esto se desliza" sin poner un
   cartel que lo explique. */
@keyframes sugerirDeslizar {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(-1.5rem); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .planes.sugerir > .plan { animation: sugerirDeslizar 1.3s var(--curva) 1; }
}

.planes__pista {
  display: none; justify-content: center; gap: 0.4rem; margin-top: 1rem;
}
.planes__pista span {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(244, 234, 220, 0.25);
  transition: width 0.3s var(--curva), background-color 0.3s var(--curva);
}
.planes__pista span.activo { width: 22px; background: var(--oro); }
@media (max-width: 880px) { .planes__pista { display: flex; } }

.plan__etiqueta {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.85rem; border-radius: 999px; white-space: nowrap;
}

/* ------------------------------------------------ los tres papeles
   Cada capítulo pesa distinto y se ve distinto, sin colores fuera de la
   paleta: cambia el material, no el tono.

   entrada  — acogedor y sobrio. Nunca debe leerse como "el barato".
   elegido  — dorado lleno, el más grande: es la recomendación.
   premium  — marfil sobre fondo profundo. Elegante en vez de caro. */

/* Entrada */
.plan[data-rol="entrada"] { border-color: rgba(244, 234, 220, 0.16); }
.plan[data-rol="entrada"] .plan__etiqueta {
  background: transparent; color: var(--beige);
  border: 1px solid rgba(244, 234, 220, 0.28);
  backdrop-filter: blur(6px);
}

/* Más elegido */
.plan[data-rol="elegido"] .plan__etiqueta { background: var(--oro); color: #14100D; }

/* Premium */
.plan[data-rol="premium"] {
  background: linear-gradient(180deg, rgba(8, 6, 5, 0.85), rgba(8, 6, 5, 0.5));
  border-color: rgba(244, 234, 220, 0.3);
}
.plan[data-rol="premium"] .plan__etiqueta {
  background: var(--marfil); color: #14100D;
}
.plan[data-rol="premium"] .plan__capitulo { color: var(--marfil); opacity: 0.75; }
.plan[data-rol="premium"] .plan__incluye svg { stroke: var(--marfil); }
.plan[data-rol="premium"] .plan__incluye li.extra span { color: var(--marfil); font-weight: 500; }
.plan[data-rol="premium"] .plan__nombre { letter-spacing: 0.01em; }

/* Distintivo del carrusel, con el mismo criterio */
.coverflow__carta[data-rol="entrada"] .coverflow__marca {
  background: transparent; color: var(--marfil);
  border: 1px solid rgba(244, 234, 220, 0.4);
}
.coverflow__carta[data-rol="premium"] .coverflow__marca {
  background: var(--marfil); color: #14100D;
}
.plan__capitulo {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--oro); margin: 0;
}
.plan__nombre { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.95rem); margin: 0; }
.plan__mensaje {
  font-family: var(--serif); font-style: italic; font-optical-sizing: auto;
  color: var(--beige); font-size: 1rem; margin: 0; line-height: 1.4;
}

.plan__precio { border-block: 1px solid rgba(244, 234, 220, 0.09); padding-block: 1.2rem; }
.plan__monto {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(2.1rem, 1.7rem + 1.6vw, 2.9rem); line-height: 1;
  margin: 0; font-variant-numeric: tabular-nums;
  transition: color 0.35s var(--curva);
}
.plan__monto small { font-size: 0.36em; letter-spacing: 0.08em; color: var(--beige); margin-left: 0.4rem; }
/* En modo "precio regular" la cifra se apaga: es lo que se quiere evitar. */
.plan--regular .plan__monto { color: var(--beige); }
.plan__pie-precio { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--beige); }

.plan__incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.plan__incluye li { display: grid; grid-template-columns: 16px 1fr; gap: 0.7rem; align-items: start; font-size: 0.92rem; }
.plan__incluye svg { width: 16px; height: 16px; margin-top: 0.2rem; stroke: var(--oro); fill: none; stroke-width: 1.6; }
.plan__incluye li.extra span { color: var(--oro); }
.plan .boton { margin-top: auto; }
.plan .boton--texto { margin-top: 0.1rem; }

/* ---------------------------------------------------------- testimonios */

.testimonios {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.testimonio {
  margin: 0; padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid rgba(244, 234, 220, 0.12);
  border-radius: 2px;
  background: rgba(244, 234, 220, 0.02);
  display: flex; flex-direction: column; gap: 1.25rem;
  transition: border-color 0.3s var(--curva), background-color 0.3s var(--curva);
}
.testimonio:hover {
  border-color: var(--oro-tenue);
  background: rgba(244, 234, 220, 0.04);
}
.testimonio__texto {
  margin: 0; color: var(--marfil); opacity: 0.9;
  font-size: 1.02rem; line-height: 1.6;
}
.testimonio__pie { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }

/* ------------------------------------------------- testimonios en voz */
/* Reproductor propio: el control del navegador llega con su caja gris y
   su tipografía, y a este fondo lo parte en dos. Las barras son los picos
   reales del audio; lo escuchado se tiñe de dorado. */

.voz { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.6rem; }
.voz audio { display: none; }

.voz__boton {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: 999px;
  background: transparent; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--oro-tenue);
  position: relative; cursor: pointer;
  transition: border-color 0.25s var(--curva), background-color 0.25s var(--curva);
}
.voz__boton:hover { border-color: var(--oro); background: rgba(197, 154, 74, 0.08); }
/* Triángulo de reproducir, hecho con bordes para no dibujar un icono. */
.voz__boton::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 10px solid var(--oro);
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
  margin-left: 1.15rem;
}
/* Y las dos barras de pausa, sobre el mismo elemento. */
.voz--sonando .voz__boton::before {
  width: 4px; height: 13px; border: 0; margin: auto; margin-left: 1.05rem;
  background: var(--oro); box-shadow: 7px 0 0 var(--oro);
}

.voz__onda {
  flex: 1 1 auto; position: relative; height: 2.4rem;
  background: transparent; border: 0; padding: 0; appearance: none;
  cursor: pointer; min-width: 0;
}
.voz__barras {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 2px;
}
.voz__barras span {
  flex: 1 1 0; min-width: 0; border-radius: 999px;
  background: rgba(244, 234, 220, 0.22);
}
.voz__barras--oido { clip-path: inset(0 100% 0 0); }
.voz__barras--oido span { background: var(--oro); }
.voz__onda:hover .voz__barras span { background: rgba(244, 234, 220, 0.34); }
.voz__onda:hover .voz__barras--oido span { background: var(--oro); }

.voz__tiempo {
  flex: none; font-size: 0.8rem; color: var(--beige);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}

/* En voz no hay párrafo que empuje el pie hacia abajo. */
.testimonio--voz { justify-content: flex-start; }
.testimonio__inicial {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(197, 154, 74, 0.16);
  border: 1px solid var(--oro-tenue);
  color: var(--oro); font-family: var(--serif); font-size: 1.05rem;
}
.testimonio__quien { display: flex; flex-direction: column; line-height: 1.3; }
.testimonio__quien strong { font-weight: 500; font-size: 0.95rem; }
.testimonio__detalle { font-size: 0.8rem; color: var(--beige); }

/* ----------------------------------------------------------- profundidad */
/* Las secciones alternan entre el fondo base y una superficie elevada, con
   degradados de transición para que el corte no se vea como una línea. Da
   la sensación de recorrer lugares distintos en vez de una sola lámina.
   Todo dentro de la misma familia oscura: el Theme Lock se mantiene. */

/* Escala de profundidad. Al bajar se atraviesan habitaciones: las secciones
   de contenido denso se aclaran un punto y las de contemplación se hunden.
   Todo dentro de la misma familia cálida, así el Theme Lock se mantiene. */
#concepto     { background: linear-gradient(to bottom, var(--tinta), var(--tinta-honda)); }

/* El escenario de los capítulos se hunde hacia un negro más profundo y
   regresa al fondo base antes de terminar. Así la sección gana aire y
   profundidad sin que el cambio se note como un corte, y "Elige hasta
   dónde quieres que llegue la historia" arranca con el fondo de siempre. */
#capitulos {
  background: linear-gradient(
    to bottom,
    var(--tinta-honda) 0%,
    var(--tinta-honda) 18%,
    var(--tinta-honda) 42%,
    var(--tinta) 72%,
    var(--tinta) 100%
  );
}
/* Con el degradado propio, la línea divisoria superior sobra. */
#capitulos.seccion--borde::before { display: none; }

/* Rincones: se hunde, porque es la sección donde se mira fotografía. */
#rincones {
  background: linear-gradient(to bottom,
    var(--tinta) 0%, var(--tinta-honda) 22%, var(--tinta-honda) 78%, var(--tinta) 100%);
}
/* Experiencia y colaboración: contenido de lectura, superficie elevada. */
#experiencia   { background: linear-gradient(to bottom, var(--tinta), var(--tinta-alta) 12%, var(--tinta-alta)); }
#colaboracion  { background: var(--tinta-alta); }
/* Testimonios: se hunde otra vez para separar de la colaboración. */
#testimonios {
  background: linear-gradient(to bottom,
    var(--tinta-alta) 0%, var(--tinta-honda) 26%, var(--tinta-honda) 100%);
}
#preguntas     { background: linear-gradient(to bottom, var(--tinta-honda), var(--tinta) 18%, var(--tinta)); }

/* Con fondos propios, las líneas divisorias sobran donde ya hay contraste. */
#rincones.seccion--borde::before,
#experiencia.seccion--borde::before,
#colaboracion.seccion--borde::before,
#testimonios.seccion--borde::before,
#preguntas.seccion--borde::before { display: none; }

/* ------------------------------------------------------- deriva de portada */
/* La foto de portada se acerca muy lentamente al cargar. Motivo: sostiene la
   idea de una noche que avanza y evita que el primer pantallazo se lea como
   una imagen congelada. Sólo transform, así que corre en GPU. */
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img {
    animation: deriva 26s var(--curva) forwards;
    will-change: transform;
  }
}

@keyframes deriva {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Se elimina el desplazamiento y el zoom; el color, el foco y la opacidad
     siguen respondiendo, porque son retroalimentación, no decoración. */
  .aparece, .aparece--foto, .aparece--lateral {
    opacity: 1; transform: none; transition: none;
  }
  .boton:active, .selector button:active, .coverflow__flecha:active,
  .faq summary:active, .toma:active img { transform: none; }
  .coverflow__escena { transition: none; }
  .paquete--destacado, .paquete--destacado:hover { transform: none; }
  .desplegable__marco { transform: none !important; }
  .toma:hover img { transform: none; }
  .marquesina__pista { animation: none; }
  .portada__titulo, .portada__entrada, .credito,
  .portada__acciones, .marquesina { animation: none; }
  .marquesina .foto:nth-child(odd),
  .marquesina .foto:nth-child(even) { transform: none; }
  .coverflow__carta { transition: opacity 0.2s linear; }
  .coverflow__carta[data-pos="0"] { transform: none; }
  .coverflow__carta:not([data-pos="0"]) { opacity: 0; pointer-events: none; }
  .boton--oro:hover { transform: none; }
  .nav { transition: none; }
  .faq details[open] summary::after { transition: none; }
}

/* ------------------------------------------------- documentos legales */
/* Páginas de texto largo: políticas y aviso de privacidad. Una sola
   columna angosta, sin fotografías ni movimiento. Lo único que importa
   aquí es poder leerlo y encontrar la cláusula. */

.documento { background: var(--tinta); }

.doc-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  max-width: 46rem; margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--canal);
  border-bottom: 1px solid rgba(244, 234, 220, 0.1);
}

.legal {
  max-width: 46rem; margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--canal) clamp(3rem, 8vw, 5rem);
}

.legal__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--oro); margin: 0 0 0.9rem;
}
.legal__titulo {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.2rem);
  line-height: 1.08; margin: 0 0 1.4rem;
}
.legal__entrada {
  font-size: 1.05rem; line-height: 1.7; color: var(--marfil);
  margin: 0 0 1.2rem; max-width: 40ch;
}
.legal__responsable {
  font-size: 0.92rem; line-height: 1.7; color: var(--beige);
  border-left: 1px solid var(--oro-tenue);
  padding-left: 1rem; margin: 0;
}

.legal__lista {
  list-style: none; counter-reset: clausula;
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0; padding: 0;
}
.legal__lista > li {
  counter-increment: clausula;
  padding: clamp(1.6rem, 4vw, 2.2rem) 0;
  border-top: 1px solid rgba(244, 234, 220, 0.1);
}
.legal__lista h2 {
  font-family: var(--sans); font-weight: 500;
  font-size: 1rem; letter-spacing: 0.02em;
  margin: 0 0 0.9rem;
  display: flex; gap: 0.85rem; align-items: baseline;
}
.legal__lista h2::before {
  content: counter(clausula);
  font-size: 0.78rem; color: var(--oro);
  font-variant-numeric: tabular-nums;
  min-width: 1.4rem;
}
.legal__lista p,
.legal__lista ul {
  color: var(--beige); font-size: 0.95rem; line-height: 1.75;
  margin: 0 0 0.85rem; padding-left: 2.25rem;
}
.legal__lista p:last-child, .legal__lista ul:last-child { margin-bottom: 0; }
.legal__lista ul { list-style: none; }
.legal__lista ul li { position: relative; margin-bottom: 0.5rem; }
.legal__lista ul li::before {
  content: ""; position: absolute; left: -1rem; top: 0.72em;
  width: 4px; height: 1px; background: var(--oro);
}

.legal__contacto {
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(244, 234, 220, 0.1);
  color: var(--beige); font-size: 0.95rem;
}
.legal__contacto a { color: var(--marfil); text-underline-offset: 4px; }

.doc-pie {
  border-top: 1px solid rgba(244, 234, 220, 0.1);
  padding: 2rem var(--canal); text-align: center;
}
.doc-pie a { color: var(--beige); font-size: 0.85rem; text-decoration: none; }
.doc-pie a:hover { color: var(--marfil); }

/* Pista bajo el campo de fecha: dice la temporada en palabras, para que
   nadie tenga que descubrir a golpes cuáles fechas acepta el calendario. */
.campo__pista {
  display: block; margin-top: 0.4rem;
  font-size: 0.74rem; color: var(--beige); opacity: 0.8;
}