/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins', sans-serif;
color:#3c3c3b;
line-height:1.6;
background:white;
}

a{
text-decoration:none;
color:inherit;
}

img{
max-width:100%;
display:block;
}


/* CONTENEDOR GENERAL */

.container{
width:90%;
max-width:1200px;
margin:auto;
}


/* HEADER */

.nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:9px 0;
}

.logo img{
height:75px;
}


/* MENU */

.menu a{
color:#3c3c3b;
transition:.3s;
}

.menu a:hover{
color:#be1622;
}


/* BOTON */

.btn-primary{

display:flex;
align-items:center;
justify-content:center;
gap:10px;

background:#be1622;
color:white;

padding:12px 22px;

border-radius:8px;

font-weight:500;

}
.btn-icon{

width:25px;
height:25px;

display:block;

filter:brightness(0) invert(1);

}
.btn-primary:hover{
background:#f39200;
transform:translateY(-2px);
	box-shadow:0 5px 7px rgba(200,200,200,1);
}

.hero{
background:#e7d8cc;
padding:140px 0 0 0;
text-align:center;
position:relative;
overflow:hidden;
}

.hero-content{
max-width:900px;
margin:auto;
}

.hero-content h1{
color:#be1622;
font-size:46px;
font-weight:700;
margin-bottom:20px;
}

.hero-icon{
font-size:36px;
margin-bottom:25px;
opacity:.7;
}

.hero-content h2{
    font-size:36px;
    font-weight:600;
    line-height:1.8;      /* espacio entre las dos líneas */
    margin-bottom:40px;    /* espacio entre el título y el párrafo */
}

.hero-content h2 span{
font-style:italic;
font-weight:400;
border-bottom:5px solid #f39200;
padding-bottom:0px;
}

.hero-content p{
max-width:700px;
margin:auto;
font-size:18px;
margin-bottom:70px;
}

.scroll{
font-weight:500;
color:#3c3c3b;
position:relative;
z-index:2;
margin-bottom:30px;
}

.arrows{
font-size:20px;
margin-top:6px;
animation:scrollDown 2s infinite;
}


/* WAVE */

.hero-wave{
position:relative;
width:100%;
line-height:0;
}

.hero-wave svg{
display:block;
width:100%;
height:140px;
}

.hero-wave path{
fill:#f39200;
}

/* ANIMACIÓN FLECHAS */

@keyframes floatArrow{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(12px);
}

}

/* FLECHAS */

.arrows{
animation:floatArrow 1.8s ease-in-out infinite;
}
.arrows img{
width:40px;      /* Ajusta el tamaño */
height:auto;     /* Mantiene la proporción */
display:block;
margin:auto;
}

/* SECCIONES */

.section{
padding:100px 0;
}

.section h2{
font-size:32px;
text-align:center;
margin-bottom:40px;
}

/* RESPONSIVE */

@media (max-width:900px){

.menu{
display:none;
}

.hero-content h1{
font-size:32px;
}

.hero-content h2{
font-size:26px;
}

.hero-content p{
font-size:16px;
}

}
@media (max-width:768px){

.hero{
padding:110px 0 0 0;
}

.hero-content h1{
font-size:32px;
}

.hero-content h2{
font-size:24px;
}

.hero-content p{
font-size:16px;
}

}
/* NAVBAR GLASS */

.header{
position:sticky;
top:0;
z-index:1000;
background:rgba(255,255,255,0.85);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(0,0,0,0.05);
}


/* NAV LAYOUT */

.nav-right{
display:flex;
align-items:center;
gap:20px;
}


/* MENU */

.menu{

display:flex;
gap:35px;
font-weight:500;

list-style:none;
margin:0;
padding:0;

}

.menu li{
list-style:none;
}

.menu a{
position:relative;
color:#3c3c3b;
transition:color .3s ease;
}
/* ENLACE ACTIVO */

.menu a.active{

color:#be1622;
font-weight:600;

}

.menu a.active::after{

width:100%;

}

/* SUBRAYADO ANIMADO */

.menu a::after{

content:"";
position:absolute;
width:0%;
height:2px;
background:#be1622;
left:0;
bottom:-6px;
transition:0.3s;
}

.menu a:hover::after{
width:100%;
}
/*=========================
MENU DESPLEGABLE
==========================*/

.menu .dropdown{
position:relative;
}

