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

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

html,
body {
    width: 100%;
    height: 100%;

    background: white;

    overflow: hidden;
}


/* ==================================================
   ==================================================
   INTRO
   ==================================================
   ================================================== */

.pantalla-inicio {

    width: 100vw;
    height: 100vh;

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

    position: fixed;

    top: 0;
    left: 0;

    overflow: hidden;

    background-color: white;

    z-index: 100;

    opacity: 1;

    visibility: visible;

    transition:
        opacity 1s ease-in-out,
        visibility 1s ease-in-out;
}


/* ==================================================
   CUANDO TERMINA EL INTRO
   ================================================== */

.pantalla-inicio.intro-terminado {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* ==================================================
   LOGO DEL INTRO
   ================================================== */

.logo {

    width: 850px;

    max-width: 80%;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 2;
}


/* ==================================================
   REGUILETE
   ================================================== */

.reguilete {

    position: absolute;

    width: 89%;

    height: auto;

    left: 32%;

    top: 56%;

    margin-left: -28%;

    margin-top: -28%;

    opacity: 1;

    z-index: 5;

    animation:
        salidaReguilete 1s linear forwards;
}


@keyframes salidaReguilete {

    0% {

        opacity: 1;

        transform:
            rotate(0deg);
    }

    85% {

        opacity: 1;

        transform:
            rotate(306deg);
    }

    100% {

        opacity: 0;

        transform:
            rotate(360deg);
    }
}


/* ==================================================
   IMAGEN FINAL DEL LOGO
   ================================================== */

.texto-logo {

    width: 100%;

    height: auto;

    opacity: 0;

    position: relative;

    z-index: 4;

    animation:
        aparecerLogo 1.5s ease-in-out 0.8s forwards,
        desaparecerLogo 1.1s ease-in-out 2.7s forwards;
}


@keyframes aparecerLogo {

    0% {

        opacity: 0;

        transform:
            scale(0.95);
    }

    100% {

        opacity: 1;

        transform:
            scale(1);
    }
}


@keyframes desaparecerLogo {

    0% {

        opacity: 1;

        transform:
            scale(1);
    }

    100% {

        opacity: 0;

        transform:
            scale(0.95);
    }
}


/* ==================================================
   LÍNEAS HORIZONTALES AZULES
   ================================================== */

.linea {

    position: absolute;

    width: 82%;

    height: 20px;

    background-color: #006dcc;

    opacity: 0;

    z-index: 1;
}


/* ==================================================
   LÍNEAS GRISES
   ================================================== */

.linea-gris {

    position: absolute;

    background-color: #B8B8B8;

    z-index: 2;
}


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

.horizontal-superior {

    width: 98%;

    height: 10px;

    left: 50%;

    top: 100%;

    transform:
        translateX(-50%);
}


/* ==================================================
   LÍNEA GRIS INFERIOR
   ================================================== */

.horizontal-inferior {

    width: 98%;

    height: 8px;

    left: 50%;

    bottom: 100%;

    transform:
        translateX(-50%);
}


/* ==================================================
   LÍNEA SUPERIOR
   DERECHA → IZQUIERDA
   ================================================== */

.linea-superior {

    top: 10%;

    left: 100%;

    animation:
        lineaArriba 1.2s ease-in-out 1s forwards,
        lineaArribaCentro 1.5s ease-in-out 2.7s forwards,
        desaparecerLineaSuperior 0.4s ease-in-out 4.2s forwards;
}


@keyframes lineaArriba {

    0% {

        left: 100%;

        opacity: 1;
    }

    100% {

        left: 9%;

        opacity: 1;
    }
}


@keyframes lineaArribaCentro {

    0% {

        top: 10%;

        opacity: 1;
    }

    100% {

        top: 50%;

        opacity: 1;
    }
}


@keyframes desaparecerLineaSuperior {

    0% {

        opacity: 1;
    }

    100% {

        opacity: 0;
    }
}


/* ==================================================
   LÍNEA INFERIOR
   IZQUIERDA → DERECHA
   ================================================== */

.linea-inferior {

    bottom: 10%;

    right: 100%;

    animation:
        lineaAbajo 1.2s ease-in-out 1s forwards,
        lineaAbajoCentro 1.5s ease-in-out 2.7s forwards,
        desaparecerLineaInferior 0.4s ease-in-out 4.2s forwards;
}


@keyframes lineaAbajo {

    0% {

        right: 100%;

        opacity: 1;
    }

    100% {

        right: 9%;

        opacity: 1;
    }
}


@keyframes lineaAbajoCentro {

    0% {

        bottom: 10%;

        opacity: 1;
    }

    100% {

        bottom: 50%;

        opacity: 1;
    }
}


@keyframes desaparecerLineaInferior {

    0% {

        opacity: 1;
    }

    100% {

        opacity: 0;
    }
}


/* ==================================================
   LÍNEA VERTICAL
   ================================================== */

.linea-vertical {

    position: absolute;

    width: 20px;

    height: 500px;

    background-color: #006dcc;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%)
        scaleY(0);

    opacity: 0;

    z-index: 3;

    animation:
        aparecerVertical 0.5s ease-out 4.6s forwards,
        moverVertical 1.8s ease-in-out 5.1s forwards;
}


/* ==================================================
   LÍNEA GRIS VERTICAL
   ================================================== */

.linea-gris.vertical {

    width: 8px;

    height: 98%;

    top: 50%;

    left: 0;

    transform:
        translate(-100%, -50%);
}


/* ==================================================
   APARECER VERTICAL
   ================================================== */

@keyframes aparecerVertical {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scaleY(0);
    }

    100% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scaleY(1);
    }
}


/* ==================================================
   MOVER VERTICAL
   ================================================== */

@keyframes moverVertical {

    0% {

        left: 50%;
    }

    100% {

        left: 88%;
    }
}


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

.texto-realizando {

    position: absolute;

    right: 51%;

    top: 50%;

    transform:
        translateY(-50%);

    font-family:
        Arial, sans-serif;

    font-size: 70px;

    font-weight: 600;

    letter-spacing: 4px;

    color: #006dcc;

    opacity: 0;

    white-space: nowrap;

    z-index: 2;

    animation:
        aparecerRealizando 1.2s ease-out 5.1s forwards;
}


@keyframes aparecerRealizando {

    0% {

        opacity: 0;

        transform:
            translate(-30px, -50%);
    }

    100% {

        opacity: 1;

        transform:
            translate(0, -50%);
    }
}


/* ==================================================
   TEXTO SERVICIOS DE CALIDAD
   ================================================== */

.texto-servicios {

    position: absolute;

    left: 51%;

    top: 50%;

    transform:
        translateY(-50%);

    font-family:
        Arial, sans-serif;

    font-size: 56px;

    font-weight: 600;

    letter-spacing: 3px;

    color: #006dcc;

    opacity: 0;

    white-space: nowrap;

    z-index: 2;

    animation:
        aparecerServicios 1.2s ease-out 5.4s forwards;
}


@keyframes aparecerServicios {

    0% {

        opacity: 0;

        transform:
            translate(30px, -50%);
    }

    100% {

        opacity: 1;

        transform:
            translate(0, -50%);
    }
}


/* ==================================================
   LÍNEA GRIS SERVICIOS
   ================================================== */

.linea-gris-servicios {

    position: absolute;

    width: 0;

    height: 8px;

    background-color: #B8B8B8;

    left: 50%;

    top:
        calc(50% + 55px);

    transform:
        translateX(0);

    opacity: 0;

    z-index: 2;

    animation:
        crecerLineaServicios 1.6s ease-out 5.5s forwards;
}


@keyframes crecerLineaServicios {

    0% {

        width: 0;

        opacity: 0;
    }

    100% {

        width: 35%;

        opacity: 1;
    }
}


/* ==================================================
   ==================================================
   PÁGINA PRINCIPAL
   ==================================================
   ================================================== */

.pagina-principal {

    width: 100%;

    height: 100vh;

    background-color: white;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 10;

    opacity: 0;

    visibility: hidden;

    overflow: hidden;

    transition:
        opacity 1.2s ease-in-out,
        visibility 1.2s ease-in-out;
}


/* ==================================================
   PÁGINA PRINCIPAL VISIBLE
   ================================================== */

.pagina-principal.pagina-visible {

    opacity: 1;

    visibility: visible;
}


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

.encabezado {

    width: 100%;

    height: 90px;

    padding: 0 4%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background-color: white;

    position: relative;

    z-index: 20;

    opacity: 0;

    transform:
        translateY(-25px);

    transition:
        opacity 1s ease-out,
        transform 1s ease-out;
}


/* ==================================================
   ENCABEZADO CUANDO APARECE
   ================================================== */

.pagina-visible .encabezado {

    opacity: 1;

    transform:
        translateY(0);
}


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

.logo-header {

    width: 160px;

    display: flex;

    align-items: center;

    text-decoration: none;

    transition:
        transform 0.4s ease;
}


.logo-header img {

    width: 100%;

    height: auto;

    display: block;
}


.logo-header:hover {

    transform:
        scale(1.04);
}


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

.menu {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-left: auto;

    margin-right: 150px;
}

/* ==================================================
   ELEMENTOS MENÚ
   ================================================== */

/* ==================================================
   ELEMENTOS MENÚ
   ================================================== */

.menu-item {

    position: relative;

    height: 52px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #555555;

    text-decoration: none;

    font-family:
        Arial, sans-serif;

    font-size: 20px;

    font-weight: 600;

    letter-spacing: 1.2px;

    white-space: nowrap;

    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        transform 0.35s ease,
        padding 0.35s ease;
}


/* ==================================================
   ÍCONOS DEL MENÚ
   ================================================== */

.menu-item i {

    font-size: 15px;

    color: #006dcc;

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


.menu-item:hover i {

    color: #006dcc;

    transform:
        scale(1.15);
}


.menu-item.activo i {

    color: #006dcc;
}


/* ==================================================
   ÍCONO BOTÓN COTIZA
   ================================================== */

.menu-cotiza {

    gap: 8px;
}


.menu-cotiza i {

    font-size: 15px;

    transition:
        transform 0.35s ease;
}


.menu-cotiza:hover i {

    transform:
        scale(1.15);
}











/* ==================================================
   LÍNEA AZUL MENÚ
   ================================================== */

.menu-item::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 4px;

    width: 0;

    height: 3px;

    background-color: #006dcc;

    transform:
        translateX(-50%);

    transition:
        width 0.35s ease;
}


/* ==================================================
   HOVER MENÚ
   ================================================== */

.menu-item:hover {

    color: #006dcc;

    padding-left: 23px;

    padding-right: 23px;

    transform:
        translateY(-2px);



        font-size: 22px;
}


.menu-item:hover::after {

    width: 70%;
}


/* ==================================================
   INICIO ACTIVO
   ================================================== */

.menu-item.activo {

    color: #006dcc;
}


.menu-item.activo::after {

    width: 70%;
}


/* ==================================================
   BOTÓN COTIZA
   ================================================== */

.menu-cotiza {

    height: 48px;

    padding: 0 22px;

    margin-left: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    background-color: #006dcc;

    color: white;

    text-decoration: none;

    font-family:
        Arial, sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.8px;

    white-space: nowrap;

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



.menu-cotiza i {

    font-size: 15px;

    transition:
        transform 0.35s ease;
}


.menu-cotiza:hover i {

    transform:
        scale(1.15);
}










/* ==================================================
   LÍNEA GRIS BOTÓN
   ================================================== */

.menu-cotiza::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 4px;

    background-color: #B8B8B8;

    transition:
        width 0.4s ease;
}


/* ==================================================
   HOVER BOTÓN
   ================================================== */

.menu-cotiza:hover {

    background-color: #005aa8;

    transform:
        scale(1.05);

    box-shadow:
        0 8px 20px
        rgba(0, 109, 204, 0.20);
}


.menu-cotiza:hover::after {

    width: 100%;
}


/* ==================================================
   LÍNEA HEADER
   ================================================== */

.linea-header {

    width: 100%;

    height: 14px;

    background-color: #006dcc;

    position: relative;

    z-index: 15;


    margin-top: 0px;

    opacity: 0;

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}


/* ==================================================
   LÍNEA HEADER VISIBLE
   ================================================== */

.pagina-visible .linea-header {

    opacity: 1;

    transform:
        scaleX(1);
}


.linea-header-gris {

    position: absolute;

    width: 100%;

    height: 5px;

    left: 0;

    bottom: 0;

    background-color: #B8B8B8;
}


/* ==================================================
   VIDEO PRINCIPAL
   ================================================== */

.video-principal {

    width: 100%;

    height:
        calc(100vh - 113px);

    position: relative;

    overflow: hidden;

    background-color: #111111;
}


/* ==================================================
   VIDEO
   ================================================== */

.video-fondo {

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    object-fit: cover;

    object-position: center;

    display: block;
}


/* ==================================================
   OVERLAY VIDEO
   ================================================== */

.video-overlay {

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.08),
            rgba(0, 0, 0, 0)
        );

    z-index: 2;
}


/* ==================================================
   TEXTO SOBRE VIDEO
   ================================================== */

.texto-video {

    position: absolute;

    left: 6%;

    bottom: 9%;

    z-index: 5;

    color: white;

    font-family:
        Arial, sans-serif;

    opacity: 0;

    transform:
        translateX(-40px);

    transition:
        opacity 1.2s ease-out,
        transform 1.2s ease-out;
}


/* ==================================================
   TEXTO VIDEO VISIBLE
   ================================================== */

.pagina-visible .texto-video {

    opacity: 1;

    transform:
        translateX(0);
}


/* ==================================================
   REALIZANDO
   ================================================== */

.texto-video-linea1 {

    font-size: 64px;

    font-weight: 600;

    letter-spacing: 5px;

    line-height: 1.1;

    text-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.35);
}


/* ==================================================
   SERVICIOS DE CALIDAD
   ================================================== */

.texto-video-linea2 {

    margin-top: 8px;

    font-size: 34px;

    font-weight: 400;

    letter-spacing: 3px;

    line-height: 1.2;

    text-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.35);
}


/* ==================================================
   LÍNEA GRIS VIDEO
   ================================================== */

.linea-video {

    width: 180px;

    height: 6px;

    margin-top: 18px;

    background-color: #B8B8B8;

    transform-origin: left;

    transform:
        scaleX(0);

    transition:
        transform 1s ease-out 0.6s;
}


.pagina-visible .linea-video {

    transform:
        scaleX(1);
}








/* ==================================================
              ADAPTACIÓNES PARA OTRAS PANTALLAS
   ================================================== */





/* ==================================================
   ADAPTACIÓN 1366 x 768
   ================================================== */

@media (max-width: 1366px) and (max-height: 768px) {

    /* ENCABEZADO */

    .encabezado {

        height: 85px;

        padding-left: 3%;

        padding-right: 3%;
    }


    /* LOGO */

    .logo-header {

        width: 150px;
    }


    /* MENÚ */

    .menu {

        gap: 2px;

        margin-left: auto;

        margin-right: 35px;
    }


    .menu-item {

        height: 46px;

        padding-left: 10px;

        padding-right: 10px;

        gap: 7px;

        font-size: 17px;

        letter-spacing: 0.8px;
    }


    .menu-item i {

        font-size: 14px;
    }


    /* BOTÓN COTIZA */

    .menu-cotiza {

        height: 44px;

        padding-left: 15px;

        padding-right: 15px;

        margin-left: 6px;

        gap: 7px;

        font-size: 12px;

        letter-spacing: 0.6px;
    }


    .menu-cotiza i {

        font-size: 14px;
    }


    /* LÍNEA HEADER */

    .linea-header {

        margin-top: 0;
    }


    /* VIDEO */

    .video-principal {

        height:
            calc(100vh - 99px);
    }


    /* TEXTO SOBRE VIDEO */

    .texto-video {

        left: 5%;

        bottom: 8%;
    }


    .texto-video-linea1 {

        font-size: 55px;
    }


    .texto-video-linea2 {

        font-size: 30px;
    }
}


/* ==================================================
   ADAPTACIÓN 1200px
   ================================================== */

