/* ============================================================================
   Playland — hoja de estilos
   Marca: brand book de tanarchyst, noviembre 2025.

   Los pares de color no son gusto: salen de medir el contraste WCAG de la
   paleta contra la tinta y el crema. Los dos que mandan:

     · El verde de marca (#A6D305) da 1.66 sobre crema — es FONDO, nunca color
       de texto. Encima de él siempre va tinta (9.92).
     · El índigo (#465AE1) es el único color de la paleta legible como texto
       sobre crema (5.20). Por eso los enlaces son índigo y no verdes.

   Blanco sobre naranja da 3.41 y blanco sobre verde 1.76: ninguno de los dos
   se usa para texto.

   El sistema entero —eje, jerarquía, materiales, movimiento y prohibiciones—
   está en DESIGN.md, en la raíz del repo. Aquí abajo solo van los números
   medidos y las trampas: esta hoja bloquea el primer pintado y la prosa no
   viaja gratis.
   ========================================================================= */

/* --- Tipografía ------------------------------------------------------------
   Aminute es la primaria del brand book. Va autoalojada, subseteada a latin
   (22 KB) y en un solo peso, que es el único que existe.

   ATYP, la secundaria del brand book, son archivos TRIAL: licencia de prueba,
   no se puede publicar. Hasta que se compre, el cuerpo va en la sans del
   sistema — que además no cuesta ni una petición. */
@font-face {
  font-family: 'Aminute';
  src: url('../fonts/aminute-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* El respaldo mientras Aminute carga, ajustado a sus métricas reales para que
   el intercambio no mueva el texto. Aminute: x-height 0.548 em, ascender 0.700,
   descender 0.200. Arial: x-height 0.5186 em.
   size-adjust = 0.548 / 0.5186 = 105.7 %  →  y los overrides se dividen entre
   ese mismo factor para que el alto de línea no cambie. */
@font-face {
  font-family: 'Aminute respaldo';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 105.7%;
  ascent-override: 66.2%;
  descent-override: 18.9%;
  line-gap-override: 0%;
}

/* --- Tokens ---------------------------------------------------------------- */
:root {
  /* Paleta del brand book. El verde está muestreado del logo real, no del PDF:
     el brand book no le puso hex a su propio color principal. */
  --verde: #A6D305;
  --indigo: #465AE1;
  --rosa: #FF87EB;
  --lima: #E0E032;
  --naranja: #FF470B;
  --morado: #AC44D3;
  --amarillo: #FEE300;

  --crema: #FDF8EC;
  --crema-hondo: #F6EFDD;
  --tinta: #1A1A17;
  --tinta-suave: #55554d;
  --blanco: #FFFFFF;

  /* Roles */
  --fondo: var(--crema);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --enlace: var(--indigo);
  --borde: rgba(26, 26, 23, .14);
  /* Secundario sobre verde: teñido de tinta, nunca gris. */
  --texto-sobre-verde: rgba(26, 26, 23, .74);

  --fuente-titulo: 'Aminute', 'Aminute respaldo', system-ui, sans-serif;
  --fuente-texto: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida: se estira entre 360 y 1200 px de viewport sin media query. */
  --t-xs: clamp(.8125rem, .78rem + .16vw, .875rem);
  --t-sm: clamp(.9375rem, .9rem + .19vw, 1rem);
  --t-base: clamp(1rem, .95rem + .25vw, 1.125rem);
  --t-lg: clamp(1.125rem, 1.03rem + .47vw, 1.375rem);
  --t-xl: clamp(1.375rem, 1.2rem + .85vw, 1.875rem);
  --t-2xl: clamp(1.75rem, 1.42rem + 1.6vw, 2.75rem);
  /* 80 px en escritorio: es lo que parte el titular en dos líneas llenas. A
     360 px sigue dando 36 px, igual que antes, así que no toca lo medido. */
  --t-3xl: clamp(2.25rem, 1.07rem + 5.25vw, 5rem);

  --espacio: clamp(1rem, .8rem + 1vw, 1.5rem);
  --seccion: clamp(3rem, 2rem + 5vw, 6rem);
  --ancho: 1120px;
  --radio: 18px;
  --radio-sm: 12px;

  --sombra: 0 2px 8px rgba(26, 26, 23, .06), 0 12px 28px rgba(26, 26, 23, .07);
  /* La misma sombra, más profunda: es lo que da la sensación de que la tarjeta
     se levanta al pasar el cursor. Un color distinto la ensuciaría. */
  --sombra-alta: 0 4px 12px rgba(26, 26, 23, .08), 0 20px 40px rgba(26, 26, 23, .12);
  --alto-cabecera: 68px;

  /* `ease-in` no aparece en ninguna parte: empieza lento, y ese es justo el
     instante que la persona está mirando. */
  --ease-salida: cubic-bezier(.23, 1, .32, 1);
  --ease-mov: cubic-bezier(.77, 0, .175, 1);
  /* La única curva simétrica del sitio y la única con `ease-in` dentro. Solo
     para la deriva de los adornos: un vaivén con curva de salida se lee
     mecánico. No usarla para entradas ni respuestas a un clic. */
  --ease-vaiven: cubic-bezier(.45, 0, .55, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera es fija: sin esto, una ancla deja el título debajo de ella. */
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
  /* De serie llega gris del sistema, que no es de ninguna paleta. */
  scrollbar-color: rgba(26, 26, 23, .28) transparent;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Sin `overflow-x: hidden`: los adornos los recorta `.hero`. Comprobado a
     nueve anchos, de 320 a 1920 px. Esconde desbordes en vez de avisar. */
}

/* Índigo: ni verde (se perdería en el hero) ni tinta (en el pie). 5.51. */
::selection { background: var(--indigo); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--enlace);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
  transition: color .16s var(--ease-salida), text-decoration-color .16s var(--ease-salida);
}
a:hover { text-decoration-thickness: .14em; }

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

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

/* El foco visible no es opcional: los lectores de pantalla y los agentes de IA
   navegan por él.

   SIN `border-radius`: el contorno ya sigue el radio del elemento, y declararlo
   cambiaba su geometría — un botón píldora se volvía rectángulo al enfocarse.

   El color cambia por superficie porque el índigo da 3.13 sobre verde y sobre
   la tinta del pie. Sobre verde manda la tinta (9.92); sobre tinta, el verde. */
:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
}
.hero :focus-visible,
.seccion--verde :focus-visible,
.paquete--destacado :focus-visible { outline-color: var(--tinta); }
.pie :focus-visible { outline-color: var(--verde); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- Estructura ------------------------------------------------------------ */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--espacio);
}

