/*======================================================
    CAFEM 2.0
    STYLE.CSS
======================================================*/

/*==========================
  VARIABLES
==========================*/

:root{

    --primary:#005BAA;
    --secondary:#003B70;
    --accent:#F5A623;

    --white:#FFFFFF;
    --light:#F5F7FA;
    --gray:#6B7280;
    --dark:#1F2937;

    --radius:15px;
    --shadow:0 10px 30px rgba(0,0,0,.10);

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    font-size:16px;
    color:var(--dark);
    background:#fff;
    line-height:1.7;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    color:inherit;

}

ul{

    list-style:none;

}

.container{

    width:90%;
    max-width:1200px;
    margin:0 auto;

}

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

<!--.header{position:fixed;top:0;left:0;width:100%;background:rgba(255,255,255,.97);box-shadow:0 2px 15px rgba(0,0,0,.08);z-index:999;}-->

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:10000;

    transition:all .35s ease;

}

.header.scrolled{

    background:#ffffff;

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

    padding:5px 0;

}

.navbar{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo img{

    width:170px;

}

/*==========================
MENU
==========================*/

.menu{

    display:flex;

    gap:15px;

    align-items:center;

}

.menu li{

    position:relative;

}

.menu li a{

    display:block;

    padding:15px 18px;

    font-weight:500;

    transition:.3s;

}

.menu li a:hover{

    color:var(--primary);

}

/*==========================
SUBMENU
==========================*/

.submenu{

    position:absolute;

    top:55px;

    left:0;

    width:240px;

    background:#fff;

    display:none;

    border-radius:12px;

    box-shadow:var(--shadow);

    overflow:hidden;

}

.dropdown:hover .submenu{

    display:block;

}

.submenu li a{

    padding:15px 20px;

}

.submenu li a:hover{

    background:var(--primary);

    color:#fff;

}

/*==========================
BOTON MOVIL
==========================*/

.menu-toggle{

    display:none;

    background:none;

    border:none;

    font-size:28px;

    color:var(--primary);

    cursor:pointer;

}

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


.hero{

    position:relative;

    height:75vh;

    background:url("../complementos/images/11.jpg") center center;

    background-size:cover;

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,55,110,.70);

}

<!--.hero-content{position:relative; z-index:2;text-align:center;color:#fff;max-width:850px;}-->

.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    width:100%;

    margin:0 auto;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

<!--.hero-subtitle{display:inline-block;margin-bottom:20px;letter-spacing:3px;text-transform:uppercase;font-size:15px;}-->
.hero-subtitle{

    display:block;

    text-align:center;

    margin-bottom:20px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:16px;

}

<!--.hero h1{font-size:62px;line-height:1.15;margin-bottom:25px;}-->

.hero h1{

    font-size:60px;

    line-height:1.2;

    text-align:center;

    margin-bottom:25px;

}


<!--.hero p{font-size:22px;margin-bottom:40px;}-->

.hero p{

    max-width:750px;

    margin:0 auto 40px;

    text-align:center;

    font-size:22px;

    line-height:1.8;

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

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

.hero{

    position:relative;

    min-height:75vh;

    background:url("../complementos/images/11.jpg") center center;

    background-size:cover;

    background-attachment:fixed;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:140px 20px 90px;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,55,110,.78),

        rgba(0,91,170,.72)

    );

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:1000px;

    width:100%;

    margin:0 auto;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    animation:fadeUp 1s ease;

}

.hero-subtitle{

    display:inline-block;

    text-align:center;

    margin-bottom:18px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:15px;

    font-weight:600;

    color:#F5F7FA;

}

.hero h1{

    font-size:45px;

    line-height:1.10;

    font-weight:550;

    color:#FFFFFF;

    margin-bottom:25px;

    text-shadow:0 4px 15px rgba(0,0,0,.25);

}

.hero p{

    max-width:860px;

    margin:0 auto 35px;

    text-align:center;

    font-size:20px;

    line-height:1.5;

    color:#F5F7FA;

}

.hero .btn{

    margin-top:10px;

}



/*==========================
BOTONES
==========================*/

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

