/* ============================= */
/* CONFIGURACIÓN GENERAL */
/* ============================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background-color:#CBCBCB;
    color:#333;
    overflow-x:hidden;
}

img{
    max-width:100%;
}

section{
    padding:70px 10%;
    scroll-margin-top:100px;
}

/* ============================= */
/* ENCABEZADO */
/* ============================= */

header{
    position:relative;

    background-image:
        linear-gradient(
            to right,
            rgba(217,217,217,0.60),
            rgba(217,217,217,0.20)
        ),
        url("imagenes/ARMAOSFONDO.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:90vh;

    display:flex;
    justify-content:center;
    align-items:center;

    color:white;
    text-align:center;
}

.overlay{
    width:100%;
    min-height:90vh;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,0.35);
    padding:120px 20px 40px;
}

.logo{
    width:450px;
    max-width:80%;
    height:auto;
    border-radius:10px;
}

/* ============================= */
/* MENÚ PRINCIPAL */
/* ============================= */

nav{
    position:fixed;
    top:25px;
    left:50%;
    transform:translateX(-50%);

    width:86%;
    min-height:65px;
    padding:0 28px;

    background:rgba(63, 63, 63, 1);
    border-radius:8px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    box-shadow:0 8px 20px rgba(0,0,0,0.25);
    z-index:1000;
}

.nav-brand{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logo-navbar{
    width:120px;
    height:auto;
    display:block;
}
nav ul{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    list-style:none;
    gap:26px;

    margin:0;
    padding:0;
}

nav ul li{
    list-style:none;
}

nav a{
    color:white;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;

    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}

nav a:hover{
    color:#00c3ff;
}

.btn-nav{
    display:inline-block;
    background:#858585;
    color:white;
    padding:10px 16px;
    border-radius:4px;
}

.btn-nav:hover{
    background:#D9D9D9;
    color:#001432;
}

/* ============================= */
/* BOTÓN HAMBURGUESA */
/* ============================= */

.menu-toggle{
    display:none;

    width:42px;
    height:42px;
    padding:8px;
    margin:0;

    background:transparent;
    border:none;
    outline:none;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;
}

.menu-toggle span{
    display:block;
    width:26px;
    height:3px;
    margin:0;

    background:#ffffff;
    border-radius:4px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* ============================= */
/* TÍTULOS */
/* ============================= */

.titulo{
    text-align:center;
    margin-bottom:40px;
    font-size:40px;
    color:#3F3F3F;
}
/* ============================= */
/* TEXTO DE NUESTROS CLIENTES */
/* ============================= */

.texto-clientes{

    max-width:900px;

    margin:0 auto 45px;

    text-align:center;

    font-size:19px;

    line-height:1.8;

    color:#5F5F5F;

}
.texto-servicios{

    max-width:900px;

    margin:0 auto 45px;

    text-align:center;

    font-size:19px;

    line-height:1.8;

    color:#5F5F5F;

}
.texto-servicios strong{

    color:#3F3F3F;

    font-weight:bold;

}

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

.info{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:35px;
    align-items:stretch;
}

.card{
    width:100%;
    min-width:0;

    background:#ffffff;
    border-radius:15px;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    box-shadow:0 8px 20px rgba(0,0,0,0.15);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 28px rgba(0,0,0,0.22);
}

.card img{
    display:block;
    width:100%;
    height:310px;
    object-fit:cover;
}

.card-content{
    padding:25px 30px;

    display:flex;
    flex-direction:column;
    flex-grow:1;
}

.card-content h3{
    margin-bottom:15px;

    color:#3F3F3F;
    font-size:22px;
}

.card-content p{
    margin-bottom:22px;

    color:#454545;
    font-size:17px;
    line-height:1.55;

    flex-grow:1;
}
/* ============================= */
/* SECCIÓN NOSOTROS - ACORDEÓN */
/* ============================= */

.seccion-nosotros{
    position:relative;

    padding:0;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.58),
            rgba(0, 0, 0, 0.58)
        ),
        url("imagenes/NOSOTROS.jpeg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    background-attachment:fixed;

    color:#ffffff;
}


/* CAPA INTERIOR */

.nosotros-overlay{
    width:100%;
    min-height:650px;

    padding:80px 10%;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.30),
            rgba(0, 0, 0, 0.10)
        );
}


/* TÍTULO */