.seccion { padding-block: var(--seccion); }
.seccion--verde { background: var(--verde); }
.seccion--crema-hondo { background: var(--crema-hondo); }

/* A la izquierda, en el eje del <h1>. La medida del <h2> va en `rem`: en `ch`
   cambiaría de ancho al llegar Aminute y movería la maquetación. */
.seccion__intro {
  max-width: 66ch;
  margin: 0 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.seccion__intro h2 { max-width: 32rem; }
.seccion__intro > p:last-child { margin-bottom: 0; }
/* El enlace de una sección a su página (desde el 2026-09-14): en voz de
   texto, índigo como todo enlace, al pie de la sección. */
.seccion__mas { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); font-size: var(--t-sm); }
.seccion__mas a::after { content: " →"; }

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--indigo);
  color: var(--blanco);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radio-sm) 0;
  z-index: 100;
}
.salta-al-contenido:focus { left: 0; }

/* --- Botones ---------------------------------------------------------------
   El primario es verde con tinta encima (9.92 de contraste). El de WhatsApp
   usa el verde de WhatsApp, no el de la marca: la gente lo reconoce por color
   y cambiarlo le quita el clic. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--fuente-titulo);
  font-size: var(--t-lg);
  line-height: 1.15;
  padding: .8em 1.5em;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .16s var(--ease-salida),
    box-shadow .16s var(--ease-salida),
    background-color .16s var(--ease-salida),
    color .16s var(--ease-salida);
  /* Área táctil mínima cómoda en móvil. */
  min-height: 48px;
}

/* Detrás de la consulta de puntero: en táctil `:hover` se queda pegado. */
@media (hover: hover) and (pointer: fine) {
  .boton:hover { transform: translateY(-2px); }
}
/* Después del hover a propósito: cuando coinciden, gana el dedo apretando. */
.boton:active { transform: scale(.97); }

/* Sin uso hoy —el cierre siempre es el verde de WhatsApp— y se queda escrito:
   es la única forma correcta de poner el verde de marca en un botón. */
