.header-banner::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.4); /* Ajusta la opacidad (0.4) según necesites */
              z-index: 0;
        }
        
        .header-banner {
            position: relative;
            height: 50vh;
            min-height: 800px;/*aqui se cambia el ancho de la imagen principal ancho */
            width: 100%;
            background-image: url('/api/placeholder/1200/900');
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }
        
        .header-title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 64px;
            font-weight: bold;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
            letter-spacing: 3px;
            text-align: center;
            width: 100%;
        }


                /* Reset y estilos base */
        .seccion-transparencia * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Contenedor principal para cada sección */
        .seccion-transparencia {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow-x: hidden;
            width: 100%;
        }

        /* Diseño de sección dividida */
        .contenedor-dividido {
            display: flex;
            width: 100%;
            height: 612px; /* Altura fija igual a tu imagen */
        }

        /* Media query para responsive */
        @media (max-width: 768px) {
            .contenedor-dividido {
                flex-direction: column;
                height: auto;
            }
            .mitad {
                width: 100% !important;
                height: auto !important;
                padding: 2rem !important;
            }
            .imagen-contenedor img {
                max-height: 300px !important;
            }
        }

        /* Mitades izquierda/derecha */
        .mitad {
            width: 50%; /* Mitad exacta del contenedor */
            height: 612px; /* Igual que la altura de tu imagen */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3rem;
            position: relative;
            overflow: hidden;
        }

        /* Contenedor de contenido */
        .contenido-mitad {
            width: 100%;
            max-width: 953px; /* Igual que el ancho de tu imagen */
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Estilos para la parte de texto */
        .texto {
            background-color: #2c3e50;
            color: #ecf0f1;
        }

        /* Estilos para la parte de imagen */
.imagen {
    background-color: #34495e;
    display: flex;
    align-items: stretch; /* Cambiado de center a stretch */
    justify-content: center;
    padding: 0; /* Eliminamos el padding */
}

/* Contenedor de imagen */
.imagen-contenedor {
    width: 100%; /* Ocupa todo el ancho disponible */
    height: 100%; /* Ocupa todo el alto disponible */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Oculta lo que sobresalga */
}

/* Estilos para la imagen - Versión que llena completamente */
.imagen-contenedor img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre todo el espacio recortando excedentes */
    object-position: center; /* Centra el recorte */
    display: block; /* Elimina espacio inferior residual */
}

/* Opcional: Efecto al pasar el mouse */
.imagen-contenedor:hover img {
    transform: scale(1.02); /* Ligero zoom */
}

        /* Contenedor de video */
        .video-contenedor {
            width: 953px;
            height: 612px;
            position: relative;
            overflow: hidden;
        }

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

        /* Estilos para la lista de normativa */
    /* Estilos para la lista de normativa con menos espacio */
    .normativa-list {
        list-style-type: none;
        counter-reset: normativa-counter;
        height: 100%;
        overflow-y: auto;
        padding-right: 1rem;
    }

    .normativa-list li {
        counter-increment: normativa-counter;
        margin-bottom: 0.5rem; /* Reducido de 1.5rem a 0.5rem */
        position: relative;
        padding-left: 2.5rem; /* Reducido de 3rem a 2.5rem */
        padding-top: 0.2rem; /* Añadido para mejor alineación vertical */
        padding-bottom: 0.2rem; /* Añadido para mejor alineación vertical */
    }

    .normativa-list li::before {
        content: counter(normativa-counter);
        position: absolute;
        left: 0;
        top: 0.2rem; /* Ajuste fino de posición vertical */
        background-color: #3498db;
        color: white;
        width: 1.8rem; /* Reducido de 2rem a 1.8rem */
        height: 1.8rem; /* Reducido de 2rem a 1.8rem */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 0.9rem; /* Tamaño de fuente reducido */
    }

    .normativa-list h5 {
        margin: 0;
        font-size: 1rem; /* Reducido de 1.1rem a 1rem */
        transition: color 0.3s ease;
        color: #ecf0f1;
        line-height: 1.4; /* Ajuste de interlineado */
    }

    .normativa-list a {
        text-decoration: none;
        display: block;
        padding: 0.5rem; /* Reducido de 0.8rem a 0.5rem */
        border-radius: 5px;
        transition: all 0.3s ease;
    }

        .normativa-list a:hover {
            background-color: rgba(52, 152, 219, 0.2);
        }

        .normativa-list a:hover h4 {
            color: #3498db;
        }

        /* Estilos para el título */
        .titulo-seccion {
            margin-bottom: 2rem;
            font-size: 2.2rem;
            color: #3498db;
            text-align: center;
            padding-bottom: 1rem;
            border-bottom: 1px solid #3498db;
        }

        /* Clases utilitarias */
        .invertir-orden {
            flex-direction: row-reverse;
        }

        .bg-azul {
            background-color: #2980b9;
        }

        .bg-verde {
            background-color: #27ae60;
        }

        .bg-rojo {
            background-color: #e74c3c;
        }

        /* Barra de desplazamiento personalizada */
        .normativa-list::-webkit-scrollbar {
            width: 8px;
        }

        .normativa-list::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.1);
            border-radius: 10px;
        }

        .normativa-list::-webkit-scrollbar-thumb {
            background: #3498db;
            border-radius: 10px;
        }

/* RESPONSIVE - Diseño para móviles */
        @media (max-width: 768px) {
            .contenedor-dividido {
                flex-direction: column;
                min-height: auto;
            }
            
            .mitad {
                width: 100%;
                height: auto;
                padding: 1.5rem;
            }
            
            .imagen-contenedor img {
                max-height: 300px;
            }
            
            .video-contenedor {
                height: 300px;
            }
            
            /* Ajuste especial para invertir orden en móvil si es necesario */
            .invertir-movil {
                flex-direction: column-reverse;
            }
        }


        /* Media queries para responsive */
        @media (max-width: 1024px) {
            .header-title {
                font-size: 3.5rem;
            }
        }
        
        @media (max-width: 768px) {
            .header-banner {
                height: 35vh;
            }
            
            .header-title {
                font-size: 3rem;
            }
        }
        
        @media (max-width: 576px) {
            .header-banner {
                height: 30vh;
                min-height: 200px;
            }
            
            .header-title {
                font-size: 2.5rem;
                letter-spacing: 1px;
            }
        }
        
        @media (max-width: 400px) {
            .header-title {
                font-size: 2rem;
                padding: 0 10px;
            }
        }