/* ========================================================== */
/* 1. VARIABLES ROOT Y ESTILOS GLOBALES */
/* ========================================================== */

.urbanist-uniquifier {
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

:root {
  /* Paleta Fría (Inspirada en el Fondo de la Imagen) */
  --color-fondo-primario: #0D0810;     /* Negro Profundo (Base dramática) */
  --color-fondo-acento: #38167;       /* Magenta Oscuro (Sombra/Transición) */
  --color-glow-brillo: #E6B8D7;        /* Rosa Pastel / Lila (Efecto Neón / Resplandor) */
  --color-texto-principal: #F2F2F2;    /* Blanco Humo (Texto principal, claro) */
  --negro: #000000;

  /* Tipografía */
  --fuente-principal: "Urbanist", sans-serif; 
  --espaciado-secciones: 8rem 0;
  --max-width: 120rem;

  --peso-texto: 400;   /* regular para párrafos */
  --peso-titulo: 900;  /* black para títulos */
}

/* Estilos de Tipografía (Opcional: si quieres una fuente específica) */
/*
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
:root {
    --fuente-principal: 'Montserrat', sans-serif;
}
*/

html {
    font-size: 62.5%; /* 1rem = 10px */
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}
body {
    background-color: #381674;
    font-family: var(--fuente-principal);
    font-size: 1.6rem;
    color: var(--color-texto-principal);
    margin: 0;
    line-height: 1.7;
    font-weight: var(--peso-texto);
}

a {
    color: inherit;
    text-decoration: none;
}

/* Estilos de Contenedores Generales */
.hero, .color_line, .services, .Aboutme, .Lineend {
    padding: var(--espaciado-secciones);
    background-color: #000;
}

.hero_info, .services_container, .Aboutme_container, .Lineend_container {
    max-width: var(--max-width);
    width: 90%;
    margin: 0 auto;
}

h1, h2, h3 {
    line-height: 1.2;
    margin: 0;
    font-weight: var(--peso-titulo);
}

section {
    background-color: transparent;
    margin: 0;
}

/* ========================================================== */
/* 2. ESTILOS DE BOTONES (Efecto GLOW) */
/* ========================================================== */

.hero_button, .Aboutme_button, .button_services, .Lineend_button {
    display: inline-block;
    padding: 1rem 3rem;
    margin-top: 2rem;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    
    /* Colores del Botón */
    background-color: transparent;
    border: 2px solid var(--color-glow-brillo);
    color: var(--color-glow-brillo);
    
    /* Sombra más intensa por defecto */
    box-shadow: 
        0 0 10px var(--color-glow-brillo), 
        inset 0 0 10px var(--color-glow-brillo);
}

.hero_button:hover, .Aboutme_button:hover, .button_services:hover, .Lineend_button:hover {
    background-color: var(--color-glow-brillo);
    color: var(--color-fondo-primario);
    box-shadow: 0 0 2rem var(--color-glow-brillo); /* Efecto neón al pasar el mouse */
}

/* ========================================================== */
/* 3. SECCIÓN HERO (Primer Vistazo) */
/* ========================================================== */

/* Busca .hero_title en tu CSS y actualízalo así */
.hero_title {
    font-size: 5rem;
    color: #fff;
  -webkit-text-stroke: 0.12rem rgba(0,0,0,0.6); /* contorno para legibilidad */
  text-shadow:
    0 0 6px rgba(230,184,215,0.9),
    0 0 18px rgba(230,184,215,0.6);
}

.hero_paragraph {
    font-size: 2rem;
    max-width: 50rem;
}
.hero {
    position: relative;
    overflow: hidden;
    background-color: #000; /* fallback similar al fondo */
    padding: 10rem 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.hero2{
    position: relative;
    overflow: hidden;
    background-color: #0D0810; /* fallback similar al fondo */
    padding: 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Pseudo-elemento que dibuja la imagen de fondo y evita líneas blancas */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../img/Header ver. 4.svg"); /* ajusta la ruta/archivo si hace falta */
    background-repeat: no-repeat;
    background-position: center top; /* cambia a center center / right center según prefieras */
    background-size: 101% auto; /* ligeramente más ancho para evitar "hairline" */
    background-attachment: scroll;
    transform: translateZ(0);
    will-change: transform;
}

/* Contenido encima del fondo */
.hero > * {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Ajustes responsive para evitar recortes en móviles */
@media (max-width: 900px) {
    .hero::before {
        background-position: center top;
        background-size: cover;
    }
}

/* Este es el nuevo "limitador" que junta los elementos */
.hero_container {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el grupo en la pantalla */
    gap: 8rem; /* Distancia fija entre Texto e Imagen (ajústalo si quieres más/menos) */
    max-width: 110rem; /* Ancho máximo para que no se separen demasiado */
    width: 90%; /* Margen de seguridad en móviles */
    margin: 0 auto;
}

.hero_info {
    flex: 1; /* Ocupa la mitad */
    text-align: left; /* Texto alineado a la izquierda */
}

.hero_img {
    flex: 1; /* Ocupa la otra mitad */
    display: flex;
    justify-content: center; /* Centra la imagen en su mitad */
}

.hero_img img {
    max-width: 100%;
    height: auto;
    border-radius: 2rem; /* Un borde redondeado suave */
    box-shadow: 0 0 3rem rgba(86, 42, 70, 0.5); /* Sombra para dar profundidad */
}

/* Ajuste para celulares */
@media (max-width: 900px) {
    .hero_container {
        flex-direction: column; /* Uno debajo del otro */
        text-align: center;
        gap: 4rem;
    }
    .hero_info {
        text-align: center;
    }
}

/* ========================================================== */
/* 4. SECCIÓN LÍNEA DE COLOR (color_line) */
/* ========================================================== */

.color_line {
    /* Una línea simple con el color de acento magenta oscuro */
    background-color: var(--negro);
    text-align: center;
    padding: 2rem 0;
}

.color_line_txt p {
    margin: 0.5rem 0;
    font-style: italic;
    font-size: 1.8rem;
}

/* ========================================================== */
/* 5. SECCIÓN SERVICIOS (cards) */
/* ========================================================== */

.services_container h2, .services_container h3 {
    text-align: center;
    color: var(--color-glow-brillo);
    margin-bottom: 4rem;
}

.cards_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.service_card {
    background-color: var(--color-fondo-acento); /* Tarjetas con fondo magenta */
    border-radius: 1rem;
    padding: 3rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service_card:hover {
    transform: translateY(-1rem);
    box-shadow: 0 1rem 3rem rgba(230, 184, 215, 0.2); /* Sombra rosa suave al pasar el mouse */
}

.service_card img {
    max-width: 10rem;
    height: auto;
    margin-bottom: 1.5rem;
}

.service_title {
    color: var(--color-texto-principal);
    margin-bottom: 1rem;
}

.button_services_container {
    text-align: center;
}

/* ========================================================== */
/* 6. SECCIÓN SOBRE MÍ (Aboutme) */
/* ========================================================== */

.Aboutme_container {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.Aboutme_img {
    flex: 1;
}

.Aboutme_img img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    /* Borde sutil del color de brillo para destacar la imagen */
    border: 0.2rem solid var(--color-glow-brillo); 
}

.Aboutme_info {
    flex: 2;
}

.Aboutme_title {
    font-size: 4rem;
    color: var(--color-glow-brillo);
    margin-bottom: 2rem;
}

/* ========================================================== */
/* 7. SECCIÓN FINAL (Lineend) */
/* ========================================================== */

.Lineend {
    background-color: var(--color-fondo-primario);/* Fondo magenta oscuro */
    text-align: center;
    padding: 4rem 0;
}

.Lineend2{
    background-color: var(--color-fondo-primario);
    text-align: center;
    align-items: center;
    height: 100px;
    padding: 4rem 0;
}

.Lineend_container h3 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-texto-principal);
}

.Lineend_txt {
    max-width: 70rem;
    margin: 0 auto;
}

/* ========================================================== */
/* 8. MEDIA QUERIES (Responsivo) */
/* ========================================================== */

@media (max-width: 900px) {
    .hero, .Aboutme_container {
        flex-direction: column;
        text-align: center;
    }
    
    .hero_info, .hero_img {
        width: 100%;
        text-align: center;
        margin-top: 5rem;
    }

    .Aboutme_img {
        order: -1; /* Mueve la imagen arriba en vista móvil */
    }
}

@media (max-width: 500px) {
    .hero_title {
        font-size: 4rem;
    }
    .hero_paragraph {
        font-size: 1.8rem;
    }
    .hero_img img {
        max-width: 80%;
    }
}

/* ========================================================== */
/* NAV MENU - CRISTAL OBSCURO & COMPORTAMIENTO */
/* ========================================================== */

/* El contenedor principal del Nav */
.navbar {
    position: fixed; /* Siempre fijo en la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center; /* Separa los 3 bloques */
    align-items: center;
    padding: 1.5rem 5%;
    z-index: 1000; /* Siempre encima de todo */
    transition: transform 0.3s ease, background-color 0.3s ease;
    
    /* EFECTO CRISTAL OBSCURO */
    /* Usamos tu color de fondo (#0D0810) con transparencia (0.8) */
    background-color: rgba(13, 8, 16, 0.7); 
    backdrop-filter: blur(10px); /* El desenfoque estilo iPhone */
    border-bottom: 1px solid rgba(230, 184, 215, 0.1); /* Borde sutil */
}

/* Clase que JS agregará para esconder el menú */
.nav-hidden {
    transform: translateY(-100%); /* Se mueve hacia arriba fuera de la vista */
}

/* 1. Estilos del Logo */
.nav_logo a {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-glow-brillo);
    text-decoration: none;
    text-shadow: 0 0 10px rgba(230, 184, 215, 0.5);
}

/* 2. Estilos de los Links (Centro) */
.nav_links {
    display: flex;
    gap: 3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav_links a {
    color: var(--color-texto-principal);
    text-decoration: none;
    font-size: 1.6rem;
    transition: color 0.3s ease;
}

.nav_links a:hover {
    color: var(--color-glow-brillo);
    text-shadow: 0 0 8px var(--color-glow-brillo);
}

/* 3. Estilos Acciones (Redes + Botón) */
.nav_actions {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.social_icons {
    display: flex;
    gap: 1.5rem;
}

.social_icons a {
    color: var(--color-texto-principal);
    font-size: 1.8rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social_icons a:hover {
    color: var(--color-glow-brillo);
    transform: translateY(-3px);
}

/* Botón pequeño del nav */
.nav_cta {
    padding: 0.8rem 2rem;
    border: 1px solid var(--color-glow-brillo);
    color: var(--color-glow-brillo);
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.nav_cta:hover {
    background-color: var(--color-glow-brillo);
    color: var(--color-fondo-primario);
    box-shadow: 0 0 15px var(--color-glow-brillo);
}

/* Ajuste Responsive para móviles (Opcional: esconde links en pantallas muy chicas) */
@media (max-width: 768px) {
    .nav_links {
        display: none; /* En móvil simple se ocultan los links del centro */
    }
}


/* ========================================================== */
/* SECCIÓN DETAILS (QUÉ INCLUYE) */
/* ========================================================== */

.details {
    background-color: #0D0810;
}

.details_container {
    max-width: 100rem;
    width: 90%;
    margin: 0 auto;
}

.details_title {
    text-align: center;
    font-size: 4rem;
    margin-bottom: 6rem;
    color: var(--color-texto-principal);
    /* Sutil brillo en el título */
    text-shadow: 0 0 15px var(--color-fondo-acento);
}

.espaciado {
    height: 10rem; /* ajusta según necesites */
    width: 100%;
    background-color: #000000;
    /* background: linear-gradient(to bottom, #000 50%, #381674 50%); */
    /* si quieres un borde suave, usa: background: linear-gradient(to bottom, #000 0 50%, #381674 50% 100%); */
}

/* La rejilla (Grid) */
.details_list {
    display: grid;
    /* Crea columnas automáticas de mínimo 350px */
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); 
    gap: 3rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Las tarjetas individuales */
.detail_item {
    background-color: rgba(86, 42, 70, 0.2); /* Fondo magenta muy transparente */
    border: 1px solid var(--color-fondo-acento);
    border-radius: 1.5rem;
    padding: 3rem;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden; /* Para efectos de brillo */
}

/* Efecto Hover: La tarjeta se ilumina y sube */
.detail_item:hover {
    transform: translateY(-5px);
    border-color: var(--color-glow-brillo);
    background-color: rgba(86, 42, 70, 0.4);
    box-shadow: 0 0 20px rgba(230, 184, 215, 0.15);
}

/* El ícono */
.detail_icon {
    font-size: 3rem;
    color: var(--color-glow-brillo);
    background-color: rgba(13, 8, 16, 0.5);
    width: 6rem;
    height: 6rem;
    border-radius: 50%; /* Círculo perfecto */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Evita que el ícono se aplaste */
    border: 1px solid var(--color-fondo-acento);
    box-shadow: 0 0 10px var(--color-fondo-acento);
}

/* El texto dentro de la tarjeta */
.detail_text h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--color-glow-brillo);
}

.detail_text p {
    font-size: 1.6rem;
    color: #ccc; /* Un gris suave para no cansar la vista */
    line-height: 1.5;
    margin: 0;
}

/* Responsive para móviles muy pequeños */
@media (max-width: 500px) {
    .detail_item {
        flex-direction: column; /* Icono arriba, texto abajo */
        text-align: center;
        align-items: center;
    }
}

/* ========================================================== */
/* ESTILOS NUEVOS PARA LA LANDING PAGE */
/* ========================================================== */

/* Grid para la sección "¿Para quién es?" */
.audience_grid {
    display: grid;
    /* repeat(2, 1fr) obliga a que sean siempre 2 columnas del mismo ancho */
    grid-template-columns: repeat(2, 1fr); 
    gap: 2rem;
    margin-top: 3rem;
}


.audience_item {
    background-color: rgba(86, 42, 70, 0.2);
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    border: 1px solid var(--color-fondo-acento);
    transition: transform 0.3s ease;
}

.audience_item:hover {
    transform: translateY(-5px);
    border-color: var(--color-glow-brillo);
}

.audience_item i {
    font-size: 3rem;
    color: var(--color-glow-brillo);
    margin-bottom: 1rem;
}

/* Estilos para las FAQ (Preguntas Frecuentes) */
.faq_item {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-fondo-acento);
}

/* Ajustes específicos para Celular (para que quepan bien las 2 columnas) */
@media (max-width: 480px) {
    .audience_grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Fuerza las 2 columnas */
        gap: 1rem; /* Menos espacio entre ellas */
    }

    .audience_item {
        padding: 1.5rem 1rem; /* Reducimos el relleno interno */
    }

    .audience_item i {
        font-size: 2.5rem; /* Ícono un poco más pequeño */
        margin-bottom: 0.5rem;
    }
    
    .audience_item p {
        font-size: 1.4rem; /* Texto ajustado para evitar que se rompa feo */
        line-height: 1.2;
    }
}

details {
    cursor: pointer;
    padding: 1rem;
}

summary {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    list-style: none; /* Quita el triangulito por defecto */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Agregamos un signo + personalizado */
summary::after {
    content: '+'; 
    color: var(--color-glow-brillo);
    font-size: 2.5rem;
    font-weight: bold;
}

details[open] summary::after {
    content: '-'; /* Cambia a menos cuando abre */
}

details p {
    margin-top: 1rem;
    color: #ccc;
    font-size: 1.6rem;
    padding-left: 1rem;
    border-left: 2px solid var(--color-glow-brillo);
}

.combined-bg {
    position: relative;
    overflow: hidden;
    background-color: #562A46; /* fallback que coincide con el borde de la imagen */
}

/* Pseudo-elemento que dibuja la imagen y evita líneas blancas por redondeo */
.combined-bg::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center top; /* controla el foco */
    background-size: 101% auto; /* ligeramente más ancho para evitar líneas blancas */
    background-attachment: scroll;
    transform: translateZ(0); /* fuerza render GPU, reduce artefactos */
    will-change: transform;
}

/* Contenido encima del fondo */
.combined-bg > * {
    position: relative;
    z-index: 1;
    background: transparent; /* asegúrate que las secciones interiores sean transparentes */
}
/* Ajustes responsive */
@media (max-width: 900px) {
    .combined-bg::before {
        background-position: center top;
        background-size: cover; /* en móvil usamos cover para mejor ajuste vertical */
    }
}

.color_line, .combined-bg {
    margin: 0;
    /* si quieres separar visualmente, usa padding en lugar de margin */
}
.navbar_logo a img {
    height: 50px; /* Ajusta la altura del logo según necesites */
}
.combined-bg {
    position: relative;
    overflow: hidden;
    background-color: #000000; /* fallback */
}
/*
.combined-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../img/Fondo\ sección\ 1\ y\ 2\ Versión\ 4.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 102% auto; /* ampliado para evitar líneas blancas por subpixel rounding */
  /*  background-attachment: scroll;
    transform: translateZ(0);
    will-change: transform;
    -webkit-transform: translateZ(0);
}*/

/* Evitar que el margen del título "salga" del contenedor (margen colapsado) */
.combined-bg .Aboutme_title,
.combined-bg .details_title {
    margin-top: 0;
    padding-top: 4rem; /* reasigna separación si la necesitas */
}

/* Si el problema persiste en móviles, usa cover para móviles */
@media (max-width: 900px) {
    .combined-bg::before {
        background-size: cover;
        background-position: center top;
    }
}

#comprar{
    background-color: #000000;
}

