/* ============================================
   THE LADY PILL — Capa cinematográfica
   effects.css · Se carga después de style.css
   Todos los efectos requieren body.fx-on (JS activo).
   Sin JS o con prefers-reduced-motion: la web se ve normal.
   ============================================ */

/* ---------- 1. Barra de progreso de lectura ---------- */
.fx-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--color-wine), var(--color-wine-light));
    z-index: 2000;
    pointer-events: none;
}

/* ---------- 2. Grano de película (muy sutil) ---------- */
/* Grano estático: mismo aspecto de cine, coste de render cero
   (la versión animada penalizaba PageSpeed/INP en móvil) */
.fx-on::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Revelado de secciones (scroll) ---------- */
/* Solo opacity + transform: las dos propiedades que la GPU anima gratis.
   (blur() penalizaba el rendimiento en móviles modestos) */
.fx-on .fx-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--fx-delay, 0s);
}

.fx-on .fx-reveal.fx-in {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- 4. Texto palabra a palabra (estilo tráiler) ---------- */
.fx-on .fx-words .fx-w {
    opacity: 0.14;
    transition: opacity 0.5s ease;
    transition-delay: calc(var(--wi) * 0.06s);
}

.fx-on .fx-words.fx-in .fx-w {
    opacity: 1;
}

/* ---------- 5. Hero cinematográfico ---------- */
.fx-on .fx-cine .title-line,
.fx-on .fx-cine .fx-hline {
    opacity: 0;
    transform: translateY(60px);
    letter-spacing: 0.08em;
    animation: fx-hero-line 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fx-on .fx-cine .title-line:nth-child(2),
.fx-on .fx-cine .fx-hline:nth-child(2) { animation-delay: 0.25s; }

@keyframes fx-hero-line {
    0% { opacity: 0; transform: translateY(60px); letter-spacing: 0.12em; filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0); letter-spacing: normal; filter: blur(0); }
}

.fx-on .fx-cine ~ .hero-subtitle,
.fx-on .fx-cine-sub {
    opacity: 0;
    animation: fx-fade-up 1.1s ease 0.7s forwards;
}

.fx-on .fx-cine-sub2 {
    opacity: 0;
    animation: fx-fade-up 1.1s ease 1.05s forwards;
}

@keyframes fx-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- 6. SECCIÓN LA RANA (scroll narrativo) ---------- */
.rana {
    position: relative;
    height: 440vh;
    background: var(--color-black);
}

.rana-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 clamp(1.25rem, 5vw, 2.5rem);
    /* El calor sube con el scroll: --heat va de 0 a 1 (lo controla JS).
       El resplandor queda contenido en la parte baja de la escena,
       sin sangrar hacia la sección siguiente. */
    background:
        radial-gradient(ellipse 110% 55% at 50% 100%,
            rgba(139, 0, 0, calc(var(--heat, 0) * 0.45)) 0%,
            rgba(80, 10, 10, calc(var(--heat, 0) * 0.22)) 45%,
            transparent 72%),
        var(--color-black);
}

/* Burbujas que suben — se intensifican con el calor */
.rana-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--heat, 0);
}

.rana-bubble {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.25), rgba(139, 0, 0, 0.15));
    animation: fx-bubble linear infinite;
    animation-duration: calc(7s - var(--heat, 0) * 4s);
}

.rana-bubble:nth-child(1) { left: 12%; width: 10px; height: 10px; animation-delay: 0s; }
.rana-bubble:nth-child(2) { left: 26%; width: 6px; height: 6px; animation-delay: 1.4s; }
.rana-bubble:nth-child(3) { left: 41%; width: 14px; height: 14px; animation-delay: 0.6s; }
.rana-bubble:nth-child(4) { left: 55%; width: 8px; height: 8px; animation-delay: 2.2s; }
.rana-bubble:nth-child(5) { left: 68%; width: 12px; height: 12px; animation-delay: 1s; }
.rana-bubble:nth-child(6) { left: 81%; width: 7px; height: 7px; animation-delay: 2.8s; }
.rana-bubble:nth-child(7) { left: 90%; width: 10px; height: 10px; animation-delay: 0.3s; }
.rana-bubble:nth-child(8) { left: 6%; width: 5px; height: 5px; animation-delay: 3.4s; }