.titulo-nosotros{
    margin-bottom:45px;

    color:#ffffff;

    text-align:center;

    font-size:40px;
}


/* CONTENEDOR DEL ACORDEÓN */

.acordeon-nosotros{
    width:100%;
    max-width:1050px;

    margin:0 auto;

    border-top:2px solid rgba(255, 255, 255, 0.75);
}


/* CADA APARTADO */

.acordeon-item{
    border-bottom:2px solid rgba(255, 255, 255, 0.75);
}


/* BOTÓN MISIÓN, VISIÓN Y VALORES */

.acordeon-boton{
    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    padding:35px 0;

    background:transparent;
    color:#ffffff;

    border:none;

    text-align:left;

    font-size:38px;
    font-weight:400;

    cursor:pointer;
}


/* SÍMBOLO + */

.acordeon-icono{
    min-width:45px;

    color:#ffffff;

    font-size:55px;
    font-weight:200;
    line-height:1;

    text-align:center;

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}


/* CONTENIDO CERRADO */

.acordeon-contenido{
    display:grid;
    grid-template-rows:0fr;

    opacity:0;

    transition:
        grid-template-rows 0.45s ease,
        opacity 0.35s ease;
}


/* CONTENIDO ABIERTO */

.acordeon-item.activo .acordeon-contenido{
    grid-template-rows:1fr;
    opacity:1;
}


/* ENVOLTURA DEL TEXTO */

.acordeon-texto{
    overflow:hidden;
}


/* TEXTO INTERIOR */

.acordeon-texto p,
.acordeon-texto ul{
    max-width:900px;

    margin:0;
    padding:0 70px 35px 0;

    color:#ffffff;

    font-size:25px;
    line-height:1.55;
}


/* LISTA DE VALORES */

.acordeon-texto ul{
    padding-left:25px;
    padding-bottom:35px;

    columns:2;
    column-gap:60px;
}

.acordeon-texto li{
    margin-bottom:12px;
}


/* ICONO AL ABRIR */

.acordeon-item.activo .acordeon-icono{
    transform:rotate(180deg);
}


/* EFECTO AL PASAR EL CURSOR */

.acordeon-boton:hover .acordeon-icono{
    color:#d9d9d9;
}
/* ============================= */
/* CARRUSEL DE REFERENCIAS */
/* ============================= */

#clientes{
    overflow:hidden;
}

/* VENTANA DEL CARRUSEL */

.marcas-slider{
    position:relative;

    width:100%;
    overflow:hidden;

    padding:25px 0;
}

/* FILA QUE SE MUEVE */

.marcas-track{
    display:flex;
    align-items:center;

    width:max-content;
    gap:45px;

    animation:moverMarcas 18s linear infinite;
}


/* ESPACIO DE CADA LOGO */

.marca{
    width:250px;
    height:170px;

    display:flex;
    justify-content:center;
    align-items:center;

    flex-shrink:0;

    margin:0;
}


/* IMÁGENES */

.marca img{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:100%;

    object-fit:contain;
}

.logo-raptor{
    width:150px !important;
    height:auto !important;
}

.logo-sct{
    width:210px !important;
    height:auto !important;
}

.logo-ros{
    width:240px !important;
    height:auto !important;
}
.logo-Pemex{
    width:200px !important;
    height:auto !important;
}
.logo-Indheca{
    width:240px !important;
    height:auto !important;
}
.logo-ingenio{
    width:240px !important;
    height:auto !important;
}
/* EFECTO AL PASAR EL CURSOR */

.marca img:hover{
    transform:scale(1.08);
}

/* MOVIMIENTO HACIA LA IZQUIERDA */