.boton--primario { background: var(--verde); color: var(--tinta); box-shadow: var(--sombra); }
.boton--primario:hover { background: #B6E30A; }

.boton--whatsapp { background: #25D366; color: #072B14; box-shadow: var(--sombra); }
.boton--whatsapp:hover { background: #1FBE59; }

.boton--linea {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 2px var(--tinta);
}
.boton--linea:hover { background: var(--tinta); color: var(--crema); }

.boton--sm { font-size: var(--t-sm); padding: .6em 1.1em; min-height: 42px; }

/* --- Cabecera -------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 248, 236, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}

.cabecera__caja {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--alto-cabecera);
}

.cabecera__logo { display: block; margin-right: auto; line-height: 0; }
.cabecera__logo img { width: 140px; height: auto; }

.nav__lista {
  display: flex;
  gap: clamp(.75rem, .3rem + 1.4vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lista li { margin: 0; }
.nav__lista a {
  color: var(--tinta);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
}
.nav__lista a:hover { color: var(--indigo); text-decoration: underline; }
/* Desde que hay páginas interiores (2026-09-14) el menú dice en cuál estás. */
.nav__lista a[aria-current="page"] { color: var(--indigo); text-decoration: underline; text-underline-offset: .2em; }

/* En móvil la navegación de anclas estorba más de lo que ayuda: el botón de
   WhatsApp es el que importa y el contenido se recorre con el dedo. */
@media (max-width: 760px) {
  .nav { display: none; }
}
@media (max-width: 420px) {
  .cabecera__cta span { display: none; }
}

/* --- Hero ------------------------------------------------------------------
   El <h1> es el LCP, así que aquí NO hay imagen de fondo que descargar ni
   animación de entrada: el `hero-in` de Playville era el 53 % de su LCP.
   Los adornos van como background del contenedor a propósito — que el
   navegador los descubra tarde es justo lo que se busca.

   El titular ocupa el ancho del contenedor. NO reponer aquí un `max-width`:
   `.hero__caja` fijaba 40ch y le ganaba a `.contenedor` por orden de archivo;
   en 1440 px el <h1> caía en cinco líneas y los CTA quedaban bajo el pliegue.
   En móvil no se veía, y ahí está el 78 % de las impresiones. */
.hero {
  background: var(--verde);
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
  position: relative;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: .85;
}

/* Móvil: un solo adorno, arriba. El de bucles cruzaba sobre el segundo CTA. */
.hero::before {
  background-image: url('../img/adorno-espiral.webp');
  width: 220px; height: 203px;
  top: -46px; right: -54px;
}
.hero::after { display: none; }

/* Escritorio: los dos a la derecha en diagonal; el texto en la mitad
   izquierda y el hueco de abajo a la derecha lo llena el de bucles. */
@media (min-width: 900px) {
  .hero::before { width: 340px; height: 314px; top: -112px; right: -56px; }
  .hero::after {
    display: block;
    background-image: url('../img/adorno-bucles.webp');
    width: 220px; height: 290px;
    bottom: -86px; right: 7%;
  }
}

.hero__caja { position: relative; z-index: 1; }
.hero__titulo { margin-bottom: .4em; }
.hero__entrada {
  font-size: var(--t-lg);
  max-width: 46ch;
  margin-bottom: 1.7em;
}
.hero__botones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* La 404 usa el mismo hero, centrado. Medida en `rem`, no en `ch`. */
.hero--404 { min-height: 78vh; display: grid; place-items: center; }
.hero__caja--404 { max-width: 30rem; margin-inline: auto; }
.hero__caja--404 .hero__entrada { margin-inline: auto; }
.hero__botones--404 { justify-content: center; }
.rana-404 { margin: 0 auto 1.5rem; }
/* Las salidas de la 404: las secciones que sí existen, en una fila que se
   parte en móvil. Índigo como todo enlace del sitio; el verde nunca es texto. */
.salidas-404 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.25rem;
  margin-top: 1.75rem;
  font-size: var(--t-sm);
}
.salidas-404 a { color: var(--enlace); text-underline-offset: .2em; }

/* --- Páginas interiores (desde el 2026-09-14) ------------------------------
   El mismo hero verde, más corto: el <h1> sigue siendo el LCP y sigue sin
   animación. Las migas van encima del titular, en tinta suave y sin competir
   con él; el separador es un carácter, no un icono. */
.hero--interior { padding-block: clamp(2.25rem, 1.5rem + 4vw, 4.5rem); }
.migas { margin-bottom: 1rem; font-size: var(--t-sm); }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.migas li { margin: 0; color: var(--texto-sobre-verde); }
.migas li + li::before { content: "›"; margin-right: .35rem; }
.migas a { color: var(--tinta); }
.migas [aria-current="page"] { color: var(--tinta); }

/* Dos fotos a lo ancho, para la alberca y su terraza. */
.rejilla--dos { grid-template-columns: 1fr; }
.rejilla--dos li { border-radius: var(--radio); overflow: hidden; }
.rejilla--dos img { border-radius: var(--radio); width: 100%; }
@media (min-width: 620px) { .rejilla--dos { grid-template-columns: 1fr 1fr; } }

/* Las preguntas de /paquetes: una lista de definición, que es lo que son.
   Sin acordeón: en móvil un acordeón esconde justo la respuesta que se vino
   a buscar, y Google indexa igual lo que está cerrado, pero la persona no. */
.preguntas { margin: 0; display: grid; gap: clamp(.9rem, .6rem + 1vw, 1.5rem); }
@media (min-width: 760px) { .preguntas { grid-template-columns: 1fr 1fr; } }
.pregunta {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  box-shadow: var(--sombra);
}
.pregunta dt { font-family: var(--fuente-titulo); font-size: var(--t-lg); line-height: 1.15; margin-bottom: .5em; }
.pregunta dd { margin: 0; color: var(--texto-suave); font-size: var(--t-sm); }

/* --- Rejillas -------------------------------------------------------------- */
.rejilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(.9rem, .6rem + 1vw, 1.5rem);
}
.rejilla li { margin: 0; }

/* --- Juegos ----------------------------------------------------------------
   Sin tarjeta: la caja no aportaba jerarquía. Los siete colores son decoración
   pura, fuera del cálculo de contraste, y este es el único sitio donde salen
   los siete: desde agosto del 2026 viven en el filete al pie de cada foto.
   Cuenta de celdas exacta en los tres anchos. */
.areas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
.areas li { margin: 0; }

/* La foto identifica el área; el color de acento es su filete al pie. Era una
   regla suelta encima del <h3>, y con una imagen arriba pasaba a ser un cuarto
   elemento apilado que solo repetía el corte. El recorte va en el contenedor,
   como en la galería. */
.area__foto {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 1.1rem;
  /* Mientras la foto llega, el hueco es del papel del sitio y no del blanco
     del navegador. */
  background: var(--crema-hondo);
}
/* Pseudo-elemento y no `border-bottom`: el ancho de un borde no se anima, y
   este se traza. El `overflow` lo curva con la esquina igual que al borde. */
.area__foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--acento, var(--verde));
}
.area__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.areas li:nth-child(7n+2) { --acento: var(--indigo); }
.areas li:nth-child(7n+3) { --acento: var(--rosa); }
.areas li:nth-child(7n+4) { --acento: var(--lima); }
.areas li:nth-child(7n+5) { --acento: var(--naranja); }
.areas li:nth-child(7n+6) { --acento: var(--morado); }
.areas li:nth-child(7n+7) { --acento: var(--amarillo); }