@keyframes fx-bubble {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    15% { opacity: 0.9; }
    100% { transform: translateY(-105vh) scale(1.1); opacity: 0; }
}

/* Termómetro */
.rana-temp {
    font-family: var(--font-display);
    font-size: clamp(4rem, 14vw, 9rem);
    font-weight: 600;
    line-height: 1;
    color: var(--rana-color, #7d98a1);
    margin-bottom: clamp(1rem, 3vh, 2rem);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 60px rgba(139, 0, 0, calc(var(--heat, 0) * 0.8));
    transition: color 0.3s linear;
}

.rana-temp sup {
    font-size: 0.4em;
    font-weight: 400;
    color: inherit;
    opacity: 0.7;
}

.rana-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-gray-text);
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

/* Frases que se van sucediendo */
.rana-steps {
    position: relative;
    width: 100%;
    max-width: 680px;
    min-height: clamp(9rem, 24vh, 13rem);
}

.rana-step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    pointer-events: none;
}

.rana-step.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.rana-step p {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.6vw, 2rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-white);
    text-wrap: balance;
}

.rana-step p em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.55);
}

.rana-step .rana-small {
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 2vw, 1rem);
    color: var(--color-gray-text);
    margin-top: 1rem;
    line-height: 1.7;
}

.rana-step .rana-wine {
    color: var(--color-wine-light);
    font-style: normal;
}

.rana-cta {
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--color-wine);
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1rem 2.2rem;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.rana-cta:hover {
    background: var(--color-wine-light);
    transform: translateY(-2px);
}

/* Indicador de scroll */
.rana-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gray-text);
    opacity: calc(1 - var(--heat, 0) * 3);
    animation: fx-hint 2s ease-in-out infinite;
}

@keyframes fx-hint {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* MODO HISTORIA (móvil): sin scroll gigante — la fábula ocupa una
   pantalla y avanza al tocar, con el scroll bloqueado mientras dura */
body.rana-story .rana {
    height: auto;
}

body.rana-story .rana-sticky {
    position: relative;
    /* dvh: llena el viewport REAL aunque la barra del navegador
       aparezca o desaparezca — sin huecos ni bandas debajo */
    height: 100vh;
    height: 100dvh;
    cursor: pointer;
    padding-bottom: 6rem; /* sitio reservado para el aviso de tocar */
}

/* Escena compacta en móvil: el termómetro cede espacio al texto */
body.rana-story .rana-temp {
    font-size: clamp(3.2rem, 17vw, 4.8rem);
    margin-bottom: 1rem;
}

body.rana-story .rana-eyebrow {
    margin-bottom: 1.25rem;
}

body.rana-story .rana-steps {
    min-height: clamp(11rem, 32vh, 16rem);
}

body.rana-story .rana-step p {
    font-size: clamp(1.2rem, 5.5vw, 1.6rem);
}

.rana-skip {
    position: absolute;
    top: calc(1rem + 60px);
    right: 1rem;
    background: rgba(26, 26, 26, 0.7);
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray-text);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-full);
    min-height: 0;
    min-width: 0;
    cursor: pointer;
    z-index: 5;
}

body.rana-story .rana-hint {
    opacity: 1;
    bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem));
    background: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    animation: none;
    transition: opacity 0.4s ease;
    z-index: 6;
}

/* Icono grande de "tap": dedo que pulsa + ondas que emanan */
.rana-tap-icon {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}

.tap-mano {
    animation: fx-tap-press 1.5s ease-in-out infinite;
    transform-origin: 12px 12px;
}

.rana-tap-icon circle {
    animation: fx-tap-press 1.5s ease-in-out infinite;
}

.tap-onda {
    opacity: 0;
    animation: fx-tap-onda 1.5s ease-out infinite;
}

.tap-onda-2 { animation-delay: 0.15s; }

@keyframes fx-tap-press {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(2.5px); }
}

@keyframes fx-tap-onda {
    0%, 35% { opacity: 0; }
    55% { opacity: 1; }
    100% { opacity: 0; }
}