@media (max-width: 1200px) {

    /* ENCABEZADO */

    .encabezado {

        height: 85px;

        padding-left: 3%;

        padding-right: 3%;
    }


    /* LOGO */

    .logo-header {

        width: 160px;
    }


    /* MENÚ */

    .menu {

        gap: 2px;

        margin-left: auto;

        margin-right: 25px;
    }


    .menu-item {

        height: 46px;

        padding-left: 9px;

        padding-right: 9px;

        gap: 7px;

        font-size: 15px;

        letter-spacing: 0.8px;
    }


    .menu-item i {

        font-size: 14px;
    }


    /* BOTÓN COTIZA */

    .menu-cotiza {

        height: 44px;

        padding-left: 14px;

        padding-right: 14px;

        margin-left: 5px;

        gap: 7px;

        font-size: 12px;

        letter-spacing: 0.6px;
    }


    .menu-cotiza i {

        font-size: 14px;
    }


    /* LÍNEA HEADER */

    .linea-header {

        margin-top: 0;
    }


    /* VIDEO */

    .video-principal {

        height:
            calc(100vh - 99px);
    }
}


/* ==================================================
   ADAPTACIÓN 900px
   ================================================== */

@media (max-width: 900px) {

    /* ENCABEZADO */

    .encabezado {

        height: auto;

        min-height: 90px;

        padding: 12px 3%;

        flex-direction: column;

        gap: 10px;
    }


    /* LOGO */

    .logo-header {

        width: 150px;
    }


    /* MENÚ */

    .menu {

        width: 100%;

        margin: 0;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        gap: 4px;
    }


    .menu-item {

        height: 42px;

        padding-left: 9px;

        padding-right: 9px;

        gap: 6px;

        font-size: 13px;

        letter-spacing: 0.6px;
    }


    .menu-item i {

        font-size: 12px;
    }


    /* BOTÓN COTIZA */

    .menu-cotiza {

        height: 42px;

        padding-left: 12px;

        padding-right: 12px;

        margin-left: 3px;

        gap: 6px;

        font-size: 11px;

        letter-spacing: 0.4px;
    }


    .menu-cotiza i {

        font-size: 12px;
    }


    /* LÍNEA HEADER */

    .linea-header {

        margin-top: 0;
    }


    /* VIDEO */

    .video-principal {

        height:
            calc(100vh - 150px);
    }


    /* TEXTO VIDEO */

    .texto-video {

        left: 5%;

        bottom: 8%;
    }


    .texto-video-linea1 {

        font-size: 45px;

        letter-spacing: 4px;
    }


    .texto-video-linea2 {

        font-size: 25px;

        letter-spacing: 2px;
    }


    .linea-video {

        width: 150px;

        height: 5px;
    }
}






















   /* ==================================================
   ==================================================
   DISEÑO SECCIÓN NOSOTROS
   ==================================================
   ================================================== */



   /* ==================================================
   CONTENEDOR PRINCIPAL NOSOTROS
   ================================================== */

.seccion-nosotros {

    width: 100%;

    box-sizing: border-box;

    height: calc(100vh - 104px);

    position: absolute;

    top: 104px;
    left: 0;

    padding: 45px 6% 0px;

    background-color: #ffffff;

    overflow-x: hidden;
overflow-y: auto;

 scrollbar-width: auto;
    scrollbar-color: auto;

overscroll-behavior: contain;

-webkit-overflow-scrolling: touch;

scrollbar-gutter: stable;

    /*
       Aparición de la sección
    */
    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateX(50px);

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

    /*
       Fondo geométrico
    */
    background-image:

        linear-gradient(
            135deg,
            rgba(0, 109, 204, 0.035) 25%,
            transparent 25%
        ),

        linear-gradient(
            315deg,
            rgba(184, 184, 184, 0.05) 25%,
            transparent 25%
        );

    background-size:
        220px 220px;

    background-position:
        0 0,
        110px 110px;

    
}


/* ==================================================
   NOSOTROS ACTIVO
   ================================================== */

.seccion-nosotros.activa {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(0);
}



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

.nosotros-encabezado {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto 40px;
}


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

.nosotros-titulo {

    font-family:
        Arial, sans-serif;

    font-size: 42px;

    font-weight: 600;

    letter-spacing: 4px;

    color: #006dcc;

    opacity: 0;

    transform:
        translateX(-30px);

    transition:
        opacity 0.8s ease 0.2s,
        transform 0.8s ease 0.2s;
}


.seccion-nosotros.activa .nosotros-titulo {

    opacity: 1;

    transform:
        translateX(0);
}


/* ==================================================
   LÍNEA DEL TÍTULO
   ================================================== */

.nosotros-linea {

    width: 0;

    height: 5px;

    margin-top: 12px;

    background-color: #B8B8B8;

    transition:
        width 0.8s ease 0.45s;
}


.seccion-nosotros.activa .nosotros-linea {

    width: 150px;
}


/* ==================================================
   CONTENIDO PRINCIPAL
   ================================================== */

.nosotros-contenido {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        45% 55%;

    align-items: center;

    gap: 50px;
}




/* ==================================================
   FOTOGRAFÍA — QUIÉNES SOMOS
   ================================================== */

.nosotros-foto {

    width: 100%;

    height: auto;

    overflow: hidden;

    position: relative;

    background-color: #eeeeee;

    opacity: 0;

    transform: translateX(-60px);

    transition:
        opacity 1s ease 0.35s,
        transform 1s ease 0.35s;
}


.seccion-nosotros.activa .nosotros-foto {

    opacity: 1;

    transform:
        translateX(0);
}


/* ==================================================
   IMAGEN — TAMAÑO AUTOMÁTICO
   ================================================== */

.nosotros-foto img {

    width: 100%;

    height: auto;

    object-fit: contain;

    object-position: center;

    display: block;

    transition: transform 0.8s ease;
}

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

.nosotros-foto::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(0, 109, 204, 0.12);

    opacity: 0;

    transition:
        opacity 0.5s ease;

    pointer-events: none;
}


.nosotros-foto:hover::after {

    opacity: 1;
}


.nosotros-foto:hover img {

    transform:
        scale(1.04);
}


/* ==================================================
   TEXTO QUIÉNES SOMOS
   ================================================== */

.nosotros-texto {

    padding-right: 12%;

    opacity: 0;

    transform:
        translateX(60px);

    transition:
        opacity 1s ease 0.55s,
        transform 1s ease 0.55s;
}


.seccion-nosotros.activa .nosotros-texto {

    opacity: 1;

    transform:
        translateX(0);
}


/* ==================================================
   ETIQUETA RISECA
   ================================================== */

.nosotros-etiqueta {

    font-family:
        Arial, sans-serif;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #B8B8B8;
}


/* ==================================================
   TÍTULO QUIÉNES SOMOS
   ================================================== */

.nosotros-texto h2 {

    margin-top: 8px;

    font-family:
        Arial, sans-serif;

    font-size: 30px;

    font-weight: 600;

    letter-spacing: 2px;

    color: #333333;
}


/* ==================================================
   LÍNEA AZUL
   ================================================== */

.nosotros-linea-texto {

    width: 80px;

    height: 4px;

    margin:
        15px 0 22px;

    background-color: #006dcc;
}


/* ==================================================
   PÁRRAFOS
   ================================================== */

.nosotros-texto > p {
    max-width: 760px;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #666666;
}

/* ==================================================
   ALCANCES
   ================================================== */

.nosotros-alcances {

    width: 100%;

    max-width: 1400px;

    margin:
        65px auto 70px;

    padding:
        30px 35px;

    display: flex;

    align-items: center;

    gap: 25px;

    background-color: #f5f7f9;

    border-left:
        6px solid #006dcc;

    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity 0.9s ease 0.8s,
        transform 0.9s ease 0.8s;
}


.seccion-nosotros.activa .nosotros-alcances {

    opacity: 1;

    transform:
        translateY(0);
}


/* ==================================================
   ICONO ALCANCES
   ================================================== */

.alcances-icono {

    width: 65px;

    height: 65px;

    min-width: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #006dcc;

    color: white;

    font-size: 27px;
}


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

.alcances-contenido span {

    font-family:
        Arial, sans-serif;

    font-size: 30px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #006dcc;
}


.alcances-contenido h2 {

    margin:
        6px 0 10px;

    font-family:
        Arial, sans-serif;

    font-size: 22px;

    font-weight: 600;

    color: #333333;
}


.alcances-contenido p {

    font-family:
        Arial, sans-serif;

    font-size: 18px;

    line-height: 1.8;

    color: #666666;
}


.alcances-contenido strong {

    color: #333333;
}


/* ==================================================
   SECCIONES INTERNAS
   ================================================== */

.nosotros-seccion-interna {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 70px;
    padding: 40px 40px 60px;
    box-sizing: border-box;
    height: auto;
    min-height: 480px;
    overflow: visible;
}





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

.nosotros-titulo-interno {

    font-family:
        Arial, sans-serif;

    font-size: 32px;

    font-weight: 600;

    letter-spacing: 3px;

    color: #006dcc;
}


.nosotros-linea-interna {

    width: 80px;

    height: 4px;

    margin-top: 10px;

    background-color: #B8B8B8;
}


/* ==================================================
   MISIÓN
   ================================================== */

.mision-contenido {
    margin-top: 35px;
    display: grid;
    grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}




/* ==================================================
   LETRAS RISECA
   ================================================== */

.mision-letras {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.mision-letras > div {

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        10px 15px;

    border-left:
        3px solid #B8B8B8;

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


.mision-letras > div:hover {

    border-left-color:
        #006dcc;

    transform:
        translateX(6px);
}


.mision-letras strong {

    width: 32px;

    font-family:
        Arial, sans-serif;

    font-size: 30px;

    font-weight: 700;

    color: #006dcc;
}


.mision-letras span {

    font-family:
        Arial, sans-serif;

    font-size: 20px;

    font-weight: 600;

    color: #444444;
}


/* ==================================================
   TEXTO MISIÓN
   ================================================== */
.mision-texto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 25px 30px;
    min-width: 0;
    width: 100%;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
}


.mision-texto p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    padding: 0 0 22px;
    margin: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
    overflow-wrap: break-word;
    box-sizing: border-box;
    border-bottom: 1px solid #d5e0eb;
}





/* ==================================================
   VISIÓN
   ================================================== */

.vision-bloque {

    width: 100%;

    max-width: 1400px;

    margin:
        0 auto 70px;

    padding:
        40px 45px;

    display: flex;

    align-items: center;

    gap: 30px;

    background-color: #006dcc;

    color: white;

    opacity: 0;

    transform:
        scale(0.97);

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


.seccion-nosotros.activa .vision-bloque {

    opacity: 1;

    transform:
        scale(1);
}


/* ==================================================
   ICONO VISIÓN
   ================================================== */

.vision-icono {

    width: 70px;

    height: 70px;

    min-width: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        2px solid white;

    font-size: 27px;
}


/* ==================================================
   TEXTO VISIÓN
   ================================================== */

.vision-bloque span {

    font-family:
        Arial, sans-serif;

    font-size: 30px;

    font-weight: 700;

    letter-spacing: 3px;
}


.vision-bloque h2 {

    margin-top: 8px;

    font-family:
        Arial, sans-serif;

    font-size: 25px;

    font-weight: 500;

    line-height: 1.4;
}


/* ==================================================
   VALORES
   ================================================== */

.valores {

    padding-bottom: 60px;
}


.valores-grid {

    margin-top: 35px;

    display: grid;

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

    gap: 25px;
}


/* ==================================================
   TARJETAS VALORES
   ================================================== */

.valor-card {

    padding:
        35px 30px;

    background-color: #f5f7f9;

    border-top:
        4px solid #006dcc;

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


.valor-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.10);
}


.valor-card i {

    font-size: 28px;

    color: #006dcc;

    margin-bottom: 20px;
}


.valor-card h3 {

    margin-bottom: 12px;

    font-family:
        Arial, sans-serif;

    font-size: 20px;

    letter-spacing: 1.5px;

    color: #333333;
}


.valor-card p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: #666666;
}






/* ==================================================
   TRANSICIÓN INICIO / NOSOTROS
   ================================================== */

.video-principal {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        visibility 0.8s ease;
}

.video-principal.oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50px);
}































.seccion-nosotros::after {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    left: -170px;
    bottom: 150px;

    border: 1px solid rgba(184, 184, 184, 0.18);

    transform: rotate(45deg);

    pointer-events: none;

    z-index: 0;
}



/* ==================================================
   NOSOTROS - 1366 x 768
   ================================================== */
/* ==================================================
   NOSOTROS - ADAPTACIONES
   ================================================== */


/* ==================================================
   1366 x 768
   ================================================== */

@media (max-width: 1366px) and (max-height: 768px) {

    .seccion-nosotros {

        top: 99px;

        height:
            calc(100vh - 99px);

        padding:
            40px 5% 0px;

        overflow-x: hidden;

        overflow-y: auto;

        scrollbar-width: auto;

        scrollbar-color: auto;
    }
}


/* ==================================================
   1200px
   ================================================== */

@media (max-width: 1200px) {

    .seccion-nosotros {

        top: 99px;

        height:
            calc(100vh - 99px);

        padding:
            40px 5% 0px;

   
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;

    }
}


/* ==================================================
   900px
   ================================================== */

@media (max-width: 900px) {

    .seccion-nosotros {

        top: 150px;

        height:
            calc(100vh - 150px);

        padding:
            35px 4% 0px;

        
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;

    }
}



/* ==================================================
   SCROLL NATIVO - SECCIÓN NOSOTROS
   ================================================== */

.seccion-nosotros {
    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-gutter: stable;

    scrollbar-width: auto;
    scrollbar-color: auto;
    -ms-overflow-style: auto;
}




/* ==================================================
   1366 x 768
   ================================================== */

@media (max-width: 1366px) and (max-height: 768px) {

    .scroll-nosotros {

        top: 99px;

        right: 8px;

        bottom: 0;
    }
}


/* ==================================================
   1200px
   ================================================== */

@media (max-width: 1200px) {

    .scroll-nosotros {

        top: 99px;

        right: 8px;

        bottom: 0;
    }
}


/* ==================================================
   900px
   ================================================== */

@media (max-width: 900px) {

    .scroll-nosotros {

        top: 150px;

        right: 6px;

        bottom: 0;

        width: 12px;
    }


    .scroll-nosotros-thumb {

        width: 12px;
    }
}




/* ==================================================
   CIERRE RISECA - CORRECCIÓN
   ================================================== */

.cierre-riseca {

    position: relative;

    /*
       EL CIERRE OCUPA TODO EL ANCHO
       DEL CONTENEDOR NOSOTROS
    */
    width: calc(100% + 12vw) !important;
margin-left: -6vw !important;

    margin-right: 0 !important;

    margin-top: 150px !important;
    margin-bottom: 0 !important;

    height: 350px;

    min-height: 350px;

    padding: 0 !important;

    left: 0 !important;

    right: auto !important;

    overflow: hidden;

    background-color: #0057a8;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

}

/* ==================================================
   VIDEO DE CIERRE
   ================================================== */

.video-cierre {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    display: block !important;

    object-fit: cover !important;

    object-position: center center;

    z-index: 1;

}


/* ==================================================
   CAPA AZUL
   ================================================== */

.cierre-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /*
       MÁS TRANSPARENTE PARA QUE
       SE VEA EL VIDEO
    */

    background:
        linear-gradient(
            90deg,
            rgba(0, 55, 110, 0.55),
            rgba(0, 87, 168, 0.42),
            rgba(0, 55, 110, 0.55)
        );

    z-index: 2;

}


/* ==================================================
   CONTENIDO
   ================================================== */

.cierre-contenido {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;


transform: translateY(-45px);
}



/* ==================================================
   LOGO
   ================================================== */

.logo-cierre {

    width: 160px;

    max-width: 35vw;

    height: auto;

    margin: 0 0 8px 0;

   

}


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

.texto-cierre {

    color: #ffffff;

    font-size: 19px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;

}


.atencion-cierre {
    margin-top: 6px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: none;
}


/* ==================================================
   LINEA CENTRAL
   ================================================== */

.linea-cierre {

    width: 30%;

    height: 3px;

    margin: 18px 0 12px;

    background-color: #00bfff;

    box-shadow:
        0 0 8px rgba(0, 191, 255, 0.7);

}


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

.menu-cierre {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 34px;

    flex-wrap: wrap;

    transform: translateY(10px);

}


.menu-cierre a {

    position: relative;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 1.5px;

    transition:
        color 0.3s ease,
        transform 0.3s ease;

}


.menu-cierre a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -7px;

    width: 0;

    height: 2px;

    background-color: #00bfff;

    transform: translateX(-50%);

    transition: width 0.3s ease;

}


