/* ============================================================================
   SECTIONS.CSS — Layout específico de cada bloque de la landing
   ============================================================================
   Cada sección del HTML tiene aquí su bloque, en el mismo orden en que aparece
   en index.html. Para reordenar la página, mueve el <section> en el HTML: los
   estilos viajan con él.

   Índice:
     1. Hero
     2. Prueba social (logos + métricas)
     3. Showcase con tabs
     4. Prompt interactivo
     5. Pilares de producto (x4)
     6. Banda de estadísticas
     7. Casos de estudio
     8. Recursos / comunidad
     9. Precios
    10. FAQ
    11. CTA final
   ========================================================================== */


/* ==========================================================================
   1. HERO A SANGRE COMPLETA
   --------------------------------------------------------------------------
   Réplica del hero real de clay.com. Su anatomía:

     .hero          height:100svh; position:sticky; top:0
     .hero__bg      absolute inset:0 — las fotos, a sangre
     .hero__scrim   degradado oscuro abajo, para que el texto blanco lea
     .hero__intro   flex ROW anclado abajo: titular a la izquierda,
                    subtítulo + botones a la derecha
     .hero__shade   degradado al color de página, funde la foto con el resto

   Las dos claves que lo hacen distinto de un hero normal:

   1. El hero es STICKY. No se va con el scroll: se queda quieto y la
      sección siguiente le pasa por encima. Por eso la sección de después
      lleva esquinas superiores redondeadas (.section--over-hero).

   2. El texto NO está centrado sobre la imagen: vive abajo, en dos
      columnas. El titular manda a la izquierda; el apoyo y los botones
      quedan a la derecha, alineados por su base.
   ====================================================================== */

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  /* El navbar flota ENCIMA de la foto, no encima de una franja blanca: el
     hero se sube por debajo de él con un margen negativo. Sin esto, la foto
     empieza donde acaba el navbar y se ve una barra del color de la página
     detrás de la barra flotante. */
  margin-top: calc(var(--header-height) * -1);
  /* La barra de anuncio va ENCIMA del hero, así que hay que descontarla o el
     hero se sale por abajo. main.js pone --announce-height a 0 si el usuario
     cierra la barra, y esta cuenta se recalcula sola. */
  height: calc(100svh - var(--announce-height));
  min-height: 34rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--oat-500);   /* se ve mientras cargan las fotos */
}

/* --- Fondo: las fotos --------------------------------------------------- */

.hero__bg { position: absolute; inset: 0; }

/* Cada foto ocupa el hero entero y se van cruzando. La primera queda visible
   por defecto para que, sin animación, siga habiendo imagen. */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hero-cross 32s var(--ease-in-out) infinite;
}
.hero__slide:first-child { opacity: 1; }
.hero__slide:nth-child(2) { animation-delay: 8s; }
.hero__slide:nth-child(3) { animation-delay: 16s; }
.hero__slide:nth-child(4) { animation-delay: 24s; }

.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  /* Zoom lentísimo: da vida a una foto fija sin que se note el movimiento */
  animation: hero-zoom 32s var(--ease-in-out) infinite;
  animation-delay: inherit;
}

/* Scrim: lo que hace legible el texto blanco.
   ---------------------------------------------------------------------------
   Las fotos las sube la iglesia desde el hub, así que no se puede dar por
   supuesto que sean oscuras: mañana ponen una de fondo claro y el titular
   desaparece. Medido sobre las fotos actuales, el texto blanco daba 2,48:1
   sobre la más clara (WCAG AA pide 4,5:1) y 1,06:1 en sus zonas brillantes.

   Por eso son DOS capas y no una:

     1. Un tinte uniforme sobre toda la foto. Es el suelo que garantiza un
        mínimo pase lo que pase, incluso con una foto casi blanca. Un
        degradado solo no sirve: por definición deja zonas sin cubrir.

     2. Un degradado que se refuerza hacia abajo, donde está el bloque de
        texto (ocupa del 16 % al 100 % de la altura del hero, no solo el pie).

   Si algún día se ve «demasiado oscuro», baja el tinte de la capa 1 antes que
   tocar la 2 — y vuelve a medir el contraste, no lo dejes a ojo. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* 2. refuerzo en la zona del texto */
    linear-gradient(to top,
      rgba(20, 12, 10, 0.72) 0%,
      rgba(20, 12, 10, 0.58) 30%,
      rgba(20, 12, 10, 0.34) 60%,
      rgba(20, 12, 10, 0.18) 85%,
      rgba(20, 12, 10, 0.10) 100%),
    /* aire extra arriba, bajo la barra flotante */
    linear-gradient(to bottom, rgba(20, 12, 10, 0.42), transparent 26%),
    /* 1. suelo uniforme */
    rgba(20, 12, 10, 0.30);
  pointer-events: none;
}

