@font-face {
    font-family: 'Meutas';
    src: url('assets/MEUTAS-REGULAR.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Meutas';
    src: url('assets/MEUTAS-MEDIUM.OTF') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Meutas';
    src: url('assets/MEUTAS-SEMIBOLD.OTF') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Meutas';
    src: url('assets/MEUTAS-BOLD.OTF') format('opentype');
    font-weight: bold;
    font-style: normal;
}

:root {
    --color-blue: #0f4495;
    --color-dark-blue: #0c3978;
    --color-orange: #F27D26;
    --color-orange-hover: #d96a1a;
    --color-white: #ffffff;
    --color-bg-light: #f8fafc;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Meutas', sans-serif;
    color: #333;
    background-color: var(--color-white);
    overflow-x: hidden;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

/* Utilitarios */
.text-orange { color: var(--color-orange); }
.highlight-orange { color: var(--color-orange); font-weight: bold; }
.bolder-orange { font-weight: 800; }

/* Botón Whatsapp */
.floating-wa {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    transition: transform 0.3s ease;
}
.floating-wa:hover {
    transform: scale(1.1);
}

/* ================= HERO SECTION ================= */
.hero {
    background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-dark-blue) 100%);
    position: relative;
    padding: 30px 20px 0;
    /* Se quitó overflow hidden para que el menú de compra pueda sobreescribir la siguiente sección */
    color: var(--color-white);
}

.hero-bg-lines {
    position: absolute;
    bottom: -20px;
    left: -20px;
    max-width: 500px;
    width: 70%;
    z-index: 5;
    pointer-events: none;
    opacity: 0.8; /* adjust as fits but original seems vivid */
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

.hero-text-col {
    flex: 1;
    min-width: 300px;
    padding-bottom: 80px;
}

.hero-title-img {
    max-width: 450px;
    width: 100%;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 30px;
}

.vitamins-icon {
    max-width: 400px;
    width: 100%;
    margin-top: -30px;
    margin-bottom: 40px;
    display: block;
}

.btn-buy-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.btn-buy-link:hover {
    transform: translateY(-5px);
}

.btn-buy-img {
    height: 50px;
}

/* ================= DROPDOWN COMPRAS ================= */
.dropdown-buy {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 290px;
    background-color: var(--color-white);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    z-index: 100;
    /* Evitamos márgenes para no perder el hover al bajar el mouse */
}

/* El menú se abre al pasar el mouse por el contenedor */
.dropdown-buy:hover .dropdown-content {
    display: block;
}

.store-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    background: var(--color-white);
    transition: background-color 0.2s;
}
.store-row:hover {
    background-color: #f8f9fa;
}

.store-logo {
    height: 25px; /* Altura ideal asumiendo que un logo es más ancho que alto */
    max-width: 150px;
    object-fit: contain;
    object-position: left center;
}

.store-divider {
    height: 1px;
    background-color: #e5e5e5; /* Línea gris divisoria delgada como en la imagen */
    margin: 0;
    width: 100%;
}

.store-btn {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    padding: 6px 16px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.3s ease;
}

.store-btn:hover {
    background-color: var(--color-blue);
}

.hero-img-col {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    min-width: 400px;
    margin-bottom: -5px; /* So it sits on the bottom line */
    position: relative;
}

.hero-main-img-neuro {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: auto;
    z-index: 1;
    object-fit: contain;
    object-position: bottom left;
}

.hero-main-img-personas {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 2;
    object-fit: contain;
    object-position: bottom right;
}

/* ================= BENEFITS SECTION ================= */
.benefits-section {
    background-color: var(--color-white);
    padding: 0 20px 20px;
    text-align: center;
    position: relative;
}

.aporta-top-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 20px;
}

.benefits-header {
    flex: 1.5;
    min-width: 300px;
    text-align: left;
    padding-top: 0;
    margin-top: -35px;
}

.aporta-title-img {
    max-width: 850px;
    width: 100%;
}

.benefits-producto {
    flex: 2.5;
    min-width: 500px;
    position: relative;
    z-index: 20;
    text-align: right; /* aligns product slightly to the right */
}