/* El recorrido que lee el filete de la foto. Declararlo no anima nada. */
.area { view-timeline: --area block; }

/* `grid` también apilada, y no solo a partir de 620 px: `order` no hace nada
   sobre hijos de un elemento en flujo normal. */
.area--lead { display: grid; gap: 1.1rem; }

.area h3 { margin-bottom: .35em; }
.area p { color: var(--texto-suave); font-size: var(--t-sm); max-width: 38ch; }

/* La alberca es el argumento de venta y abre a fila completa. Su <h3> conserva
   el tamaño de sus hermanos —con el del <h2> se aplanaba la jerarquía—; la
   destacan la posición, el ancho de la foto y el párrafo. Su foto es la única
   en 16:9: en 3:2 entraba un palmo de cielo que no aportaba nada. */
.area--lead p { font-size: var(--t-lg); color: var(--texto); max-width: 46ch; }
.area--lead .area__foto img { aspect-ratio: 16 / 9; }

/* Apilada, la foto va arriba como en sus seis hermanas. Sin este `order` la
   columna quedaba texto → foto alberca → foto toro: dos fotos seguidas sin
   título en medio y no se sabía cuál era de cuál. */
.area--lead .area__texto { order: 2; }
/* El separador lo pone el `gap` de la lead; el `margin-bottom` de .area__foto
   sumaría encima y dejaría el doble de aire entre la foto y su título. */
.area--lead .area__foto  { order: 1; margin: 0; }