/* --- Texto -------------------------------------------------------------- */

.hero__intro {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;          /* las dos columnas comparten línea base */
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 8vh, 7rem);
  color: var(--oat-100);
}

.hero__eyebrow-link {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--lemon-300);
}
.hero__eyebrow-link svg { transition: transform var(--dur-base) var(--ease-out); }
.hero__eyebrow-link:hover svg { transform: translateX(4px); }

/* Escala propia del hero: la del sistema (hasta 5.5rem) desborda cuando el
   texto vive dentro de la pantalla y no encima de ella. Es la misma fórmula
   que usa Clay en su titular de portada. */
.hero__title {
  font-size: clamp(2rem, 1rem + 5.2vw, 4.6rem);
  max-width: 20ch;
  margin: 0;
  color: var(--oat-100);
}

.hero__side {
  display: flex; flex-direction: column;
  gap: var(--space-5);
  max-width: 30rem;   /* para que los dos botones quepan en una línea */
  flex: none;
}
.hero__sub { margin: 0; font-size: var(--text-lg); color: rgba(254, 253, 251, 0.86); max-width: none; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: 0; }

/* Sobre foto, el botón secundario necesita borde e texto claros */
.hero .btn--secondary {
  color: var(--oat-100);
  border-color: rgba(254, 253, 251, 0.45);
  backdrop-filter: blur(6px);
}
.hero .btn--secondary:hover { background: rgba(254, 253, 251, 0.14); border-color: var(--oat-100); }
.hero .btn--primary { background: var(--oat-100); color: var(--oat-500); }

.hero__times { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; font-size: var(--text-sm); color: rgba(254, 253, 251, 0.7); }
.hero__times .install-chip {
  background: rgba(254, 253, 251, 0.12);
  border-color: rgba(254, 253, 251, 0.28);
  color: var(--oat-100);
  backdrop-filter: blur(6px);
}
.hero__times .install-chip:hover { background: rgba(254, 253, 251, 0.22); border-color: var(--oat-100); color: var(--oat-100); }

/* --- La capa que pasa por encima ----------------------------------------
   OBLIGATORIA. El hero es sticky y se queda detrás de todo: sin una capa
   opaca envolviendo el resto del contenido, la foto se transparenta a través
   de cualquier sección que no tenga fondo propio.
   ---------------------------------------------------------------------- */

.page-body {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
}

/* --- Desenfoque y aclarado al hacer scroll ------------------------------
   La foto se ve nítida solo arriba. En cuanto empieza el scroll se
   desenfoca y se aclara, para que nunca compita con el texto que sube por
   encima. main.js escribe --hero-progress de 0 a 1 a lo largo del primer
   scroll de pantalla.
   ---------------------------------------------------------------------- */

.hero__bg {
  filter: blur(calc(var(--hero-progress, 0) * 14px));
  transform: scale(calc(1 + var(--hero-progress, 0) * 0.07));
  will-change: filter, transform;
}

/* Velo del color de la página: es lo que "aclara" la foto */
.hero__veil {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  opacity: calc(var(--hero-progress, 0) * 0.92);
  pointer-events: none;
}

/* El texto del hero se va antes que la imagen, para que no se lea encima
   del contenido que entra */
.hero__intro { opacity: calc(1 - var(--hero-progress, 0) * 1.8); }

@media (max-width: 64rem) {
  /* Igual que arriba, hay que descontar la barra de anuncio. Con 100svh a
     secas el hero se pasaba de la pantalla justo lo que mide la barra, y la
     última fila (los horarios) quedaba medio fuera y debajo del botón
     flotante de WhatsApp. */
  .hero { height: auto; min-height: calc(100svh - var(--announce-height)); position: relative; }
  /* Sin padding-top gigante: el hero ya alinea su contenido abajo
     (align-items: flex-end), así que un 40vh solo servía para estirar el hero
     por encima de la pantalla y empujar la última fila fuera del viewport.
     El mínimo deja aire bajo la barra flotante cuando la foto es apaisada. */
  .hero__intro { flex-direction: column; align-items: flex-start; padding-top: 6rem; }
  .hero__side { max-width: none; }
  .hero__title { max-width: none; }
}