<!--.btn{display:inline-block;padding:16px 38px;background:var(--accent);color:#fff;border-radius:40px;transition:.35s;font-weight:600;}.btn:hover{background:#d98d0f;transform:translateY(-4px);}-->

.btn{

    position:relative;

    overflow:hidden;

    transition:.35s ease;

}

.btn:hover{

    transform:translateY(-3px);

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

}

.btn-outline{

    background:transparent;

    border:2px solid #fff;

}

.btn-outline:hover{

    background:#fff;

    color:var(--primary);

}

/*==========================
TITULOS
==========================*/

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-subtitle{

    color:var(--primary);

    text-transform:uppercase;

    font-weight:600;

    letter-spacing:2px;

}

.section-title h2{

    font-size:42px;

    margin:15px 0;

    color:var(--secondary);

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:var(--gray);

}
/*======================================================
    QUIÉNES SOMOS
======================================================*/

.about{

    padding:100px 0;

    background:#ffffff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

<!--.about-image{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);}.about-image img{width:100%;height:500px;object-fit:cover;transition:.5s;}.about-image:hover img{transform:scale(1.05);}-->

.about-image,
.experience-image{

    overflow:hidden;

    border-radius:18px;

}

.about-image img,
.experience-image img{

    transition:transform .6s ease;

}

.about-image:hover img,
.experience-image:hover img{

    transform:scale(1.06);

}

.about-content h2{

    font-size:42px;

    color:var(--secondary);

    margin:15px 0 25px;

}

.about-content p{

    color:var(--gray);

    margin-bottom:20px;

    text-align:justify;

}

.about-content .btn{

    margin-top:15px;

}


/*======================================================
    SERVICIOS


.services{

    padding:100px 0;

    background:var(--light);

}

<!--.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;}-->

.services-grid{

    display:grid;

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

    gap:35px;

    margin-top:40px;

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

/*======================================================
    SERVICIOS
======================================================*/

.services{

    padding:100px 0;

    background:var(--light);

}

.services-grid{

    display:grid;

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

    gap:30px;

    margin-top:45px;

    align-items:stretch;

}

/*======================================================
    CORRECCIÓN DE LA CLASE DE SERVICIOS
======================================================*/

/* Asegura que la tarjeta sea visible y tenga espacio para la imagen */
.services-grid .service-card {
    display: flex !important; /* Fuerza a la tarjeta a mostrarse */
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    visibility: visible !important; /* Anula cualquier ocultamiento heredado */
    opacity: 1 !important;
}

/* Fuerza a la imagen dentro de tu clase a mostrarse como el ejemplo de la galería */
.services-grid .service-card img {
    display: block !important; /* Igual que en tu código de la galería */
    width: 100% !important;    /* Ocupa todo el ancho disponible */
    height: 140px !important;  /* Altura fija para que actúe como encabezado */
    object-fit: cover;         /* Evita que se deforme */
}





/*======================================================
    GALERÍA
======================================================*/

.gallery-intro{

    padding:90px 0 40px;

    background:#FFFFFF;

}

.gallery-intro .section-title{

    max-width:850px;

    margin:0 auto;

    text-align:center;

}

.gallery-intro .section-title span{

    display:block;

    margin-bottom:15px;

    color:var(--primary);

    font-size:15px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}

.gallery-intro .section-title h2{

    margin-bottom:20px;

}

.gallery-intro .section-title p{

    max-width:750px;

    margin:0 auto;

    color:var(--gray);

    line-height:1.8;

}



/*======================================================
    CONTENEDOR GALERÍA
======================================================*/

.gallery{

    padding:60px 0 100px;

    background:var(--light);

}

.gallery-grid{

    display:grid;

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

    gap:30px;

}



/*======================================================
    TARJETAS DE GALERÍA
======================================================*/

.gallery-item{

    position:relative;

    height:320px;

    overflow:hidden;

    border-radius:var(--radius);

    background:#FFFFFF;

    box-shadow:var(--shadow);

    cursor:pointer;

    border:1px solid transparent;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .5s ease;

}

.gallery-item:hover{

    transform:translateY(-10px);

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

    border-color:#d9e9f9;

}

.gallery-item:hover img{

    transform:scale(1.08);

}



/*======================================================
    CAPA SOBRE LA IMAGEN
======================================================*/

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    padding:30px;

    text-align:center;

    background:linear-gradient(
        to top,
        rgba(0,55,110,.90),
        rgba(0,55,110,.15),
        transparent
    );

    opacity:0;

    transition:opacity .4s ease;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay > div{

    transform:translateY(25px);

    transition:transform .4s ease;

}

.gallery-item:hover .gallery-overlay > div{

    transform:translateY(0);

}

.gallery-overlay i{

    width:50px;

    height:50px;

    margin:0 auto 15px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--accent);

    color:#FFFFFF;

    font-size:20px;

}

