/* =========================================================================
   PORTADA — página de venta del Sistema Equinoccial (Carta Astral, Numerología,
   Tarot y Consulta a tu Carta con IA). Misma paleta papel/dorado que el dashboard
   (page-acceso-vip.css), para que la experiencia sea una sola de punta a punta.
   Mobile-first: se escribe primero para pantallas chicas y se agranda con min-width.
   ========================================================================= */
#eq-fp {
    --eq-cielo: #111c27;
    --eq-panel: rgba(12, 21, 30, 0.62);
    --eq-papel: #ecd6b8;
    --eq-tinta: #1b2a44;
    --eq-tinta-dim: rgba(27, 42, 68, 0.66);
    --eq-oro: #c9a24e;
    --eq-oro-claro: #e3c27a;
    --eq-oro-linea: rgba(201, 162, 78, 0.34);
    --eq-luz: #ecdcc0;
    /* Ronda 18: 0.66 -> 0.78 de opacidad. El cliente reportó el texto de la portada "demasiado
       pequeño" -- una parte real del problema era el contraste bajo del color tenue, no sólo el
       tamaño (un texto opaco se lee más chico de lo que mide). Sube acá, de una sola vez, para
       todo lo que usa esta variable en el archivo. */
    --eq-luz-dim: rgba(236, 220, 192, 0.78);
    --eq-titulo: 'Cinzel', serif;
    --eq-lectura: 'EB Garamond', Georgia, serif;

    /* Ronda 40 (v4, corrección de un error propio): el intento "v3" de acá arriba puso esto sólido
       de nuevo para tapar la duna detrás de las tarjetas de Planes -- pero esto es el PADRE DIRECTO
       del canvas de fondo (#fp-fondo-interactivo, fixed + z-index negativo, ver más abajo). Un
       padre directo con fondo opaco propio tapa a un hijo fixed/z-index negativo EN TODA LA PÁGINA,
       sin importar lo que diga cada sección hija -- por eso, con el cambio "v3", el fondo animado
       quedó invisible en TODOS lados (hero, Quiénes somos, todo), no sólo en Planes. Confirmado
       muestreando los píxeles reales de una captura: el canvas sí tenía el dibujo adentro (leído
       con getImageData), pero no llegaba a pintarse en pantalla. Vuelve a transparent, como estaba
       antes de la v3 -- el arreglo real de Planes es darle SU PROPIO fondo opaco a la sección
       (ver #eq-fp .fp-planes más abajo), el mismo patrón que ya usan Ecosistema/Qué ganás/FAQ/CTA
       final, que nunca tuvieron este problema porque sí tienen fondo propio. */
    background: transparent;
    color: var(--eq-luz);
    font-family: var(--eq-lectura);
    font-size: 1.2rem;
    line-height: 1.65;
}
#eq-fp * { box-sizing: border-box; }

/* Ronda 40: fondo interactivo de toda la portada (ver la función fpFondoInteractivo en el <script>
   de front-page.php). Fijo en toda la pantalla y SIEMPRE detrás de todo -- z-index negativo, sin
   necesidad de tocar el z-index de ninguna otra sección: como #eq-fp no tiene "position" propio,
   este canvas escapa directo al fondo de la página (mismo principio ya usado con la barra de CTA
   fija). pointer-events:none para que nunca robe un clic/tap pensado para un botón o un campo. */
#eq-fp #fp-fondo-interactivo {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    pointer-events: none;
    display: block;
}

#eq-fp .fp-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
#eq-fp h1, #eq-fp h2, #eq-fp h3 { font-family: var(--eq-titulo); font-weight: 600; color: var(--eq-luz); margin: 0; }
/* .fp-herramientas y .fp-como tienen fondo claro (--eq-papel): sus títulos h2/h3 necesitan tinta
   oscura, no el color claro por defecto (pensado para fondo oscuro), o quedan casi invisibles.
   Ojo: esto tiene que ir scopeado a esas dos secciones nomás — un selector más genérico tipo
   "section .fp-wrap h2" también pisa (por especificidad) al h2 de .fp-planes, que SÍ tiene fondo
   oscuro y necesita quedarse claro (bug real, encontrado y corregido en la ronda de marketing). */
#eq-fp .fp-herramientas h2, #eq-fp .fp-como h2, #eq-fp .fp-faq h2,
#eq-fp .fp-herramientas h3, #eq-fp .fp-como h3, #eq-fp .fp-faq h3 { color: var(--eq-tinta); }
#eq-fp a { color: inherit; }

/* ---------- topbar ---------- */
#eq-fp .fp-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; background: rgba(9, 16, 24, 0.85); border-bottom: 1px solid var(--eq-oro-linea);
    position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px);
}
#eq-fp .fp-logo { display: flex; align-items: center; gap: 10px; color: var(--eq-oro); font-family: var(--eq-titulo); font-size: 0.85rem; letter-spacing: 2px; min-width: 0; }
#eq-fp .fp-logo svg { flex-shrink: 0; }
#eq-fp .fp-logo b { display: block; color: var(--eq-luz); font-size: 0.95rem; letter-spacing: 3px; }
#eq-fp .fp-ingresar { font-size: 0.95rem; letter-spacing: 0.5px; color: var(--eq-luz-dim); border: 1px solid var(--eq-oro-linea); border-radius: 30px; padding: 8px 14px; white-space: nowrap; flex-shrink: 0; }
#eq-fp .fp-ingresar-largo { display: none; }
@media (min-width: 480px) { #eq-fp .fp-ingresar-largo { display: inline; } }
#eq-fp .fp-ingresar:hover { color: var(--eq-luz); border-color: var(--eq-oro); }


/* ---------- botones ---------- */
#eq-fp .fp-btn {
    display: inline-block; font-family: var(--eq-titulo); font-weight: 700; letter-spacing: 1.5px;
    font-size: 1rem; padding: 14px 26px; border-radius: 3px; border: none; cursor: pointer; text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#eq-fp .fp-btn-primary { background: linear-gradient(180deg, #e3c27a, #c9a24e); color: #16222f; box-shadow: 0 8px 20px rgba(201, 162, 78, 0.25); }
#eq-fp .fp-btn-primary:hover { background: linear-gradient(180deg, #edd08c, #d4ad5c); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(201, 162, 78, 0.35); }

/* ---------- hero ---------- */
#eq-fp .fp-hero {
    padding: 60px 0 54px 0; text-align: center; position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(201,162,78,0.14) 0%, transparent 60%),
        radial-gradient(1px 1px at 12% 22%, rgba(236,220,192,0.5), transparent 100%),
        radial-gradient(1px 1px at 82% 18%, rgba(236,220,192,0.4), transparent 100%),
        radial-gradient(1.5px 1.5px at 92% 55%, rgba(201,162,78,0.55), transparent 100%),
        radial-gradient(1px 1px at 24% 68%, rgba(236,220,192,0.35), transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 82%, rgba(201,162,78,0.4), transparent 100%),
        radial-gradient(1px 1px at 8% 85%, rgba(236,220,192,0.4), transparent 100%);
}
#eq-fp .fp-hero-badge { display: inline-block; font-family: var(--eq-titulo); font-size: 0.68rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--eq-oro); border: 1px solid var(--eq-oro-linea); border-radius: 30px; padding: 7px 16px; margin-bottom: 22px; }


/* Ronda 39: estética de H1 y H2 intercambiada a pedido del cliente (el H2 -- la frase de marca
   "hero_titulo" -- pasa a verse grande/dorado-brillante como antes se veía el H1, y el H1 -- el
   H1 real con las keywords SEO, "hero_titulo_seo" -- pasa a verse chico/tenue como antes se veía
   el H2). Es un cambio puramente visual: las etiquetas <h1>/<h2> en front-page.php no se tocaron,
   así que el SEO no se ve afectado (buscadores y motores de IA leen la estructura semántica del
   HTML, no el tamaño con que se dibuja en pantalla). Los valores de cada breakpoint se movieron
   completos de un selector al otro (ver también los 2 breakpoints más abajo y la versión desktop
   más adelante en este archivo) para no perder el ajuste responsive ya afinado. */
#eq-fp .fp-hero-sub { font-size: 1.85rem; letter-spacing: 0.3px; line-height: 1.32; max-width: 720px; margin: 0 auto 20px auto; }
#eq-fp .fp-hero h1 { font-size: 1.18rem; color: var(--eq-luz-dim); max-width: 660px; margin: 0 auto 30px auto; }
/* Ronda 39c: H3 nuevo del hero ("Tecnología Para El Alma") -- semánticamente un escalón abajo
   del H2, pero el cliente pidió que siga viéndose destacado: mayúsculas con tracking amplio y
   dorado, tamaño intermedio entre el H2 grande y el cuerpo de texto normal. */
#eq-fp .fp-hero-tagline { font-family: var(--eq-titulo); font-size: 1.15rem; letter-spacing: 3px; text-transform: uppercase; color: var(--eq-oro-claro); margin: 0 auto 30px auto; }
/* Ronda 39b (fix de bug): párrafo de contexto del hero, clase propia (antes compartía
   ".fp-hero-sub" con el H2 y se agrandaba de más al mismo tamaño que el título -- ver comentario
   en front-page.php). Ahora va DESPUÉS de los botones, más chico y discreto que cualquiera de
   los títulos. */
#eq-fp .fp-hero-desc { font-size: 1.1rem; line-height: 1.6; color: var(--eq-luz-dim); max-width: 620px; margin: 26px auto 0 auto; }
#eq-fp .fp-hero-ctas { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#eq-fp .fp-hero-cta-sec { font-size: 1.05rem; color: var(--eq-oro-claro); border-bottom: 1px solid var(--eq-oro-linea); padding-bottom: 2px; }
#eq-fp .fp-hero-cta-sec:hover { color: var(--eq-luz); border-color: var(--eq-oro); }

/* ---------- ecosistema (por qué EQUINOX es distinto) ---------- */
/* Ronda 42: el cliente pidió que el fondo interactivo se vea en TODOS los bloques oscuros/azules de
   la portada, no sólo en el hero y "Quiénes somos" -- acá antes había un navy sólido propio (#0c1520)
   que lo tapaba. Ahora el fondo del reemplazo de la Ronda 41 (red de nodos/constelación) es mucho
   más sutil que el intento anterior (la "duna"), así que mostrarlo detrás de más secciones ya no
   arma quilombo visual -- se saca el color sólido y queda transparent, como el hero. */