/* ========================================================== */
/* 9. MEDIA QUERIES CONSOLIDADOS (Responsive Pro) */
/* ========================================================== */

/* Tabletas y Laptops Pequeñas (max-width: 1024px) */
@media (max-width: 1024px) {
    html {
        font-size: 55%; /* Reducimos ligeramente la base para escalar todo */
    }
    
    .hero_container, .Aboutme_container {
        gap: 4rem;
    }
}

/* Móviles (Landscape y Portrait) (max-width: 768px) */
@media (max-width: 768px) {
    html {
        font-size: 50%; /* 1rem = 8px aprox. Ayuda a que quepa más contenido */
    }

    /* Reducir espaciado vertical excesivo */
    .hero, .color_line, .services, .Aboutme, .Lineend, .details, .hero2 {
        padding: 4rem 0; /* Bajamos de 8rem a 4rem */
    }

    /* Títulos más controlados */
    .hero_title {
        font-size: 4rem; /* Antes 5rem */
        line-height: 1.1;
    }
    
    h2, .Aboutme_title, .details_title {
        font-size: 3rem; /* Estandarizamos títulos de sección */
    }

    /* Ajuste del Grid de Detalles para evitar scroll horizontal */
    .details_list {
        /* Cambiamos el mínimo de 30rem a 100% para que ocupe el ancho disponible */
        grid-template-columns: 1fr; 
        gap: 2rem;
    }

    .detail_item {
        padding: 2rem; /* Menos padding interno */
    }

    /* Bonus Box */
    .bonus_box {
        padding: 2rem !important;
        width: 100%;
    }
    
    .bonus_box h3 {
        font-size: 2rem !important;
    }

    /* Navegación (Preparación para menú móvil) */
    .nav_links {
        display: none; /* Se ocultará hasta activar JS */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(13, 8, 16, 0.95);
        flex-direction: column;
        padding: 2rem;
        text-align: center;
        border-bottom: 1px solid var(--color-glow-brillo);
    }
    
    .nav_links.active {
        display: flex; /* Clase que agregaremos con JS */
    }

    /* El botón de hamburguesa (ver HTML abajo) */
    .mobile_menu_icon {
        display: block; /* Visible solo en móvil */
    }
    .navbar_logo a img{
        height: 35px; /* Ajusta la altura del logo según necesites */
    }
}