/* --- Piezas sueltas que usa el hero (y alguna otra sección) -------------- */

/* Nota pequeña bajo un bloque. También se usa en la petición de oración. */
.hero__note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Chip de horario. Sobre la foto del hero se re-estiliza en .hero__times */
.install-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.4em 0.8em; font-size: var(--text-sm);
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.install-chip:hover { color: var(--color-text); border-color: var(--color-border-strong); transform: translateY(-2px); }

/* --- Marca con logo de imagen -------------------------------------------
   El sitio es solo modo claro, así que basta el logo oscuro. La variante
   blanca (logo-iva-blanco.png) sigue en assets/img por si hace falta sobre
   un fondo oscuro.
   ---------------------------------------------------------------------- */

.brand-logo { height: 2rem; width: auto; display: block; }
.footer .brand-logo { height: 2.4rem; }


/* ==========================================================================
   2. PRUEBA SOCIAL
   ====================================================================== */

.proof__intro {
  text-align: center; max-width: 40rem; margin-inline: auto;
  margin-bottom: var(--space-6); color: var(--color-text-muted);
}
.proof__marquees { display: grid; gap: var(--space-4); }

/* Rejilla de métricas: 3 columnas que en móvil pasan a 1 */
.metrics-grid { margin-top: var(--space-7); }


/* ==========================================================================
   3. SHOWCASE CON TABS
   ====================================================================== */

.showcase__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.showcase__copy h3 { margin-bottom: var(--space-4); }
.showcase__copy p  { color: var(--color-text-muted); max-width: 40ch; }
.showcase__cta { margin-top: var(--space-5); }

/* Escenario donde se apilan los mocks con ligera rotación (estilo Clay) */
/* min-height debe superar la altura del mock más alto: los .mock van en
   position:absolute y no empujan al contenedor. Si añades filas a las tablas,
   sube este valor o los mocks invadirán la sección siguiente. */