#eq-fp .fp-ecosistema { background: transparent; padding: 40px 0 46px 0; border-top: 1px solid var(--eq-oro-linea); border-bottom: 1px solid var(--eq-oro-linea); }
#eq-fp .fp-ecosistema h2 { text-align: center; font-size: 1.5rem; letter-spacing: 1px; line-height: 1.35; max-width: 620px; margin: 0 auto 14px auto; }
#eq-fp .fp-ecosistema-sub { text-align: center; color: var(--eq-luz-dim); max-width: 560px; margin: 0 auto 34px auto; font-size: 1.15rem; }
#eq-fp .fp-grid-dif { display: grid; grid-template-columns: 1fr; gap: 26px; }
#eq-fp .fp-dif { text-align: center; padding: 0 6px; }
#eq-fp .fp-dif-ico { display: block; font-size: 1.1rem; color: var(--eq-oro); margin-bottom: 12px; }
#eq-fp .fp-dif h3 { font-size: 1.1rem; letter-spacing: 0.5px; line-height: 1.35; margin-bottom: 10px; }
#eq-fp .fp-dif p { margin: 0; color: var(--eq-luz-dim); font-size: 1.12rem; line-height: 1.55; }

/* ---------- herramienta gratuita "Tu signo real" ---------- */
#eq-fp .fp-signo-gratis { padding: 50px 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,162,78,0.10) 0%, transparent 65%); }
#eq-fp .fp-signo-caja { max-width: 480px; margin: 0 auto; text-align: center; }
#eq-fp .fp-badge-claro { margin-bottom: 16px; }
#eq-fp .fp-signo-gratis h2 { font-size: 1.55rem; letter-spacing: 0.5px; margin-bottom: 14px; }
/* Ronda 18: texto reportado como "demasiado pequeño" y "confuso" -- se subió el tamaño (0.95rem
   -> 1.08rem), se alinea a la izquierda en vez de centrado (un párrafo largo centrado es más
   difícil de escanear que uno alineado) y el copy se partió en dos oraciones cortas en vez de una
   sola densa. El box sigue centrado (fp-signo-caja); sólo el texto largo se alinea a la izquierda. */
#eq-fp .fp-signo-sub { color: var(--eq-luz-dim); font-size: 1.18rem; line-height: 1.6; text-align: left; margin: 0 0 14px 0; }
#eq-fp .fp-signo-sub:last-of-type { margin-bottom: 28px; }
#eq-fp .fp-form-gratis { text-align: left; }
#eq-fp .fp-form-gratis label { display: block; font-family: var(--eq-titulo); font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; color: var(--eq-luz-dim); margin-bottom: 16px; }
#eq-fp .fp-form-gratis input { display: block; width: 100%; margin-top: 6px; padding: 13px 13px; border: 1px solid var(--eq-oro-linea); border-radius: 3px; font-family: var(--eq-lectura); font-size: 1.18rem; background: rgba(255,255,255,0.06); color: var(--eq-luz); }
#eq-fp .fp-form-gratis input:focus { outline: none; border-color: var(--eq-oro); }
#eq-fp .fp-form-gratis .fp-btn { width: 100%; margin-top: 4px; }
#eq-fp .fp-signo-resultado { text-align: center; }
/* Ronda 47 (28/09): bug real reportado por el cliente -- el scrollIntoView() que agrega la Ronda
   46 al calcular dejaba "Tu signo tradicional es..." tapado detrás del topbar fijo (.fp-topbar,
   position:sticky top:0, ver más arriba), así que la pantalla arrancaba directo en "Tu signo real
   es...", cortando el contraste entre los dos. scroll-margin-top le dice al navegador que reserve
   ese espacio arriba del elemento al hacer scroll -- mismo mecanismo nativo que ya soluciona este
   problema en cualquier sitio con header fijo, sin tocar el JS. 90px = altura real del topbar
   (~64px con su padding) + un poco de aire. */
#eq-fp .fp-signo-resultado { scroll-margin-top: 90px; }
/* Ronda 46: aparición del resultado -- antes el cambio de formulario a resultado era instantáneo
   y mismo peso visual que todo lo demás, así que costaba notar que "pasó algo". Respeta
   prefers-reduced-motion (ver la regla al final de este bloque). */
@keyframes fpSignoRevela { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
#eq-fp .fp-signo-resultado--revelado { animation: fpSignoRevela 0.55s ease-out; }
@media (prefers-reduced-motion: reduce) { #eq-fp .fp-signo-resultado--revelado { animation: none; } }
/* Ronda 46: el "antes/real" (la revelación en sí) ahora vive en su propia caja resaltada --
   antes era un párrafo más, al mismo nivel visual que el resto, y el cliente reportó que no se
   notaba la diferencia entre el estado "recién calculado" y el resto del contenido. */
#eq-fp .fp-signo-reveal {
    padding: 18px 20px; margin: 0 0 18px 0; border: 1px solid var(--eq-oro-linea); border-radius: 10px;
    background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 78, 0.14), transparent 70%);
}
#eq-fp .fp-signo-antes { font-size: 1.15rem; color: var(--eq-luz-dim); margin: 0 0 6px 0; }
/* Ronda 44: se saca el tachado -- el tradicional ya no se muestra como "anulado", los dos
   sistemas (Tropical/Sideral, ver el paréntesis que ahora agrega eq_t()) se presentan en
   paralelo, no uno invalidando al otro. */
#eq-fp .fp-signo-antes strong { color: var(--eq-luz-dim); font-weight: 600; }
#eq-fp .fp-signo-real { font-family: var(--eq-titulo); font-size: 1.8rem; color: var(--eq-oro-claro); margin: 0; }
/* Ronda 46: aclara por qué el tradicional puede sentirse más "propio" aunque no sea el real --
   sólo visible cuando no coinciden (ver JS, toggle de "no-coincide-nota"). */
#eq-fp .fp-signo-nota { font-size: 0.92rem; font-style: italic; color: var(--eq-luz-dim); opacity: 0.85; margin: 10px 0 0 0; }
/* Ronda 44: desplegable breve "¿Qué diferencia hay entre Tropical y Sideral?" -- mismo
   mecanismo <details>/<summary> que el acordeón del FAQ (más abajo, .fp-faq-item), sólo que
   con la paleta oscura/dorada de esta tarjeta en vez de la clara del FAQ. Cerrado por
   defecto, así no agrega alto hasta que alguien lo abre -- funciona igual en mobile y desktop. */
#eq-fp .fp-signo-info { text-align: left; margin: 0 0 18px 0; border: 1px solid var(--eq-oro-linea); border-radius: 6px; background: rgba(201,162,78,0.06); }
#eq-fp .fp-signo-info summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 0.95rem; color: var(--eq-oro-claro); }
#eq-fp .fp-signo-info summary::-webkit-details-marker { display: none; }
#eq-fp .fp-signo-info summary::before {
    content: 'i'; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--eq-oro-linea); font-family: var(--eq-titulo); font-style: normal; font-size: 0.8rem; color: var(--eq-oro-claro);
}
#eq-fp .fp-signo-info[open] summary { border-bottom: 1px solid var(--eq-oro-linea); }
#eq-fp .fp-signo-info p { margin: 0; padding: 12px 14px 14px 14px; font-size: 0.92rem; line-height: 1.55; color: var(--eq-luz-dim); }
/* Ronda 45: "por qué es tu signo" -- rareza/tercio/numerología/borde. Mismo criterio visual que
   .fp-signo-borde (caja sutil dorada) pero con más aire interno porque el texto es más largo.
   Ronda 46: se reportó que este bloque (y el resultado en general) se veía "monótono, todo
   texto parejo, no dan ganas de leer" -- se le agrega un eyebrow (título de sección chico), un
   ícono distinto por dato (mismo lenguaje gráfico ya usado en Ecosistema/Transformación más
   abajo en la página) en vez de 4 párrafos seguidos con el mismo peso, y más separación. */
#eq-fp .fp-signo-identifica { text-align: left; margin: 0 0 20px 0; padding: 18px 20px; border: 1px solid var(--eq-oro-linea); border-radius: 6px; background: rgba(201,162,78,0.05); display: flex; flex-direction: column; gap: 14px; }
#eq-fp .fp-signo-identifica-eyebrow { margin: 0 0 2px 0 !important; font-family: var(--eq-titulo); font-size: 0.74rem !important; letter-spacing: 2px; text-transform: uppercase; color: var(--eq-oro-claro) !important; font-weight: 600; }
#eq-fp .fp-signo-identifica p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--eq-luz-dim); padding-left: 30px; position: relative; }
#eq-fp .fp-signo-identifica p:empty { display: none; }
#eq-fp .fp-signo-identifica [data-fpg]::before {
    position: absolute; left: 0; top: 0.05em; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--eq-oro-linea); font-family: var(--eq-titulo); font-size: 0.72rem; color: var(--eq-oro-claro); background: rgba(201,162,78,0.08);
}
#eq-fp .fp-signo-identifica [data-fpg="rareza"]::before { content: '◐'; }
#eq-fp .fp-signo-identifica [data-fpg="tercio"]::before { content: '✺'; }
#eq-fp .fp-signo-identifica [data-fpg="numerologia"]::before { content: '✦'; }
#eq-fp .fp-signo-identifica [data-fpg="borde-identificacion"]::before { content: '⟡'; }
#eq-fp .fp-signo-identifica [data-fpg="rareza"] { color: var(--eq-oro-claro); font-weight: 500; font-size: 0.98rem; }
#eq-fp .fp-signo-identifica strong { color: var(--eq-oro-claro); font-weight: 700; }
/* El disclaimer ("no es una caja cerrada...") es una aclaración, no un dato más -- se lo separa
   visualmente (sin ícono circular, cursiva) para que no compita con los 4 datos.
   Ronda 47: el cliente reportó que quedaba "extremadamente chico" y sin contraste -- 0.88rem +
   luz-dim + opacity:0.8 apilaban 3 reducciones de legibilidad a la vez. Ahora usa el mismo tamaño
   que los datos de arriba y el color de texto normal del sitio (--eq-luz), sin opacity -- la
   itálica y la línea divisoria ya alcanzan para diferenciarlo sin sacrificar que se pueda leer. */