.gallery-overlay h3{

    margin-bottom:8px;

    color:#FFFFFF;

    font-size:20px;

}

.gallery-overlay p{

    margin:0;

    color:#FFFFFF;

    font-size:14px;

    line-height:1.6;

}



/*======================================================
    ANIMACIÓN GALERÍA


.gallery-item.reveal{

    opacity:0;

    transform:translateY(35px);

}

.gallery-item.reveal.active{

    opacity:1;

    transform:translateY(0);

}

======================================================*/

/*======================================================
    GALERÍA - ANIMACIÓN
======================================================*/

.gallery-item{

    opacity:1;

    transform:translateY(0);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.gallery-item:hover{

    transform:translateY(-8px);

}

/*======================================================
    HERO DE GALERÍA
======================================================*/

.gallery-hero{

    min-height:70vh;

}



/*======================================================
    AJUSTE CTA
======================================================*/

.cta{

    padding:90px 0;

    background:var(--secondary);

    color:#FFFFFF;

    text-align:center;

}

.cta-content{

    max-width:850px;

    margin:0 auto;

}

.cta-content h2{

    margin-bottom:20px;

    font-size:42px;

}

.cta-content p{

    max-width:750px;

    margin:0 auto 35px;

    color:#FFFFFF;

    line-height:1.8;

}



/*======================================================
    BOTÓN CTA
======================================================*/

.cta .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 30px;

    border-radius:8px;

    font-weight:600;

    transition:.35s ease;

}

.cta .btn-primary{

    background:var(--accent);

    color:#FFFFFF;

}

.cta .btn-primary:hover{

    transform:translateY(-4px);

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

}


/*======================================================
    TARJETAS DE SERVICIOS


<!--.service-card{background:#ffffff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:.35s;position:relative;}.service-card:hover{transform:translateY(-10px);box-shadow:0 20px 45px rgba(0,0,0,.15);}.service-card img{width:100%;height:240px;object-fit:cover;}.service-card h3{color:var(--primary);font-size:24px;padding:25px 25px 10px;}.service-card p{padding:0 25px 30px;color:var(--gray);line-height:1.8;}.service-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:6px;background:var(--accent);transform:scaleX(0);transition:.35s;transform-origin:left;}.service-card:hover::before{transform:scaleX(1);}-->
.service-card,
.why-card,
.stat{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    border:1px solid transparent;

}

.service-card:hover,
.why-card:hover,
.stat:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 45px rgba(0,91,170,.18);

    border-color:#d9e9f9;

}


/*======================================================
    TARJETAS DE SERVICIOS


.service-card,
.why-card,
.stat{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    border:1px solid transparent;

}

.service-card:hover,
.why-card:hover,
.stat:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,91,170,.16);

    border-color:#d9e9f9;

}
======================================================*/
/*======================================================
    TARJETAS DE SERVICIOS


.service-card{

    position:relative;

    background:#FFFFFF;

    border-radius:var(--radius);

    padding:35px 30px;

    overflow:hidden;

    border:1px solid transparent;

    box-shadow:var(--shadow);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/*======================================================
    ICONO DEL SERVICIO
======================================================*/

.service-icon{

    width:65px;

    height:65px;

    margin-bottom:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(0,91,170,.08);

    color:var(--primary);

    font-size:28px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;

}


/*======================================================
    TÍTULO DEL SERVICIO
======================================================*/

.service-card h3{

    margin-bottom:15px;

    color:var(--secondary);

    font-size:21px;

    line-height:1.4;

}


/*======================================================
    TEXTO DEL SERVICIO
======================================================*/

.service-card p{

    margin:0;

    color:var(--gray);

    font-size:15px;

    line-height:1.8;

}


/*======================================================
    LÍNEA SUPERIOR
======================================================*/

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--accent);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}


/*======================================================
    EFECTO HOVER
======================================================*/

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,91,170,.18);

    border-color:#d9e9f9;

}


.service-card:hover::before{

    transform:scaleX(1);

}