@media (min-width: 620px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
  /* El texto a la izquierda y la foto a la derecha, y no al revés: así el <h3>
     de la alberca cae en el mismo eje vertical que el <h2> de la sección, que
     es la regla que sostiene la página entera. */
  .area--lead {
    grid-column: 1 / -1;
    /* 1.1fr y no 1.35fr, y el motivo es medido: en tableta vertical esta foto
       entra en el viewport inicial y con 1.35fr le quitaba el LCP al <h1>.
       Los px² de las cinco mediciones están en DESIGN.md. No tocar sin volver
       a medir. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
    align-items: center;
  }
  /* Se deshace el intercambio de la versión apilada: el orden del DOM manda y
     el texto vuelve a la columna de la izquierda, en el eje. */
  .area--lead .area__texto,
  .area--lead .area__foto { order: 0; margin: 0; }
}
@media (min-width: 900px) {
  .areas { grid-template-columns: repeat(3, 1fr); }
}

/* --- Lo que incluye -------------------------------------------------------- */
/* 3×3 exacto: con `auto-fit` caían cuatro por fila y el noveno quedaba solo. */
.incluye {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem 1.5rem;
  /* El recorrido que leen las nueve palomitas. Ver el bloque de movimiento. */
  view-timeline: --incluye block;
}
@media (min-width: 560px) { .incluye { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .incluye { grid-template-columns: repeat(3, 1fr); } }
.incluye li {
  position: relative;
  padding-left: 1.9rem;
  margin: 0;
  font-size: var(--t-sm);
}
.incluye li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--verde);
}
.incluye li::after {
  content: "";
  position: absolute;
  left: .35rem; top: .72em;
  width: .42rem; height: .22rem;
  border-left: 2.5px solid var(--tinta);
  border-bottom: 2.5px solid var(--tinta);
  transform: rotate(-45deg);
}

/* Se separa con una regla y aire, no con una cuarta variante de tarjeta. */
.incluye__merienda {
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding-top: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border-top: 1px solid var(--borde);
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  justify-items: start;
}
.incluye__merienda .apilar > p:first-child { font-size: var(--t-lg); }

/* La foto de la merienda. Ancho fijo y no `1fr`: apilada llenaría la columna y
   una vertical a ancho de móvil se come una pantalla entera de scroll para
   ilustrar dos líneas de texto. Alineada a la izquierda, en el eje del texto,
   y no centrada: el eje del sitio manda también aquí. */
.incluye__foto img {
  display: block;
  width: 300px;
  max-width: 100%;
  border-radius: var(--radio);
  background: var(--crema-hondo);
}
@media (min-width: 760px) {
  /* La columna de la foto es fija y la del texto elástica: el párrafo ya se
     frena solo con `.medida`, así que lo que sobra es aire y no medida de
     lectura. */
  .incluye__merienda {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
  }
  .incluye__foto img { width: 320px; }
}

/* --- Paquetes -------------------------------------------------------------- */
/* 3×2 exacto: con `auto-fit` salían cuatro arriba y dos sueltas abajo. */
.paquetes { grid-template-columns: 1fr; }
@media (min-width: 560px) { .paquetes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .paquetes { grid-template-columns: repeat(3, 1fr); } }

.paquete {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 1.6rem 1.35rem 1.35rem;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-align: center;
}

/* La capacidad es la etiqueta y el precio la respuesta. Antes competían. */
.paquete__gente {
  font-family: var(--fuente-titulo);
  font-size: var(--t-lg);
  line-height: 1.15;
  color: var(--texto-suave);
}
.paquete__precio {
  font-family: var(--fuente-titulo);
  font-size: var(--t-2xl);
  color: var(--indigo);
  line-height: 1.05;
  margin-block: .1em;
  /* Ancho fijo: seis precios en rejilla se leen como columna. */
  font-variant-numeric: tabular-nums;
}
.paquete__duracion { font-size: var(--t-xs); color: var(--texto-suave); margin-bottom: .6rem; }

/* Enlace, no botón: seis píldoras verdes en fila tapaban al CTA del cierre.
   `margin-top: auto` lo empuja al fondo de la tarjeta —el grid ya iguala las
   alturas de una misma fila—, y el padding le da el área táctil de 44 px que
   el texto solo no alcanza. La flecha va como pseudo-elemento para que no se
   cuele en el `cta_text` que manda GA4. */
.paquete__cta {
  margin-top: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  min-height: 44px;
  padding: .4rem .6rem;
  font-family: var(--fuente-titulo);
  font-size: var(--t-sm);
  /* Sin subrayado en reposo: la flecha y el índigo ya lo anuncian como
     accionable, y el subrayado alcanzaría también a la flecha. Aparece al pasar
     el cursor, y el foco sigue teniendo su contorno de siempre. */
  text-decoration: none;
  transition: transform .16s var(--ease-salida);
}
.paquete__cta:hover { text-decoration: underline; }
.paquete__cta:active { transform: scale(.97); }
.paquete__cta::after { content: "→"; transition: transform .16s var(--ease-salida); }
.paquete__cta:hover::after { transform: translateX(3px); }