.showcase__stage { position: relative; min-height: 27rem; }
.showcase__stage .mock { position: absolute; }
.showcase__stage .mock:nth-child(1) { top: 0;      left: 0;  width: 72%; z-index: 1; }
.showcase__stage .mock:nth-child(2) { top: 34%;    right: 0; width: 56%; z-index: 3; transform: rotate(1.2deg); }
.showcase__stage .mock:nth-child(3) { bottom: 0.5rem; left: 2%; width: 62%; z-index: 2; transform: rotate(-1deg); }
.showcase__stage .mock { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.showcase__stage .mock:hover { transform: translateY(-6px) rotate(0deg); box-shadow: var(--shadow-lg); z-index: 4; }

@media (max-width: 64rem) {
  .showcase__layout { grid-template-columns: minmax(0, 1fr); }
  .showcase__stage { min-height: auto; display: grid; gap: var(--space-4); }
  .showcase__stage .mock { position: static; width: 100% !important; transform: none !important; }
}


/* ==========================================================================
   4. PROMPT INTERACTIVO
   ====================================================================== */

.builder__inner { max-width: 56rem; margin-inline: auto; text-align: center; }
.builder .prompt { text-align: left; margin-top: var(--space-6); }
.builder__results { margin-top: var(--space-5); text-align: left; }


/* ==========================================================================
   5. PILARES DE PRODUCTO
   --------------------------------------------------------------------------
   Cuatro secciones alternadas (texto/ilustración). El color viene de la clase
   modificadora: .pillar--data | --agents | --orchestration | --execution
   ====================================================================== */

.pillar { --pillar-color: var(--color-accent); --pillar-soft: var(--blueberry-100); }
/* Un color por área. Los nombres de clase se conservan de la plantilla
   original para no tocar el HTML de la pila de tarjetas:
     --data    → Adoración      --agents → Palabra
     --orch    → Familia        --exec   → Comunidad
     --infra   → Misión                                              */
.pillar--data          { --pillar-color: var(--blueberry-400); --pillar-soft: var(--blueberry-100); }
.pillar--agents        { --pillar-color: var(--slushie-400);   --pillar-soft: var(--slushie-100); }
.pillar--orchestration { --pillar-color: var(--lime-400);      --pillar-soft: var(--lime-100); }
.pillar--execution     { --pillar-color: var(--blueberry-400); --pillar-soft: var(--blueberry-100); }
.pillar--infra         { --pillar-color: var(--slushie-400);   --pillar-soft: var(--slushie-100); }

/* El eyebrow del pilar no es texto suelto: es una píldora de color que actúa
   como indicador de "en qué pilar estás". Tracking muy abierto (0.25em). */
.pillar .eyebrow {
  width: fit-content;
  padding: 0.45em 1.1em;
  border-radius: var(--radius-pill);
  background: var(--pillar-color);
  color: var(--oat-100);
  letter-spacing: 0.25em;
  text-indent: 0.25em;   /* compensa el tracking del último carácter */
}


/* --------------------------------------------------------------------------
   PILA DE TARJETAS AL HACER SCROLL
   --------------------------------------------------------------------------
   Es la animación más característica de Clay y no lleva ni una línea de JS.

   CÓMO FUNCIONA
     .card-stack__item   position: sticky; top: 0
     .card-stack__card   la tarjeta visible, esquinas SUPERIORES redondeadas
     .card-stack__spacer 75vh transparentes debajo de la tarjeta, dentro del item

   Cada item se queda pegado arriba al llegar. El espaciador le da recorrido
   de scroll para que la tarjeta se lea con calma. Cuando llega el siguiente
   item, sube por encima y tapa al anterior — como cartas apilándose. El orden
   de pintado lo da el orden del DOM, así que no hacen falta z-index.

   REQUISITO: ningún ancestro puede tener `overflow: hidden`. Por eso el body
   usa `overflow-x: clip` (clip no crea contenedor de scroll; hidden sí, y
   rompería el sticky). No lo cambies.

   Para ajustar el ritmo: sube o baja la altura de .card-stack__spacer.
   En móvil el efecto se desactiva (apilar tarjetas en pantalla pequeña deja
   ver muy poco de cada una).
   ----------------------------------------------------------------------- */

.card-stack { position: relative; }

.card-stack__item { position: sticky; top: 0; }

.card-stack__card {
  background: var(--pillar-soft);
  border-radius: 3rem 3rem 0 0;
  padding-block: var(--section-pad);
  overflow: hidden;
  /* La tarjeta debe llenar casi toda la pantalla: si es más baja que el
     viewport, mientras está fijada se ve un hueco vacío debajo y el efecto
     de apilado se pierde. El contenido se centra en vertical. */
  min-height: min(88vh, 54rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* La última no tiene nada que la tape: se cierra por abajo también */
.card-stack__item--end .card-stack__card { border-radius: 3rem; }

/* Recorrido de scroll durante el que la tarjeta permanece fijada antes de
   que la siguiente la tape. Más alto = cada pilar se lee más despacio. */
.card-stack__spacer { height: min(55vh, 32rem); }
.card-stack__item--end .card-stack__spacer { display: none; }

@media (max-width: 64rem) {
  /* Sin apilado: secciones normales una detrás de otra */
  .card-stack__item { position: static; }
  .card-stack__spacer { display: none; }
  .card-stack__card {
    border-radius: 2rem;
    margin-bottom: var(--space-5);
    min-height: 0;   /* en móvil manda el contenido, no la altura de pantalla */
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-stack__item { position: static; }
  .card-stack__spacer { display: none; }
}

.pillar__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
/* Alterna el orden: pares con la ilustración a la izquierda */
.pillar--flip .pillar__art { order: -1; }

.pillar .eyebrow { color: var(--pillar-color); }
.pillar__list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.pillar__list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-muted); }
.pillar__list svg { flex-shrink: 0; margin-top: 0.28em; color: var(--pillar-color); }
.pillar__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

/* Ilustración sobre un panel de color suave */
/* Antes el panel llevaba el color del pilar. Ahora ese color lo pone la
   tarjeta que lo contiene (.card-stack__card), así que el panel va en blanco:
   es el mismo reparto de color que hace Clay. */
.pillar__art {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.pillar__art svg { width: min(100%, 26rem); height: auto; }

/* Fila de logos de clientes bajo cada pilar */
.pillar__proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4); margin-top: var(--space-7);
  border-top: var(--border-thin); padding-top: var(--space-5);
}
.pillar__proof-item { display: flex; flex-direction: column; gap: var(--space-2); }
.pillar__proof-logo { font-weight: var(--weight-semibold); letter-spacing: -0.02em; font-size: var(--text-sm); }
.pillar__proof-text { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 64rem) {
  .pillar__layout { grid-template-columns: minmax(0, 1fr); }
  .pillar--flip .pillar__art { order: 0; }
  .pillar__proof { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   6. BANDA DE ESTADÍSTICAS
   ====================================================================== */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.stat { text-align: center; }
.stat__value {
  font-size: var(--text-h2); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display); line-height: 1;
}
/* En esta banda los valores son TEXTO ("10:30 AM", "479-9570"), no cifras
   sueltas: con el tamaño de titular se parten en dos líneas. */
#planifica .stat__value {
  font-size: clamp(1.6rem, 0.9rem + 2.2vw, 2.5rem);
  white-space: nowrap;
}
.stat__label { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 48rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); } }