.service-card:hover .service-icon{

    background:var(--primary);

    color:#FFFFFF;

    transform:translateY(-3px);

}

/*======================================================
    CONTACTO
======================================================*/

.contact-section{

    padding:80px 0 100px;

    background:var(--light);

}


.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:start;

}


/*======================================================
    INFORMACIÓN DE CONTACTO
======================================================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:20px;

}


.contact-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:25px;

    background:#FFFFFF;

    border-radius:var(--radius);

    border:1px solid transparent;

    box-shadow:var(--shadow);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.contact-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,91,170,.16);

    border-color:#d9e9f9;

}


/*======================================================
    ICONOS
======================================================*/

.contact-icon{

    flex-shrink:0;

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#FFFFFF;

    font-size:20px;

}


.contact-card h3{

    margin-bottom:7px;

    color:var(--primary);

    font-size:19px;

    font-weight:600;

}


.contact-card p{

    margin:0;

    color:var(--gray);

    font-size:15px;

    line-height:1.7;

}


.contact-card a{

    color:var(--gray);

    transition:color .3s ease;

}


.contact-card a:hover{

    color:var(--primary);

}


/*======================================================
    FORMULARIO
======================================================*/

.contact-form{

    padding:35px;

    background:#FFFFFF;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


.contact-form h2{

    margin-bottom:10px;

    color:var(--secondary);

    font-size:30px;

    font-weight:600;

}


.contact-form > p{

    margin-bottom:28px;

    color:var(--gray);

    line-height:1.7;

}


.form-group{

    margin-bottom:18px;

}


.form-group label{

    display:block;

    margin-bottom:7px;

    color:var(--dark);

    font-size:15px;

    font-weight:600;

}


.form-group input,
.form-group textarea{

    width:100%;

    padding:13px 15px;

    border:1px solid #d9e0e7;

    border-radius:8px;

    background:#FFFFFF;

    color:var(--dark);

    font-family:'Poppins',sans-serif;

    font-size:15px;

    outline:none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;

}


.form-group input{

    height:48px;

}


.form-group textarea{

    min-height:140px;

    resize:vertical;

}


.form-group input:focus,
.form-group textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(0,91,170,.10);

}


.contact-form .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.contact-form .btn:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(0,91,170,.20);

}
/*======================================================
    ICONOS DE SERVICIOS (OPCIONAL)
======================================================*/

<!--.service-icon{width:80px;height:80px;border-radius:50%;margin:30px auto 20px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;}-->

.service-icon{

    transition:.35s ease;

}

.service-card:hover .service-icon,
.why-card:hover .service-icon{

    transform:rotate(10deg) scale(1.15);

}

/*======================================================
    CATEGORÍAS DE SERVICIOS
======================================================*/

.service-category{

    font-size:34px;

    font-weight:700;

    color:#005BAA;

    text-align:center;

    margin:80px 0 45px;

    position:relative;

}

.service-category::after{

    content:"";

    width:90px;

    height:4px;

    background:#005BAA;

    display:block;

    margin:15px auto 0;

    border-radius:5px;

}

/*======================================================
    EFECTOS GENERALES
======================================================*/

.service-card,
.about-image{

    transition:all .35s ease;

}

.service-card:hover img{

    transform:scale(1.05);

}

.service-card img{

    transition:.4s;

}


/*======================================================
    ESPACIADO ENTRE SECCIONES
======================================================*/

section{

    position:relative;

}

section:nth-of-type(even){

    background:#ffffff;

}

section:nth-of-type(odd){

    background:var(--light);

}

/*======================================================
    PROCESO DE TRABAJO
======================================================*/

.process{

    padding:100px 0;

    background:#ffffff;

}

.process-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.process-card{

    background:#ffffff;

    padding:40px 30px;

    border-radius:18px;

    text-align:center;

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

    transition:.35s ease;

}

.process-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,91,170,.18);

}

.process-number{

    width:70px;

    height:70px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#005BAA;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:700;

}

.process-card h3{

    margin-bottom:20px;

    color:#003B70;

}

.process-card p{

    color:#666666;

    line-height:1.8;

}






/*======================================================
    ¿POR QUÉ CAFEM?
======================================================*/

.why-us{

    padding:100px 0;

    background:#ffffff;

}

<!--.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}-->

.why-grid{

    display:grid;

    grid-template-columns:repeat(4, 340px);

    justify-content:center;

    align-items:stretch;

    gap:35px;

    margin:60px auto 0;

}