/* Mientras la historia bloquea el scroll, la CTA flotante desaparece:
   solo debe existir una acción posible — tocar. */
body.rana-locked .fx-sticky-cta {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(140%) !important;
}

/* Sin JS: la sección rana se muestra como bloque normal */
body:not(.fx-on) .rana { height: auto; padding: var(--space-3xl) 0; }
body:not(.fx-on) .rana-sticky { position: static; height: auto; }
body:not(.fx-on) .rana-steps { min-height: 0; }
body:not(.fx-on) .rana-step { position: static; opacity: 1; transform: none; margin-bottom: 2.5rem; }
body:not(.fx-on) .rana-hint { display: none; }

/* ---------- 7. CTA fija (sticky bottom) ---------- */
.fx-sticky-cta {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1500;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-wine);
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.95rem 1.75rem;
    border-radius: var(--radius-full);
    box-shadow: 0 12px 40px rgba(139, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.5);
    transform: translateY(140%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, background 0.2s ease;
}

.fx-sticky-cta.visible {
    transform: translateY(0);
    opacity: 1;
}

.fx-sticky-cta:hover {
    background: var(--color-wine-light);
}

.fx-sticky-cta .fx-cta-sub {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.75;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 640px) {
    .fx-sticky-cta {
        right: 0.75rem;
        left: auto;
        bottom: 0.75rem;
        padding: 0.85rem 1.4rem;
        font-size: 0.78rem;
    }
}

/* ---------- 9. Hueco de vídeo (para tus vídeos futuros) ---------- */
.fx-video {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-gray-dark);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 120px rgba(139, 0, 0, 0.12);
}

.fx-video video,
.fx-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

/* ---------- 10. Tarjetas: brillo al pasar el ratón ---------- */
.fx-on .problem-card,
.fx-on .prox-card,
.fx-on .content-card,
.fx-on .form-course-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.fx-on .problem-card:hover,
.fx-on .prox-card:hover,
.fx-on .content-card:hover,
.fx-on .form-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(139, 0, 0, 0.12);
}

/* ---------- 11. TEST DE LA RANA ---------- */
.test-rana {
    padding: var(--space-xl) 0 var(--space-3xl);
    margin-top: -1px; /* sin línea de corte entre secciones */
    background: var(--color-black);
}

.test-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-xl); }

.test-eyebrow {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-wine-light);
    margin-bottom: 1rem;
}

.test-title {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.test-sub { color: var(--color-gray-text); font-size: 0.95rem; }

.test-box {
    max-width: 640px;
    margin: 0 auto;
    background: var(--color-gray-dark);
    border: 1px solid var(--color-gray-medium);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3.5rem);
    min-height: 340px;
    position: relative;
    overflow: hidden;
}

.test-screen { display: none; text-align: center; }
.test-screen.active { display: block; animation: fx-fade-up 0.45s ease; }

.test-start-text {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3vw, 1.45rem);
    font-style: italic;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.test-btn-primary,
.test-btn-answer {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.test-btn-primary {
    background: var(--color-wine);
    color: var(--color-white);
    font-size: 0.9rem;
    padding: 1.05rem 2.5rem;
}

.test-btn-primary:hover { background: var(--color-wine-light); transform: translateY(-2px); }

.test-progress {
    height: 3px;
    background: var(--color-gray-medium);
    border-radius: var(--radius-full);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.test-progress-fill {
    height: 100%;
    width: 0;
    background: var(--color-wine);
    transition: width 0.35s ease;
}

.test-q-counter { font-size: 0.75rem; letter-spacing: 0.15em; color: var(--color-gray-text); margin-bottom: 1.5rem; }

.test-q-text {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3.4vw, 1.7rem);
    color: var(--color-white);
    line-height: 1.55;
    min-height: 5.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-wrap: balance;
    margin-bottom: 2rem;
}

.test-q-actions { display: flex; gap: 1rem; justify-content: center; }

.test-btn-answer {
    background: transparent;
    color: var(--color-white);
    border: 1px solid var(--color-gray-light);
    font-size: 0.95rem;
    padding: 0.95rem 3.2rem;
}

.test-btn-answer:hover { background: var(--color-wine); border-color: var(--color-wine); }

.test-result-label {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-gray-text);
    margin-bottom: 0.5rem;
}