/* Móviles Pequeños (max-width: 480px) */
@media (max-width: 480px) {
    .hero_title {
        font-size: 3.2rem;
    }
    
    .hero_button {
        width: 100%; /* Botón ancho completo para facilitar el clic */
        text-align: center;
        padding: 1.5rem 1rem;
    }

    /* Ajuste de la imagen Hero */
    .hero_img img {
        max-width: 100%;
        height: auto;
    }

    /* Ajuste de Cards de Audiencia */
    .audience_grid {
        grid-template-columns: 1fr; /* Una sola columna */
    }
    
    /* Footer */
    .Lineend_container {
        padding: 0 2rem;
    }
}

/* ========================================================== */
/* ESTILOS EXTRA PARA EL NUEVO CONTENIDO */
/* ========================================================== */

/* Estilo para los "Pills" de Beneficios */
.benefit_pill {
    background-color: rgba(230, 184, 215, 0.1);
    border: 1px solid var(--color-glow-brillo);
    color: var(--color-texto-principal);
    padding: 1rem 2rem;
    border-radius: 5rem;
    font-size: 1.6rem;
    font-weight: bold;
    display: inline-block;
}

/* Sección de Cita / Testimonio Destacado */
.quote_section {
    background-color: #000;
    padding: 6rem 0;
    text-align: center;
    position: relative;
}