#eq-fp .fp-signo-disclaimer { margin: 2px 0 0 0 !important; padding-left: 0 !important; font-size: 1rem !important; font-style: italic; line-height: 1.6; color: var(--eq-luz); border-top: 1px solid var(--eq-oro-linea); padding-top: 14px !important; }
#eq-fp .fp-signo-borde { font-size: 1.1rem; color: var(--eq-luz-dim); background: rgba(201,162,78,0.08); border: 1px solid var(--eq-oro-linea); border-radius: 6px; padding: 12px 16px; margin: 0 0 20px 0; text-align: left; }
#eq-fp .fp-signo-upsell { font-size: 1.18rem; line-height: 1.6; color: var(--eq-luz-dim); text-align: left; margin: 0 0 14px 0; }
#eq-fp .fp-signo-upsell:last-of-type { margin-bottom: 24px; }
/* Ronda 44: lista de opciones del ecosistema (reemplaza al párrafo único que sólo hablaba de
   Luna/Ascendente) -- un ítem corto por línea con un check dorado, para que se escanee rápido
   en vez de leerse como párrafo. */
#eq-fp .fp-signo-opciones { list-style: none; margin: 0 0 14px 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
#eq-fp .fp-signo-opciones li { position: relative; padding-left: 26px; font-size: 1.05rem; line-height: 1.5; color: var(--eq-luz-dim); }
#eq-fp .fp-signo-opciones li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--eq-oro-claro); font-weight: 600; }

/* ---------- equipo ---------- */
/* Ronda 40 (v4): el "transparent" de acá ya no hace falta (con #eq-fp transparent de nuevo, ya se
   ve solo) pero se deja explícito por las dudas / como documentación de que esta sección SÍ está
   pensada para dejar ver el fondo interactivo detrás. */
#eq-fp .fp-equipo { padding: 46px 0; text-align: center; background: transparent; }
#eq-fp .fp-equipo h2 { font-size: 1.45rem; letter-spacing: 0.5px; margin: 0 auto 18px auto; max-width: 560px; }
#eq-fp .fp-equipo p { color: var(--eq-luz-dim); font-size: 1.18rem; line-height: 1.65; max-width: 640px; margin: 0 auto 26px auto; }
#eq-fp .fp-equipo-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#eq-fp .fp-equipo-tags span { font-size: 0.75rem; letter-spacing: 0.5px; color: var(--eq-oro-claro); border: 1px solid var(--eq-oro-linea); border-radius: 30px; padding: 6px 14px; }

/* ---------- faq ---------- */
#eq-fp .fp-faq { background: var(--eq-papel); color: var(--eq-tinta); padding: 50px 0; }
#eq-fp .fp-faq h2 { text-align: center; font-size: 1.65rem; letter-spacing: 2px; margin-bottom: 34px; }
#eq-fp .fp-grid-faq { display: grid; grid-template-columns: 1fr; gap: 22px; }
#eq-fp .fp-faq-item h3 { font-size: 1.12rem; letter-spacing: 0.3px; margin-bottom: 8px; }
#eq-fp .fp-faq-item p { margin: 0; color: var(--eq-tinta-dim); font-size: 1.15rem; line-height: 1.55; }

/* ---------- cta final ---------- */
/* Ronda 42: ídem Ecosistema -- se saca el gradiente navy sólido para que se vea el fondo interactivo
   acá también, como pidió el cliente para todos los bloques oscuros de la portada. */
#eq-fp .fp-cta-final { padding: 56px 0; text-align: center; background: transparent; border-top: 1px solid var(--eq-oro-linea); }
#eq-fp .fp-cta-final h2 { font-size: 1.55rem; letter-spacing: 0.5px; margin-bottom: 24px; }

/* ---------- herramientas ---------- */
#eq-fp .fp-herramientas { background: var(--eq-papel); color: var(--eq-tinta); padding: 50px 0; }
#eq-fp .fp-herramientas h2 { text-align: center; font-size: 1.65rem; letter-spacing: 2px; margin-bottom: 34px; }
#eq-fp .fp-grid-herr { display: grid; grid-template-columns: 1fr; gap: 18px; }
#eq-fp .fp-herr { background: rgba(255,255,255,0.35); border: 1px solid rgba(27,42,68,0.15); border-radius: 6px; padding: 24px 22px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
#eq-fp .fp-herr:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(27,42,68,0.12); border-color: rgba(201,162,78,0.45); }
#eq-fp .fp-herr-ico { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(201,162,78,0.12); font-size: 1.3rem; color: var(--eq-oro); margin-bottom: 14px; }
#eq-fp .fp-herr h3 { font-size: 1.15rem; letter-spacing: 1px; margin-bottom: 8px; }
#eq-fp .fp-herr p { margin: 0; color: var(--eq-tinta-dim); font-size: 1.15rem; }
/* Ronda 65: Compatibilidad y Sinastría, tarjeta ancha y destacada al final de "Qué incluye tu acceso". */
#eq-fp .fp-herr-destacado { grid-column: 1 / -1; border-color: var(--eq-oro); background: rgba(201, 162, 78, 0.08); }
#eq-fp .fp-herr-nuevo { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; color: #1b2a44; background: linear-gradient(90deg, #b98f3f, #e3c27a); border-radius: 10px; padding: 3px 9px; }

/* ---------- planes ---------- */
/* Ronda 40 (v4): este section nunca había tenido fondo propio (heredaba el de #eq-fp, que siempre
   había sido sólido) -- por eso, cuando el fondo interactivo empezó a verse en toda la portada,
   fue la única sección donde se notó mal: sus tarjetas (.fp-plan, más abajo) usan --eq-panel, un
   navy semitransparente pensado para dejar ver algo sólido y quieto detrás, no una animación (la
   de ese momento: una "duna" grande y en movimiento, ver Ronda 40). Por eso en ese momento se le
   dio a Planes su propio fondo opaco.
   Ronda 42: el cliente pidió que el fondo se vea en TODOS los bloques oscuros, incluido este. El
   reemplazo de la Ronda 41 (red de nodos/constelación) es mucho más sutil -- líneas finas y puntos
   chicos sobre navy quieto, no una textura grande en movimiento -- así que detrás de las tarjetas
   semitransparentes (--eq-panel, con su propio backdrop-filter: blur) ya no arma el quilombo visual
   de antes. Vuelve a transparent; si en la práctica se viera cargado, el ajuste queda en bajar la
   opacidad de las líneas en front-page.php, no en volver a tapar acá. */
#eq-fp .fp-planes { padding: 54px 0; background: transparent; }
#eq-fp .fp-planes h2 { text-align: center; font-size: 1.65rem; letter-spacing: 2px; color: var(--eq-luz); margin-bottom: 12px; }
#eq-fp .fp-planes-sub { text-align: center; color: var(--eq-luz-dim); max-width: 620px; margin: 0 auto 36px auto; font-size: 1.18rem; }
#eq-fp .fp-grid-planes { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 380px; margin: 0 auto; }
#eq-fp .fp-plan {
    background: var(--eq-panel); border: 1px solid var(--eq-oro-linea); border-radius: 8px; padding: 30px 26px;
    backdrop-filter: blur(8px); position: relative; display: flex; flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#eq-fp .fp-plan:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
#eq-fp .fp-plan-destacado { border-color: var(--eq-oro); box-shadow: 0 0 0 1px var(--eq-oro), 0 20px 45px rgba(0,0,0,0.35); }
#eq-fp .fp-plan-cinta { position: absolute; top: -12px; left: 26px; background: var(--eq-oro); color: #16222f; font-family: var(--eq-titulo); font-size: 0.65rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 30px; }
#eq-fp .fp-plan h3 { font-size: 1.2rem; letter-spacing: 1.5px; margin-bottom: 14px; }
#eq-fp .fp-plan-precio { font-family: var(--eq-titulo); color: var(--eq-oro-claro); font-size: 2.1rem; font-weight: 700; margin-bottom: 4px; }
#eq-fp .fp-plan-precio span { font-size: 1.1rem; vertical-align: top; }
#eq-fp .fp-plan-precio small { font-family: var(--eq-lectura); font-size: 0.95rem; color: var(--eq-luz-dim); font-weight: 400; }
#eq-fp .fp-plan-cuota { font-size: 1.12rem; color: var(--eq-luz-dim); margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--eq-oro-linea); }
#eq-fp .fp-plan-lista { list-style: none; margin: 0 0 26px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
#eq-fp .fp-plan-lista li { font-size: 1.14rem; color: var(--eq-luz-dim); padding-left: 22px; position: relative; }
#eq-fp .fp-plan-lista li::before { content: '✓'; position: absolute; left: 0; color: var(--eq-oro); }
#eq-fp .fp-btn-plan { background: transparent; border: 1px solid var(--eq-oro); color: var(--eq-oro-claro); width: 100%; }
#eq-fp .fp-btn-plan:hover { background: var(--eq-oro); color: #16222f; }
#eq-fp .fp-plan-destacado .fp-btn-plan { background: linear-gradient(180deg, #e3c27a, #c9a24e); color: #16222f; border: none; }

/* ---------- cómo funciona ---------- */
#eq-fp .fp-como { background: var(--eq-papel); color: var(--eq-tinta); padding: 50px 0; }
#eq-fp .fp-como h2 { text-align: center; font-size: 1.65rem; letter-spacing: 2px; margin-bottom: 34px; }
#eq-fp .fp-grid-pasos { display: grid; grid-template-columns: 1fr; gap: 22px; }
#eq-fp .fp-paso { text-align: center; padding: 0 10px; }
#eq-fp .fp-paso-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--eq-tinta-dim); font-family: var(--eq-titulo); font-size: 1.1rem; margin-bottom: 14px; }
#eq-fp .fp-paso h3 { font-size: 1.12rem; letter-spacing: 1px; margin-bottom: 8px; }
#eq-fp .fp-paso p { margin: 0; color: var(--eq-tinta-dim); font-size: 1.15rem; }