.menu-cierre a:hover {

    color: #00bfff;

    transform: translateY(-2px);

}


.menu-cierre a:hover::after {

    width: 100%;

}


/* ==================================================
   LINEAS GEOMETRICAS
   ================================================== */

.cierre-linea {

    position: absolute;

    z-index: 5;

    background-color: #00bfff;

    box-shadow:
        0 0 8px rgba(0, 191, 255, 0.65);

}


/* ==================================================
   LINEA SUPERIOR
   ================================================== */

.cierre-linea-1 {

    top: 38px;

    left: 0;

    width: 38%;

    height: 2px;

}


/* ==================================================
   LINEA INFERIOR
   ================================================== */

.cierre-linea-2 {

    right: 0;

    bottom: 42px;

    width: 32%;

    height: 2px;

}


/* ==================================================
   LINEA VERTICAL IZQUIERDA
   ================================================== */

.cierre-linea-3 {

    top: 0;

    left: 12%;

    width: 2px;

    height: 48%;

}


/* ==================================================
   LINEA VERTICAL DERECHA
   ================================================== */

.cierre-linea-4 {

    right: 14%;

    bottom: 0;

    width: 2px;

    height: 42%;

}






/* ==================================================
   LOGOTIPOS DE REDES SOCIALES
   ================================================== */

.redes-cierre {

    position: absolute;
    left: 0;
    bottom: 50px;
    width: 100%;

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

    z-index: 25;
}

.red-social {

    width: 38px;
    height: 38px;

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

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

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;

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

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

.red-social:hover {

    color: #ffffff;
    background: #00a8ff;
    transform: translateY(-4px);
}

@media (max-width: 600px) {

    .redes-cierre {
        gap: 14px;
        bottom: 50px;
    }

    .red-social {
        width: 33px;
        height: 33px;
        font-size: 16px;
    }
}








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

.copyright-cierre {
    position: absolute;
    z-index: 20;
    left: 0;
    bottom: 25px;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    padding: 0 20px;
    box-sizing: border-box;
    display: block;
}

/* ==================================================
   ANIMACIÓN LINEAS
   ================================================== */

.cierre-linea-1 {

    animation:
        lineaCierreHorizontal 1.2s ease-out both;

}


.cierre-linea-2 {

    animation:
        lineaCierreHorizontal 1.4s ease-out both;

}


.cierre-linea-3 {

    animation:
        lineaCierreVertical 1.2s ease-out both;

}


.cierre-linea-4 {

    animation:
        lineaCierreVertical 1.4s ease-out both;

}


@keyframes lineaCierreHorizontal {

    from {

        width: 0;

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


@keyframes lineaCierreVertical {

    from {

        height: 0;

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


/* ==================================================
   1200px
   ================================================== */

@media (max-width: 1200px) {

    .cierre-riseca {

  width: calc(100% + 10vw) !important;
margin-left: -5vw !important;

        margin-top: 140px !important;
        margin-bottom: 0 !important;

        height: 450px;

        min-height: 450px;

    }

    .logo-cierre {

        width: 160px;

    }

    .menu-cierre {

        gap: 25px;

    }

}


/* ==================================================
   900px
   ================================================== */

@media (max-width: 900px) {

    .cierre-riseca {

       width: calc(100% + 8vw) !important;
margin-left: -4vw !important;

        margin-top: 100px !important;
        margin-bottom: 0 !important;

        height: 430px;

        min-height: 430px;

    }

    .logo-cierre {

        width: 150px;

    }

    .texto-cierre {

        font-size: 15px;

        letter-spacing: 2.5px;

    }

    .menu-cierre {

        gap: 18px;

        padding: 0 30px;

    }

    .menu-cierre a {

        font-size: 11px;

    }

    .cierre-linea-1 {

        width: 25%;

    }

    .cierre-linea-2 {

        width: 22%;

    }

    .cierre-linea-3 {

        left: 7%;

    }

    .cierre-linea-4 {

        right: 8%;

    }

}








/* =========================================================
   RISECA — AUMENTAR INTENSIDAD DE LOS FONDOS
   QUIÉNES SOMOS / MISIÓN / VALORES
   ========================================================= */


/* ---------------------------------------------------------
   QUIÉNES SOMOS
   Más azul, diagonales más visibles y contraste
   --------------------------------------------------------- */

.nosotros-contenido {
    background-color: #f0f7ff;

    background-image:
        radial-gradient(
            ellipse at 0% 0%,
            rgba(0, 109, 204, 0.22),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(89, 171, 235, 0.20),
            transparent 42%
        ),
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 54px,
            rgba(0, 109, 204, 0.09) 55px,
            transparent 58px
        );

    border-top: 1px solid rgba(0, 109, 204, 0.18);
    border-bottom: 1px solid rgba(0, 109, 204, 0.20);
}




/* ---------------------------------------------------------
   VALORES
   Fondo más marcado y luz azul detrás de las tarjetas
   --------------------------------------------------------- */

.nosotros-seccion-interna.valores {
    background-color: #e9f2fc;

    background-image:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255, 255, 255, 0.95),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 0% 100%,
            rgba(0, 109, 204, 0.19),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(0, 109, 204, 0.14),
            transparent 48%
        ),
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 48px,
            rgba(0, 109, 204, 0.075) 49px,
            transparent 52px
        );

    border-top: 1px solid rgba(0, 109, 204, 0.22);
}


/* ---------------------------------------------------------
   TARJETAS DE VALORES
   Más contraste respecto al fondo
   --------------------------------------------------------- */

.nosotros-seccion-interna.valores .valor-card {
    background-color: #ffffff;

    border: 1px solid rgba(0, 109, 204, 0.20);

    box-shadow:
        0 8px 22px rgba(20, 66, 110, 0.10);
}






/* =========================================================
   RISECA — FONDO DEGRADADO DE VISIÓN
   ========================================================= */

.vision-bloque {
    background: linear-gradient(
        135deg,
        #006dcc 0%,
        #2589d8 45%,
        #70b8ec 100%
    );
}




/* =========================================================
   RISECA — FONDO GENERAL DE LA SECCIÓN NOSOTROS
   ========================================================= */



/* Ajuste para pantallas táctiles y móviles */
@media (max-width: 768px) {
    .seccion-nosotros {
        background-attachment: scroll;
        background-position: center;
    }
}













/* =========================================================
   RISECA — AUMENTAR INTENSIDAD DE LOS FONDOS
   QUIÉNES SOMOS / MISIÓN / VALORES
   ========================================================= */


/* ---------------------------------------------------------
   QUIÉNES SOMOS
   Más azul, diagonales más visibles y contraste
   --------------------------------------------------------- */

.nosotros-contenido {
    background-color: #f0f7ff;

    background-image:
        radial-gradient(
            ellipse at 0% 0%,
            rgba(0, 109, 204, 0.22),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(89, 171, 235, 0.20),
            transparent 42%
        ),
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 54px,
            rgba(0, 109, 204, 0.09) 55px,
            transparent 58px
        );

    border-top: 1px solid rgba(0, 109, 204, 0.18);
    border-bottom: 1px solid rgba(0, 109, 204, 0.20);
}


/* ---------------------------------------------------------
   MISIÓN
   Cuadrícula técnica más visible y fondo azul grisáceo
   --------------------------------------------------------- */

.nosotros-seccion-interna:not(.valores) {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 70px;
    padding: 45px 40px 60px;
    box-sizing: border-box;
    min-height: 480px;
    height: auto;

    background-color: rgba(237, 244, 251, 0.90);
    background-image:
        radial-gradient(
            ellipse at 100% 0%,
            rgba(0, 109, 204, 0.17),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 0% 100%,
            rgba(105, 177, 231, 0.16),
            transparent 42%
        );

    border-top: 1px solid rgba(0, 109, 204, 0.18);
    border-bottom: 1px solid rgba(0, 109, 204, 0.18);
}

/* ---------------------------------------------------------
   VALORES
   Fondo más marcado y luz azul detrás de las tarjetas
   --------------------------------------------------------- */

.nosotros-seccion-interna.valores {
    background-color: #e9f2fc;

    background-image:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255, 255, 255, 0.95),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 0% 100%,
            rgba(0, 109, 204, 0.19),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(0, 109, 204, 0.14),
            transparent 48%
        ),
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 48px,
            rgba(0, 109, 204, 0.075) 49px,
            transparent 52px
        );

    border-top: 1px solid rgba(0, 109, 204, 0.22);
}


/* ---------------------------------------------------------
   TARJETAS DE VALORES
   Más contraste respecto al fondo
   --------------------------------------------------------- */

.nosotros-seccion-interna.valores .valor-card {
    background-color: #ffffff;

    border: 1px solid rgba(0, 109, 204, 0.20);

    box-shadow:
        0 8px 22px rgba(20, 66, 110, 0.10);
}





/* =========================================================
   RISECA — FONDO INDUSTRIAL DE NOSOTROS
   Conserva las figuras geométricas originales
   ========================================================= */

.seccion-nosotros {
background-color: #f4f8fc;

background-image:
    url("./imagenes/fondo-nosotros.png"),
    linear-gradient(135deg, rgba(244, 248, 252, 0.92), rgba(232, 238, 244, 0.92)),
    linear-gradient(rgba(0, 87, 168, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 87, 168, 0.035) 1px, transparent 1px);

background-size:
    cover,
    cover,
    220px 220px,
    220px 220px;

background-position:
    center,
    center,
    0 0,
    110px 110px;

background-repeat:
    no-repeat,
    no-repeat,
    repeat,
    repeat;

    background-attachment: scroll;
}

/* Mantener los fondos propios de cada subsección */
.nosotros-contenido {
    background-color: rgba(240, 247, 255, 0.78);
}

.nosotros-seccion-interna:not(.valores) {
    background-color: rgba(237, 244, 251, 0.80);
}

.nosotros-seccion-interna.valores {
    background-color: rgba(233, 242, 252, 0.80);
}












/* ==================================================
   SECCIÓN SERVICIOS RISECA
   ================================================== */

.seccion-servicios {

    width: 100%;
    box-sizing: border-box;

    padding: 65px 6% 0;

    position: absolute;
    top: 104px;
    left: 0;

    height: calc(100vh - 104px);

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    background:
        linear-gradient(
            135deg,
            rgba(3, 38, 78, 0.97),
            rgba(0, 91, 165, 0.94)
        );

    color: #ffffff;

    display: none;

}

/* ==================================================
   ENCABEZADO DE SERVICIOS
   ================================================== */

.servicios-encabezado {

    text-align: center;

    margin-bottom: 45px;

}

.servicios-etiqueta {

    display: block;

    color: #9dcdf5;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 12px;

}

.servicios-encabezado h2 {

    font-size: 38px;

    font-weight: 800;

    letter-spacing: 2px;

    margin: 0;

}

.servicios-linea {

    width: 90px;

    height: 4px;

    background: #58b5f5;

    margin: 18px auto;

    border-radius: 5px;

}

.servicios-encabezado p {

    color: #d7eaff;

    font-size: 19px;

    margin: 0;

}


/* ==================================================
   PRESENTACIÓN
   ================================================== */

.servicios-presentacion {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 30px 35px;

    margin-bottom: 45px;

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

    border-left: 5px solid #65bdff;

    border-radius: 8px;

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

}

.presentacion-icono {

    min-width: 75px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: #ffffff;

    font-size: 35px;

}

.presentacion-texto h3 {

    font-size: 25px;

    margin: 0 0 12px;

    letter-spacing: 1px;

}

.presentacion-texto p {

    color: #e0efff;

    font-size: 17px;

    line-height: 1.7;

    margin: 0;

}


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

.servicios-grid {

    display: grid;

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

    gap: 22px;

}

.servicio-card {

    position: relative;

    overflow: hidden;

    min-height: 0;

    box-sizing: border-box;

    padding: 22px;

    background: #ffffff;

    color: #183653;

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, 0.5);

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

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;

}





/* ==================================================
   IMÁGENES DE LAS TARJETAS DE SERVICIOS
   ================================================== */

.servicio-imagen {
    width: 100%;
    height: 270px;
    margin-bottom: 22px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 109, 204, 0.15);
}

.servicio-imagen img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.servicio-card:hover .servicio-imagen img {
    transform: scale(1.05);
}







.servicio-card:hover {

    transform: translateY(-7px);

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

    background: #f1f8ff;

}

.servicio-encabezado {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.servicio-icono {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e4f2ff;
    color: #0874c5;
    border-radius: 12px;
    font-size: 27px;
}

.servicio-card h3 {
    position: relative;
    flex: 1;
    font-size: 20px;
    line-height: 1.3;
    margin: 0;
    max-width: none;
    color: #064b85;
}
.servicio-linea {

    width: 55px;

    height: 3px;

    background: #1689d8;

    margin: 15px 0;

    border-radius: 5px;

}

.servicio-card p {

    font-size: 17px;

    line-height: 1.7;

    color: #52677a;

    margin: 0;

}




.servicio-numero {
    position: absolute;
    top: 12px;
    right: 18px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.95);
    font-size: 43px;
    font-weight: 900;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}









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

.servicios-complementarios {

    margin-top: 75px;

    padding: 45px 35px;

    background: rgba(0, 29, 65, 0.42);

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 10px;

}

.complementarios-titulo {

    text-align: center;

    margin-bottom: 35px;

}

.complementarios-titulo span {

    color: #91cfff;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;

}

.complementarios-titulo h2 {

    font-size: 27px;

    margin: 10px 0 0;

}

.complementarios-grid {

    display: grid;

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

    gap: 18px;

}

.complementario-item {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 75px;

    padding: 15px;

    box-sizing: border-box;

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

    border-radius: 7px;

    transition: background 0.3s ease;

}

.complementario-item:hover {

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

}

.complementario-item i {

    color: #75c6ff;

    font-size: 23px;

    min-width: 28px;

    text-align: center;

}

.complementario-item span {

    font-size: 14px;

    font-weight: bold;

    line-height: 1.4;

}









/* ==================================================
   IMÁGENES DE SERVICIOS COMPLEMENTARIOS
   ================================================== */

.complementario-imagen {
    width: 100%;
    height: 135px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
}

.complementario-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.complementario-item:hover .complementario-imagen img {
    transform: scale(1.07);
}



















/* ==================================================
   PÓLIZAS DE MANTENIMIENTO
   ================================================== */

.servicios-polizas {

    margin-top: 65px;

    padding: 40px;

    background:
        linear-gradient(
            120deg,
            #ffffff,
            #e8f4ff
        );

    color: #173b5d;

    border-radius: 10px;

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

}

.polizas-icono {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0878c9;

    color: #ffffff;

    border-radius: 50%;

    font-size: 29px;

    margin-bottom: 20px;

}

.polizas-contenido > span {

    color: #0878c9;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;

}

.polizas-contenido h2 {

    font-size: 30px;

    margin: 10px 0;

    color: #073e70;

}

.polizas-contenido p {

    font-size: 18px;

    line-height: 1.7;

    color: #52677a;

    margin-bottom: 30px;

}






.polizas-grid {

    display: grid;

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

    gap: 25px;

    position: relative;

    margin-top: 35px;

}





/* LÍNEA DE CONEXIÓN ENTRE LAS TRES ETAPAS */

.polizas-grid::before {

    content: "";

    position: absolute;

    top: 85px;

    left: 16%;

    width: 68%;

    height: 3px;

    background: linear-gradient(
        90deg,
        #0878c9,
        #56b6ed,
        #0878c9
    );

    z-index: 0;

}











.poliza-item {

    padding: 22px;

    background: #ffffff;

    border: 1px solid #d8e8f5;

    border-radius: 10px;

    position: relative;

    z-index: 1;

    box-shadow: 0 5px 15px rgba(0, 55, 100, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}

.poliza-item:hover {

    transform: translateY(-7px);

    box-shadow: 0 12px 25px rgba(0, 70, 130, 0.15);

}

.poliza-item i {

    color: #0878c9;

    font-size: 26px;

    margin-bottom: 15px;

}

.poliza-item h3 {

    color: #07528e;

    font-size: 18px;

    margin: 0 0 10px;

}

.poliza-item p {

    color: #5c7082;

    font-size: 16px;

    line-height: 1.6;

    margin: 0;

}




/* ==================================================
   FOTOGRAFÍAS DE PÓLIZAS DE MANTENIMIENTO
   ================================================== */


.poliza-imagen {

    width: 100%;

    height: 170px;

    overflow: hidden;

    border-radius: 8px;

    margin-bottom: 20px;

}

.poliza-imagen img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}