.quote_container {
    max-width: 90rem;
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.quote_icon {
    font-size: 4rem;
    color: var(--color-glow-brillo);
    opacity: 0.5;
    margin-bottom: 2rem;
}

.quote_text {
    font-size: 2.4rem;
    font-style: italic;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 2rem;
}

.quote_author {
    font-size: 1.8rem;
    color: var(--color-glow-brillo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Caja de Garantía */
.guarantee_box {
    margin-top: 4rem;
    border: 1px dashed var(--color-glow-brillo);
    padding: 3rem;
    border-radius: 1rem;
    background-color: rgba(13, 8, 16, 0.6);
}

/* Ajustes Responsivos Extra para el nuevo contenido */
@media (max-width: 768px) {
    .quote_text {
        font-size: 1.8rem;
    }
    .benefit_pill {
        font-size: 1.4rem;
        padding: 0.8rem 1.5rem;
    }
}

.details_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 3rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* El contenedor principal de la tarjeta (el escenario 3D) */
.detail_item {
    background-color: transparent; /* Quitamos el fondo del contenedor padre */
    perspective: 1000px; /* Profundidad 3D */
    cursor: pointer;
    min-height: 47.5rem; /* Altura mínima para asegurar que quepa el contenido */
}

/* El contenedor interno que gira */
.card_inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.8s; /* Duración del giro */
    transform-style: preserve-3d;
}

/* La clase que JS agrega para girar */
.detail_item.flipped .card_inner {
    transform: rotateY(180deg);
}

/* Estilos comunes para ambas caras (Frente y Dorso) */
.card_front, .card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 1.5rem;
    padding: 3rem;
    border: 1px solid var(--color-fondo-acento);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

/* === CARA FRONTAL === */
.card_front {
    background-color: #000;
    /* Mantenemos el diseño flex original para el icono y texto */
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 2rem;
}

/* === CARA TRASERA === */
.card_back {
    background-color: #000; /* Un color sólido un poco más oscuro para leer bien */
    color: white;
    transform: rotateY(180deg); /* Inicia girada */
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--color-glow-brillo); /* Borde brillante para destacar */
}

.card_back h3 {
    color: var(--color-glow-brillo);
    margin-bottom: 1rem;
    font-size: 1.8rem;
    text-align: center;
}

.card_back ul {
    list-style: none; /* Quitamos viñetas por defecto */
    padding: 0;
    margin: 0;
    text-align: left;
}

.card_back ul li {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    padding-left: 2rem;
    position: relative;
    color: #ddd;
}

/* Viñeta personalizada */
.card_back ul li::before {
    content: "•";
    color: var(--color-glow-brillo);
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 2rem;
    line-height: 1.5rem;
}

/* === ESTILOS VISUALES DEL CONTENIDO (Iconos y Textos) === */
.detail_icon {
    font-size: 3rem;
    color: var(--color-glow-brillo);
    background-color: rgba(13, 8, 16, 0.5);
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-fondo-acento);
    box-shadow: 0 0 10px var(--color-fondo-acento);
}