@keyframes moverMarcas{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* PAUSAR CUANDO EL CURSOR ESTÁ ENCIMA */

.marcas-slider:hover .marcas-track{
    animation-play-state:paused;
}
/* ============================= */
/* REDES Y CONTACTOS */
/* ============================= */

.redes{
    background:#5F5F5F;
    color:#ffffff;

    border-radius:24px;
    text-align:center;

    padding:55px 40px;

    box-shadow:0 8px 22px rgba(0,0,0,0.15);
}

.redes h2{
    margin-bottom:28px;

    font-size:32px;
    color:#ffffff;
}


/* DATOS DE CONTACTO */

.dato-contacto{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:12px;

    margin:14px 0;

    font-size:18px;
    line-height:1.5;

    overflow-wrap:anywhere;
}

.dato-contacto i{
    min-width:24px;

    color:#ff3478;
    font-size:21px;
}

.dato-contacto a{
    color:#ffffff;
    text-decoration:none;

    transition:color 0.3s ease;
}

.dato-contacto a:hover{
    color:#ff6a9c;
}


/* CONTENEDOR DE LAS REDES SOCIALES */

.redes-sociales{
    display:flex;
    justify-content:center;
    align-items:flex-start;

    flex-wrap:wrap;
    gap:45px;

    margin-top:40px;
}


/* BOTÓN COMPLETO DE CADA RED */

.redes-sociales a{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:10px;

    color:#ffffff;
    text-decoration:none;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.redes-sociales a:hover{
    transform:translateY(-7px) scale(1.05);
}


/* CÍRCULOS DE LOS ICONOS */

.redes-sociales i{
    width:90px;
    height:90px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    color:#ffffff;
    font-size:46px;

    box-shadow:0 8px 18px rgba(0,0,0,0.25);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.redes-sociales a:hover i{
    box-shadow:0 12px 25px rgba(0,0,0,0.35);
}


/* NOMBRE DE CADA RED */

.redes-sociales span{
    font-size:18px;
    color:#ffffff;
}


/* COLOR DE FACEBOOK */

.facebook i{
    background:#1877F2;
}


/* COLOR DE INSTAGRAM */

.instagram i{
    background:linear-gradient(
        45deg,
        #feda75,
        #fa7e1e,
        #d62976,
        #962fbf,
        #4f5bd5
    );
}


/* COLOR DE LINKEDIN */

.linkedin i{
    background:#0A66C2;
}
/* ============================= */
/* RECLUTAMIENTO */
/* ============================= */

.seccion-reclutamiento{
    background:rgba(203, 203, 203, 1);
}

.reclutamiento-contenedor{
    width:100%;
    max-width:1050px;
    margin:0 auto;
}

.reclutamiento-encabezado{
    max-width:760px;
    margin:0 auto 35px;
    text-align:center;
}

.reclutamiento-etiqueta{
    display:inline-block;
    margin-bottom:12px;
    padding:8px 15px;

    background:rgba(95, 95, 95, 1);
    color:#ffffff;

    border-radius:20px;

    font-size:13px;
    font-weight:bold;
    letter-spacing:1px;
    text-transform:uppercase;
}

.reclutamiento-encabezado h2{
    margin-bottom:15px;

    color:rgba(63, 63, 63, 1);

    font-size:42px;
    line-height:1.15;
}

.reclutamiento-introduccion{
    color:rgba(95, 95, 95, 1);
    font-size:18px;
    line-height:1.65;
}

.formulario-reclutamiento{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;

    padding:40px;

    background:#ffffff;
    border-radius:20px;

    box-shadow:0 10px 28px rgba(95, 95, 95, 0.22);
}

.campo-reclutamiento{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.campo-completo{
    grid-column:1 / -1;
}

.campo-reclutamiento label{
    color:rgba(63, 63, 63, 1);
    font-size:16px;
    font-weight:bold;
}

.campo-reclutamiento input,
.campo-reclutamiento select,
.campo-reclutamiento textarea{
    width:100%;

    padding:14px 15px;

    background:rgba(245, 245, 245, 1);
    color:rgba(63, 63, 63, 1);

    border:1px solid rgba(166, 166, 166, 0.65);
    border-radius:8px;

    font-size:16px;
    outline:none;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.campo-reclutamiento textarea{
    min-height:150px;
    resize:vertical;
}

.campo-reclutamiento input:focus,
.campo-reclutamiento select:focus,
.campo-reclutamiento textarea:focus{
    border-color:rgba(95, 95, 95, 1);
    box-shadow:0 0 0 3px rgba(95, 95, 95, 0.14);
}

.ayuda-cv{
    color:#777777;
    font-size:14px;
}

.zona-cv{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:160px;
    padding:25px;

    border:2px dashed rgba(166, 166, 166, 0.75);
    border-radius:12px;

    background:rgba(250, 250, 250, 1);

    text-align:center;
}

.zona-cv input[type="file"]{
    display:none;
}

.boton-archivo{
    display:inline-block;

    padding:12px 20px;

    background:rgba(95, 95, 95, 1);
    color:#ffffff !important;

    border-radius:7px;

    cursor:pointer;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.boton-archivo:hover{
    background:rgba(63, 63, 63, 1);
    transform:translateY(-2px);
}

#nombre-archivo{
    margin-top:13px;
    color:#777777;
    font-size:14px;
}

.aviso-reclutamiento{
    color:#777777;
    font-size:13px;
    line-height:1.5;
}

.boton-reclutamiento{
    width:100%;
    padding:15px;

    background:rgba(95, 95, 95, 1);
    color:#ffffff;

    border:none;
    border-radius:8px;

    font-size:17px;
    font-weight:bold;

    cursor:pointer;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.boton-reclutamiento:hover{
    background:rgba(63, 63, 63, 1);
    transform:translateY(-2px);
}
/* FORMULARIO */
/* SECCIÓN DEL BUZÓN */
#buzon{
    background:rgba(203, 203, 203, 1);
}

/* TÍTULO */
#buzon .titulo{
    text-align:center;
    margin-bottom:40px;
    font-size:40px;

    /* GRIS OSCURO */
    color:rgba(95, 95, 95, 1);
}

/* CAJA BLANCA DEL FORMULARIO */
.formulario-contacto{
    width:100%;
    max-width:600px;
    margin:auto;

    /* EL FONDO SIGUE BLANCO */
    background:rgba(255, 255, 255, 1);

    padding:35px;
    border-radius:15px;

    /* SOMBRA GRIS */
    box-shadow:
        0 8px 25px rgba(95, 95, 95, 0.25);

    display:flex;
    flex-direction:column;
    gap:15px;
}

/* CAMPOS DEL FORMULARIO */
.formulario-contacto input,
.formulario-contacto textarea{
    width:100%;
    padding:14px;

    /* BORDE GRIS MEDIO */
    border:1px solid rgba(166, 166, 166, 0.70);

    border-radius:8px;

    /* FONDO BLANCO */
    background:rgba(255, 255, 255, 1);

    /* TEXTO GRIS OSCURO */
    color:rgba(95, 95, 95, 1);

    font-size:16px;
    outline:none;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* TEXTO DE EJEMPLO */
.formulario-contacto input::placeholder,
.formulario-contacto textarea::placeholder{
    color:rgba(95, 95, 95, 0.85);
}

/* EFECTO AL HACER CLIC EN LOS CAMPOS */
.formulario-contacto input:focus,
.formulario-contacto textarea:focus{

    /* GRIS OSCURO */
    border-color:rgba(95, 95, 95, 1);

    box-shadow:
        0 0 0 3px rgba(95, 95, 95, 0.15);
}

/* ÁREA DE COMENTARIOS */
.formulario-contacto textarea{
    height:140px;
    resize:vertical;
}

/* BOTÓN ENVIAR */
.formulario-contacto button{

    /* GRIS OSCURO DE TU ESCALA */
    background:rgba(95, 95, 95, 1);

    color:rgba(255, 255, 255, 1);

    border:none;
    padding:15px;
    border-radius:8px;

    font-size:17px;
    font-weight:bold;

    cursor:pointer;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

/* BOTÓN AL PASAR EL CURSOR */
.formulario-contacto button:hover{

    /* GRIS MÁS OSCURO */
    background:rgba(63, 63, 63, 1);

    color:rgba(255, 255, 255, 1);

    transform:translateY(-2px);
}
.texto-contacto{
    max-width:700px;
    margin:0 auto 35px;
    text-align:center;
    color:#5F5F5F;
    line-height:1.6;
}

.texto-contacto strong{
    display:block;
    font-size:22px;
    margin-bottom:8px;
    font-weight:bold;
}

.texto-contacto span{
    display:block;
    font-size:16px;
    color:#777;
}
/* ============================= */
/* FOOTER PROFESIONAL */
/* ============================= */

.footer-principal{

    position:relative;

    width:100%;

    margin-top:40px;

    padding:35px 8% 30px;

   background:
linear-gradient(
135deg,
#3F3F3F,
#5F5F5F,
#3F3F3F
);

    color:#ffffff;

    overflow:hidden;

   border-top:2px solid rgba(255,255,255,.25);

}

/* BRILLO SUPERIOR */

.footer-principal::before{

    content:"";

    position:absolute;

    top:-2px;

    left:-180px;

    width:180px;

    height:3px;

background: linear-gradient(
    90deg,
    transparent,
    #5F5F5F,
    #FFFFFF,
    #5F5F5F,
    transparent
);

    animation:brilloFooter 6s linear infinite;

}

/* CONTENEDOR */

.footer-contenedor{

    max-width:1500px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr
        .8fr
        1fr;

    align-items:center;

}

/* COLUMNAS */

.footer-columna{

    padding:15px 40px;

    min-height:120px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/* DIVISORES */

.footer-columna + .footer-columna{

    border-left:1px solid rgba(255,255,255,.18);

}

/* EMPRESA */

.footer-empresa h3{

    color:#ffffff;

    font-size:22px;

    letter-spacing:1px;

}

.footer-empresa p{

    margin-top:20px;

    color:#c7c7c7;

    font-size:17px;

    line-height:1.7;

}

/* LÍNEAS */

.footer-linea{

    width:90px;

    height:2px;

    margin-top:18px;

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

}

.footer-linea-centro{

    margin:0 auto 20px;

}

/* DERECHOS */

.footer-derechos{

    text-align:center;

}

.footer-anio{

    font-size:22px;

    margin-bottom:15px;

}

.footer-derechos p{

    font-size:17px;

}

/* ROS CORE */

.footer-desarrollo{

    text-align:center;

    align-items:center;

}

.footer-desarrollado{

    font-size:15px;

    letter-spacing:1px;

    margin-bottom:15px;

}

.footer-logo-ros{

    width:300px;

    max-width:100%;

    height:auto;

    transition:.35s;

}

.footer-logo-ros:hover{

    transform:scale(1.05);

    filter:brightness(1.12);

}

.footer-servicios-ros{

    margin-top:18px;

    color:#ffffff;

    font-size:15px;

}

.footer-servicios-ros span{

      color:rgba(255,255,255,.65);

    margin:0 8px;

}

/* ANIMACIÓN */

@keyframes brilloFooter{

    from{

        left:-180px;

    }

    to{

        left:100%;

    }

}

/* ============================= */
/* LOADER */
/* ============================= */

#loader{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100vh;
    height:100svh;

    background:rgba(255, 255, 255, 1);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

    z-index:9999;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


/* OCULTAR EL LOADER */

#loader.oculto{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


/* CONTENEDOR DEL LOADER */

.loader-contenido{
    width:100%;
    max-width:620px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
}


/* LOGO */

.loader-logo{
    display:block;

    width:420px;
    max-width:85%;

    height:auto;

    margin-bottom:35px;

    animation:
        aparecerLogo 1s ease,
        respirarLogo 2s ease-in-out infinite;
}


/* TEXTO CARGANDO */

.loader-texto{
    margin-bottom:15px;

    color:rgba(63, 63, 63, 1);

    font-size:24px;
    font-weight:bold;

    letter-spacing:7px;

    animation:parpadearTexto 1.2s ease-in-out infinite;
}


/* CONTENEDOR DE LA BARRA */

.barra-loader{
    position:relative;

    width:100%;
    max-width:520px;

    height:32px;

    padding:4px;

    background:rgba(255, 255, 255, 1);

    border:3px solid rgba(95, 95, 95, 1);
    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.12);
}


/* PARTE QUE SE LLENA */

.barra-progreso{
    position:relative;

    width:0%;
    height:100%;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(63, 63, 63, 1) 0px,
            rgba(63, 63, 63, 1) 18px,
            rgba(95, 95, 95, 1) 18px,
            rgba(95, 95, 95, 1) 36px
        );

    border-radius:25px;

    overflow:hidden;

    transition:width 0.05s linear;
}


/* BRILLO QUE RECORRE LA BARRA */

.barra-progreso::after{
    content:"";

    position:absolute;
    top:0;
    left:-80px;

    width:80px;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.75),
        transparent
    );

    animation:brilloBarra 1.2s linear infinite;
}


/* PORCENTAJE */

.porcentaje-loader{
    display:block;

    margin-top:14px;

    color:rgba(95, 95, 95, 1);

    font-size:17px;
    font-weight:bold;

    letter-spacing:1px;
}


/* ANIMACIÓN DE ENTRADA DEL LOGO */

@keyframes aparecerLogo{

    from{
        opacity:0;
        transform:translateY(-25px) scale(0.92);
    }

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

}


/* ANIMACIÓN SUAVE DEL LOGO */

@keyframes respirarLogo{

    0%,
    100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.025);
    }

}


/* ANIMACIÓN DEL TEXTO */

@keyframes parpadearTexto{

    0%,
    100%{
        opacity:0.55;
    }

    50%{
        opacity:1;
    }

}


/* BRILLO DE LA BARRA */

@keyframes brilloBarra{

    from{
        left:-80px;
    }

    to{
        left:100%;
    }

}

/* ============================= */
/* TABLET Y CELULAR */
/* ============================= */

@media (max-width:768px){

    header{
        min-height:100svh;
        background-position:center;
    }

    .overlay{
        min-height:100svh;
        padding:105px 20px 40px;
    }

    .logo{
        width:min(86%, 330px);
        max-width:330px;
    }

    nav{
        top:12px;
        width:92%;
        min-height:68px;
        height:68px;

        padding:0 16px;

        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }

    .nav-brand{
        margin:0;
        text-align:left;
        flex-shrink:1;
    }

    .nav-brand strong{
        font-size:20px;
    }

    .nav-brand span{
        max-width:160px;
        font-size:9px;
        line-height:1.15;
    }

    .menu-toggle{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5px;

        position:relative;
        flex-shrink:0;
        z-index:1002;
    }

    nav ul{
        position:absolute;
        top:78px;
        left:0;

        width:100%;
        max-height:0;

        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;

        margin:0;
        padding:0;

        background:rgba(63,63,63,1);
        border-radius:8px;

        overflow:hidden;
        opacity:0;
        visibility:hidden;

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

        transition:
            max-height 0.35s ease,
            opacity 0.25s ease,
            visibility 0.25s ease;
    }

    nav ul.activo{
        max-height:500px;
        opacity:1;
        visibility:visible;
    }

    nav ul li{
        width:100%;
        text-align:center;
    }

    nav ul li a{
        display:block;
        width:100%;

        padding:15px 12px;

        font-size:15px;

        border-bottom:1px solid rgba(255,255,255,0.1);
    }

    nav ul li:last-child a{
        border-bottom:none;
    }

    .btn-nav{
        padding:15px 12px;
        border-radius:0;
    }

    .menu-toggle.activo span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .menu-toggle.activo span:nth-child(2){
        opacity:0;
    }

    .menu-toggle.activo span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    section{
        padding:50px 20px;
        scroll-margin-top:95px;
    }

    .titulo{
        font-size:30px;
        margin-bottom:30px;
    }

.info{
    grid-template-columns:1fr;
    gap:30px;
}

.marcas-track{
    animation-duration:14s;
}

.marca{
    width:270px;
    height:150px;
    margin-right:35px;
}

.marca img{
    width:210px;
    height:115px;
}
.card{
    max-width:520px;
    margin:0 auto;
}

.card img{
    height:280px;
}

    .redes{
    padding:35px 20px;
}

.redes h2{
    font-size:25px;
}

.dato-contacto{
    font-size:15px;
    align-items:flex-start;
}

.redes-sociales{
    gap:25px;
    margin-top:32px;
}

.redes-sociales i{
    width:70px;
    height:70px;
    font-size:35px;
}

.redes-sociales span{
    font-size:15px;
}
    .formulario-contacto{
        padding:24px 18px;
    }
     .loader-logo{
        width:330px;
        max-width:88%;
        margin-bottom:28px;
    }

    .loader-texto{
        font-size:19px;
        letter-spacing:5px;
    }

    .barra-loader{
        max-width:400px;
        height:28px;
        border-width:2px;
    }

    .porcentaje-loader{
        font-size:15px;
    }
    .seccion-nosotros{
    background-attachment:scroll;
}

.nosotros-overlay{
    min-height:auto;
    padding:60px 25px;
}

.titulo-nosotros{
    margin-bottom:30px;
    font-size:30px;
}

.acordeon-boton{
    padding:27px 0;
    font-size:30px;
}

.acordeon-icono{
    min-width:35px;
    font-size:45px;
}

.acordeon-texto p,
.acordeon-texto ul{
    padding-right:20px;
    padding-bottom:28px;

    font-size:20px;
}

.acordeon-texto ul{
    columns:1;
}
.formulario-reclutamiento{
    grid-template-columns:1fr;
    padding:28px 20px;
}

.campo-completo{
    grid-column:auto;
}

.reclutamiento-encabezado h2{
    font-size:32px;
}

.reclutamiento-introduccion{
    font-size:16px;
}
.texto-clientes{
    font-size:16px;
    line-height:1.7;
    margin-bottom:30px;
    padding:0 10px;
}
/* FOOTER RESPONSIVE */

.footer-principal{

    padding:45px 20px;

}

.footer-contenedor{

    grid-template-columns:1fr;

}

.footer-columna{

    text-align:center;

    align-items:center;

    padding:35px 0;

    min-height:auto;

}

.footer-columna + .footer-columna{

    border-left:none;

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

}

.footer-linea{

    margin-left:auto;

    margin-right:auto;

}

.footer-empresa p{

    max-width:420px;

}

.footer-logo-ros{

    width:230px;

}
}

/* ============================= */
/* CELULARES PEQUEÑOS */
/* ============================= */

@media (max-width:420px){

    nav{
        width:94%;
        padding:0 13px;
    }

    .nav-brand strong{
        font-size:18px;
    }

    .nav-brand span{
        max-width:140px;
        font-size:8px;
    }

    .menu-toggle{
        width:40px;
        height:40px;
    }

    .logo{
        width:90%;
        max-width:310px;
    }

    .titulo{
        font-size:27px;
    }

    section{
        padding:45px 16px;
    }

    .card-content{
        padding:20px;
    }

    .formulario-contacto{
        padding:22px 15px;
    }
 .redes-sociales{
    gap:18px;
}

.redes-sociales i{
    width:62px;
    height:62px;
    font-size:30px;
}

.redes-sociales span{
    font-size:13px;
}

.dato-contacto{
    flex-direction:column;
    align-items:center;
    gap:5px;
}   
.botones-pdf{
    flex-direction:column;
}

.btn-pdf{
    width:100%;
}
.card-content{
    padding:22px 18px;
}

.card-content h3{
    font-size:20px;
}

.card-content p{
    font-size:16px;
}

.botones-pdf{
    grid-template-columns:1fr;
}

.btn-pdf{
    width:100%;
    font-size:14px;
}
.marca{
    width:230px;
    height:130px;
    margin-right:25px;
}

.marca img{
    width:185px;
    height:100px;
}

.marcas-track{
    animation-duration:12s;
}
.loader-logo{
        width:270px;
        max-width:92%;
        margin-bottom:24px;
    }

    .loader-texto{
        font-size:16px;
        letter-spacing:4px;
    }

    .barra-loader{
        width:92%;
        height:25px;
    }

    .porcentaje-loader{
        font-size:14px;
    }
    .nosotros-overlay{
    padding:50px 20px;
}

.acordeon-boton{
    padding:23px 0;
    font-size:26px;
}

.acordeon-icono{
    font-size:40px;
}

.acordeon-texto p,
.acordeon-texto ul{
    padding-right:5px;
    font-size:17px;
    line-height:1.6;
}
}
/* ============================= */
/* BOTONES PARA PDF */
/* ============================= */

.botones-pdf{
    width:100%;

    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;

    margin-top:auto;
}

.btn-pdf{
    min-width:0;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;

    padding:12px 8px;

    border-radius:7px;

    color:#ffffff;
    text-decoration:none;
    text-align:center;

    font-size:13px;
    font-weight:bold;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.btn-ver{
    background:#666666;
}

.btn-ver:hover{
    background:#4f4f4f;
}

.btn-descargar{
    background:#08006d;
}

.btn-descargar:hover{
    background:#1000a0;
}

.btn-pdf:hover{
    color:#ffffff;
    transform:translateY(-3px);
    box-shadow:0 6px 14px rgba(0,0,0,0.25);
}


/* BOTÓN VISUALIZAR */

.btn-ver{
    background:#5F5F5F;
    color:#ffffff;
}

.btn-ver:hover{
    background:#3F3F3F;
    transform:translateY(-3px);
}


/* BOTÓN DESCARGAR */

.btn-descargar{
    background:#03005c;
    color:#ffffff;
}

.btn-descargar:hover{
    background:#0800a0;
    transform:translateY(-3px);
}


/* SOMBRA AL PASAR EL CURSOR */

.btn-pdf:hover{
    box-shadow:0 6px 15px rgba(0,0,0,0.25);
}