.test-result-temp {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 10vw, 5.5rem);
    font-weight: 600;
    color: var(--color-wine-light);
    line-height: 1;
    margin-bottom: 1.25rem;
}

.test-result-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    max-width: 480px;
    margin: 0 auto 1rem;
}

.test-result-help {
    font-size: 0.85rem;
    color: var(--color-gray-text);
    background: rgba(139, 0, 0, 0.12);
    border: 1px solid rgba(139, 0, 0, 0.35);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.25rem;
    max-width: 480px;
    margin: 0 auto 1rem;
    line-height: 1.7;
}

.test-result-capture { margin-top: 1.75rem; border-top: 1px solid var(--color-gray-medium); padding-top: 1.75rem; }

.test-capture-text {
    font-family: var(--font-display);
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.test-capture-note { font-size: 0.75rem; color: var(--color-gray-text); margin-top: 0.85rem; }

.test-capture-done {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-white);
    line-height: 1.8;
}

.test-capture-done em { color: var(--color-gray-text); font-size: 0.9em; }

/* ---------- 11b. LAS FRASES (gaslighting, estilo confesional) ---------- */
.frases {
    padding: var(--space-3xl) 0;
    background: var(--color-black);
}

.frases-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-2xl); }

.frases-eyebrow {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-wine-light);
    margin-bottom: 1rem;
}

.frases-title {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--color-white);
    line-height: 1.3;
}

/* Lista vertical (se usa en comunidad.html) */
.frases-list {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 6vh, 4rem);
}

.frase-item { text-align: center; }

.frase-quote {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-style: italic;
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.45;
    text-wrap: balance;
    margin-bottom: 0.9rem;
}

.frase-reframe {
    font-size: clamp(0.9rem, 2.2vw, 1rem);
    color: var(--color-gray-text);
    line-height: 1.75;
    max-width: 480px;
    margin: 0 auto;
}

.frase-reframe strong { color: var(--color-wine-light); font-weight: 600; }

/* Conversación (home): él habla a la izquierda, la verdad responde a la derecha.
   Mismo diseño en móvil y escritorio — limpio, legible, sin carruseles. */
.frases-carousel {
    display: flex;
    flex-direction: column;
    gap: clamp(2.25rem, 5vh, 3.25rem);
    max-width: 760px;
    margin: 0 auto;
    padding: 0.5rem 0 1rem;
}

.frase-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.frase-label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gray-text);
}

.frase-label-verdad {
    color: var(--color-wine-light);
    align-self: flex-end;
    margin-top: 0.8rem;
}

.frase-bubble {
    align-self: flex-start;
    background: #262626;
    border-radius: 20px 20px 20px 5px;
    padding: clamp(0.9rem, 2.5vw, 1.15rem) clamp(1.15rem, 3vw, 1.7rem);
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.15rem, 3.2vw, 1.65rem);
    color: var(--color-white);
    line-height: 1.5;
    max-width: 88%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.frase-card .frase-reframe {
    align-self: flex-end;
    max-width: 82%;
    text-align: right;
    font-size: clamp(0.9rem, 2.4vw, 1.05rem);
    line-height: 1.8;
    border-right: 2px solid var(--color-wine);
    padding-right: 1rem;
    margin: 0;
}

.frases-hint { display: none; }

@media (min-width: 920px) {
    .frase-bubble { max-width: 78%; }
    .frase-card .frase-reframe { max-width: 62%; }
}

.frases-cierre {
    text-align: center;
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-gray-medium);
}

.frases-cierre p {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    color: var(--color-white);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-wrap: balance;
}

.frases-cierre p em { color: var(--color-wine-light); font-style: normal; }

/* ---------- 11c. COMUNIDAD: carta + muro de mensajes ---------- */
.carta {
    max-width: 620px;
    margin: var(--space-2xl) auto;
    background: #141414;
    border: 1px solid var(--color-gray-medium);
    border-left: 3px solid var(--color-wine);
    border-radius: var(--radius-md);
    padding: clamp(1.75rem, 4vw, 2.75rem);
}

