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

body{
 background:#ffffff;
 overflow-y:scroll;
}



/* SCROLLBAR */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-thumb{
background:#9a9a9a;
border-radius:10px;
}



/* HEADER */

.header{
background:white;
padding:25px 0;
border-bottom:1px solid #e2e2e2;
}

.contenedor-header{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 20px;
}

.logo{
height:70px;
}

.imagen-derecha{
height:70px;
object-fit:contain;
}

.titulo-politica{
flex:1;
text-align:center;
font-weight:bold;
font-size:18px;
color:black;
}



/* BARRA INSTITUCIONAL */

.barra-institucional{
max-width:1200px;
margin:20px auto;
padding:0 20px;
}

.contenedor-barra{
background:#3b3b3b;
padding:14px;
border-radius:10px;
color:white;
}

.boton-institucional{
display:flex;
align-items:center;
gap:10px;
font-size:15px;
}



/* CONTENIDO */

.contenedor-principal{
max-width:1200px;
margin:auto;
padding:0 20px;
}

.panel-principal{
background:white;
border:1px solid #d9d9d9;
padding:30px;
border-radius:6px;
}



/* TITULO */

.titulo-diversidad{
color:#1a5f9e;
font-size:30px;
margin-bottom:20px;
}



/* TEXTO */

.texto-diversidad{
font-size:15px;
line-height:1.7;
margin-bottom:30px;
}



/* CONTENEDOR */

.contenedor-violencia{
display:flex;
gap:30px;
flex-wrap:wrap;
}



/* IMAGEN */

.bloque-imagen{
flex:1;
min-width:300px;
}

.imagen-violencia{
width:100%;
display:block;
border-radius:4px;
}



/* BOTON */

.boton-violencia{
background:#1a5f9e;
color:white;
text-align:center;
padding:14px;
margin-top:12px;
letter-spacing:1px;
cursor:pointer;
transition:0.3s;
}

.boton-violencia:hover{
background:#154a7c;
}



/* TARJETA */

.tarjeta-violencia{
flex:1;
min-width:300px;
border:1px solid #d9d9d9;
background:white;
transition:0.3s;
}

.tarjeta-violencia:hover{
box-shadow:0 6px 14px rgba(0,0,0,0.1);
}

.tarjeta-titulo{
background:#d9e0e7;
padding:14px;
font-weight:bold;
}

.tarjeta-texto{
padding:20px;
line-height:1.6;
}

.tarjeta-link{
border-top:1px solid #eee;
padding:14px;
}

.tarjeta-link a{
color:#1a73e8;
text-decoration:none;
}

.tarjeta-link a:hover{
text-decoration:underline;
}



/* SECCION RELACIONADA */

.seccion-relacionada{
margin-top:50px;
}

.contenedor-relacionado{
display:flex;
gap:30px;
flex-wrap:wrap;
}



/* TARJETA RELACIONADA */

.tarjeta-relacionada{
flex:1;
min-width:300px;
border:1px solid #d9d9d9;
background:white;
transition:0.3s;
}

.tarjeta-relacionada:hover{
box-shadow:0 6px 14px rgba(0,0,0,0.1);
}

.tarjeta-relacionada-titulo{
background:#d9e0e7;
padding:14px;
font-weight:bold;
}

.tarjeta-relacionada-texto{
padding:20px;
line-height:1.6;
}

.tarjeta-relacionada-link{
border-top:1px solid #eee;
padding:14px;
}



/* IMAGEN RELACIONADA */

.imagen-relacionada{
flex:1;
min-width:300px;
}

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

body{
background:#ffffff;
}



/* HEADER */

.header{
background:white;
border-bottom:1px solid #ddd;
}

.header-contenedor{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:15px;
}

.logo{
height:60px;
}

.menu{

display:flex;

align-items:center;

gap:20px;

}

.menu a{
margin-left:20px;
text-decoration:none;
color:#333;
font-size:15px;
}

.menu a:hover{
color:#1a5f9e;
}



/* BANNER */

.banner{
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url("../img/violencia.png");
background-size:cover;
background-position:center;
color:white;
padding:120px 20px;
text-align:center;
}

.banner h1{
font-size:36px;
margin-bottom:10px;
}

.banner p{
max-width:600px;
margin:auto;
}



/* CONTENEDOR */

.contenedor{
max-width:1200px;
margin:auto;
padding:40px 20px;
}



/* SECCION */

.seccion-diversidad h2{
color:#1a5f9e;
margin-bottom:15px;
}

.seccion-diversidad p{
margin-bottom:30px;
}



/* GRID */

.grid-informacion{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}



/* TARJETAS */

.tarjeta{
background:white;
border:1px solid #ddd;
border-radius:6px;
overflow:hidden;
transition:0.3s;

/* NUEVO */
display:flex;
flex-direction:column;
height:100%;

}

.tarjeta:hover{
transform:translateY(-5px);
box-shadow:0 8px 18px rgba(0,0,0,0.1);
}

.tarjeta img{
width:100%;
}

.tarjeta h3{
padding:15px;
}

.tarjeta p{
padding:0 15px 15px 15px;
flex-grow:1; /* Esto empuja el botón hacia abajo */
}

.tarjeta a{
display:block;
padding:12px;
background:#1a5f9e;
color:white;
text-align:center;
text-decoration:none;
margin-top:auto; /* CLAVE: lo manda al fondo */
}



/* SECCION DESTACADA */

.seccion-destacada{
background:#f7f9fb;
margin-top:40px;
padding:40px 20px;
}

