/* ============================================================================
 * Reto Prosperidad Verdadera — hoja de estilo común a las dos landings
 *
 * ── De dónde sale cada cosa ───────────────────────────────────────────────
 *
 * ESTRUCTURA: del PDF que mandó Maravillas (cajas, bandas, bocadillos, el
 * Árbol de la Vida, las viñetas de estrella). Lo que NO se
 * coge del PDF son sus colores: aquello iba en azul marino y dorado, y la
 * marca de ella no es eso.
 *
 * COLOR Y FONDOS: de su web viva, medidos el 9-oct-2026 en el navegador.
 *   Variables globales de Elementor:
 *     #F18719 naranja · #39AB45 verde · #642684 morado · #3E3E3E texto
 *     Titulares Roboto Slab · Texto Poppins
 *   Y del mural de su portada, muestreado sobre la propia imagen:
 *     #F0C090 · #F0D8A8 · #D8C090 · #D8A878 — arena y ocre
 *   De ahí salen `--pergamino` y `--arena`, y el ocre del dibujo geométrico.
 *   La portada de su web es una foto a sangre sobre un mural de geometría
 *   sagrada: de ahí que aquí los fondos lleven la Flor de la Vida en vez de
 *   blanco liso.
 *
 * LA IDEA: el texto dice «la luz desciende de lo invisible a lo visible; lo
 * último en manifestarse es la materia». Por eso los cuatro pilares van del
 * MORADO (lo invisible) al NARANJA (la materia), y el dinero llega el último.
 * Lo mismo hace el Árbol de la Vida: Maljut, el nodo de abajo, es el único
 * relleno. El naranja no se usa en ningún sitio más que donde se manifiesta
 * la materia, y en los botones.
 *
 * ── Contraste ─────────────────────────────────────────────────────────────
 * El naranja de marca con letra blanca da 2,55:1 y hace falta 4,5:1 (los
 * botones verdes de su web dan 2,96:1: tampoco llegan). Por eso el naranja se
 * parte en SUPERFICIE (--materia, con letra oscura, 5,5:1) y TINTA
 * (--materia-tinta, legible sobre claro). Para ponerle letra blanca al botón
 * se cambia --btn-texto, y queda escrito que no cumple.
 * ========================================================================= */

:root {
  /* Papel, del mural de su portada */
  --papel: #FFFFFF;
  --pergamino: #FBF6EE;
  --arena: #F4E9D8;
  --ocre: #C8956A;

  /* Tinta */
  --tinta: #2B2B2B;
  --texto: #3E3E3E;
  --suave: #656565;
  --linea: #E6DFD3;

  /* Los dos extremos del descenso */
  --invisible: #642684;
  --invisible-hondo: #4A1C63;
  --materia: #F18719;
  --materia-tinta: #9E4E07;

  /* Los cuatro peldaños, interpolados entre los extremos */
  --nodo-1: #642684;
  --nodo-2: #873E69;
  --nodo-3: #AA564E;
  --nodo-4: #CE6E33;

  --vida: #1F7A2C;
  --btn-texto: #2B2B2B;
  --whatsapp: #25D366;
  --whatsapp-oscuro: #075E54;

  --titular: "Roboto Slab", Georgia, serif;
  --cuerpo: "Poppins", -apple-system, "Segoe UI", sans-serif;

  --ancho: 1140px;
  --columna: 66ch;
  --radio: 12px;

  /* Escala de cuarta justa (1,333) desde 17 px */
  --t0: 0.82rem;
  --t1: 0.94rem;
  --t3: 1.33rem;
  --t4: 1.78rem;
}

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

/* ---------- Cómo parten los textos ----------
   Medido en el banco de anchos a 390 px: el titular «La abundancia es un
   árbol…» caía en tres líneas de 266 / 317 / 70 px —una huérfana del 22 %— y
   varias listas y lemas dejaban una palabra sola al final.

   `balance` reparte las líneas de un titular para que queden parejas.
   `pretty` evita que el párrafo acabe en una palabra suelta.
   Y en estrecho se permite partir palabras: el español tiene piezas como
   «transgeneracional» o «Constelaciones» que, sin guion, abren zanjas. Los
   titulares NO se parten nunca: ahí un guion canta. */

h1, h2, h3,
.hero__oferta, .caja-dia__lema, .banda__cuando, .rotulo {
  text-wrap: balance;
  hyphens: manual;
}

p, li, summary, blockquote, label, .entradilla, .nota-boton, .faq__cuerpo {
  text-wrap: pretty;
}

