/* ===========================
   NEUROBIENESTAR LATAM
   =========================== */

   :root{

    --petroleo:#063845;
    --petroleo-claro:#0A4A58;
    
    --arena:#F4E2BE;
    --arena-claro:#F8ECD4;
    
    --cyan:#2ED8E8;
    
    --gris:#5D6668;
    
    }
    
    
    
    *{
    
    margin:0;
    padding:0;
    box-sizing:border-box;
    
    }
    
    html{
    
    scroll-behavior:smooth;
    
    }
    
    body{
    
    font-family:"Manrope",sans-serif;
    
    background:var(--arena);
    
    color:var(--petroleo);
    
    overflow-x:hidden;
    
    }
    
    h1,h2,h3,h4,h5{
    
    font-family:"Space Grotesk",sans-serif;
    
    font-weight:700;
    
    }
    
    a{
    
    text-decoration:none;
    
    color:inherit;
    
    }
    
    ul{
    
    list-style:none;
    
    }
    
    img{
    
    max-width:100%;
    
    display:block;
    
    }
    
    .contenedor{
    
    width:min(1200px,92%);
    
    margin:auto;
    
    }
    
    /* ===========================
    HEADER
    =========================== */
    
    header{

        position:fixed;
        
        top:0;
        left:0;
        width:100%;
        
        padding:18px 0;
        
        background:rgba(6,56,69,.95);
        
        backdrop-filter:blur(15px);
        
        z-index:999;
        
        }
    
    header .contenedor{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    }
    
    .logo h2{
    
        color:var(--arena);
    
    font-size:30px;
    
    }
    
    .logo span{
    
    color:var(--cyan);
    
    }
    
    nav ul{
    
    display:flex;
    
    gap:34px;
    
    }
    
    nav a{
    
 color:var(--arena);
    
    font-weight:600;
    
    font-size:15px;
    
    transition:.3s;
    
    position:relative;
    
    }
    
    nav a::after{
    
    content:"";
    
    position:absolute;
    
    left:0;
    
    bottom:-6px;
    
    width:0;
    
    height:2px;
    
    background:var(--cyan);
    
    transition:.3s;
    
    }
    
    nav a:hover::after{
    
    width:100%;
    
    }
    
    .btn-nav{
    
    padding:14px 26px;
    
    background:var(--cyan);
    
    color:var(--petroleo);
    
    font-weight:700;
    
    border-radius:999px;
    
    transition:.35s;
    
    }
    
    .btn-nav:hover{
    
    transform:translateY(-3px);
    
    box-shadow:0 15px 30px rgba(44,212,232,.35);
    
    }
    
    /* ===========================
    HERO
    =========================== */
    
    .hero{
    
    min-height:100vh;
    
    display:flex;
    
    align-items:center;
    
    background:var(--petroleo);

    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .hero::before{
    
    content:"";
    
    position:absolute;
    
    width:900px;
    
    height:900px;
    
    border-radius:50%;
    
    background:rgba(44,212,232,.08);
    
    right:-250px;
    
    top:-250px;
    
    filter:blur(10px);
    
    }
    
    .hero::after{
    
    content:"";
    
    position:absolute;
    
    width:650px;
    
    height:650px;
    
    background:rgba(255,255,255,.04);
    
    border-radius:50%;
    
    left:-200px;
    
    bottom:-250px;
    
    }
    
    .hero-grid{
    
    display:grid;
    
    grid-template-columns:1fr 1fr;
    
    align-items:center;
    
    gap:80px;
    
    padding-top:120px;
    
    }
    
    .hero-texto{
    
    position:relative;
    
    z-index:3;
    
    }
    
    .tag{
    
    display:inline-block;
    
    padding:12px 22px;
    
    background:rgba(255,255,255,.08);
    
    border:1px solid rgba(255,255,255,.1);
    
    border-radius:999px;
    
    color:var(--cyan);
    
    font-weight:700;
    
    margin-bottom:28px;
    
    }
    
    .hero h1{
    
    font-size:66px;
    
    line-height:1.05;
    
    color:var(--arena);
    
    margin-bottom:28px;
    
    max-width:650px;
    
    }
    
    .hero p{
    
    font-size:19px;
    
    line-height:1.9;
    
    color: #C9D7DB;
    
    max-width:560px;
    
    margin-bottom:40px;
    
    }
    
    .hero-botones{
    
    display:flex;
    
    gap:18px;
    
    }
    
    .btn-principal{
    
    background:var(--cyan);
    
    padding:18px 34px;
    
    border-radius:999px;
    
    font-weight:700;
    
    color:var(--petroleo);
    
    transition:.35s;
    
    }
    
    .btn-principal:hover{
    
    transform:translateY(-4px);
    
    box-shadow:0 18px 40px rgba(44,212,232,.3);
    
    }
    
    .btn-secundario{
    
    padding:18px 34px;
    
    border:1px solid rgba(255,255,255,.2);
    
    border-radius:999px;
    
    color:white;
    
    transition:.35s;
    
    }
    
    .btn-secundario:hover{
    
    background:white;
    
    color:var(--petroleo);
    
    }
    
    .hero-visual{
    
    position:relative;
    
    height:700px;
    
    }
    
    .circulo{
    
    position:absolute;
    
    border-radius:50%;
    
    }
    
    .grande{
    
    width:520px;
    
    height:520px;
    
    background:rgba(44,212,232,.12);
    
    right:30px;
    
    top:70px;
    
    }
    
    .mediano{
    
    width:300px;
    
    height:300px;
    
    border:2px solid rgba(255,255,255,.12);
    
    right:160px;
    
    top:180px;
    
    }
    
    .chico{
    
    width:120px;
    
    height:120px;
    
    background:var(--cyan);
    
    opacity:.25;
    
    right:320px;
    
    top:130px;
    
    }
    
    .glass-card{
    
    position:absolute;
    
    background:rgba(255,255,255,.08);
    
    backdrop-filter:blur(18px);
    
    padding:28px;
    
    border-radius:24px;
    
    border:1px solid rgba(255,255,255,.12);
    
    color:white;
    
    box-shadow:var(--shadow);
    
    }
    
    .glass-card h3{
    
    font-size:38px;
    
    margin-bottom:8px;
    
    color:var(--cyan);
    
    }
    
    .card1{
    
    top:90px;
    
    left:30px;
    
    }
    
    .card2{
    
    right:0;
    
    top:300px;
    
    }
    
    .card3{
    
    bottom:70px;
    
    left:90px;
    
    }
    /*==================================================
EMPRESAS
==================================================*/

.empresas{

    padding:70px 0 45px;

    background:var(--arena);

    overflow:hidden;

}
    
    .empresas h2{
    
    color:var(--arena);
    }
    
    .slider{

        position:relative;
    
        overflow:hidden;
    
        background:var(--arena);
    
        padding:10px 0;
    
    }
    
    
    .slide-track{
    
        display:flex;
    
        width:calc(250px * 20);
    
        animation:scroll 35s linear infinite;
    
        align-items:center;
    
    }
    
    
    .logo-item{
    
        width:220px;
    
        height:65px;
    
        margin:0 25px;
    
        display:flex;
    
        justify-content:center;
    
        align-items:center;
    
        flex-shrink:0;
    
        transition:.35s;
    
    }
    
    
    .logo-item img{
    
        max-width:180px;
    
        max-height:55px;
    
        width:auto;
    
        height:auto;
    
        object-fit:contain;
    
        filter:grayscale(100%);
    
        opacity:.8;
    
        transition:.35s;
    
    }
    
    
    .logo-item:hover img{
    
        filter:none;
    
        opacity:1;
    
        transform:scale(1.08);
    
    }
    
    @keyframes scroll{
    
    0%{
    
    transform:translateX(0);
    
    }
    
    100%{
    
    transform:translateX(calc(-235px * 10));
    
    }
    
    }
    
    /*==================================================
    FRASE
    ==================================================*/
    
    .frase{
    
        padding-top:70px;
    
    background:var(--petroleo);
    
    text-align:center;
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .frase::before{
    
    content:"";
    
    position:absolute;
    
    width:450px;
    
    height:450px;
    
    border-radius:50%;
    
    background:rgba(44,212,232,.08);
    
    left:-120px;
    
    top:-120px;
    
    }
    
    .frase::after{
    
    content:"";
    
    position:absolute;
    
    width:350px;
    
    height:350px;
    
    border-radius:50%;
    
    background:rgba(6,56,69,.05);
    
    right:-100px;
    
    bottom:-120px;
    
    }
    
    .frase h2{
    
    font-size:64px;
    
    line-height:1.2;
    
    max-width:950px;
    
    margin:auto;
    
    color:var(--arena);
    
    position:relative;
    
    z-index:2;
    
    }
    
    /*==================================================
    FOUNDERS
    ==================================================*/
    
    .founders{
    
    padding:150px 0;
    
    background:var(--petroleo);
    
    }
    
    .founders h5{
    
    text-align:center;
    
    color:var(--cyan);
    
    letter-spacing:4px;
    
    margin-bottom:80px;
    
    font-size:15px;
    
    }
    
    .founder{
    
    display:grid;
    
    grid-template-columns:1fr 1fr;
    
    gap:80px;
    
    align-items:center;
    
    margin-bottom:140px;
    
    }
    
    .founder:last-child{
    
    margin-bottom:0;
    
    }
    
    .reverse{
    
    direction:rtl;
    
    }
    
    .reverse>*{
    
    direction:ltr;
    
    }
    
    .foto-founder{

        height:520px;
        
        border-radius:35px;
        
        overflow:hidden;
        
        box-shadow:0 25px 60px rgba(0,0,0,.18);
        
        }
        
        .foto-founder img{
        
       width: 100%;
        
        height: 100%;
        
        object-fit: cover;
        
       display: block;
        
        transition:.5s;
        
        }
        
        .foto-founder:hover img{
        
        transform:scale(1.05);
        
        }
    
    .texto h2{
    
    font-size:56px;
    
    margin-bottom:28px;
    
    color:var(--arena);
    
    }
    
    .texto p{
    
    font-size:19px;
    
    line-height:2;
    
    color:#d5e2e5;
    
    max-width:520px;
    
    margin-bottom:35px;
    
    }
    
    .texto a{
    
    display:inline-flex;
    
    align-items:center;
    
    gap:10px;
    
    padding:16px 32px;
    
    border-radius:999px;
    
    background:var(--cyan);
    
    color:var(--petroleo);
    
    font-weight:800;
    
    transition:.35s;
    
    }
    
    .texto a:hover{
    
    transform:translateY(-5px);
    
    box-shadow:0 15px 35px rgba(44,212,232,.25);
    
    }
    /*==================================================
INTEGRAMOS
==================================================*/

.integramos{

    padding:150px 0;
    
    background:var(--arena);
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .integramos::before{
    
    content:"";
    
    position:absolute;
    
    width:700px;
    
    height:700px;
    
    border-radius:50%;
    
    background:rgba(44,212,232,.05);
    
    right:-250px;
    
    top:-250px;
    
    }
    
    .titulo-seccion{
    
    text-align:center;
    
    margin-bottom:90px;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .titulo-seccion span{
    
    display:inline-block;
    
    color:var(--cyan);
    
    font-size:14px;
    
    font-weight:800;
    
    letter-spacing:4px;
    
    margin-bottom:20px;
    
    }
    
    .titulo-seccion h2{
    
    font-size:56px;
    
    color:var(--petroleo);
    
    margin-bottom:25px;
    
    }
    
    .titulo-seccion p{
    
    font-size:20px;
    
    color:var(--gris);
    
    max-width:760px;
    
    margin:auto;
    
    line-height:1.9;
    
    }
    
    .timeline{

        display:grid;
    
        grid-template-columns:repeat(4,1fr);
    
        gap:25px;
    
        position:relative;
    
        align-items:stretch;
    
    }
    
    .timeline::before{

        content:"";
    
        position:absolute;
    
        left:7%;
        right:7%;
    
        top:35px;
    
        height:1px;
    
        background:linear-gradient(
            90deg,
            transparent,
            rgba(6,56,69,.30),
            var(--cyan),
            rgba(6,56,69,.30),
            transparent
        );
    
        z-index:0;
    
    }
    
    .timeline-item{

        background:#efe5d6;
    
        padding:40px;
    
        border-radius:28px;
    
        position:relative;
    
        z-index:2;
    
        transition:.35s;
    
        box-shadow:0 18px 40px rgba(0,0,0,.05);
    
        min-height:330px;
    
        box-sizing:border-box;
    
        display:flex;
    
        flex-direction:column;
    
    }
    
    .timeline-item:hover{
    
    transform:translateY(-10px);
    
    box-shadow:0 30px 60px rgba(0,0,0,.10);
    
    }
    
    .numero{
    
    width:70px;
    
    height:70px;
    
    background:var(--petroleo);
    
    border-radius:50%;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-weight:800;
    
    font-size:22px;
    
    color:var(--arena);
    
    margin-bottom:30px;
    
    }
    
    .timeline-item h3{

        font-size:25px;
    
        margin-bottom:15px;
    
    }
    
    .timeline-item p{

        line-height:1.7;
    
        color:var(--gris);
    
        font-size:16px;
    
    }
    
    /*==================================================
    IMPACTO
    ==================================================*/
    
    .impacto{
    
    padding:170px 0;
    
    background:linear-gradient(
    135deg,
    var(--petroleo),
    #0A4958
    );
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .impacto::before{
    
    content:"";
    
    position:absolute;
    
    width:550px;
    
    height:550px;
    
    border-radius:50%;
    
    background:rgba(44,212,232,.08);
    
    top:-180px;
    
    right:-120px;
    
    }
    
    .impacto .titulo-seccion h2{
    
    color:var(--arena);
    
    }
    
    .impacto-grid{
    
    display:grid;
    
    grid-template-columns:repeat(2,1fr);
    
    gap:35px;
    
    }
    
    .impacto-card{
    
    background:rgba(255,255,255,.08);
    
    backdrop-filter:blur(18px);
    
    padding:45px;
    
    border-radius:28px;
    
    border:1px solid rgba(255,255,255,.08);
    
    transition:.35s;
    
    }
    
    .impacto-card:hover{
    
    transform:translateY(-12px);
    
    background:rgba(44,212,232,.15);
    
    }
    
    .impacto-card h3{
    
    font-size:34px;
    
    color:var(--arena);
    
    margin-bottom:20px;
    
    }
    
    .impacto-card p{
    
    color:#d8e5e8;
    
    line-height:1.9;
    
    font-size:18px;
    
    }
    /*==================================================
SERVICIOS
==================================================*/

.servicios{

    padding:170px 0;
    
    background:var(--arena);
    
    position:relative;
    
    }
    
    .servicios-grid{
    
    display:grid;
    
    grid-template-columns:repeat(2,1fr);
    
    gap:35px;
    
    margin-top:70px;
    
    }
    
    .servicio{

        background:linear-gradient(
        135deg,
        #0B5161,
        #063845
        );
        
        border-radius:32px;
        
        padding:55px;
        
        min-height:260px;
        
        display:flex;
        
        flex-direction:column;
        
        justify-content:flex-start;
        
        position:relative;
        
        overflow:hidden;
        
        transition:.4s;
        
        cursor:pointer;
        
        box-shadow:0 20px 45px rgba(0,0,0,.08);
        
        }
        .servicio h3{

            color:var(--arena);
            
            font-size:30px;
            
            margin-bottom:18px;
            
            }
            
            .servicio p{
            
                color:rgba(244,226,190,.85);
                
                line-height:1.8;
                
                font-size:17px;
                
                margin-bottom:25px;
                
                }
            
            .contenido-lista{
            
            display:flex;
            
            flex-wrap:wrap;
            
            gap:10px;
            
            list-style:none;
            
            padding:0;
            
            margin:0;
            
            }
            
            .contenido-lista li{
            
            background:rgba(rgb(17, 34, 78), rgb(10, 28, 82));
            
            color:var(--arena);
            
            padding:8px 14px;
            
            border-radius:30px;
            
            font-size:14px;
            
            font-weight:600;
            
            border:1px solid rgba(46,216,232,.35);
            
            }
    
   
            .servicio::before{
    
                content:"";
                
                position:absolute;
                
                width:240px;
                
                height:240px;
                
                border-radius:50%;
                
                background:rgba(44,212,232,.08);
                
                right:-70px;
                
                top:-70px;
                
                transition:.4s;
                
                }
    .servicio:hover{
    
    transform:translateY(-12px);
    
    }
    
    .servicio:hover::before{
    
    transform:scale(1.25);
    
    }
    
    .servicio h3{
    
        font-size:34px;
        
        color:var(--arena);
        
        line-height:1.2;
        
        max-width:320px;
        
        z-index:2;
        
        } 
    
   
    
    .servicio:hover::after{
    
    transform:translateX(8px);
    
    }
    
    /*==================================================
    RECURSOS
    ==================================================*/
    
    .recursos{

        padding:170px 0;
        
        background:var(--petroleo);
        
        }
        .recursos h2{

            color:var(--arena);
            
            }
            
            .recursos span{
            
            color:var(--cyan);
            
            }
        .recursos-grid{

            display:grid;
            
            grid-template-columns:repeat(5, 1fr);
            
            gap:25px;
            
            margin-top:70px;
            
            align-items:stretch;
            
            }
        
        
        
            .recurso{

                display:flex;
                justify-content:center;
                align-items:center;
                text-align:center;
                
                min-height:220px;
                
                text-decoration:none;
                color:inherit;
                
                background:#0A4A58;
                border-radius:28px;
                padding:40px 25px;
                
                transition:.35s;
                
                position:relative;
                overflow:hidden;
                
                box-shadow:0 18px 40px rgba(0,0,0,.05);
                
                }
        
        .recurso::before{
        
        content:"";
        
        position:absolute;
        
        width:160px;
        
        height:160px;
        
        border-radius:50%;
        
        background:rgba(44,212,232,.10);
        
        top:-80px;
        
        right:-80px;
        
        transition:.35s;
        
        }
        
        .recurso:hover{
        
        transform:translateY(-12px);
        
        background:var(--cyan);
        
        }
        
        .recurso:hover::before{
        
        transform:scale(1.3);
        
        }
        
        .recurso h3{
        
        position:relative;
        
        z-index:2;
        
        font-size:28px;
        
        color:var(--arena);
        
        transition:.35s;
        
        }
        
        .recurso:hover h3{
        
            color:var(--petroleo);
        
        }
    
    /*==================================================
    ANIMACIONES
    ==================================================*/
    
    .servicio,
    .recurso{
    
    opacity:0;
    
    transform:translateY(40px);
    
    animation:fadeUp .8s forwards;
    
    }
    
    .servicio:nth-child(2){
    
    animation-delay:.1s;
    
    }
    
    .servicio:nth-child(3){
    
    animation-delay:.2s;
    
    }
    
    .servicio:nth-child(4){
    
    animation-delay:.3s;
    
    }
    
    .servicio:nth-child(5){
    
    animation-delay:.4s;
    
    }
    
    .recurso:nth-child(1){
    
    animation-delay:.2s;
    
    }
    
    .recurso:nth-child(2){
    
    animation-delay:.3s;
    
    }
    
    .recurso:nth-child(3){
    
    animation-delay:.4s;
    
    }
    
    .recurso:nth-child(4){
    
    animation-delay:.5s;
    
    }
    
    .recurso:nth-child(5){
    
    animation-delay:.6s;
    
    }
    
    @keyframes fadeUp{
    
    to{
    
    opacity:1;
    
    transform:translateY(0);
    
    }
    
    }
    /*==================================================
CTA FINAL
==================================================*/

.cta{

    padding:180px 0;
    
    background:linear-gradient(
    135deg,
    #063845,
    #0C596B
    );
    
    text-align:center;
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .cta::before{
    
    content:"";
    
    position:absolute;
    
    width:700px;
    
    height:700px;
    
    background:rgba(44,212,232,.08);
    
    border-radius:50%;
    
    left:-250px;
    
    bottom:-300px;
    
    }
    
    .cta::after{
    
    content:"";
    
    position:absolute;
    
    width:500px;
    
    height:500px;
    
    background:rgba(255,255,255,.04);
    
    border-radius:50%;
    
    right:-120px;
    
    top:-120px;
    
    }
    
    .cta .contenedor{
    
    position:relative;
    
    z-index:2;
    
    }
    
    .cta h2{
    
    font-size:68px;
    
    line-height:1.1;
    
    max-width:900px;
    
    margin:auto;
    
    color:var(--arena);
    
    margin-bottom:30px;
    
    }
    
    .cta p{
    
    font-size:22px;
    
    line-height:1.8;
    
    max-width:720px;
    
    margin:auto;
    
    color:#D8E4E7;
    
    margin-bottom:55px;
    
    }
    
    .cta .btn-principal{
    
    font-size:18px;
    
    padding:20px 42px;
    
    }
    
    /*==================================================
    FOOTER
    ==================================================*/
    
    footer{
    
    background:#052F39;
    
    padding:90px 0 50px;
    
    color:white;
    
    }
    
    .footer-grid{

        display:grid;
        
        grid-template-columns:2fr 1fr;
        
        gap:80px;
        
        align-items:flex-start;
        
        }
    
    footer h3{
    
    font-size:34px;
    
    margin-bottom:20px;
    
    color:var(--arena);
    
    }
    
    footer h4{
    
    font-size:22px;
    
    margin-bottom:25px;
    
    color:var(--cyan);
    
    }
    
    footer p{
    
    line-height:2;
    
    color:#C9D7DB;
    
    }
    
    footer ul{
    
    display:flex;
    
    flex-direction:column;
    
    gap:16px;
    
    }
    
    footer li{
    
    color:#DCE8EB;
    
    transition:.3s;
    
    cursor:pointer;
    
    }
    
    footer li:hover{
    
    color:var(--cyan);
    
    padding-left:6px;
    
    }
    
    footer::after{
    
    content:"";
    
    display:block;
    
    width:100%;
    
    height:1px;
    
    background:rgba(255,255,255,.08);
    
    margin-top:70px;
    
    }
    
    /*==================================================
    BOTONES GENERALES
    ==================================================*/
    
    .btn-principal{
    
        background:var(--cyan);

        color:var(--petroleo);
    
    }
    
    .btn-principal:hover{
    
        background:var(--arena);

        color:var(--petroleo);
    
    }
    
    .btn-secundario{
    
    display:inline-flex;
    
    align-items:center;
    
    justify-content:center;
    
    }
    
    /*==================================================
    SCROLLBAR
    ==================================================*/
    
    ::-webkit-scrollbar{
    
    width:10px;
    
    }
    
    ::-webkit-scrollbar-track{
    
    background:var(--arena);
    
    }
    
    ::-webkit-scrollbar-thumb{
    
    background:var(--petroleo);
    
    border-radius:999px;
    
    }
    
    ::-webkit-scrollbar-thumb:hover{
    
    background:#0B5161;
    
    }
    /*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1200px){

    .hero h1{
    
    font-size:56px;
    
    }
    
    .timeline{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    .recursos-grid{
    
    grid-template-columns:repeat(3,1fr);
    
    }
    
    }
    
    @media (max-width:992px){
    
    header{
    
    padding:18px 0;
    
    }
    
    nav{
    
    display:none;
    
    }
    
    .hero-grid{
    
    grid-template-columns:1fr;
    
    gap:60px;
    
    text-align:center;
    
    }
    
    .hero p{
    
    margin:auto;
    
    margin-bottom:40px;
    
    }
    
    .hero-botones{
    
    justify-content:center;
    
    }
    
    .hero-visual{
    
    height:500px;
    
    }
    
    .glass-card{
    
    position:relative;
    
    margin:20px auto;
    
    left:auto;
    
    right:auto;
    
    top:auto;
    
    bottom:auto;
    
    width:280px;
    
    }
    
    .founder{
    
    grid-template-columns:1fr;
    
    gap:50px;
    
    }
    
    .reverse{
    
    direction:ltr;
    
    }
    
    .impacto-grid{
    
    grid-template-columns:1fr;
    
    }
    
    .servicios-grid{
    
    grid-template-columns:1fr;
    
    }
    
    .recursos-grid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    .footer-grid{
    
    grid-template-columns:1fr;
    
    gap:50px;
    
    }
    
    .cta h2{
    
    font-size:52px;
    
    }
    
    .frase h2{
    
    font-size:48px;
    
    }
    
    }
    
    @media (max-width:768px){
    
    .hero{
    
    padding:120px 0 80px;
    
    }
    
    .hero h1{
    
    font-size:42px;
    
    }
    
    .hero p{
    
    font-size:17px;
    
    }
    
    .tag{
    
    font-size:13px;
    
    }
    
    .hero-visual{
    
    display:none;
    
    }
    
    .timeline{
    
    grid-template-columns:1fr;
    
    }
    
    .timeline::before{
    
    display:none;
    
    }
    
    .timeline-item{
    
    margin-bottom:25px;
    
    }
    
    .titulo-seccion h2{
    
    font-size:38px;
    
    }
    
    .empresas h2{
    
    font-size:34px;
    
    }
    
    .frase{
    
    padding:110px 0;
    
    }
    
    .frase h2{
    
    font-size:38px;
    
    }
    
    .texto h2{
    
    font-size:42px;
    
    }
    
    .texto p{
    
    font-size:17px;
    
    }
    
    .servicio{
    
    padding:40px;
    
    min-height:220px;
    
    }
    
    .servicio h3{
    
    font-size:28px;
    
    }
    
    .recursos-grid{
    
    grid-template-columns:1fr;
    
    }
    
    .recurso{
    
    padding:35px;
    
    }
    
    .cta{
    
    padding:120px 0;
    
    }
    
    .cta h2{
    
    font-size:42px;
    
    }
    
    .cta p{
    
    font-size:18px;
    
    }
    
    .btn-principal,
    
    .btn-secundario{
    
    width:100%;
    
    justify-content:center;
    
    }
    
    .hero-botones{
    
    flex-direction:column;
    
    }
    
    }
    
    @media (max-width:480px){
    
    .logo h2{
    
    font-size:24px;
    
    }
    
    .hero h1{
    
    font-size:34px;
    
    }
    
    .hero{
    
    min-height:auto;
    
    }
    
    .empresas{
    
    padding:80px 0;
    
    }
    
    .logo-item{
    
    width:180px;
    
    height:90px;
    
    font-size:18px;
    
    }
    .logo-item img{

        max-width:140px;
    
        max-height:55px;
    
        width:auto;
    
        height:auto;
    
        object-fit:contain;
    
        filter: grayscale(100%);
    
        opacity:.8;
    
        transition:.35s;
    
    }
    
    .foto-placeholder{
    
    height:340px;
    
    font-size:30px;
    
    }
    
    .texto h2{
    
    font-size:34px;
    
    }
    
    .titulo-seccion h2{
    
    font-size:32px;
    
    }
    
    .servicio h3{
    
    font-size:24px;
    
    }
    
    .impacto-card h3{
    
    font-size:28px;
    
    }
    
    .cta h2{
    
    font-size:34px;
    
    }
    
    footer{
    
    text-align:center;
    
    }
    
    }
    
    /*==================================================
    ANIMACIONES GENERALES
    ==================================================*/
    
    .fade-up{
    
    opacity:0;
    
    transform:translateY(40px);
    
    transition:.8s ease;
    
    }
    
    .fade-up.visible{
    
    opacity:1;
    
    transform:translateY(0);
    
    }
    
    .fade-left{
    
    opacity:0;
    
    transform:translateX(-60px);
    
    transition:.8s ease;
    
    }
    
    .fade-left.visible{
    
    opacity:1;
    
    transform:translateX(0);
    
    }
    
    .fade-right{
    
    opacity:0;
    
    transform:translateX(60px);
    
    transition:.8s ease;
    
    }
    
    .fade-right.visible{
    
    opacity:1;
    
    transform:translateX(0);
    
    }
    /*==================================================
PÁGINAS DE RECURSOS
==================================================*/

.pagina-recurso{

    background:var(--petroleo);

    min-height:100vh;

    padding:180px 0 120px;

}

.pagina-recurso .titulo-seccion{

    text-align:center;

    margin-bottom:80px;

}

.pagina-recurso .titulo-seccion span{

    color:var(--cyan);

    font-weight:700;

    letter-spacing:3px;

}

.pagina-recurso .titulo-seccion h2{

    color:var(--arena);

    font-size:54px;

    margin:20px 0;

}

.pagina-recurso .titulo-seccion p{

    color:rgba(244,226,190,.8);

    max-width:850px;

    margin:auto;

    line-height:1.8;

    font-size:19px;

}

/* GRID */

.videos-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:35px;

}

/* TARJETAS */

.video-card{

    background:#0A4A58;

    border-radius:28px;

    padding:35px;

    border:1px solid rgba(46,216,232,.15);

    transition:.35s;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.video-card:hover{

    transform:translateY(-10px);

    border-color:var(--cyan);

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.video-card h3{

    color:var(--arena);

    font-size:30px;

    margin-bottom:18px;

}

.video-card p{

    color:rgba(244,226,190,.75);

    line-height:1.8;

    margin-bottom:35px;

}

/* BOTÓN */

.video-card a{

    align-self:flex-start;

    text-decoration:none;

    background:var(--cyan);

    color:var(--petroleo);

    padding:15px 30px;

    border-radius:999px;

    font-weight:700;

    transition:.3s;

}

.video-card a:hover{

    background:var(--arena);

    transform:translateY(-3px);

}

/* RESPONSIVE */

@media(max-width:768px){

    .pagina-recurso{

        padding:140px 0 80px;

    }

    .pagina-recurso .titulo-seccion h2{

        font-size:40px;

    }

    .videos-grid{

        grid-template-columns:1fr;

    }
    
}
.servicio p{

    margin-top:18px;

    line-height:1.8;

    color:var(--arena);

    font-size:17px;

}

.contenido-lista{

    margin-top:20px;

    padding-left:20px;

}

.contenido-lista li{

    color:var(--arena);

    margin-bottom:10px;

    line-height:1.6;

}
.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo img{
    width:170px;
    height:auto;
    display:block;

    /* Arena de NeuroBienestar */
    filter: brightness(0) saturate(100%)
            invert(87%) sepia(20%)
            saturate(500%)
            hue-rotate(355deg)
            brightness(105%)
            contrast(92%);
}
.bio-text{

    color:var(--gris);

    font-size:16px;

    line-height:1.8;

    text-align:left;

    margin-top:25px;

}

.bio-text br{

    display:block;

    content:"";

    margin-bottom:4px;

}
/* =====================================================
   ANIMACIONES GENERALES - NEUROBIENESTAR
   ===================================================== */

   html{
    scroll-behavior:smooth;
}


/* Aparición suave de elementos */

@keyframes aparecerArriba{

    from{
        opacity:0;
        transform:translateY(35px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* Movimiento flotante */

@keyframes flotacion{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}


/* Pulso cyan */

@keyframes pulsoCyan{

    0%,100%{
        box-shadow:0 0 0 0 rgba(44,212,232,.20);
    }

    50%{
        box-shadow:0 0 0 18px rgba(44,212,232,0);
    }

}


/* Movimiento de círculos */

@keyframes circuloFlotante{

    0%,100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(15px,-20px);
    }

}


/* Entrada de las tarjetas */

.impacto-card,
.servicio,
.timeline-item,
.recurso,
.video-card{

    animation:aparecerArriba .8s ease both;

}


/* Hover general */

.impacto-card,
.servicio,
.timeline-item,
.recurso,
.video-card{

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        background .4s ease;

}

.impacto-card:hover,
.servicio:hover,
.timeline-item:hover,
.recurso:hover,
.video-card:hover{

    transform:translateY(-8px);

}
/* =====================================================
   ELEMENTOS DECORATIVOS
   ===================================================== */

   .decoracion-circulo{

    position:absolute;

    border:1px solid rgba(44,212,232,.35);

    border-radius:50%;

    pointer-events:none;

    animation:circuloFlotante 7s ease-in-out infinite;

}


.decoracion-circulo::before{

    content:"";

    position:absolute;

    width:8px;

    height:8px;

    background:var(--cyan);

    border-radius:50%;

    top:20%;

    left:10%;

    box-shadow:
        0 0 15px rgba(44,212,232,.7);

}


.decoracion-circulo.c1{

    width:280px;

    height:280px;

    right:-120px;

    top:100px;

}


.decoracion-circulo.c2{

    width:160px;

    height:160px;

    left:-70px;

    bottom:100px;

    animation-delay:2s;

}


.decoracion-circulo.c3{

    width:90px;

    height:90px;

    right:15%;

    top:20%;

    animation-delay:1s;

}
.titulo-seccion h2{

    position:relative;

    display:inline-block;

}


.titulo-seccion h2::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    background:var(--cyan);

    border-radius:10px;

    margin:22px auto 0;

    transition:.4s;

}


.titulo-seccion:hover h2::after{

    width:100px;

}
.hero{

    position:relative;

    overflow:hidden;

}


.hero::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border:1px solid rgba(44,212,232,.18);

    border-radius:50%;

    right:-170px;

    top:-100px;

    box-shadow:

        0 0 0 70px rgba(44,212,232,.025),

        0 0 0 140px rgba(44,212,232,.018);

    animation:flotacion 8s ease-in-out infinite;

}


.hero::after{

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    background:var(--cyan);

    border-radius:50%;

    right:18%;

    top:30%;

    box-shadow:

        0 0 20px rgba(44,212,232,.8),

        80px 80px 0 -3px rgba(44,212,232,.5),

        -100px 130px 0 -4px rgba(44,212,232,.35);

    animation:pulsoCyan 3s infinite;

}
.numero{

    animation:pulsoCyan 4s infinite;

    transition:.4s;

}


.timeline-item:hover .numero{

    transform:scale(1.08);

}
@media (max-width:768px){

    .decoracion-circulo.c1{

        width:180px;

        height:180px;

        right:-100px;

    }

    .decoracion-circulo.c2{

        width:120px;

        height:120px;

        left:-70px;

    }

    .decoracion-circulo.c3{

        width:70px;

        height:70px;

        right:5%;

    }

    .hero::before{

        width:300px;

        height:300px;

        right:-150px;

    }

    .hero::after{

        right:15%;

    }

}
/* Títulos de sección centrados */
.titulo-seccion{
    text-align:center;
}

.titulo-seccion span{
    display:block;
    width:100%;
    margin-bottom:20px;
    color:var(--cyan);
    text-align:center;
}

.titulo-seccion h2{
    display:block;
    width:100%;
    text-align:center;
}
.titulo-seccion h2::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    background:var(--cyan);

    border-radius:10px;

    margin:22px auto 0;

    transition:.4s;

}
@media (max-width:768px){

    .founder,
    .founder.reverse{

        display:flex;

        flex-direction:column;

        gap:35px;

        margin-bottom:90px;

    }

    .founder.reverse{

        direction:ltr;

    }

    .founder.reverse > *{

        direction:ltr;

    }

    .foto-founder{

        width:100%;

        height:420px;

        order:1;

    }

    .texto{

        order:2;

    }

}
/* =========================================
   DETALLES NEURO - SECCIONES ARENA
   ========================================= */

   .servicios,
   .integramos,
   .recursos,
   .impacto{
   
       position:relative;
       overflow:hidden;
   
   }
   
   
   /* líneas decorativas */
   
   .servicios::before,
   .integramos::before,
   .recursos::before,
   .impacto::before{
   
       content:"";
   
       position:absolute;
   
       width:520px;
       height:520px;
   
       border:1px solid rgba(6,56,69,.12);
   
       border-radius:50%;
   
       right:-260px;
       top:80px;
   
       pointer-events:none;
   
       animation:lineaFlotante 12s ease-in-out infinite;
   
   }
   
   
   /* segundo círculo */
   
   .servicios::after,
   .integramos::after,
   .recursos::after,
   .impacto::after{
   
       content:"";
   
       position:absolute;
   
       width:260px;
       height:260px;
   
       border:1px solid rgba(6,56,69,.10);
   
       border-radius:50%;
   
       left:-130px;
       bottom:50px;
   
       pointer-events:none;
   
       animation:lineaFlotante 15s ease-in-out infinite reverse;
   
   }
   
   
   /* movimiento */
   
   @keyframes lineaFlotante{
   
       0%,100%{
           transform:translate(0,0) rotate(0deg);
       }
   
       50%{
           transform:translate(18px,-15px) rotate(4deg);
       }
   
   }



@keyframes puntoNeuro{

    0%,100%{
        transform:translateY(0);
        opacity:.5;
    }

    50%{
        transform:translateY(-8px);
        opacity:1;
    }

}
/* =========================================
   CÍRCULOS DECORATIVOS PETRÓLEO
   ========================================= */

.servicios,
.impacto,
.integramos,
.recursos{
    position:relative;
    overflow:hidden;
}

.servicios::before,
.impacto::before,
.integramos::before,
.recursos::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border:2px solid rgba(6,56,69,.28);

    border-radius:50%;

    right:-190px;
    top:40px;

    pointer-events:none;

    animation:flotarCirculo 9s ease-in-out infinite;
}

.servicios::after,
.impacto::after,
.integramos::after,
.recursos::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border:2px solid rgba(6,56,69,.22);

    border-radius:50%;

    left:-80px;
    bottom:60px;

    pointer-events:none;

    animation:flotarCirculo 11s ease-in-out infinite reverse;
}

@keyframes flotarCirculo{

    0%,100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(12px,-15px);
    }

}

.integramos::before{
    box-shadow:
        0 0 0 35px rgba(6,56,69,.05),
        0 0 0 70px rgba(6,56,69,.025);
}


/* Contenido por encima de los círculos */

.servicios > .contenedor,
.impacto > .contenedor,
.integramos > .contenedor,
.recursos > .contenedor{
    position:relative;
    z-index:2;
}


/* Versión celular */

@media (max-width:768px){

    .servicios::before,
    .impacto::before,
    .integramos::before,
    .recursos::before{

        width:260px;
        height:260px;

        right:-150px;
        top:40px;
    }

    .servicios::after,
    .impacto::after,
    .integramos::after,
    .recursos::after{

        width:120px;
        height:120px;

        left:-60px;
        bottom:40px;
    }

}

    .servicios::after,
    .impacto::after,
    .integramos::after,
    .recursos::after{

        width:120px;
        height:120px;

        left:-60px;
        bottom:40px;

    }