/* UN solo destacado, el de entrada: $6,490 es el precio que anuncian el
   <title>, la meta y el OG. Antes el anillo estaba en el de 60 y el de 80 —los
   que confirmó el cliente— y dos «elegidos» sin etiqueta se anulan.

   Aquí el precio va en tinta (9.92): el índigo da 3.13 sobre verde. */
.paquete--destacado {
  background: var(--verde);
  box-shadow: var(--sombra);
}
.paquete--destacado .paquete__gente { color: var(--texto-sobre-verde); }
.paquete--destacado .paquete__precio { color: var(--tinta); }
.paquete--destacado .paquete__duracion { color: var(--texto-sobre-verde); }
.paquete--destacado .paquete__cta { color: var(--tinta); }

.nota {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  max-width: 66ch;
}
.paquetes__nota { margin-top: 1.5rem; }
.paquetes__cierre { margin-top: 1.75rem; }

/* --- Extras ---------------------------------------------------------------- */
.extras__titulo { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }

.extras {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.9rem, .6rem + 1vw, 1.5rem);
  list-style: none;
  padding: 0;
}
@media (min-width: 620px) { .extras { grid-template-columns: repeat(2, 1fr); } }

/* Hijo directo, no `.extras li` a secas: dentro de cada tarjeta hay una lista
   de precios, y esas filas no deben volverse tarjetas ellas también. */
.extras > li {
  margin: 0;
  background: var(--blanco);
  /* Mismo radio que las demás tarjetas: el objeto es el mismo. */
  border-radius: var(--radio);
  padding: 1.25rem 1.35rem;
  font-size: var(--t-sm);
  box-shadow: var(--sombra);
}
.extras strong { display: block; font-size: var(--t-base); }
.extras__aclara {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  margin: .35rem 0 0;
}

/* Concepto a la izquierda, importe a la derecha: el precio se lee sin tener que
   leer la frase entera, que es de lo que se quejaba el cliente cuando esto era
   un párrafo corrido. El importe repite la tipografía y el índigo de los
   precios de arriba, para que se reconozca como precio sin explicarlo. */
.precios {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
}
.precios li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  /* Doce, no ocho: por debajo el texto se pega al filete. */
  padding: .75rem 0;
  border-top: 1px solid var(--borde);
}
.precios li:first-child { border-top: 0; padding-top: 0; }
.precios b {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--indigo);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Galería --------------------------------------------------------------
   Ocho fotos, tres filas exactas sobre seis columnas: dos anchas arriba y tres
   por fila abajo. Con `auto-fit` quedaban celdas vacías en la esquina. Todas
   en 3:2, la proporción nativa de la sesión, así que dentro de una fila las
   alturas coinciden sin `object-fit`. El recorte va en el <li> y no en la
   imagen: así el zoom del hover se queda dentro de la esquina. */
.rejilla--galeria { grid-template-columns: 1fr; }
.rejilla--galeria li { border-radius: var(--radio); overflow: hidden; }
.rejilla--galeria img { border-radius: var(--radio); width: 100%; }

@media (min-width: 620px) {
  .rejilla--galeria { grid-template-columns: repeat(6, 1fr); }
  .rejilla--galeria li:nth-child(-n+2) { grid-column: span 3; }
  .rejilla--galeria li:nth-child(n+3)  { grid-column: span 2; }
}

/* --- Nosotros -------------------------------------------------------------- */
.nosotros__lead { font-size: var(--t-lg); }

/* --- Contacto -------------------------------------------------------------- */
.contacto {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, .6rem + 1.4vw, 1.75rem);
  /* `stretch`, no `start`: las dos columnas terminaban a alturas distintas. */
  align-items: stretch;
}
@media (min-width: 760px) { .contacto { grid-template-columns: 1fr 1fr; } }

.contacto__ficha { display: flex; flex-direction: column; }
/* El CTA al fondo de la ficha, a la altura del pie del mapa. */
.contacto__ficha .boton { margin-top: auto; align-self: flex-start; }

.contacto__datos { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.contacto__datos li { margin-bottom: .75rem; display: flex; gap: .6rem; }
.contacto__etiqueta { font-weight: 600; min-width: 5.5rem; }

.contacto__mapa { display: flex; flex-direction: column; }

.mapa {
  border: 0;
  width: 100%;
  /* Con la rejilla en `stretch`, el mapa absorbe la diferencia de altura. El
     mínimo es 300 y no 340 para que a la ficha no le quede un hueco muerto. */
  flex: 1;
  min-height: 300px;
  border-radius: var(--radio);
  display: block;
  background: #E7E2D6;
}
.mapa__pie { margin-top: 1rem; }

/* --- Tarjetas -------------------------------------------------------------- */
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--sombra);
}