.poliza-item:hover .poliza-imagen img {

    transform: scale(1.08);

}





/* ==================================================
   RISECA - ADAPTACIÓN RESPONSIVE DE SERVICIOS
   RESOLUCIONES MENORES A 1920 PX
   ================================================== */


/* ==================================================
   LAPTOP Y MONITORES MEDIANOS
   1366 x 768
   1280 x 720
   ================================================== */

@media (max-width: 1365px) {

    .seccion-servicios {
        padding: 60px 5% 0;
    }

    .servicios-encabezado {
        margin-bottom: 38px;
    }

    .servicio-card {
        padding: 25px;
    }

    .servicio-imagen {
        height: 220px;
    }

    .complementarios-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

/* ==================================================
   TABLET HORIZONTAL
   1024 x 768
   ================================================== */

@media (max-width: 1200px) {

    .seccion-servicios {
        padding: 55px 5% 0;
    }

    .servicio-card {
        padding: 23px;
    }

    .servicio-imagen {
        height: 210px;
    }

    .complementarios-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .servicios-polizas {
        padding: 35px;
    }

}


/* ==================================================
   TABLET VERTICAL
   768 x 1024
   ================================================== */

@media (max-width: 900px) {

    .seccion-servicios {
        padding: 45px 4% 0;
    }

    .servicios-encabezado {
        margin-bottom: 35px;
    }

    .servicios-encabezado h2 {
        font-size: 31px;
    }

    .servicios-encabezado p {
        font-size: 17px;
    }

    .servicios-presentacion {
        padding: 25px;
        gap: 18px;
        margin-bottom: 35px;
    }

    .presentacion-icono {
        min-width: 65px;
        height: 65px;
        font-size: 30px;
    }

    .presentacion-texto h3 {
        font-size: 22px;
    }

    .presentacion-texto p {
        font-size: 16px;
    }

    .servicios-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .servicio-imagen {
        height: 250px;
    }

    .complementarios-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .polizas-grid {
        grid-template-columns: 1fr;
    }

    .polizas-grid::before {
        display: none;
    }

    .poliza-imagen {
        height: 200px;
    }

    .servicios-polizas {
        padding: 28px;
    }

    .polizas-contenido h2 {
        font-size: 25px;
    }

}


/* ==================================================
   CELULAR GRANDE
   430 x 932
   ================================================== */

@media (max-width: 600px) {

    .seccion-servicios {
        padding: 35px 4% 0;
    }

    .servicios-encabezado {
        margin-bottom: 28px;
    }

    .servicios-etiqueta {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .servicios-encabezado h2 {
        font-size: 27px;
        letter-spacing: 1px;
    }

    .servicios-encabezado p {
        font-size: 15px;
        line-height: 1.5;
    }

    .servicios-presentacion {
        flex-direction: column;
        text-align: center;
        padding: 22px 18px;
        gap: 15px;
        margin-bottom: 30px;
    }

    .presentacion-icono {
        min-width: 58px;
        width: 58px;
        height: 58px;
        font-size: 27px;
    }

    .presentacion-texto h3 {
        font-size: 19px;
    }

    .presentacion-texto p {
        font-size: 15px;
        line-height: 1.6;
    }

    .servicios-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .servicio-card {
        padding: 20px;
    }

    .servicio-imagen {
        height: 200px;
    }

    .servicio-encabezado {
        gap: 10px;
    }

    .servicio-icono {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        font-size: 23px;
    }

    .servicio-card h3 {
        font-size: 16px;
    }

    .servicio-numero {
        font-size: 35px;
        top: 10px;
        right: 14px;
    }

    .servicios-complementarios {
        margin-top: 45px;
        padding: 25px 18px;
    }

    .complementarios-titulo {
        margin-bottom: 25px;
    }

    .complementarios-titulo h2 {
        font-size: 23px;
    }

    .complementarios-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .complementario-imagen {
        height: 150px;
    }

    .servicios-polizas {
        margin-top: 45px;
        padding: 22px 18px;
    }

    .polizas-contenido h2 {
        font-size: 22px;
    }

}


/* ==================================================
   CELULAR MEDIANO Y PEQUEÑO
   390 x 844
   320 x 568
   ================================================== */

@media (max-width: 400px) {

    .seccion-servicios {
        padding-left: 3%;
        padding-right: 3%;
    }

    .servicios-encabezado h2 {
        font-size: 25px;
    }

    .servicios-presentacion {
        padding: 20px 15px;
    }

    .servicio-card {
        padding: 17px;
    }

    .servicio-imagen {
        height: 175px;
    }

    .servicio-card h3 {
        font-size: 15px;
    }

    .servicio-numero {
        font-size: 30px;
    }

    .complementarios-titulo h2 {
        font-size: 21px;
    }

    .complementario-imagen {
        height: 125px;
    }

    .servicios-polizas {
        padding: 20px 15px;
    }

    .polizas-contenido h2 {
        font-size: 21px;
    }

}


/* ==================================================
   CELULAR PEQUEÑO
   320 x 568
   ================================================== */

@media (max-width: 360px) {

    .servicios-encabezado h2 {
        font-size: 23px;
    }

    .servicios-encabezado p {
        font-size: 14px;
    }

    .servicio-imagen {
        height: 155px;
    }

    .servicio-icono {
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        font-size: 21px;
    }

    .servicio-card h3 {
        font-size: 14px;
    }

    .complementario-item span {
        font-size: 13px;
    }

}













/* ==================================================
   SERVICIOS - AJUSTE DE POSICIÓN BAJO EL MENÚ
   ================================================== */

/* TABLET VERTICAL */
@media (max-width: 900px) {
    .seccion-servicios {
        top: 205px;
        height: calc(100vh - 205px);
    }
}

/* CELULAR GRANDE Y MEDIANO */
@media (max-width: 600px) {
    .seccion-servicios {
        top: 245px;
        height: calc(100vh - 245px);
    }
}

/* CELULAR PEQUEÑO */
@media (max-width: 360px) {
    .seccion-servicios {
        top: 285px;
        height: calc(100vh - 285px);
    }
}





























/* ==================================================
   SECCIÓN PROYECTOS
   ================================================== */

.seccion-proyectos {

    position: absolute;
    top: 104px;
    left: 0;

    width: 100%;
    height: calc(100vh - 104px);

    padding: 80px 6% 0;
    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;


background-color: #f4f8fc;
background-image:
    url("./imagenes/fondo-nosotros.png"),
    linear-gradient(135deg, rgba(244, 248, 252, 0.92), rgba(232, 238, 244, 0.92)),
    linear-gradient(rgba(0, 87, 168, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 87, 168, 0.035) 1px, transparent 1px);
background-size:
    cover,
    cover,
    220px 220px,
    220px 220px;
background-position:
    center,
    center,
    0 0,
    110px 110px;
background-repeat:
    no-repeat,
    no-repeat,
    repeat,
    repeat;

}

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

.proyectos-encabezado {

    text-align: center;
    max-width: 900px;
    margin: 0 auto 65px;

}

.proyectos-etiqueta {

    display: block;
    color: #0874bd;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 15px;

}

.proyectos-encabezado h2 {

    color: #123451;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 3px;
    margin: 0;

}

.proyectos-linea {

    width: 100px;
    height: 5px;
    margin: 22px auto;
    background: linear-gradient(
        90deg,
        #0874bd,
        #65b5e5
    );

}

.proyectos-encabezado p {

    color: #536779;
    font-size: 22px;
    line-height: 1.7;
    margin: 0;

}


/* ==================================================
   PRESENTACIÓN DE PROYECTOS
   ================================================== */

.proyectos-presentacion {

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

    max-width: 1250px;
    min-height: 300px;

    margin: 0 auto 100px;
    padding: 55px 65px;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #07365d,
            #075b96,
            #087fc2
        );

    box-shadow: 0 18px 40px rgba(0, 35, 65, 0.18);

}

.proyectos-presentacion::before {

    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    right: 10%;
    top: -180px;

    border: 2px solid rgba(255,255,255,0.12);
    transform: rotate(45deg);

}

.proyectos-presentacion-texto {

    position: relative;
    z-index: 2;
    max-width: 720px;

}

.proyectos-presentacion-texto > span {

    color: #83cef5;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;

}

.proyectos-presentacion-texto h3 {

    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    margin: 15px 0 22px;

}

.proyectos-presentacion-texto p {

    color: rgba(255,255,255,0.88);
    font-size: 20px;
    line-height: 1.8;
    margin: 12px 0;

}

.proyectos-presentacion-decoracion {

    position: relative;
    z-index: 2;

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

    min-width: 180px;
    color: rgba(255,255,255,0.85);

}

.proyectos-presentacion-decoracion i {

    font-size: 100px;
    margin-bottom: 15px;

}

.proyectos-presentacion-decoracion span {

    font-size: 22px;
    font-weight: 800;
    letter-spacing: 5px;

}


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

.proyectos-clientes {

    max-width: 1400px;
    margin: 0 auto;

}

.clientes-encabezado {

    text-align: center;
    margin-bottom: 55px;

}

.clientes-encabezado > span {

    color: #0874bd;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;

}

.clientes-encabezado h2 {

    color: #123451;
    font-size: 32px;
    font-weight: 800;
    margin: 15px 0;

}

.clientes-encabezado p {

    color: #536779;
    font-size: 20px;
    line-height: 1.7;

}


/* ==================================================
   GALERÍA DE LOGOTIPOS
   ================================================== */

.clientes-grid {

    display: grid;

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

    gap: 22px;

}

.cliente-logo {

    min-height: 155px;

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

    padding: 22px;

    background: #ffffff;

    border: 3px solid rgba(218, 165, 32, 0.55);

    box-shadow: 0 7px 20px rgba(20, 50, 75, 0.07);

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

}

.cliente-logo img {

    display: block;

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

    width: auto;
    height: auto;

    object-fit: contain;

    transition: transform 0.35s ease;

}

.cliente-logo:hover {

    transform: translateY(-7px);

    border-color: #1685c7;

    box-shadow: 0 14px 28px rgba(20, 70, 110, 0.15);

}

.cliente-logo:hover img {

    transform: scale(1.06);

}


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

@media (max-width: 1200px) {

    .clientes-grid {

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

    }

    .proyectos-presentacion {

        padding: 45px;

    }

}


@media (max-width: 900px) {

    .seccion-proyectos {

        padding: 65px 5% 0;

    }

    .proyectos-encabezado h2 {

        font-size: 40px;

    }

    .proyectos-presentacion {

        padding: 40px;
        gap: 25px;

    }

    .proyectos-presentacion-texto h3 {

        font-size: 25px;

    }

    .proyectos-presentacion-decoracion i {

        font-size: 75px;

    }

    .clientes-grid {

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

    }

}


@media (max-width: 600px) {

    .seccion-proyectos {

        padding: 50px 5% 0;

    }

    .proyectos-encabezado {

        margin-bottom: 45px;

    }

    .proyectos-encabezado h2 {

        font-size: 32px;

    }

    .proyectos-encabezado p {

        font-size: 16px;

    }

    .proyectos-presentacion {

        flex-direction: column;
        align-items: flex-start;

        padding: 30px 25px;
        margin-bottom: 65px;

    }

    .proyectos-presentacion-texto h3 {

        font-size: 23px;

    }

    .proyectos-presentacion-texto p {

        font-size: 15px;

    }

    .proyectos-presentacion-decoracion {

        align-self: center;
        margin-top: 25px;

    }

    .proyectos-presentacion-decoracion i {

        font-size: 65px;

    }

    .clientes-encabezado h2 {

        font-size: 25px;

    }

    .clientes-encabezado p {

        font-size: 15px;

    }

    .clientes-grid {

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

    }

    .cliente-logo {

        min-height: 115px;
        padding: 12px;

    }

    .cliente-logo img {

        max-height: 75px;

    }

}











/* ==================================================
   VISIBILIDAD DE LAS SECCIONES INDEPENDIENTES
   ================================================== */

.seccion-nosotros,
.seccion-servicios,
.seccion-proyectos,
.seccion-contacto {
    display: none;
}

.seccion-nosotros.activa,
.seccion-servicios.activa,
.seccion-proyectos.activa,
.seccion-contacto.activa {
    display: block;
}












/* ==================================================
   SECCIÓN CONTACTO - CONFIGURACIÓN GENERAL
   ================================================== */

.seccion-contacto {
    position: absolute;
    top: 104px;
    left: 0;
    width: 100%;
    height: calc(100vh - 104px);
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f4f6f8;
    color: #263746;
    font-family: inherit;
    scrollbar-width: thin;
    scrollbar-color: #006dcc #e5e5e5;
}

.seccion-contacto::-webkit-scrollbar {
    width: 9px;
}

.seccion-contacto::-webkit-scrollbar-track {
    background: #e5e5e5;
}

.seccion-contacto::-webkit-scrollbar-thumb {
    background: #006dcc;
    border-radius: 10px;
}


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

.contacto-portada {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    padding: 60px 9%;
    background:
        linear-gradient(90deg, rgba(5, 30, 53, .96), rgba(5, 30, 53, .55)),
        url("imagenes/contacto.jpg") center/cover no-repeat;
    overflow: hidden;
}

.contacto-portada-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(5, 30, 53, .35),
        transparent
    );
}

.contacto-portada-contenido {
    position: relative;
    z-index: 2;
    max-width: 700px;
    color: white;
}

.contacto-etiqueta {
    display: inline-block;
    color: #D6A647;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.contacto-portada-contenido h1 {
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.15;
    margin: 0 0 20px;
    font-weight: 800;
}

.contacto-portada-contenido p {
    max-width: 580px;
    font-size: 18px;
    line-height: 1.7;
    color: #e2e8ee;
    margin-bottom: 30px;
}

.contacto-boton {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 27px;
    background: #D6A647;
    color: #092F52;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: 3px;
    transition: .3s ease;
}

.contacto-boton:hover {
    background: white;
    transform: translateY(-3px);
}


/* ==================================================
   BENEFICIOS
   ================================================== */

.contacto-beneficios {
    padding: 75px 8%;
    background: #092F52;
    color: white;
}

.contacto-encabezado {
    max-width: 800px;
    margin: 0 auto 45px;
    text-align: center;
}

.contacto-encabezado h2 {
    font-size: 30px;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.contacto-encabezado p {
    color: #d4dee8;
    font-size: 16px;
    line-height: 1.7;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 1050px;
    margin: auto;
}

.beneficio-card {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 145px;
    padding: 25px;
    border: 1px solid rgba(214, 166, 71, .65);
    background: rgba(255, 255, 255, .045);
    transition: .3s ease;
}

.beneficio-card:hover {
    background: rgba(255, 255, 255, .10);
    transform: translateY(-4px);
}

.beneficio-numero {
    color: #D6A647;
    font-size: 28px;
    font-weight: 800;
}

.beneficio-card > i {
    color: #D6A647;
    font-size: 27px;
}

.beneficio-card h3 {
    font-size: 17px;
    margin: 0 0 8px;
}

.beneficio-card p {
    color: #cbd6e0;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}


/* ==================================================
   TÍTULOS GENERALES DE CONTACTO
   ================================================== */

.contacto-titulo-seccion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 18px;
    text-align: center;
}

.contacto-titulo-seccion span {
    width: 45px;
    height: 2px;
    background: #D6A647;
}

.contacto-titulo-seccion h2 {
    color: #092F52;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0;
}

.contacto-subtitulo {
    text-align: center;
    color: #697783;
    margin: 0 0 40px;
}


/* ==================================================
   INFORMACIÓN DEL DIRECTOR
   ================================================== */

.contacto-informacion {
    padding: 75px 8%;
    background: white;
}

.contacto-director {
    max-width: 1050px;
    margin: auto;
    display: grid;
    grid-template-columns: .85fr 1.5fr;
    gap: 35px;
    align-items: center;
}

.director-datos {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: #092F52;
    color: white;
    min-height: 130px;
}

.director-datos > i {
    font-size: 38px;
    color: #D6A647;
}

.director-datos h3 {
    font-size: 18px;
    margin: 0 0 8px;
}

.director-datos p {
    color: #d4dee8;
    margin: 0;
}

.director-medios {
    display: grid;
    gap: 14px;
}

.medio-contacto {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 20px;
    background: #f4f6f8;
    color: #263746;
    text-decoration: none;
    transition: .3s ease;
}

.medio-contacto:hover {
    background: #e8edf2;
    transform: translateX(5px);
}

.medio-contacto > i {
    width: 30px;
    text-align: center;
    color: #006dcc;
    font-size: 23px;
}

.medio-contacto div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.medio-contacto span {
    color: #77838d;
    font-size: 13px;
}

.medio-contacto strong {
    font-size: 16px;
}


/* ==================================================
   DATOS DE COMPAÑÍA
   ================================================== */

.contacto-compania {
    padding: 70px 8%;
    background: #edf1f4;
}

.compania-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 1100px;
    margin: 40px auto 0;
}