.producto-img {
    max-width: 1250px; /* very large now */
    width: 100%;
    margin-top: -160px; /* overlaps upward properly */
    margin-left: -50px; /* pulls slightly left to meet the text like in the image */
}

.benefits-cards-container {
    max-width: 1200px;
    margin: -30px auto 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.card {
    flex: 1;
    min-width: 300px;
    max-width: 350px;
    transition: transform 0.3s ease;
}
.card:hover { transform: translateY(-10px); }
.card-img { width: 100%; }

/* ================= CAPSULE SECTION ================= */
.capsule-section {
    background-color: var(--color-blue);
    padding: 60px 20px 0px 20px; /* Añadido espacio superior para despegar el título */
    text-align: center;
    position: relative;
    /* Se quita overflow: hidden para que las pastillas puedan flotar sobre otras secciones */
}

.capsule-bg-clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Esto recortará solo a las letras para que no se salgan, pero dejará libres a las pastillas */
    pointer-events: none;
    z-index: 1;
}

.bg-letras-fondo {
    position: absolute;
    width: 100%; 
    height: 90%; /* Le da un respiro arriba y abajo para que no choque con los bordes de la sección azul */
    object-fit: contain; /* Nunca chanca la letra, y fuerza a que la imagen se vea completa dentro de su contenedor (sin cortes) */
    top: 5%; 
    left: 0;
    opacity: 0.15; /* Transparencia de marca de agua */
    pointer-events: none;
}

/* Pastillas Flotantes Individuales */
.fly-pill {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    max-width: 120px; /* Base size */
}

/* Hacerlas más grandes y acercarlas al centro */
.fly-pill-1 { top: -50px; left: 18%; transform: scale(1.8); }
.fly-pill-2 { bottom: -70px; left: 22%; transform: scale(2.0); }
.fly-pill-3 { top: -40px; right: 18%; transform: scale(1.6); }
.fly-pill-4 { bottom: -60px; right: 22%; transform: scale(1.9); }

.capsule-title { margin-bottom: 10px; position: relative; z-index: 4; } /* Espaciado ultra-comprimido */
.main-title {
    font-size: 3rem;
    color: #f39549;
    font-weight: 800;
}

.capsule-infographic {
    max-width: 1600px; /* Muy amplio para que los textos puedan desplegarse en 2 líneas sin aplastarse */
    margin: -80px auto 0;
    display: flex;
    justify-content: center; /* Changed from space-between to center since left/right items are gone */
    align-items: center;
    position: relative;
    z-index: 4;
}

.info-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 75px; /* Calculado para encajar justo en las terminaciones de la imagen al este tamaño */
    min-width: 250px;
}

.info-left { text-align: right; }
.info-right { text-align: left; }

.info-item {
    display: flex;
    align-items: center;
    color: var(--color-white);
    font-weight: 600;
    font-size: 1.15rem; /* Texto más grande para parecerse más a la propuesta original */
    max-width: 500px; /* Más espacio horizontal para que el texto ocupe máximo 2 renglones */
    line-height: 1.3;
    gap: 15px;
    position: relative;
}

.connector-line {
    flex-shrink: 0;
    object-fit: contain;
    width: 130px; /* Fijar tamaño para hacerlas uniformes y más pequeñas */
    /* Adjust these margins slightly to help them align correctly towards the center layout */
}

.mobile-only {
    display: none;
}

/* Adjustments for the specific lines to account for varying heights or positions if necessary */
.line-41 { margin-right: -70px; transform: translateY(10px); }
.line-42 { margin-right: -40px; }
.line-43 { margin-left: -70px; }
.line-44 { margin-left: -90px; }
.line-45 { margin-left: -40px; }

.info-left .info-item {
    margin-left: auto;
    justify-content: flex-end;
}

.capsule-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 350px;
    padding: 0; /* Changed padding to 0 since image contains everything */
}