.menu .submenu{

display:none;
position:absolute;

top:100%;
left:0;

min-width:320px;

background:#fff;

border-radius:12px;

padding:10px 0;

box-shadow:0 10px 25px rgba(0,0,0,.12);

z-index:999;

}

.menu .submenu li{
list-style:none;
}

.menu .submenu a{

display:block;
padding:14px 20px;

color:#3c3c3b;

line-height:1.4;

}

.menu .submenu a:hover{

background:#f5f5f5;
color:#be1622;

}

.menu .submenu span{

font-size:13px;
color:#888;

}

.menu .dropdown:hover .submenu{
display:block;
}

/* HAMBURGER */

.hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.hamburger span{
width:25px;
height:3px;
background:#3c3c3b;
display:block;
transition:.3s ease;
}

.hamburger.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}
/* BROCHAZO HERO */

.brush{
position:relative;
font-style:italic;
font-weight:400;
}

.brush::after{

content:"";
position:absolute;
left:-5px;
bottom:-6px;
width:105%;
height:12px;
background:#f39200;
z-index:-1;
transform:rotate(-1deg);

}


/* RESPONSIVE NAV */

@media (max-width:900px){

.menu{
position:absolute;
top:70px;
left:0;
width:100%;
background:white;
flex-direction:column;
align-items:center;
padding:30px 0;
gap:20px;
display:none;
}

.menu.active{
display:flex;
}

.btn-primary{
display:none;
}

.hamburger{
display:flex;
}

	.menu .submenu{

position:static;
display:none;

width:100%;

box-shadow:none;

background:#f7f7f7;

margin-top:10px;

border-radius:10px;

}

.menu .dropdown.active .submenu{
display:block;
}
}

/* SECCION CONOCENOS */

.conocenos{
background:#f7f4f1;
padding:100px 0;
}


/* TITULO */

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title h2{
color:#be1622;
font-size:36px;
margin-bottom:10px;
}

.section-title p{
font-size:20px;
font-style:italic;
color:#3c3c3b;
}

.section-title span{
color:#f39200;
font-weight:600;
}


/* GRID PRINCIPAL */

.conocenos-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
margin-bottom:60px;

}

.conocenos-img img{
width:100%;
border-radius:6px;
}

.conocenos-text p{
margin-bottom:18px;
line-height:1.6;
text-align: justify;
}

.modalidad span{
color:#be1622;
font-weight:600;
}


/* BANNER */

.conocenos-banner{
margin:60px 0;
}

.conocenos-banner img{
width:100%;
border-radius:6px;
}


/* METODOLOGIA */

.metodologia{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;

}

.metodo-card{

background:white;
padding:35px;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
position:relative;

}

.metodo-card:hover{

transform:translateY(-8px);
box-shadow:0 18px 35px rgba(0,0,0,.12);

}
.metodo-card h3{
text-align:center;
margin-bottom:20px;
font-weight:600;
}

.metodo-card ul{
list-style:none;
padding:0;
}

.metodo-card li{
margin-bottom:12px;
padding-left:20px;
position:relative;
}


.metodo-card li::before{

content:"";
width:8px;
height:8px;
background:#be1622;
border-radius:50%;
position:absolute;
left:0;
top:8px;

}

/* COLOR DEL ICONO */

.servicio-card.rojo .servicio-icon{
background:#be1622;
}

.servicio-card.naranja .servicio-icon{
background:#f39200;
}

/* RESPONSIVE */

@media (max-width:900px){

.conocenos-grid{
grid-template-columns:1fr;
}

.metodologia{
grid-template-columns:1fr;
}

.section-title h2{
font-size:28px;
}

.section-title p{
font-size:18px;
}

}

/* SECCION SERVICIOS */

.servicios{
background:#ffffff;
padding:100px 0;
}

/* GRID SERVICIOS */

.servicios-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:60px;

}

/* TARJETAS */

.servicio-card{

background:#efe6de;
padding:35px 25px;
border-radius:16px;
text-align:center;
position:relative;

}

