:root {
         --gray-900: #1c1c1c;
         --accent: #ffffff;
         --radius: 8px;
     }


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

     body {
         font-family: 'Exo 2', sans-serif;
         background: var(--color-bg);
         color: var(--color-text);
         overflow-x: hidden;
     }

     body {
         padding-top: 70px;
     }



     header {
         background:;
         color: black;
         text-align: center;
     }

     .split-banner {
         display: flex;
         width: 100%;
         max-width: 900px; /* ancho máximo */
         margin: 80px auto 0; /* espacio debajo del header */
         height: 80px; /* altura del banner */
         box-shadow: 0 2px 6px rgba(0,0,0,0.1);
         border-radius: 8px;
         overflow: hidden;
     }

     /* Mitad izquierda: logo */
     .banner-left {
         background-color: #ffffff; /* fondo blanco */
         flex: 1;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     /* Logo */
     .banner-logo {
         height: 75px;
         width: auto;
     }

     /* Mitad derecha: título */
     .banner-right {
         background-color: #8c8c8c;
         flex: 2;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     /* Título */
     .banner-title {
         color: #ffffff;
         font-family: 'Exo 2', sans-serif;
         font-size: 2.5rem;
         margin: 0;
     }




     .mosaico-container {
         width: 100%;
         max-width: 1100px;
         margin: 0 auto;
         position: relative;
         aspect-ratio: 4 / 2;
     }

     /* Cada grupo */
     .mosaico-grupo {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: grid;
         gap: 12px;
         opacity: 0;
         transform: scale(0.95);
         transition: all 0.8s ease;
     }

         /* Grupo activo */
         .mosaico-grupo.activo {
             opacity: 1;
             transform: scale(1);
             z-index: 1;
         }

         /* Imágenes del grupo */
         .mosaico-grupo img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             border-radius: 12px;
             transition: transform 0.3s;
         }

             .mosaico-grupo img:hover {
                 transform: scale(1.05);
             }

     /* Layouts */
     .layout-a {
         grid-template-columns: 2fr 1fr 1fr;
         grid-template-rows: 170px 170px;
         grid-template-areas: "img1 img2 img3" "img1 img4 img5";
     }

         .layout-a .i1 {
             grid-area: img1;
         }

         .layout-a .i2 {
             grid-area: img2;
         }

         .layout-a .i3 {
             grid-area: img3;
         }

         .layout-a .i4 {
             grid-area: img4;
         }

         .layout-a .i5 {
             grid-area: img5;
         }

     .layout-b {
         grid-template-columns: 1fr 1fr 2fr;
         grid-template-rows: 170px 170px;
         grid-template-areas: "img1 img1 img2" "img3 img4 img5";
     }

         .layout-b .i1 {
             grid-area: img1;
         }

         .layout-b .i2 {
             grid-area: img2;
         }

         .layout-b .i3 {
             grid-area: img3;
         }

         .layout-b .i4 {
             grid-area: img4;
         }

         .layout-b .i5 {
             grid-area: img5;
         }

     .layout-c {
         grid-template-columns: 1fr 2fr 1fr;
         grid-template-rows: 160px 180px;
         grid-template-areas: "img1 img2 img3" "img4 img2 img5";
     }

         .layout-c .i1 {
             grid-area: img1;
         }

         .layout-c .i2 {
             grid-area: img2;
         }

         .layout-c .i3 {
             grid-area: img3;
         }

         .layout-c .i4 {
             grid-area: img4;
         }

         .layout-c .i5 {
             grid-area: img5;
         }

 

     * {
         box-sizing: border-box
     }

     body {
         margin: 0;
         font-family: 'Exo 2', sans-serif;
         color: var(--gray-900);
         background: var(--bg);
         line-height: 1.5;
     }

     a {
         color: inherit;
         text-decoration: none;
     }

     img {
         max-width: 100%;
         display: block;
         height: auto;
     }


     .info-modern {
         display: flex;
         gap: 40px;
         max-width: 1100px;
         margin: 40px auto;
         flex-wrap: wrap;
     }

     .info-left {
         flex: 1 1 400px;
     }

         .info-left h2 {
             font-size: 2rem;
             margin-bottom: 20px;
             color: #0d47a1;
             border-bottom: 2px solid #0d47a1;
             display: inline-block;
             padding-bottom: 5px;
         }

     .info-card {
         display: flex;
         justify-content: space-between;
         background: #ffffff;
         padding: 12px 16px;
         margin-bottom: 12px;
         border-radius: 10px;
         box-shadow: 0 6px 15px rgba(0,0,0,0.08);
         transition: transform 0.3s, box-shadow 0.3s;
     }

         .info-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 12px 25px rgba(0,0,0,0.15);
         }

         .info-card .label {
             font-weight: 600;
             color: #000000;
             font-size: 14px;
         }


     .info-table {
         width: 100%;
         border-collapse: separate;
         border-spacing: 0 12px;
     }

         /* cada fila será una card */
         .info-table tr {
             display: flex;
             justify-content: space-between;
             background: #ffffff;
             padding: 12px 16px;
             border-radius: 10px;
             box-shadow: 0 6px 15px rgba(0,0,0,0.08);
             transition: transform 0.3s, box-shadow 0.3s;
             margin-bottom: 10px;
         }

             /* hover igual que .info-card */
             .info-table tr:hover {
                 transform: translateY(-5px);
                 box-shadow: 0 12px 25px rgba(0,0,0,0.15);
             }

         /* celdas como label/value */
         .info-table td {
             border: none;
             padding: 0;
         }

         /* label */
         .info-table .label {
             font-weight: 600;
             color: #000000;
             font-size: 14px;
         }

         /* value */
         .info-table .value {
             text-align: right;
             max-width: 60%;
             color: #333;
             font-size: 14px;
         }


     .info-right {
         flex: 1 1 400px;
         display: flex;
         flex-direction: column;
         align-items: center;
     }

         .info-right img {
             width: 100%;
             max-height: 370px;
             object-fit: cover;
             border-radius: 20px;
             margin-bottom: 20px;
             box-shadow: 0 10px 25px rgba(0,0,0,0.1);
         }

     .socials a {
         font-size: 1.8rem;
         transition: transform 0.3s, color 0.3s;
         outline: none;
     }

         .socials a:focus,
         .socials a:active {
             outline: none;
         }

     .socials a {
         font-size: 1.8rem;
         transition: transform 0.3s, color 0.3s;
     }

         .socials a:hover {
             transform: scale(1.2);
         }

    

     h1 {
         justify-content: center;
         align-items: center;
         display: flex;
         padding-bottom: 30px;
     }

@media (max-width: 768px) {

    .mosaico-container {
        aspect-ratio: auto;
        height: 420px; /* evita que invada el footer */
        overflow: hidden;
    }

    .mosaico-grupo {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        opacity: 0;
        transform: scale(0.95);
        transition: all 0.8s ease;
        object-position: center;
    }

        .mosaico-grupo.activo {
            opacity: 1;
            transform: scale(1);
            z-index: 2;
        }

        .mosaico-grupo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }

        /* ocultar la quinta imagen */
        .mosaico-grupo .i5 {
            display: none;
        }
}