.carta-eyebrow {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-wine-light);
    margin-bottom: 1.25rem;
}

.carta p {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.6vw, 1.15rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.9;
    margin-bottom: 1.1rem;
}

.carta p em { color: var(--color-wine-light); font-style: italic; }

.carta-firma {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-gray-text);
    margin-top: 1.5rem;
}

/* Muro de mensajes (para mensajes REALES de miembros) */
.wsp-wall {
    max-width: 560px;
    margin: 0 auto var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.wsp-msg {
    align-self: flex-start;
    max-width: 88%;
    background: #1e1e1e;
    border: 1px solid #2c2c2c;
    border-radius: 14px 14px 14px 4px;
    padding: 0.8rem 1rem 0.55rem;
}

.wsp-msg p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
    margin-bottom: 0.3rem;
}

.wsp-meta {
    display: block;
    text-align: right;
    font-size: 0.68rem;
    color: var(--color-gray-text);
}

/* ---------- 11d. DEMO DEL CANAL (comunidad) ---------- */
.chat-demo {
    max-width: 430px;
    margin: var(--space-2xl) auto;
    background: #101010;
    border: 1px solid var(--color-gray-medium);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.chat-demo-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.15rem;
    background: #181818;
    border-bottom: 1px solid var(--color-gray-medium);
}

.chat-demo-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-wine);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.chat-demo-head strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-white);
    line-height: 1.3;
}

.chat-demo-head span {
    display: block;
    font-size: 0.72rem;
    color: var(--color-gray-text);
}

.chat-demo-body {
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background:
        radial-gradient(ellipse 120% 100% at 50% 0%, rgba(139, 0, 0, 0.06), transparent 60%),
        #0d0d0d;
}

.chat-demo .wsp-msg {
    background: #1d1212;
    border: 1px solid #33201f;
}

.wsp-audio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem !important;
}

.wsp-play {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-wine);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.wsp-wave {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 20px;
}

.wsp-wave i {
    display: inline-block;
    width: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.45);
}

.wsp-wave i:nth-child(odd) { height: 60%; }
.wsp-wave i:nth-child(even) { height: 95%; }
.wsp-wave i:nth-child(3n) { height: 40%; }

.wsp-dur { font-size: 0.72rem; color: var(--color-gray-text); }

.chat-demo-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-gray-text);
    padding: 0.85rem 1rem 1.1rem;
    background: #101010;
}

/* Semana dentro de la comunidad */
.semana {
    max-width: 560px;
    margin: 0 auto var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.semana-dia {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 0.8rem 1rem;
    background: #131313;
    border: 1px solid var(--color-gray-medium);
    border-radius: var(--radius-md);
}

.semana-dia strong {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-wine-light);
}

.semana-dia p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); line-height: 1.6; }

/* ---------- 12. DOSIS DE EJEMPLO ---------- */
.dosis-ejemplo { padding: var(--space-3xl) 0; background: var(--color-black); }

.dosis-header { text-align: center; margin-bottom: var(--space-xl); }

.dosis-eyebrow {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 1rem;
}

.dosis-title { font-family: var(--font-display); font-weight: 500; color: var(--color-white); }

.dosis-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(0.98rem, 2.5vw, 1.15rem);
    color: var(--color-gray-text);
    line-height: 1.7;
    margin-top: 0.85rem;
}

/* Pestañas: Pareja · Trabajo · El espejo */
.dosis-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto var(--space-md);
    max-width: 620px;
}