@media (max-width: 580px) {
  p, li, .faq__cuerpo, .entradilla {
    hyphens: auto;
    /* Solo se parten palabras de 13 letras o más, dejando 4 a cada lado.
       Sin límite partía «Cá-bala» —el término de la marca— y «Maravi-llas»
       —su nombre—, que no se parten jamás. Con 13 quedan a salvo Maravillas
       (10), Masterclass (11), Prosperidad (11) y consecuencia (12), y siguen
       partiéndose transgeneracional (17) y Constelaciones (14), que son las
       que de verdad abren zanjas en una columna de 330 px. */
    -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 13 4 4;
  }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--titular);
  color: var(--tinta);
  margin: 0 0 .5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.7rem, 8.5vw, 4.4rem); line-height: .98; letter-spacing: -.035em; }
h2 { font-size: clamp(1.78rem, 4vw, 2.37rem); line-height: 1.1; letter-spacing: -.022em; }
h3 { font-size: var(--t3); line-height: 1.25; letter-spacing: -.012em; }

p { margin: 0 0 1.05em; max-width: var(--columna); }
p:last-child { margin-bottom: 0; }

a { color: var(--invisible); }
strong { font-weight: 600; color: var(--tinta); }

/* ---------- Estructura y fondos ---------- */

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

.seccion { padding: clamp(60px, 9vw, 108px) 0; position: relative; }

/* La Flor de la Vida, teselada. Es el dibujo del mural de su portada, y
   además es el emblema del tema: la geometría de la que habla la Cábala. */
.seccion--geometria { background-color: var(--pergamino); }
.seccion--arena { background-color: var(--arena); }
/* Dos capas: el pergamino de VERDAD —recortado de su propio Árbol, color
   medio #E9C797— y encima la Flor de la Vida, que pone el motivo geométrico.
   La opacidad del pergamino se queda en .18 por contraste: a .22 el gris de
   apoyo bajaba a 4,58:1 y hace falta 4,5 con algo de margen. */
.seccion--geometria::before,
.seccion--arena::before {
  content: "";
  position: absolute; inset: 0;
  background:
    url(geometria.svg) repeat 0 0 / 186px auto,
    url(pergamino.webp) repeat 0 0 / 320px auto;
  opacity: .34;
  pointer-events: none;
}
.seccion--arena::before { opacity: .3; }
.seccion > .contenedor { position: relative; z-index: 1; }

.entradilla { font-size: var(--t3); line-height: 1.45; color: var(--suave); max-width: 54ch; }

.rotulo {
  font-family: var(--cuerpo);
  font-size: var(--t1);
  font-weight: 600;
  color: var(--materia-tinta);
  margin: 0 0 .5em;
}

