@charset "utf-8";
/* CSS Document */

/* ---- Reset Básico ---- */
* {
    margin: 0px;
    padding: 0px;
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ---- Body ---- */
body {
    background-color: #f8f9fa; /* Un gris muy claro */
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* Fuente básica, puedes cambiarla */
    line-height: 1.6;
}

/* ---- Particles.js / Stats.js (Background) ---- */
#particles-js {
    background-image: url('');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: -1;
}

#stats {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

#stats,
.count-particles {
    -webkit-user-select: none;
    margin-left: 5px;
    margin-top: 5px;
}

.count-particles {
    border-radius: 0 0 3px 3px;
}

.js-count-particles {
    font-size: 1.1em;
}

/* ---- Utilidades Generales ---- */
.img-fluid {
    border-radius: 3px; /* Combinado de la regla duplicada */
    height: auto;
    max-width: 100%; /* Asegura responsividad */
}

.yoRedondo {
    border-radius: 50%; /* Para imágenes de perfil circulares */
}

/* ---- Estilos Generales de Tags ---- */
section {
    margin-bottom: 25px;
    margin-top: 25px;
}

ul li { /* Advertencia: Selector global */
    list-style: none;
}

/* ---- Componente: Video ---- */
.video-wrapper { /* Reglas combinadas */
    height: 0;
    margin: 0 auto;
    max-width: 90%; /* Tomado de la segunda regla */
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.video-wrapper video { /* Este estilo parece correcto */
    height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.video-alfa { /* Este estilo parece específico */
    height: 80%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
}


/* ---- Componente: Hero Section ---- */
/* Falta estilo base para .hero si es necesario */
.hero h1.super.titulo {
    /* Estilos específicos si los necesitas para el título principal */
    font-weight: bold;
}

/* Botón (Aparece temprano en Hero y otras secciones) */
.btn-yellow {
    background-color: #ffc107; /* Amarillo */
    border: none;
    border-radius: 5px;
    box-shadow:0px 0px 40px yellow; /* Sombra sutil */
    color: whitesmoke; /* Texto oscuro */
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    padding: 15px 30px;
    text-transform: uppercase; /* Mayúsculas para más impacto */
    transition: background-color 0.3s ease, transform 0.1s ease; /* Transiciones suaves */
}

.btn-yellow:hover {
    background-color: #e0a800; /* Amarillo más oscuro */
    box-shadow:0px 0px 50px yellow; /* Sombra sutil */
    transform: translateY(-2px); /* Efecto ligero al pasar el mouse */
}

.btn-yellow:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0px); /* Efecto al hacer clic */
}

/* ---- Componente: Cristal (Bloque de Título) ---- */
.cristal {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
    border-bottom: none; /* Sin borde inferior */
    border-radius: 5px 5px 0 0; /* Redondeo solo arriba */
    margin-bottom: 0; /* Quitar margen inferior para que pegue con la sección */
    padding: 15px 20px;
    text-align: center;
}

.cristal h2,
.cristal h3 {
    color: #fff; /* Texto blanco por defecto */
    font-weight: bold;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Sombra para legibilidad */
}

.cristal + section {
    border: 1px solid rgba(0, 0, 0, 0.1); /* Borde sutil a la sección */
    border-radius: 0 0 5px 5px; /* Redondeo solo abajo */
    border-top: none; /* Quitar borde superior de la sección */
    padding-top: 20px; /* Reducir padding superior de la sección que sigue */
}

/* Modificador para el cristal de oferta */
.cristal.offer-highlight {
    background-color: #ffc107; /* Amarillo */
    border: none;
    border-radius: 5px; /* Redondeo completo */
    padding: 20px;
}

.cristal.offer-highlight h2,
.cristal.offer-highlight h3,
.cristal.offer-highlight p {
    color: #333; /* Texto oscuro sobre fondo amarillo */
    text-shadow: none; /* Quitar sombra */
}

/* ---- Componente: Connection (Usado para Ciencia, Testosterona, Problema, Advertencia) ---- */
/* Falta estilo base para .connection si es necesario */
/* Falta estilo base para .benefits si es necesario */
/* Falta estilo base para .benefit si es necesario */

.fuentes a {
    color: grey;
}

section {
    margin: 0 auto;
    width: 95%;
}

section.connection .warning-list { /* Estilo específico para la lista de advertencia */
    list-style-type: '⚠️ '; /* Emoji como viñeta */
    margin: 0 auto; /* Centrar lista */
    max-width: 600px; /* Limitar ancho de la lista */
    padding-left: 5px; /* Ajuste de padding */
    text-align: left;
}

section.connection .warning-list li {
    padding-left: 10px; /* Espacio después del emoji */
}