.destacado-contenedor{
max-width:1200px;
margin:auto;
display:flex;
gap:40px;
align-items:center;
flex-wrap:wrap;
}

.destacado-texto{
flex:1;
}

.destacado-imagen{
flex:1;
}

.destacado-imagen img{
width:100%;
}



/* FOOTER */

.footer{
background:#1f2e44;
color:white;
margin-top:60px;
}

.footer-contenedor{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
padding:40px 20px;
}

.footer-col{
flex:1;
min-width:200px;
margin-bottom:20px;
}

.footer-col ul{
list-style:none;
}

.footer-col a{
color:white;
text-decoration:none;
}

.footer-copy{
text-align:center;
padding:20px;
background:#182338;
}



/* RESPONSIVE */

@media(max-width:768px){

.menu{
display:none;
}

.banner h1{
font-size:26px;
}

}

/* MENU ACCESIBILIDAD */

/* ===== BOTON ACCESIBILIDAD FLOTANTE ===== */

.menu-accesibilidad-flotante{

    position: fixed;

    top: 95px; /* separado del menú */

    right: 25px;

    z-index: 9999;

}

/* BOTON REDONDO */
.btn-accesibilidad{
    width: 60px;
    height: 60px;
    background: #003366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,.3);
    transition: 0.3s;
}

.btn-accesibilidad:hover{
    transform: scale(1.1);
}

/* =========================
   PANEL ACCESIBILIDAD
========================= */
/* =========================
   PANEL ACCESIBILIDAD
========================= */

.panel-accesibilidad{

    position:absolute;

    top:75px;
    right:0;

    width:320px;

    background:#ffffff;

    border:1px solid #d9d9d9;

    border-radius:14px;

    padding:20px;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.18),
        0 2px 8px rgba(0,0,0,0.08);

    opacity:0;

    visibility:hidden;

    transform:translateY(-10px);

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

    z-index:99999;
}

/* PANEL VISIBLE */

.panel-accesibilidad.activo{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* TITULO */

.panel-accesibilidad h4{

    margin-bottom:15px;

    padding-bottom:10px;

    border-bottom:1px solid #e5e5e5;

    font-size:17px;

    color:#1a2a5c;

}

/* LISTA */

.panel-accesibilidad ul{

    list-style:none;

    padding:0;

    margin:0;

}

/* ITEMS */

.panel-accesibilidad li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 10px;

    border-radius:8px;

    font-size:15px;

    color:#333;

    cursor:pointer;

    transition:0.25s;

}

/* ICONOS */

.panel-accesibilidad li i{

    width:20px;

    text-align:center;

    color:#1a5f9e;

}

/* HOVER */

.panel-accesibilidad li:hover{

    background:#f3f7fc;

    color:#1a5f9e;

    transform:translateX(3px);

}
@media(max-width:768px){

    .menu-accesibilidad-flotante{

        top: auto;
        bottom: 20px;

        right: 15px;

    }

}

/* PANEL ACTIVO */
.panel-accesibilidad.activo{
    display: block;
}

/* TITULO */
.panel-accesibilidad h4{
    margin-top: 0;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}

/* LISTA */
.panel-accesibilidad ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.panel-accesibilidad li{
    padding: 8px 5px;
    cursor: pointer;
    font-size: 14px;
}

.panel-accesibilidad li:hover{
    background:#f2f2f2;
    border-radius:5px;
}

.hamburguesa{

width:30px;
height:22px;

display:flex;
flex-direction:column;
justify-content:space-between;

cursor:pointer;

}

.hamburguesa span{

display:block;

height:3px;

background:#2b3e70;

border-radius:2px;

transition:0.4s;

}