.encabezado { margin-bottom: clamp(34px, 4.5vw, 56px); }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--materia);
  color: var(--btn-texto);
  font-family: var(--cuerpo);
  font-size: 1.02rem; font-weight: 600; line-height: 1.3;
  text-align: center; text-decoration: none;
  padding: 1.02em 1.9em;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover { background: #F79A3A; transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0,0,0,.22); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.btn--bloque { width: 100%; }
.btn--whatsapp { background: var(--whatsapp-oscuro); color: var(--papel); }
.btn--whatsapp:hover { background: #0A7266; box-shadow: 0 7px 18px rgba(0,0,0,.26); }

.nota-boton { font-size: var(--t1); color: var(--suave); margin: .85em 0 0; max-width: 46ch; }

/* ---------- Barra superior ---------- */

.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(251,246,238,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  padding: 11px 24px;
}
.barra__marca { font-family: var(--titular); font-weight: 600; font-size: 1rem; color: var(--tinta); line-height: 1.25; }
.barra__marca span { display: block; font-family: var(--cuerpo); font-size: var(--t0); font-weight: 400; color: var(--suave); }
.barra .btn { padding: .68em 1.3em; font-size: var(--t1); }

/* ---------- Hero ---------- */

.hero {
  background-color: var(--pergamino);
  padding: clamp(42px, 6.5vw, 84px) 0 clamp(54px, 7.5vw, 92px);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    url(geometria.svg) repeat 0 0 / 210px auto,
    url(pergamino.webp) repeat 0 0 / 340px auto;
  opacity: .4;
  pointer-events: none;
}
/* Un resplandor cálido detrás del titular, del color del mural. */
.hero::after {
  content: ""; position: absolute;
  left: -10%; top: -20%; width: 70%; height: 120%;
  background: radial-gradient(ellipse at center, rgba(240,192,144,.5) 0%, rgba(240,216,168,0) 68%);
  pointer-events: none;
}
.hero .contenedor { position: relative; z-index: 1; }

.hero__rejilla { display: grid; gap: clamp(38px, 5vw, 60px); align-items: start; }
@media (min-width: 920px) { .hero__rejilla { grid-template-columns: 1.08fr .92fr; } }

.hero__oferta { font-size: var(--t3); font-weight: 500; color: var(--materia-tinta); line-height: 1.35; margin: 0 0 .7em; max-width: 30ch; }
.hero h1 { margin-bottom: .32em; }
.hero h1 em { font-style: normal; display: block; }
.hero__promesa { font-size: var(--t3); line-height: 1.45; color: var(--texto); margin-bottom: 1em; }
.hero__detalle { color: var(--suave); }

/* La fila de datos con iconitos, como en el PDF */
.datos { list-style: none; margin: 1.7em 0 0; padding: 1.3em 0 0; border-top: 1px solid var(--linea); display: grid; gap: .75em; max-width: 50ch; }
.datos li { display: flex; gap: .7em; align-items: flex-start; font-size: var(--t1); }
.datos svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .22em; stroke: var(--materia-tinta); fill: none; stroke-width: 1.6; }
.datos strong { color: var(--tinta); }

.arranque { font-size: var(--t1); color: var(--suave); margin: 1.1em 0 0; }
.arranque strong { color: var(--materia-tinta); }

/* ---------- La hoja del formulario ---------- */

.hoja {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: 0 18px 44px rgba(90,60,20,.10);
  padding: clamp(26px, 3.2vw, 36px);
}
.hoja h2 { font-size: var(--t4); margin-bottom: .3em; }
.hoja .entradilla { font-size: var(--t1); line-height: 1.55; margin-bottom: 1.6em; }

.campo { margin: 0 0 1em; }
.campo label { display: block; font-size: var(--t1); font-weight: 600; color: var(--tinta); margin-bottom: .35em; }
.campo input {
  width: 100%; font-family: var(--cuerpo); font-size: 1rem; color: var(--texto);
  background: var(--pergamino); border: 1px solid #D9CFBF; border-radius: 8px;
  padding: .8em .9em;
}
.campo input:focus-visible { outline: 2px solid var(--materia-tinta); outline-offset: 1px; border-color: var(--materia-tinta); background: var(--papel); }
.campo input::placeholder { color: #8A8178; }

.consentimiento { display: flex; gap: .7em; align-items: flex-start; font-size: var(--t0); color: var(--suave); margin: 1.2em 0 1.4em; line-height: 1.55; }
.consentimiento input { margin: .2em 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--materia-tinta); }

.error-formulario { display: none; background: #FCEDEA; border: 1px solid #E8B9B2; border-radius: 8px; color: #96281B; font-size: var(--t1); padding: .75em .9em; margin: 0 0 1.1em; }
.error-formulario[data-visible="si"] { display: block; }

/* ---------- La cinta de los cuatro pilares ---------- */

.cinta { background: var(--invisible); color: #F3E9F7; }
.cinta ol {
  list-style: none; margin: 0 auto; padding: 1.15em 24px; max-width: var(--ancho);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5em 2.4em;
  font-family: var(--titular); font-size: 1.1rem; font-weight: 500; letter-spacing: .01em;
}
.cinta li { display: flex; align-items: center; gap: 2.4em; }
.cinta li:not(:last-child)::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--materia); }

/* ---------- El Árbol de la Vida, que es suyo ---------- */

.arbol-rejilla { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 820px) { .arbol-rejilla { grid-template-columns: .74fr 1.26fr; } }

.arbol-arte { position: relative; margin: 0 auto; max-width: 330px; width: 100%; }

/* En estrecho el dibujo iba PRIMERO y se comía una pantalla entera antes de
   que apareciera el texto que lo explica. Va detrás, y más pequeño. */
@media (max-width: 819px) {
  .arbol-rejilla { grid-template-columns: 1fr; }
  .arbol-arte { order: 2; max-width: 230px; margin-top: .5em; }
  .arbol-rejilla > div { order: 1; }
}
/* `multiply` funde el pergamino con el fondo de la sección, y la máscara le
   difumina los cuatro bordes: sin ella se ve el rectángulo de la foto pegado
   encima, que es justo lo que había que quitar. */
.arbol-arte img {
  width: 100%;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 72% 60% at 50% 50%, #000 58%, transparent 97%);
          mask-image: radial-gradient(ellipse 72% 60% at 50% 50%, #000 58%, transparent 97%);
}

/* La luz que baja. Es una banda cálida que recorre el dibujo de arriba abajo,
   una sola vez, cuando la sección entra en pantalla. No necesita saber dónde
   está cada nodo: barre el dibujo entero. */
.arbol-arte__luz {
  position: absolute; left: -6%; right: -6%; top: 0; height: 26%;
  background: linear-gradient(180deg,
      rgba(255,214,150,0) 0%,
      rgba(255,226,170,.85) 45%,
      rgba(255,200,120,.55) 62%,
      rgba(255,214,150,0) 100%);
  mix-blend-mode: screen;
  opacity: 0; pointer-events: none;
}
.arbol-arte[data-dibujar="va"] .arbol-arte__luz { animation: luz-desciende 2.4s cubic-bezier(.45,0,.4,1) .35s 1 both; }
@keyframes luz-desciende {
  0%   { transform: translateY(-110%); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateY(400%);  opacity: 0; }
}

/* Maljut. Medido sobre la imagen: 49 % de ancho, 91,8 % de alto. Se enciende
   cuando la luz llega abajo y ya no se apaga: es la materia manifestada. */
.arbol-arte__maljut {
  position: absolute; left: 49%; top: 91.8%;
  width: 26%; aspect-ratio: 1; transform: translate(-50%,-50%) scale(.6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241,135,25,.72) 0%, rgba(241,135,25,.3) 42%, rgba(241,135,25,0) 70%);
  opacity: 0; pointer-events: none;
}
.arbol-arte[data-dibujar="va"] .arbol-arte__maljut { animation: maljut-prende .9s ease-out 2.5s both, maljut-respira 3.8s ease-in-out 3.4s infinite; }
@keyframes maljut-prende { from { opacity: 0; transform: translate(-50%,-50%) scale(.6); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes maljut-respira {
  0%, 100% { opacity: .78; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.1); }
}

/* ---------- Las cajas de los días ---------- */

.dias { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 680px) { .dias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dias { grid-template-columns: repeat(4, 1fr); } }

.caja-dia {
  position: relative;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 26px 24px 28px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.caja-dia:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(90,60,20,.10); }

/* El filete de arriba es el que baja de morado a naranja de caja en caja. */
.caja-dia::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--nodo); }
.dias > :nth-child(1) { --nodo: var(--nodo-1); }
.dias > :nth-child(2) { --nodo: var(--nodo-2); }
.dias > :nth-child(3) { --nodo: var(--nodo-3); }
.dias > :nth-child(4) { --nodo: var(--nodo-4); --nodo-tinta: #9E4E07; }

.caja-dia__alto { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: .9em; }
.caja-dia__dia { font-size: var(--t0); font-weight: 600; color: var(--suave); letter-spacing: .02em; margin: 0; }
.caja-dia__glifo { width: 26px; height: 26px; flex: 0 0 auto; stroke: var(--nodo); fill: none; stroke-width: 1.4; }
.caja-dia h3 { font-size: 1.5rem; margin-bottom: .2em; }
.caja-dia__lema { font-size: var(--t1); font-style: italic; color: var(--nodo-tinta, var(--nodo)); margin: 0 0 .85em; max-width: none; }
.caja-dia p { font-size: var(--t1); color: var(--suave); max-width: none; }

/* Entrada escalonada de las cuatro cajas */
.dias[data-entrar="espera"] > li { opacity: 0; transform: translateY(14px); }
.dias[data-entrar="va"] > li { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
.dias[data-entrar="va"] > :nth-child(1) { transition-delay: 0s; }
.dias[data-entrar="va"] > :nth-child(2) { transition-delay: .09s; }
.dias[data-entrar="va"] > :nth-child(3) { transition-delay: .18s; }
.dias[data-entrar="va"] > :nth-child(4) { transition-delay: .27s; }

/* ---------- La banda del día 5 ---------- */

.banda {
  margin-top: 20px;
  background: var(--materia);
  border-radius: var(--radio);
  padding: clamp(26px, 3.4vw, 38px);
  display: grid; gap: 22px; align-items: center;
}
@media (min-width: 880px) { .banda { grid-template-columns: 1fr auto; gap: 36px; } }
.banda__dia { font-size: var(--t0); font-weight: 700; color: #4E2702; letter-spacing: .04em; margin: 0 0 .5em; }
.banda h3 { font-size: clamp(1.5rem, 3.4vw, 2rem); color: #2B2B2B; margin-bottom: .25em; }
.banda__cuando { font-size: var(--t1); color: #4E2702; font-weight: 600; margin: 0 0 .7em; }
.banda p { color: #3F3020; max-width: 60ch; }
.banda .btn { background: var(--tinta); color: #FFF7EC; white-space: nowrap; }
.banda .btn:hover { background: #1A1A1A; box-shadow: 0 7px 18px rgba(0,0,0,.3); }

/* ---------- Cajas genéricas ---------- */

.cajas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .cajas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cajas--3 { grid-template-columns: repeat(3, 1fr); } }

.caja {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 20px 22px;
  font-size: var(--t1);
  display: flex; gap: .8em; align-items: flex-start;
}
.caja svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: .22em; stroke: var(--vida); fill: none; stroke-width: 2; }

.remate { font-family: var(--titular); font-size: var(--t3); line-height: 1.45; color: var(--tinta); margin-top: 2em; max-width: 46ch; }

/* ---------- Lo que te llevas: viñetas de estrella ---------- */

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1em; max-width: var(--columna); }
@media (min-width: 800px) { .lista--2 { grid-template-columns: 1fr 1fr; gap: 1.2em 3em; max-width: none; } }
/* ⚠️ La viñeta va POSICIONADA, no con flex.
   Con `display:flex` en el <li>, un texto como «<strong>Regalo sorpresa</strong>
   que se entregará durante la Masterclass» se parte en DOS COLUMNAS: el flex
   trata el <strong> y el texto suelto como dos hermanos, no como una frase.
   Se veía «Regalo | que se entregará / sorpresa | durante la Master…».
   Con posición absoluta el texto fluye como lo que es. */
.lista li { position: relative; padding-left: 1.7em; }
.lista li::before {
  content: "✦"; position: absolute; left: 0; top: 0;
  color: var(--materia); font-size: .95em; line-height: 1.75;
}
.lista--si li::before { content: "✓"; color: var(--vida); font-weight: 700; }
.lista--no li::before { content: "✕"; color: var(--suave); font-weight: 700; }

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

.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 2em; }
@media (min-width: 720px) { .pasos { grid-template-columns: repeat(2, 1fr); gap: 2.4em 3em; } }
@media (min-width: 1000px) { .pasos--4 { grid-template-columns: repeat(4, 1fr); gap: 2.4em; } }
@media (min-width: 1000px) { .pasos--3 { grid-template-columns: repeat(3, 1fr); gap: 2.4em; } }
.pasos li { counter-increment: paso; padding-top: .9em; border-top: 1px solid var(--linea); }
.pasos li::before {
  content: counter(paso);
  display: block;
  font-family: var(--titular); font-size: 1.9rem; font-weight: 600;
  color: var(--materia-tinta); line-height: 1; margin-bottom: .35em;
}
.pasos h3 { font-size: 1.1rem; margin-bottom: .2em; }
.pasos p { font-size: var(--t1); color: var(--suave); max-width: none; }

/* ---------- Maravillas, montada como el hero de su web ----------
   Su portada es: el pergamino del Árbol de fondo, y ella RECORTADA encima,
   anclada a la derecha y apoyada en el borde de abajo. Aquí igual. El recorte
   sin fondo no era el problema; el problema era ponerlo a flotar sobre blanco,
   sin nada debajo que lo sostuviera. */

.guia-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--arena);
  padding-bottom: 0;
}
.guia-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    url(geometria.svg) repeat 0 0 / 186px auto,
    url(pergamino.webp) repeat 0 0 / 320px auto;
  opacity: .3;
  pointer-events: none;
}
/* El Árbol, muy tenue, detrás del texto: el mismo guiño que hace su portada,
   sin competir con el Árbol de verdad que está dos secciones más arriba. */
.guia-hero::after {
  content: "";
  position: absolute; left: -4%; top: 50%; transform: translateY(-50%);
  width: 420px; height: 740px; max-width: 46%;
  background: url(arbol-flordelis.webp) no-repeat center / contain;
  opacity: .085;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.guia-hero .contenedor { position: relative; z-index: 2; }

.guia-hero__texto { max-width: 36rem; padding-bottom: clamp(40px, 6vw, 72px); }

/* No va pegada al borde de la ventana: se alinea con el borde derecho de la
   columna de contenido, como cualquier otra cosa de la página. El `max(16px,…)`
   es para que en pantallas de ~1.150 px no se vuelva a pegar. */
.guia-hero__foto {
  position: absolute; bottom: 0;
  right: max(16px, calc((100% - var(--ancho)) / 2));
  height: 86%; width: auto; max-width: 34%;
  object-fit: contain; object-position: right bottom;
  z-index: 1;
  pointer-events: none;
}

/* La banda necesita alto suficiente para que ella quepa entera —con el alto
   que daba el texto le cortaba la cabeza— pero no más del necesario. */
@media (min-width: 901px) {
  .guia-hero { min-height: 560px; display: flex; align-items: center; }
  .guia-hero .contenedor { width: 100%; }
}

/* En móvil no cabe a un lado: se pone debajo, centrada y apoyada igual. */
@media (max-width: 900px) {
  .guia-hero { padding-bottom: 0; }
  .guia-hero__texto { max-width: none; padding-bottom: clamp(28px, 5vw, 40px); }
  .guia-hero__foto {
    /* `relative`, no `static`: el z-index SOLO vale en elementos posicionados.
       Con `static` se ignoraba el suyo, y el velo de pergamino del ::before
       —que sí está posicionado— se pintaba encima de ella. Salía difuminada,
       con la textura y las líneas de geometría sobre la cara. */
    position: relative; z-index: 2;
    max-width: 300px; height: auto; width: 100%;
    margin: 0 auto; display: block;
  }
  .guia-hero::after { display: none; }
}

.cifras { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6em 2.6em; margin: 1.5em 0 0; padding: 1.3em 0 0; border-top: 1px solid var(--linea); }
.cifras li { display: block; }
.cifras b { display: block; font-family: var(--titular); font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--materia-tinta); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifras span { font-size: var(--t1); color: var(--suave); }

.guia__cita {
  font-family: var(--titular); font-size: var(--t3); font-weight: 500; line-height: 1.4;
  color: var(--invisible); margin: 1.4em 0 0; padding: 0; max-width: 38ch;
}

/* ---------- Testimonios ---------- */

.testimonios { display: grid; gap: 18px; }
@media (min-width: 860px) { .testimonios { grid-template-columns: repeat(3, 1fr); } }
.testimonio {
  margin: 0; background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 24px 22px;
}
.testimonio p { font-size: var(--t1); line-height: 1.6; max-width: none; font-style: italic; }
.testimonio footer { font-size: var(--t0); font-weight: 600; color: var(--suave); margin-top: 1em; font-style: normal; }

/* ---------- Para ti / no para ti ---------- */

.doble { display: grid; gap: 18px; }
@media (min-width: 820px) { .doble { grid-template-columns: 1fr 1fr; } }
.panel { border-radius: var(--radio); padding: clamp(24px, 3vw, 34px); }
/* Los dos paneles tienen que despegarse del fondo, y el fondo de esa sección
   es pergamino con textura: queda compuesto en torno a #F5E6D0. El panel «no»
   iba en #F4E9D8, o sea MÁS CLARO que su propio fondo, y por eso no se veía.
   Se hace un par: uno por encima y otro por debajo del fondo.
     claro  #FFFFFF  —el que sí— se levanta
     fondo  ~#F5E6D0
     hondo  #E5D5B8  —el que no— se hunde                                  */
.panel--si { background: var(--papel); border: 1px solid var(--linea); box-shadow: 0 6px 18px rgba(90,60,20,.07); }
.panel--no { background: #E5D5B8; border: 1px solid #D0B88F; }

/* Sobre el panel hondo, el gris de apoyo se queda en 4,04:1. Va con la tinta
   normal, que da 7,4:1. */
.panel--no .nota-boton { color: var(--texto); }
.panel--no .lista--no li::before { color: #5A5A5A; }
.panel h3 { font-size: var(--t4); margin-bottom: .7em; }

/* ---------- FAQ: bocadillos ---------- */

.faq { max-width: 820px; display: grid; gap: 12px; }
.faq details {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color .16s ease;
}
.faq details[open] { border-color: var(--materia); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05em 3em 1.05em 1.3em; position: relative;
  font-family: var(--cuerpo); font-size: 1.04rem; font-weight: 600; color: var(--tinta);
  border-radius: var(--radio);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.1em; top: 50%; transform: translateY(-50%);
  font-size: 1.45rem; font-weight: 400; color: var(--materia-tinta); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--materia-tinta); outline-offset: 2px; }
.faq__cuerpo { padding: 0 1.4em 1.3em; font-size: var(--t1); color: var(--suave); }
.faq__cuerpo p { max-width: none; }

/* ---------- Cierre ---------- */

.cierre { background: var(--invisible); color: #F6EFF9; text-align: center; position: relative; overflow: hidden; }
.cierre::before {
  content: ""; position: absolute; inset: 0;
  background: url(geometria.svg) repeat; background-size: 200px auto;
  opacity: .16; pointer-events: none;
}
.cierre h2 { color: #FFFFFF; max-width: 20ch; margin-inline: auto; }
.cierre h2 em { font-style: italic; color: #F3C58A; display: block; }
.cierre p { color: rgba(246,239,249,.88); margin-inline: auto; }
.cierre .btn { margin-top: 1.5em; }
.cierre .nota-boton { color: rgba(246,239,249,.84); margin-inline: auto; }

/* ---------- Pie ---------- */

.pie { background: var(--pergamino); border-top: 1px solid var(--linea); font-size: var(--t0); color: var(--suave); padding: 30px 0; }
.pie__fila { display: flex; flex-wrap: wrap; gap: .6em 1.6em; align-items: center; justify-content: space-between; }
.pie a { color: var(--suave); text-decoration: none; }
.pie a:hover { color: var(--materia-tinta); text-decoration: underline; }
.pie nav { display: flex; flex-wrap: wrap; gap: .6em 1.4em; }

/* ---------- Botón flotante de WhatsApp ----------
   Verde #25D366 con el glifo blanco: es la marca de WhatsApp tal como la
   define WhatsApp, y es lo que se reconoce sin leer. El botón CON TEXTO usa
   el verde oscuro, que sí contrasta. */

.flotante-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--whatsapp); border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .18s ease;
}
.flotante-wa:hover { transform: scale(1.06); }
.flotante-wa svg { width: 28px; height: 28px; fill: #fff; }
.flotante-wa:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* ---------- Paso 2 ---------- */

.paso2 {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  background: rgba(43,30,20,.7);
  padding: 20px; overflow-y: auto;
}
.paso2[data-visible="si"] { display: grid; }
.paso2__caja {
  background: var(--pergamino); border-radius: 16px;
  max-width: 500px; width: 100%; padding: clamp(28px, 5vw, 42px);
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  animation: entra-paso2 .3s ease-out;
}
@keyframes entra-paso2 { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.paso2__caja h2 { font-size: var(--t4); }
.paso2__caja p { color: var(--suave); }
.paso2__caja .btn { margin-top: 1.3em; }

/* ---------- Capas de revisión — NO van en producción ---------- */

.revision { display: none; }
body[data-revision="si"] .revision { display: block; }

.nota, .falta { font-size: var(--t0); line-height: 1.5; padding: .7em .95em; margin: 0 0 1.2em; max-width: 70ch; border-radius: 0 8px 8px 0; }
.nota { background: #EFF7F0; border-left: 3px solid var(--vida); color: #1F5C28; }
.falta { background: #FEF5E6; border-left: 3px solid #B57A0A; color: #6E4706; }
.nota strong, .falta strong { color: inherit; }

.interruptor-revision {
  position: fixed; left: 14px; bottom: 18px; z-index: 60;
  background: var(--tinta); color: #fff; border: 0; border-radius: 999px;
  font-family: var(--cuerpo); font-size: var(--t0); font-weight: 600;
  padding: .6em 1.1em; cursor: pointer;
}

/* ---------- Pantallas estrechas ----------
   Medido en un iframe de 390 px: la barra pegajosa ocupaba 96 px (la marca se
   partía en tres líneas y el botón en dos), o sea el 11 % de la pantalla
   permanentemente. Y la cinta dejaba un punto separador colgando al final de
   la primera línea. */

.solo-estrecho { display: none; }

@media (max-width: 580px) {
  .solo-ancho { display: none; }
  .solo-estrecho { display: inline; }

  .barra { padding: 7px 16px; gap: 10px; }
  .barra__marca { font-size: .92rem; }
  .barra__marca span { display: none; }
  /* Medido a 390 px: el botón principal se quedaba en 35 px de alto. En un
     móvil el dedo necesita 44. Es el botón que más se pulsa de la página. */
  .barra .btn { padding: .62em 1.05em; font-size: .86rem; white-space: nowrap; min-height: 44px; }
}

/* Lo demás que se pulsa y era pequeño. Va SIN condición de dispositivo a
   propósito: metido en `@media (hover: none)` no se puede comprobar desde un
   navegador de escritorio, y un objetivo cómodo tampoco estorba con ratón. */
.pie nav a { display: inline-block; padding: .45em 0; }
.consentimiento { align-items: center; }
.consentimiento input { width: 20px; height: 20px; margin: 0; }
.faq summary { min-height: 44px; display: flex; align-items: center; }

@media (max-width: 580px) {

  /* Los cuatro pilares, en dos por dos y sin separadores que cuelguen */
  .cinta ol { display: grid; grid-template-columns: 1fr 1fr; gap: .3em 1em; padding: .95em 16px; text-align: center; }
  .cinta li { justify-content: center; gap: 0; }
  .cinta li::after { display: none; }

  /* La oferta competía con el titular: tres líneas a tamaño de entradilla */
  .hero__oferta { font-size: 1.08rem; }
}

/* El ancla no puede quedar debajo de la barra pegajosa */
[id] { scroll-margin-top: 92px; }

/* ---------- Huecos que no se publican solos ----------
   Un bloque con `data-pendiente` NO SE VE hasta que alguien lo rellena y le
   quita el atributo. En revisión sí, para que el cliente sepa qué falta.
   Constitución, punto 3: lo que no debe pasar se impide, no se pide. */

[data-pendiente] { display: none; }
body[data-revision="si"] [data-pendiente] { display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dias[data-entrar] > li { opacity: 1 !important; transform: none !important; }
  .paso2__caja { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

@media print { .barra, .flotante-wa, .interruptor-revision, .paso2 { display: none !important; } }

/* ============================================================================
 * MOVIMIENTO
 *
 * Regla: todo lo que se mueve en esta página cuenta lo mismo que la página.
 * «La luz desciende de lo invisible a lo visible, y lo último en manifestarse
 * es la materia.» Por eso todo baja, y todo termina en naranja.
 *
 * Son seis cosas, no seis efectos sueltos:
 *   1. La entrada del hero, una vez, al cargar.
 *   2. El raíl de la izquierda: el descenso convertido en barra de avance.
 *   3. El Árbol: se dibuja, y después UNA LUZ BAJA por la columna central
 *      hasta encender Maljut, que se queda respirando.
 *   4. Las cuatro cajas de los días, escalonadas y en orden.
 *   5. Lo que responde al visitante: el ratón sobre las cajas, abrir una
 *      pregunta, pulsar un botón.
 *   6. El resplandor del hero, que respira muy despacio.
 *
 * Con `prefers-reduced-motion` no se mueve NADA. Está al final del archivo.
 * ========================================================================= */

/* ---------- 1 · La entrada del hero ----------
   `both` con retardo deja el elemento en el estado `from` mientras espera, así
   que si el navegador ignorase la animación el contenido se ve igual. */

@keyframes surge { from { opacity: 0; transform: translateY(18px); } }

.hero__oferta  { animation: surge .62s cubic-bezier(.22,.61,.36,1) both .05s; }
.hero h1       { animation: surge .72s cubic-bezier(.22,.61,.36,1) both .14s; }
.hero__promesa { animation: surge .62s cubic-bezier(.22,.61,.36,1) both .26s; }
.hero__detalle { animation: surge .62s cubic-bezier(.22,.61,.36,1) both .34s; }
.datos         { animation: surge .62s cubic-bezier(.22,.61,.36,1) both .42s; }
.hoja          { animation: surge .75s cubic-bezier(.22,.61,.36,1) both .30s; }

/* ---------- 2 · El raíl del descenso ----------
   No es decoración: es cuánto llevas de página. Y va del morado al naranja,
   como todo lo demás. Se revela recortando, no escalando: si se escalara, el
   degradado se comprimiría y a mitad de página ya estaría en naranja. */

.descenso-rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: 3px; z-index: 45;
  background: rgba(43,43,43,.07);
  pointer-events: none;
}
.descenso-rail i {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--invisible) 0%, var(--nodo-3) 50%, var(--materia) 100%);
  clip-path: inset(0 0 calc(100% - var(--avance, 0) * 100%) 0);
}

/* ---------- 3 · La luz que baja por el Árbol ----------
   Sale de Keter (arriba) y baja por la columna central hasta Maljut. Arranca
   cuando los senderos ya están dibujados. */


/* Y Maljut, una vez encendido, se queda respirando. Es lo único que no para:
   es la materia ya manifestada. */

/* ---------- 5 · Lo que responde al visitante ---------- */

.caja-dia__glifo { transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .2s ease; opacity: .8; }
.caja-dia:hover .caja-dia__glifo { transform: rotate(18deg) scale(1.08); opacity: 1; }
/* El filete engorda al pasar el ratón. Con `scaleY`, no con `height`:
   animar la altura obliga al navegador a recalcular la maqueta en cada
   fotograma; una transformación no toca nada. */
.caja-dia::before { transform-origin: top; transition: transform .22s ease; }
.caja-dia:hover::before { transform: scaleY(1.7); }

/* Abrir una pregunta tiene que verse abrir */
@keyframes despliega { from { opacity: 0; transform: translateY(-6px); } }
.faq details[open] .faq__cuerpo { animation: despliega .26s ease-out both; }
.faq summary::after { transition: transform .22s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }

/* ---------- 6 · El resplandor del hero respira ----------
   22 segundos por ciclo. No se ve moverse; se nota que está vivo. */

.hero::after { animation: alienta 22s ease-in-out infinite; }
@keyframes alienta {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

/* ---------- Las cifras, cuando se enciendan ---------- */

/* ---------- Nada de esto si han pedido menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero__oferta, .hero h1, .hero__promesa, .hero__detalle, .datos, .hoja,
  .arbol-arte[data-dibujar="va"] .arbol-arte__luz, .arbol-arte[data-dibujar="va"] .arbol-arte__maljut,
  .hero::after, .faq details[open] .faq__cuerpo {
    animation: none !important;
  }
  .arbol-arte__luz, .arbol-arte__maljut { display: none; }
  .descenso-rail { display: none; }
  .caja-dia:hover .caja-dia__glifo { transform: none; }
}