.capsule-center-img {
    max-width: 100%;
    width: 100%; /* Changed from 1200px to 100% so it fits in the picture tag */
    height: auto;
    display: block;
    position: relative;
}

/* ================= NEW VIDEO SECTION ================= */
.video-section {
    padding: 30px 20px 20px 20px;
    background-color: var(--color-white);
}

.new-video-card {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--color-blue);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.video-overlay-icons {
    position: relative; /* Define la altura total del contenedor basándose en esta imagen */
    width: 100%;
    z-index: 5; /* Asegurando que los íconos queden en primerísimo plano */
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-icons-img {
    width: 100%;
    height: auto;
    display: block;
}

.video-bg-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.video-bg-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.video-molecules {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 140%;
    opacity: 0.15;
    z-index: 4; /* Ahora encima de los degradados superpuestos */
    pointer-events: none;
}
.left-molecules {
    left: -150px;
}
.right-molecules {
    right: -150px;
    transform: translateY(-50%) scaleX(-1);
}

.video-gradient-left, .video-gradient-right {
    position: absolute;
    top: 0;
    width: 35%; /* Ancho progresivo ajustado */
    height: 100%;
    z-index: 3; /* Encima de la imagen pero debajo de iconos */
    pointer-events: none;
}
.video-gradient-left {
    left: 0;
    background: linear-gradient(to right, var(--color-blue) 0%, var(--color-blue) 20%, transparent 100%);
}
.video-gradient-right {
    right: 0;
    background: linear-gradient(to left, var(--color-blue) 0%, var(--color-blue) 20%, transparent 100%);
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.7);
    border: 2px solid rgba(255,255,255,0.9);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 6; /* Siempre el más arriba para ser tocable */
}
.new-video-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.1); }

@media (max-width: 850px) {
    .video-bg-img { width: 100%; object-fit: cover; }
    .video-gradient-left, .video-gradient-right { width: 45%; }
}
@media (max-width: 500px) {
    .new-video-card { height: 250px; }
}

/* ================= VIDEO MODAL ================= */
.video-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    background: #000;
    border-radius: 10px;
    padding: 10px;
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.video-modal-close:hover {
    color: var(--color-orange);
}

.video-iframe-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 8px;
}

