/* ********************ESTILOS GENERALES********************* */
body{
font-family: 'Roboto', sans-serif;
}  
body p{
    font-size: 1.2rem;
}


h3{
    font-size: x-large;
    margin: 2px;
    width: 100%;
}

.container {
            max-width: 1700px;
            margin-left: auto;
            margin-right: auto;
            /* Se añade padding para móviles, que se quitará en pantallas grandes */
            padding-left: 15px;
            padding-right: 15px;
        }
/* En pantallas grandes, eliminamos el padding para que ocupe todo el ancho */
@media (min-width: 1700px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1700px;
        padding-left: 0;
        padding-right: 0;
    }
}


/* ***********************ENCABEZADO************************ */
header {
    /*font-style: oblique;*/ /* Angel Rios 02-10-2025 */
    color: aliceblue;
    background-color: #205B3B;
    text-align: center;
}

#top-banner h2 {
    font-size: 2.2rem;
}

#top-banner {
 text-align: center;
 font-style: oblique;
 color: aliceblue;
 background-color: #205B3B;
 padding: 5px 5px;
}

/* ***********************IMAGENES************************ */
.titulos {
    font-style: oblique;
    font-size: xx-large;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra para los títulos */
    background-color: #E8F5E9; /* Un verde muy claro que combina */
    padding: 10px 20px;        /* Espaciado interno para que no se vea apretado */
    border-radius: 8px;        /* Bordes redondeados */
    display: block;     /* Para que el fondo ocupe  el ancho disponible de su contenedor */
    margin-bottom: 20px;       /* Espacio debajo del título */
    text-align: center;        /* Centra el texto */
}


.contenedor-imagenes-suc {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    flex-wrap: wrap;
    gap: 70px; /* Reducimos el gap para evitar desbordamiento */
    padding-bottom: 20px;
    width: 100%; 
    
}

.contenedor-imagenes-atm {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    flex-wrap: wrap;
    column-gap: 215px; /* Espacio horizontal entre tarjetas */
    row-gap: 50px;     /* Espacio vertical entre filas de tarjetas */
    padding-bottom: 20px;
    width: 100%;
    align-items: flex-start; /* Evita que las tarjetas se estiren para igualar su altura */
}

.contenedor-imagen-suc {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 15px;
    text-align: center; /* centra el texto del título */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    padding: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza las transiciones */
}


.contenedor-imagen-atm {
    height: 420px;
    width: 270px;
    border-radius: 15px;
    text-align: center; /* centra el texto del título */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    padding: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza las transiciones */
}



.contenedor-imagen-suc:hover, .contenedor-imagen-atm:hover {
    transform: translateY(-20px); /* Levanta la tarjeta al hacer hover */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Sombra más intensa al hacer hover */
}



.imagen-suc  {
    width: 100%;
    height: 300px; /* Altura FIJA para garantizar que todas las tarjetas sean idénticas */
    border-radius: 15px;
}


.imagen-atm {
    width: 100%;
    height: 380px; /* Altura FIJA para garantizar que todas las tarjetas sean idénticas */
    border-radius: 15px;
}



#cooesan-online {
    display: block;      /* Asegura que se comporte como un bloque y no como inline-block */
    max-width: 1000px;   /* 1. Usa max-width para que el contenedor se adapte a pantallas más pequeñas. */
    margin: 20px auto; /* 2. Lo centra horizontalmente (auto) y le da un espacio inferior de 60px. */
    text-align: center;  /* 3. Mantiene el título (.titulos) centrado dentro de este contenedor. */
}



#contenedor-cooesan-online {
    display: flex;
    justify-content: center; /* centra los elementos hijos horizontalmente */
    align-items: center;     /* alinea verticalmente imagen y texto */
    gap: 40px;               /* espacio entre la imagen y el texto */
    flex-wrap: wrap;         /* por si en pantallas pequeñas no cabe en una fila */
    max-width: 800px;       /* Ancho máximo del contenedor */
    margin: 0 auto 40px;     /* Centra el contenedor y le da un margen inferior de 40px */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    border-radius: 15px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza las transiciones */
}

#imagen-cooesan-online{
    width: 250px;
    height: 250px;
    border-radius: 15px;

}

#contenedor-cooesan-online:hover {
    transform: translateY(-15px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}