/* ---------- modal de registro ---------- */
.fp-modal-fondo { display: none; position: fixed; inset: 0; background: rgba(6,10,16,0.72); z-index: 300; align-items: center; justify-content: center; padding: 16px; }
.fp-modal-fondo.activo { display: flex; }
.fp-modal {
    background: #ecd6b8; color: #1b2a44; border-radius: 6px; padding: 32px 26px; max-width: 400px; width: 100%;
    position: relative; font-family: 'EB Garamond', Georgia, serif; box-shadow: 0 30px 70px rgba(0,0,0,0.5);
    /* Ronda 27: el paso de pago (Payment Element de Stripe, sobre todo con Link desplegado --
       nombre de tarjeta, vencimiento, país, y el bloque opcional de "guardar mi información") puede
       terminar siendo más alto que la pantalla de un celular. Antes el modal no tenía tope de alto
       ni scroll propio, así que .fp-modal-fondo lo centraba igual y el excedente (típicamente el
       título del plan arriba y el botón de confirmar abajo) quedaba tapado por los bordes de la
       pantalla, sin forma de hacer scroll para verlo. Con max-height + overflow-y, el modal en sí
       hace scroll interno cuando no entra completo, en vez de desbordarse por fuera de la pantalla.
       100dvh (altura real visible, descontando la barra del navegador móvil) con 100vh como
       respaldo para navegadores viejos que no lo entienden. */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.fp-modal h3 { font-family: 'Cinzel', serif; font-size: 1.3rem; margin: 0 0 8px 0; }
.fp-modal-sub { color: rgba(27,42,68,0.7); font-size: 1.08rem; margin: 0 0 20px 0; }
.fp-modal-cerrar { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #1b2a44; }
.fp-modal label { display: block; font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(27,42,68,0.7); margin-bottom: 16px; }
.fp-modal input { display: block; width: 100%; margin-top: 6px; padding: 13px 13px; border: 1px solid rgba(27,42,68,0.25); border-radius: 3px; font-family: 'EB Garamond', Georgia, serif; font-size: 1.18rem; background: rgba(255,255,255,0.6); color: #1b2a44; }
.fp-modal input:focus { outline: none; border-color: #c9a24e; }
.fp-modal .fp-btn { width: 100%; margin-top: 4px; }
.fp-form-msg { color: #a33; font-size: 0.9rem; margin: 12px 0 0 0; min-height: 1.2em; }

/* Ronda 18: paso final del checkout simulado -- la tarjeta cream "se abre" a un panel oscuro con
   el mismo lenguaje visual que el portal de bienvenida del dashboard (ver #eq-portal-transicion en
   page-acceso-vip.css), para que el salto de la portada al panel se sienta continuo en vez de dos
   pantallas de carga sueltas. Sin Font Awesome a propósito: esta página se mantiene liviana
   (ver el comentario de calendario_equinoccial_scripts en functions.php), así que el ícono es un
   spinner hecho sólo con CSS en vez de sumar una librería de íconos para un solo uso. */
.fp-form-ok {
    margin: -32px -26px; padding: 46px 26px 40px 26px; border-radius: 6px;
    background: radial-gradient(ellipse at center, #14132a 0%, #0a0918 70%);
    text-align: center;
}
/* Ronda 27: segunda pasada -- el pedido de agrandar la letra seguía sin notarse lo suficiente,
   subido de nuevo acá y en el aviso de abajo, más arriba de lo que se había tocado la vez pasada. */
.fp-form-ok p { font-size: 1.18rem; line-height: 1.6; margin: 0; color: #ecdcc0; }
.fp-form-ok .fp-ok-email-aviso { font-size: 1.08rem; line-height: 1.55; color: rgba(236,220,192,0.92); margin-top: 14px; }
.fp-form-ok .fp-btn { margin-top: 22px; }
.fp-ok-nucleo {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px auto; position: relative;
    background: rgba(226, 183, 101, 0.1); border: 1px solid rgba(226, 183, 101, 0.4);
    box-shadow: 0 0 30px rgba(226, 183, 101, 0.35);
    animation: fpOkPulso 2.2s ease-in-out infinite;
}
.fp-ok-nucleo::before {
    content: ''; position: absolute; inset: 7px; border-radius: 50%;
    border: 2px solid transparent; border-top-color: #e2b765; border-right-color: #e2b765;
    animation: fpOkGira 1s linear infinite;
}
@keyframes fpOkPulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes fpOkGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .fp-ok-nucleo, .fp-ok-nucleo::before { animation: none; }
}

/* Ronda 18: paso 2 del modal (pago simulado, activación automática). */
.fp-modal-pasos { display: flex; gap: 18px; margin: 0 0 18px 0; }
.fp-modal-paso { font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(27,42,68,0.35); padding-bottom: 6px; border-bottom: 2px solid transparent; }
.fp-modal-paso.activo { color: #1b2a44; border-bottom-color: #c9a24e; }
.fp-pago-resumen { font-family: 'Cinzel', serif; font-size: 0.95rem; letter-spacing: 0.5px; color: #1b2a44; background: rgba(201,162,78,0.18); border: 1px solid rgba(201,162,78,0.4); border-radius: 3px; padding: 10px 14px; margin: 0 0 20px 0; text-align: center; }
/* Ronda 23: caja del Payment Element de Stripe.js -- mismo look (borde, radio, fondo) que los
   inputs de .fp-modal para que no desentone, aunque el contenido de adentro lo dibuja Stripe. */
#fp-payment-element { padding: 13px; border: 1px solid rgba(27,42,68,0.25); border-radius: 3px; background: rgba(255,255,255,0.6); margin-bottom: 20px; }
.fp-pago-volver { display: block; width: 100%; margin-top: 10px; background: none; border: none; font-family: 'EB Garamond', Georgia, serif; font-size: 0.95rem; color: rgba(27,42,68,0.6); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fp-pago-volver:hover { color: #1b2a44; }
.fp-pago-seguro { text-align: center; font-size: 0.8rem; color: rgba(27,42,68,0.55); margin: 14px 0 0 0; letter-spacing: 0.3px; }

/* ---------- responsive (tablet / desktop) ---------- */
@media (min-width: 640px) {
    #eq-fp .fp-hero-sub { font-size: 2.3rem; }
    #eq-fp .fp-hero-ctas { flex-direction: row; justify-content: center; }
    #eq-fp .fp-grid-herr { grid-template-columns: repeat(2, 1fr); }
    #eq-fp .fp-grid-pasos { grid-template-columns: repeat(3, 1fr); }
    #eq-fp .fp-grid-dif { grid-template-columns: repeat(2, 1fr); }
    #eq-fp .fp-grid-faq { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    #eq-fp .fp-hero-sub { font-size: 2.85rem; }
    #eq-fp .fp-grid-herr { grid-template-columns: repeat(3, 1fr); }
    #eq-fp .fp-grid-dif { grid-template-columns: repeat(4, 1fr); }
    /* Ronda 22: con el 4to plan (Formación Equinox 13) se pasa de 3 a 2 columnas en tablet --
       3+1 dejaba una tarjeta sola y descolgada en la fila de abajo. A pantalla completa (1200px+,
       más abajo) sí entran las 4 en una sola fila. */
    #eq-fp .fp-grid-planes { grid-template-columns: repeat(2, 1fr); max-width: none; align-items: stretch; }
    #eq-fp .fp-plan-destacado { transform: translateY(-10px); }
    #eq-fp .fp-plan-destacado:hover { transform: translateY(-13px); }
}
@media (min-width: 1200px) {
    #eq-fp .fp-grid-planes { grid-template-columns: repeat(4, 1fr); }
}

/* Ronda 12 (23/09): si alguien vuelve a esta portada desde dentro de la app ya instalada, esta
   barra (sticky, top:0) necesita el mismo resguardo del notch que .app-topbar del dashboard --
   nunca se ve en el navegador normal, ahí "display-mode" nunca es "standalone". Requiere
   viewport-fit=cover en header.php (Ronda 12), compartido por todo el sitio. */
@media (display-mode: standalone) {
    #eq-fp .fp-topbar { padding-top: calc(16px + env(safe-area-inset-top)); }
}

/* =============================================================================================
   RONDA 21 — SISTEMA TIPOGRÁFICO "PREMIUM" + JERARQUÍA DE CTA + NUEVAS SECCIONES
   Este bloque va al final a propósito: pisa (misma especificidad, más abajo) los tamaños sueltos
   de las rondas anteriores con una escala única y fluida (clamp), para que la página se lea
   grande en el celular y con presencia en escritorio sin saltos bruscos entre anchos.
   Escala (celular → escritorio):
     H1 hero .......... 36px → 64px      H2 sección ...... 29px → 44px
     H3 tarjeta ....... 21px → 25px      Texto base ...... 20px → 21.6px (EB Garamond, interlineado 1.7)
     Bajada / lead .... 21px → 25px      Etiquetas/badges  13.6px (Cinzel, espaciado 3px)
     Botones .......... 17.6px, alto mínimo 60px
   Espaciado: secciones 72px arriba/abajo en celular, 120px en escritorio; márgenes laterales de
   22px en celular y 40px en escritorio; párrafos largos limitados a ~68 caracteres por línea.
   ============================================================================================= */
#eq-fp { font-size: 1.25rem; line-height: 1.7; }
#eq-fp .fp-wrap { max-width: 1180px; padding: 0 22px; }
#eq-fp p { font-size: inherit; }
#eq-fp strong { color: var(--eq-oro-claro); font-weight: 600; }
#eq-fp .fp-herramientas strong, #eq-fp .fp-como strong, #eq-fp .fp-faq strong { color: #8a6420; }

#eq-fp h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.75rem); line-height: 1.25; letter-spacing: 0.5px; }
#eq-fp h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); line-height: 1.3; letter-spacing: 0.4px; }

/* Todas las secciones respiran igual */
#eq-fp .fp-verdad13, #eq-fp .fp-ecosistema, #eq-fp .fp-gana, #eq-fp .fp-signo-gratis, #eq-fp .fp-equipo,
#eq-fp .fp-herramientas, #eq-fp .fp-planes, #eq-fp .fp-como, #eq-fp .fp-faq, #eq-fp .fp-cta-final {
    padding-top: clamp(72px, 4rem + 4vw, 120px); padding-bottom: clamp(72px, 4rem + 4vw, 120px);
}
#eq-fp .fp-ecosistema h2, #eq-fp .fp-herramientas h2, #eq-fp .fp-planes h2, #eq-fp .fp-como h2, #eq-fp .fp-faq h2, #eq-fp .fp-gana h2 {
    font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.75rem); letter-spacing: 0.5px; max-width: 860px; margin: 0 auto 22px auto; text-align: center;
}

/* ---------- topbar / marca ---------- */
#eq-fp .fp-topbar { padding: 14px 22px; }
#eq-fp .fp-marca { display: flex; flex-direction: column; line-height: 1.15; }
#eq-fp .fp-marca-nombre { font-family: var(--eq-titulo); font-size: 1.2rem; letter-spacing: 3.5px; color: var(--eq-luz); font-weight: 700; white-space: nowrap; }
#eq-fp .fp-logo .fp-marca-nombre b { display: inline; color: var(--eq-oro-claro); font-size: inherit; letter-spacing: inherit; }
#eq-fp .fp-marca-eslogan { display: none; font-family: var(--eq-lectura); font-style: italic; font-size: 0.95rem; letter-spacing: 0.3px; color: var(--eq-oro); margin-top: 3px; }
@media (min-width: 560px) { #eq-fp .fp-marca-eslogan { display: block; } }
#eq-fp .fp-ingresar { font-size: 1.02rem; padding: 10px 18px; }

/* ---------- botones: jerarquía ----------
   Principal (comprar) = dorado lleno. Secundario (probar gratis) = mismo tamaño, mismo alto,
   misma tipografía, con borde dorado de 2px y fondo translúcido: casi el mismo protagonismo,
   pero se distingue enseguida cuál es la acción de compra. En el celular los dos van a lo ancho,
   uno debajo del otro; en pantallas anchas van lado a lado con el mismo ancho. */
#eq-fp .fp-btn { font-size: 1.05rem; letter-spacing: 1.2px; padding: 16px 28px; border-radius: 4px; }
#eq-fp .fp-btn-xl {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 64px; font-size: 1.1rem; padding: 14px 30px; line-height: 1.25;
}
#eq-fp .fp-btn-sec {
    background: rgba(201, 162, 78, 0.08); color: var(--eq-oro-claro); border: 2px solid var(--eq-oro);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
#eq-fp .fp-btn-sec:hover { background: rgba(201, 162, 78, 0.18); color: var(--eq-luz); transform: translateY(-1px); }
#eq-fp .fp-btn-mini { display: block; font-family: var(--eq-lectura); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.6px; text-transform: none; color: var(--eq-oro); margin-bottom: 2px; }
#eq-fp .fp-hero-ctas { display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 440px; margin: 0 auto; }
#eq-fp .fp-hero-ctas .fp-btn { width: 100%; min-height: 74px; }
@media (min-width: 720px) {
    #eq-fp .fp-hero-ctas { flex-direction: row; max-width: 760px; gap: 18px; }
    #eq-fp .fp-hero-ctas .fp-btn { flex: 1 1 0; }
}
#eq-fp .fp-centro { text-align: center; margin-top: 44px; }
#eq-fp .fp-centro .fp-btn { min-width: min(100%, 420px); }

/* ---------- hero ---------- */
#eq-fp .fp-hero { padding: clamp(64px, 3rem + 6vw, 140px) 0 clamp(64px, 3rem + 5vw, 120px) 0; }
#eq-fp .fp-hero-badge { font-size: 0.85rem; letter-spacing: 3px; padding: 9px 20px; margin-bottom: 26px; }
#eq-fp .fp-hero-sub { font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4rem); line-height: 1.15; letter-spacing: 0.5px; max-width: 900px; margin: 0 auto 26px auto; }
#eq-fp .fp-hero h1 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem); line-height: 1.6; max-width: 760px; margin: 0 auto 40px auto; }
#eq-fp .fp-hero-tagline { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); letter-spacing: 4px; margin: 0 auto 40px auto; }
#eq-fp .fp-hero-desc { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); max-width: 700px; margin: 30px auto 0 auto; }
#eq-fp .fp-hero-confianza { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
/* Ronda 39d (fix de bug reportado): antes era un <p> con puntos "·" como separador, sin ningún
   marcador visual -- pegado debajo de los dos botones, se leía ambiguo ("no se sabe si es botón
   o qué"). Ahora es una lista con el mismo tilde dorado que ya usa .fp-plan-lista li, para que se
   lea inequívocamente como garantías, nunca como algo clickeable. */
#eq-fp .fp-hero-confianza { list-style: none; margin: 22px auto 0 auto; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#eq-fp .fp-hero-confianza li { font-size: 1rem; color: var(--eq-luz-dim); letter-spacing: 0.3px; padding-left: 20px; position: relative; }
#eq-fp .fp-hero-confianza li::before { content: '✓'; position: absolute; left: 0; color: var(--eq-oro); }


/* ---------- la verdad del 13 ---------- */
/* Ronda 42: ídem Ecosistema/CTA final/Planes -- se saca el navy sólido para que el fondo interactivo
   se vea acá también. */
#eq-fp .fp-verdad13 { background: transparent; border-top: 1px solid var(--eq-oro-linea); text-align: center; position: relative; overflow: hidden; }
#eq-fp .fp-verdad13-num {
    font-family: var(--eq-titulo); font-weight: 700; font-size: clamp(5rem, 3rem + 10vw, 10rem); line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px var(--eq-oro); opacity: 0.85; margin-bottom: 18px;
}
#eq-fp .fp-verdad13 h2 { max-width: 820px; margin: 0 auto 34px auto; }
#eq-fp .fp-verdad13-texto { max-width: 62ch; margin: 0 auto; text-align: left; }
/* Ronda 39e: layout de 2 columnas en desktop (numeral + título fijos a la izquierda, párrafos a
   la derecha) -- rompe la sensación de "pared de texto" con estructura, sin tocar el copy ya
   renegociado. En mobile ".fp-verdad13-grid" queda en block (sin grid), así que el numeral y el
   título de .fp-verdad13-eyebrow-col heredan el "text-align: center" de la sección igual que
   antes de este cambio. */
@media (min-width: 860px) {
    #eq-fp .fp-verdad13-grid { display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: start; text-align: left; }
    #eq-fp .fp-verdad13-eyebrow-col { position: sticky; top: 120px; text-align: left; }
    #eq-fp .fp-verdad13-num { margin: 0 0 14px 0; }
    #eq-fp .fp-verdad13 h2 { text-align: left; margin: 0; max-width: none; }
    #eq-fp .fp-verdad13-texto { margin: 0; }
}
/* Ronda 39b (legibilidad): los 3 párrafos venían al mismo tamaño de letra que el resto del
   cuerpo del sitio (1.2rem heredado) uno atrás del otro, sin ninguna pausa visual -- se leía como
   una pared de texto. Se bajó un poco el tamaño, se subió el interlineado y el espacio entre
   párrafos, para que cada idea respire por separado en vez de leerse como un bloque único. */
/* Ronda 39d: bajado a 1.05rem en la ronda anterior para dar más aire -- el cliente reportó
   después que en general la letra del sitio se lee chica, así que se sube a 1.15rem (todavía
   menor que el 1.2rem heredado por defecto, pero ya no el elemento de texto más chico de la
   página) y se mantiene el interlineado 1.75 que sí ayuda a la lectura. */
#eq-fp .fp-verdad13-texto p { color: var(--eq-luz-dim); font-size: 1.15rem; line-height: 1.75; margin: 0 0 28px 0; }
#eq-fp .fp-verdad13-remate { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem); line-height: 1.55; color: var(--eq-luz) !important; border-left: 2px solid var(--eq-oro); padding-left: 20px; font-style: italic; margin-bottom: 0; }

/* ---------- sistema de tarjetas unificado (Ronda 39e) ----------
   Ecosistema (.fp-dif), Qué ganás (.fp-gana-item) y Herramientas (.fp-herr, fondo papel, ver más
   abajo) usaban 3 lenguajes visuales distintos (tarjeta plana / borde izquierdo / ícono suelto).
   Ahora comparten el mismo ícono en chip circular dorado + borde + radio + elevación al pasar el
   mouse -- Herramientas mantiene su propia paleta porque vive sobre fondo claro (--eq-papel), el
   resto usa la paleta oscura. */
#eq-fp .fp-dif-ico, #eq-fp .fp-gana-ico {
    display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border-radius: 50%; background: rgba(201, 162, 78, 0.12); font-size: 1.3rem; color: var(--eq-oro);
    margin-bottom: 16px;
}

/* ---------- ecosistema ---------- */
/* Ronda 42: este override de desktop pisaba el "transparent" de más arriba con var(--eq-cielo) de
   nuevo -- había que sacarlo también acá, si no el fondo interactivo desaparecía sólo en desktop. */
#eq-fp .fp-ecosistema { background: transparent; border-top: none; }
#eq-fp .fp-ecosistema-sub { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem); max-width: 720px; margin: 0 auto 52px auto; }
#eq-fp .fp-grid-dif { gap: 20px; }
#eq-fp .fp-dif {
    text-align: left; padding: 30px 26px; border: 1px solid var(--eq-oro-linea); border-radius: 10px;
    background: rgba(255, 255, 255, 0.025); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
#eq-fp .fp-dif:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28); border-color: rgba(201, 162, 78, 0.6); }
#eq-fp .fp-dif-destacado { border-color: var(--eq-oro); background: rgba(201, 162, 78, 0.08); }
#eq-fp .fp-dif h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); margin-bottom: 12px; }
#eq-fp .fp-dif p { font-size: 1.2rem; line-height: 1.65; }
@media (min-width: 640px) { #eq-fp .fp-grid-dif { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { #eq-fp .fp-grid-dif { grid-template-columns: repeat(3, 1fr); } }

/* ---------- qué ganás ---------- */
#eq-fp .fp-gana { background: linear-gradient(180deg, #0c1520, var(--eq-cielo)); border-top: 1px solid var(--eq-oro-linea); }
#eq-fp .fp-gana h2 { margin-bottom: 48px; }
#eq-fp .fp-grid-gana { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
#eq-fp .fp-gana-item {
    padding: 30px 26px; border: 1px solid var(--eq-oro-linea); border-radius: 10px; background: rgba(12, 21, 30, 0.6);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
#eq-fp .fp-gana-item:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28); border-color: rgba(201, 162, 78, 0.6); }
#eq-fp .fp-gana-item h3 { margin-bottom: 10px; color: var(--eq-oro-claro); }
#eq-fp .fp-gana-item p { margin: 0; color: var(--eq-luz-dim); font-size: 1.2rem; line-height: 1.65; }
@media (min-width: 760px) { #eq-fp .fp-grid-gana { grid-template-columns: repeat(2, 1fr); gap: 26px; } }

/* ---------- signo gratis ---------- */
#eq-fp .fp-signo-caja { max-width: 600px; }
#eq-fp .fp-signo-gratis h2 { margin-bottom: 22px; }
#eq-fp .fp-signo-sub, #eq-fp .fp-signo-upsell { font-size: 1.25rem; line-height: 1.7; }
#eq-fp .fp-signo-opciones li { font-size: 1.1rem; }
#eq-fp .fp-signo-identifica p { font-size: 1.08rem; }
#eq-fp .fp-form-gratis label { font-size: 0.9rem; }
#eq-fp .fp-form-gratis input { font-size: 1.25rem; padding: 15px 15px; }
#eq-fp .fp-signo-real { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.5rem); }
#eq-fp .fp-signo-antes { font-size: 1.25rem; }
#eq-fp .fp-signo-resultado .fp-btn, #eq-fp .fp-form-gratis .fp-btn { min-height: 60px; font-size: 1.1rem; }

/* ---------- equipo ---------- */
#eq-fp .fp-equipo h2 { max-width: 760px; margin-bottom: 24px; }
#eq-fp .fp-equipo p { font-size: 1.25rem; line-height: 1.7; max-width: 68ch; }
#eq-fp .fp-equipo-tags span { font-size: 0.95rem; padding: 8px 16px; }

/* ---------- herramientas / cómo / faq (fondo papel) ---------- */
#eq-fp .fp-herramientas h2, #eq-fp .fp-como h2, #eq-fp .fp-faq h2 { margin-bottom: 22px; }
#eq-fp .fp-herr-sub { text-align: center; color: var(--eq-tinta-dim); max-width: 640px; margin: 0 auto 48px auto; font-size: 1.2rem; line-height: 1.6; }
#eq-fp .fp-como h2, #eq-fp .fp-faq h2 { margin-bottom: 48px; }
#eq-fp .fp-herr { padding: 30px 26px; }
#eq-fp .fp-herr h3, #eq-fp .fp-paso h3, #eq-fp .fp-faq-item h3 { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem); margin-bottom: 10px; }
#eq-fp .fp-herr p, #eq-fp .fp-paso p, #eq-fp .fp-faq-item p { font-size: 1.2rem; line-height: 1.65; }
#eq-fp .fp-paso-n { width: 50px; height: 50px; font-size: 1.3rem; }
#eq-fp .fp-grid-faq { gap: 34px 40px; }

/* ---------- planes ---------- */
#eq-fp .fp-planes-sub { font-size: 1.25rem; max-width: 760px; margin-bottom: 56px; }
#eq-fp .fp-grid-planes { max-width: 420px; }
@media (min-width: 900px) { #eq-fp .fp-grid-planes { max-width: none; } }
#eq-fp .fp-plan { padding: 36px 30px; }
#eq-fp .fp-plan h3 { font-size: 1.45rem; }
#eq-fp .fp-plan-precio { font-size: 2.7rem; }
#eq-fp .fp-plan-cuota, #eq-fp .fp-plan-lista li { font-size: 1.2rem; }
#eq-fp .fp-plan-cinta { font-size: 0.8rem; padding: 6px 14px; }
#eq-fp .fp-btn-plan { min-height: 58px; font-size: 1.05rem; }
/* Ronda 39e (CRO, reducción de riesgo): línea de garantía, más chica que la de dudas para no
   competir con ella, pero con el mismo tilde dorado que ya se usa en .fp-plan-lista li. */
#eq-fp .fp-planes-garantia { text-align: center; margin: 44px auto 0 auto; color: var(--eq-luz-dim); font-size: 1.05rem; letter-spacing: 0.3px; }
#eq-fp .fp-planes-duda { text-align: center; margin: 14px auto 0 auto; color: var(--eq-luz-dim); font-size: 1.2rem; }
#eq-fp .fp-planes-duda a { color: var(--eq-oro-claro); border-bottom: 1px solid var(--eq-oro-linea); }

/* ---------- plan "Formación Equinox 13" dentro de la grilla de planes ----------
   Ronda 22: antes se vendía aparte, en su propia sección, con un botón verde de WhatsApp -- el
   cliente lo sacó porque competía visualmente con el resto y complicaba la decisión de compra.
   Ahora es un plan más de la grilla, con el mismo botón "Elegir" que todos, distinguido con un
   acento violeta (en vez del dorado de "Más elegido", para no confundir cuál es el recomendado
   para la mayoría con cuál es el premium) y una lista de bullets más larga (sus 'extras'). */
#eq-fp {
    --eq-premium: #9c8ce0;
    --eq-premium-claro: #b8adf0;
}
#eq-fp .fp-plan-formacion { border-color: var(--eq-premium); box-shadow: 0 0 0 1px var(--eq-premium), 0 20px 45px rgba(0, 0, 0, 0.35); }
#eq-fp .fp-plan-cinta-formacion { background: var(--eq-premium); color: #16222f; }
#eq-fp .fp-plan-lista li.fp-plan-lista-extra { color: var(--eq-premium-claro); }
#eq-fp .fp-plan-lista li.fp-plan-lista-extra::before { content: '✷'; color: var(--eq-premium); }
#eq-fp .fp-btn-plan-formacion { border-color: var(--eq-premium); color: var(--eq-premium-claro); }
#eq-fp .fp-btn-plan-formacion:hover { background: var(--eq-premium); color: #16222f; }

/* ---------- cta final ---------- */
#eq-fp .fp-cta-eslogan { font-family: var(--eq-lectura); font-style: italic; color: var(--eq-oro); font-size: 1.3rem; margin: 0 0 10px 0; }
#eq-fp .fp-cta-final h2 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3rem); margin-bottom: 36px; }

/* ---------- WhatsApp flotante ----------
   Queda por debajo del modal de compra (z-index 300 con fondo oscuro), así no compite con el
   formulario de pago. */
.fp-wa-flotante {
    position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 200;
    width: 58px; height: 58px; border-radius: 50%; background: #1f9d55; color: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease;
}
.fp-wa-flotante:hover { transform: scale(1.06); }

/* ---------- barra de CTA fija (sólo mobile) ----------
   Ronda 39d (CRO): el cliente pidió que el botón de compra esté siempre visible, no sólo en la
   primera pantalla. En desktop el hero ya resuelve esto (los dos CTA quedan arriba, la página no
   es tan larga en proporción a la pantalla), así que la barra queda oculta ahí -- reservada para
   mobile, donde sí hace falta bajar hasta el hero para volver a ver un botón. */
.fp-cta-sticky {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
    align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px;
    background: rgba(17, 28, 39, 0.96); backdrop-filter: blur(6px);
    border-top: 1px solid var(--eq-oro-linea); box-shadow: 0 -10px 26px rgba(0,0,0,0.3);
    opacity: 0; pointer-events: none; transform: translateY(100%); transition: opacity 0.25s ease, transform 0.25s ease;
}
.fp-cta-sticky.visible { opacity: 1; pointer-events: auto; transform: none; }
/* Ronda 39h: se sacó el textito al lado del botón (ver comentario en front-page.php) -- ahora es
   un solo botón que ocupa todo el ancho de la barra, más legible en pantallas angostas. */
.fp-cta-sticky .fp-btn { flex: 1 1 auto; width: 100%; text-align: center; padding: 13px 18px; font-size: 0.95rem; white-space: nowrap; }
/* Ronda 39d: la barra sólo se activa por debajo del breakpoint de tablet/desktop (640px, mismo
   corte que el resto del archivo -- ver "@media (min-width: 640px)" más arriba). Sin esta regla
   "display: flex" la barra queda con "display: none" fijo (definido arriba) y nunca aparece,
   aunque el JS le agregue la clase .visible (esa clase sólo controla la animación de entrada/salida
   vía opacity + transform, no la visibilidad de base). También subimos el botón flotante de
   WhatsApp para que no quede tapado detrás de la barra una vez que ambos están visibles a la vez
   (la regla más específica de @media (max-width: 480px), más abajo, pisa este mismo valor para
   pantallas chicas -- se deja igual en las dos para que no haya un salto de posición al cruzar
   ese breakpoint intermedio). */
@media (max-width: 639px) {
    .fp-cta-sticky { display: flex; }
    .fp-wa-flotante { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

/* ---------- modal: tipografía y campo de contraseña ---------- */
.fp-modal { max-width: 440px; padding: 34px 28px; }
.fp-modal h3 { font-size: 1.45rem; }
.fp-modal-sub { font-size: 1.15rem; }
.fp-modal label { font-size: 0.85rem; }
.fp-modal .fp-btn { min-height: 58px; font-size: 1.05rem; }
.fp-modal-paso { font-size: 0.75rem; }
.fp-form-msg { font-size: 1rem; }
.fp-modal label[for="fp-clave"] { margin-bottom: 6px; }
.fp-clave-campo { position: relative; }
.fp-clave-campo input { padding-right: 84px; margin-top: 0; }
.fp-clave-ver {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    background: none; border: none; font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 1.2px; text-transform: uppercase;
    color: rgba(27, 42, 68, 0.75); cursor: pointer; padding: 8px 8px;
}
.fp-clave-extra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 16px 0; font-size: 0.98rem; color: rgba(27, 42, 68, 0.65); }
.fp-clave-generar { background: none; border: none; padding: 4px 0; font-family: 'EB Garamond', Georgia, serif; font-size: 1rem; color: #8a6420; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fp-clave-nota { font-size: 0.98rem; line-height: 1.45; color: #1b2a44; background: rgba(201, 162, 78, 0.18); border: 1px solid rgba(201, 162, 78, 0.45); border-radius: 3px; padding: 10px 12px; margin: -4px 0 16px 0; }
.fp-terminos-campo { display: flex; align-items: flex-start; gap: 8px; font-size: 0.95rem; color: rgba(27, 42, 68, 0.75); margin: 4px 0 18px 0; cursor: pointer; }
.fp-terminos-campo input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.fp-terminos-campo a { color: #8a6420; text-decoration: underline; text-underline-offset: 2px; }
/* Ronda 27: ACÁ estaba el motivo real por el que agrandar la letra de .fp-form-ok p no se notaba --
   esta regla, más abajo en el archivo, pisaba con un tamaño más chico (1.12rem) la que se define
   arriba (ver "Ronda 27: segunda pasada" cerca de .fp-form-ok, ahora en 1.18rem). Dos reglas para
   el mismo selector en el mismo archivo, la de más abajo gana siempre -- se saca de acá para que
   quede un solo lugar (arriba) definiendo este tamaño, y que la próxima vez que se toque no vuelva
   a pisarse solo. */

@media (min-width: 900px) {
    #eq-fp .fp-wrap { padding: 0 40px; }
    #eq-fp { font-size: 1.35rem; }
}

/* Enlaces con forma de botón: sin subrayado (style.css del tema no lo saca). */
#eq-fp .fp-btn, #eq-fp .fp-ingresar, .fp-modal .fp-btn, .fp-wa-flotante { text-decoration: none; }
/* El modal vive fuera de #eq-fp: el botón principal necesita su propio estilo dorado (antes
   quedaba como un botón gris por defecto del navegador). */
.fp-modal .fp-btn { display: block; font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 1.2px; border: none; border-radius: 4px; padding: 16px 24px; cursor: pointer; }
.fp-modal .fp-btn-primary { background: linear-gradient(180deg, #e3c27a, #c9a24e); color: #16222f; box-shadow: 0 8px 20px rgba(201, 162, 78, 0.3); }
.fp-modal .fp-btn-primary:hover { background: linear-gradient(180deg, #edd08c, #d4ad5c); }
.fp-modal .fp-btn-primary:disabled { opacity: 0.7; cursor: wait; }
@media (max-width: 480px) {
    #eq-fp .fp-hero { padding-top: 44px; }
    #eq-fp .fp-hero-badge { letter-spacing: 2px; font-size: 0.78rem; padding: 8px 16px; margin-bottom: 20px; }
    .fp-wa-flotante { width: 54px; height: 54px; right: 14px; bottom: calc(82px + env(safe-area-inset-bottom)); }
    /* Ronda 27: menos aire alrededor del modal en pantallas chicas, para dejarle más alto real al
       contenido (el paso de pago con Link es el que más espacio necesita) antes de tener que entrar
       en el scroll interno de .fp-modal de arriba. */
    .fp-modal-fondo { padding: 10px; }
    .fp-modal { padding: 24px 18px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
}
.fp-wa-flotante { opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; }
.fp-wa-flotante.visible { opacity: 1; pointer-events: auto; transform: none; }

/* =============================================================================================
   RONDA 39f — REDISEÑO DE CONVERSIÓN, VALIDADO CON CAPTURAS (390px celular / 1440px desktop)
   Este bloque va AL FINAL a propósito: pisa lo anterior del hero, la sección del fundador, los
   planes y las tarjetas. Reglas de oro que se chequearon en las capturas antes de subir:
   1) Celular: los DOS botones del hero se ven en la primera pantalla, sin scrollear.
   2) Diego es protagonista: retrato en arco grande, con nombre + seguidores sobre la foto.
   3) Nada redundante arriba del botón (se sacó la insignia repetida del hero y, en celular, la
      franja de autoridad, que ya se repite dentro del retrato).
   4) Ningún botón con el texto partido en dos líneas en desktop.
   ============================================================================================= */

/* ---------- hero (Ronda 39h): SOLO TEXTO, sin foto ----------
   Se sacó la foto de fondo de la Ronda 39g (pedido explícito del cliente). Queda el mismo fondo
   oscuro con estrellitas del hero original, centrado en mobile y a la izquierda en desktop. */
/* Ronda 40: el "transparent" de acá es donde se deja ver el fondo interactivo dentro del hero
   (ver el comentario grande en la regla de #eq-fp, arriba de todo, sobre por qué #eq-fp mismo
   tiene que quedar transparent para que esto funcione en cualquier sección). */
#eq-fp .fp-hero { position: relative; overflow: hidden; isolation: isolate; padding: 0; text-align: center; background: transparent; }
#eq-fp .fp-hero-contenido { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 56px; }
#eq-fp .fp-hero-texto { display: flex; flex-direction: column; align-items: center; }
#eq-fp .fp-hero h1, #eq-fp .fp-hero-tagline, #eq-fp .fp-hero-confianza li, #eq-fp .fp-hero-desc { text-shadow: 0 1px 14px rgba(8, 14, 20, 0.95); }
#eq-fp .fp-hero h1 { font-size: 0.9rem; line-height: 1.5; letter-spacing: 0.6px; color: var(--eq-luz-dim); max-width: 32ch; margin: 0 0 10px 0; }
#eq-fp .fp-hero-sub {
    font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.2rem); line-height: 1.14; letter-spacing: 0.3px; max-width: none; margin: 0 0 12px 0;
    background: linear-gradient(180deg, #f4e8d0 30%, #dcb86c); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 12px rgba(8, 14, 20, 0.85));
}
#eq-fp .fp-hero-tagline { font-size: 0.9rem; letter-spacing: 3px; margin: 0 0 22px 0; color: var(--eq-oro-claro); }
#eq-fp .fp-hero-texto .fp-hero-ctas { flex-direction: column; width: 100%; max-width: 420px; gap: 10px; margin: 0; }
#eq-fp .fp-hero-texto .fp-hero-ctas .fp-btn { flex: none; min-height: 60px; font-size: 1rem; letter-spacing: 0.8px; padding: 12px 22px; }
#eq-fp .fp-hero-texto .fp-btn-primary { box-shadow: 0 10px 30px rgba(201, 162, 78, 0.35); }
#eq-fp .fp-hero-confianza { list-style: none; padding: 0; margin: 16px 0 0 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; }
#eq-fp .fp-hero-confianza li { font-size: 0.92rem; padding-left: 18px; }
#eq-fp .fp-hero-desc { font-size: 1.08rem; line-height: 1.65; max-width: 60ch; margin: 24px 0 0 0; }
/* Ronda 39h: calculadora "Tu signo real" embebida en el hero -- sólo aparece en desktop (ver
   media query de abajo). En mobile no se pinta: ya está el botón "Descubrí tu signo real" del
   hero, que baja directo a la copia de siempre en #signo-gratis más abajo en la página. */
#eq-fp .fp-hero-calculadora { display: none; }
@media (min-width: 960px) {
    #eq-fp .fp-hero {
        min-height: min(760px, calc(100vh - 110px)); display: flex; align-items: center;
        /* Ronda 40: ANTES esto terminaba en "var(--eq-cielo)" sólido, con 4 puntitos fijos dibujados
           a mano por CSS -- un fondo estrellado ESTÁTICO. Ahora que hay un fondo interactivo de
           verdad detrás de toda la portada (el canvas #fp-fondo-interactivo, ver front-page.php),
           ese estrellado fijo quedaba tapándolo justo en la sección más importante de la página.
           Se saca el relleno sólido y los puntitos fijos, y queda sólo un velo oscuro semitransparente
           del lado izquierdo (donde está el texto) para asegurar contraste de lectura sea cual sea
           el momento de la animación de fondo -- el lado derecho no lo necesita porque ahí la
           calculadora tiene su propia tarjeta opaca. */
        background: radial-gradient(ellipse 70% 90% at 0% 50%, rgba(9, 15, 22, 0.72), transparent 70%);
        border-bottom: 1px solid var(--eq-oro-linea);
    }
    /* Antes .fp-hero-texto sola tenía "max-width: min(620px, 54%)" para dejarle lugar a la foto
       de fondo a la derecha. Sacada la foto (Ronda 39h), ese 54% quedaba como espacio vacío sin
       volver a centrar el texto. Ahora es una grilla de 2 columnas: el texto a la izquierda y,
       en el lugar que ocupaba la foto, la calculadora de signo real -- así ese espacio se usa
       para algo (pedido del cliente) en vez de recentrar el texto solo. */
    #eq-fp .fp-hero-contenido {
        width: 100%; padding-top: 64px; padding-bottom: 72px;
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 40px; align-items: center;
    }
    #eq-fp .fp-hero-texto { max-width: none; align-items: flex-start; text-align: left; }
    #eq-fp .fp-hero h1 { font-size: 1.05rem; max-width: 40ch; margin-bottom: 14px; }
    #eq-fp .fp-hero-sub { font-size: clamp(2.4rem, 1.2rem + 2.2vw, 3.1rem); margin-bottom: 14px; }
    #eq-fp .fp-hero-tagline { font-size: 1.1rem; letter-spacing: 4px; margin-bottom: 30px; }
    #eq-fp .fp-hero-texto .fp-hero-ctas { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; max-width: none; width: auto; gap: 14px; }
    #eq-fp .fp-hero-texto .fp-hero-ctas .fp-btn { flex: 0 0 auto; width: auto; white-space: nowrap; min-height: 64px; padding: 12px 26px; }
    #eq-fp .fp-hero-confianza { justify-content: flex-start; margin-top: 18px; }
    #eq-fp .fp-hero-desc { text-align: left; max-width: 56ch; font-size: 1.1rem; }

    /* La calculadora en sí: versión compacta de .fp-signo-caja (misma tarjeta que #signo-gratis
       más abajo, pero con menos padding/tamaño de letra para caber al lado del texto del hero). */
    #eq-fp .fp-hero-calculadora { display: block; }
    #eq-fp .fp-signo-caja-hero {
        max-width: 400px; margin: 0; padding: 26px 24px; text-align: left;
        border: 1px solid var(--eq-oro-linea); border-radius: 16px;
        background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 78, 0.16), transparent 65%), rgba(12, 21, 30, 0.78);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
    }
    #eq-fp .fp-signo-caja-hero h2 { font-size: 1.25rem; letter-spacing: 0.3px; margin: 0 0 10px 0; }
    #eq-fp .fp-signo-caja-hero .fp-signo-sub { font-size: 0.95rem; margin-bottom: 16px; }
    #eq-fp .fp-signo-caja-hero .fp-form-gratis label { margin-bottom: 12px; font-size: 0.72rem; }
    #eq-fp .fp-signo-caja-hero .fp-form-gratis input { padding: 11px 12px; font-size: 1.05rem; }
    #eq-fp .fp-signo-caja-hero .fp-btn { min-height: 54px; font-size: 1rem; }
    #eq-fp .fp-signo-caja-hero .fp-signo-real, #eq-fp .fp-signo-caja-hero .fp-signo-antes { font-size: 0.98rem; }
    #eq-fp .fp-signo-caja-hero .fp-signo-upsell { font-size: 0.92rem; }
    #eq-fp .fp-signo-caja-hero .fp-signo-info summary { font-size: 0.86rem; }
    #eq-fp .fp-signo-caja-hero .fp-signo-info p { font-size: 0.84rem; }
    #eq-fp .fp-signo-caja-hero .fp-signo-identifica { padding: 12px 14px; gap: 8px; }
    #eq-fp .fp-signo-caja-hero .fp-signo-identifica p { font-size: 0.86rem; }

    /* Ronda 46: el resultado en el hero se veía "chico y sobre un costado" (feedback directo del
       cliente) porque compartía fila con el texto del hero en una grilla de 2 columnas angosta.
       Apenas hay resultado (".fp-signo-resultado--revelado", agregada por el JS al calcular), el
       grid pasa a 1 sola columna a todo el ancho y la tarjeta se agranda -- el texto del hero
       queda arriba, apilado, en vez de compitiendo por espacio al lado. */
    #eq-fp .fp-hero-contenido:has(.fp-signo-resultado--revelado) { grid-template-columns: 1fr; }
    #eq-fp .fp-hero-contenido:has(.fp-signo-resultado--revelado) .fp-signo-caja-hero {
        max-width: 720px; margin: 0 auto; padding: 34px 40px; text-align: left;
    }
    #eq-fp .fp-hero-contenido:has(.fp-signo-resultado--revelado) .fp-signo-caja-hero .fp-signo-real { font-size: 1.5rem; }
    #eq-fp .fp-hero-contenido:has(.fp-signo-resultado--revelado) .fp-signo-caja-hero .fp-signo-identifica p,
    #eq-fp .fp-hero-contenido:has(.fp-signo-resultado--revelado) .fp-signo-caja-hero .fp-signo-upsell,
    #eq-fp .fp-hero-contenido:has(.fp-signo-resultado--revelado) .fp-signo-caja-hero .fp-signo-info p {
        font-size: 0.95rem;
    }
}

/* ---------- quiénes somos (Ronda 39g): sobria, autoridad sin desviar el foco ---------- */
#eq-fp .fp-signo-gratis + .fp-equipo { padding-top: 0; }
#eq-fp .fp-equipo-caja {
    max-width: 900px; margin: 0 auto; text-align: center; padding: 38px 26px;
    border: 1px solid var(--eq-oro-linea); border-radius: 16px;
    /* Ronda 40 (v4): esta tarjeta era casi 100% transparente (pensada para la época en que el
       fondo era estático). Con el fondo interactivo ahora mucho más visible, quedaba compitiendo
       con el texto -- se le sube un fondo oscuro semitransparente (mismo criterio que --eq-panel
       en Planes) para que el texto se siga leyendo bien y el fondo se asome atenuado, no encima. */
    background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 78, 0.1), transparent 70%), rgba(9, 15, 22, 0.6);
}
#eq-fp .fp-equipo-caja h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin: 0 auto 16px auto; }
#eq-fp .fp-equipo-caja p { font-size: 1.12rem; line-height: 1.7; margin: 0 auto 22px auto; max-width: 64ch; }
#eq-fp .fp-equipo-tags span { font-size: 0.85rem; }

/* ---------- tarjetas: ícono + título en la misma fila (más compactas, en todos los anchos) ---------- */
#eq-fp .fp-dif, #eq-fp .fp-gana-item, #eq-fp .fp-herr { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; align-content: start; }
#eq-fp .fp-dif-ico, #eq-fp .fp-gana-ico, #eq-fp .fp-herr-ico { margin: 0; width: 42px; height: 42px; font-size: 1.2rem; }
#eq-fp .fp-dif h3, #eq-fp .fp-gana-item h3, #eq-fp .fp-herr h3 { margin: 0; }
#eq-fp .fp-dif p, #eq-fp .fp-gana-item p, #eq-fp .fp-herr p { grid-column: 1 / -1; margin: 14px 0 0 0; }

/* ---------- planes: 3 mensuales parejas + Formación ancha aparte ---------- */
#eq-fp .fp-plan-cinta { white-space: nowrap; }
#eq-fp .fp-plan-precio small { white-space: nowrap; margin-left: 4px; }
#eq-fp .fp-plan-ancho-wrap { max-width: 420px; margin: 40px auto 0 auto; }
@media (min-width: 900px) {
    #eq-fp .fp-grid-planes { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1060px; margin: 0 auto; gap: 24px; }
    #eq-fp .fp-plan-ancho-wrap { max-width: 1060px; margin-top: 48px; }
    #eq-fp .fp-plan-ancho {
        display: grid; grid-template-columns: 240px minmax(0, 1fr) 240px; grid-template-areas: "cabeza lista boton";
        column-gap: 40px; align-items: center; padding: 42px 40px 36px 40px;
    }
    #eq-fp .fp-plan-ancho .fp-plan-cabeza { grid-area: cabeza; }
    #eq-fp .fp-plan-ancho .fp-plan-cuota { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    #eq-fp .fp-plan-ancho .fp-plan-lista { grid-area: lista; margin: 0; gap: 8px; }
    #eq-fp .fp-plan-ancho .fp-plan-lista li { font-size: 1.08rem; }
    #eq-fp .fp-plan-ancho .fp-btn-plan { grid-area: boton; }
    #eq-fp .fp-plan-ancho:hover { transform: translateY(-3px); }
}
@media (min-width: 1200px) { #eq-fp .fp-grid-planes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- celular: más compacto ---------- */
@media (max-width: 639px) {
    #eq-fp .fp-topbar { padding: 10px 16px; }
    #eq-fp .fp-marca-nombre { font-size: 1.05rem; letter-spacing: 3px; }
    #eq-fp .fp-ingresar { font-size: 0.95rem; padding: 7px 14px; }
    #eq-fp .fp-verdad13, #eq-fp .fp-ecosistema, #eq-fp .fp-gana, #eq-fp .fp-signo-gratis,
    #eq-fp .fp-herramientas, #eq-fp .fp-planes, #eq-fp .fp-como, #eq-fp .fp-faq, #eq-fp .fp-cta-final {
        padding-top: 60px; padding-bottom: 60px;
    }
    #eq-fp .fp-dif, #eq-fp .fp-gana-item, #eq-fp .fp-herr { padding: 22px 20px; }
    #eq-fp .fp-dif p, #eq-fp .fp-gana-item p, #eq-fp .fp-herr p { font-size: 1.1rem; margin-top: 12px; }
}

/* ---------- planes: la línea "todas las herramientas, más:" de la Formación ---------- */
#eq-fp .fp-plan-lista li.fp-plan-lista-todo { padding-left: 0; color: var(--eq-luz); font-style: italic; }
#eq-fp .fp-plan-lista li.fp-plan-lista-todo::before { content: none; }

/* ---------- FAQ en acordeón (<details>) ---------- */
#eq-fp .fp-grid-faq { gap: 12px; align-items: start; }
#eq-fp details.fp-faq-item { border: 1px solid rgba(27, 42, 68, 0.18); border-radius: 10px; background: rgba(255, 255, 255, 0.35); padding: 0; transition: border-color 0.18s ease, background 0.18s ease; }
#eq-fp details.fp-faq-item[open] { border-color: rgba(201, 162, 78, 0.6); background: rgba(255, 255, 255, 0.55); }
#eq-fp .fp-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; }
#eq-fp .fp-faq-item summary::-webkit-details-marker { display: none; }
#eq-fp .fp-faq-item summary::after {
    content: '+'; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(27, 42, 68, 0.3); font-family: var(--eq-lectura); font-size: 1.2rem; line-height: 1; color: var(--eq-tinta); transition: transform 0.2s ease;
}
#eq-fp details.fp-faq-item[open] summary::after { transform: rotate(45deg); border-color: var(--eq-oro); color: #8a6420; }
#eq-fp .fp-faq-item summary h3 { margin: 0; font-size: clamp(1.1rem, 1.02rem + 0.3vw, 1.3rem); }
#eq-fp .fp-faq-item p { padding: 0 20px 20px 20px; margin: 0; }
#eq-fp .fp-faq h2 { margin-bottom: 36px; }
@media (min-width: 900px) { #eq-fp .fp-grid-faq { max-width: 1000px; margin: 0 auto; } }

/* ---------- celular: carruseles deslizables + plan recomendado primero ---------- */
@media (max-width: 639px) {
    /* Ecosistema y "Qué incluye tu acceso": 6 tarjetas cada una apiladas eran ~2000px de scroll
       en celular. Ahora se deslizan de costado (con la siguiente asomando, para que se entienda
       que hay más) -- mismo contenido, un cuarto del largo. */
    #eq-fp .fp-grid-dif, #eq-fp .fp-grid-herr {
        display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none;
        overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
        margin: 0 -22px; padding: 4px 22px 14px 22px; scroll-padding: 0 22px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    #eq-fp .fp-grid-dif::-webkit-scrollbar, #eq-fp .fp-grid-herr::-webkit-scrollbar { display: none; }
    #eq-fp .fp-grid-dif > *, #eq-fp .fp-grid-herr > * { scroll-snap-align: start; }
    #eq-fp .fp-herr-destacado { grid-column: auto; }
    #eq-fp .fp-herr:hover, #eq-fp .fp-dif:hover { transform: none; }
    /* el plan "Más elegido" primero en el celular: es el que se quiere que la mayoría vea antes */
    #eq-fp .fp-grid-planes { display: flex; flex-direction: column; }
    #eq-fp .fp-grid-planes .fp-plan-destacado { order: -1; }
}
/* "Qué incluye tu acceso" y "Cómo funciona" son dos secciones claras seguidas: sin el doble
   padding entre ambas se leen como un solo bloque, sin la franja vacía que quedaba en el medio. */
#eq-fp .fp-herramientas + .fp-como { padding-top: 0; }

/* =============================================================================================
   RONDA 39g — ajustes de la pasada visual con capturas
   ============================================================================================= */
/* "La verdad del 13": la columna del título era angosta (300px) y el H2 quedaba en 6 renglones. */
@media (min-width: 860px) {
    #eq-fp .fp-verdad13-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; }
    #eq-fp .fp-verdad13 h2 { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.22; }
}
/* FAQ en UNA columna: en dos columnas, al abrir una pregunta quedaba un hueco al lado. */
#eq-fp .fp-grid-faq { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; }
/* "Tu signo real gratis": se presenta como una herramienta (tarjeta), no como texto suelto. */
#eq-fp .fp-signo-caja {
    max-width: 640px; padding: 36px 26px 30px 26px; border: 1px solid var(--eq-oro-linea); border-radius: 16px;
    background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 78, 0.12), transparent 65%), rgba(12, 21, 30, 0.6);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
@media (min-width: 640px) { #eq-fp .fp-signo-caja { padding: 44px 44px 36px 44px; } }
@media (max-width: 639px) { #eq-fp .fp-signo-caja { padding: 30px 18px 24px 18px; } }
/* Ronda 46: una vez que hay resultado, la tarjeta se ensancha un poco -- el contenido de "por qué
   es tu signo" + la lista del ecosistema necesitan más aire del que pide sólo el formulario. La
   clase ".fp-signo-resultado--revelado" la agrega el JS al calcular (ver <script> más abajo). */
#eq-fp .fp-signo-caja:has(.fp-signo-resultado--revelado) { max-width: 760px; }
@media (min-width: 860px) { #eq-fp .fp-verdad13-eyebrow-col { position: static; } }

/* Ronda 59: contraseña dentro de las calculadoras "Tu signo real" (fondo oscuro) y aviso de emails */
#eq-fp .fp-form-gratis .fp-clave-campo { display: block; position: relative; }
#eq-fp .fp-form-gratis .fp-clave-campo input { padding-right: 84px; margin-top: 6px; }
#eq-fp .fp-form-gratis .fp-clave-ver { top: calc(50% + 3px); color: var(--eq-luz-dim); }
.fp-clave-ayuda-gratis { font-size: 0.92rem; line-height: 1.4; margin: -6px 0 14px 0; color: var(--eq-luz-dim, rgba(236, 220, 192, 0.7)); }
.fp-aviso-emails { font-size: 0.88rem; line-height: 1.45; margin: 2px 0 14px 0; color: var(--eq-luz-dim, rgba(236, 220, 192, 0.7)); }
.fp-modal .fp-aviso-emails { color: rgba(27, 42, 68, 0.65); }