.compania-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 22px;
    background: white;
    border-bottom: 3px solid #D6A647;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .05);
}

.compania-card > i {
    color: #006dcc;
    font-size: 28px;
}

.compania-card h3 {
    color: #092F52;
    font-size: 15px;
    margin: 0 0 8px;
}

.compania-card p {
    color: #66737e;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}


/* ==================================================
   UBICACIÓN Y MAPA
   ================================================== */

.contacto-ubicacion {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 45px;
    align-items: center;
    padding: 75px 8%;
    background: white;
}

.contacto-ubicacion .contacto-titulo-seccion {
    justify-content: flex-start;
}

.ubicacion-direccion {
    display: flex;
    gap: 18px;
    margin: 35px 0;
}

.ubicacion-direccion > i {
    color: #006dcc;
    font-size: 27px;
}

.ubicacion-direccion h3 {
    color: #092F52;
    margin: 0 0 10px;
}

.ubicacion-direccion p {
    color: #697783;
    line-height: 1.7;
    margin: 0;
}

.ubicacion-boton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #092F52;
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: .3s ease;
}

.ubicacion-boton:hover {
    background: #006dcc;
}

.ubicacion-mapa {
    width: 100%;
    height: 350px;
    overflow: hidden;
    border: 4px solid #edf1f4;
}

.ubicacion-mapa iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


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

.contacto-redes {
    padding: 65px 8%;
    background: #edf1f4;
    text-align: center;
}

.contacto-redes > p {
    color: #697783;
    margin-bottom: 35px;
}

.redes-contacto-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

.red-contacto {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 22px;
    color: #092F52;
    background: white;
    border: 1px solid #dce2e7;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: .3s ease;
}

.red-contacto i {
    color: #006dcc;
    font-size: 22px;
}

.red-contacto:hover {
    border-color: #D6A647;
    transform: translateY(-4px);
}


/* ==================================================
   PIE DE PÁGINA CONTACTO
   ================================================== */

.contacto-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 260px;
    padding: 40px 20px;
    background: #061f36;
    color: white;
    text-align: center;
}

.contacto-footer-logo img {
    width: 180px;
    max-width: 70%;
    height: auto;
}

.contacto-footer-texto {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contacto-footer-texto strong {
    font-size: 14px;
    letter-spacing: 1px;
}

.contacto-footer-texto span {
    color: #D6A647;
    font-size: 13px;
    letter-spacing: 2px;
}

.contacto-footer-copyright {
    color: #aebbc7;
    font-size: 12px;
    margin-top: 15px;
}








/* ==================================================
   CONTACTO RISECA — PORTADA Y BENEFICIOS
   ================================================== */

.seccion-contacto {
    background: #F1F4F8;
    color: #08264A;
    font-family: Arial, Helvetica, sans-serif;
}

/* Evitar que las imágenes excedan su contenedor */

.seccion-contacto img {
    max-width: 100%;
}

/* ==================================================
   1. PORTADA
   ================================================== */

.contacto-portada {
    position: relative;
    min-height: 330px;
    display: flex;
    align-items: center;
    padding: 35px 4.5%;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(3, 34, 66, 0.98) 0%,
            rgba(3, 34, 66, 0.92) 38%,
            rgba(3, 34, 66, 0.30) 75%,
            rgba(3, 34, 66, 0.10) 100%
        ),
        url("imagenes/contacto.jpg") center / cover no-repeat;

    border-bottom: 6px solid #FFB927;
}


.contacto-portada-overlay {
    display: none;
}


.contacto-portada-contenido {
    position: relative;
    z-index: 1;
    width: min(620px, 65%);
    color: #FFFFFF;
}

.contacto-etiqueta {
    display: inline-block;
    margin-bottom: 15px;
    padding: 7px 17px;

    border: 2px solid #FFB927;
    border-radius: 25px;

    color: #FFFFFF;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
}

.contacto-portada h1 {
    margin: 0 0 14px;

    color: #FFFFFF;
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.12;
    font-weight: 900;
    text-transform: uppercase;
}

.contacto-portada p {
    max-width: 510px;
    margin: 0 0 22px;

    color: #FFFFFF;
    font-size: 18px;
    line-height: 1.45;
}

.contacto-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 46px;
    padding: 0 28px;

    border-radius: 28px;
    background: linear-gradient(135deg, #FFD05B, #FFB927);

    color: #08264A;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contacto-boton:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ==================================================
   2. BENEFICIOS
   ================================================== */

.contacto-beneficios {
    padding: 20px 3.3% 24px;

    color: #FFFFFF;

    background:
    radial-gradient(
        circle at 85% 10%,
        rgba(65, 112, 153, 0.35),
        transparent 35%
    ),
    linear-gradient(135deg, #103C63, #0B3153);
}

.contacto-encabezado {
    margin: 0 auto 30px;
    text-align: center;
}

.contacto-encabezado h2 {
    margin: 0 0 5px;

    color: #FFFFFF;
    font-size: clamp(22px, 2.5vw, 30px);
    line-height: 1.2;
    font-weight: 900;
}

.contacto-encabezado p {
    margin: 0;

    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.4;
}

/* Cuatro tarjetas: dos columnas */

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

    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}

.beneficio-card {
    position: relative;

    display: grid;
    grid-template-columns: 2px 58px minmax(0, 1fr);
    align-items: center;
    gap: 16px;

    min-height: 90px;
    padding: 12px 18px;

    border: 3px solid #FFB927;
    border-radius: 16px;

    background: rgba(3, 34, 66, 0.72);
    color: #FFFFFF;

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

.beneficio-card:hover {
    transform: translateY(-3px);
    background: rgba(13, 61, 101, 0.95);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

/* Números 01, 02, 03 y 04 */


.beneficio-numero {
    display: none;
}


/* Separador dorado */

.beneficio-card::before {
    content: "";
    width: 2px;
    height: 56px;

    background: #FFB927;
    grid-column: 2;
    grid-row: 1;
}

/* Iconos */

.beneficio-card > i {
    grid-column: 2;
    grid-row: 1;

    color: #FFB927;
    font-size: 39px;
    text-align: center;
}

/* Texto de las tarjetas */

.beneficio-card > div {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
}

.beneficio-card h3 {
    margin: 0 0 3px;

    color: #FFFFFF;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
}

.beneficio-card p {
    margin: 0;

    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.3;
}

/* ==================================================
   3. ADAPTACIÓN A TABLET
   ================================================== */

@media (max-width: 900px) {

    .contacto-portada {
        min-height: 310px;
        padding: 30px 4%;
    }

    .contacto-portada-contenido {
        width: 75%;
    }

    .beneficio-card {
        grid-template-columns: 48px 2px 42px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .beneficio-numero {
        font-size: 30px;
    }

    .beneficio-card > i {
        font-size: 30px;
    }

    .beneficio-card h3 {
        font-size: 15px;
    }

    .beneficio-card p {
        font-size: 13px;
    }
}

/* ==================================================
   4. ADAPTACIÓN A MÓVILES
   ================================================== */

@media (max-width: 600px) {

    .contacto-portada {
        min-height: 340px;
        padding: 28px 22px;

        background-position: 58% center;
    }

    .contacto-portada-contenido {
        width: 100%;
        max-width: 440px;
    }

    .contacto-portada-overlay {
        background: linear-gradient(
            90deg,
            rgba(3, 34, 66, 0.98),
            rgba(3, 34, 66, 0.76)
        );
    }

    .contacto-etiqueta {
        font-size: 12px;
    }

    .contacto-portada h1 {
        font-size: 29px;
    }

    .contacto-portada p {
        font-size: 16px;
    }

    .contacto-boton {
        padding: 0 20px;
        font-size: 14px;
    }

    .contacto-beneficios {
        padding: 24px 18px;
    }

    .contacto-encabezado h2 {
        font-size: 23px;
    }

    .contacto-encabezado p {
        font-size: 14px;
    }

    .beneficios-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .beneficio-card {
        grid-template-columns: 48px 2px 42px minmax(0, 1fr);
        min-height: 82px;
        padding: 10px;
        gap: 9px;
    }

    .beneficio-numero {
        font-size: 30px;
    }

    .beneficio-card > i {
        font-size: 29px;
    }

    .beneficio-card h3 {
        font-size: 15px;
    }

    .beneficio-card p {
        font-size: 13px;
    }
}






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

.contacto-informacion {
    padding: 22px 3.3%;
    background: #F1F4F8;
    color: #08264A;
}

.contacto-titulo-seccion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 8px;
}

.contacto-titulo-seccion span {
    flex: 1;
    height: 3px;
    background: #FFB927;
}

.contacto-titulo-seccion h2 {
    margin: 0;
    color: #08264A;
    font-size: 26px;
    font-weight: 900;
    text-align: center;
}

.contacto-subtitulo {
    margin: 0 0 18px;
    color: #102D50;
    font-size: 19px;
    font-weight: 600;
    text-align: center;
}

.contacto-director {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 35px;
    max-width: 1250px;
    margin: 0 auto;
}

/* Tarjeta del Director */

.director-datos {
    display: flex;
    align-items: center;
    gap: 25px;
    min-height: 135px;
    padding: 22px 28px;

    background: #FFFFFF;
    border: 2px solid #FFB927;
    border-radius: 14px;
}

.director-datos > i {
    color: #0B477A;
    font-size: 65px;
}

.director-datos h3 {
    margin: 0 0 5px;
    color: #08264A;
    font-size: 21px;
    font-weight: 800;
}

.director-datos p {
    margin: 0;
    color: #183D64;
    font-size: 18px;
}

/* Teléfono, WhatsApp y correo */

.director-medios {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 35px;
    border-left: 3px solid #FFB927;
}

.medio-contacto {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 57px;
    padding: 8px 16px;

    background: #FFFFFF;
    border-radius: 13px;

    color: #08264A;
    text-decoration: none;

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

.medio-contacto:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(8, 38, 74, 0.12);
}

.medio-contacto > i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;
    flex-shrink: 0;

    border-radius: 50%;
    background: #0B477A;
    color: #FFFFFF;
    font-size: 22px;
}

.medio-contacto:nth-child(2) > i {
    background: #19B85A;
}

.medio-contacto div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.medio-contacto span {
    font-size: 14px;
    color: #183D64;
}

.medio-contacto strong {
    font-size: 18px;
    color: #08264A;
    overflow-wrap: anywhere;
}









/* ==================================================
   4. DATOS DE COMPAÑÍA
   ================================================== */

.contacto-compania {
    padding: 18px 3.3% 22px;
    background: #E8EDF3;
}

.contacto-compania .contacto-titulo-seccion {
    margin-bottom: 16px;
}

.compania-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1250px;
    margin: 0 auto;
}

.compania-card {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 90px;
    padding: 15px 20px;

    background: #FFFFFF;
    border: 2px solid #FFB927;
    border-radius: 15px;

    transition: transform 0.25s ease;
}

.compania-card:hover {
    transform: translateY(-3px);
}

.compania-card > i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    flex-shrink: 0;

    border-radius: 50%;
    background: #0B477A;
    color: #FFFFFF;
    font-size: 25px;
}

.compania-card h3 {
    margin: 0 0 5px;
    color: #183D64;
    font-size: 15px;
    font-weight: 700;
}

.compania-card p {
    margin: 0;
    color: #08264A;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}






/* ==================================================
   5. UBICACIÓN Y MAPA
   ================================================== */

.contacto-ubicacion {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 35px;

    padding: 20px 3.3%;
    background: #F1F4F8;
}

.ubicacion-datos {
    padding-right: 30px;
    border-right: 3px solid #FFB927;
}

.ubicacion-datos .contacto-titulo-seccion {
    margin-bottom: 22px;
}

.ubicacion-direccion {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.ubicacion-direccion > i {
    color: #0B477A;
    font-size: 53px;
}

.ubicacion-direccion h3 {
    margin: 0 0 5px;
    color: #08264A;
    font-size: 22px;
}

.ubicacion-direccion p {
    margin: 0;
    color: #183D64;
    font-size: 20px;
    line-height: 1.5;
}

.ubicacion-boton {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 20px;
    border-radius: 12px;

    background: #0B477A;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;

    transition: background 0.25s ease;
}

.ubicacion-boton:hover {
    background: #06294D;
}

.ubicacion-mapa {
    width: 100%;
    height: 205px;
    overflow: hidden;

    border: 3px solid #FFB927;
    border-radius: 14px;
    background: #FFFFFF;
}

.ubicacion-mapa iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}






/* ==================================================
   6. REDES SOCIALES
   ================================================== */

.contacto-redes {
    padding: 20px 3.3% 25px;
    background: #E8EDF3;
    text-align: center;
}

.contacto-redes .contacto-titulo-seccion {
    margin-bottom: 5px;
}

.contacto-redes > p {
    margin: 0 0 18px;
    color: #183D64;
    font-size: 17px;
    font-weight: 600;
}

.redes-contacto-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 15px;
    max-width: 1050px;
    margin: 0 auto;
}

.red-contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;

    color: #08264A;
    text-decoration: none;
}

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

    width: 55px;
    height: 55px;

    border-radius: 50%;
    background: #FFFFFF;
    font-size: 32px;

    transition: transform 0.25s ease;
}

.red-contacto:hover i {
    transform: translateY(-5px) scale(1.08);
}

.red-contacto:nth-child(1) i {
    color: #1877F2;
}

.red-contacto:nth-child(2) i {
    color: #D62976;
}

.red-contacto:nth-child(3) i {
    color: #0A66C2;
}

.red-contacto:nth-child(4) i {
    color: #FF0000;
}

.red-contacto:nth-child(5) i {
    color: #111111;
}

.red-contacto:nth-child(6) i {
    color: #19B85A;
}

.red-contacto span {
    padding: 6px 14px;

    border: 2px solid #FFB927;
    border-radius: 9px;

    background: #FFFFFF;
    color: #08264A;
    font-size: 15px;
    font-weight: 800;
}






/* ==================================================
   7. PIE DE PÁGINA
   ================================================== */

.contacto-footer {
    position: relative;

    display: grid;
    grid-template-columns: 0.8fr 1.5fr 1fr;
    align-items: center;
    gap: 25px;

    min-height: 125px;
    padding: 20px 3.3%;

    background: linear-gradient(135deg, #06294D, #031F3D);
    color: #FFFFFF;

    border-top: 5px solid #FFB927;
}

.contacto-footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contacto-footer-logo img {
    width: 190px;
    max-height: 75px;
    object-fit: contain;
}

.contacto-footer-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;

    padding: 10px 20px;
    border-left: 3px solid #FFB927;
    border-right: 3px solid #FFB927;
    text-align: center;
}

.contacto-footer-texto strong {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.4;
}

.contacto-footer-texto span {
    color: #FFB927;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
}

.contacto-footer-copyright {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}








/* ==================================================
   ADAPTACIÓN RESPONSIVE DE CONTACTO
   ================================================== */