.panel-accesibilidad.activo{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

/* TITULO */

.panel-accesibilidad h4{

margin-bottom:10px;

font-size:15px;

}

/* LISTA */

.panel-accesibilidad ul{

list-style:none;

padding:0;

}

/* ITEMS */

.panel-accesibilidad li{

padding:8px 0;

cursor:pointer;

font-size:14px;

transition:0.25s;

}

.panel-accesibilidad li:hover{

color:#1a5f9e;

padding-left:4px;

}



/* ACCESIBILIDAD */

.grises{
filter:grayscale(100%);
}

.alto-contraste{
background:black;
color:white;
}

.contraste-negativo{
filter:invert(100%);
}

.fondo-claro body,
.fondo-claro header,
.fondo-claro section,
.fondo-claro div,
.fondo-claro footer{
    background:white !important;
    color:black !important;
}

.subrayar-enlaces a{
text-decoration:underline !important;
}

.fuente-legible{
font-family:Verdana, Arial, sans-serif !important;
}

/* FOOTER INSTITUCIONAL CENTRADO */

.footer{
background:#1f2e44;
color:white;
padding:25px 20px;
}

.footer-institucional{

max-width:1000px;
margin:auto;
text-align:center;

font-size:12px;
line-height:1.6;

}

.footer-institucional p{

margin:3px 0;

}

.btn-ver-mas{
display:inline-block;
margin-top:15px;
padding:12px 20px;
background:#1a5f9e;
color:white;
text-decoration:none;
border-radius:4px;
transition:0.3s;
}

.btn-ver-mas:hover{
background:#154a7c;
}

.hamburguesa{
    width:35px;
    height:35px;

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

    cursor:pointer;

    background:#1a2a5c; /* AZUL OSCURO */
    border:none;
    border-radius:6px;

    transition:0.3s;
}

.hamburguesa i{
font-size:22px;
color:white;
transition:0.3s;
}

.hamburguesa:hover i{
color:#1a5f9e;
transform:scale(1.1);
}

.hamburguesa:hover{
    background:#0f1b3d; /* más oscuro */
    transform:scale(1.05);
}

.hamburguesa{
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.panel-accesibilidad li{
    padding:8px 0;
    cursor:pointer;
    font-size:14px;
    transition:0.25s;
    background:#f4f4f4; /* MISMO fondo siempre */
}

/* Mantener el mismo fondo en hover, active y focus */
.panel-accesibilidad li:hover,
.panel-accesibilidad li:active,
.panel-accesibilidad li:focus{
    background:#f4f4f4; /* NO cambia */
    color:#1a5f9e;
    padding-left:4px;
}

/* TABS */

.tabs-botones{
display:flex;
gap:10px;
margin-bottom:20px;
flex-wrap:wrap;
}

.tab-btn{
padding:10px 15px;
border:none;
background:#ddd;
cursor:pointer;
border-radius:4px;
transition:0.3s;
font-weight:bold;
}

.tab-btn:hover{
background:#ccc;
}

.tab-btn.activo{
background:#1a5f9e;
color:white;
}

.tabs-contenido{
background:white;
padding:20px;
border-radius:6px;
border:1px solid #ddd;
}

/* OCULTAR PANELES */
.tab-panel{
display:none;
}

/* PANEL ACTIVO */
.tab-panel.activo{
display:block;
}

button:focus{
    outline:2px solid #1a5f9e;
    outline-offset:2px;
}

.tarjeta{
    position:relative;
}

.tarjeta::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:6px;
    box-shadow:inset 0 0 0 0 rgba(26,95,158,0.2);
    transition:0.3s;
    pointer-events:none;
}

.tarjeta:hover::after{
    box-shadow:inset 0 0 0 2px rgba(26,95,158,0.2);
}

.tarjeta a{
    transition:0.3s;
}

.tarjeta:hover a{
    background:#154a7c;
}

/* CONTENEDOR FORMULARIO EXTERNO */

.contenedor-iframe{
    width:100%;
    height:900px;
    margin-top:20px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid #ddd;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.contenedor-iframe iframe{
    width:100%;
    height:100%;
    border:none;
}

/* ============================= */
/* FOOTER UDI REAL */
/* ============================= */

.footer-udi{
    width:100%;
    margin-top:60px;
    font-family:Arial, Helvetica, sans-serif;
}

/* FRANJA AZUL */
.footer-superior{
    background:#00689d;
    color:white;
    padding:40px 20px 25px 20px;
}

.footer-contenido{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:40px;
}

/* LOGO */
.footer-logo img{
    width:220px;
}

/* INFO */
.footer-info p{
    margin:4px 0;
    font-size:16px;
}

/* TEXTO LEGAL */
.footer-legal{
    text-align:center;
    margin-top:30px;
    font-size:13px;
    opacity:0.95;
    font-style:italic;
}

/* FRANJA NARANJA */
.footer-inferior{
    background:#E79A2F;
    text-align:center;
    color:white;
    padding:12px;
    font-size:14px;
}

/* ===================================== */
/* TRÍPTICO WEB */
/* ===================================== */

.triptico{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0;
    margin-top:40px;
    border:1px solid #ddd;
}

/* PANEL */
.panel{
    padding:35px 28px;
    background:white;
    border-right:1px solid #e3e3e3;
    min-height:650px;
}

/* PANEL CENTRAL (simula doblez del folleto) */
.panel-central{
    background:#f7f9fb;
    box-shadow:inset 0 0 20px rgba(0,0,0,0.05);
}

/* quitar borde último panel */
.panel:last-child{
    border-right:none;
}

/* TITULOS */
.panel h2{
    color:#1a5f9e;
    margin-bottom:20px;
}

.panel h3{
    color:#1a5f9e;
    margin-top:15px;
    margin-bottom:15px;
}

.panel h4{
    margin-top:18px;
    color:#333;
}

/* TEXTO */
.panel p{
    line-height:1.7;
    margin-top:8px;
}

/* EFECTO FOLLETO */
.triptico{
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    border-radius:6px;
    overflow:hidden;
}

/* RESPONSIVE */
@media(max-width:900px){
    .triptico{
        grid-template-columns:1fr;
    }

    .panel{
        border-right:none;
        border-bottom:1px solid #ddd;
        min-height:auto;
    }

    .panel:last-child{
        border-bottom:none;
    }
}

/* ===== TOOLTIP ACCESIBILIDAD ===== */

.tooltip-accesibilidad{
    position: absolute;
    right: 70px;
    bottom: 50%;
    transform: translateY(50%);
    background: #333;
    color: #fff;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

/* Flechita */
.tooltip-accesibilidad::after{
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
}

/* Mostrar tooltip al hover */
.btn-accesibilidad:hover .tooltip-accesibilidad{
    opacity: 1;
}

/* =========================================
   SECCION INCLUSION Y DIVERSIDAD
========================================= */

.seccion-inclusion{

    margin-top:40px;

}

/* TITULO PRINCIPAL */

.titulo-seccion{

    font-size:52px;

    color:#1f5fa8;

    margin-bottom:35px;

    font-weight:700;

    line-height:1.1;

}

/* GRID SUPERIOR */

.grid-inclusion{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:26px;

    margin-bottom:26px;

}

/* TARJETAS */

.card-inclusion,
.card-inferior{

    background:#ffffff;

    border:1px solid #d9d9d9;

    border-radius:22px;

    padding:32px;

    transition:0.3s;

}

/* HOVER SUAVE */

.card-inclusion:hover,
.card-inferior:hover{

    box-shadow:0 6px 18px rgba(0,0,0,0.06);

}

/* TITULOS */

.card-inclusion h2,
.card-inferior h2{

    color:#1f5fa8;

    font-size:22px;

    margin-bottom:20px;

    font-weight:700;

}

/* TEXTO */

.card-inclusion p,
.card-inferior p{

    color:#111111;

    font-size:17px;

    line-height:1.9;

    margin-bottom:18px;

}

/* LISTA */

.lista-inclusion{

    padding-left:22px;

}

.lista-inclusion li{

    color:#111111;

    font-size:17px;

    line-height:1.9;

    margin-bottom:16px;

}

.lista-inclusion strong{

    color:#1f5fa8;

    font-weight:700;

}

/* CITAS */

.cita{

    margin-top:28px;

    padding:22px;

    border-radius:14px;

    line-height:1.8;

    font-size:16px;

    background:#ffffff;

    border:1px solid #dddddd;

}

/* CITA DORADA */

.cita-dorada{

    background:#ffffff;

    border-left:5px solid #e2b13c;

    color:#222222;

    font-weight:600;

}


/* CITA AZUL SUAVE */

.cita-morada{

    background:#ffffff;

    border-left:5px solid #5a7fc5;

    color:#222222;

}

/* RESPONSIVE */

@media(max-width:900px){

    .grid-inclusion{

        grid-template-columns:1fr;

    }

    .titulo-seccion{

        font-size:38px;

    }

    .card-inclusion,
    .card-inferior{

        padding:24px;

    }

}

```css
/* ===================================================== */
/* MEJORAS VISUALES ADICIONALES */
/* ===================================================== */

.card-inclusion,
.card-inferior{

    position:relative;

    overflow:hidden;

}

/* EFECTO SUAVE */

.card-inclusion::before,
.card-inferior::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        #1f5fa8,
        #5a7fc5,
        #e2b13c
    );

}

/* HOVER ELEGANTE */

.card-inclusion:hover,
.card-inferior:hover{

    transform:translateY(-4px);

}

/* MEJORAR CITAS */

.cita{

    transition:0.3s;

}

.cita:hover{

    transform:translateX(4px);

}

/* TITULOS MÁS LIMPIOS */

.titulo-seccion{

    position:relative;

    padding-bottom:15px;

}

.titulo-seccion::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:90px;
    height:4px;

    background:#e2b13c;

    border-radius:10px;

}

/* MEJOR ESPACIADO */

.seccion-inclusion{

    margin-bottom:70px;

}

/* RESPONSIVE EXTRA */

@media(max-width:768px){

    .titulo-seccion{

        font-size:34px;
        line-height:1.2;

    }

    .card-inclusion,
    .card-inferior{

        padding:22px;

    }

    .lista-inclusion li,
    .card-inclusion p,
    .card-inferior p{

        font-size:16px;

    }

}
.grid-politica{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

/* =========================================
   NUEVA PAGINA POLITICA
========================================= */

.texto-modelo{
    font-size:17px;
    line-height:1.8;
    color:#4a4a4a;
    margin-bottom:30px;
    max-width:900px;
}

/* GRID 4 TARJETAS */

.grid-cuatro{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

/* GRID 3 TARJETAS */

.grid-tres{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:25px;
}

/* TARJETAS TOLERANCIA */

.card-tolerancia{

    background:#fff;

    border:1px solid #d9d9d9;

    border-radius:20px;

    padding:28px;

    border-top:4px solid #d94141;

    transition:.3s;
}

.card-tolerancia:hover{

    transform:translateY(-4px);

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

.card-tolerancia h2{

    color:#c93232;

    font-size:22px;

    margin-bottom:15px;
}

.card-tolerancia p{

    line-height:1.8;

    font-size:16px;
}

/* PRINCIPIOS */

.card-principio{

    background:#fff;

    border:1px solid #d9d9d9;

    border-radius:18px;

    padding:25px;

    transition:.3s;
}

.card-principio:hover{

    transform:translateY(-4px);

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

.numero-principio{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#eef3f8;

    color:#1f5fa8;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:15px;
}

.card-principio h2{

    color:#1f5fa8;

    font-size:21px;

    margin-bottom:12px;
}

.card-principio p{

    line-height:1.8;

    font-size:16px;
}

/* CAJA INFORMATIVA */

.aviso-politica{

    margin-top:25px;

    padding:18px 22px;

    background:#fffaf0;

    border:1px solid #e7c96a;

    border-radius:12px;

    color:#555;

    font-size:15px;

    line-height:1.7;
}

/* RESPONSIVE */

@media(max-width:1000px){

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

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

@media(max-width:768px){

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

    .titulo-seccion{
        font-size:34px;
    }
}
/* =====================================
   CIMIENTOS DE LA POLÍTICA
===================================== */

.grid-cimientos{

    display:grid;

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

    gap:26px;

    margin-top:30px;

}

.card-cimiento{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:22px;

    padding:28px;

    transition:.3s;

    min-height:185px;

}

.card-cimiento:hover{

    transform:translateY(-4px);

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

}

.numero-cimiento{

    width:40px;
    height:40px;

    border-radius:12px;

    background:#eef4f9;

    color:#1f5fa8;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    font-size:16px;

}

.card-cimiento h2{

    color:#173f73;

    font-size:24px;

    margin-bottom:14px;

    line-height:1.3;

}

.card-cimiento p{

    color:#4a5565;

    font-size:17px;

    line-height:1.8;

}

/* RESPONSIVE */

@media(max-width:1000px){

    .grid-cimientos{

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

    }

}

@media(max-width:768px){

    .grid-cimientos{

        grid-template-columns:1fr;

    }

}

/* =====================================
   MODELO DE CONVIVENCIA UDI
===================================== */

.seccion-modelo{

    padding:0;

    margin-bottom:70px;

}

.grid-modelo{

    display:grid;

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

    gap:20px;

    margin-top:25px;

}

.card-modelo{


    background:#ffffff;

    border:1px solid #dde3ea;

    border-radius:22px;

    padding:24px;

    min-height:240px;

    transition:.3s;

}

.card-modelo:hover{

    transform:translateY(-4px);

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

}

.card-modelo h2{

    color:#0f2f63;

    font-size:20px;

    font-weight:700;

    margin-bottom:14px;

}

.card-modelo p{

    color:#4b5b70;

    line-height:1.9;

    font-size:16px;

}

@media(max-width:1100px){

    .grid-modelo{

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

    }

}

@media(max-width:768px){

    .grid-modelo{

        grid-template-columns:1fr;

    }

    .seccion-modelo{

        padding:30px 20px;

    }

}

/* =====================================
   RADAR DE APLICACIÓN
===================================== */

.grid-radar{

    display:grid;

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

    gap:26px;

    margin-top:30px;

}

.card-radar{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:22px;

    padding:28px;

    min-height:220px;

    transition:.3s;

}

.card-radar:hover{

    transform:translateY(-4px);

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

}

.icono-radar{

    font-size:28px;

    margin-bottom:18px;

}

.card-radar h2{

    color:#12386a;

    font-size:20px;

    margin-bottom:14px;

    font-weight:700;

    line-height:1.3;

}

.card-radar p{

    color:#4b5b70;

    font-size:16px;

    line-height:1.9;

}

/* RESPONSIVE */

@media(max-width:1000px){

    .grid-radar{

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

    }

}

@media(max-width:768px){

    .grid-radar{

        grid-template-columns:1fr;

    }

}
/* =====================================
   COMITÉ VBG
===================================== */

.grid-comite-vbg{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:26px;

    margin-top:25px;

}

.card-comite{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:24px;

    padding:30px;

    transition:.3s;

}

.card-comite:hover{

    transform:translateY(-4px);

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

}

.card-comite h2{

    color:#12386a;

    font-size:24px;

    margin-bottom:22px;

    font-weight:700;

}

.lista-comite{

    padding-left:20px;

}

.lista-comite li{

    margin-bottom:16px;

    line-height:1.8;

    color:#4b5b70;

    font-size:16px;

}

.capacidad-comite{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:18px;

    padding:18px 20px;

    margin-bottom:16px;

}

.capacidad-comite h3{

    color:#0f6ea9;

    font-size:18px;

    margin-bottom:10px;

    font-weight:700;

}

.capacidad-comite p{

    color:#4b5b70;

    line-height:1.8;

    font-size:16px;

}

@media(max-width:900px){

    .grid-comite-vbg{

        grid-template-columns:1fr;

    }

}

/* =====================================
   MATRIZ DE CORRESPONSABILIDAD
===================================== */

.tabla-responsabilidad-contenedor{

    overflow-x:auto;

    margin-top:30px;

    border-radius:24px;

    border:1px solid #dfe5ec;

    background:#ffffff;

}

.tabla-responsabilidad{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

}

.tabla-responsabilidad thead th{

    background:#102f5d;

    color:#ffffff;

    text-align:left;

    padding:20px 16px;

    font-size:18px;

    font-weight:700;

}

.tabla-responsabilidad thead th:first-child{

    border-top-left-radius:20px;

}

.tabla-responsabilidad thead th:last-child{

    border-top-right-radius:20px;

}

.tabla-responsabilidad tbody td{

    padding:18px 16px;

    border-top:1px solid #dfe5ec;

    vertical-align:top;

    font-size:16px;

    line-height:1.8;

    color:#42526a;

}

.tabla-responsabilidad tbody tr{

    transition:.25s;

}

.tabla-responsabilidad tbody tr:hover{

    background:#f8fbff;

}

.tabla-responsabilidad tbody td:first-child{

    color:#173f73;

    font-weight:700;

    min-width:140px;

}

@media(max-width:900px){

    .tabla-responsabilidad{

        min-width:1000px;

    }

}

/* =====================================
   RUTA DE ATENCION
===================================== */

.grid-ruta-atencion{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}

.card-ruta{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:22px;

    padding:24px;

    transition:.3s;

}

.card-ruta:hover{

    transform:translateY(-4px);

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

}

.numero-ruta{

    width:34px;
    height:34px;

    border-radius:10px;

    background:#eef4f9;

    color:#1f5fa8;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:16px;

}

.card-ruta h2{

    color:#163c70;

    font-size:22px;

    margin-bottom:14px;

}

.card-ruta p{

    font-size:16px;

    line-height:1.8;

}

/* =====================================
   ESCUDO DE CONFIDENCIALIDAD
===================================== */

.grid-escudo{

    display:grid;

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

    gap:22px;

    margin-top:25px;

}

.card-escudo{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:22px;

    padding:28px;

    transition:.3s;

}

.card-escudo:hover{

    transform:translateY(-4px);

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

}

.icono-escudo{

    font-size:28px;

    margin-bottom:16px;

}

.card-escudo h2{

    color:#163c70;

    font-size:22px;

    margin-bottom:14px;

}

.card-escudo p{

    line-height:1.8;

}

/* =====================================
   CICLO DE PROTECCION CONTINUA
===================================== */

.grid-ciclo{

    display:grid;

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

    gap:22px;

    margin-top:25px;

}

.card-ciclo{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:22px;

    padding:28px;

    transition:.3s;

}

.card-ciclo:hover{

    transform:translateY(-4px);

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

}

.numero-ciclo{

    width:36px;
    height:36px;

    border-radius:10px;

    background:#eef4f9;

    color:#1f5fa8;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:16px;

}

.card-ciclo h2{

    color:#163c70;

    font-size:22px;

    margin-bottom:14px;

}

.card-ciclo p{

    line-height:1.9;

    font-size:16px;

}

/* RESPONSIVE */

@media(max-width:1200px){

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

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

}

@media(max-width:768px){

    .grid-ruta-atencion,
    .grid-escudo,
    .grid-ciclo{

        grid-template-columns:1fr;

    }

}

/* =========================================
   RUTA DE ATENCIÓN
========================================= */

.ruta-atencion-contenedor{

    display:flex;

    gap:50px;

    align-items:flex-start;

    flex-wrap:wrap;

}

.ruta-atencion-texto{

    flex:1.2;

    min-width:320px;

}

.ruta-atencion-texto h1{

    font-size:48px;

    color:#000;

    margin-bottom:12px;

    font-weight:700;

}

.ruta-atencion-texto h2{

    color:#1a5f9e;

    font-size:24px;

    margin-bottom:20px;

}

.ruta-atencion-texto p{

    font-size:16px;

    line-height:1.8;

    color:#222;

}

.ruta-cards{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:30px;

    margin-bottom:30px;

}

.ruta-cards{

    display:flex;

    gap:16px;

    flex-wrap:nowrap;

    margin-top:25px;

    margin-bottom:25px;

}

.ruta-icono{

    font-size:26px;

    margin-bottom:10px;

}

.ruta-card{
    flex:1 1 30%;
}

.ruta-card h3{

    color:#1a5f9e;

    font-size:16px;

    margin-bottom:8px;

    line-height:1.3;

}

.ruta-card p{

    font-size:14px;

    line-height:1.5;

}

.ruta-atencion-imagen{

    flex:1;

    min-width:320px;


}

.placeholder-imagen {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.placeholder-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

}

/* RESPONSIVE */

@media(max-width:768px){

    .ruta-atencion-texto h1{

        font-size:36px;

    }

    .ruta-cards{

        flex-direction:column;

    }

    .placeholder-imagen{

        min-height:300px;

    }

}

.placeholder-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
}

.ruta-card:nth-child(1) .ruta-icono{
    color:#000000;
}

.ruta-card:nth-child(2) .ruta-icono{
    color:#d64545;
}

.ruta-card:nth-child(3) .ruta-icono{
    color:#444444;
}

#ruta3 .ruta-card:nth-child(1) .ruta-icono{
    color:#3f5975;
}

#ruta3 .ruta-card:nth-child(2) .ruta-icono{
    color:#000000;
}

#ruta3 .ruta-card:nth-child(3) .ruta-icono{
    color:#d64545;
}

/* =========================================
   PANEL PROCESO
========================================= */

.proceso-cards{

    display:flex;
    gap:18px;
    flex-wrap:wrap;

}

.proceso-cards .ruta-card{

    background:#f4f7fa;

    border:1px solid #d7e1eb;

    border-radius:14px;

    padding:20px;

    flex:0 0 240px;

    min-height:145px;

    transition:.3s;

}

.proceso-cards .ruta-card:hover{

    transform:translateY(-4px);

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

}

.proceso-cards .ruta-icono{

    font-size:34px;

    color:#1a5f9e;

    margin-bottom:14px;

}

.proceso-cards .ruta-card h3{

    color:#1a5f9e;

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

}

.proceso-cards .ruta-card p{

    font-size:15px;

    line-height:1.5;

}

.ruta-icono img{
    width:42px;
    height:42px;
    object-fit:contain;
}

/* =====================================================
   PREVENCIÓN Y FORMACIÓN (PF)
   Integración para ruta3.html
===================================================== */

.pf-seccion{

    margin:50px 0;

}

.pf-encabezado{

    margin-bottom:30px;

}

.pf-etiqueta{

    display:inline-block;

    background:#e8f1fb;

    color:#0f6ea9;

    padding:8px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

    margin-bottom:14px;

}

.pf-encabezado h2{

    color:#12386a;

    font-size:40px;

    font-weight:800;

    margin-bottom:15px;

    line-height:1.2;

}

.pf-encabezado p{

    color:#526277;

    font-size:17px;

    line-height:1.9;

    max-width:900px;

}

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

.pf-estadisticas{

    display:grid;

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

    gap:20px;

    margin-top:35px;

}

.pf-stat-card{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:22px;

    padding:30px;

    text-align:center;

    transition:.3s;

}

.pf-stat-card:hover{

    transform:translateY(-4px);

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

}

.pf-stat-card strong{

    display:block;

    font-size:40px;

    color:#0f6ea9;

    margin-bottom:10px;

}

.pf-stat-card span{

    color:#4b5b70;

    font-size:15px;

}

/* =====================================
   GRID
===================================== */

.pf-grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

.pf-card{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:24px;

    padding:30px;

    transition:.3s;

}

.pf-card:hover{

    transform:translateY(-4px);

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

}

.pf-card h3{

    color:#12386a;

    margin-bottom:20px;

    font-size:24px;

}

/* =====================================
   LISTAS
===================================== */

.pf-lista{

    padding-left:22px;

}

.pf-lista li{

    margin-bottom:14px;

    line-height:1.8;

    color:#4b5b70;

}

/* =====================================
   CHECKLIST
===================================== */

.pf-check-item{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

}

.pf-check-item input{

    transform:scale(1.15);

}

.pf-progress{

    width:100%;

    height:14px;

    background:#e8edf4;

    border-radius:30px;

    overflow:hidden;

    margin-top:25px;

}

.pf-progress-bar{

    height:100%;

    width:0;

    background:#0f6ea9;

    transition:.4s;

}

#progressText{

    margin-top:12px;

    color:#12386a;

    font-weight:600;

}

/* =====================================
   VIOLENTÓMETRO
===================================== */

.pf-violentometro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

.pf-imagen img{

    width:100%;

    border-radius:14px;

}

.pf-imagen figcaption{

    margin-top:12px;

    color:#6d7887;

    text-align:center;

    font-size:14px;

}

.pf-tabs{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:25px;

}

.level-tab{

    border:none;

    cursor:pointer;

    padding:12px 18px;

    border-radius:12px;

    background:#eef4f9;

    color:#12386a;

    font-weight:700;

    transition:.3s;

}

.level-tab:hover{

    background:#dce9f5;

}

.level-tab.active{

    background:#0f6ea9;

    color:#ffffff;

}

/* =====================================
   BUSCADOR
===================================== */

.pf-buscador{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.pf-buscador input,
.pf-buscador select{

    flex:1;

    min-width:250px;

    border:1px solid #d9e1ea;

    border-radius:14px;

    padding:14px 16px;

    font-size:15px;

}

.pf-indicator-grid{

    display:grid;

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

    gap:18px;

}

/* =====================================
   RUTA
===================================== */

.pf-route-card{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:20px;

    padding:24px;

    margin-bottom:16px;

}

.pf-route-card h3{

    color:#12386a;

    margin-bottom:12px;

}

/* =====================================
   FORMACIÓN
===================================== */

.pf-seccion-azul{

    background:#f6faff;

    border-radius:30px;

    padding:45px;

}

.pf-training-grid{

    display:grid;

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

    gap:22px;

}

.pf-training-card{

    background:#ffffff;

    border-radius:20px;

    border:1px solid #dfe5ec;

    padding:25px;

}

.pf-training-card h3{

    color:#12386a;

    margin-bottom:12px;

}

/* =====================================
   PILARES
===================================== */

.pf-pillars{

    display:grid;

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

    gap:20px;

    margin-top:20px;

}

.pf-pillar{

    background:#f7fafc;

    border-radius:18px;

    padding:22px;

    border:1px solid #dfe5ec;

}

/* =====================================
   RECURSOS
===================================== */

.pf-recursos{

    display:grid;

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

    gap:20px;

}

.pf-resource-card{

    display:block;

    text-decoration:none;

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:20px;

    padding:25px;

    transition:.3s;

}

.pf-resource-card:hover{

    transform:translateY(-4px);

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

}

.pf-resource-card strong{

    display:block;

    color:#12386a;

    margin-bottom:10px;

}

.pf-resource-card span{

    color:#5d6b7f;

}

/* =====================================
   ACCIONES
===================================== */

.pf-acciones{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    justify-content:center;

}

.boton-udi{

    border:none;

    cursor:pointer;

    background:#0f6ea9;

    color:#ffffff;

    padding:14px 24px;

    border-radius:14px;

    font-weight:700;

    transition:.3s;

}

.boton-udi:hover{

    background:#0b5a8c;

}

/* =====================================
   TOAST
===================================== */

.toast{

    position:fixed;

    right:20px;

    bottom:20px;

    background:#12386a;

    color:#ffffff;

    padding:14px 20px;

    border-radius:14px;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:9999;

}

.toast.show{

    opacity:1;

    visibility:visible;

}

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

@media(max-width:1200px){

    .pf-estadisticas,
    .pf-training-grid,
    .pf-pillars,
    .pf-indicator-grid{

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

    }

}

@media(max-width:900px){

    .pf-grid-2,
    .pf-violentometro-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .pf-estadisticas,
    .pf-training-grid,
    .pf-pillars,
    .pf-indicator-grid,
    .pf-recursos{

        grid-template-columns:1fr;

    }

    .pf-encabezado h2{

        font-size:28px;

    }

    .pf-seccion-azul{

        padding:30px 20px;

    }

}

/* =====================================
   ESPACIO SEGURO
===================================== */

.espacio-seguro{

    background:#ffffff;

    padding:20px 0 50px 0;

    margin-top:20px;

}

.espacio-seguro-header{

    margin-bottom:40px;

}

.espacio-seguro-header h1{

    color:#163c70;

    font-size:42px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:18px;

}

.espacio-seguro-header p{

    max-width:900px;

    color:#56657a;

    line-height:1.9;

    font-size:17px;

}

.espacio-seguro-grid{

    display:grid;

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

    gap:24px;

    margin-bottom:35px;

}

.espacio-card{

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-top:4px solid #00894a;

    border-radius:22px;

    padding:30px;

    transition:.3s;
    
    position:relative;
    overflow:hidden;

}

.espacio-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#00894a;

}

.espacio-card:hover{

    transform:translateY(-5px);

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

}

.espacio-card h2{

    color:#12386a;

    font-size:28px;

    margin-bottom:18px;

    font-weight:700;

}

.espacio-card p{

    color:#56657a;

    line-height:1.9;

    font-size:16px;

}

.canal-reporte{

    background:#12386a;

    color:#ffffff;

    border-radius:24px;

    padding:28px 32px;

}

.canal-reporte h2{

    font-size:28px;

    margin-bottom:12px;

    font-weight:700;

    color:#ffffff;

}

.canal-reporte p{

    font-size:16px;

    line-height:1.8;

    color:#ffffff;

}

/* RESPONSIVE */

@media(max-width:900px){

    .espacio-seguro-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .espacio-seguro{

        padding:80px 20px;

    }

    .banner-contenido{
        transform:translateY(-20px);
    }

    .espacio-seguro-header h1{

        font-size:30px;

    }

}

/* =====================================
   BOTÓN VOLVER ARRIBA
===================================== */

.btn-volver-arriba {
    position: fixed;
    bottom: 90px; /* encima del botón de accesibilidad */
    right: 20px;
    width: 55px;
    height: 55px;
    border: none;
    border-radius: 50%;
    background: #0056b3;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

    transition: all .3s ease;
}

.btn-volver-arriba:hover {
    background: #003f85;
    transform: translateY(-3px);
}

.btn-volver-arriba.mostrar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

html {
    scroll-behavior: smooth;
}

/* =====================================
   PARCHE CORRECTOR
===================================== */

/* =====================================================
   PARCHE DE CORRECCIÓN Y OPTIMIZACIÓN
   Agregar al FINAL de estilos.css
===================================================== */

/* -------------------------------------
   HEADER
------------------------------------- */

.header-contenedor{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 20px;
}

/* -------------------------------------
   BANNER
------------------------------------- */

.banner-contenido{
    max-width:900px;
    margin:auto;
    transform:translateY(-110px);	
}

/* -------------------------------------
   ACCESIBILIDAD - FONDO CLARO
------------------------------------- */

/* Corrige el selector original */

body.fondo-claro,
body.fondo-claro header,
body.fondo-claro section,
body.fondo-claro div,
body.fondo-claro footer,
body.fondo-claro main{
    background:#ffffff !important;
    color:#000000 !important;
}

/* Mantener legibilidad de enlaces */

body.fondo-claro a{
    color:#1a5f9e !important;
}

/* -------------------------------------
   TARJETAS RUTA DE ATENCIÓN
------------------------------------- */

.ruta-card{

    flex:1 1 30%;

    background:#ffffff;

    border:1px solid #dfe5ec;

    border-radius:16px;

    padding:20px;

    transition:.3s;

    min-height:150px;

}

.ruta-card:hover{

    transform:translateY(-4px);

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

}

.ruta-icono{

    font-size:28px;

    margin-bottom:12px;

}

/* -------------------------------------
   IMÁGENES RUTA
------------------------------------- */

.placeholder-imagen{

    overflow:hidden;

}

.placeholder-imagen img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* -------------------------------------
   BOTONES VER MÁS
------------------------------------- */

.btn-ver-mas{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:140px;

    font-weight:600;

}

.btn-ver-mas:hover{

    transform:translateY(-2px);

}

/* -------------------------------------
   TABS
------------------------------------- */

.tabs-botones{

    justify-content:flex-start;

}

.tab-btn{

    min-width:120px;

}

.tab-btn:focus{

    outline:2px solid #1a5f9e;

    outline-offset:2px;

}

/* -------------------------------------
   TARJETAS PRINCIPALES
------------------------------------- */

.tarjeta{

    height:100%;

}

.tarjeta img{

    aspect-ratio:16/9;

    object-fit:cover;

}

/* -------------------------------------
   FOOTER
------------------------------------- */

.footer-contenido{

    flex-wrap:wrap;

}

.footer-logo{

    flex-shrink:0;

}

.footer-info{

    flex:1;

}

/* -------------------------------------
   SCROLLBAR FIREFOX
------------------------------------- */

html{

    scrollbar-width:thin;

    scrollbar-color:#9a9a9a transparent;

}

/* -------------------------------------
   MEJORA RESPONSIVE TABLET
------------------------------------- */

@media (max-width:1024px){

    .ruta-atencion-contenedor{

        gap:30px;

    }

    .ruta-atencion-texto h1{

        font-size:40px;

    }

}

/* -------------------------------------
   RESPONSIVE MÓVIL
------------------------------------- */

@media (max-width:768px){

    .banner{

        padding:80px 20px;

    }

    .banner h1{

        font-size:30px;

    }

    .ruta-atencion-contenedor{

        flex-direction:column;

    }

    .ruta-atencion-texto{

        width:100%;

    }

    .ruta-atencion-imagen{

        width:100%;

    }

    .ruta-cards{

        flex-direction:column;

    }

    .ruta-card{

        width:100%;

        min-height:auto;

    }

    .footer-contenido{

        flex-direction:column;

        text-align:center;

    }

    .footer-logo img{

        width:180px;

    }

}

/* -------------------------------------
   RESPONSIVE MÓVIL PEQUEÑO
------------------------------------- */

@media (max-width:480px){

    .banner h1{

        font-size:26px;

    }

    .ruta-atencion-texto h1{

        font-size:32px;

    }

    .ruta-atencion-texto h2{

        font-size:22px;

    }

    .btn-ver-mas{

        width:100%;

    }

}

/* -------------------------------------
   SUAVIZADO GENERAL
------------------------------------- */

html{

    scroll-behavior:smooth;

}

body{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

.ruta-atencion-texto h2{
    font-size:48px;
    color:#000;
    margin-bottom:12px;
    font-weight:700;
}


    display:block !important;
}

.btn-volver-arriba{

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 55px;
    height: 55px;

    border: none;
    border-radius: 50%;

    background: #0d5ca6;
    color: #fff;

    cursor: pointer;

    display: none;

    z-index: 9999;

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

    transition: all .3s ease;

}

.btn-volver-arriba:hover{

    transform: translateY(-3px);

}