/* ==========================================================================
   7. CASOS DE ESTUDIO
   ====================================================================== */

.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.case-card__media { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.case-card--a .case-card__media { background: var(--slushie-100); }
.case-card--b .case-card__media { background: var(--lemon-100); }

@media (max-width: 48rem) { .cases { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   8. RECURSOS / COMUNIDAD
   ====================================================================== */

/* auto-fit en vez de un número fijo de columnas: la sección se quedó en dos
   tarjetas (Mensajes y Oración) y con repeat(4) salían estrujadas a la
   izquierda dejando media fila vacía. Así ocupan el ancho que les toca. */
.resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--grid-gap);
}
.resource-card__media { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.resource-card:nth-child(1) .resource-card__media { background: var(--blueberry-100); }
.resource-card:nth-child(2) .resource-card__media { background: var(--lime-100); }
.resource-card:nth-child(3) .resource-card__media { background: var(--blueberry-100); }
.resource-card:nth-child(4) .resource-card__media { background: var(--slushie-100); }

@media (max-width: 64rem) { .resources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .resources { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   9. PRECIOS
   ====================================================================== */

.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.price-card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); }
.price-card--featured {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.price-card--featured::before {
  content: attr(data-tag);
  position: absolute; top: 0; right: var(--space-5); transform: translateY(-50%);
  background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  padding: 0.35em 0.7em; border-radius: var(--radius-pill);
}
.price-card__price { font-size: var(--text-h2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1; }
.price-card__price small { font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--color-text-muted); letter-spacing: 0; }
.price-card__features { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.price-card__features li { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.price-card__features svg { flex-shrink: 0; margin-top: 0.25em; color: var(--color-accent); }
.price-card .btn { margin-top: auto; }

@media (max-width: 64rem) { .pricing { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   10. FAQ
   ====================================================================== */

.faq__layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 64rem) { .faq__layout { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   11. CTA FINAL
   ====================================================================== */

.cta-final { position: relative; overflow: hidden; text-align: center; }
.cta-final__inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; }
.cta-final__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }
/* Franja de color detrás, animada con float */
.cta-final__deco { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; }
.cta-final__deco span {
  position: absolute; border-radius: 50%; filter: blur(40px);
}
.cta-final__deco span:nth-child(1) { width: 20rem; height: 20rem; background: var(--blueberry-200); top: -6rem; left: -4rem; }
.cta-final__deco span:nth-child(2) { width: 16rem; height: 16rem; background: var(--slushie-200); bottom: -5rem; right: 6%; }
.cta-final__deco span:nth-child(3) { width: 14rem; height: 14rem; background: var(--blueberry-300); top: 20%; right: -3rem; }


/* ==========================================================================
   12. PLANIFICA TU VISITA (con mapa)
   ====================================================================== */

.visita__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}
@media (max-width: 64rem) { .visita__layout { grid-template-columns: minmax(0, 1fr); } }

.visita__list { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.visita__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.visita__icon {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.visita__item h3 { font-size: var(--text-h5); margin-bottom: 0.25rem; }
.visita__item p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.visita__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

/* Botón de WhatsApp en línea (el flotante está en components.css) */
.btn--wa { background: #25d366; color: #fff; border-color: transparent; }
.btn--wa:hover { background: #1fbe5b; }