/* =========================================================================
   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 {
    /* Ronda 78 (6/10/2026, Diego: "le falta un poco de vida, medio palidón, pero ojo, no quiero ningún
       amarillo chillón"): paleta "Violeta" (Ronda 78b: Diego la eligió entre tres). Antes el cielo era un
       gris azulado (#111c27), el dorado un ocre apagado (#c9a24e) y el texto un beige al 78 %. Ahora:
       violeta noche con brillos violeta, magenta y azul (ver el bloque "Ronda 78b: paleta" al final),
       dorado metálico con sombra bronce (la vida sale del color del cielo y del brillo del oro, no de un
       amarillo más fuerte) y texto marfil más claro. Los mismos colores se cambiaron en todo el archivo. */
    --eq-cielo: #0e0b26;
    --eq-panel: rgba(26, 19, 56, 0.62);
    --eq-papel: #f4e8cf;
    --eq-tinta: #1c1842;
    --eq-tinta-dim: rgba(28, 24, 66, 0.66);
    --eq-oro: #d6aa4c;
    --eq-oro-claro: #f0cd82;
    --eq-oro-linea: rgba(214, 170, 76, 0.34);
    --eq-luz: #f5ecda;
    /* 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. Ronda 78: 0.78 -> 0.86, por el mismo motivo. */
    --eq-luz-dim: rgba(245, 236, 218, 0.86);
    --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;
    background: var(--eq-cielo); /* Ronda 78: el canvas ya no pinta su fondo (sólo estrellas y líneas) */
}