.dosis-tab {
    background: transparent;
    border: 1px solid var(--color-gray-medium);
    color: var(--color-gray-text);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    min-height: 0;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.dosis-tab:hover { color: var(--color-white); border-color: var(--color-gray-light); }

.dosis-tab.active {
    background: var(--color-wine);
    border-color: var(--color-wine);
    color: var(--color-white);
}

.dosis-panel { display: none; }
.dosis-panel.active { display: block; animation: fx-fade-up 0.4s ease; }

.dosis-footer-comun {
    max-width: 620px;
    margin: var(--space-lg) auto 0;
    border-top: none !important;
    padding-top: 0 !important;
}

.dosis-footer-comun em { color: var(--color-wine-light); font-style: italic; }

@media (max-width: 480px) {
    .dosis-tab { padding: 0.6rem 1rem; font-size: 0.72rem; flex: 1; }
}

.dosis-card {
    max-width: 620px;
    margin: 0 auto;
    background: #101010;
    border: 1px solid var(--color-gray-medium);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.dosis-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-gray-text);
    border-bottom: 1px solid var(--color-gray-medium);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.dosis-num { color: var(--color-wine-light); font-weight: 600; }

.dosis-asunto {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

.dosis-body p { color: rgba(255, 255, 255, 0.78); line-height: 1.85; margin-bottom: 1.1rem; font-size: 0.98rem; }

.dosis-body strong { color: var(--color-white); }

.dosis-frase {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--color-wine-light) !important;
    text-align: center;
    padding: 0.5rem 0;
}

.dosis-card-bottom {
    border-top: 1px solid var(--color-gray-medium);
    padding-top: 1.5rem;
    margin-top: 1.75rem;
    text-align: center;
}

.dosis-card-bottom p {
    font-size: 0.85rem;
    color: var(--color-gray-text);
    margin-bottom: 1rem;
}

/* ---------- 12b. LA PREGUNTA (fondo oscuro, editorial) ---------- */
.extracto {
    background: var(--color-black);
    border-top: 1px solid var(--color-gray-medium);
    border-bottom: 1px solid var(--color-gray-medium);
    padding: var(--space-3xl) 0;
}

.extracto-inner {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 2.5rem);
}

.extracto-eyebrow {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-wine-light);
    margin-bottom: 2rem;
}

.extracto-lead {
    font-size: clamp(1.5rem, 4.5vw, 2.2rem) !important;
    font-weight: 500;
    line-height: 1.4 !important;
    margin-bottom: 2rem !important;
    color: var(--color-white) !important;
}

.extracto-inner p {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.8vw, 1.25rem);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.85;
    margin-bottom: 1.4rem;
}

.extracto-inner p strong { font-weight: 600; color: var(--color-white); }

.extracto-cierre {
    font-size: clamp(1.15rem, 3.2vw, 1.5rem) !important;
    line-height: 1.6 !important;
    color: var(--color-white) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 1.75rem;
    margin-top: 2rem !important;
}

.extracto-cierre strong { color: var(--color-wine-light) !important; }

/* Cita dentro de cada dosis del índice */
.dosis-idx-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.98rem !important;
    color: var(--color-wine-light) !important;
    margin-bottom: 0.4rem;
}

/* ---------- 12c. ÍNDICE DE LAS 10 DOSIS ---------- */
.dosis-idx {
    max-width: 680px;
    margin: 0 auto;
}

.dosis-idx-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.25rem;
    align-items: baseline;
    padding: 1.15rem 0.5rem;
    border-bottom: 1px solid var(--color-gray-medium);
}

.dosis-idx-num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-wine-light);
    text-align: right;
}

.dosis-idx-item h3 {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.02em;
    margin-bottom: 0.15rem;
}

.dosis-idx-item p {
    font-size: 0.88rem;
    color: var(--color-gray-text);
    line-height: 1.7;
}

.dosis-idx-item { align-items: start; }

/* ---------- 12d. LO QUE ENCONTRARÁS DENTRO (ebook) ---------- */
.dentro-list {
    max-width: 640px;
    margin: 0 auto var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    text-align: left;
}

.dentro-item {
    border-left: 2px solid var(--color-wine);
    padding-left: clamp(1rem, 3vw, 1.5rem);
}

.dentro-item h3 {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.8vw, 1.3rem);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 0.4rem;
}

.dentro-item p {
    font-size: 0.93rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.8;
}

.dentro-item p em {
    font-family: var(--font-display);
    color: var(--color-white);
}

.dentro-ritmo {
    max-width: 640px;
    margin: 0 auto var(--space-xl);
    background: #141414;
    border: 1px solid var(--color-gray-medium);
    border-radius: var(--radius-md);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    text-align: left;
}