<!--.why-card{background:#fff;border-radius:20px;padding:40px 30px;text-align:center;box-shadow:var(--shadow);transition:.35s;border-top:5px solid transparent;}-->

.why-card{

    width:340px;

    min-height:450px;

    margin:0 auto;

    padding:40px 30px;

    background:#fff;

    border-radius:18px;

    text-align:center;

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

    transition:.3s;

}

.why-card:hover{

    transform:translateY(-10px);

    border-top:5px solid var(--accent);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.why-card i{

    width:85px;

    height:85px;

    line-height:85px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:34px;

    margin-bottom:25px;

}

.why-card h3{

    font-size:24px;

    color:var(--secondary);

    margin-bottom:15px;

}

.why-card p{

    color:var(--gray);

    line-height:1.8;

}


/*======================================================
    EXPERIENCIA
======================================================*/

.experience{

    padding:110px 0;

    background:var(--light);

}

.experience-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.experience-image{

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.experience-image img{

    width:100%;

    height:520px;

    object-fit:cover;

    transition:.5s;

}

.experience-image:hover img{

    transform:scale(1.05);

}

.experience-content h2{

    font-size:42px;

    color:var(--secondary);

    margin:15px 0 25px;

}

.experience-content p{

    color:var(--gray);

    margin-bottom:20px;

    text-align:justify;

}

.experience-content .btn{

    margin-top:20px;

}


/*======================================================
    CLIENTES
======================================================*/

.clients{

    padding:100px 0;

    background:#ffffff;

}

.clients-grid{

    display:grid;

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

    gap:30px;

    align-items:center;

}

.client{

    background:#fff;

    padding:35px;

    border-radius:18px;

    box-shadow:var(--shadow);

    transition:.35s;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:180px;

}

.client:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.client img{

    max-width:170px;

    filter:grayscale(100%);

    opacity:.75;

    transition:.35s;

}

.client:hover img{

    filter:none;

    opacity:1;

    transform:scale(1.08);

}


/*======================================================
    NÚMEROS CAFEM
======================================================*/

<!--.stats{padding:90px 0;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;}-->

/*======================================================
    ESTADÍSTICAS
======================================================*/

.stats{

    padding:100px 0;

    background:#f4f8fc;

}

.stats-grid{

    display:grid;

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

    gap:30px;

    text-align:center;

}

.stat{

    padding:20px;

}

.stat h2{

    font-size:72px;

    font-weight:700;

    color:#005BAA;   /* Azul CAFEM */

    margin-bottom:15px;

}

.stat p{

    font-size:20px;

    color:#555;

    font-weight:500;

}

<!--.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}.stat{text-align:center;}.stat h2{font-size:56px;font-weight:700;margin-bottom:10px;}.stat p{font-size:18px;letter-spacing:1px;}-->


/*======================================================
    SEPARADOR CORPORATIVO
======================================================*/

.divider{

    width:90px;

    height:5px;

    background:var(--accent);

    margin:20px auto 40px;

    border-radius:10px;

}
/*======================================================
    LLAMADA A LA ACCIÓN (CTA)
======================================================*/

/*.cta{

    padding:100px 0;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    text-align:center;

    color:var(--white);

}

.cta h2{

    font-size:46px;

    margin-bottom:20px;

}

.cta p{

    max-width:800px;

    margin:0 auto 40px;

    font-size:18px;

    line-height:1.8;

    opacity:.95;

}

.cta .btn{

    background:var(--white);

    color:var(--primary);

}

.cta .btn:hover{

    background:var(--accent);

    color:var(--white);

}*/


/*======================================================
    LLAMADA A LA ACCIÓN
======================================================*/

/*.cta{

    padding:100px 20px;

    background:linear-gradient(rgba(0,59,112,.92),rgba(0,91,170,.92)),
               url("../complementos/images/cta.jpg") center center;

    background-size:cover;

    background-position:center;

    text-align:center;

    color:#ffffff;

}*/

.cta{

    padding:100px 20px;

    background:#005BAA;

    text-align:center;

    color:#fff;

}

.cta h2{

    font-size:46px;

    color:#ffffff;

    font-weight:700;

    margin-bottom:25px;

    text-shadow:2px 2px 8px rgba(0,0,0,.45);

}

.cta p{

    max-width:800px;

    margin:0 auto 40px;

    font-size:20px;

    line-height:1.8;

    color:#ffffff;

    text-shadow:1px 1px 6px rgba(0,0,0,.45);

}

.cta .btn{

    background:#F5A623;

    color:#ffffff;

}

.cta .btn:hover{

    background:#d88900;

}


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


<!--.footer{background:#0B1F35;color:#fff;padding:70px 0 25px;}-->

.footer{

    border-top:4px solid #005BAA;

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

.footer{

    background:#0B1F35;

    color:#FFFFFF;

    border-top:4px solid #005BAA;

    padding:70px 0 25px;

    margin-top:auto;

    width:100%;

    flex-shrink:0;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 2fr 1fr;

    gap:50px;

    margin-bottom:40px;

}

.footer-col h3{

    font-size:24px;

    margin-bottom:20px;

}

.footer-col p{

    color:#c9d3df;

    margin-bottom:15px;

    line-height:1.8;

}

.footer-col img{

    width:170px;

    margin-bottom:20px;

}

.footer-col i{

    color:var(--accent);

    margin-right:10px;

}


/*======================================================
    REDES SOCIALES
======================================================*/

.social{

    display:flex;

    gap:15px;

    margin-top:20px;

}

.social a{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:20px;

    transition:.35s;

}

.social a:hover{

    background:var(--accent);

    transform:translateY(-5px);

}


/*======================================================
    COPYRIGHT
======================================================*/

.copyright{

    border-top:1px solid rgba(255,255,255,.12);

    padding-top:25px;

    text-align:center;

    color:#bfc9d4;

    font-size:14px;

}


/*======================================================
    BOTÓN WHATSAPP
======================================================*/

.whatsapp-float{

    position:fixed;

    left:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    text-decoration:none;

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

    z-index:9999;

    transition:.35s;

}

.whatsapp-float:hover{

    transform:scale(1.12);

}


/*======================================================
    ANIMACIONES
======================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-content,

.about-content,

.section-title,

.service-card,

.why-card,

.experience-content,

.client{

    animation:fadeUp .8s ease both;

}


/*======================================================
    UTILIDADES
======================================================*/

.text-center{

    text-align:center;

}

.mt-30{

    margin-top:30px;

}

.mt-50{

    margin-top:50px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-50{

    margin-bottom:50px;

}


/*======================================================
    SCROLLBAR
======================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}


/*======================================================
    FIN DEL STYLE.CSS
======================================================*/

/*==========================
ANIMACIÓN HERO
==========================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*======================================================
    AJUSTE EXCLUSIVO PARA SERVICIOS

.services-page{

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

.services-page .footer{

    margin-top:auto;

}

======================================================*/

.services-page{

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

.services-page .footer{

    margin-top:auto;

    flex-shrink:0;

}
/*======================================================
    PÁGINA DE AGRADECIMIENTO
======================================================*/

.thank-you-section{

    min-height:70vh;

    padding:110px 0 100px;

    background:var(--light);

    display:flex;

    align-items:center;

}


/*======================================================
    BLOQUE CENTRAL
======================================================*/

.thank-you-content{

    max-width:850px;

    margin:0 auto;

    padding:60px 50px;

    text-align:center;

    background:#FFFFFF;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


/*======================================================
    ICONO DE CONFIRMACIÓN
======================================================*/

.thank-you-icon{

    width:85px;

    height:85px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#FFFFFF;

    font-size:35px;

    box-shadow:0 10px 25px rgba(0,91,170,.20);

}


/*======================================================
    ETIQUETA CAFEM
======================================================*/

.thank-you-label{

    display:block;

    margin-bottom:12px;

    color:var(--primary);

    font-size:15px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}


/*======================================================
    TÍTULO
======================================================*/

.thank-you-content h1{

    margin-bottom:20px;

    color:var(--secondary);

    font-size:42px;

    line-height:1.2;

}


/*======================================================
    TEXTO
======================================================*/

.thank-you-content p{

    max-width:700px;

    margin:0 auto 12px;

    color:var(--gray);

    font-size:16px;

    line-height:1.8;

}


.thank-you-content strong{

    color:var(--secondary);

}


/*======================================================
    BOTONES
======================================================*/

.thank-you-buttons{

    margin-top:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}


.thank-you-buttons .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:190px;

    padding:14px 24px;

    border-radius:8px;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}


.thank-you-buttons .btn:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(0,0,0,.15);

}


/*======================================================
    BOTÓN PRINCIPAL
======================================================*/

.thank-you-buttons .btn-primary{

    background:var(--primary);

    color:#FFFFFF;

}


.thank-you-buttons .btn-primary:hover{

    background:var(--secondary);

}


/*======================================================
    BOTÓN CONTACTO
======================================================*/

.thank-you-buttons .btn-outline{

    background:#FFFFFF;

    color:var(--primary);

    border:2px solid var(--primary);

}


.thank-you-buttons .btn-outline:hover{

    background:var(--primary);

    color:#FFFFFF;

}


/*======================================================
    BOTÓN WHATSAPP
======================================================*/

.thank-you-buttons .btn-whatsapp{

    background:#25D366;

    color:#FFFFFF;

}


.thank-you-buttons .btn-whatsapp:hover{

    background:#1ebe5d;

}

/*======================================================
    CLIENTES - LOGOTIPOS DEL MISMO TAMAÑO
======================================================*/

.client{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:130px;

    padding:25px;

}


.client img{

    width:180px;

    height:90px;

    object-fit:contain;

    object-position:center;

    display:block;

}

/*======================================================
    ESTILOS DEL NUEVO CARRUSEL DE CLIENTES
======================================================*/

/* Ventana invisible que recorta los logos sobrantes en pantalla */
.clients-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 40px;
    padding: 20px 0;
}

/* Difuminado estético a los extremos izquierdo y derecho */
.clients-carousel-wrapper::before,
.clients-carousel-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    pointer-events: none; /* Permite interactuar con los logos por debajo */
}
.clients-carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--light, #f9f9f9), transparent);
}
.clients-carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--light, #f9f9f9), transparent);
}

/* El riel interno. Ajusta el tiempo (15s) para que vaya más rápido o más lento */
.clients-track {
    display: flex;
    width: max-content;
    animation: carruselInfinito 15s linear infinite;
}

/* Estilo individual para cada contenedor de logo */
.clients-track .client {
    width: 180px;         /* Ancho uniforme para cada marca */
    margin: 0 40px;       /* Separación horizontal entre logotipos */
    display: flex;
    align-items: center;
    justify-content: center;
}

.clients-track .client img {
    width: 100%;
    height: auto;
    max-height: 75px;     /* Limita el alto máximo de las marcas para homogeneidad */
    object-fit: contain;  /* Respeta las proporciones originales del logotipo */
    filter: grayscale(100%); /* Pone los logos en gris para un look corporativo limpio */
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* Efectos al pasar el mouse por encima del carrusel */
.clients-track .client img:hover {
    filter: grayscale(0%); /* El logo recupera sus colores originales */
    opacity: 1;
}

.clients-track:hover {
    animation-play-state: paused; /* Detiene el movimiento si el usuario se posiciona encima */
}

/* ANIMACIÓN DE MOVIMIENTO CONTINUO */
@keyframes carruselInfinito {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Desplaza exactamente la mitad del riel (los primeros 4 logos) */
        transform: translateX(-50%); 
    }
}

/*======================================================
    MISIÓN - VISIÓN - VALORES
======================================================*/

.philosophy-grid{

    display:grid;

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

    gap:35px;

    margin:60px auto 0;

    align-items:stretch;

}

/*======================================================
    SECCIÓN DE VALORES (3 COLUMNAS INDEPENDIENTES)
======================================================*/

.values-grid {
   display:grid;

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

    gap:35px;

    margin:60px auto 0;

    align-items:stretch;

}

/*======================================================
    MAPA DE UBICACIÓN
======================================================*/

.contact-map{

    padding:90px 0;

    background:var(--light);

}


.map-container{

    width:100%;

    max-width:1200px;

    margin:45px auto 0;

    overflow:hidden;

    border-radius:var(--radius);

    background:#FFFFFF;

    box-shadow:var(--shadow);

}


.map-container iframe{

    display:block;

    width:100%;

    height:450px;

    border:0;

}

/*======================================================
    TELÉFONOS DEL FOOTER
======================================================*/

.phone-link{

    color:#FFFFFF;

    text-decoration:none;

    transition:color .3s ease;

}


.phone-link:hover{

    color:var(--accent);

}