/*==================================================
                RESET
==================================================*/

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

html{
    scroll-behavior:smooth;
}

:root{

    --primary:#08203A;
    --secondary:#C9A227;
    --text:#555;
    --bg:#f7f7f7;
    --white:#ffffff;
    --container:1200px;

}

body{

    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:#222;
    padding-top:72px;

}

/*==================================================
                CONTENEDOR
==================================================*/

.container{

    width:min(92%,var(--container));
    margin:auto;

}

/*==================================================
                HEADER
==================================================*/

header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:72px;
    background:var(--primary);
    z-index:1000;
    box-shadow:0 2px 12px rgba(0,0,0,.15);

}

header .container{

    height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    display:flex;

    align-items:center;

}

.logo-dg{

    font-family:'Playfair Display',serif;

    font-size:32px;

    color:white;

    margin-right:15px;

}

.logo-texto{

    color:white;

    font-size:15px;

    letter-spacing:2px;

}

.menu-linea{

    display:flex;

    align-items:center;

}

.titulo-linea-menu{

    color:white;

    font-size:1.15rem;

    font-weight:700;

    letter-spacing:2px;

}

/*==================================================
                HERO
==================================================*/

.hero-linea{

    position:relative;

    width:100%;

    height:360px;

    overflow:hidden;

}

.hero-banner{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.hero-linea::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(8,32,58,.45);

}

.hero-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;

    z-index:2;

}

.hero-overlay h1{

    font-family:'Playfair Display',serif;

    font-size:clamp(3rem,6vw,5rem);

    letter-spacing:4px;

    margin-bottom:15px;

}

.hero-overlay p{

    font-size:1.25rem;

    letter-spacing:1px;

    opacity:.95;

}
/*==================================================
            ESTILO GENERAL
==================================================*/

section{

    padding:90px 0;

}

.titulo-seccion{

    text-align:center;

    margin-bottom:55px;

}

.titulo-seccion h2{

    font-family:'Playfair Display',serif;

    font-size:clamp(2.2rem,4vw,3rem);

    color:var(--primary);

    margin-bottom:18px;

}

.linea-seccion{

    width:70px;

    height:3px;

    background:var(--secondary);

    margin:auto;

}

/*==================================================
                RESUMEN
==================================================*/

.resumen-linea{

    width:100%;

}

.resumen-contenido{

    max-width:780px;

    margin:auto;

}

.resumen-contenido p{

    font-size:1.08rem;

    line-height:2;

    color:var(--text);

    margin-bottom:28px;

    text-align:justify;

}

/*==================================================
            TECNOLOGÍAS
==================================================*/

.tecnologias-linea{

    width:100%;

}

.tecnologias-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.tecnologia-card{

    background:white;

    padding:28px;

    border-radius:18px;

    border:1px solid #e8e8e8;

    transition:.35s;
min-height:260px;
}

.tecnologia-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.tecnologia-card i{

    font-size:42px;

    color:var(--secondary);

    margin-bottom:20px;

}

.tecnologia-card h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:1.4rem;

}

.tecnologia-card p{

    color:var(--text);

    line-height:1.9;

}
/*==================================================
                IMPACTO
==================================================*/

.impacto-linea{

    background:white;

}

.impacto-intro{

    max-width:900px;

    margin:0 auto 55px;

    text-align:center;

}

.impacto-intro p{

    font-size:1.08rem;

    line-height:2;

    color:var(--text);

}

.impacto-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.impacto-card{

    background:#f8f9fb;

    border-radius:18px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

    border:1px solid #ececec;

}

.impacto-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.impacto-card svg{

    width:46px;

    height:46px;

    margin-bottom:20px;

    color:var(--secondary);

}

.impacto-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.impacto-card p{

    color:var(--text);

    line-height:1.8;

}
/*==================================================
        PROCESO DE INVESTIGACIÓN
==================================================*/

.proceso{

    width:100%;

}

.proceso-linea{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

    position:relative;

    margin-top:60px;

}

.proceso-linea::before{

    content:"";

    position:absolute;

    left:12%;

    right:12%;

    top:40px;

    height:3px;

    background:var(--secondary);

}

.proceso-item{

    position:relative;

    text-align:center;

    z-index:2;

}

.circulo{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:white;

    border:4px solid var(--secondary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    color:var(--primary);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.proceso-item h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:1.25rem;

}

.proceso-item p{

    color:var(--text);

    line-height:1.8;

    max-width:220px;

    margin:auto;

}

/*==================================================
            CASOS DE ESTUDIO
==================================================*/

.casos-estudio{

    width:100%;

}

.casos-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.caso-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.caso-card:hover{

    transform:translateY(-8px);

}

.caso-card img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.caso-info{

    padding:30px;

}

.caso-info h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:1.35rem;

}

.caso-info p{

    color:var(--text);

    line-height:1.8;

}
/*==================================================
                BOTÓN VOLVER
==================================================*/

.volver-home{

    width:100%;

    padding:80px 0 100px;

    text-align:center;

}