@media (max-width: 900px) {

    .contacto-director {
        gap: 20px;
    }

    .director-datos {
        gap: 15px;
        padding: 18px;
    }

    .director-datos h3 {
        font-size: 17px;
    }

    .director-medios {
        padding-left: 20px;
    }

    .compania-grid {
        gap: 10px;
    }

    .compania-card {
        gap: 10px;
        padding: 12px;
    }

    .compania-card > i {
        width: 43px;
        height: 43px;
        font-size: 21px;
    }

    .compania-card p {
        font-size: 14px;
    }

    .redes-contacto-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 20px;
    }

    .contacto-footer {
        grid-template-columns: 1fr 1.5fr;
    }

    .contacto-footer-copyright {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {

    .contacto-titulo-seccion h2 {
        font-size: 20px;
    }

    .contacto-subtitulo {
        font-size: 15px;
    }

    .contacto-director {
        grid-template-columns: 1fr;
    }

    .director-datos {
        min-height: 105px;
    }

    .director-datos > i {
        font-size: 48px;
    }

    .director-medios {
        padding-left: 0;
        border-left: 0;
    }

    .compania-grid {
        grid-template-columns: 1fr;
    }

    .compania-card {
        min-height: 78px;
    }

    .contacto-ubicacion {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ubicacion-datos {
        padding-right: 0;
        border-right: 0;
    }

    .ubicacion-mapa {
        height: 230px;
    }

    .redes-contacto-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 8px;
    }

    .red-contacto i {
        width: 48px;
        height: 48px;
        font-size: 27px;
    }

    .red-contacto span {
        padding: 5px 8px;
        font-size: 12px;
    }

    .contacto-footer {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 25px 18px;
    }

    .contacto-footer-texto {
        border-left: 0;
        border-right: 0;
        border-top: 2px solid #FFB927;
        border-bottom: 2px solid #FFB927;
    }

    .contacto-footer-copyright {
        grid-column: auto;
        font-size: 11px;
    }
}










/* ==================================================
   FONDOS DE LAS SECCIONES DE CONTACTO
   ================================================== */

.contacto-informacion {
    background: #E5E9EE;
}

.contacto-compania {
    background: #DCE2E9;
}

.contacto-ubicacion {
    background: #E5E9EE;
}

.contacto-redes {
    background: #DCE2E9;
}







/* PIN DE UBICACIÓN */

.contacto-ubicacion .ubicacion-direccion > i {
    color: #E53935;
    font-size: 28px;
}













/* ==================================================
   SECCIÓN COTIZA — CONFIGURACIÓN GENERAL
   ================================================== */

.seccion-cotiza {
    position: absolute;
    top: 104px;
    left: 0;

    width: 100%;
    height: calc(100vh - 104px);

    box-sizing: border-box;

    padding: 0;

    overflow-x: hidden;
    overflow-y: auto;

    background: #C9DFF3;
    color: #08264A;

    font-family: Arial, Helvetica, sans-serif;

    scrollbar-width: thin;
    scrollbar-color: #006dcc #e5e5e5;
}

/* Barra de desplazamiento */

.seccion-cotiza::-webkit-scrollbar {
    width: 9px;
}

.seccion-cotiza::-webkit-scrollbar-track {
    background: #e5e5e5;
}

.seccion-cotiza::-webkit-scrollbar-thumb {
    background: #006dcc;
    border-radius: 10px;
}

/* Control de visibilidad */

.seccion-cotiza {
    display: none;
}

.seccion-cotiza.activa {
    display: block;
}





/* ==================================================
   COTIZA — PORTADA PRINCIPAL
   ================================================== */

.cotiza-portada {
    position: relative;

    width: 100%;
    min-height: 390px;

    display: flex;
    align-items: center;

    padding: 65px 8%;
    box-sizing: border-box;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            rgba(5, 30, 60, 0.96),
            rgba(8, 38, 74, 0.91)
        );

    color: #FFFFFF;
}

/* CONTENIDO DE LA PORTADA */

.cotiza-portada-contenido {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 850px;
}

/* ETIQUETA SUPERIOR */