.dentro-ritmo h3 {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3vw, 1.4rem);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 0.6rem;
}

.dentro-ritmo p {
    font-size: 0.93rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.85;
}

.dentro-promesa {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.6vw, 1.9rem);
    color: var(--color-white);
    line-height: 1.55;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    text-wrap: balance;
}

.dentro-promesa em {
    color: var(--color-wine-light);
    font-style: italic;
}

/* Versión magra: 4 palabras SIEMPRE en línea (4 en desktop, 2x2 en móvil) */
.dentro-list--lean {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    max-width: 760px;
    margin: 0 auto;
}

.dentro-list--lean .dentro-item {
    border-left: none;
    padding: 0.9rem 0.5rem;
    background: #141414;
    border: 1px solid var(--color-gray-medium);
    border-radius: var(--radius-md);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dentro-list--lean .dentro-item h3 {
    margin: 0;
    font-size: clamp(0.85rem, 2.4vw, 1.15rem);
    color: var(--color-white);
    line-height: 1.3;
}

@media (max-width: 560px) {
    .dentro-list--lean { grid-template-columns: repeat(2, 1fr); }
}

/* Prestigio — sobrio, vende calidad no emoción */
.prestigio {
    padding: var(--space-3xl) 0;
    background: var(--color-black);
    text-align: center;
}

.prestigio-lead {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 2.1rem);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.5;
    max-width: 640px;
    margin: 0 auto var(--space-xl);
    text-wrap: balance;
}

.prestigio-lead em { font-style: italic; color: rgba(255, 255, 255, 0.6); }

.prestigio-datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem 2.5rem;
    max-width: 720px;
    margin: 0 auto;
}

.prestigio-datos span {
    position: relative;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gray-text);
}

.prestigio-datos span:not(:last-child)::after {
    content: '·';
    position: absolute;
    right: -1.35rem;
    color: var(--color-wine);
}

/* Transformación — vende resultado, no contenido */
.transform-lead {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 500;
    color: var(--color-white);
    text-align: center;
    margin-bottom: 1.5rem;
}

.transform-list {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    font-style: italic;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.9;
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--space-xl);
    text-wrap: balance;
}

.transform-list strong { color: var(--color-wine-light); font-style: normal; font-weight: 600; }

/* ---------- 13. FAQ ---------- */
.faq { padding: var(--space-3xl) 0; background: var(--color-gray-dark); }

.faq-title {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--color-white);
    text-align: center;
    margin-bottom: var(--space-xl);
    line-height: 1.35;
}

.faq-list { max-width: 720px; margin: 0 auto; }

.faq-item {
    border-bottom: 1px solid var(--color-gray-medium);
}

.faq-item summary {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.6vw, 1.25rem);
    color: var(--color-white);
    padding: 1.4rem 2.5rem 1.4rem 0.25rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: color var(--transition-fast);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--color-wine-light);
    transition: transform var(--transition-medium);
}

.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq-item summary:hover { color: var(--color-wine-light); }

.faq-item p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.85;
    font-size: 0.95rem;
    padding: 0 0.25rem 1.6rem;
    max-width: 660px;
}

.faq-item a { color: var(--color-wine-light); }

/* ---------- 14. POPUP DE SALIDA ---------- */
.exit-pop {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.exit-pop.visible { opacity: 1; }

.exit-pop-box {
    position: relative;
    max-width: 460px;
    width: 100%;
    background: var(--color-gray-dark);
    border: 1px solid var(--color-gray-medium);
    border-radius: var(--radius-lg);
    padding: 2.75rem 2.5rem 2.25rem;
    text-align: center;
    transform: translateY(16px);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
}

.exit-pop.visible .exit-pop-box { transform: translateY(0); }

.exit-pop-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    background: none;
    border: none;
    color: var(--color-gray-text);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.4rem;
    min-width: 0;
    min-height: 0;
}

.exit-pop-close:hover { color: var(--color-white); }

.exit-pop-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-wine-light);
    margin-bottom: 0.85rem;
}

