/**
 * DETACHI - LANDING v3.0 (DOPAMINE UI + HELLO VALENTICA)
 * -----------------------------------------------------------------------------
 * INGENIERÍA DE LA CHIGADERA - MODO AVANZADO
 * Fuentes: Hello Valentica (Título) | Inter (Cuerpo)
 * Colores: Fondo Gris Oscuro (#1a1a1c) | Acento Azul Neón (#00e5ff)
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
   0. DECLARACIÓN DE FUENTE PERSONALIZADA
   Asumimos que tienes el archivo de fuente en: ../fonts/HelloValentica.woff2
   ============================================================================= */
@font-face {
    font-family: 'Hello Valentica';
    src: url('../fonts/HelloValentica.woff2') format('woff2'),
         url('../fonts/HelloValentica.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* =============================================================================
   1. RESET ESTRUCTURAL COMPLETO
   ============================================================================= */
html, 
body, 
.site, 
#page, 
#content, 
.site-content, 
.ast-container,
.entry-content {
    background-color: #1a1a1c !important; /* Gris oscuro profundo */
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

body.page-template-astra-canvas {
    background-color: #1a1a1c !important;
}

/* =============================================================================
   2. CONTENEDOR PRINCIPAL
   ============================================================================= */
.disruptive-landing {
    background-color: #1a1a1c !important;
    color: #ffffff !important; /* Texto general en blanco para contraste */
    min-height: 100vh;
    width: 100% !important;
    padding: 10% 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* =============================================================================
   3. TIPOGRAFÍA - TÍTULO H1 (¡Ahora con Hello Valentica y Glow!)
   ============================================================================= */
.disruptive-landing h1, 
.disruptive-landing .entry-title {
    /* --- NUEVA FUENTE APLICADA AQUÍ --- */
    font-family: 'Hello Valentica', cursive !important;
    /* --- FIN NUEVA FUENTE --- */
    
    color: #dd189b !important; /* Azul Neón / Cyan */
    font-size: clamp(3rem, 12vw, 10rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    line-height: 0.9;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: -3px;
    text-shadow: 0px 4px 25px rgba(221, 24, 155, 0.4); /* Resplandor Dopamina */
}

/* =============================================================================
   4. LISTAS - ESTILO UI MODERNO
   ============================================================================= */
.disruptive-landing ul {
    list-style: none !important;
    padding: 0 !important;
    max-width: 650px;
    width: 100%;
    margin: 40px auto !important;
}

.disruptive-landing li {
    background: #252528; /* Gris un tono más claro que el fondo para dar profundidad */
    border-left: 5px solid #00e5ff;
    border-radius: 8px; /* Bordes redondeados sutiles */
    padding: 18px 25px;
    margin-bottom: 15px;
    font-family: 'Inter', 'Segoe UI', sans-serif; /* Cambiamos la fuente de terminal a algo más limpio */
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

.disruptive-landing li::before {
    content: "⚡"; /* Icono más dinámico, puedes volver al ">" si prefieres */
    margin-right: 15px;
    font-size: 1.2rem;
}

/* =============================================================================
   5. EL BOTÓN CTA (LA ESTRELLA DE LA CONVERSIÓN)
   ============================================================================= */
.disruptive-landing .wp-block-button__link,
.disruptive-landing .wfk-button,
.disruptive-landing button {
    display: inline-block !important;
    visibility: visible !important;
    background-color: #00e5ff !important; /* Azul Neón */
    color: #000000 !important;           /* Texto Negro brillante */
    padding: 22px 45px !important;
    border-radius: 12px !important;      /* Bordes redondeados Dopamina */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;             /* Sin borde blanco duro */
    font-size: 1.4rem !important;
    cursor: pointer !important;
    box-shadow: 0px 8px 25px rgba(0, 229, 255, 0.5) !important; /* Glow azul */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    margin-top: 20px;
}

/* Animación de Hover para el Botón */
.disruptive-landing .wp-block-button__link:hover,
.disruptive-landing button:hover {
    transform: translateY(-4px) scale(1.02) !important; /* Levita suavemente */
    box-shadow: 0px 15px 35px rgba(0, 229, 255, 0.7) !important; /* El glow se intensifica */
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* =============================================================================
   6. IMÁGENES
   ============================================================================= */
.disruptive-landing figure img,
.disruptive-landing img {
    border-radius: 16px; /* Curvas elegantes */
    border: 2px solid #333;
    filter: brightness(0.9) contrast(1.1);
    transition: all 0.4s ease;
    max-width: 100%;
    height: auto;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
}

.disruptive-landing figure:hover img {
    filter: brightness(1.1) contrast(1.1);
    border-color: #00e5ff;
    box-shadow: 0px 10px 40px rgba(0, 229, 255, 0.2);
}

/* =============================================================================
   7. AJUSTES MÓVILES
   ============================================================================= */
@media (max-width: 768px) {
    .disruptive-landing h1 {
        font-size: 3.2rem !important;
        letter-spacing: -1px;
    }
    
    .disruptive-landing .wp-block-button__link {
        width: 100% !important;
        text-align: center;
    }
}

/* =============================================================================
   8. GALERÍA DE 3 COLUMNAS (ALINEACIÓN PERFECTA)
   ============================================================================= */

/* Limitamos el ancho para que no se estire demasiado en pantallas gigantes */
.dopamine-gallery {
    width: 100%;
    max-width: 1100px !important;
    margin: 50px auto !important;
}

/* Forzamos a que las columnas se comporten igual */
.dopamine-gallery .wp-block-column {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Estira el contenido para que llenen la altura */
    flex-basis: 33.33% !important; /* <- Esta es la línea mágica */
}
}

/* Limpiamos el contenedor oculto de Gutenberg */
.dopamine-gallery figure {
    margin: 0 !important;
    width: 100% !important;
}

/* La magia absoluta: aspect-ratio */
.dopamine-gallery img {
    width: 100% !important;
    height: auto !important; /* Dejamos que el aspect-ratio controle la altura */
    aspect-ratio: 4 / 5 !important; /* Proporción vertical perfecta (estilo retrato) */
    object-fit: cover !important; 
    border-radius: 16px !important;
    border: 2px solid #252528 !important;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.5) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
/* Efecto hover Dopamina para la galería */
.dopamine-gallery img:hover {
    border-color: #00e5ff !important;
    box-shadow: 0px 15px 40px rgba(0, 229, 255, 0.3) !important;
    transform: translateY(-8px) !important;
}

/* Ajuste para móviles: que no queden súper altas cuando se apilan */
@media (max-width: 768px) {
    .dopamine-gallery img {
        height: 250px !important; 
        margin-bottom: 20px;
    }
}

/* =============================================================================
   9. SECCIÓN 1: HERO (ABOVE THE FOLD)
   ============================================================================= */

.dopamine-hero {
    background-color: #1a1a1c !important; 
    min-height: 90vh; 
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    text-align: center !important;
    padding: 20px 5%;
}
/* NUEVO: Control total sobre el Logo */
.dopamine-logo {
    width: 280px !important; /* Hacemos el logo mucho más grande */
    max-width: 80vw !important; /* Evita que rompa pantallas en celulares muy chicos */
    height: auto !important;
    margin: 0 auto 40px auto !important; /* El 'auto' a los lados lo clava en el centro */
    display: block !important;
}

/* El Super-Titular */
.dopamine-hero h1 {
    font-family: 'Hello Valentica', cursive !important;
    color: #00ff00 !important;
    font-size: clamp(2.5rem, 8vw, 6rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 25px !important;
    text-shadow: 0px 4px 20px rgba(0, 255, 0, 0.3);
    text-transform: none !important; 
    text-align: center !important; /* Seguro contra Gutenberg */
    width: 100% !important;
}

/* Sub-titular limpio para legibilidad */
.hero-subline {
    font-family: 'Inter', sans-serif;
    color: #cccccc;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    max-width: 800px;
    margin-left: auto !important;  /* Centrado de caja */
    margin-right: auto !important; /* Centrado de caja */
    margin-bottom: 40px !important;
    line-height: 1.6;
    text-align: center !important; /* Seguro contra Gutenberg */
}

/* El Botón Fucsia de Marketing */
.dopamine-hero .wp-block-button__link {
    background-color: #ff007f !important; 
    color: #ffffff !important;
    padding: 25px 50px !important;
    font-size: 1.5rem !important;
    border-radius: 50px !important; 
    box-shadow: 0px 10px 30px rgba(255, 0, 127, 0.5) !important;
    border: none !important;
    animation: pulse-glow 2s infinite; 
    margin: 0 auto !important; /* Fuerza a centrar el botón */
    display: inline-block !important;
}

.dopamine-hero .wp-block-button__link:hover {
    transform: scale(1.05) translateY(-5px) !important;
    background-color: #ff3399 !important;
    box-shadow: 0px 15px 40px rgba(255, 0, 127, 0.7) !important;
}

@keyframes pulse-glow {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Imagen del producto */
.dopamine-hero img:not(.dopamine-logo) { /* Excluimos al logo de esta regla */
    max-width: 500px;
    margin: 0 auto 30px auto !important; /* Centrado de imagen */
    display: block !important;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%); 
}

/* =============================================================================
   10. SECCIÓN 2: EL PROBLEMA Y AMPLIFICACIÓN (PASTOR)
   ============================================================================= */

   /* Contenedor principal con un degradado súper sutil para separar secciones */
.dopamine-problem {
    background-color: #161618 !important; 
    padding: 80px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Titular H2 - Mantiene el Hello Valentica y el Verde Lima */
.dopamine-problem h2 {
    font-family: 'Hello Valentica', cursive !important;
    color: #00ff00 !important;
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    text-align: center;
    margin-bottom: 50px;
    text-shadow: 0px 4px 15px rgba(0, 255, 0, 0.2); /* Glow más sutil que el H1 */
    width: 100%;
}

/* Tarjetas de "Puntos de Dolor" */
.dopamine-problem ul {
    max-width: 800px;
    margin-bottom: 50px !important;
}

.dopamine-problem li {
    background: #1c1c1f; /* Fondo un poco más oscuro y opresivo */
    border-left: 5px solid #ff0044; /* Borde rojo/fucsia de "Alerta/Dolor" */
    box-shadow: 0px 4px 15px rgba(0,0,0,0.4);
    font-size: 1.15rem;
    padding: 22px 30px;
    line-height: 1.5;
}

/* Apagamos el pseudo-elemento (el rayito) solo para esta sección, 
   para dejar que brillen los emojis nativos */
.dopamine-problem li::before {
    display: none !important; 
}

/* Caja de Amplificación (El sentido de urgencia) */
/* Caja de Amplificación (El sentido de urgencia) */
.amplification-box {
    max-width: 800px;
    background: rgba(255, 0, 68, 0.05); 
    border: 1px dashed rgba(255, 0, 68, 0.3); 
    border-radius: 12px;
    padding: 35px 40px;
    font-family: 'Inter', sans-serif;
    color: #e0e0e0;
    font-size: 1.15rem;
    line-height: 1.7;
    text-align: center !important; /* <--- ¡El escudo protector aquí! */
    box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5); 
    margin: 0 auto;
}

/* Forzamos el centrado a CUALQUIER elemento que Gutenberg haya metido adentro */
.amplification-box,
.amplification-box * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ajustes móviles */
@media (max-width: 768px) {
    .dopamine-problem {
        padding: 60px 5%;
    }
    .amplification-box {
        padding: 25px 20px;
        font-size: 1.05rem;
    }
}

/* =============================================================================
   11. SECCIÓN 3: LA SOLUCIÓN Y LA TRANSFORMACIÓN (TARJETAS DE BENEFICIO)
   ============================================================================= */

/* Contenedor principal de la Solución */
.dopamine-solution {
    background-color: #1a1a1c !important; 
    padding: 80px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Titular H2 - Volvemos al Azul Neón para dar sensación de "Alivio/Solución" */
.dopamine-solution h2 {
    font-family: 'Hello Valentica', cursive !important;
    color: #00e5ff !important; 
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    text-align: center !important;
    margin-bottom: 20px;
    text-shadow: 0px 4px 15px rgba(0, 229, 255, 0.3);
    width: 100%;
}

/* Copy de introducción */
.solution-intro {
    font-family: 'Inter', sans-serif;
    color: #cccccc;
    font-size: 1.2rem;
    text-align: center !important;
    max-width: 800px;
    margin-bottom: 60px !important;
    line-height: 1.6;
}

/* MAGIA CSS: Convertimos una lista simple de Gutenberg 
   en una cuadrícula (Grid) de Tarjetas Premium 
*/
.benefits-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive automático */
    gap: 30px;
    max-width: 1000px;
    width: 100%;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important; /* Matamos las viñetas nativas */
}

/* Diseño individual de cada Tarjeta de Beneficio */
.benefits-grid li {
    background: #252528; /* Fondo de tarjeta */
    border-radius: 16px;
    padding: 35px 30px;
    border-top: 4px solid #00e5ff; /* Acento azul arriba */
    box-shadow: 0px 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Apagamos el rayito global para que no moleste en las tarjetas */
.benefits-grid li::before {
    display: none !important; 
}

/* Efecto Hover Dopamina en las tarjetas */
.benefits-grid li:hover {
    transform: translateY(-8px);
    box-shadow: 0px 15px 40px rgba(0, 229, 255, 0.2);
    background: #2a2a2e;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .dopamine-solution {
        padding: 60px 5%;
    }
    .benefits-grid {
        grid-template-columns: 1fr; /* Una sola columna en celulares */
    }
}

/* =============================================================================
   12. SECCIÓN 4: PRUEBA SOCIAL VISUAL (GALERÍA DE IMPACTO)
   ============================================================================= */

/* Contenedor principal (Zebra Striping: Gris Base) */
.dopamine-visual-proof {
    padding: 100px 5% !important; 
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #161618 !important; /* <--- Acá está la corrección */
    width: 100% !important;
}

/* Titular H2 - Mantiene Hello Valentica y el Azul Neón (Solución/Calidad) */
.dopamine-visual-proof h2 {
    font-family: 'Hello Valentica', cursive !important;
    color: #00e5ff !important; 
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    text-align: center !important;
    margin-bottom: 70px !important; /* Espacio antes de las fotos */
    text-shadow: 0px 4px 15px rgba(0, 229, 255, 0.3);
    width: 100%;
    text-transform: none !important;
}

/* MAGIA CSS: Estilizamos la Galería Nativa de Gutenberg */
.visual-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; /* Responsive automático */
    gap: 30px !important;
    max-width: 1200px !important; /* Un poco más ancho para las fotos */
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;
}

/* Estilo individual para cada contenedor de imagen en la galería */
.visual-grid .wp-block-image {
    margin: 0 !important; /* Matamos márgenes por defecto */
    overflow: hidden; /* Necesario para el efecto zoom interno */
    border-radius: 20px; /* Curvas más pronunciadas para las fotos */
    box-shadow: 0px 15px 40px rgba(0,0,0,0.6); /* Sombra dramática */
    border: 3px solid #252528; /* Borde sutil inicial */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Estilo de la imagen misma dentro del contenedor */
.visual-grid .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Recorte perfecto sin deformar */
    aspect-ratio: 1 / 1 !important; /* Las hacemos cuadradas para máxima simetría visual */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Transición suave del zoom */
}

/* Efecto Hover Dopamina Combinado */
.visual-grid .wp-block-image:hover {
    border-color: #00e5ff; /* Resalta el borde en azul */
    transform: translateY(-10px); /* Levanta la tarjeta */
    box-shadow: 0px 20px 50px rgba(0, 229, 255, 0.3); /* Glow azul profundo */
}

/* El efecto ZOOM interno en la imagen al hacer hover en el contenedor */
.visual-grid .wp-block-image:hover img {
    transform: scale(1.1); /* Zoom sutil hacia adentro para resaltar detalles */
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .dopamine-visual-proof {
        padding: 70px 5% !important;
    }
    .visual-grid {
        grid-template-columns: 1fr !important; /* Una sola columna en celulares */
        gap: 20px !important;
    }
    .visual-grid .wp-block-image img {
        aspect-ratio: 4 / 3 !important; /* Un poco más apaisado en móvil para no ocupar tanto alto */
    }
}

/* =============================================================================
   13. SECCIÓN 5: LA OFERTA Y EL ESCUDO DE OBJECIONES
   ============================================================================= */

/* Contenedor Principal (Zebra Striping: Vuelve al Gris Base) */
.dopamine-offer {
    background-color: #1a1a1c !important; 
    padding: 100px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
}

/* Titular principal */
.dopamine-offer h2 {
    font-family: 'Hello Valentica', cursive !important;
    color: #ff007f !important; /* Fucsia neón para conectar con el CTA */
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    text-align: center !important;
    margin-bottom: 20px;
    text-shadow: 0px 4px 15px rgba(255, 0, 127, 0.3);
    width: 100%;
}

.offer-copy {
    text-align: center !important;
    color: #cccccc;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 40px auto !important;
}

/* --- EL PRECIO (Micro-componente) --- */
.price-reveal {
    background: #252528;
    border-radius: 20px;
    padding: 30px 60px;
    text-align: center !important;
    border: 2px solid #ff007f;
    box-shadow: 0px 10px 40px rgba(255, 0, 127, 0.2);
    margin-bottom: 60px !important;
}

.price-reveal p:first-child {
    color: #888888;
    font-size: 1.2rem;
    margin-bottom: 5px !important;
}

.price-reveal p:last-child {
    font-family: 'Inter', sans-serif !important;
    color: #ffffff;
    font-size: 4rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4);
}

/* --- FILTRO DE AUDIENCIA (Split 50/50) --- */
.audience-split {
    max-width: 1000px;
    margin: 0 auto 60px auto !important;
    gap: 30px !important;
}

/* Tarjeta: Para ti */
.for-you {
    background: rgba(0, 255, 0, 0.05); /* Verde super transparente */
    border-top: 4px solid #00ff00;
    border-radius: 16px;
    padding: 30px;
}

/* Tarjeta: No para ti */
.not-for-you {
    background: rgba(255, 0, 68, 0.05); /* Rojo super transparente */
    border-top: 4px solid #ff0044;
    border-radius: 16px;
    padding: 30px;
}

.audience-split h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.2rem !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

/* Domamos las listas para que no tengan viñetas feas de WordPress */
.audience-split ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.audience-split li {
    font-size: 1.1rem;
    color: #e0e0e0;
    margin-bottom: 15px !important;
    line-height: 1.5;
}

.audience-split li::before {
    display: none !important; /* Apagamos el rayito de las listas globales */
}

/* --- EL ESCUDO DE GARANTÍA --- */
.guarantee-shield {
    max-width: 800px;
    background: rgba(255, 204, 0, 0.05); /* Fondo dorado transparente */
    border: 2px dashed #ffcc00; /* Borde punteado clásico de cupón/garantía */
    border-radius: 16px;
    padding: 40px;
    text-align: center !important;
}

.guarantee-shield h3 {
    color: #ffcc00 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
}

.guarantee-shield p {
    color: #cccccc;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 auto !important;
}

/* Ajustes Móviles */
@media (max-width: 768px) {
    .dopamine-offer { padding: 60px 5%; }
    .price-reveal p:last-child { font-size: 3rem !important; }
    .price-reveal { padding: 20px 30px; }
    .audience-split { flex-direction: column !important; } /* Apila las tarjetas en celular */
}

/* =============================================================================
   14. SECCIÓN 6: FAQ (ESCUDO FINAL - ZEBRA STRIPING OSCURO)
   ============================================================================= */

/* Contenedor Principal (Fondo Negro Profundo) */
.dopamine-faq {
    background-color: #161618 !important; 
    padding: 100px 5% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
}

/* Titular H2 - Mantiene el Hello Valentica y el Azul Neón */
.dopamine-faq h2 {
    font-family: 'Hello Valentica', cursive !important;
    color: #00e5ff !important; 
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    text-align: center !important;
    margin-bottom: 60px !important;
    text-shadow: 0px 4px 15px rgba(0, 229, 255, 0.3);
    width: 100%;
}

/* Contenedor de las preguntas */
.faq-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

/* Estilo de cada "Tarjeta" de Pregunta */
.faq-container h4 {
    color: #00ff00 !important; /* Verde Lima para la pregunta (Legibilidad) */
    font-family: 'Inter', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-top: 30px !important;
    margin-bottom: 10px !important;
    display: flex;
    align-items: center;
}

/* Icono decorativo antes de la pregunta */
.faq-container h4::before {
    content: 'Q:';
    color: #ff007f; /* Fucsia para el indicador */
    margin-right: 15px;
    font-weight: 900;
}

/* Estilo de la Respuesta */
.faq-container p {
    color: #bbbbbb;
    font-size: 1.1rem;
    line-height: 1.7;
    padding-left: 35px; /* Alineado con el texto de la pregunta */
    margin-bottom: 30px !important;
    border-bottom: 1px solid #252528; /* Separador sutil */
    padding-bottom: 25px;
}

/* Efecto de foco al pasar el mouse por la sección */
.faq-container h4:hover {
    color: #ffffff !important;
    text-shadow: 0px 0px 10px rgba(0, 255, 0, 0.5);
    transition: all 0.3s ease;
}

/* Forzamos centrado del título y limpieza de márgenes internos de Gutenberg */
.dopamine-faq * {
    max-width: 1000px;
}

/* Ajustes Móviles */
@media (max-width: 768px) {
    .dopamine-faq { padding: 60px 5% !important; }
    .faq-container h4 { font-size: 1.1rem !important; }
    .faq-container p { font-size: 1rem; padding-left: 0; }
    .faq-container h4::before { margin-right: 10px; }
}

/* =============================================================================
   15. SECCIÓN 7: FOOTER Y CTA FINAL (ZEBRA STRIPING: GRIS BASE)
   ============================================================================= */

/* Contenedor Principal (Vuelve al Gris Base) */
.dopamine-footer {
    background-color: #1a1a1c !important; 
    padding: 80px 5% 40px 5% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
    border-top: 1px solid #252528; /* Línea sutil para separar del FAQ */
}

/* El Botón Fucsia Final (Clon del Hero para máxima conversión) */
.dopamine-footer .footer-cta .wp-block-button__link {
    background-color: #ff007f !important; 
    color: #ffffff !important;
    padding: 20px 40px !important;
    font-size: 1.3rem !important; /* Un poco más compacto que el del Hero */
    font-weight: 800 !important;
    border-radius: 50px !important; 
    box-shadow: 0px 10px 30px rgba(255, 0, 127, 0.5) !important;
    border: none !important;
    animation: pulse-glow 2s infinite; 
    margin: 0 auto 50px auto !important;
    display: inline-block !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.dopamine-footer .footer-cta .wp-block-button__link:hover {
    transform: scale(1.05) translateY(-5px) !important;
    background-color: #ff3399 !important;
    box-shadow: 0px 15px 40px rgba(255, 0, 127, 0.7) !important;
}

/* Logo en el Footer */
.dopamine-footer .footer-logo {
    width: 150px !important; /* Más chico que arriba */
    margin-bottom: 20px !important;
    opacity: 0.4; /* Lo apagamos para que no le robe atención al CTA */
    transition: opacity 0.3s ease;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.dopamine-footer .footer-logo:hover {
    opacity: 1; /* Se ilumina si le pasan el mouse */
}

/* Textos Legales */
.legal-links {
    font-family: 'Inter', sans-serif;
    color: #555555; /* Gris muy oscuro, casi oculto pero legalmente válido */
    font-size: 0.85rem;
    text-align: center !important;
    margin-top: 10px !important;
    line-height: 1.5;
    width: 100%;
}

.legal-links a {
    color: #777777;
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.3s ease;
}

.legal-links a:hover {
    color: #00e5ff; /* Guiño Dopamina al pasar el mouse por los legales */
}

/* Ajustes Móviles */
@media (max-width: 768px) {
    .dopamine-footer { padding: 60px 5% 30px 5% !important; }
    .dopamine-footer .footer-cta .wp-block-button__link {
        font-size: 1.1rem !important;
        padding: 20px 30px !important;
    }
}

/* =============================================================================
   16. PARCHE NUCLEAR PARA MÓVILES (RESCATE RESPONSIVE)
   ============================================================================= */

@media (max-width: 768px) {
    /* 1. Matar el scroll horizontal ciego de Gutenberg */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 2. Forzar Box-Sizing en todos nuestros contenedores (El Fix Principal) */
    .dopamine-hero, .dopamine-problem, .dopamine-solution, 
    .dopamine-visual-proof, .dopamine-offer, .dopamine-faq, .dopamine-footer {
        padding: 40px 20px !important; /* Reducimos los bordes laterales a 20px */
        box-sizing: border-box !important; /* Evita que el padding sume al 100% del ancho */
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* 3. Domar los títulos gigantes y centrarlos a la fuerza */
    .dopamine-hero h1, .dopamine-problem h2, .dopamine-solution h2, 
    .dopamine-visual-proof h2, .dopamine-offer h2, .dopamine-faq h2 {
        font-size: 2.2rem !important; /* Más chico para no desbordar */
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* 4. Rescate de las Cuadrículas (Tarjetas y Fotos) */
    .benefits-grid, .visual-grid {
        display: flex !important;
        flex-direction: column !important; /* Forzamos apilamiento vertical puro */
        gap: 20px !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. Rescate de la Caja de Precio (Se salía por la derecha) */
    .price-reveal {
        padding: 25px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .price-reveal p:last-child {
        font-size: 2.8rem !important; /* Achicamos el precio masivo */
    }

    /* 6. Rescate de las Listas Empujadas y los Rayitos rebeldes */
    .audience-split {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .for-you, .not-for-you {
        width: 100% !important;
        padding: 25px 15px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Matamos el padding izquierdo nativo de Gutenberg que aplasta el texto */
    .audience-split ul, .dopamine-problem ul {
        padding-left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .audience-split li, .dopamine-problem li {
        padding: 15px !important; 
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
    }

    /* 7. Arreglar los Botones que se cortan a los lados */
    .wp-block-button__link {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 15px 20px !important;
        font-size: 1.1rem !important;
        white-space: normal !important; /* Permite que el texto del botón baje a 2 líneas */
        line-height: 1.3 !important;
    }
}