#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(12, 9, 30, 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, #f0cd82, #d6aa4c); color: #140f30; box-shadow: 0 8px 20px rgba(214, 170, 76, 0.25); }
#eq-fp .fp-btn-primary:hover { background: linear-gradient(180deg, #f7dc98, #e0b65c); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(214, 170, 76, 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(214, 170, 76,0.14) 0%, transparent 60%),
        radial-gradient(1px 1px at 12% 22%, rgba(245, 236, 218,0.5), transparent 100%),
        radial-gradient(1px 1px at 82% 18%, rgba(245, 236, 218,0.4), transparent 100%),
        radial-gradient(1.5px 1.5px at 92% 55%, rgba(214, 170, 76,0.55), transparent 100%),
        radial-gradient(1px 1px at 24% 68%, rgba(245, 236, 218,0.35), transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 82%, rgba(214, 170, 76,0.4), transparent 100%),
        radial-gradient(1px 1px at 8% 85%, rgba(245, 236, 218,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 (#0e0b26)
   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(214, 170, 76,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(214, 170, 76, 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(214, 170, 76,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(214, 170, 76,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(214, 170, 76,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(214, 170, 76,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(28, 24, 66,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(28, 24, 66,0.12); border-color: rgba(214, 170, 76,0.45); }
#eq-fp .fp-herr-ico { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(214, 170, 76,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(214, 170, 76, 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: #1c1842; background: linear-gradient(90deg, #bf8f36, #f0cd82); 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: #140f30; 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: #140f30; }
#eq-fp .fp-plan-destacado .fp-btn-plan { background: linear-gradient(180deg, #f0cd82, #d6aa4c); color: #140f30; 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(8, 6, 20,0.72); z-index: 300; align-items: center; justify-content: center; padding: 16px; }
.fp-modal-fondo.activo { display: flex; }
.fp-modal {
    background: #f4e8cf; color: #1c1842; 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(28, 24, 66,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: #1c1842; }
.fp-modal label { display: block; font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(28, 24, 66,0.7); margin-bottom: 16px; }
.fp-modal input { display: block; width: 100%; margin-top: 6px; padding: 13px 13px; border: 1px solid rgba(28, 24, 66,0.25); border-radius: 3px; font-family: 'EB Garamond', Georgia, serif; font-size: 1.18rem; background: rgba(255,255,255,0.6); color: #1c1842; }
.fp-modal input:focus { outline: none; border-color: #d6aa4c; }
.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: #f5ecda; }
.fp-form-ok .fp-ok-email-aviso { font-size: 1.08rem; line-height: 1.55; color: rgba(245, 236, 218,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(235, 189, 96, 0.1); border: 1px solid rgba(235, 189, 96, 0.4);
    box-shadow: 0 0 30px rgba(235, 189, 96, 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: #ebbd60; border-right-color: #ebbd60;
    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(28, 24, 66,0.35); padding-bottom: 6px; border-bottom: 2px solid transparent; }
.fp-modal-paso.activo { color: #1c1842; border-bottom-color: #d6aa4c; }
.fp-pago-resumen { font-family: 'Cinzel', serif; font-size: 0.95rem; letter-spacing: 0.5px; color: #1c1842; background: rgba(214, 170, 76,0.18); border: 1px solid rgba(214, 170, 76,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(28, 24, 66,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(28, 24, 66,0.6); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fp-pago-volver:hover { color: #1c1842; }
.fp-pago-seguro { text-align: center; font-size: 0.8rem; color: rgba(28, 24, 66,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: #8c6216; }

#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(214, 170, 76, 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(214, 170, 76, 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(214, 170, 76, 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(214, 170, 76, 0.6); }
#eq-fp .fp-dif-destacado { border-color: var(--eq-oro); background: rgba(214, 170, 76, 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, #0e0b26, 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(26, 19, 56, 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(214, 170, 76, 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: #140f30; }
#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: #140f30; }

/* ---------- 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(16, 12, 40, 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(28, 24, 66, 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(28, 24, 66, 0.65); }
.fp-clave-generar { background: none; border: none; padding: 4px 0; font-family: 'EB Garamond', Georgia, serif; font-size: 1rem; color: #8c6216; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fp-clave-nota { font-size: 0.98rem; line-height: 1.45; color: #1c1842; background: rgba(214, 170, 76, 0.18); border: 1px solid rgba(214, 170, 76, 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(28, 24, 66, 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: #8c6216; 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, #f0cd82, #d6aa4c); color: #140f30; box-shadow: 0 8px 20px rgba(214, 170, 76, 0.3); }
.fp-modal .fp-btn-primary:hover { background: linear-gradient(180deg, #f7dc98, #e0b65c); }
.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(10, 8, 26, 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%, #e8c06a); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 12px rgba(10, 8, 26, 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(214, 170, 76, 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(12, 9, 30, 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(214, 170, 76, 0.16), transparent 65%), rgba(26, 19, 56, 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(214, 170, 76, 0.1), transparent 70%), rgba(12, 9, 30, 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(28, 24, 66, 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(214, 170, 76, 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(28, 24, 66, 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: #8c6216; }
#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(214, 170, 76, 0.12), transparent 65%), rgba(26, 19, 56, 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(245, 236, 218, 0.7)); }
.fp-aviso-emails { font-size: 0.88rem; line-height: 1.45; margin: 2px 0 14px 0; color: var(--eq-luz-dim, rgba(245, 236, 218, 0.7)); }
.fp-modal .fp-aviso-emails { color: rgba(28, 24, 66, 0.65); }

/* ---------- Ronda 72 (6/10/2026): tono de "toma de conciencia" + página más corta ----------
   Cinco lentes (reemplaza Ecosistema + Qué ganás + Qué incluye), resultado gratis corto con candados,
   precio "desde" bajo el botón y "para quién es" en cada plan. Ver el comentario de la Ronda 72 en
   front-page.php. */
/* Ronda 75: con el Almanaque al final (texto corto), la última tarjeta a lo ancho quedaba medio vacía. En computadora
   las cinco van en 3 + 2 centradas (grilla de 6 columnas, cada tarjeta ocupa 2) y en tablet (2 columnas) la última ocupa
   el ancho. Si se prende Compatibilidad son 6 (3 + 3 y 2 + 2 + 2) y estas reglas no cambian nada. */
@media (min-width: 640px) and (max-width: 979px) {
    #eq-fp .fp-grid-lentes > .fp-dif:nth-child(5):last-child { grid-column: span 2; }
}
@media (min-width: 980px) {
    #eq-fp .fp-grid-lentes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #eq-fp .fp-grid-lentes > .fp-dif { grid-column: span 2; }
    #eq-fp .fp-grid-lentes > .fp-dif:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}
#eq-fp .fp-lentes-cierre { text-align: center; color: var(--eq-luz-dim); font-size: 1.1rem; margin: 28px auto 6px auto; max-width: 640px; }
/* Ronda 75b (Diego: "no me refería a no intentar vender"): vuelve el candado (en la Ronda 75 era una estrellita). */
#eq-fp .fp-signo-candados li::before { content: '🔒'; font-size: 0.85em; top: 2px; }
#eq-fp .fp-signo-resultado .fp-signo-info { margin-top: 22px; }
#eq-fp .fp-plan-paraquien { font-style: italic; color: var(--eq-luz-dim); font-size: 1.02rem; line-height: 1.5; margin: -8px 0 18px 0; }
/* Ronda 72: el textito chico ("30 segundos · sin tarjeta") ahora va en el botón dorado: más oscuro para que se lea. */
#eq-fp .fp-btn-primary .fp-btn-mini { color: rgba(13, 10, 32, 0.72); }

/* =====================================================================================================
   Ronda 73b (6/10/2026, pedido de Diego: "letras muy pequeñas en general"). La EB Garamond se ve más chica
   que otras letras del mismo tamaño, así que todo el texto de lectura sube: párrafos a ~22 px en
   computadora (20 px en celular) y ningún texto de botón, etiqueta o aviso por debajo de ~15 px.
   ===================================================================================================== */
#eq-fp .fp-hero-desc { font-size: 1.32rem; line-height: 1.65; }
#eq-fp .fp-hero h1 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
#eq-fp .fp-hero-tagline { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem); }
#eq-fp .fp-hero-confianza li { font-size: 1.1rem; }
#eq-fp .fp-btn { font-size: 1.15rem; }
#eq-fp .fp-btn-mini { font-size: 0.98rem; }
#eq-fp .fp-signo-sub { font-size: 1.22rem; line-height: 1.6; }
#eq-fp .fp-form-gratis label { font-size: 1rem; }
#eq-fp .fp-aviso-emails { font-size: 1.05rem; line-height: 1.5; }
#eq-fp .fp-hero-badge { font-size: 0.95rem; }
#eq-fp .fp-faq-item p, #eq-fp .fp-grid-lentes p, #eq-fp .fp-dif p, #eq-fp .fp-paso p, #eq-fp .fp-herr p,
#eq-fp .fp-equipo p, #eq-fp .fp-verdad13-texto p, #eq-fp .fp-plan-lista li, #eq-fp .fp-plan-cuota { font-size: 1.38rem; line-height: 1.65; }
#eq-fp .fp-verdad13-remate { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.7rem); }
#eq-fp .fp-lentes-cierre, #eq-fp .fp-planes-garantia, #eq-fp .fp-planes-duda { font-size: 1.22rem; }
#eq-fp .fp-equipo-tags span { font-size: 1.05rem; }
#eq-fp .fp-plan-precio small { font-size: 1.05rem; }
#eq-fp .fp-plan-paraquien { font-size: 1.18rem; }
#eq-fp .fp-plan-cinta { font-size: 0.9rem; }
#eq-fp .fp-plan-lista-todo { font-size: 1.2rem; }
#eq-fp .fp-signo-identifica p { font-size: 1.22rem; }
#eq-fp .fp-signo-opciones li { font-size: 1.2rem; }
#eq-fp .fp-marca-eslogan { font-size: 1.02rem; }
#eq-fp .fp-ingresar { font-size: 1.08rem; }
@media (max-width: 640px) {
    #eq-fp .fp-faq-item p, #eq-fp .fp-grid-lentes p, #eq-fp .fp-dif p, #eq-fp .fp-paso p, #eq-fp .fp-herr p,
    #eq-fp .fp-equipo p, #eq-fp .fp-verdad13-texto p, #eq-fp .fp-plan-lista li, #eq-fp .fp-plan-cuota, #eq-fp .fp-hero-desc { font-size: 1.25rem; }
}
/* Ronda 73b: desde la Ronda 72 el texto del "13" es un solo párrafo, y quedaba pegado arriba mientras a la izquierda
   el 13 grande y el título ocupan mucho más alto. Se centran las dos columnas entre sí. */
@media (min-width: 860px) { #eq-fp .fp-verdad13-grid { align-items: center; } }
/* Ronda 73b: la caja del hero (calculadora en computadora) tenía letras de 12-15 px. */
#eq-fp .fp-hero-texto .fp-hero-ctas .fp-btn { font-size: 1.12rem; }
@media (min-width: 1024px) {
    #eq-fp .fp-signo-caja-hero .fp-signo-sub { font-size: 1.15rem; }
    #eq-fp .fp-signo-caja-hero .fp-form-gratis label { font-size: 0.9rem; }
    #eq-fp .fp-signo-caja-hero .fp-form-gratis label.fp-casilla-emails { font-size: 1.05rem; }
    #eq-fp .fp-signo-caja-hero .fp-btn { font-size: 1.1rem; }
    #eq-fp .fp-signo-caja-hero .fp-signo-real, #eq-fp .fp-signo-caja-hero .fp-signo-antes { font-size: 1.15rem; }
    #eq-fp .fp-signo-caja-hero .fp-signo-upsell, #eq-fp .fp-signo-caja-hero .fp-signo-identifica p { font-size: 1.1rem; }
    #eq-fp .fp-signo-caja-hero .fp-signo-info summary, #eq-fp .fp-signo-caja-hero .fp-signo-info p { font-size: 1.02rem; }
}
/* Ronda 73b (pedido de Diego): la línea de arriba del título ("Almanaque Natural, Astrología Real, Tarot, Numerología y
   Cábala") se destaca: dorado claro y más grande, porque es lo que el título promete ("las llaves... en un solo lugar"). */
#eq-fp .fp-hero h1 { font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.65rem); color: var(--eq-oro-claro); line-height: 1.45; letter-spacing: 1px; margin-bottom: 18px; }
/* Ronda 74b (pedido de Diego): esa línea va en blanco, no en dorado. */
#eq-fp .fp-hero h1 { color: #ffffff; text-wrap: balance; }

/* =====================================================================================================
   Ronda 74 (6/10/2026, pedido de Diego: "la letra sigue muy pequeña en algunos lados", "el 13 sigue desalineado",
   "no hay botón flotante", "optimizar más para convertir").
   ===================================================================================================== */
/* La causa de fondo de la "letra chica": en las capturas de Diego la letra base de la página mide 12 px en vez de 16
   (la opción "Tamaño de fuente: Pequeño" del navegador). Casi todos los tamaños de este archivo se miden en rem, así que
   se achicaban un 25 % y agrandarlos no alcanzaba. En la portada la letra base nunca baja de 16 px; si alguien eligió
   letra MÁS GRANDE en su navegador, se respeta. */
html:has(#eq-fp) { font-size: max(100%, 16px); }
.eq-idioma-opcion { font-size: 0.85rem; }

/* ---------- textos que seguían por debajo de ~16 px ---------- */
#eq-fp .fp-btn-mini { font-size: 1.02rem; }
#eq-fp .fp-form-gratis label { font-size: 1rem; letter-spacing: 1.6px; }
#eq-fp .fp-signo-identifica-eyebrow { font-size: 1rem !important; } /* Ronda 75: antes 0.95rem (15 px) */
#eq-fp .fp-signo-info summary { font-size: 1.1rem; }
#eq-fp .fp-signo-info p { font-size: 1.12rem; }
#eq-fp .fp-signo-disclaimer { font-size: 1.08rem !important; }
#eq-fp .fp-plan-cinta { font-size: 0.95rem; }
@media (min-width: 1024px) {
    #eq-fp .fp-signo-caja-hero .fp-form-gratis label { font-size: 0.95rem; }
    #eq-fp .fp-signo-caja-hero .fp-signo-info summary, #eq-fp .fp-signo-caja-hero .fp-signo-info p { font-size: 1.08rem; }
}
/* El modal de compra vive fuera de #eq-fp: sus etiquetas, pasos y avisos tenían 12-14 px. */
.fp-modal-paso { font-size: 0.9rem; }
.fp-modal label { font-size: 0.92rem; }
.fp-clave-ver { font-size: 0.85rem; }
.fp-clave-extra, .fp-clave-nota { font-size: 1.05rem; }
.fp-modal .fp-aviso-emails { font-size: 1rem; line-height: 1.5; }
.fp-pago-volver { font-size: 1.05rem; }
.fp-pago-seguro { font-size: 1rem; }
/* La casilla de Términos del pago quedaba suelta en el medio, con el texto en mayúsculas debajo: heredaba el "display:
   block" y el ancho completo de los campos del modal. Vuelve a ser casilla + texto en la misma línea. */
.fp-modal label.fp-terminos-campo {
    display: flex; align-items: flex-start; gap: 10px; font-family: 'EB Garamond', Georgia, serif; font-size: 1.1rem;
    letter-spacing: 0; text-transform: none; line-height: 1.4; color: #1c1842; margin: 6px 0 16px 0;
}
.fp-modal .fp-terminos-campo input[type="checkbox"] { display: inline-block; flex: none; width: 20px; height: 20px; margin: 2px 0 0 0; padding: 0; accent-color: #bf8f36; }

/* ---------- el 13: una sola columna centrada también en computadora ----------
   Con dos columnas, el texto de la derecha nunca coincidía con nada de la izquierda (el 13 es muy alto). Ahora el 13,
   el título y el texto van uno debajo del otro, centrados, como en el celular: no hay nada que alinear. */
@media (min-width: 860px) {
    #eq-fp .fp-verdad13-grid { display: block; max-width: 900px; text-align: center; }
    #eq-fp .fp-verdad13-eyebrow-col { text-align: center; }
    #eq-fp .fp-verdad13-num { margin: 0 auto 8px auto; }
    #eq-fp .fp-verdad13 h2 { text-align: center; max-width: 760px; margin: 0 auto; }
    #eq-fp .fp-verdad13-texto { margin: 0 auto; }
}
#eq-fp .fp-verdad13 h2 { margin-bottom: 0; }
#eq-fp .fp-verdad13-texto { max-width: 60ch; text-align: center; }
#eq-fp .fp-verdad13-texto::before { content: '✦'; display: block; color: var(--eq-oro); font-size: 1.1rem; line-height: 1; margin: 24px 0 20px 0; }
#eq-fp .fp-verdad13-texto p.fp-verdad13-remate { border-left: none; padding-left: 0; }

/* ---------- hero en computadora: primero qué es, después los botones ----------
   El párrafo (más corto desde esta ronda) pasa arriba de los botones, como subtítulo; las garantías quedan debajo de
   los botones. En el celular sigue debajo, para que los dos botones entren en la primera pantalla. */
@media (min-width: 960px) {
    #eq-fp .fp-hero-texto .fp-hero-tagline { margin-bottom: 22px; }
    #eq-fp .fp-hero-texto .fp-hero-desc { order: 1; margin: 0 0 30px 0; max-width: 34em; }
    #eq-fp .fp-hero-texto .fp-hero-ctas { order: 2; }
    #eq-fp .fp-hero-texto .fp-hero-confianza { order: 3; }
    #eq-fp .fp-signo-caja-hero .fp-hero-badge { font-size: 0.9rem; letter-spacing: 2.5px; padding: 6px 14px; margin-bottom: 14px; }
    /* Con la letra a su tamaño real, la calculadora quedó más alta que el texto: centrados entre sí, el texto bajaba y
       los botones quedaban fuera de la primera pantalla de una notebook. Los dos empiezan arriba, a la misma altura. */
    #eq-fp .fp-hero-contenido { align-items: start; padding-top: 44px; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
    #eq-fp .fp-signo-caja-hero { max-width: 420px; }
    #eq-fp .fp-hero h1 { margin-bottom: 14px; }
    /* Con el resultado gratis a la vista (Ronda 46: la tarjeta pasa a todo el ancho), sus párrafos quedaban en 0.95rem: más
       chicos que antes de calcular y que los de la calculadora de más abajo. Ahora tienen el mismo tamaño que allá. */
    #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 { font-size: 1.2rem; }
    #eq-fp .fp-hero-contenido:has(.fp-signo-resultado--revelado) .fp-signo-caja-hero .fp-signo-info p { font-size: 1.12rem; }
}
/* Pantallas altas: hay lugar de sobra, así que el texto vuelve a quedar centrado al lado de la calculadora. */
@media (min-width: 960px) and (min-height: 860px) { #eq-fp .fp-hero-contenido { align-items: center; } }
/* La casilla de permiso de emails, del tamaño del texto. */
#eq-fp .fp-casilla-emails input { width: 18px; height: 18px; margin-top: 4px; accent-color: #d6aa4c; }
/* Notebooks de pantalla baja (por ejemplo 1366 x 768): un poco menos de aire para que los botones entren sin bajar. */
@media (min-width: 960px) and (max-height: 780px) {
    #eq-fp .fp-hero-contenido { padding-top: 26px; }
    #eq-fp .fp-hero h1 { font-size: 1.4rem; margin-bottom: 10px; }
    #eq-fp .fp-hero-sub { font-size: clamp(2.2rem, 1.2rem + 1.9vw, 2.7rem); }
    #eq-fp .fp-hero-texto .fp-hero-tagline { margin-bottom: 16px; }
    #eq-fp .fp-hero-texto .fp-hero-desc { margin-bottom: 22px; line-height: 1.55; }
}

/* ---------- planes: lo común una sola vez, tarjetas cortas ---------- */
#eq-fp .fp-planes-sub { margin-bottom: 30px; }
#eq-fp .fp-planes-incluye { max-width: 1000px; margin: 0 auto 54px auto; text-align: center; }
#eq-fp .fp-planes-incluye-titulo { font-family: var(--eq-titulo); font-size: 0.95rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--eq-oro-claro); margin: 0 0 14px 0; }
/* 820 px: las cinco quedan en dos filas parejas (3 + 2) en los tres idiomas, en vez de 4 + 1 con una sola suelta abajo. */
#eq-fp .fp-planes-incluye ul { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
#eq-fp .fp-planes-incluye li { font-size: 1.15rem; line-height: 1.35; color: var(--eq-luz); border: 1px solid var(--eq-oro-linea); border-radius: 30px; padding: 8px 18px 8px 16px; background: rgba(214, 170, 76, 0.07); }
#eq-fp .fp-planes-incluye li::before { content: '✓'; color: var(--eq-oro); margin-right: 8px; }
/* Sin la lista repetida, el botón de cada tarjeta va abajo de todo (las tres quedan parejas). */
#eq-fp .fp-plan .fp-btn-plan { margin-top: auto; }
#eq-fp .fp-plan-paraquien { margin-bottom: 26px; }
#eq-fp .fp-plan-ancho .fp-plan-paraquien { margin: 12px 0 20px 0; }
#eq-fp .fp-plan-ancho .fp-plan-lista li { font-size: 1.2rem; }
@media (min-width: 900px) {
    #eq-fp .fp-plan-ancho { grid-template-columns: 250px minmax(0, 1fr) 270px; }
    #eq-fp .fp-plan-ancho .fp-btn-plan { margin-top: 0; font-size: 1rem; letter-spacing: 1px; line-height: 1.3; }
}
@media (max-width: 639px) { #eq-fp .fp-planes-incluye li { font-size: 1.08rem; padding: 7px 14px 7px 12px; } }
/* La seguridad del pago, junto a la garantía. */
#eq-fp .fp-planes-seguro { margin-top: 10px; }
/* Títulos repartidos en renglones parejos (sin una palabra sola en el último renglón), donde el navegador lo permite. */
#eq-fp h2, #eq-fp h3, #eq-fp .fp-hero-sub { text-wrap: balance; }

/* ---------- botón flotante (también en computadora) ----------
   Celular: la barra de siempre, a todo el ancho, con un solo botón. Computadora: una cápsula centrada abajo con la
   pregunta y el botón dorado.
   (Ronda 75 la dejó con una sola acción y escondida después del resultado; la Ronda 75b vuelve a los dos estados, ver el
   bloque de la Ronda 75b al final de este archivo.) */
.fp-cta-sticky { display: flex; }
.fp-cta-sticky-txt { display: none; font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 1.22rem; color: #f5ecda; white-space: nowrap; }
#eq-fp .fp-cta-sticky .fp-btn { font-size: 1.02rem; letter-spacing: 1px; padding: 14px 18px; min-height: 0; }
@media (min-width: 640px) {
    .fp-cta-sticky {
        left: 50%; right: auto; bottom: calc(20px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 190px);
        gap: 22px; padding: 10px 10px 10px 30px; border: 1px solid var(--eq-oro-linea, rgba(214, 170, 76, 0.34)); border-radius: 60px;
        background: rgba(26, 19, 56, 0.95); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 34px rgba(214, 170, 76, 0.14);
        transform: translate(-50%, 170%);
    }
    .fp-cta-sticky.visible { transform: translate(-50%, 0); }
    #eq-fp .fp-cta-sticky .fp-btn { flex: none; width: auto; border-radius: 40px; padding: 15px 30px; font-size: 1.05rem; white-space: nowrap; }
}
/* Celular: si el texto del botón es largo (en francés, "Découvre ton signe gratuitement"), pasa a dos renglones en vez de
   salirse de la pantalla. */
@media (max-width: 639px) { #eq-fp .fp-cta-sticky .fp-btn { white-space: normal; line-height: 1.25; padding: 13px 14px; } }
/* Según el ancho: sólo el botón y, desde 1180 px, también la frase a su izquierda. */
@media (min-width: 640px) and (max-width: 1179px) { .fp-cta-sticky { padding: 10px; } }
@media (min-width: 1180px) { .fp-cta-sticky-txt { display: inline; } }
@media (prefers-reduced-motion: reduce) { .fp-cta-sticky { transition: opacity 0.2s ease; } }
/* Ronda 74: en el celular la barra puede tener dos renglones (francés): el WhatsApp sube un poco para no taparla. */
@media (max-width: 639px) { .fp-wa-flotante { bottom: calc(98px + env(safe-area-inset-bottom)); } }

/* =====================================================================================================
   Ronda 75b / 76 (6/10/2026, pedidos de Diego).
   ===================================================================================================== */
/* El precio va DENTRO del botón de compra, en un segundo renglón debajo del título ("debajo del botón es de novato"). Lo
   mismo el "30 segundos · sin tarjeta" del botón gratis: ahora va debajo del título, no arriba. */
#eq-fp .fp-btn-mini { margin: 4px 0 0 0; line-height: 1.3; }
#eq-fp .fp-btn-doble { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25; }
#eq-fp .fp-signo-resultado .fp-btn-doble { display: flex; width: 100%; padding-top: 14px; padding-bottom: 14px; }
#eq-fp .fp-centro .fp-btn-xl { min-height: 78px; }
/* "Tu Signo Estelar es X" y, abajo, qué es. */
#eq-fp .fp-signo-real-que { font-family: var(--eq-lectura); font-size: 1.2rem; line-height: 1.5; color: var(--eq-luz-dim); margin: 8px 0 0 0; }
@media (min-width: 960px) { #eq-fp .fp-signo-caja-hero .fp-signo-real-que { font-size: 1.1rem; } }

/* Botón flotante: vuelven los dos estados de la Ronda 74. Antes del resultado, la lectura gratis + "Ver planes" (desde 760
   px); después, "Quiero mi lectura completa" con el precio adentro y, desde 1180 px, una frase al lado. */
.fp-cta-sticky[data-estado="gratis"] .fp-flot-planes,
.fp-cta-sticky[data-estado="planes"] .fp-flot-gratis { display: none !important; }
.fp-cta-sticky-sec { display: none; font-family: 'EB Garamond', Georgia, serif; font-size: 1.12rem; color: #f0cd82; text-decoration: none; border-bottom: 1px solid rgba(214, 170, 76, 0.5); white-space: nowrap; }
.fp-cta-sticky-sec:hover { color: #f5ecda; }
@media (min-width: 760px) { .fp-cta-sticky-sec { display: inline; } }
@media (min-width: 760px) and (max-width: 1179px) { .fp-cta-sticky[data-estado="gratis"] { padding-left: 10px; padding-right: 26px; } }
@media (min-width: 1180px) { .fp-cta-sticky[data-estado="gratis"] { padding-right: 28px; } }
#eq-fp .fp-cta-sticky .fp-btn-doble { padding-top: 10px; padding-bottom: 10px; }
#eq-fp .fp-cta-sticky .fp-btn-mini { font-size: 1rem; margin-top: 2px; }
/* Celular: con el precio, la barra de "planes" es un poco más alta; el WhatsApp sube para no taparla (en 320-379 px el título
   ocupa dos renglones). */
@media (max-width: 639px) { body:has(#fp-cta-sticky[data-estado="planes"]) .fp-wa-flotante { bottom: calc(112px + env(safe-area-inset-bottom)); } }
@media (max-width: 379px) { body:has(#fp-cta-sticky[data-estado="planes"]) .fp-wa-flotante { bottom: calc(146px + env(safe-area-inset-bottom)); } }
/* "Découvre ton Signe Stellaire gratuitement" no entraba en una cápsula de 640-1023 px: el botón puede pasar a dos renglones
   en vez de salirse. */
@media (min-width: 640px) { #eq-fp .fp-cta-sticky .fp-btn { flex: 0 1 auto; min-width: 0; white-space: normal; line-height: 1.25; } }

/* ===== Ronda 78 (6/10/2026, pedidos de Diego) =====
   1) Una sola acción por etapa: antes de la lectura gratis se ven los botones .fp-solo-antes (lectura gratis, "Ver planes");
      cuando aparece el resultado el JS pone data-fp-estado="planes" en #eq-fp y se ven los .fp-solo-despues (comprar). */
#eq-fp:not([data-fp-estado="planes"]) .fp-solo-despues { display: none !important; }
#eq-fp[data-fp-estado="planes"] .fp-solo-antes { display: none !important; }
/* 2) "Entre el texto del 13 y «Todas tus herramientas» hay mucho espacio": las dos secciones van seguidas (antes 148 a 268 px). */
#eq-fp .fp-verdad13 { padding-bottom: clamp(32px, 1.25rem + 1.5vw, 52px); }
#eq-fp .fp-ecosistema { padding-top: clamp(32px, 1.25rem + 1.5vw, 52px); }
/* 3) Resultado gratis con jerarquía, igual que la historia del portal (Diego: "«Diego, tu Signo Estelar es» es muy pequeño…
      le pondría el símbolo del signo"; "en tu esencia usá distintos niveles de letras, colores y tamaños"). Niveles: el signo
      (Cinzel, lo más grande) con su símbolo; la frase del signo y la frase principal de la esencia (Garamond grande, crema);
      "Diego, tu Signo Estelar es" (Garamond, nombre en dorado); lo que explica (chico, apagado). Valen para las dos copias
      de la calculadora (por eso los !important: la del hero achicaba la letra del resultado). */
#eq-fp .fp-signo-resultado .fp-signo-reveal { padding: 26px 18px 24px 18px; text-align: center; }
#eq-fp .fp-signo-resultado .fp-signo-real { font-family: var(--eq-lectura); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem) !important; line-height: 1.3; color: var(--eq-luz); margin: 0 0 14px 0; font-weight: 500; }
#eq-fp .fp-signo-persona { color: var(--eq-oro-claro); font-style: italic; }
#eq-fp .fp-signo-simbolo-svg { display: block; width: clamp(68px, 16vw, 96px); height: auto; color: #f2cf7c; margin: 0 auto 10px auto; filter: drop-shadow(0 0 20px rgba(242, 207, 124, 0.38)); }
#eq-fp .fp-signo-resultado .fp-signo-nombre {
    display: block; margin: 0 0 10px 0; line-height: 1.1;
    font-family: var(--eq-titulo); font-weight: 700; letter-spacing: 0.08em; font-size: clamp(2.3rem, 1.6rem + 3vw, 3.3rem) !important;
    background: linear-gradient(180deg, #fff3cc 0%, #f5d27e 45%, #d6aa4c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#eq-fp .fp-signo-resultado .fp-signo-real-que { font-size: 1.1rem !important; line-height: 1.55; color: var(--eq-luz-dim); max-width: 32ch; margin: 0 auto 22px auto; }
/* Ronda 120 (pedido 48c): el párrafo de «por qué puede no coincidir» es largo: letra de 18 px y ancho completo (no la columna angosta de la frase). */
#eq-fp .fp-signo-resultado .fp-signo-por-que { font-size: 1.125rem !important; max-width: 40em; margin: 0 auto 22px auto; }
#eq-fp .fp-signo-frase { font-family: var(--eq-lectura); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem) !important; line-height: 1.45; color: var(--eq-luz); max-width: 30ch; margin: 0 auto; padding-top: 20px; border-top: 1px solid var(--eq-oro-linea); }
#eq-fp .fp-signo-frase:empty { display: none; }
#eq-fp .fp-signo-resultado .fp-signo-identifica { text-align: center; align-items: center; gap: 0; margin: 0 0 26px 0; padding: 26px 18px; border-radius: 10px; }
#eq-fp .fp-signo-resultado .fp-signo-identifica-eyebrow { font-size: 1rem !important; letter-spacing: 4px; margin: 0 0 14px 0 !important; padding-left: 0 !important; }
#eq-fp .fp-signo-identifica .fp-esencia-titular { font-family: var(--eq-lectura); font-weight: 500; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem) !important; line-height: 1.32; color: var(--eq-luz); max-width: 28ch; margin: 0 auto 12px auto; padding-left: 0; text-wrap: balance; }
#eq-fp .fp-signo-identifica .fp-esencia-apoyo { font-family: var(--eq-lectura); font-size: 1.12rem !important; line-height: 1.6; color: var(--eq-luz-dim); max-width: 36ch; margin: 0 auto; padding-left: 0; }
/* (Ronda 79: el número de Sendero de Vida solo pasó a ser uno de los 3 números clave, ver «Ronda 79» al final.) */



/* ---------- Ronda 78b (6/10/2026): paleta "Violeta" (la elige Diego, opción 2 de 3) ----------
   Diego vio tres opciones (Noche profunda, Violeta y Azul real) y eligió Violeta, con una condición:
   "no quites el fondo de constelaciones interactivo que ya tiene detrás porque eso me gusta, tampoco
   las transparencias para que eso se vea". El canvas de estrellas sigue igual (fpFondoInteractivo en
   front-page.php: estrellas, líneas y el brillo al pasar el mouse o el dedo); sólo cambia el color del
   cielo que tiene detrás. Las secciones transparentes y las cajas semitransparentes (planes, resultado,
   formulario) quedan como estaban, para que la constelación se siga viendo a través. NO taparlas.
   El cielo: violeta arriba a la izquierda, un toque magenta abajo a la derecha y uno azul arriba a la
   derecha, sobre un violeta noche que oscurece hacia abajo. Quedan fijos mientras se baja, como un cielo.
   Los botones dorados pasan de un degradé plano a uno metálico (luz arriba, bronce abajo) con un
   brillo fino en el borde superior: más vivos sin ir hacia el amarillo. Las secciones claras (Cómo
   funciona, Preguntas) pasan del arena apagado a un marfil cálido. */
#eq-fp #fp-fondo-interactivo {
    background:
        radial-gradient(ellipse 75% 55% at 5% 0%, rgba(132, 72, 205, 0.38), transparent 70%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(200, 80, 150, 0.20), transparent 70%),
        radial-gradient(ellipse 50% 40% at 88% 22%, rgba(70, 90, 210, 0.22), transparent 70%),
        linear-gradient(180deg, #130e30 0%, #080616 100%);
}
#eq-fp .fp-faq, #eq-fp .fp-como, #eq-fp .fp-herramientas { background: linear-gradient(180deg, #f8f0de 0%, #f0deb9 100%); }
#eq-fp .fp-btn-primary, #eq-fp .fp-plan-destacado .fp-btn-plan, .fp-modal .fp-btn-primary {
    background: linear-gradient(180deg, #f8df9a 0%, #e2b85a 52%, #c3943c 100%);
    box-shadow: 0 8px 24px rgba(214, 170, 76, 0.30), inset 0 1px 0 rgba(255, 247, 220, 0.65);
}
#eq-fp .fp-btn-primary:hover, .fp-modal .fp-btn-primary:hover {
    background: linear-gradient(180deg, #fbe6aa 0%, #e9c067 52%, #cc9d44 100%);
    box-shadow: 0 10px 30px rgba(214, 170, 76, 0.42), inset 0 1px 0 rgba(255, 247, 220, 0.7);
}

/* ===== Ronda 79 (6/10/2026, Diego: "En lo que ofrecemos gratis, será signo estelar y 3 números claves de lo que es
   numerología: el de personalidad, el de alma y el del sendero de vida") =====
   El formulario gratis pide el nombre completo, con una línea que dice para qué (Alma y Personalidad salen de él). En el
   resultado, debajo de la esencia, "Tus 3 números clave": cada número en un círculo dorado y, al lado, qué número es
   (Cinzel), qué mide (cursiva, apagado), su clave (Garamond grande, crema) y su significado (Garamond, apagado). Los
   !important son por la calculadora del hero, que achica los <p> del resultado. Nada por debajo de 16 px. */
#eq-fp .fp-form-gratis .fp-campo-ayuda { display: block; margin-top: 7px; font-family: var(--eq-lectura); font-size: 1rem !important; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--eq-luz-dim); }
#eq-fp .fp-form-gratis input::placeholder { color: rgba(245, 236, 218, 0.45); }
/* El aviso de error del formulario gratis era rojo oscuro (#a33) sobre el violeta: casi no se leía. Ahora que puede pedir el
   apellido, va en un coral claro. (En el modal de compra, que es claro, sigue el rojo de siempre.) */
#eq-fp .fp-form-gratis .fp-form-msg { color: #ffb3a3; }
#eq-fp .fp-numeros { width: 100%; max-width: 34rem; margin: 26px auto 0 auto; padding-top: 22px; border-top: 1px solid var(--eq-oro-linea); }
#eq-fp .fp-signo-identifica .fp-numeros-eyebrow { margin: 0 0 6px 0; padding-left: 0; text-align: center; font-family: var(--eq-titulo); font-size: 1rem !important; letter-spacing: 4px; text-transform: uppercase; color: var(--eq-oro-claro); font-weight: 600; }
#eq-fp .fp-numeros-lista { display: flex; flex-direction: column; }
#eq-fp .fp-numero { display: grid; grid-template-columns: 3.9rem minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 0; text-align: left; }
#eq-fp .fp-numero + .fp-numero { border-top: 1px solid rgba(214, 170, 76, 0.18); }
#eq-fp .fp-numero-n {
    width: 3.9rem; height: 3.9rem; border-radius: 50%; border: 1px solid var(--eq-oro-linea);
    background: radial-gradient(circle at 50% 30%, rgba(214, 170, 76, 0.18), rgba(214, 170, 76, 0.04) 70%);
    display: flex; align-items: center; justify-content: center;
}
#eq-fp .fp-numero-n > span { font-family: var(--eq-titulo); font-weight: 700; font-size: 1.85rem; line-height: 1; background: linear-gradient(180deg, #fff3cc 0%, #f5d27e 45%, #d6aa4c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#eq-fp .fp-numero-cuerpo { display: flex; flex-direction: column; min-width: 0; }
#eq-fp .fp-numero-etiqueta { font-family: var(--eq-titulo); font-size: 1rem !important; letter-spacing: 3px; text-transform: uppercase; color: var(--eq-oro-claro); line-height: 1.3; font-weight: 600; }
#eq-fp .fp-numero-que { font-family: var(--eq-lectura); font-style: italic; font-size: 1.05rem !important; line-height: 1.35; color: var(--eq-luz-dim); margin-top: 1px; }
#eq-fp .fp-numero-clave { font-family: var(--eq-lectura); font-weight: 500; font-size: 1.3rem !important; line-height: 1.3; color: var(--eq-luz); margin-top: 8px; }
#eq-fp .fp-numero-desc { font-family: var(--eq-lectura); font-size: 1.08rem !important; line-height: 1.5; color: var(--eq-luz-dim); margin-top: 3px; }
@media (max-width: 420px) {
    #eq-fp .fp-numero { grid-template-columns: 3.3rem minmax(0, 1fr); column-gap: 12px; }
    #eq-fp .fp-numero-n { width: 3.3rem; height: 3.3rem; }
    #eq-fp .fp-numero-n > span { font-size: 1.6rem; }
}
/* La lista de lo gratis debajo de los botones del inicio: "Tus números de Alma, Personalidad y Sendero de Vida" ocupa dos
   renglones en el celular; el texto arranca al lado del ✓ en vez de quedar centrado lejos de él. */
#eq-fp .fp-hero-confianza li { text-align: left; }
@media (max-width: 959px) { #eq-fp .fp-hero-confianza { display: grid; justify-content: center; justify-items: start; gap: 6px; } }

/* ===== Ronda 80 (6/10/2026, Diego: "el slide 2 del resultado no quiero que exista (borralo)") =====
   El resultado ya no tiene "Tu esencia": los 3 números son lo primero de la tarjeta (sin la raya de arriba que los separaba). */
#eq-fp .fp-signo-identifica > .fp-numeros:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ===== Ronda 82 (9/10/2026, pedido 2): con la sesión abierta la ventana de compra es un solo paso (la tarjeta) =====
   Sin los pasos "1 · 2" ni "Volver" (no hay paso de datos), y una línea con la cuenta con la que se compra. */
.fp-con-sesion .fp-modal-pasos, .fp-con-sesion .fp-pago-volver { display: none; }
.fp-modal .fp-pago-cuenta { margin: -10px 0 16px 0; text-align: center; font-size: 1rem; line-height: 1.4; color: rgba(28, 24, 66, 0.75); overflow-wrap: anywhere; }
.fp-modal .fp-terminos-pago { margin-top: 16px; }

/* Ronda 87 (9/10/2026, pedido 9): línea de la lectura de prueba, debajo de los botones y en el formulario de la lectura gratis.
   Sale sólo cuando se puede dar (eq_regalo_lineaPortada). Nunca menos de 16 px (la letra del navegador de Diego es chica). */
#eq-fp .fp-linea-prueba { max-width: 34em; margin: 14px auto 0 auto; text-align: center; font-family: var(--eq-lectura); font-size: 1.05rem; line-height: 1.5; color: var(--eq-oro-claro, #FDE08B); }
#eq-fp .fp-linea-prueba-form { margin: -4px 0 14px 0; text-align: left; font-size: 1rem; }
.fp-linea-prueba::before { content: '✦ '; color: var(--eq-oro, #D4AF37); }

/* Ronda 92 (9/10/2026): aviso al cerrar sesión desde la pantalla gratis: cómo volver a entrar sin contraseña. */
#eq-fp .fp-sesion-cerrada { position: relative; z-index: 5; max-width: 620px; margin: 10px auto 0; padding: 14px 44px 14px 18px; border: 1px solid var(--eq-oro-linea); border-radius: 10px; background: rgba(12, 10, 34, 0.88); color: var(--eq-luz); font-size: 1.05rem; line-height: 1.5; text-align: left; box-sizing: border-box; }
#eq-fp .fp-sesion-cerrada[hidden] { display: none; }
#eq-fp .fp-sesion-cerrada p { margin: 0; }
#eq-fp .fp-sesion-cerrada button { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--eq-luz-dim); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 6px; }
@media (max-width: 660px) { #eq-fp .fp-sesion-cerrada { margin: 8px 16px 0; } }
#eq-fp .fp-ingresar.fp-ingresar-resaltado { color: var(--eq-oro-claro, #FDE08B); border-color: var(--eq-oro-claro, #FDE08B); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25); }

/* Ronda 107 (12/10/2026, pedido 24): pantalla de pago de la Carta Natal completa (lo que incluye, la garantía, la casilla y los impuestos). */
.fp-modal .fp-carta-detalle { margin: 0 0 16px 0; padding: 12px 14px; border: 1px solid rgba(214, 170, 76, 0.4); border-radius: 3px; background: rgba(214, 170, 76, 0.1); color: #1c1842; font-size: 1rem; line-height: 1.5; text-align: left; }
.fp-modal .fp-carta-detalle p { margin: 0 0 8px 0; }
.fp-modal .fp-carta-detalle p:last-child { margin-bottom: 0; }
.fp-modal .fp-carta-detalle .fp-carta-tit { font-family: 'Cinzel', serif; font-size: 1.05rem; letter-spacing: 0.4px; font-weight: 600; }
.fp-modal .fp-carta-impuestos { font-size: 0.95rem; line-height: 1.45; margin: 4px 0 12px 0; color: rgba(28, 24, 66, 0.7); }

/* Ronda 107 (pedido 25): las tres tarjetas de planes (Carta Natal, Acompañamiento mensual, Plan anual), sin insignia, y la línea de packs debajo. */
#eq-fp .fp-plan-texto { flex: 1; margin: 0 0 26px 0; }
#eq-fp .fp-plan-texto p { font-size: 1.14rem; line-height: 1.5; color: var(--eq-luz-dim); margin: 0 0 10px 0; }
#eq-fp .fp-plan-texto p:last-child { margin-bottom: 0; }
#eq-fp .fp-planes-packs { text-align: center; max-width: 720px; margin: 40px auto 0 auto; }
#eq-fp .fp-planes-packs p { font-size: 1.12rem; line-height: 1.5; color: var(--eq-luz-dim); margin: 0 0 6px 0; }
#eq-fp .fp-planes-packs .fp-planes-packs-titulo { color: var(--eq-luz); font-size: 1.18rem; }
#eq-fp .fp-planes h2 + .fp-grid-oferta { margin-top: 32px; }

/* Ronda 107 (pedido 26): el premio del primer mes, dentro de la pantalla de gracias de la Carta (sólo una oferta, sin nada más al lado). */
.fp-form-ok .fp-premio { margin-top: 22px; }
.fp-form-ok .fp-premio-hoy { margin-top: 10px; font-weight: 600; color: #FDE08B; }
.fp-form-ok .fp-premio-letra { font-size: 1rem; line-height: 1.5; color: rgba(245, 236, 218, 0.85); margin-top: 14px; }
.fp-form-ok .fp-premio-no { display: inline-block; margin-top: 16px; font-size: 1rem; color: rgba(245, 236, 218, 0.75); text-decoration: underline; }
/* Ronda 123 (pedido 49): la oferta de la Carta después del Tarot y del mensual (el estilo final lo pone eq-rediseno49.css). */
.fp-form-ok .fp-upsell { margin-top: 22px; text-align: left; }
.fp-form-ok .fp-upsell-texto { font-size: 1.125rem; line-height: 1.5; margin: 0 0 12px 0; }

/* Ronda 107 (12/10/2026, pedido 27): la Luna del resultado gratis y los dos botones del final (el principal lleva a la Carta; el chico, a la cuenta). */
#eq-fp .fp-signo-resultado .fp-signo-luna { margin: 24px 0 8px 0; padding-top: 20px; border-top: 1px solid var(--eq-oro-linea); text-align: center; }
#eq-fp .fp-signo-resultado .fp-signo-luna .fp-signo-frase { margin-top: 6px; }
#eq-fp .fp-signo-resultado .fp-signo-luna .fp-signo-borde { margin-top: 14px; }
#eq-fp .fp-signo-resultado [data-fpg="cta-hora"] { display: block; width: max-content; max-width: 100%; margin: 14px auto 0 auto; font-size: 1rem; padding: 9px 18px; text-align: center; }

/* ===== Ronda 107 (12/10/2026, pedido 29): portada nueva (bloques B02 a B27) ===== */
.fp-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Hero: título, frase, botón (con su línea), línea del Tarot y tres tildes, en ese orden (la frase ya no va debajo de los botones). */
#eq-fp .fp-hero-texto .fp-hero-desc { order: 0; margin: 0 0 22px 0; max-width: 34em; font-size: 1.08rem; line-height: 1.55; }
#eq-fp .fp-hero-texto .fp-hero-ctas, #eq-fp .fp-hero-texto .fp-hero-confianza, #eq-fp .fp-hero-texto .fp-linea-prueba { order: 0; }
@media (min-width: 960px) {
    #eq-fp .fp-hero-texto .fp-hero-desc { order: 0; margin: 0 0 28px 0; font-size: 1.15rem; }
    #eq-fp .fp-hero-texto .fp-hero-ctas, #eq-fp .fp-hero-texto .fp-hero-confianza, #eq-fp .fp-hero-texto .fp-linea-prueba { order: 0; }
    #eq-fp .fp-hero-texto .fp-linea-prueba { margin-left: 0; text-align: left; }
}
/* «Para cuando…»: cuatro líneas, sin desplegables. */
#eq-fp .fp-paracuando { background: transparent; border-top: 1px solid var(--eq-oro-linea); padding-top: clamp(40px, 2rem + 3vw, 84px); padding-bottom: clamp(40px, 2rem + 3vw, 84px); }
#eq-fp .fp-paracuando-lista { list-style: none; margin: 0 auto; padding: 0; max-width: 1060px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
#eq-fp .fp-paracuando-lista li { position: relative; border: 1px solid var(--eq-oro-linea); border-radius: 12px; background: var(--eq-panel); backdrop-filter: blur(6px); padding: 18px 20px 18px 50px; font-size: 1.2rem; line-height: 1.45; color: var(--eq-luz); }
#eq-fp .fp-paracuando-lista li::before { content: '✦'; position: absolute; left: 20px; top: 18px; color: var(--eq-oro); }
@media (min-width: 760px) { #eq-fp .fp-paracuando-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
/* «Qué podés tener»: dos tarjetas y el plan anual como una línea de la segunda. */
#eq-fp .fp-grid-dos { max-width: 420px; }
@media (min-width: 760px) { #eq-fp .fp-grid-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; } }
#eq-fp .fp-plan .fp-btn-plan.fp-plan-anual { margin-top: 14px; width: 100%; min-height: 0; padding: 10px 6px; border: 0; background: none; color: var(--eq-oro-claro); font-family: var(--eq-lectura); font-size: 1.12rem; letter-spacing: 0; line-height: 1.4; text-transform: none; text-decoration: underline; text-underline-offset: 3px; }
#eq-fp .fp-plan .fp-btn-plan.fp-plan-anual:hover { background: none; color: var(--eq-luz); }
/* Móvil: una sola columna, sin carruseles (pedido 29, punto 1: nada escondido). Las herramientas se apilan en vez de deslizarse. */
@media (max-width: 639px) {
    #eq-fp .fp-grid-lentes { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; margin: 0; padding: 0; gap: 16px; }
}
/* En computadora el formulario gratis ya está en el inicio, al lado del título: la copia de más abajo (la del celular) no se repite. */
@media (min-width: 960px) { #eq-fp .fp-signo-gratis { display: none; } }

/* ===== Ronda 111 (13/10/2026, pedidos 42 y 43): portada con el copy v2 (docs/COPY-PORTADA-V2-13-10.md) ===== */
/* «Para qué sirve»: título y cuatro momentos, cada uno con su explicación. */
#eq-fp .fp-paracuando h2 { text-align: center; font-size: 1.5rem; letter-spacing: 1px; line-height: 1.35; max-width: 680px; margin: 0 auto 28px auto; }
#eq-fp .fp-paracuando-lista li h3 { font-family: var(--eq-lectura); font-size: 1.2rem; letter-spacing: 0; text-transform: none; line-height: 1.4; color: var(--eq-luz); margin: 0 0 6px 0; }
#eq-fp .fp-paracuando-lista li p { font-size: 1.08rem; line-height: 1.5; color: var(--eq-luz-dim); margin: 0; }
/* «Elegí cómo querés seguir»: interruptor Mensual / Anual y cuatro tarjetas por precio (2 × 2 en pantallas medianas, 4 en fila en las grandes). */
#eq-fp .fp-ciclo { display: flex; justify-content: center; gap: 0; width: max-content; max-width: 100%; margin: 26px auto 0 auto; padding: 4px; border: 1px solid var(--eq-oro-linea); border-radius: 40px; background: var(--eq-panel); }
#eq-fp .fp-ciclo-btn { border: 0; background: none; color: var(--eq-luz-dim); font-family: var(--eq-lectura); font-size: 1.05rem; line-height: 1.3; padding: 10px 18px; border-radius: 40px; cursor: pointer; }
#eq-fp .fp-ciclo-btn.activo { background: var(--eq-oro); color: #140f30; font-weight: 600; }
#eq-fp .fp-ciclo-btn:focus-visible { outline: 2px solid var(--eq-oro-claro); outline-offset: 2px; }
#eq-fp .fp-planes .fp-ciclo + .fp-grid-oferta { margin-top: 28px; }
#eq-fp .fp-grid-cuatro { max-width: 420px; }
@media (min-width: 760px) { #eq-fp .fp-grid-planes.fp-grid-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; } }
@media (min-width: 1200px) { #eq-fp .fp-grid-planes.fp-grid-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1240px; gap: 20px; } #eq-fp .fp-grid-cuatro .fp-plan { padding: 30px 22px; } }
#eq-fp .fp-plan-para { font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; color: var(--eq-oro-claro); margin: 0 0 10px 0; }
#eq-fp .fp-plan-cobro { font-size: 1rem; line-height: 1.45; color: var(--eq-luz); margin: 0 0 14px 0; }
#eq-fp .fp-plan-equivale { font-size: 0.98rem; color: var(--eq-luz-dim); margin: 0 0 6px 0; }
#eq-fp .fp-plan-partes { margin: 0 0 12px 0; padding-left: 1.1em; }
#eq-fp .fp-plan-partes li { font-size: 1.06rem; line-height: 1.45; color: var(--eq-luz-dim); margin: 0 0 6px 0; }
#eq-fp .fp-plan-garantia { font-size: 0.98rem; line-height: 1.45; color: var(--eq-luz-dim); text-align: center; margin: 12px 0 0 0; }
#eq-fp .fp-ciclo-cara { display: flex; flex-direction: column; flex: 1; }
#eq-fp .fp-planes[data-ciclo="mensual"] .fp-ciclo-cara[data-cara="anual"],
#eq-fp .fp-planes[data-ciclo="anual"] .fp-ciclo-cara[data-cara="mensual"] { display: none; }
/* El cierre, antes de las preguntas frecuentes. */
#eq-fp .fp-cierre { text-align: center; border-top: 1px solid var(--eq-oro-linea); padding-top: clamp(40px, 2rem + 3vw, 84px); padding-bottom: clamp(40px, 2rem + 3vw, 84px); }
#eq-fp .fp-cierre h2 { font-size: 1.5rem; letter-spacing: 1px; line-height: 1.35; max-width: 640px; margin: 0 auto 14px auto; }
#eq-fp .fp-cierre p { font-size: 1.15rem; line-height: 1.55; color: var(--eq-luz-dim); max-width: 560px; margin: 0 auto 26px auto; }
/* Precio en una línea («US$» pegado al número) y la nota debajo, porque con cuatro tarjetas cada una es más angosta. */
#eq-fp .fp-grid-cuatro .fp-plan-precio { white-space: nowrap; }
#eq-fp .fp-grid-cuatro .fp-plan-precio small { display: block; margin: 2px 0 0 0; }

/* ===== Ronda 117 (13/10/2026, pedidos 46 y 47; Diego: «directamente paso a la producción»): la portada en el celular =====
   Títulos en EB Garamond (frase normal, no todo en mayúsculas); Cinzel queda para la marca. Texto alineado a la izquierda,
   la frase del inicio en dos párrafos, botón con esquinas redondeadas y letra de frase, y lo gratis como lista corta. */
#eq-fp h2, #eq-fp h3 { font-family: var(--eq-lectura); font-weight: 500; letter-spacing: 0; }
#eq-fp .fp-hero-texto { text-align: left; }
#eq-fp .fp-hero-constelacion { display: block; width: 168px; height: auto; color: var(--eq-oro-claro); margin: 0 0 18px -2px; }
#eq-fp .fp-hero-sub { font-family: var(--eq-lectura); font-weight: 500; font-size: 2.35rem; line-height: 1.08; letter-spacing: -0.2px; text-transform: none; margin: 0 0 22px 0; max-width: 16ch; color: var(--eq-luz); }
#eq-fp .fp-hero-texto .fp-hero-desc { text-align: left; margin: 0 0 12px 0; max-width: 34em; }
#eq-fp .fp-hero-texto .fp-hero-lead { font-size: 1.28rem; line-height: 1.45; color: var(--eq-luz); }
#eq-fp .fp-hero-texto .fp-hero-desc2 { font-size: 1.08rem; line-height: 1.6; color: var(--eq-luz-dim); margin-bottom: 28px; }
#eq-fp .fp-hero-ctas { justify-content: flex-start; }
#eq-fp .fp-hero-texto .fp-btn-xl { border-radius: 999px; font-family: var(--eq-lectura); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.2px; text-transform: none; padding: 16px 26px 14px; min-height: 0; }
#eq-fp .fp-hero-texto .fp-btn-mini { font-size: 0.92rem; font-weight: 500; margin-top: 2px; }
#eq-fp .fp-hero-confianza { align-items: stretch; margin: 30px 0 0 0; gap: 0; border-top: 1px solid var(--eq-oro-linea); }
#eq-fp .fp-hero-confianza li { display: block; text-align: left; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--eq-oro-linea); position: relative; font-size: 1.02rem; line-height: 1.45; color: var(--eq-luz-dim); }
#eq-fp .fp-hero-confianza li::before { content: '✦'; position: absolute; left: 2px; top: 13px; color: var(--eq-oro); font-size: 0.85rem; }
#eq-fp .fp-hero-confianza li strong { display: block; font-weight: 600; color: var(--eq-luz); font-size: 1.1rem; }
#eq-fp .fp-hero-texto { align-items: flex-start; }
#eq-fp .fp-hero-texto .fp-hero-sub { margin-left: 0; margin-right: 0; }
#eq-fp .fp-hero-texto .fp-hero-ctas, #eq-fp .fp-hero-texto .fp-hero-confianza { width: 100%; align-self: stretch; }
/* Formulario gratis: rótulos en letra normal (no todo en mayúsculas), título y botón como el del inicio. */
#eq-fp .fp-form-gratis label { font-family: var(--eq-lectura); font-size: 1.02rem; letter-spacing: 0; text-transform: none; color: var(--eq-luz); }
#eq-fp .fp-signo-caja h2 { font-size: 1.9rem; line-height: 1.15; }
#eq-fp .fp-form-gratis .fp-btn { border-radius: 999px; font-family: var(--eq-lectura); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.2px; text-transform: none; }
#eq-fp .fp-signo-caja .fp-hero-badge { font-family: var(--eq-lectura); letter-spacing: 0.3px; text-transform: none; font-size: 0.95rem; }
/* Todos los botones de la portada igual: letra normal, sin mayúsculas, esquinas redondeadas. */
#eq-fp .fp-btn { border-radius: 999px; font-family: var(--eq-lectura); font-weight: 600; letter-spacing: 0.2px; text-transform: none; }
#eq-fp .fp-cta-sticky .fp-btn { font-size: 1.12rem; }
#eq-fp .fp-plan h3 { font-size: 1.45rem; letter-spacing: 0; }
#eq-fp .fp-plan-para { letter-spacing: 0.3px; text-transform: none; font-size: 1rem; font-style: italic; }
#eq-fp .fp-form-gratis input[type="time"] { color-scheme: dark; } /* el reloj del campo de la hora, claro sobre el fondo oscuro */
/* Ronda 117 (13/10/2026, Diego: «otra vez el mismo bloque gigante de texto en la primera parte… todo chiquitito»): arriba sólo el título,
   una línea y el botón, todo más grande. Las tildes salen del inicio (lo gratis ya lo dice la línea del botón). */
#eq-fp .fp-hero-texto .fp-hero-sub { font-size: 2.75rem; line-height: 1.04; max-width: 13ch; }
#eq-fp .fp-hero-texto .fp-hero-desc, #eq-fp .fp-hero-texto .fp-hero-lead { font-size: 1.45rem; line-height: 1.4; color: var(--eq-luz); margin-bottom: 30px; }
#eq-fp .fp-hero-texto .fp-btn-xl { font-size: 1.45rem; padding: 20px 26px 17px; }
#eq-fp .fp-hero-texto .fp-btn-mini { font-size: 1.02rem; }
#eq-fp .fp-hero-constelacion { width: 200px; }
#eq-fp .fp-hero-texto .fp-hero-sub { max-width: none; font-size: 2.6rem; text-wrap: balance; }
#eq-fp .fp-hero-texto .fp-btn-mini { font-size: 0.98rem; text-wrap: balance; }
@media (min-width: 960px) {
    #eq-fp .fp-hero-texto .fp-hero-sub { font-size: 3.6rem; line-height: 1.05; }
    #eq-fp .fp-hero-texto .fp-hero-desc, #eq-fp .fp-hero-texto .fp-hero-lead { font-size: 1.6rem; }
}
/* Ronda 117 (decisión 2 de la ronda de copy del 13/10): la línea de la primera pantalla grande; el párrafo de siempre y las tildes, justo debajo del
   botón. Nada de letra chica: en el celular, el texto corrido va a 18 px o más. */
#eq-fp .fp-hero-texto .fp-hero-linea { font-size: 1.45rem; line-height: 1.4; color: var(--eq-luz); margin: 0 0 28px 0; max-width: 30em; }
#eq-fp .fp-hero-texto .fp-hero-ctas + .fp-hero-lead, #eq-fp .fp-hero-texto .fp-hero-ctas + .fp-hero-desc { margin-top: 46px; }
#eq-fp .fp-hero-texto .fp-hero-lead { font-size: 1.3rem; line-height: 1.45; margin: 46px 0 12px 0; }
#eq-fp .fp-hero-texto .fp-hero-desc2 { font-size: 1.15rem; line-height: 1.6; margin: 0 0 8px 0; }
@media (max-width: 759px) {
    #eq-fp p, #eq-fp li, #eq-fp .fp-plan-texto p, #eq-fp .fp-faq-item p, #eq-fp .fp-dif p, #eq-fp .fp-paso p, #eq-fp .fp-paracuando-lista li p { font-size: max(1.125rem, 1em); }
}
@media (min-width: 960px) { #eq-fp .fp-hero-texto .fp-hero-linea { font-size: 1.6rem; } }
/* La primera pantalla del celular (título, línea y botón) ocupa la pantalla entera: el párrafo de siempre empieza recién al bajar. */
@media (max-width: 959px) {
    #eq-fp .fp-hero-primera { min-height: calc(100svh - 130px); display: flex; flex-direction: column; justify-content: center; width: 100%; }
    #eq-fp .fp-hero-texto .fp-hero-ctas + .fp-hero-lead, #eq-fp .fp-hero-primera + .fp-hero-lead { margin-top: 40px; }
}
/* Ronda 117 (pedido 47): la lista de ciudades del lugar de nacimiento. */
#eq-fp .fp-lugar-sug { display: flex; flex-direction: column; margin: 4px 0 0 0; border: 1px solid var(--eq-oro-linea); border-radius: 10px; background: #160f33; overflow: hidden; }
#eq-fp .fp-lugar-sug[hidden] { display: none; }
#eq-fp .fp-lugar-sug button { text-align: left; background: none; border: 0; border-bottom: 1px solid var(--eq-oro-linea); color: var(--eq-luz); font-family: var(--eq-lectura); font-size: 1.05rem; padding: 10px 12px; cursor: pointer; }
#eq-fp .fp-lugar-sug button:last-child { border-bottom: 0; }
#eq-fp .fp-lugar-sug button:hover, #eq-fp .fp-lugar-sug button:focus-visible { background: rgba(214, 170, 76, 0.16); outline: none; }

/* Ronda 122 (19/10/2026, pedido 48d): el dibujo de las 13 constelaciones en el resultado gratis, con el mismo aspecto que en la historia:
   centrado, ancho completo hasta 360 px sin achicarse, la lista en dos columnas y letra de 18 px. */
#eq-fp .fp-signo-rueda { margin: 0 auto 22px auto; max-width: 40em; text-align: center; }
#eq-fp .fp-signo-rueda[hidden] { display: none; }
#eq-fp .fp-signo-rueda .eq-gr-titulo { font-family: Cinzel, serif; color: #FDE08B; font-size: 1.25rem; margin: 0 0 6px 0; }
#eq-fp .fp-signo-rueda .eq-gr-texto { font-size: 1.125rem; line-height: 1.55; margin: 0 0 10px 0; }
#eq-fp .fp-signo-rueda .eq-gr-frase { font-size: 1.125rem; line-height: 1.55; font-style: italic; margin: 0 0 14px 0; }
#eq-fp .fp-signo-rueda .eq-cg-rueda { flex: none; width: 100%; max-width: 520px; height: auto; display: block; margin: 10px auto; }
#eq-fp .fp-signo-rueda .eq-cg-leyenda { list-style: none; margin: 8px auto 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 1.125rem; max-width: 520px; text-align: left; }
#eq-fp .fp-signo-rueda .eq-cg-leyenda li { display: flex; align-items: center; gap: 8px; min-width: 0; }
#eq-fp .fp-signo-rueda .eq-cg-leyenda span { overflow-wrap: anywhere; min-width: 0; }
#eq-fp .fp-signo-rueda .eq-cg-leyenda b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #FDE08B; color: #FDE08B; font-size: .75rem; flex: none; }

/* Ronda 132c: «Continuar con Google» en el formulario gratis y en la compra (blanco, como pide la guía de marca de Google; 48 px para el dedo). */
.fp-google-bloque { margin: 0 0 14px; }
.fp-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; box-sizing: border-box; padding: 12px 16px; background: #fff; color: #1b2a44; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 3px; font-family: inherit; font-size: 1rem; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s ease; }
#eq-fp .fp-google-btn, .fp-modal .fp-google-btn, #eq-fp .fp-google-btn:hover, .fp-modal .fp-google-btn:hover, #eq-fp .fp-google-btn:focus, .fp-modal .fp-google-btn:focus { color: #1b2a44; opacity: 1; text-decoration: none; }
.fp-google-btn:hover, .fp-google-btn:focus { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.fp-google-o { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 0.92rem; opacity: 0.75; }
.fp-google-o::before, .fp-google-o::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.35; }