.exit-pop-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    font-weight: 500;
    color: var(--color-white);
    line-height: 1.35;
    margin-bottom: 0.85rem;
}

.exit-pop-text { color: var(--color-gray-text); font-size: 0.9rem; margin-bottom: 1.5rem; }

.exit-pop-cta {
    display: inline-flex;
    background: var(--color-wine);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1rem 2.2rem;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}

.exit-pop-cta:hover { background: var(--color-wine-light); }

.exit-pop-no {
    display: block;
    margin: 1.1rem auto 0;
    background: none;
    border: none;
    color: var(--color-gray-text);
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: underline;
    min-height: 0;
}

.exit-pop-no:hover { color: var(--color-white); }

/* ---------- 14a. NEWSLETTER: apilado a prueba de bombas en móvil ---------- */
@media (max-width: 768px) {
    .newsletter { overflow: visible !important; }

    .newsletter-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: var(--space-lg) !important;
    }

    .newsletter-info,
    .newsletter-form-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 0;
        padding-right: 0;
    }

    .newsletter-form-container {
        padding: 1.25rem !important;
        box-sizing: border-box !important;
    }

    /* Formulario: email arriba, botón debajo a ancho completo */
    .newsletter-form-container .form-group,
    .newsletter-form .form-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--radius-lg) !important;
        padding: 0.5rem !important;
    }

    .newsletter-form-container .form-input,
    .newsletter-form .form-input {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center;
    }

    .newsletter-form-container .form-button,
    .newsletter-form .form-button {
        width: 100% !important;
        justify-content: center !important;
        white-space: normal !important;
        border-radius: var(--radius-md) !important;
    }

    .newsletter-benefits li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        min-width: 0;
    }
}

/* ---------- 14b. RESPONSIVE: móvil pequeño ---------- */
@media (max-width: 520px) {
    /* Test: botones Sí/No a ancho completo, sin desbordar */
    .test-q-actions { flex-wrap: wrap; }
    .test-btn-answer { flex: 1 1 40%; padding: 0.95rem 1rem; }
    .test-box { padding: 1.5rem 1.25rem; min-height: 300px; }
    .test-q-text { min-height: 6.5em; }

    /* Rana: CTA largo sin desbordar */
    .rana-cta { text-align: center; padding: 0.95rem 1.5rem; font-size: 0.8rem; line-height: 1.4; }

    /* Índice de dosis: columnas más estrechas */
    .dosis-idx-item { grid-template-columns: 44px 1fr; gap: 0.9rem; }
    .dosis-idx-num { font-size: 1.25rem; }

    /* Dosis de ejemplo: cabecera en dos líneas si hace falta */
    .dosis-card-top { flex-wrap: wrap; gap: 0.35rem; }

    /* Semana comunidad: día encima del texto */
    .semana-dia { grid-template-columns: 1fr; gap: 0.3rem; }

    /* Chat demo a ancho completo */
    .chat-demo { max-width: 100%; }

    /* Popup de salida más compacto */
    .exit-pop-box { padding: 2.25rem 1.5rem 1.75rem; }

    /* CTA fija: no tapar demasiado */
    .fx-sticky-cta .fx-cta-sub { display: none; }
}

/* ---------- 15. Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    .fx-on::after { display: none; }
    .fx-on .fx-reveal { opacity: 1; transform: none; filter: none; transition: none; }
    .fx-on .fx-words .fx-w { opacity: 1; transition: none; }
    .fx-on .fx-cine .title-line,
    .fx-on .fx-cine .fx-hline,
    .fx-on .fx-cine-sub,
    .fx-on .fx-cine-sub2,
    .fx-on .fx-cine ~ .hero-subtitle { animation: none; opacity: 1; transform: none; }
    .rana { height: auto; padding: var(--space-3xl) 0; }
    .rana-sticky { position: static; height: auto; }
    .rana-steps { min-height: 0; }
    .rana-step { position: static; opacity: 1; transform: none; margin-bottom: 2.5rem; }
    .rana-hint, .rana-bubbles { display: none; }
    .fx-progress { display: none; }
    .fx-sticky-cta { transition: none; }
}