.boton-volver{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    background:var(--primary);

    color:white;

    text-decoration:none;

    border-radius:8px;

    font-weight:600;

    transition:.3s;

}

.boton-volver:hover{

    background:#12365d;

    transform:translateY(-4px);

}

/*==================================================
                FOOTER
==================================================*/

footer{

    background:#08203A;

    color:white;

    padding:30px 0;

    text-align:center;

}

footer p{

    font-size:.95rem;

    opacity:.9;

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:1000px){

    .tecnologias-grid{

        grid-template-columns:1fr;

    }

    .casos-grid{

        grid-template-columns:1fr;

    }

    .proceso-linea{

        grid-template-columns:1fr;

        gap:50px;

    }

    .proceso-linea::before{

        display:none;

    }

}

@media(max-width:768px){

    .hero-linea{

        height:340px;

    }

    .hero-overlay h1{

        font-size:2.7rem;

    }

    .hero-overlay p{

        font-size:1rem;

    }

    .logo-texto{

        font-size:13px;

    }

    .titulo-linea-menu{

        font-size:.9rem;

    }

    .titulo-seccion h2{

        font-size:2rem;

    }

}
/*==================================================
            ICONOS LUCIDE
==================================================*/

svg.lucide{

    width:42px;

    height:42px;

    stroke:var(--secondary);

    stroke-width:1.8;

}

.circulo svg.lucide{

    width:36px;

    height:36px;

    stroke:var(--primary);

}
/*==================================================
            OBJETIVO CIENTÍFICO
==================================================*/

.objetivo-cientifico{

    padding:90px 0;

}

.objetivo-box{

    max-width:900px;

    margin:auto;

    background:white;

    padding:55px 65px;

    border-radius:18px;

    text-align:center;

    border-left:6px solid var(--secondary);

    box-shadow:0 15px 35px rgba(0,0,0,.07);

}

.objetivo-etiqueta{

    display:inline-block;

    color:var(--secondary);

    font-weight:700;

    letter-spacing:3px;

    font-size:.85rem;

    margin-bottom:18px;

}

.objetivo-box h2{

    font-family:'Playfair Display',serif;

    color:var(--primary);

    font-size:2.2rem;

    line-height:1.35;

    margin-bottom:28px;

}

.objetivo-box p{

    color:var(--text);

    font-size:1.08rem;

    line-height:1.9;

    max-width:720px;

    margin:auto;

}
/*==================================================
        APLICACIONES
==================================================*/

.aplicaciones-linea{

    background:#f8fafc;

}

.aplicaciones-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:50px;

}

.aplicacion-card{

    background:white;

    border-radius:18px;

    padding:35px;

    border:1px solid #ececec;

    transition:.3s;

}

.aplicacion-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.aplicacion-card svg{

    width:42px;

    height:42px;

    color:var(--secondary);

    margin-bottom:20px;

}

.aplicacion-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.aplicacion-card p{

    color:var(--text);

    line-height:1.9;

}
/*==================================================
            RETOS CIENTÍFICOS
==================================================*/

.retos-linea{

    padding:90px 0;

}

.retos-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.reto-card{

    background:white;

    border-left:5px solid var(--secondary);

    border-radius:12px;

    padding:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:.3s;

}

.reto-card:hover{

    transform:translateY(-5px);

}

.reto-card h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:1.3rem;

}

.reto-card p{

    color:var(--text);

    line-height:1.9;

}

/* Mobile layout */
@media(max-width:640px){
    body{padding-top:64px;overflow-x:hidden;}
    header,header .container{height:64px;}
    header .container{width:94%;gap:10px;}
    .logo-dg{font-size:27px;margin-right:8px;}
    .logo-texto{font-size:10px;letter-spacing:1.1px;white-space:nowrap;}
    .titulo-linea-menu{font-size:.72rem;letter-spacing:.8px;text-align:right;}
    .hero-linea{height:270px;}
    .hero-overlay{padding:0 1rem;}
    .hero-overlay h1{font-size:2.15rem;letter-spacing:1.5px;line-height:1.05;}
    .hero-overlay p{font-size:.93rem;}
    section,.objetivo-cientifico,.retos-linea{padding:55px 0;}
    .titulo-seccion{margin-bottom:32px;}
    .titulo-seccion h2,.objetivo-box h2{font-size:1.8rem;line-height:1.2;}
    .resumen-contenido p,.impacto-intro p,.objetivo-box p{font-size:1rem;line-height:1.75;text-align:left;}
    .tecnologias-grid,.impacto-grid,.casos-grid,.aplicaciones-grid,.retos-grid{grid-template-columns:1fr;gap:18px;}
    .tecnologia-card,.impacto-card,.aplicacion-card,.reto-card{padding:24px 20px;min-height:0;}
    .caso-info{padding:24px 20px;}
    .objetivo-box{padding:32px 22px;border-left-width:4px;}
    .proceso-linea{grid-template-columns:1fr;gap:34px;margin-top:30px;}
    .proceso-item p{max-width:100%;}
    .volver-home{padding:50px 0 70px;}
}