.cotiza-etiqueta {
    display: inline-block;

    margin-bottom: 18px;
    padding: 8px 16px;

    border: 1px solid #FFB927;
    border-radius: 4px;

    color: #FFB927;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* TÍTULO PRINCIPAL */

.cotiza-portada h1 {
    margin: 0 0 22px;

    color: #FFFFFF;

    font-size: clamp(36px, 5vw, 62px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1px;
}

/* TEXTO DESCRIPTIVO */

.cotiza-portada p {
    max-width: 650px;

    margin: 0 0 30px;

    color: #E1EAF3;

    font-size: 18px;
    line-height: 1.7;
}

/* BOTÓN DE LA PORTADA */

.cotiza-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 50px;
    padding: 0 27px;

    border: none;
    border-radius: 4px;

    background: #FFB927;
    color: #08264A;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;

    text-decoration: none;

    cursor: pointer;

    transition: all 0.3s ease;
}

.cotiza-boton:hover {
    background: #FFFFFF;
    color: #08264A;
    transform: translateY(-3px);
}





/* ==================================================
   COTIZA — CONTENIDO E INTRODUCCIÓN
   ================================================== */

.cotiza-contenido {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
    padding: 65px 6% 80px;

    box-sizing: border-box;
}

/* ENCABEZADO DE LA SOLICITUD */

.cotiza-introduccion {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto 10px;
    text-align: center;
    padding-top: 30px;
}

.cotiza-introduccion h2 {
    margin: 0 0 18px;

    color: #08264A;

    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    padding-top: 10px;
}

.cotiza-introduccion p {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 40px 0 2px;
    text-align: left;
    padding-left: 0;
}

/* DETALLE DECORATIVO */

.cotiza-separador {
    width: 65px;
    height: 4px;

    margin: 0 auto 22px;

    border-radius: 5px;

    background: #FFB927;
}







/* ==================================================
   COTIZA — FORMULARIO
   ================================================== */

/* PANEL PRINCIPAL */

.cotiza-contenido form {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 40px;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #E1E7ED;
    border-radius: 10px;

    box-shadow: 0 8px 30px rgba(8, 38, 74, 0.08);
}

/* ETIQUETAS */

.cotiza-contenido form label {
    display: block;

    margin-bottom: 9px;

    color: #08264A;

    font-size: 14px;
    font-weight: 700;
}

/* CAMPOS DE TEXTO Y SELECTORES */

.cotiza-contenido form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.cotiza-contenido form select,
.cotiza-contenido form textarea {
    width: 100%;
    min-height: 48px;

    padding: 12px 14px;

    box-sizing: border-box;

    border: 1px solid #D5DEE7;
    border-radius: 5px;

    background: #F9FBFD;
    color: #26394B;

    font-family: inherit;
    font-size: 15px;

    outline: none;

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

/* EFECTO AL SELECCIONAR UN CAMPO */

.cotiza-contenido form input:focus,
.cotiza-contenido form select:focus,
.cotiza-contenido form textarea:focus {
    border-color: #006dcc;

    background: #FFFFFF;

    box-shadow: 0 0 0 3px rgba(0, 109, 204, 0.10);
}

/* ÁREA DE DESCRIPCIÓN */

.cotiza-contenido form textarea {
    min-height: 130px;
    resize: vertical;
}

/* ESPACIO ENTRE CAMPOS */

.cotiza-contenido form input,
.cotiza-contenido form select,
.cotiza-contenido form textarea {
    margin-bottom: 22px;
}

/* BOTÓN DE ENVÍO */

.cotiza-contenido form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;
    padding: 0 30px;

    border: none;
    border-radius: 5px;

    background: #006dcc;
    color: #FFFFFF;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition: all 0.3s ease;
}

.cotiza-contenido form button[type="submit"]:hover {
    background: #005aa8;
    transform: translateY(-2px);
}




/* ==================================================
   COTIZA — ADAPTACIÓN PARA TABLETAS
   ================================================== */

@media (max-width: 1200px) {

    .seccion-cotiza {
        top: 99px;
        height: calc(100vh - 99px);
    }

    .cotiza-portada {
        min-height: 350px;
        padding: 55px 6%;
    }

    .cotiza-contenido {
        padding: 55px 5% 65px;
    }

}


/* ==================================================
   COTIZA — ADAPTACIÓN PARA PANTALLAS PEQUEÑAS
   ================================================== */

@media (max-width: 900px) {

    .seccion-cotiza {
        top: 150px;
        height: calc(100vh - 150px);
    }

    .cotiza-portada {
        min-height: 330px;
        padding: 45px 6%;
    }

    .cotiza-portada h1 {
        font-size: 42px;
    }

    .cotiza-portada p {
        font-size: 16px;
    }

    .cotiza-contenido {
        padding: 45px 5% 55px;
    }

    .cotiza-contenido form {
        padding: 30px;
    }

}




/* ==================================================
   COTIZA — ADAPTACIÓN PARA CELULARES
   ================================================== */

@media (max-width: 600px) {

    .cotiza-portada {
        min-height: 350px;
        padding: 40px 7%;
    }

    .cotiza-portada-contenido {
        max-width: 100%;
    }

    .cotiza-portada h1 {
        font-size: 34px;
        line-height: 1.15;
    }

    .cotiza-portada p {
        font-size: 15px;
        line-height: 1.5;
    }

    .cotiza-etiqueta {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .cotiza-boton {
        width: 100%;
        padding: 0 15px;
        font-size: 14px;
    }

    .cotiza-contenido {
        padding: 40px 5% 45px;
    }

    .cotiza-introduccion {
        margin-bottom: 30px;
    }

    .cotiza-introduccion h2 {
        font-size: 27px;
    }

    .cotiza-introduccion p {
        font-size: 15px;
    }

    .cotiza-contenido form {
        padding: 22px 18px;
    }

    .cotiza-contenido form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .cotiza-contenido form select,
    .cotiza-contenido form textarea {
        font-size: 14px;
    }

    .cotiza-contenido form button[type="submit"] {
        width: 100%;
    }
}

/* AJUSTE EXCLUSIVO PARA CELULARES DE 375 PX O MENOS */

@media (max-width: 375px) {

    .cotiza-portada {
        min-height: 420px;
        padding: 35px 6%;
    }

    .cotiza-portada h1 {
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .cotiza-portada p {
        font-size: 14px;
        line-height: 1.45;
    }

    .cotiza-etiqueta {
        font-size: 9px;
        letter-spacing: 1px;
        padding: 7px 9px;
    }

    .cotiza-boton {
        font-size: 13px;
    }
}



/* ==================================================
   COTIZA — PORTADA CON IMAGEN
   ================================================== */

.cotiza-portada {
    position: relative;
    min-height: 430px;

    display: flex;
    align-items: center;

    padding: 65px 8%;

    background:
        linear-gradient(
            90deg,
            rgba(5, 30, 60, 0.97) 0%,
            rgba(5, 30, 60, 0.88) 45%,
            rgba(5, 30, 60, 0.35) 100%
        ),
        url("imagenes/cotiza.jpg")
        center / cover no-repeat;
}

/* CONTENIDO SOBRE LA IMAGEN */

.cotiza-portada-contenido {
    position: relative;
    z-index: 2;

    max-width: 750px;
}

/* LÍNEA AMARILLA INFERIOR */

.cotiza-portada::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background: #FFB927;
}






/* ==================================================
   COTIZA — CONTENEDOR DEL FORMULARIO
   ================================================== */

.cotiza-formulario-contenedor {
   max-width: 1200px;
width: 92%;
margin-left: auto;
margin-right: auto;
    margin: 0 auto 70px;

    padding: 40px;

    box-sizing: border-box;

    background: #F2F4F7;

    border: 2px solid #FFB927;
border-radius: 10px;

    box-shadow: 0 8px 30px rgba(8, 38, 74, 0.08);
}

/* ENCABEZADO DEL FORMULARIO */

.cotiza-formulario-encabezado {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 35px;
    padding-bottom: 25px;

    border-bottom: 1px solid #E1E7ED;
}

.cotiza-formulario-encabezado > i {
    font-size: 32px;
    color: #006dcc;
}

.cotiza-formulario-encabezado h2 {
    margin: 0 0 7px;

    color: #08264A;
    font-size: 22px;
}

.cotiza-formulario-encabezado p {
    margin: 0;

    color: #718096;
    font-size: 14px;
}

/* TÍTULOS DE CADA GRUPO */

.cotiza-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 30px 0 22px;
    padding-bottom: 12px;

    border-bottom: 2px solid #FFB927;

    color: #08264A;
margin-bottom: 22px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.cotiza-grupo-titulo i {
    color: #006dcc;
    font-size: 18px;
}

/* CUADRÍCULA DE CAMPOS */

.cotiza-grid {
    display: grid;

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

    gap: 22px 25px;
}

/* CADA CAMPO */

.cotiza-campo {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

/* CAMPOS QUE OCUPAN TODO EL ANCHO */

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

/* ETIQUETAS */

.cotiza-campo label {
    margin-bottom: 9px;

    color: #08264A;

    font-size: 14px;
    font-weight: 700;
}

/* CAMPOS DE ENTRADA */

.cotiza-campo input:not([type="file"]),
.cotiza-campo select,
.cotiza-campo textarea {
    width: 100%;
    min-height: 48px;

    margin: 0 !important;
    padding: 12px 14px;

    box-sizing: border-box;

    border: 1px solid #D5DEE7;
    border-radius: 5px;

    background: #F9FBFD;
    color: #26394B;

    font-family: inherit;
    font-size: 14px;

    outline: none;
    transition: all 0.25s ease;
}

.cotiza-campo textarea {
    min-height: 140px;
    resize: vertical;
}

/* ARCHIVOS */

.cotiza-campo input[type="file"] {
    width: 100%;
    padding: 12px;

    box-sizing: border-box;

    border: 1px dashed #AAB8C6;
    border-radius: 5px;

    background: #F9FBFD;
}

.cotiza-campo small {
    margin-top: 9px;

    color: #718096;
    font-size: 12px;
    line-height: 1.5;
}

/* EFECTO AL SELECCIONAR */

.cotiza-campo input:focus,
.cotiza-campo select:focus,
.cotiza-campo textarea:focus {
    border-color: #006dcc;
    background: #FFFFFF;

    box-shadow: 0 0 0 3px rgba(0, 109, 204, 0.10);
}

/* PRIVACIDAD */

.cotiza-privacidad {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 30px;
    padding: 18px;

    border-radius: 6px;

    background: #F1F5F9;
}

.cotiza-privacidad i {
    color: #006dcc;
    font-size: 22px;
}

.cotiza-privacidad p {
    margin: 0;

    color: #596B7D;
    font-size: 13px;
    line-height: 1.6;
}

/* BOTÓN */

.cotiza-formulario-acciones {
    display: flex;
    justify-content: flex-end;

    margin-top: 30px;
}

.cotiza-enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 52px;
    padding: 0 30px;

    border: none;
    border-radius: 5px;

    background: #006dcc;
    color: #FFFFFF;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
    transition: all 0.3s ease;
}

.cotiza-enviar:hover {
    background: #005aa8;
    transform: translateY(-2px);
}






/* ==================================================
   COTIZA — FORMULARIO RESPONSIVO
   ================================================== */

@media (max-width: 900px) {

    .cotiza-formulario-contenedor {
        width: 92%;
        padding: 30px;
    }

    .cotiza-portada {
        min-height: 380px;
    }

}

@media (max-width: 600px) {

     .cotiza-portada {
        min-height: 390px;
        padding: 45px 7%;
        background-position: 60% center;
    }

    .cotiza-portada-contenido {
        max-width: 100%;
    }

    .cotiza-etiqueta {
        font-size: 10px;
        padding: 7px 12px;
        letter-spacing: 1.2px;
        margin-bottom: 15px;
    }

    .cotiza-portada h1 {
        font-size: 32px;
        line-height: 1.15;
        margin-bottom: 16px;
    }

    .cotiza-portada p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 22px;
    }

    .cotiza-formulario-contenedor {
        width: 94%;
        padding: 22px 18px;
    }

    .cotiza-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

    .cotiza-formulario-encabezado h2 {
        font-size: 18px;
    }

    .cotiza-formulario-acciones {
        justify-content: stretch;
    }

    .cotiza-enviar {
        width: 100%;
    }

        @media (max-width: 375px) {

        .cotiza-portada {
            min-height: 420px;
            padding: 35px 6%;
        }

        .cotiza-portada h1 {
            font-size: 28px;
            letter-spacing: -0.5px;
        }

        .cotiza-portada p {
            font-size: 14px;
            line-height: 1.45;
        }

        .cotiza-etiqueta {
            font-size: 9px;
            letter-spacing: 1px;
            padding: 7px 9px;
        }

        .cotiza-boton {
            font-size: 13px;
        }
    }

}



/* CAMPOS DEL FORMULARIO */
.cotiza-campo input,
.cotiza-campo select,
.cotiza-campo textarea {
    background: #FFFFFF;
}











/* =========================================
   CONTACTO DIRECTO - COTIZA
========================================= */

.cotiza-contacto-directo {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto 100px;
}

.cotiza-contacto-encabezado {
    text-align: center;
    margin-bottom: 35px;
}

.cotiza-contacto-encabezado h2 {
    color: #08264A;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 800;
    margin-bottom: 15px;
}

.cotiza-contacto-encabezado p {
    color: #08264A;
    font-size: 18px;
    margin: 0;
}

.cotiza-contacto-tarjetas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.cotiza-contacto-tarjeta {
    background: #FFFFFF;
    border: 2px solid #006dcc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(8, 38, 74, 0.10);
}

.cotiza-contacto-tarjeta h3 {
    background: #08264A;
    color: #FFFFFF;
    padding: 22px;
    margin: 0;
    text-align: center;
    font-size: 24px;
    border-bottom: 4px solid #FFB927;
}

.cotiza-contacto-tarjeta h3 i {
    margin-right: 12px;
    color: #FFFFFF;
}

.cotiza-contacto-dato {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 25px;
    border-bottom: 1px solid #DCE2E8;
}

.cotiza-contacto-dato:last-child {
    border-bottom: none;
}

.cotiza-contacto-dato > i {
    color: #006dcc;
    font-size: 25px;
    width: 35px;
    text-align: center;
}

.cotiza-contacto-dato strong {
    display: block;
    color: #08264A;
    font-size: 16px;
    margin-bottom: 5px;
}

.cotiza-contacto-dato a {
    color: #08264A;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.cotiza-contacto-dato a:hover {
    color: #006dcc;
}






/* ==================================================
   COTIZA — PIE DE PÁGINA
   ================================================== */

.cotiza-footer {
    position: relative;

    display: grid;
    grid-template-columns: 0.8fr 1.5fr 1fr;
    align-items: center;
    gap: 25px;

    min-height: 125px;
    padding: 20px 3.3%;

    box-sizing: border-box;

    background: linear-gradient(135deg, #06294D, #031F3D);
    color: #FFFFFF;

    border-top: 5px solid #FFB927;
}

.cotiza-footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cotiza-footer-logo img {
    width: 190px;
    max-height: 75px;
    object-fit: contain;
}

.cotiza-footer-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;

    padding: 10px 20px;
    border-left: 3px solid #FFB927;
    border-right: 3px solid #FFB927;
    text-align: center;
}

.cotiza-footer-texto strong {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.4;
}

.cotiza-footer-texto span {
    color: #FFB927;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
}

.cotiza-footer-copyright {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* TABLETAS */

@media (max-width: 900px) {
    .cotiza-footer {
        grid-template-columns: 1fr 1.5fr;
    }

    .cotiza-footer-copyright {
        grid-column: 1 / -1;
    }
}

/* CELULARES */

@media (max-width: 600px) {
    .cotiza-footer {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 25px 18px;
    }

    .cotiza-footer-texto {
        border-left: 0;
        border-right: 0;
        border-top: 2px solid #FFB927;
        border-bottom: 2px solid #FFB927;
    }

    .cotiza-footer-copyright {
        grid-column: auto;
        font-size: 11px;
    }
}





/* ==================================================
   MENSAJES DEL FORMULARIO DE COTIZACIÓN
   ================================================== */

.cotiza-mensaje {
    display: none;
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

.cotiza-mensaje.exito {
    display: block;
    color: #155724;
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

.cotiza-mensaje.error {
    display: block;
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

.cotiza-enviar:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}










/* RESPONSIVE */

@media (max-width: 900px) {
    .cotiza-contacto-tarjetas {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .cotiza-contacto-dato {
        padding: 20px 25px;
    }
}


@media (max-width: 600px) {
    .cotiza-contacto-directo {
        margin-bottom: 60px;
    }

    .cotiza-contacto-tarjetas {
        grid-template-columns: 1fr;
    }

    .cotiza-contacto-encabezado p {
        font-size: 16px;
    }

    .cotiza-contacto-tarjeta h3 {
        font-size: 21px;
    }
}





/* ==================================================
   TARJETAS DE CONTACTO DIRECTO - CLIC EN TODA LA FILA
   ================================================== */

.cotiza-contacto-tarjeta .cotiza-contacto-dato {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.3s ease,
                color 0.3s ease,
                transform 0.3s ease;
}

/* Efecto al pasar el cursor */
.cotiza-contacto-tarjeta .cotiza-contacto-dato:hover {
    background: rgba(0, 109, 204, 0.10);
    transform: translateX(5px);
}

/* El teléfono y correo conservan su apariencia */
.cotiza-contacto-tarjeta .cotiza-contacto-dato span {
    color: inherit;
}

/* Indicador de interacción */
.cotiza-contacto-tarjeta .cotiza-contacto-dato:focus-visible {
    outline: 2px solid #006dcc;
    outline-offset: 3px;
    border-radius: 5px;
}



/* TARJETAS DE DATOS DE COMPAÑÍA - ENLACES */
.compania-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.3s ease,
                transform 0.3s ease,
                color 0.3s ease;
}

.compania-card:hover {
    background: rgba(0, 109, 204, 0.10);
    transform: translateY(-3px);
}

.compania-card:focus-visible {
    outline: 2px solid #006dcc;
    outline-offset: 3px;
}












/* ==================================================
   SECCIÓN NOSOTROS - MARCOS AMARILLOS
   ================================================== */

/* FOTO Y TEXTO: UN SOLO MARCO */
.seccion-nosotros .nosotros-contenido {
    border: 2px solid #FFB927;
    border-radius: 12px;
    box-sizing: border-box;
}

/* RESTO DE LOS BLOQUES */
.seccion-nosotros .nosotros-alcances,
.seccion-nosotros .nosotros-seccion-interna,
.seccion-nosotros .vision-bloque {
    border: 2px solid #FFB927;
    border-radius: 12px;
    box-sizing: border-box;
}







/* ==================================================
   SECCIÓN SERVICIOS - MARCOS AMARILLOS
   ================================================== */

/* 1. PRESENTACIÓN */
.seccion-servicios .servicios-presentacion {
    border: 2px solid #FFB927;
    border-radius: 12px;
    box-sizing: border-box;
}

/* 2. SEIS TARJETAS DE SERVICIOS: SIN MARCO */
.seccion-servicios .servicios-grid {
    border: none;
}

/* 3. SERVICIOS COMPLEMENTARIOS */
.seccion-servicios .servicios-complementarios {
    border: 2px solid #FFB927;
    border-radius: 12px;
    box-sizing: border-box;
}

/* 4. BLOQUE GENERAL DE PÓLIZAS: SIN MARCO */
.seccion-servicios .servicios-polizas {
    border: none;
}

/* 5. CADA UNA DE LAS TRES TARJETAS DE PÓLIZAS */
.seccion-servicios .polizas-grid .poliza-item {
    border: 2px solid #FFB927;
    border-radius: 12px;
    box-sizing: border-box;
}





/* ==================================================
   SECCIÓN PROYECTOS - MARCO AMARILLO
   ================================================== */

.seccion-proyectos .proyectos-presentacion {
    border: 2px solid #FFB927;
    border-radius: 12px;
    box-sizing: border-box;
}












/* ==================================================
   ADAPTACIÓN RESPONSIVA DEL INTRO
   ESCALADO PROPORCIONAL DE TODA LA COMPOSICIÓN
   ================================================== */

@media (max-width: 1365px), (max-height: 767px) {

    .pantalla-inicio {

        width: 1366px;
        height: 768px;

        left: 50%;
        top: 50%;

        transform:
            translate(-50%, -50%)
            scale(
                min(
                    1,
                    calc(100vw / 1366px),
                    calc(100vh / 768px)
                )
            );

    }

}




/* ==================================================
   AJUSTE DEL TEXTO DEL INTRO PARA RESOLUCIONES MENORES
   NO AFECTA PANTALLAS DE 1920 PX O SUPERIORES
   ================================================== */

@media (max-width: 1919px) {
    .texto-servicios {
        font-size: 42px;
    }
}









/* ==================================================
   VIDEO Y FONDO INFERIOR
   SOLO PANTALLAS MENORES DE 1920 PX
   ================================================== */

@media (max-width: 1919px) {

    /* FONDO AZUL DE LA PÁGINA */
    .pagina-principal {
        background-color: #0057a8;
    }

    /* CONTENEDOR DEL VIDEO */
    .video-principal {
        height: auto;
        min-height: 0;
        padding-bottom: 14px;
        background-color: #0057a8;
    }

    /* VIDEO COMPLETO, SIN RECORTES */
    .video-fondo {
        position: relative;
        width: 100%;
        height: auto;
        left: auto;
        top: auto;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    /* CAPA OSCURA DEL VIDEO */
    .video-overlay {
        height: 100%;
    }

    /* FRANJA AZUL Y GRIS DEBAJO DEL VIDEO */
    .video-principal::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 14px;
    background: linear-gradient(
        to bottom,
        #B8B8B8 0px,
        #B8B8B8 5px,
        #006dcc 5px,
        #006dcc 14px
    );
    z-index: 4;
}

   /* TEXTO SOBRE EL VIDEO */
.texto-video {
    left: 5%;
    bottom: clamp(25px, 8%, 65px);
    max-width: 90%;
    box-sizing: border-box;
}

    .texto-video-linea1 {
        font-size: clamp(20px, 4vw, 55px);
        letter-spacing: clamp(1px, .35vw, 5px);
    }

    .texto-video-linea2 {
        font-size: clamp(12px, 2.2vw, 30px);
        letter-spacing: clamp(1px, .2vw, 3px);
    }

    .linea-video {
        width: clamp(60px, 13vw, 180px);
        height: clamp(3px, .4vw, 6px);
        margin-top: clamp(8px, 1.3vw, 18px);
    }

}







/* ==================================================
   RISECA — NOSOTROS
   ADAPTACIÓN RESPONSIVE MENOR A 1920px
   ================================================== */

@media (max-width: 1919px) {

    .seccion-nosotros {
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .nosotros-encabezado,
    .nosotros-contenido,
    .nosotros-alcances,
    .nosotros-seccion-interna,
    .vision-bloque {
        max-width: 1400px;
        box-sizing: border-box;
    }

}






/* ==================================================
   CORRECCIÓN RESPONSIVA DEL VIDEO DE INICIO
   ADAPTACIÓN AL ZOOM DEL NAVEGADOR
   ================================================== */

/* CONTENEDOR PRINCIPAL */

.pagina-principal {

    height: 100vh;
    height: 100dvh;

    display: flex;

    flex-direction: column;

}


/* ENCABEZADO */

.encabezado {

    flex-shrink: 0;

}


/* LÍNEA AZUL */

.linea-header {

    flex-shrink: 0;

}


/* VIDEO PRINCIPAL */

.video-principal {

    width: 100%;

    height: auto;

    flex: 1 1 0;

    min-height: 0;

    position: relative;

    overflow: hidden;

}


/* VIDEO DE FONDO */

.video-fondo {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    display: block;

}


/* TEXTO SOBRE EL VIDEO */

.texto-video {

    left: clamp(20px, 6vw, 90px);

    bottom: clamp(20px, 7vh, 70px);

    max-width: 88%;

}


/* PRIMERA LÍNEA */

.texto-video-linea1 {

    font-size: clamp(32px, 4.3vw, 64px);

    letter-spacing: clamp(2px, 0.35vw, 5px);

    line-height: 1.1;

}


/* SEGUNDA LÍNEA */

.texto-video-linea2 {

    font-size: clamp(18px, 2.3vw, 34px);

    letter-spacing: clamp(1px, 0.22vw, 3px);

    line-height: 1.2;

}


/* LÍNEA GRIS */

.linea-video {

    width: clamp(90px, 12vw, 180px);

    max-width: 100%;

}


















/* ==================================================
   RISECA - NOSOTROS
   ADAPTACIÓN PARA 1366 x 768
   ================================================== */

@media (min-width: 1281px) and (max-width: 1366px)
       and (max-height: 768px) {

    /* ENCABEZADO */

    .nosotros-encabezado {
        margin-bottom: 28px;
    }

    .nosotros-titulo {
        font-size: 38px;
        letter-spacing: 3px;
    }

    .nosotros-linea {
        height: 4px;
    }


    /* FOTO Y TEXTO - QUIÉNES SOMOS */

    .nosotros-contenido {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 35px;
    }

    .nosotros-foto {
        min-width: 0;
    }

    .nosotros-foto img {
        width: 100%;
        height: auto;
    }

    .nosotros-texto {
        min-width: 0;
        padding-right: 4%;
    }

    .nosotros-etiqueta {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .nosotros-texto h2 {
        font-size: 27px;
    }

    .nosotros-texto > p {
        font-size: 16px;
        line-height: 1.65;
        margin-bottom: 12px;
    }


    /* ALCANCES */

    .nosotros-alcances {
        margin: 48px auto 55px;
        padding: 25px 30px;
        gap: 22px;
    }

    .alcances-icono {
        width: 60px;
        height: 60px;
        min-width: 60px;
        font-size: 25px;
    }

    .alcances-contenido span {
        font-size: 26px;
        letter-spacing: 2px;
    }

    .alcances-contenido h2 {
        font-size: 20px;
    }

    .alcances-contenido p {
        font-size: 16px;
        line-height: 1.65;
    }


    /* MISIÓN */

    .nosotros-seccion-interna {
        padding: 35px 35px 45px;
        min-height: auto;
        margin-bottom: 55px;
    }

    .nosotros-titulo-interno {
        font-size: 29px;
        letter-spacing: 2px;
    }

    .mision-contenido {
        margin-top: 28px;
        grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
        gap: 25px;
    }

    .mision-letras {
        gap: 10px;
    }

    .mision-letras strong {
        font-size: 28px;
    }

    .mision-letras span {
        font-size: 17px;
    }

    .mision-texto {
        gap: 20px 25px;
    }

    .mision-texto p {
        font-size: 16px;
        line-height: 1.65;
        padding-bottom: 18px;
    }


    /* VISIÓN */

    .vision-bloque {
        margin-bottom: 55px;
        padding: 32px 38px;
        gap: 25px;
    }

    .vision-icono {
        width: 62px;
        height: 62px;
    }

    .vision-bloque span {
        font-size: 26px;
    }

    .vision-bloque h2 {
        font-size: 22px;
        line-height: 1.4;
    }


    /* VALORES */

    .nosotros-seccion-interna.valores {
        padding: 35px 35px 45px;
    }

    .valores-grid {
        margin-top: 28px;
        gap: 20px;
    }

    .valor-card {
        padding: 28px 24px;
    }

    .valor-card h3 {
        font-size: 19px;
    }

    .valor-card p {
        font-size: 16px;
        line-height: 1.65;
    }

}













/* ==================================================
   NOSOTROS - 1280 x 720
   ================================================== */

@media (min-width: 1201px) and (max-width: 1280px)
       and (max-height: 720px) {

    .nosotros-encabezado {
        margin-bottom: 25px;
    }

    .nosotros-titulo {
        font-size: 35px;
        letter-spacing: 3px;
    }

    .nosotros-contenido {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 28px;
    }

    .nosotros-texto {
        padding-right: 2%;
    }

    .nosotros-etiqueta {
        font-size: 15px;
    }

    .nosotros-texto h2 {
        font-size: 25px;
    }

    .nosotros-texto > p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    .nosotros-alcances {
        margin: 40px auto 45px;
        padding: 22px 25px;
        gap: 20px;
    }

    .alcances-icono {
        width: 55px;
        height: 55px;
        min-width: 55px;
        font-size: 23px;
    }

    .alcances-contenido span {
        font-size: 24px;
    }

    .alcances-contenido h2 {
        font-size: 19px;
    }

    .alcances-contenido p {
        font-size: 15px;
        line-height: 1.6;
    }

    .nosotros-seccion-interna {
        padding: 32px 30px 40px;
        min-height: auto;
        margin-bottom: 45px;
    }

    .nosotros-titulo-interno {
        font-size: 27px;
    }

    .mision-contenido {
        margin-top: 25px;
        grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
        gap: 20px;
    }

    .mision-letras {
        gap: 8px;
    }

    .mision-letras strong {
        font-size: 26px;
    }

    .mision-letras span {
        font-size: 16px;
    }

    .mision-texto {
        gap: 18px 20px;
    }

    .mision-texto p {
        font-size: 15px;
        line-height: 1.6;
        padding-bottom: 15px;
    }

    .vision-bloque {
        margin-bottom: 45px;
        padding: 28px 32px;
        gap: 22px;
    }

    .vision-icono {
        width: 58px;
        height: 58px;
    }

    .vision-bloque span {
        font-size: 24px;
    }

    .vision-bloque h2 {
        font-size: 20px;
    }

    .nosotros-seccion-interna.valores {
        padding: 32px 30px 40px;
    }

    .valores-grid {
        margin-top: 25px;
        gap: 18px;
    }

    .valor-card {
        padding: 25px 20px;
    }

    .valor-card h3 {
        font-size: 18px;
    }

    .valor-card p {
        font-size: 15px;
        line-height: 1.6;
    }
}







/* ==================================================
   NOSOTROS - TABLET HORIZONTAL
   1024 x 768
   ================================================== */

@media (min-width: 901px) and (max-width: 1024px) {

    .nosotros-encabezado {
        margin-bottom: 28px;
    }

    .nosotros-titulo {
        font-size: 34px;
        letter-spacing: 3px;
    }

    .nosotros-contenido {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 22px;
    }

    .nosotros-texto {
        padding-right: 0;
    }

    .nosotros-etiqueta {
        font-size: 15px;
        letter-spacing: 2px;
    }

    .nosotros-texto h2 {
        font-size: 24px;
    }

    .nosotros-texto > p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    .nosotros-alcances {
        margin: 40px auto 45px;
        padding: 22px 24px;
        gap: 18px;
    }

    .alcances-icono {
        width: 55px;
        height: 55px;
        min-width: 55px;
    }

    .alcances-contenido span {
        font-size: 24px;
    }

    .alcances-contenido h2 {
        font-size: 19px;
    }

    .alcances-contenido p {
        font-size: 15px;
        line-height: 1.6;
    }

    .nosotros-seccion-interna {
        padding: 32px 28px 40px;
        min-height: auto;
        margin-bottom: 45px;
    }

    .nosotros-titulo-interno {
        font-size: 27px;
    }

    .mision-contenido {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
        margin-top: 25px;
    }

    .mision-letras {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .mision-letras strong {
        font-size: 25px;
    }

    .mision-letras span {
        font-size: 16px;
    }

    .mision-texto {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 22px;
    }

    .mision-texto p {
        font-size: 15px;
        line-height: 1.6;
    }

    .vision-bloque {
        margin-bottom: 45px;
        padding: 28px 30px;
        gap: 22px;
    }

    .vision-icono {
        width: 58px;
        height: 58px;
    }

    .vision-bloque span {
        font-size: 24px;
    }

    .vision-bloque h2 {
        font-size: 20px;
    }

    .nosotros-seccion-interna.valores {
        padding: 32px 28px 40px;
    }

    .valores-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .valor-card {
        padding: 25px 20px;
    }

    .valor-card h3 {
        font-size: 18px;
    }

    .valor-card p {
        font-size: 15px;
        line-height: 1.6;
    }
}






/* ==================================================
   NOSOTROS - TABLET VERTICAL
   768 x 1024
   ================================================== */

@media (min-width: 701px) and (max-width: 900px) {

    .nosotros-encabezado {
        margin-bottom: 30px;
    }

    .nosotros-titulo {
        font-size: 34px;
        letter-spacing: 3px;
    }

    .nosotros-contenido {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .nosotros-foto {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .nosotros-texto {
        padding-right: 0;
    }

    .nosotros-etiqueta {
        font-size: 16px;
    }

    .nosotros-texto h2 {
        font-size: 27px;
    }

    .nosotros-texto > p {
        font-size: 16px;
        line-height: 1.7;
    }

    .nosotros-alcances {
        margin: 40px auto 50px;
        padding: 25px;
        gap: 20px;
    }

    .alcances-icono {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

    .alcances-contenido span {
        font-size: 25px;
    }

    .alcances-contenido h2 {
        font-size: 20px;
    }

    .alcances-contenido p {
        font-size: 16px;
        line-height: 1.65;
    }

    .nosotros-seccion-interna {
        padding: 35px 30px 45px;
        min-height: auto;
        margin-bottom: 50px;
    }

    .nosotros-titulo-interno {
        font-size: 29px;
    }

    .mision-contenido {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .mision-letras {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .mision-letras strong {
        font-size: 27px;
    }

    .mision-letras span {
        font-size: 17px;
    }

    .mision-texto {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .mision-texto p {
        font-size: 16px;
        line-height: 1.65;
    }

    .vision-bloque {
        margin-bottom: 50px;
        padding: 30px;
        gap: 22px;
    }

    .vision-icono {
        width: 60px;
        height: 60px;
    }

    .vision-bloque span {
        font-size: 25px;
    }

    .vision-bloque h2 {
        font-size: 21px;
    }

    .nosotros-seccion-interna.valores {
        padding: 35px 30px 45px;
    }

    .valores-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .valor-card {
        padding: 28px 22px;
    }

    .valor-card h3 {
        font-size: 19px;
    }

    .valor-card p {
        font-size: 16px;
        line-height: 1.65;
    }
}






/* ==================================================
   NOSOTROS - CELULAR GRANDE
   430 x 932
   ================================================== */

@media (min-width: 401px) and (max-width: 700px) {

    .seccion-nosotros {
        padding: 30px 5% 0;
    }

    .nosotros-encabezado {
        margin-bottom: 25px;
    }

    .nosotros-titulo {
        font-size: 29px;
        letter-spacing: 2px;
    }

    .nosotros-linea {
        height: 4px;
    }

    .nosotros-contenido {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .nosotros-foto {
        width: 100%;
    }

    .nosotros-foto img {
        width: 100%;
        height: auto;
    }

    .nosotros-texto {
        padding-right: 0;
    }

    .nosotros-etiqueta {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .nosotros-texto h2 {
        font-size: 23px;
        letter-spacing: 1px;
    }

    .nosotros-linea-texto {
        margin: 12px 0 18px;
    }

    .nosotros-texto > p {
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 12px;
    }

    .nosotros-alcances {
        flex-direction: column;
        align-items: flex-start;
        margin: 32px auto 38px;
        padding: 22px 20px;
        gap: 15px;
    }

    .alcances-icono {
        width: 52px;
        height: 52px;
        min-width: 52px;
        font-size: 22px;
    }

    .alcances-contenido span {
        font-size: 22px;
        letter-spacing: 2px;
    }

    .alcances-contenido h2 {
        font-size: 18px;
    }

    .alcances-contenido p {
        font-size: 15px;
        line-height: 1.6;
    }

    .nosotros-seccion-interna {
        padding: 28px 20px 35px;
        min-height: auto;
        margin-bottom: 38px;
    }

    .nosotros-titulo-interno {
        font-size: 25px;
        letter-spacing: 2px;
    }

    .mision-contenido {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        margin-top: 22px;
    }

    .mision-letras {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .mision-letras strong {
        font-size: 23px;
    }

    .mision-letras span {
        font-size: 14px;
    }

    .mision-texto {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

    .mision-texto p {
        font-size: 15px;
        line-height: 1.65;
        padding-bottom: 14px;
    }

    .vision-bloque {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 38px;
        padding: 25px 22px;
        gap: 15px;
    }

    .vision-icono {
        width: 52px;
        height: 52px;
    }

    .vision-bloque span {
        font-size: 22px;
    }

    .vision-bloque h2 {
        font-size: 18px;
        line-height: 1.5;
    }

    .nosotros-seccion-interna.valores {
        padding: 28px 20px 35px;
    }

    .valores-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 22px;
    }

    .valor-card {
        padding: 25px 22px;
    }

    .valor-card h3 {
        font-size: 18px;
    }

    .valor-card p {
        font-size: 15px;
        line-height: 1.65;
    }
}







/* ==================================================
   NOSOTROS - CELULAR MEDIANO
   390 x 844
   ================================================== */

@media (min-width: 361px) and (max-width: 400px) {

    .seccion-nosotros {
        padding: 27px 5% 0;
    }

    .nosotros-encabezado {
        margin-bottom: 22px;
    }

    .nosotros-titulo {
        font-size: 27px;
        letter-spacing: 2px;
    }

    .nosotros-contenido {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .nosotros-foto {
        width: 100%;
    }

    .nosotros-texto {
        padding-right: 0;
    }

    .nosotros-etiqueta {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .nosotros-texto h2 {
        font-size: 21px;
        letter-spacing: 1px;
    }

    .nosotros-texto > p {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 11px;
    }

    .nosotros-alcances {
        flex-direction: column;
        align-items: flex-start;
        margin: 28px auto 34px;
        padding: 20px 17px;
        gap: 13px;
    }

    .alcances-icono {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 21px;
    }

    .alcances-contenido span {
        font-size: 20px;
        letter-spacing: 1px;
    }

    .alcances-contenido h2 {
        font-size: 17px;
    }

    .alcances-contenido p {
        font-size: 14px;
        line-height: 1.6;
    }

    .nosotros-seccion-interna {
        padding: 25px 17px 32px;
        min-height: auto;
        margin-bottom: 34px;
    }

    .nosotros-titulo-interno {
        font-size: 23px;
        letter-spacing: 2px;
    }

    .mision-contenido {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        margin-top: 20px;
    }

    .mision-letras {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mision-letras strong {
        font-size: 21px;
    }

    .mision-letras span {
        font-size: 13px;
    }

    .mision-texto {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .mision-texto p {
        font-size: 14px;
        line-height: 1.65;
        padding-bottom: 13px;
    }

    .vision-bloque {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 34px;
        padding: 22px 18px;
        gap: 13px;
    }

    .vision-icono {
        width: 48px;
        height: 48px;
    }

    .vision-bloque span {
        font-size: 20px;
    }

    .vision-bloque h2 {
        font-size: 17px;
        line-height: 1.5;
    }

    .nosotros-seccion-interna.valores {
        padding: 25px 17px 32px;
    }

    .valores-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-top: 20px;
    }

    .valor-card {
        padding: 22px 18px;
    }

    .valor-card h3 {
        font-size: 17px;
    }

    .valor-card p {
        font-size: 14px;
        line-height: 1.6;
    }
}





/* ==================================================
   NOSOTROS - CELULAR PEQUEÑO
   320 x 568
   ================================================== */

@media (max-width: 360px) {

    .seccion-nosotros {
        padding: 24px 5% 0;
    }

    .nosotros-encabezado {
        margin-bottom: 20px;
    }

    .nosotros-titulo {
        font-size: 24px;
        letter-spacing: 1.5px;
    }

    .nosotros-linea {
        height: 3px;
    }

    .nosotros-contenido {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .nosotros-foto {
        width: 100%;
    }

    .nosotros-texto {
        padding-right: 0;
    }

    .nosotros-etiqueta {
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .nosotros-texto h2 {
        font-size: 19px;
        letter-spacing: 1px;
    }

    .nosotros-linea-texto {
        width: 65px;
        margin: 10px 0 15px;
    }

    .nosotros-texto > p {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    .nosotros-alcances {
        flex-direction: column;
        align-items: flex-start;
        margin: 25px auto 30px;
        padding: 18px 14px;
        gap: 12px;
    }

    .alcances-icono {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 19px;
    }

    .alcances-contenido span {
        font-size: 18px;
        letter-spacing: 1px;
    }

    .alcances-contenido h2 {
        font-size: 16px;
    }

    .alcances-contenido p {
        font-size: 13px;
        line-height: 1.6;
    }

    .nosotros-seccion-interna {
        padding: 22px 14px 28px;
        min-height: auto;
        margin-bottom: 30px;
    }

    .nosotros-titulo-interno {
        font-size: 21px;
        letter-spacing: 1.5px;
    }

    .mision-contenido {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        margin-top: 18px;
    }

    .mision-letras {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .mision-letras strong {
        font-size: 20px;
    }

    .mision-letras span {
        font-size: 13px;
    }

    .mision-texto {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .mision-texto p {
        font-size: 13px;
        line-height: 1.6;
        padding-bottom: 12px;
    }

    .vision-bloque {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 30px;
        padding: 20px 15px;
        gap: 12px;
    }

    .vision-icono {
        width: 44px;
        height: 44px;
    }

    .vision-bloque span {
        font-size: 18px;
    }

    .vision-bloque h2 {
        font-size: 15px;
        line-height: 1.5;
    }

    .nosotros-seccion-interna.valores {
        padding: 22px 14px 28px;
    }

    .valores-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 18px;
    }

    .valor-card {
        padding: 20px 15px;
    }

    .valor-card h3 {
        font-size: 16px;
    }

    .valor-card p {
        font-size: 13px;
        line-height: 1.6;
    }
}



/* ==================================================
   CORRECCIÓN DEL ENCABEZADO NOSOTROS
   TABLET Y CELULARES
   ================================================== */

/* TABLET VERTICAL - 768 x 1024 */
@media (min-width: 701px) and (max-width: 900px) {

    .seccion-nosotros {
        top: 150px !important;
        height: calc(100vh - 150px) !important;
        padding-top: 90px !important;
    }

}

/* CELULAR GRANDE - 430 x 932 */
@media (min-width: 401px) and (max-width: 700px) {

    .seccion-nosotros {
        top: 250px !important;
        height: calc(100vh - 250px) !important;
        padding-top: 25px !important;
    }

}

/* CELULAR MEDIANO - 390 x 844 */
@media (min-width: 361px) and (max-width: 400px) {

    .seccion-nosotros {
        top: 270px !important;
        height: calc(100vh - 270px) !important;
        padding-top: 25px !important;
    }

}

/* CELULAR PEQUEÑO - 320 x 568 */
@media (max-width: 360px) {

    .seccion-nosotros {
        top: 290px !important;
        height: calc(100vh - 290px) !important;
        padding-top: 25px !important;
    }

}









/* ==================================================
   CIERRE RISECA -seccion proyectos- EXTENDER A TODO EL ANCHO DE PANTALLA
   TABLETS Y CELULARES
   ================================================== */

@media (max-width: 1024px) {

    .cierre-riseca {

        width: 100vw !important;
        max-width: 100vw !important;

        position: relative !important;

        left: 50% !important;
        margin-left: -50vw !important;

        margin-right: 0 !important;

        box-sizing: border-box !important;

    }

}

/* TABLET VERTICAL: 768 x 1024 */
@media (max-width: 900px) {
    .seccion-proyectos {
        top: 235px;
        height: calc(100vh - 235px);
    }
}

/* CELULAR GRANDE Y MEDIANO */
@media (max-width: 600px) {
    .seccion-proyectos {
        top: 275px;
        height: calc(100vh - 275px);
    }
}

/* CELULAR PEQUEÑO: 320 x 568 */
@media (max-width: 360px) {
    .seccion-proyectos {
        top: 315px;
        height: calc(100vh - 315px);
    }
}









/* ==================================================
   secccion de Contactos-----AJUSTE DEFINITIVO DE TARJETAS DE BENEFICIOS
   ================================================== */

.beneficio-card {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    box-sizing: border-box;
}

/* Quitamos el separador que se encimaba con el icono */

.beneficio-card::before {
    display: none;
}

/* Iconos */

.beneficio-card > i {
    grid-column: 1;
    grid-row: 1;
    width: 55px;
    text-align: center;
    font-size: 35px;
}

/* Texto */

.beneficio-card > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.beneficio-card h3 {
    overflow-wrap: break-word;
}

.beneficio-card p {
    overflow-wrap: break-word;
}






/* TABLET VERTICAL - 768 × 1024 */
@media (max-width: 900px) {
    .seccion-contacto {
        top: 215px;
        height: calc(100vh - 215px);
    }
}

/* CELULAR GRANDE Y MEDIANO */
@media (max-width: 600px) {
    .seccion-contacto {
        top: 255px;
        height: calc(100vh - 255px);
    }
}

/* CELULAR PEQUEÑO - 320 × 568 */
@media (max-width: 360px) {
    .seccion-contacto {
        top: 295px;
        height: calc(100vh - 295px);
    }
}














/* ==================================================
   POSICIÓN RESPONSIVE DE LA SECCIÓN COTIZA- para bajar solo la pagina
   ================================================== */


/* TABLET VERTICAL - 768 × 1024 */
@media (max-width: 900px) {
    .seccion-cotiza {
        top: 195px;
        height: calc(100vh - 195px);
    }
}

/* CELULAR GRANDE Y MEDIANO */
@media (max-width: 600px) {
    .seccion-cotiza {
        top: 235px;
        height: calc(100vh - 235px);
    }
}

/* CELULAR PEQUEÑO - 320 × 568 */
@media (max-width: 360px) {
    .seccion-cotiza {
        top: 275px;
        height: calc(100vh - 275px);
    }
}