/* --- Pie ------------------------------------------------------------------- */
.pie {
  background: var(--tinta);
  color: #E8E8E2;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.pie a { color: var(--verde); }
.pie__caja {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pie__caja img { width: 140px; height: auto; }
.pie h3 { font-size: var(--t-lg); color: var(--blanco); margin-bottom: .5em; }
.pie p { font-size: var(--t-sm); }
.pie__lema { margin-top: 1rem; }
.pie__legal {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 1.25rem;
  font-size: var(--t-xs);
  color: #A8A8A0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
.pie__legal p { font-size: inherit; margin: 0; }
/* El crédito de autoría va en voz baja: sin el verde de marca y sin competir
   con el aviso legal del cliente. */
.pie__credito a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: rgba(255,255,255,.3);
}
.pie__credito a:hover,
.pie__credito a:focus-visible { color: var(--blanco); }
.pie__redes { list-style: none; padding: 0; margin: 0; }
.pie__redes li { margin-bottom: .4rem; }

/* --- Botón flotante --------------------------------------------------------
   Con `safe-area-inset` para que no quede debajo de la barra de gestos del
   iPhone, que es donde el dedo no llega. */
.flotante {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.24);
  transition: transform .16s var(--ease-salida);
}
@media (hover: hover) and (pointer: fine) {
  .flotante:hover { transform: scale(1.06); }
}
.flotante:active { transform: scale(.94); }

/* --- Movimiento ------------------------------------------------------------
   Un gesto por material, no un efecto repetido: la tabla y el porqué están en
   DESIGN.md. Las reglas duras:

   1. Nada toca el elemento del LCP. Los adornos del hero sí se mueven —no son
      el LCP— y arrancan a 1.2 s, con el primer pintado ya hecho.
   2. Ningún gesto se presta a un material que no es el suyo.
   3. Solo `transform`, `opacity` y `clip-path`. Excepción: el anillo del
      flotante, explicada abajo.
   4. Cero JavaScript.

   El `prefers-reduced-motion` de arriba apaga las transiciones pero NO las
   animaciones de scroll: ahí `animation-duration` se ignora. De ahí el
   `no-preference` explícito. */
@media (hover: hover) and (pointer: fine) {
  .paquete,
  .extras > li {
    transition: transform .18s var(--ease-salida), box-shadow .18s var(--ease-salida);
  }
  .paquete:hover,
  .extras > li:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }

  .rejilla--galeria img { transition: transform .4s var(--ease-salida); }
  .rejilla--galeria li:hover img { transform: scale(1.06); }
}