.detail_text h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--color-glow-brillo);
}

.detail_text p {
    font-size: 1.6rem;
    color: #ccc;
    line-height: 1.5;
    margin: 0;
}

/* Pista visual para hacer clic */
.click_hint {
    display: block;
    margin-top: 1.5rem;
    font-size: 1.2rem;
    color: var(--color-glow-brillo);
    opacity: 0.7;
    font-style: italic;
}

/* === ESTILOS ESPECÍFICOS PARA LOS BONUS (Amarillo) === */
.bonus_item .card_front, .bonus_item .card_back {
    border-color: #ffd700;
}

.bonus_icon {
    color: #ffd700 !important;
    border-color: #ffd700 !important;
}

.bonus_text {
    color: #ffd700 !important;
}

/* Responsive para celular */
@media (max-width: 500px) {
    .card_front {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .detail_item {
        min-height: 32rem; /* Un poco más alto en móvil para que quepa todo */
    }
}

.detail_item:hover .card_inner {
    transform: rotateY(180deg);
}

.contenedor-visualizacion {
        max-width: 800px;
        margin: 20px auto;
        background: #f9f9f9;
        padding: 20px;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    video {
        width: 100%;
        border-radius: 10px;
        background: #000;
    }
    .pdf-viewer {
        width: 100%;
        height: 500px;
        border: none;
        border-radius: 10px;
    }
    .titulo-seccion {
        color: #333;
        margin-bottom: 15px;
        font-family: sans-serif;
    }