.servicio-card:hover{
transform:translateY(-8px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}


/* ICONO */

.servicio-icon{

width:60px;
height:60px;

margin:0 auto 20px;

background:#be1622;

display:flex;
align-items:center;
justify-content:center;

border-radius:8px;

}

.servicio-icon img{

width:36px;
height:36px;
object-fit:contain;

filter:brightness(0) invert(1);

}

/* TITULO */

.servicio-card h3{
color:#be1622;
margin-bottom:10px;
font-style:italic;
}


/* TEXTO */

.servicio-card p{
font-size:14px;
margin-bottom:15px;
}


/* LISTA */

.servicio-card ul{
list-style:none;
padding:0;
}

.servicio-card li{
margin-bottom:8px;
font-size:14px;
position:relative;
padding-left:14px;
}

.servicio-card li::before{

content:"•";
position:absolute;
left:0;
color:#3c3c3b;

}

/* BORDES SUPERIORES */

.servicio-card.rojo{
border-top:8px solid #be1622;
}

.servicio-card.naranja{
border-top:8px solid #f39200;
}


/* RESPONSIVE */

@media (max-width:1100px){

.servicios-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:600px){

.servicios-grid{
grid-template-columns:1fr;
}

}

/* SECCION SOLUCIONES */

.soluciones{

background:#efe6de;
padding:100px 0;

}


/* SUBTEXTO */

.section-sub{
margin-top:10px;
color:#3c3c3b;
}


/* GRID */

.soluciones-grid{

margin-top:60px;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}


/* TARJETA */

.solucion-card{

display:flex;
align-items:flex-start;
gap:20px;
background:white;
padding:25px;
border-radius:16px;

}


.solucion-card:hover{

transform:translateY(-8px);
box-shadow:0 18px 35px rgba(0,0,0,0.12);

}

/* ICONO */

.solucion-icon{

width:60px;
height:60px;

background:#be1622;

display:flex;
align-items:center;
justify-content:center;

border-radius:8px;

flex-shrink:0;

}

.solucion-icon img{

    width:36px;
    height:36px;
    object-fit:contain;

    filter:brightness(0) invert(1);

}

/* TEXTO */

.solucion-texto h3{

color:#be1622;
margin-bottom:5px;
font-style:italic;

}

.solucion-texto p{

font-size:14px;

}

/* RESPONSIVE */

@media (max-width:1100px){

.soluciones-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:650px){

.soluciones-grid{
grid-template-columns:1fr;
}

}

/* PARTNERS */

.partners{

padding:100px 0 0 0;
background:white;

}


/* CARRUSEL */

.partners-slider{

margin-top:60px;
overflow:hidden;
position:relative;

}


.partners-track{

display:flex;
width:max-content;
gap:40px;

animation:scrollLogos 30s linear infinite;

}


.partners-track img{
	
flex: 0 0 auto;
width:200px;
height:120px;

object-fit:contain;

background:#e6e6e6;

border-radius:20px;

padding:20px;

}


/* ANIMACION */

@keyframes scrollLogos{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(calc(-50% - 20px));
    }
}

/* STATS */

.partners-stats{

background:#be1622;

margin-top:80px;

padding:50px 0;

color:white;

}


.stats-container{

max-width:1200px;
margin:auto;

display:flex;
justify-content:space-around;
align-items:center;
text-align:center;

}


.stat h3{

font-size:36px;
font-weight:700;

}

.stat p{

font-style:italic;

}

@media (max-width:900px){

.partners-track img{

width:150px;
height:90px;

}

.stats-container{

flex-direction:column;
gap:30px;

}

}

/* SECCION CONTACTO */

.contacto{

background:#ffffff;
padding:100px 0;
text-align:center;

}


/* CAJA MENSAJE */

.contacto-box{

display:inline-block;
background:#efe6de;
padding:15px 25px;
border-radius:16px;
margin-top:20px;
font-size:16px;

}

/* BOTONES */

.contacto-actions{

margin-top:60px;

display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;

}

.contacto-btn{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

width:260px;
height:100px;

border:2px solid #f39200;
border-radius:8px;
color:#3c3c3b;
font-weight:500;
}

.contacto-btn .icon{

width:50px;
height:50px;

display:flex;
align-items:center;
justify-content:center;

margin-bottom:10px;

}

.contacto-btn .icon img{

width:32px;
height:32px;
display:block;

}

/* HOVER */

.contacto-btn:hover{

background:#f39200;
color:white;
transform:translateY(-4px);

}
@media (max-width:600px){

.contacto-btn{
    width:100%;
    max-width:300px;
}

}

/*=============================
MODAL EVENTOS
=============================*/