.video-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ================= BLOG SECTION ================= */
.blog-section {
    padding: 20px 20px 80px 20px; /* Reducido drásticamente el padding superior para pegarlo a la viejita */
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.blog-section-title {
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.blog-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}

.blog-card {
    flex: 1;
    min-width: 300px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
}

.blog-img {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 20px;
    height: 200px;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.blog-title {
    color: var(--color-orange);
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.blog-excerpt {
    font-size: 0.95rem;
    color: var(--color-blue);
    font-weight: 600;
    margin-bottom: 20px;
    flex-grow: 1;
}

.blog-btn {
    display: inline-block;
    background-color: var(--color-orange);
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background-color 0.3s;
    align-self: center;
}
.blog-btn:hover { background-color: var(--color-orange-hover); }

/* ================= FOOTER ================= */
.main-footer {
    background-color: var(--color-dark-blue);
    padding: 30px 20px;
    border-top: 5px solid var(--color-orange);
    color: white;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.7;
}

.footer-logo-img {
    height: 65px; /* Ligeramente más grande para que destaque sin fondo */
    object-fit: contain;
    margin-left: -5px; /* Acerca el logo al texto si este tiene relleno transparente */
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.1);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.social-icon:hover {
    background-color: var(--color-orange);
    transform: scale(1.1);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1200px) and (min-width: 851px) {
    /* Ajustes para tabletas (iPad) para evitar que los elementos colisionen */
    .benefits-header {
        margin-top: 20px; 
    }
    .producto-img {
        margin-top: -60px; /* Reducir traslape alto en la caja del producto */
        margin-left: -20px;
    }
}

@media (max-width: 850px) {
    /* Hero Section */
    .hero-container {
        flex-direction: column-reverse; /* text bottom, image top on small screens if desired */
    }
    .hero-text-col {
        padding-top: 20px;
    }
    .hero-text-col, .hero-img-col {
        min-width: 100%;
        text-align: center;
        align-items: center;
        padding-bottom: 20px;
    }
    .hero-img-col {
        justify-content: center;
        overflow: hidden; /* Corta la imagen NEUROALIV en móvil para que no se salga */
        width: 100%;
    }
    .hero-title-img { max-width: 300px; }
    .hero-subtitle { font-size: 1rem; }
    .vitamins-icon {
        margin: 0 auto 30px;
        max-width: 250px;
    }
    .dropdown-content {
        left: 50%;
        transform: translateX(-50%); /* Start centered so it doesn't break right boundary */
    }
    .line { display: none; }
    
    /* Benefits */
    .benefits-header { min-width: 100%; margin-top: 0; text-align: center; }
    .benefits-producto { min-width: 100%; text-align: center; }
    .producto-img { margin-left: 0; margin-top: 20px; max-width: 100%; width: 100%; }
    
    /* Capsule Section - Flawless Connection Layout for Mobile */
    .capsule-section { padding-bottom: 0px; padding-top: 40px; overflow: hidden; }
    
    .desktop-only { display: none !important; }
    
    .capsule-infographic { 
        position: relative;
        width: 100%;
        max-width: none;
        height: auto;
        margin: -30px auto 0; /* Move up by 30px */
        display: block; /* Remove absolute heights, let image dictate height */
        padding-top: 0px;
    }
    
    .capsule-center { 
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 5;
    }
    .capsule-center-img { width: 125%; max-width: 700px; display: block; margin-left: -12.5%; margin-top: -30px; } 

    .info-side { display: contents; } 
    .info-hidden { display: none !important; }

    .info-left .info-item, .info-right .info-item { 
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 145px;
        margin: 0;
        z-index: 10;
    }
    
    .info-item p {
        font-size: 0.70rem; /* Letras aún más chicas */
        font-weight: 400;   /* Completamente finas (peso normal/ligero) */
        line-height: 1.15;
        margin: 0;
        text-shadow: 0 0 5px rgba(12, 57, 120, 0.7);
        z-index: 12;
    }

    .connector-line.mobile-only { 
        display: block;
        position: absolute;
        width: auto;
        object-fit: contain;
        z-index: 9;
        transform: none !important; /* Usar sus formas originales rectas */
    } 

    /* Posicionamiento exacto comprimido para eliminar el espacio azul extra */
    .info-1 { top: 10px; left: 10px; }
    .info-1 .connector-line {
        top: 100%; 
        left: 30%;
        height: 110px; 
        margin-top: 5px;
    }

    .info-3 { top: 10px; right: 10px; }
    .info-3 .connector-line {
        top: 100%;
        right: 30%;
        height: 90px;
        margin-top: 5px;
    }

    .info-4 { top: 260px; right: 10px; }
    .info-4 .connector-line {
        top: 0px; 
        right: 120px;
        height: 45px;
    }

    .info-2 { top: 380px; left: 10px; }
    .info-2 .connector-line {
        bottom: 100%;
        left: 40%;
        height: 90px; 
        margin-bottom: 5px;
    }

    .info-5 { top: 450px; right: 10px; }
    .info-5 .connector-line {
        bottom: 100%;
        right: 35%;
        height: 100px;
        margin-bottom: 5px;
    }
    
    /* Quitamos transformaciones nativas forzadas */
    .line-46, .line-47, .line-48, .line-49, .line-50 { margin: 0 !important; }

    .fly-pill { transform: scale(0.5) !important; opacity: 0.4; } /* Subtle flying pills */
    
    .ghost-title { font-size: 2rem; }
    .main-title { font-size: 2rem; margin-bottom: 30px; }
    
    /* Blog & Video */
    .blog-card { min-width: 100%; }
    .video-wrapper { min-width: 100%; }
    .video-text { padding: 20px; text-align: center; align-items: center; }
    .blog-section-title span { font-size: 1.6rem !important; }
    .blog-section-title img { width: 280px !important; }
    
    .footer-container { flex-direction: column; justify-content: center; }
}