/* ---- Componente: Contrast ---- */
.contrast {
    margin: 40px 0;
    text-align: center;
}

.contrast h3 {
    color: #ffd700;
    font-size: 1.7em;
    margin-bottom: 25px;
}

.contrast-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    margin-bottom: 30px;
}

.contrast-item {
    flex: 1 1 200px;
    max-width: 300px;
}

.contrast-item h4 {
    color: #ffffff;
    font-size: 1.2em;
    margin-bottom: 10px;
    text-decoration: underline;
}

.contrast-item li {
    color: #eaeaea;
    font-size: 16px;
    margin-bottom: 10px;
}

.contrast-item ul {
    list-style: none;
    padding: 0;
}

.contrast img {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    height: auto;
    margin-top: 10px;
    max-width: 100%;
}

/* ---- Componente: Experience (Usado para Secreto Alpha, Solución 2, Creador, Bonus) ---- */
/* Falta estilo base para .experience si es necesario */
.experience h3 {
    color: white;
    font-size: 3.2em;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin: 15px 0;
    text-align: center;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}
/* Falta estilo base para .experience p */

/* ---- Componente: Testimonios ---- */


.sec-testimonios img.testimonio {
    border: 3px solid #ccc; /* Borde gris */
    border-radius: 50%; /* Hace las imágenes de testimonio redondas */
    height: 150px;
    margin-top: 10px;
    object-fit: cover; /* Para que la imagen no se distorsione */
    width: 150px; /* Tamaño fijo para testimonios */
}

.sec-testimonios hr {
    border-top: 1px solid #ccc;
    margin: 30px auto; /* Espacio y centrado del HR */
    width: 50%;
}

/* Regla potencialmente conflictiva/duplicada */
.testimonio {
    border-radius: 25px;
    height: 200px;
    width: 150px;
}

/* ---- Componente: Encuadre (Usado en secciones de Beneficios específicos) ---- */
.encuadre {
    display: flex;
    flex-direction: row;    /* Por defecto (desktop): Lado a lado */
    gap: 20px;               /* Espacio entre los elementos (horizontal en desktop) */
    margin-bottom: 20px;     /* Margen inferior */
    width: 100%;             /* Ocupa el ancho disponible */
}

.encuadre > * {
    flex: 1;                 /* Por defecto (desktop): Comparte el espacio equitativamente */
    min-width: 0;            /* Necesario para flexbox */
}

/* ---- Componente: Final CTA (#last) ---- */
#last.hero {
    background-color: #333; /* Fondo oscuro */
    color: #fff; /* Texto claro */
}

#last ul {
    display: inline-block; /* Para centrar la lista */
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
    text-align: left; /* Alinear texto de la lista a la izquierda */
}


/* ---- Responsive ---- */
@media (max-width: 768px) { /* Ajustado a 768px como en tu original */

    /* Nota: Las reglas para .encuadre que estaban aquí duplicadas se eliminaron */
    /* Ya se manejan con la media query específica de .encuadre o la base */

    iframe {
        width: 100%;
    }
    .cristal h2 {
        font-size: 21px;
    }
    .contrast h3 {
        font-size: 25px;
    }
    .contrast-boxes {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .contrast-item {
        font-size: 14px;
        text-align: center;
        /* Nota: flex y max-width base pueden seguir aplicando o necesitar ajuste */
    }

    .comentario-img{
        width: 95% !important;
    }
    
    .display-5 {
        font-size: 21px !important;
    }
    /* Estilos responsivos para .benefits (Faltan estilos base) */
    .benefits {
        display: flex; /* Añadido display flex aquí */
        flex-direction: column;
        text-align: center;
    }

    .benefits > div {
        flex: 1 1 100%; /* Asegura que ocupen todo el ancho */
    }

    .benefits h3 {
        font-size: 25px !important;
    }
    .benefits li {
        padding-left: 0;
    }

    .benefits li::before {
        margin-right: 6px;
        position: static; /* Puede que necesites ajustar esto */
    }

    .benefits p {
        font-size: 19px; /* Ajustado tamaño de fuente */
    }

    .benefits ul {
        padding-left: 0;
    }
    /* Fin estilos responsivos .benefits */
    .comentarios h2 {
        font-size: 23px;
    }

    .experience h3 {
        color: white;
        font-size: 2.2em;
        margin: 15px 0;
        text-align: center;
    }

    .experience p {
        text-align: justify;
    }

} /* Fin de @media (max-width: 768px) */


/* Media query específica para .encuadre si se quiere mantener separada */
/* (Aunque usualmente se agruparía con la anterior si el breakpoint es el mismo) */
/*
@media (max-width: 767px) {
    .encuadre {
        flex-direction: column;
    }
    .encuadre > * {
        flex: none;
        width: 100%;
    }
}
*/