@media (prefers-reduced-motion: no-preference) {
  /* El fondo del hero respirando. Duraciones primas entre sí para que los dos
     adornos no coincidan nunca en el mismo punto. Arrancan a 1.2 s, con el LCP
     ya pintado: medido, no lo mueven. */
  .hero::before {
    animation: deriva-espiral 13s var(--ease-vaiven) 1.2s infinite alternate;
  }
  .hero::after {
    animation: deriva-bucles 17s var(--ease-vaiven) 1.2s infinite alternate;
  }

  /* El estado oculto vive dentro del @supports: sin `view()` todo esto se ve
     quieto y en su sitio, nunca invisible ni a medio trazar. */
  @supports (animation-timeline: view()) {
    /* La foto se descubre de abajo hacia arriba, en su sitio definitivo. En
       las áreas se anima el contenedor y no la imagen, para que el filete
       suba con la foto en vez de esperarla dibujado. */
    .rejilla--galeria img,
    .incluye__foto img,
    .area__foto {
      animation: revelar var(--ease-salida) both;
      animation-timeline: view();
      /* Un tercio de pantalla: más lento y en móvil llega a medias. */
      animation-range: entry 8% cover 30%;
    }

    /* El filete se traza cuando el revelado va acabando: un gesto en dos
       tiempos. El timeline va nombrado desde el <li> porque `.area__foto`
       lleva `overflow: hidden`, y con un `view()` propio el pseudo-elemento
       tomaba ese contenedor como scroller y se quedaba clavado en scaleX(.13).
       Medido. */
    .area__foto::after {
      transform: scaleX(0);
      transform-origin: left;
      animation: trazar var(--ease-salida) both;
      animation-timeline: --area;
      animation-range: entry 62% cover 40%;
    }

    /* La lista se marca sola, columna a columna. El timeline es el de la <ul>
       y no un `view()` de cada viñeta: una viñeta mide 18 px, su fase de
       entrada son 18 px de scroll y el gesto se consumía en un parpadeo.
       Contra la lista, el mismo tramo son ~250 px. */
    .incluye li::before,
    .incluye li::after {
      animation-timeline: --incluye;
      animation-fill-mode: both;
      animation-timing-function: var(--ease-salida);
    }
    .incluye li::before {
      transform: scale(0);
      animation-name: brotar;
    }
    .incluye li::after {
      /* El `rotate(-45deg)` es la forma de la palomita, no parte del gesto:
         viaja en los dos fotogramas para que el `scale` no se lo lleve. */
      transform: rotate(-45deg) scale(0);
      animation-name: marcar;
    }
    .incluye li:nth-child(3n+1)::before { animation-range: cover 18% cover 34%; }
    .incluye li:nth-child(3n+2)::before { animation-range: cover 23% cover 39%; }
    .incluye li:nth-child(3n+3)::before { animation-range: cover 28% cover 44%; }
    .incluye li:nth-child(3n+1)::after  { animation-range: cover 26% cover 42%; }
    .incluye li:nth-child(3n+2)::after  { animation-range: cover 31% cover 47%; }
    .incluye li:nth-child(3n+3)::after  { animation-range: cover 36% cover 52%; }

    /* La tarjeta de precio se posa. Es su gesto de hover —levantarse— leído al
       revés, y llega por scroll a propósito: en móvil no hay hover y ahí está
       el 78 % de las impresiones, justo en la sección donde se decide.

       Sin `opacity`: un fade aquí sería el `aparecer` de siempre y la regla 2
       existe para eso. Se posa, no aparece. */
    .paquete {
      animation: posarse var(--ease-salida) both;
      animation-timeline: view();
      animation-range: entry 12% cover 34%;
    }
  }

  /* Tres latidos y se calla: un pulso infinito en un botón que pide clic acaba
     siendo ruido que la gente aprende a ignorar. Los adornos del hero sí van
     infinitos porque no piden nada. El retraso de 1.5 s lo mantiene fuera del
     primer pintado. */
  .flotante { animation: latido 2.2s ease-out 1.5s 3 both; }
}

@keyframes revelar {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes trazar {
  to { transform: scaleX(1); }
}

@keyframes brotar {
  to { transform: scale(1); }
}

@keyframes marcar {
  to { transform: rotate(-45deg) scale(1); }
}

@keyframes posarse {
  from { transform: translateY(12px); }
  to   { transform: none; }
}

/* ~26 px y 8° en ciclos de 13 y 17 s. La primera versión iba a 14 px en 17 s
   —1,6 px/s— y era imperceptible. Los adornos viven en la mitad derecha y el
   texto en la izquierda: si el titular pasa a todo el ancho, bajar la amplitud
   o competirá con la lectura. */
@keyframes deriva-espiral {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-26px, 19px, 0) rotate(8deg); }
}

@keyframes deriva-bucles {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(20px, -23px, 0) rotate(-9deg); }
}

/* El anillo va por `box-shadow` y no por un `::before` que escala, y es la
   única excepción a la regla 3 de arriba.

   El pseudo-elemento crecía con `transform: scale(1.75)`, y un transform sí
   extiende la región desplazable: `auditar.py` del HUB medía el `scrollWidth`
   del botón subiendo de 56 a 71 px mientras latía. La página no llegaba a
   desbordar —Chrome no suma el overflow de un `fixed`—, pero el aviso era
   correcto y ninguna otra técnica lo evita: cualquier elemento que se vea más
   grande que el botón agranda su caja o su overflow. `box-shadow` pinta fuera
   de la caja sin participar en el desplazamiento.

   Lo que cuesta: el spread repinta, no compone. Son 21 px alrededor de un
   círculo de 56, tres veces y se calla. A cambio se va un pseudo-elemento, se
   va el `z-index: -1` y se va el desborde.

   La sombra fija se repite en los dos fotogramas: si no, desaparece mientras
   corre la animación. */
@keyframes latido {
  from { box-shadow: 0 6px 20px rgba(0,0,0,.24), 0 0 0 0    rgba(37, 211, 102, .5); }
  to   { box-shadow: 0 6px 20px rgba(0,0,0,.24), 0 0 0 21px rgba(37, 211, 102, 0); }
}

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

.centrado { text-align: center; }
.medida { max-width: 66ch; }
.apilar > * + * { margin-top: 1.25rem; }