.modal-evento{

position:fixed;

inset:0;

display:none;

align-items:center;

justify-content:center;

z-index:9999;

}

.modal-evento.active{

display:flex;

}

.modal-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.6);

backdrop-filter:blur(4px);

}

.modal-box{

position:relative;

width:90%;

max-width:850px;

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:0 25px 60px rgba(0,0,0,.25);

animation:modalShow .35s ease;

z-index:2;

}

.modal-box img{

width:100%;

height:340px;

object-fit:cover;

}

.modal-content{

padding:40px;

}

.modal-content h2{

color:#be1622;

margin-bottom:5px;

}

.modal-content h3{

font-weight:500;

margin-bottom:25px;

}

.modal-info{

margin-bottom:10px;

}

.modal-buttons{

display:flex;

gap:20px;

margin-top:35px;

flex-wrap:wrap;

}

.modal-close{

position:absolute;

right:20px;

top:20px;

width:42px;

height:42px;

border:none;

border-radius:50%;

background:white;

font-size:28px;

cursor:pointer;

}

@keyframes modalShow{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:none;

}

}
/*=============================
            FOOTER
=============================*/

.footer{

    background:#3c3c3b;
    color:#fff;
    padding:55px 0 18px;

}

.footer .container{

    max-width:1200px;
    margin:auto;
    padding:0 30px;

}

.footer-grid{

display:grid;
grid-template-columns:320px repeat(3,1fr);
gap:45px;

}

/*=============================
            LOGO
=============================*/

.footer .footer-logo{

    width:140px !important;
    max-width:140px;
    height:auto;
    display:block;
}
.footer-brand p{

    color:#cfcfcf;
    font-size:14px;
    line-height:1.7;
    max-width:340px;
}

/*=============================
            TITULOS
=============================*/

.footer-column h3{

    font-size:17px;
    font-weight:600;
    margin-bottom:18px;
    color:#fff;

}

/*=============================
            LISTAS
=============================*/

.footer-list{

    list-style:none !important;
    margin:0;
    padding:0;

}

.footer-list li{

    list-style:none !important;
    margin-bottom:12px;
    display:flex;
    align-items:flex-start;
    gap:10px;

}

.footer-list li::marker{

    display:none;

}

.footer-list li::before{

    content:none !important;

}

.footer-column a{

    color:#d8d8d8;
    font-size:14px;
    text-decoration:none;
    transition:.25s;

}

.footer-column a:hover{

    color:#f39200;

}

.footer-column i{

    color:#f39200;
    width:18px;
    margin-top:3px;

}

/*=============================
            REDES
=============================*/

.footer-social{

    display:flex !important;
    gap:12px;
    margin-top:18px;

}

.footer-social a{

    width:34px;
    height:34px;

    display:flex;
    justify-content:center;
    align-items:center;

    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    transition:.25s;

}

.footer-social a:hover{

    background:#f39200;
    border-color:#f39200;
}

.footer-social a:hover i{

    color:#fff;

}

/*=============================
            LINEA
=============================*/

.footer hr{

    margin:40px 0 18px;
    border:none;
    height:1px;
    background:rgba(255,255,255,.12);

}

/*=============================
            COPYRIGHT
=============================*/

.footer-copy{

    text-align:center;
    color:#bdbdbd;
    font-size:13px;

}

/*=============================
      TRANSICIONES GLOBALES
=============================*/

.btn-primary,
.contacto-btn,
.servicio-card,
.solucion-card,
.metodo-card,
.footer-social a,
.menu a,
.partners-track img{

transition:
transform .35s ease,
box-shadow .35s ease,
background-color .35s ease,
color .35s ease,
border-color .35s ease,
opacity .35s ease;

}
/*=============================
            RESPONSIVE
=============================*/

@media(max-width:900px){

.footer-grid{

    grid-template-columns:1fr;
    gap:35px;
    text-align:center;

}

.footer-brand{

    display:flex;
    flex-direction:column;
    align-items:center;

}

.footer-brand p{

    max-width:100%;

}

.footer-list li{

    justify-content:center;

}

.footer-social{

    justify-content:center;

}

}

/*=============================
     ANIMACIÓN SCROLL
=============================*/
.reveal{

opacity:0;
transform:translateY(30px);

transition:
opacity .8s ease,
transform .8s ease;

will-change:opacity, transform;

}

.reveal.active{

opacity:1;
transform:translateY(0);

}