:root {
            --primary-color: #ffffff;
            --secondary-color: #080808;
            --hover-color: #000000;
            --transition: all 0.3s ease;
        }
        a {
                text-decoration: none; /* Elimina el subrayado */
                color: inherit; /* Hereda el color del texto del elemento padre */
            }
    html, body { margin: 0; padding: 0; }

       /* .site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 50px;  
      padding: 5px 20px;  en lugar de 15px      
        background: white;
        position: relative;
      
        }*/
        .site-header{
        height: 80px;           /* alto fijo (ajústalo a 56–70px a gusto) */
        padding: 9 20px;        /* sin padding vertical */
        display: flex;
        align-items: center;
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* 3) Evita que el margen superior del siguiente bloque “se cuele” (colapse) */
                /* o border-bottom:1px solid transparent; */
        .site-header + * { margin-top: 0 !important; }/* fuerza cero margen al siguiente bloque */
         /* 4) Por si tu carrusel trae márgenes desde algún framework */
        .carousel-container { margin-top: 0 !important; }

        /* 5) (Opcional) Si los enlaces del menú se ven muy altos, compacta línea */
        .nav a { line-height: 1; }


        .site-header img {
        height: 50px;    /* o 20px si lo quieres más chiquito */
        width: auto;     /* mantiene proporción */
        object-fit: contain;
        padding-left: 100px;
        margin-top: 20px; 
        }

        .header-search {
        flex-grow: 1;
        max-width: 400px;
        margin-right: 20px;
        padding: 0 15px;
        }

        .header-search form {
        width: 100%;
        position: relative;
        margin: 0;
        }

        .header-search input[type="text"] {
        width: 100%;
        padding: 10px 40px 10px 15px;
        border: 1px solid #ddd;
        border-radius: 20px;
        outline: none;
        transition: var(--transition);
        }

        .header-search input[type="text"]:focus {
        border-color: var(--primary-color);
        }

        .header-search button {
        position: absolute;
        right: 5px;
        top: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        }

        .nav {
        display: flex;
        justify-content: flex-end;
        margin-left: auto;
        position: relative;

        }

        .menu-toggle {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        position: relative;
        z-index: 100;
        }

        .menu-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        font-size:large;
        background: var(--secondary-color);
        margin: 4px 0;
        transition: all var(--transition);
        }

        .nav-menu {
        display: flex;
        gap: 35px;
        }

        .dropdown {
        position: relative;
        }

        .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        box-shadow: var(--shadow);
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: translateY(10px);
        opacity: 0;
        z-index: 1000;
        width: 200px;
        }

        .dropdown-menu a {
        display: block;
        padding: 10px 15px;
        color: #fff;
        text-decoration: none;
        transition: background 0.3s ease;
        }
        
        .dropdown-menu a:hover {
        background: #000000;
        color: #fff;
        }

        .dropdown:hover .dropdown-menu {
        display: block;
        transform: translateY(0);
        opacity: 1;
       
        }
         .nav a {
        text-decoration: none;
        color: var(--secondary-color);
        transition: color var(--transition);
        }

        .nav a:hover {
        color: var(#fff);
        }
        /* Estilos móviles */
   /* Estilos móviles */
/* ===========================
      MENÚ MÓVIL IMCINE
   =========================== */
@media (max-width: 768px) {

    /* HEADER */
    .site-header {
        position: relative;
        z-index: 99999; /* super arriba */
        padding: 0 15px;
        background: white;
    }

    .menu-toggle {
        display: block;
        z-index: 100000;
    }

    /* MENU COMPLETO - CAPA BLANCA */
    .nav-menu {
        position: fixed;        /* 🔥 Para cubrir toda la pantalla */
        top: 80px;             /* abajo del header */
        left: 0;               /* 🔥 cubrir de borde a borde */
        right: 0;              /* 🔥 cubrir de borde a borde */
        bottom: 0;             /* 🔥 cubrir hasta abajo */
        background: white;     /* 🔥 capa blanca completa */
        overflow-y: auto;      /* para que si hay mucho contenido, haga scroll */
        padding: 20px;
        display: none;
        flex-direction: column;
        z-index: 99998;        /* justo debajo del header */
    }

    .nav-menu.show {
        display: flex;
    }

    .dropdown {
        width: 100%;
        border-top: 1px solid #eee;
    }

    .dropdown > a {
        display: block;
        padding: 18px 20px;
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--secondary-color);
        text-align: left;
    }

    .dropdown-menu {
        display: none;
        background: #f5f5f5;
        padding: 10px 0 10px 0;
    }

    .dropdown.open .dropdown-menu {
        display: block;
    }

    .dropdown-menu a {
        padding: 10px 35px;
        font-size: 1rem;
        color: #333;
        display: block;
    }
}




       
/*imcine home*/
        .carousel-container {
            position: relative;
            width: 100%;
            margin: 0;
            overflow: hidden;
            box-shadow: var(--shadow);
            object-fit: contain;
        }

        .carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: 400px;
        }

        .carousel-slide {
            min-width: 100%;
            position: relative;
        
        }
        
        
        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: contain;/*imagenes del slide*/
            display: block;
        }

        .slide-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: black;
            padding: 30px;
            text-align: left;
            width: 70%;
            border-top-right-radius: 15px;
        }

        .slide-caption h3 {
            font-size: 1.8rem;
            margin-bottom: 10px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }

        .slide-caption p {
            font-size: 1rem;
            opacity: 0.9;
            max-width: 100%;
            margin: 0;
        }

        /* Carousel navigation buttons */
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255,255,255,0.3);
            color: black;
            border: none;
            padding: 15px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.5rem;
            z-index: 50; /* Lower than menu but above content */
            transition: var(--transition);
            backdrop-filter: blur(5px);
        }

        .carousel-btn:hover {
            background-color: rgba(255,255,255,0.5);
            transform: translateY(-50%) scale(1.1);
        }

        #prevBtn {
            left: 20px;
        }

        #nextBtn {
            right: 20px;
        }

        /* Carousel indicator dots */
        .carousel-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 50; /* Same as carousel buttons */
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: var(--transition);
        }

        .indicator.active {
            background-color: white;
            transform: scale(1.2);
        }

        @media (max-width: 768px) {
            .carousel-container {
                height: 100%; /* Ajusta la altura para pantallas más pequeñas */
            }
            .carousel-slide img {
                height: auto; /* Mantiene la proporción */
            }
            .carousel {
                height: 400px;
            }
            .slide-caption h3 {
                font-size: 1.5rem;
            }
            .slide-caption p {
                font-size: 0.9rem;
            }
            .carousel-btn {
                padding: 10px;
                font-size: 1.2rem;
            }
        }

        @media (max-width: 480px) {
            .carousel-container {
                height: 148px;
            }
            .slide-caption {
                padding: 20px 15px 15px;
            }
            .slide-caption h3 {
                font-size: 1.2rem;
            }
            .slide-caption p {
                font-size: 0.8rem;
                max-width: 90%;
            }
            .indicator {
                height: 2px;
                max-width: 40px;
            }
        }
/*estilos de las noticias*/

  /* Asegura que se vea y acepte interacción */
  .ck.ck-editor__main > .ck-editor__editable {
    background: #fff !important;
    color: #111 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 260px;
  }
  /* Si algún contenedor tenía opacidad */
  .ck.ck-editor, .ck.ck-reset_all {
    opacity: 1 !important;
  }
  /* Por si hay capas encima */
  .ck.ck-editor {
    position: relative;
    z-index: 10;
  }
      .news-section {
            padding: 40px 20px;
            margin: 0 auto;
        }

        .news-title {
            margin-bottom: 30px;
            text-align: left;
            font-size: 1.5rem;
        }

        .news-carousel-container {
            overflow-x: auto; /* Scroll horizontal */
            padding-bottom: 10px;
        }

        .news-carousel {
            display: flex;
            gap: 20px;
            /* No usar transform para scroll natural */
        }

        .news-card {
            flex-shrink: 0; /* Evita que se reduzca */
            width: 400px;
            overflow: hidden;
            transition: transform 0.3s ease;
            background-color: #000000;
            text-align: left;
            color:white;
        }
        .news-card h3{
            font-size: 1.5rem;
        }

        .news-card:hover {
            transform: translateY(-5px);
        }

        .news-card img {
            width: 100%;
            height: 70%;
            object-fit: cover; /* Mantiene proporción */
        }

        .news-content {
            padding: 15px;
        }

        .news-content h3 {
            margin-bottom: 10px;
        }

        .news-content p {
            color: #555;
            line-height: 1.4;
        }

        @media (max-width: 768px) {
            .news-carousel {
                flex-wrap: nowrap;
            }
            .news-card {
                width: 90vw; /* Ajusta ancho en móvil */
                max-width: 350px;
            }
        }


         /*estilos de la seccion de videos*/
/* Estilos de la sección de videos en home */
           .videos-section {
                padding: 20px;
            }

            .conv-title {
                text-align: center;
                font-size: 2em;
                margin-bottom: 10px;
            }

            .videos-grid {
                display: flex;
                gap: 15px;
                overflow-x: auto; /* Permite scroll horizontal si hay muchos videos */
                padding-bottom: 10px;
            }

            .video-item {
                position: relative;
                overflow: hidden;
            
                transition: transform 0.3s ease;
                min-width: 380px;
                max-width: 380px; /* Para que no se estire más allá */
                flex-shrink: 0; /* Evita que se reduzca en flexbox */
                background-color: #000; /* Fondo para evitar espacios blancos */
            }

            .video-item:hover {
                transform: scale(1.05);
            }

            .video-image {
                width: 100%;
                height: 215px; /* Altura fija para mantener proporción 16:9 aprox */
                object-fit: cover; /* Mantiene proporción y recorta si es necesario */
               
                transition: transform 0.3s ease;
                display: block;
            }

            .video-image:hover {
                transform: scale(1.1);
            }

            .video-title {
                text-align: center;
                margin-top: 5px;
                font-size: 1em;
                color: #333;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }

        /*pop up de los videos del inicio*/
            
        .video-popup {
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);

            display: none; /* oculto por defecto */
            justify-content: center;
            align-items: center;
        }

        .video-popup.active {
            display: flex; /* se muestra y centra */
        }




        .popup-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            position: relative;
            width: 80%;
            max-width: 800px;
            margin: 0 15px; 
        }

        #popup-title {
            margin: 20px 0 20px 0; /* Ajusta el margen superior a 20px */
            padding: 0 15px; /* Espaciado lateral */
            color: #222;
            font-size: 1.5em;
            font-weight: 600;
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            line-height: 1.4;
            transition: all 0.3s ease;
        }

        #popup-video {
            width: 100%; /* Ancho completo del contenedor del popup */
            height: 450px; /* Altura fija para el video */
        }

        .close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 20px;
            cursor: pointer;
            color: #333;
            transition: color 0.3s;
        }

        .close:hover {
            color: #f00;
        }



        /*estilos de la seccion de actividades*/
         .actividades-section {
            padding: 40px 20px;
            margin: 0 ;
            box-sizing: border-box;
        }
       
        .activities-container {
            max-width: 1200px;
            margin: 0 ;
        }

        .activities-title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-size: 2rem;
        }

        .activities-grid {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding: 20px 0;
            scroll-snap-type: x mandatory;
        }

        .activity-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform var(--transition-speed), box-shadow var(--transition-speed);
            aspect-ratio: 2/3;
        }

        .activity-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .activity-link {
            display: block;
            width: 100%;
            height: 100%;
        }

        .activity-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-speed);
        }

        .activity-item:hover .activity-image {
            transform: scale(1.05);
        }

        @media (max-width: 768px) {
            .activities-grid {
                gap: 15px;
                padding: 15px 0;
            }
            
            .activity-item {
                min-width: 200px;
            }
            
            .activities-title {
                font-size: 1.5rem;
            }
        }
        /*estilos de las convocatorias home */
       .conv-section {
            padding: 40px 20px;
            margin: 0 auto;
        }

        .conv-title {
            margin-bottom: 30px;
            text-align: left;
        }

        .conv-carousel-container {
            overflow-x: auto; /* Permite scroll horizontal */
            padding-bottom: 10px;
            /* Quitar overflow: hidden para que funcione el scroll */
            position: relative; /* si usas botones absolutos */
            width: 100%;
        }

        .conv-carousel {
            display: flex;
            gap: 20px;
            /* No usar transform para scroll natural */
        }

        .conv-card {
            flex-shrink: 0; /* Evita que se reduzca */
            width:auto;
            transition: transform 0.3s ease;
            background-color: #fff;
        }

        .conv-card:hover {
            transform: translateY(-5px);
        }

        .conv-card img {
            width: 629px;
            height: 270px;
            object-fit: cover; /* Mantiene proporción cambia a contain cuando ya suban csas  */
        }

        .conv-content {
            padding: 15px;
        }
        /* Media queries para responsividad */
        @media (max-width: 1024px) {
            .conv-card img {
                width: 500px; /* Reduce el ancho en tablets */
                height: 215px; /* Ajusta la altura proporcionalmente */
            }
            .conv-carousel {
                gap: 15px; /* Reduce el gap en tablets */
            }
        }

        @media (max-width: 768px) {
            .conv-section {
                padding: 20px 10px; /* Reduce padding en móviles */
            }
            .conv-title {
                margin-bottom: 20px;
                font-size: 1.2rem; /* Ajusta tamaño de fuente si es necesario */
            }
            .conv-card img {
                width: 300px; /* Ancho más pequeño para móviles */
                height: 129px; /* Ajusta altura proporcionalmente */
            }
            .conv-carousel {
                gap: 10px; /* Gap más pequeño en móviles */
            }
            .conv-content {
                padding: 10px; /* Reduce padding interno */
            }
        }
        @media (max-width: 480px) {
            .conv-card img {
                width: 250px; /* Aún más pequeño para pantallas muy pequeñas */
                height: 107px; /* Ajusta altura */
            }
            .conv-carousel {
                gap: 8px; /* Gap mínimo */
            }
        }
        @media (max-width: 768px) {
            .conv-carousel {
                flex-wrap: nowrap;
            }
            .conv-card {
                width: 50%;
                max-width: 50% auto;
            }
        }

        /*texto de abajo del home*/
        .centered-text {
            
         
            text-align: center;
            margin-top: 10px;
        }
        .text-content {
            max-width: 1500px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .text-content p {
            color: #555;
           
            line-height: 1.5;
        }
        /*botones en el home de prensa y finanzas*/
        .seccion-dos-botones {
            display: flex;
            justify-content: center;
            gap: 20px;                 /* separación entre los rectángulos */
            margin: 40px 0;
        }

        .boton-seccion {
            background-color: #E9E9EB;
            color: #000;
            padding: 0;                        /* quitamos padding vertical del contenedor */
            font-weight: 700;
            text-decoration: none;
          
            display: flex;                     /* FLEX para centrar contenido */
            justify-content: center;           /* centra horizontal */
            align-items: center;               /* centra vertical */
            transition: 0.2s ease-in-out;
            text-align: center;
            height: 65px;
            width: 628px;
        }

        /* El h1 ya se centra solo */
        .boton-seccion h1 {
            font-size: 2.55rem;
            margin: 0;                         /* asegúrate de quitar margins */
        }


        /* Hover opcional */
        .boton-seccion:hover {
            background-color: #d5d5d8;
        }


  /*NOSOTROS estilos*/

    
        .hero-containern {
            position: relative;
            width: 100%;
            height: 56vh;/*alto del contenedor pai*/
        }
        
        .hero-imagen {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: brightness(0.8);
        }
        
        .hero-textn {
            position: absolute;
            bottom: 10%;
            left: 10%;
            color: white;
            max-width: 600px;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
        }
        
        .hero-titlen {
           
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.2;
        }
        
        .hero-subtitlen {
            font-size: clamp(1rem, 2vw, 1.5rem);
            font-weight: 400;
            line-height: 1.5;
        }
        
        @media (max-width: 768px) {
            .hero-containern {
                height: 15vh; /* menos alto en móviles */
            }
            .hero-textn {
                left: 5%;
                padding-right: 5%;
            }
          
        }

        /*texto de nosotros*/
        .hero-container1 {
            width: 80%;
            margin: 0 10%;
        }

        .hero-text1 {
            left: 0;
            right: 0;
            max-width: 100%;
            padding: 0 20px;
            margin-bottom: 20px;
        }

        .hero-title1 {
            margin-bottom: 10px;
        }

        .hero-subtitle1 {
            margin-bottom: 20px;
        }

        .footer-texts {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .footer-texts p {
            width: 45%; /* Ajusta el ancho de los textos en el pie */
        }
        /* OCULTAR TEXTO PRINCIPAL EN MÓVIL */
        @media (max-width: 768px) {
            .hero-text1 {
                display: none;
            }
        }

        /* For tablets and smaller screens (up to 768px width) */
        @media (max-width: 768px) {
            .hero-container1 {
                width: 90%;
                margin: 0 5%;
            }
            
   
            
            .hero-title1 {
                margin-bottom: 8px;
            }
            
            .hero-subtitle1 {
                margin-bottom: 15px;
            }
            
            .footer-texts {
                flex-direction: column; /* Stack vertically on tablets */
                align-items: center;
            }
            
            .footer-texts p {
                width: 100%; /* Full width when stacked */
                margin-bottom: 10px;
            }
        }

        /* For mobile phones (up to 480px width) */
        @media (max-width: 480px) {
            .hero-container1 {
                width: 100%;
                margin: 0;
            }
            
            .hero-text1 {
                padding: 0 10px;
                margin-bottom: 10px;
            }
            
            .hero-title1 {
                margin-bottom: 5px;
            }
            
            .hero-subtitle1 {
                margin-bottom: 10px;
            }
            
            .footer-texts {
                flex-direction: column; /* Stack vertically on mobile */
                align-items: flex-start; /* Align to start for better readability */
                margin-top: 15px;
            }
            
            .footer-texts p {
                width: 100%; /* Full width when stacked */
                margin-bottom: 8px;
            }
        }

/*lineas de accion*/
        /*titulo y subtitlulo*/
        .hero-container2{
            width: 100%;
        }
        .lineasaccion-text {
            left: 0;
            right: 0;
            max-width: 100%;
            padding: 0 20px;
            text-align: left;
            margin-bottom: 20px;
            padding-left: 90px;
            color: #fff;
        }
         .hero-title2 {
           text-align: left;
            margin-bottom: 10px;
        }
        /*imagenes acciones*/
        .hero-container3 {
            position: relative;
            width: 100%;
           
            margin-bottom: 5px; /* Espacio entre las imágenes */ 
        }
        
        .hero-image3 {
            width: 100%;/*ANCHO*/
            height: 50%;/*ALTO*/
            object-fit: contain;
            filter: brightness(0.8);
        }
       .hero-subtitle2 {
            margin-bottom: 20px;
            text-align: center;
            padding: 20px;
        }
        /* Contenedor principal del grid */
        .image-grid {
        display: grid;
        grid-template-columns: repeat(3, 431px); /* 3 columnas fijas de 426px cada una - ALINEACIÓN HORIZONTAL */
        grid-template-rows: 629px; /* Una sola fila de 629px de alto */
        gap: 5px; /* Espacio entre las imágenes */
        justify-content: center; /* Centra el grid horizontalmente */
        align-items: start; /* Alinea las imágenes desde arriba si hay variaciones */
        max-width: fit-content; /* Ajusta el ancho total al contenido (3 imágenes + gaps) */
        /*margin: 0 auto;  Centra todo en la página */
        margin: 40px auto; 
        object-fit: cover;
        }

        /* Cada ítem del grid (adaptado de tu .hero-container3) */
        .grid-item {
        position: relative;
        width: 426px; /* Ancho fijo */
        height: 629px; /* Alto fijo */
        }

        /* Estilos de la imagen (adaptados de tu .hero-image3) */
        .hero-image3 {
        width: 100%; /* Llena el ancho del contenedor */
        height: 100%; /* Llena el alto del contenedor para 426x629 exacto */
        object-fit: contain; /* Mantiene proporción sin distorsionar */
        filter: brightness(0.8); /* Efecto de brillo */
        display: block; /* Asegura que la imagen se comporte como bloque para alineación */
        }

        /* Responsive: Solo apila verticalmente en pantallas MUY pequeñas (ej. móviles < 600px) */
        @media (max-width: 600px) { /* Ajusté el breakpoint para que mantenga horizontal en tablets */
        .image-grid {
            grid-template-columns: 1fr; /* Apila en una columna solo en móviles */
            grid-template-rows: repeat(3, 629px); /* Tres filas en vertical */
            gap: 5px;
            max-width: 100%;
        }
        
        .grid-item {
            width: 100%;
            max-width: 426px;
            height: auto;
        }
        
        .hero-image3 {
            height: auto;
            padding: 30px;
        }
        }

        /* Para pantallas medianas (tablets), fuerza horizontal si es posible */
        @media (min-width: 601px) and (max-width: 1024px) {
        .image-grid {
            grid-template-columns: repeat(3, 1fr); /* Columnas flexibles pero horizontales */
            justify-content: center;
        }
        
        .grid-item {
            width: auto;
            max-width: 426px;
        }
        }

        /*utimas publicaciones*/
        .poster-container {
        display: flex;
        flex-wrap: nowrap; /* No permitir que las tarjetas bajen de fila */
        overflow-x: auto; /* Scroll horizontal si no caben */
        gap: 1.5rem;
        padding-bottom: 0.5rem; /* espacio para scrollbar */
        -webkit-overflow-scrolling: touch; /* suaviza scroll en iOS */
        }

        .poster-card {
        flex: 0 0 auto; /* No crecer ni encoger, ancho fijo */
        position: relative;
        border-radius: 10px;
        height: 500px;
        width: 300px;
        background-size: contain; /* Para que la imagen no se corte */
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
      /*  box-shadow: 0 4px 8px rgba(0,0,0,0.2);*/
        transition: box-shadow 0.3s ease;
        }

        .poster-card:hover {
        box-shadow: 0 8px 16px rgba(0,0,0,0.4);
        }

        .overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.9);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 15px;
        opacity: 0;
        transition: opacity 0.4s ease;
        box-sizing: border-box;
       
        }

        .poster-card:hover .overlay {
        opacity: 1;
        }

        .overlay h2 {
        font-size: 24px;
        margin-bottom: 10px;
        }

        .overlay p {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 8px;
        }
        /*botones de documentos*/

         .button-section {
            width: 95%;
            margin: 10px auto; /* Centra la sección de botones */
          }
          .wide-button {
              width: 100%; /* Cambia a 100% para que ocupe todo el contenedor */
              padding: 15px 20px;
              border: 3px solid #EFF2F6; /* Cambia el borde de color */
              background: #f8f8f8;
              color: rgb(7, 0, 0);
              text-align: left; /* Alinea el texto a la izquierda */
              margin-bottom: 4px;
              cursor: pointer;
              transition: background 0.3s;
          }
          .wide-button:hover {
              background: #000000;
              color: #fff;
          }
        @media (max-width: 1200px) {
            /* Ajusta el margen de botones para igualar en medianas */
            .button-section {
                margin: 40px auto; /* Igualado a 20px para coincidir con el grid */
                width: 60%;
            }
        }

           /* Estilos para el chatbot */
        #chatbox {
            position: fixed;
            bottom: 20px;
            right: 30px;
            width: 400px;
            max-height: 400px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            overflow: hidden;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            transition: width 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        }

        #chat {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
            max-height: 350px;
            background: #fafafa;
            scrollbar-width: thin;
            scrollbar-color: #c1c1c1 transparent;
        }

        /* Scrollbar para navegadores Webkit */
        #chat::-webkit-scrollbar {
            width: 8px;
        }

        #chat::-webkit-scrollbar-track {
            background: transparent;
        }

        #chat::-webkit-scrollbar-thumb {
            background-color: #c1c1c1;
            border-radius: 4px;
        }

        #chatbox footer {
            display: flex;
            padding: 15px 20px;
            background: #f9f9f9;
            border-top: 1px solid #ddd;
        }

        #userInput {
            flex-grow: 1;
            padding: 10px 15px;
            border: 1.5px solid #ccc;
            border-radius: 25px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            outline: none;
        }

        #userInput:focus {
            border-color: #611232;
            box-shadow: 0 0 8px rgba(97, 18, 50, 0.3);
        }

        #sendBtn {
            padding: 10px 20px;
            margin-left: 10px;
            background: #611232;
            color: white;
            border: none;
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 8px rgba(97, 18, 50, 0.3);
        }

        #sendBtn:hover {
            background: #7a1e44;
            box-shadow: 0 6px 12px rgba(122, 30, 68, 0.5);
        }

        .message {
            margin-bottom: 12px;
            padding: 12px 18px;
            border-radius: 20px;
            max-width: 75%;
            line-height: 1.4;
            word-wrap: break-word;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: background-color 0.3s ease;
        }

        .message.user {
            background: #d0e8ff;
            color: #0b3d91;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }

        .message.bot {
            background: #f0f0f0;
            color: #444;
            margin-right: auto;
            border-bottom-left-radius: 4px;
        }

        /* Responsive: tablets y móviles */
        @media (max-width: 480px) {
            #chatbox {
                width: 90vw;
                max-height: 60vh;
                bottom: 10px;
                right: 5vw;
                border-radius: 10px;
                font-size: 0.9rem;
            }

            #chat {
                max-height: 50vh;
                padding: 15px;
            }

            #userInput {
                font-size: 0.9rem;
                padding: 8px 12px;
            }

            #sendBtn {
                padding: 8px 15px;
                font-size: 0.9rem;
                margin-left: 8px;
            }

            .message {
                max-width: 85%;
                font-size: 0.9rem;
                padding: 10px 14px;
            }
        }

        @media (max-width: 768px) and (min-width: 481px) {
            #chatbox {
                width: 320px;
                max-height: 350px;
                bottom: 15px;
                right: 20px;
            }

            #chat {
                max-height: 300px;
                padding: 18px;
            }

            #userInput {
                font-size: 0.95rem;
                padding: 9px 14px;
            }

            #sendBtn {
                padding: 9px 18px;
                font-size: 0.95rem;
                margin-left: 9px;
            }

            .message {
                max-width: 80%;
                font-size: 0.95rem;
                padding: 11px 16px;
            }
        }

        /*PRENSA ESTLOS*/
        /*estilo de imagen inicial*/
                        /* Estilo de imagen inicial */
            .hero-container {
                position: relative;
                width: 100%;
                height: 110vh;
            }

            .hero-image {
                width: 100%;
                height: 100%;
                object-fit: none;
                filter: brightness(0.8);
            }

            .hero-text {
                position: absolute;
                bottom: 10%;
                left: 10%;
                color: white;
                max-width: 600px;
                text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
            }

            .hero-title {
                font-weight: 700;
                margin-bottom: 1rem;
                line-height: 1.2;
            }

        /*    .hero-container1 {
                padding: 20px;
            }*/

            /* Últimas publicacioness */
            .hero-text2 {
                text-align: center;
                margin: 0 100px;
                
            }

            .cartas {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
            }

            .newsletter-container {
                display: flex;
                justify-content: space-around;
                max-width: 1200px;
                flex-wrap: wrap; /* Mantén esto para pantallas grandes */
                /* Agrega esto para preparar el scroll en móviles */
                overflow-x: auto; /* Permite scroll horizontal */
                padding-bottom: 10px; /* Espacio para el scrollbar si es necesario */
            }


            .card1 {
                background: white;
                border: 1px solid #e5e7eb;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                margin: 20px;
                overflow: hidden;
                width: 250px;
                position: relative;
                transition: transform 0.3s, box-shadow 0.3s;
                box-sizing: border-box;
                text-decoration: none;
                display: block;
                flex-shrink: 0; /* Evita que se reduzca el ancho en flex */                
            }

            .card1:hover {
                transform: scale(1.05);
            }

            .card1 img {
                width: 100%;
                height: auto;
            }

            .card1-content {
                padding: 15px;
                text-align: center;
            }

            .eye {
                font-size: 24px;
                position: absolute;
                bottom: 10px;
                right: 10px;
                opacity: 0;
                transition: opacity 0.3s;
            }

            .card1:hover .eye {
                opacity: 1;
            }

            /* Espacio entre secciones */
            .section-separator {
                height: 40px; /* Espacio entre secciones */
            }

            /* Formulario de emails */
            .form-container {
                position: relative;
                width: 90%; /* Cambiado a 90% para mejor responsividad */
                max-width: 800px; /* Ancho máximo del contenedor */
                margin: 0 auto; /* Centrar el contenedor */
            }

            .contact-form {
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                padding: 20px;
            }

            .contact-form label {
                display: block;
                margin-bottom: 5px;
            }

            .contact-form input,
            .contact-form textarea {
                width: 100%;
                padding: 10px;
                margin-bottom: 15px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }

            .contact-form button {
                background-color: #5a5959;
                color: white;
                border: none;
                padding: 10px;
                border-radius: 4px;
                cursor: pointer;
                width: 100%;
            }

            .contact-form button:hover {
                background-color: #e4e4e4;
            }

            .phone-container {
                display: flex;
                align-items: center;
            }

            .phone-container select {
                margin-right: 10px;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 4px;
                flex: 1;
            }

            .phone-container input {
                flex: 2;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }

            /* Tarjetas del fondo */
            .contact-section {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
                padding: 0 50px;
               
            }

            .contact-card {
                background: #EFF2F6;
                text-align: left;
                padding: 1rem;
                flex: 1 1 220px;
                box-shadow: 0 1px 3px rgba(0,0,0,0.05);
                min-width: 230px;
                min-height: 140px;
            }

            .contact-card h3 {
                margin-bottom: 0.2rem;
                color: #1a1a1a;
            }

            .contact-card p {
                font-size: 1.5rem;
                margin: 0.3rem 0;
                color: #333;
                line-height: 1.3;
            }

            .contact-card a {
                color: #0055a5;
                text-decoration: none;
            }

            .contact-card a:hover {
                text-decoration: underline;
            }

            .icon {
                margin-right: 5px;
                color: #555;
            }

            /* Media queries para responsividad */
            @media (max-width: 768px) {
                .contact-section {
                    padding: 20px;
                    gap: 0.75rem;
                }

                .contact-card {
                    flex: 1 1 100%; /* Las tarjetas ocupan el ancho completo en pantallas pequeñas */
                    min-width: unset; /* Remover min-width para permitir flexibilidad */
                    min-height: 120px; /* Reducir altura mínima */
                    padding: 0.75rem;
                }

                .contact-card p {
                    font-size: 1.2rem; /* Reducir tamaño de fuente en móviles */
                }
            }

            @media (max-width: 480px) {
                .contact-section {
                    padding: 0.75rem;
                    gap: 0.5rem;
                }

                .contact-card {
                    padding: 0.5rem;
                    min-height: 100px;
                }

                .contact-card h4 {
                    font-size: 1rem; /* Ajustar tamaño de encabezado */
                }

                .contact-card p {
                    font-size: 1rem; /* Reducir aún más el tamaño de fuente */
                }
            }


            @media (max-width: 768px) {
            .newsletter-container {
                display: flex; /* Cambia a flex para fila horizontal */
                justify-content: flex-start; /* O space-around si prefieres, pero flex-start es mejor para scroll */
                flex-wrap: nowrap; /* Evita el wrap para mantener en fila */
                gap: 20px; /* Espacio entre tarjetas, como en conv-carousel */
                overflow-x: auto; /* Scroll horizontal */
                padding-bottom: 10px;
                /* Quita space-around si no lo necesitas, o ajústalo */
            }
            
            .card1 {
                width: 90vw; /* Ancho relativo a la pantalla */
                max-width: 250px; /* Límite máximo para no exceder el original */
                flex-shrink: 0; /* Evita que se apachurren */
                margin: 10px; /* Reduce margen para mejor ajuste */
            }

                .team-grid {
                    grid-template-columns: 1fr;
                }
                
                .section-title {
                    font-size: 2rem;
                    }
                    .hero-container {
                    height: 70vh; /* menos alto en móviles */
                }
                .hero-text {
                    left: 5%;
                    padding-right: 5%;
                }
                
            }

     

        /*Noticias*/
        /*imagen inicial de noticias*/
       
            .noticia-container {
                position: relative;
                width: 100%;
                height: 56vh;/*alto del contenedor pai*/

            }

            .noticia-image {
                width: 100%;
                height: 100%;
                object-fit: contain;
                filter: brightness(0.8);
            }

        .texto-noticias {
            position: absolute;
            bottom: 10px;
            left: 10%;
            transform: translateX(-50%);
            text-align: left;
        }
        @media (max-width: 768px) {
            .texto-noticias {
                font-size: 18px;
            }
            .noticia-container {
               height: 17vh; /* menos alto en móviles */
            }
        }
        @media (max-width: 480px) {
            .texto-noticias {
                font-size: 14px;
            }
        }
        .descripcion-noticias {
            position: relative; /* Cambiado a relative para evitar superposición */
            margin: 20px 10%; /* Añadido margen para separación */
            text-align: center;
        }
        @media (max-width: 768px) {
            .descripcion-noticias {
                font-size: 14px;
            }
        }
        @media (max-width: 480px) {
            .descripcion-noticias {
                font-size: 12px;
            }
        }

        /* Categorías de las noticias */

        .banner-categorias {
            display: flex;
            overflow-x: auto; /* Permitir desplazamiento horizontal */
            white-space: nowrap; /* Evitar que los elementos se envuelvan */
            padding: 10px 0; /* Espaciado vertical */
            padding-left: 20px;
            background-color: #ffffff;
            /* Opcional: Para scroll más suave en horizontal */
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch; /* Mejora el scroll en iOS */
        }

        .categoria-item {
            flex: 0 0 auto; /* Evitar que los elementos se estiren */
            margin-right: 10px; /* Espacio entre categorías */
            padding: 10px 20px; /* Espaciado interno */
            /*background-color: #d6d6d6;  Color de fondo de cada categoría (descomentado si lo necesitas) */
            color: rgb(0, 0, 0); /* Color del texto */
            font-weight: bold;
            text-align: center; /* Centrar el texto */
            cursor: pointer; /* Cambiar el cursor al pasar el mouse */
            /* Opcional: Para que los items "snapeen" al scroll */
            scroll-snap-align: start;
            font-size: 16px; /* Tamaño base para desktop */
            white-space: nowrap; /* Evita que el texto se rompa */
        }
       .titulo-categoria{
        margin: 0 2%;
       }
       .sin-noticias {
            text-align: center;
            padding: 60px 20px;
            margin: 40px auto;
            max-width: 800px;
            
            
            border-radius: 4px;
        }

        .sin-noticias h3 {
           
            margin-bottom: 10px;
            color: #131313;
            font-weight: 700;
        }

        .sin-noticias p {
           
            color: #0e0d0d;
        }


        .categoria-item:hover {
            background-color: #000000; /* Color de fondo al pasar el mouse */
            color: white;
        }

        /* Quitar color azul y subrayado en los links del banner */
        .banner-categorias a,
        .banner-categorias a:link,
        .banner-categorias a:visited,
        .banner-categorias a:hover,
        .banner-categorias a:active {
            text-decoration: none;
            color: inherit; /* Toma el color del .categoria-item */
        }

        

        /* Estilo cuando la categoría está activa/seleccionada */
        .banner-categorias .categoria-item.active {
            background-color: #000000;
            color: #fff;
            border-radius: 2px;
        }

        /* Tablet: pantallas medianas (hasta 1024px) */
        @media (max-width: 1024px) {
            .banner-categorias {
                padding-left: 15px; /* Reduce padding izquierdo */
            }
            
            .categoria-item {
                margin-right: 8px; /* Reduce espacio entre items */
                padding: 8px 15px; /* Padding más compacto */
                font-size: 15px;
            }
        }

        /* Mobile: pantallas pequeñas (hasta 768px) */
        @media (max-width: 768px) {
            .banner-categorias {
                padding-left: 10px; /* Padding mínimo */
                padding-right: 10px; /* Agrego padding derecho para simetría */
            }
            
            .categoria-item {
                margin-right: 6px; /* Aún más compacto */
                padding: 6px 12px; /* Reduce padding para ahorrar espacio */
                font-size: 14px; /* Texto más pequeño para mobile */
            }
        }

        /* Mobile muy pequeño (hasta 480px) */
        @media (max-width: 480px) {
            .banner-categorias {
                padding: 5px 0; /* Reduce padding vertical también */
                padding-left: 5px;
                padding-right: 5px;
            }
            
            .categoria-item {
                margin-right: 4px;
                padding: 5px 10px; /* Muy compacto */
                font-size: 13px; /* Mínimo legible */
            }
            /* Opcional: Si quieres cambiar a vertical en mobile muy pequeño (descomenta si prefieres) */
            /*
            .banner-categorias {
                flex-direction: column;
                overflow-x: hidden;
                overflow-y: auto;
                max-height: 300px; /* Limita altura si es vertical 
            }*/
            
            .categoria-item {
                margin-right: 0;
                margin-bottom: 5px;
                width: 100%; /* Ocupa todo el ancho */
            }   
        }


        .noticia-container1 {
            width: 100%;
            padding: 0 50px; /* Espacio interno para que no quede pegado a los bordes */
            box-sizing: border-box;
            display: flex;
            justify-content: center; /* Centra horizontalmente el contenido */
        }

        .noticia-text1 {
            max-width: 1600px;
            width: 100%;
            padding: 0 2%; /* Espacio lateral relativo */
            box-sizing: border-box;
            position: relative; /* Solo si necesitas posicionar elementos hijos */
            text-align: center; /* Centrar texto, cambia si quieres otro alineado */
        }

        .hero-title2 {
            margin-bottom: 10px;
            font-size: 1.5rem;
            line-height: 1.3;
        }

        /* Responsive para pantallas pequeñas */
        @media (max-width: 768px) {
            .noticia-text1 {
                padding: 0 5%;
            }
            .hero-title2 {
                font-size: 1.2rem;
            }
        }

        .noticia-text {
            position: absolute;
            bottom: 10%;
            left: 10%;
            max-width: 600px;
          
        }
        
        .noticia-title {
            padding-left: 20px;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.2;
        }
        
        .noticia-subtitle {
            font-size: clamp(1rem, 2vw, 1.5rem);
            font-weight: 400;
            line-height: 1.5;
        }
        
        @media (max-width: 768px) {
            .noticia-text {
                left: 5%;
                padding-right: 5%;
            }
        }
        /*video de vista noticias*/
        /* Estilos para el contenedor de video YouTube con clase .video-wrap */
        .video-wrap {
            margin: 20px auto; /* Cambiado: ahora centra horizontalmente con auto en left/right */
            aspect-ratio: 16 / 9; /* Mantiene la proporción 16:9 para videos responsivos */
            position: relative;
            width: 100%; /* Ocupa el ancho completo del contenedor padre */
            max-width: 800px; /* Limita el ancho máximo para pantallas grandes, ajusta según necesites */     
            border-radius: 8px; /* Agregué bordes redondeados opcionales para un look más moderno (si no los tenías) */
            overflow: hidden; /* Evita desbordes en el iframe */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
            background-color: #000; /* Fondo negro por si el iframe no carga inmediatamente */
        }

        /* Estilos para el iframe dentro de .video-wrap (YouTube) */
        .video-wrap iframe {
        position: absolute;
        inset: 0; /* Cubre todo el contenedor */
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 8px; /* Hereda los bordes redondeados */
        
        }

        /* Estilos para la ficha técnica */
        .ficha-tecnica {
            margin: 20px auto;
            width: 100%;
            max-width: 1200px;
            padding: 20px;
            background-color: #f8f9fa;
          
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            border-left: 4px solid #6f7377;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .ficha-tecnica h3 {
            margin: 0 0 15px 0;
            color: #333;
            font-size: 1.2em;
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 8px;
        }

        .ficha-tecnica ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .ficha-tecnica li {
            margin-bottom: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #e9ecef;
            color: #555;
            font-size: 0.9em;
        }

        .ficha-tecnica li:last-child {
            margin-bottom: 0;
            border-bottom: none;
        }

        .ficha-tecnica strong {
            color: #000000;
        }

        /* Responsivo para pantallas pequeñas */
        @media (max-width: 768px) {
            .video-wrap {
                margin: 15px 10px;
                max-width: calc(100% - 20px);
            }
            
            .video-wrap iframe {
                border-radius: 4px;
            }
            
            .video-local-wrap {
                margin: 15px 10px;
            }
            
            .video-local-wrap video {
                border-radius: 4px;
            }
            
            .ficha-tecnica {
                margin: 15px 10px;
                padding: 15px;
                max-width: calc(100% - 20px);
                border-left-width: 3px;
            }
            
            .ficha-tecnica h3 {
                font-size: 1.1em;
            }
            
            .ficha-tecnica li {
                font-size: 0.9em;
                padding: 6px 0;
            }
        }

        /* Opcional: Si quieres unificar estilos para videos locales (el <div> sin clase),
        puedes agregar una clase como 'video-local-wrap' al HTML y estilarla similarmente */
        .video-wrap {
            margin: 20px auto; /* Centrado y margen consistente */
            width: 100%;
            max-width: 800px;
            align-items: center; /* Centra verticalmente si es necesario */
            text-align: center; /* Centra el video */
        }

        .video-wrap video {
            width: 100%; /* Cambié de 80% a 100% para consistencia, pero ajusta si prefieres */
            max-width: 100%;
            height: auto; /* Mantiene proporción */
            max-height: 70vh;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: #000;
        }

        @media (max-width: 768px) {
            .video-wrap {
                margin: 15px 0;
            }
            
         
        }


        /*grid de noticias*/
        /* ===================== GRID BASE: MÓVIL ===================== */

        .grid-noticias {
            display: grid;
            grid-template-columns: 1fr;     /* Móvil: 1 columna */
            gap: 15px;
            padding: 20px;
        }

        /* ===================== TABLETS (≥ 600px) ===================== */

        @media (min-width: 600px) {
            .grid-noticias {
                grid-template-columns: repeat(2, 1fr); /* 2 columnas */
                padding: 30px;
                gap: 30px;
            }
        }

        /* ===================== ESCRITORIO (≥ 1024px) ===================== */

        @media (min-width: 1024px) {
            .grid-noticias {
                grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
                padding: 30px;
                gap: 40px;
            }
        }

        /* ===================== MONITORES GRANDES (≥ 1440px) ===================== */

        @media (min-width: 1440px) {
            .grid-noticias {
                grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
                max-width: 1400px;
                margin: 0 auto;
            }
        }


        .tarjeta-noticia {
            position: relative;
            width: 100%;
            height: 280px; /* Altura fija para las tarjetas */
            overflow: hidden;
            background-color:#000000 ;
            border-radius: 2px; /* Bordes redondeados */
            transition: transform 0.3s ease;
        }
        .tarjeta-noticia:hover {
            transform: translateY(-5px);
        }

        .categoria {
            position: absolute;
            top: 18px;
            left: 10px;
            background-color: #E79090; /* Color de fondo de la cinta */
            color: white;
            padding: 5px 10px;
            border-radius: 1px;
        }

        .imagen-noticia {
            width: 100%;
            height: 70%; /* Ajustar según sea necesario */
            object-fit: cover;
        }

        .descripcion-noticia {
            padding: 15px;
            text-align: center;
            color: #ffffff;
        }

    /*Estilos de notas*/
        .nota-container {
            padding-left: 30px;
            text-align: left; /* Alinea el texto a la izquierda */ 
            padding: 0 20px; /* Espacio lateral sin romper el centrado */
        }
        /*imagen 1*/
        .imagen-nota {
            width: 100%;
            max-width: 1310px; /* Ancho máximo */
            max-height: 487px; /* Altura máxima */
            margin: 20px auto; /* Centrar la imagen */
            overflow: hidden; /* Para evitar que la imagen se desborde */
        }
        .imagen-responsivanota {
            width: 100%;
            height: auto; /* Mantener la proporción de la imagen */
            max-height: 487px; /* Limitar la altura máxima */
            object-fit: contain; /* Mantener la proporción de la imagen */
        }

        /*CUERPO DE TEXTO */

        .nota-cuerpo {
            padding-left: 200px;  /* Espacio a la izquierda para desktop */
            padding-right: 200px; /* Espacio a la derecha para desktop */
            text-align: left;   /* Alinea el texto justificado */
        }

        /* Tablet: pantallas medianas (hasta 1024px) */
        @media (max-width: 1024px) {
            .nota-cuerpo {
                padding-left: 100px;  /* Reduce el padding */
                padding-right: 100px;
            }
        }

        /* Mobile: pantallas pequeñas (hasta 768px) */
        @media (max-width: 768px) {
            .nota-cuerpo {
                padding-left: 20px;   /* Padding mínimo para mobile */
                padding-right: 20px;
            }
        }

        /* Mobile muy pequeño (hasta 480px) */
        @media (max-width: 480px) {
            .nota-cuerpo {
                padding-left: 10px;   /* Aún más reducido */
                padding-right: 10px;
                text-align: justify;     /* Cambia a alineación izquierda para mejor legibilidad en mobile */
            }
        }


        /*imagen 2*/

        .imagen-nota2 {
            width: 100%;
            max-width: 1310px; /* Ancho máximo */
            max-height: 487px; /* Altura máxima */
            margin: 20px auto; /* Centrar la imagen */
            overflow: hidden; /* Para evitar que la imagen se desborde */
        }
        .imagen-responsivanota2 {
            width: 100%;
            height: auto; /* Mantener la proporción de la imagen */
            max-height: 487px; /* Limitar la altura máxima */
            object-fit: contain; /* Mantener la proporción de la imagen */
        }

        /*te puede interesar*/

        .interes-section {
            padding: 0; /* Sin espacio a los costados */
            background-color: #ffffff; /* Color de fondo opcional */
        }
        .interes-section h1 {
            text-align: left; /* Centra el título */
            margin: 40px 0; /* Margen superior e inferior */
            padding-left: 42px;
        }
        .tarjeta {
            width: calc(33.33% - 20px); /* Tres tarjetas en una fila */
            height: 457px; /* Altura de las tarjetas */
            margin: 10px; /* Espacio entre tarjetas */
            display: inline-block; /* Para que las tarjetas se alineen en fila */
            border: 1px solid #ddd; /* Borde opcional */
            border-radius: 5px; /* Bordes redondeados opcional */
            overflow: hidden; /* Para evitar que el contenido se desborde */
            text-align: center; /* Centra el contenido de las tarjetas */
        }
        .tarjeta img {
            width: 100%; /* Imagen ocupa todo el ancho de la tarjeta */
            height: auto; /* Mantiene la proporción de la imagen */
        }
        .tarjeta .categoria {
            font-size: 14px; /* Tamaño de la categoría */
            color: #666; /* Color de la categoría */
        }

        /*LEYES Y REGLAMENTOS*/
/* ====== Desktop / base ====== */
.leyes-container {
    width: 100%;
    max-width: 1200px;      /* opcional, para no crecer infinito en monitores grandes */
    margin: 0 auto;         /* centra el bloque */
    padding: 0 100px;       /* espacio lateral en escritorio */
}

.leyes-text {
    max-width: 100%;
    text-align: center;
    margin-bottom: 20px;
    /* ya no hace falta padding aquí */
}

.leyes-title {
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    /* sin padding extra para no duplicar */
}

/* ====== Tablets (pantallas medianas) ====== */
@media (max-width: 992px) {
    .leyes-container {
        padding: 0 40px;    /* menos padding lateral */
    }
}

/* ====== Móviles ====== */
@media (max-width: 576px) {
    .leyes-container {
        padding: 0 20px;    /* todavía menos en cel */
    }

    .leyes-title {
        font-size: 1.4rem;  /* baja un poquito el tamaño si lo tenías muy grande */
    }
}


 /* Buscador */
    .search-bar {
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      border-radius: 12px;
      transition: box-shadow 0.3s ease;
      max-width: 900px;
      margin: 0 auto 3rem auto;
      display: flex;
      overflow: hidden;
      border: 1px solid #000000;
    }
    .search-bar:hover {
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    .search-bar input {
      border: none !important;
      padding: 0.75rem 1rem !important;
    
      flex-grow: 1;
      outline: none !important;
    }
    .search-bar button {
      background: #7A7A7A !important;
      color: white !important;
      border: none !important;
      padding: 0 1.5rem !important;
      font-weight: 600 !important;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .search-bar button:hover {
      background: #7A7A7A !important;
    }

    /* Botones categorías */
    .btn-category2 {
      background:#000;
      color: white !important;
      font-weight: 600 !important;
      padding: 0.5rem 1.5rem !important;
      box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
      transition: background 0.3s ease !important;
      white-space: nowrap;
      user-select: none;
      border: none !important;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    }
    .btn-category2:hover, .btn-category2:focus {
      background: #fff;
      color: rgb(0, 0, 0) !important;
      outline: none !important;
      box-shadow: 0 4px 12px rgb(29 78 216 / 0.6);
    }

    /* Botones documentos recientes */
        .leyes-recent {
        left: 0;
        right: 0;
        max-width: 100%;
        padding: 0 40px;
        text-align: center;
        margin-bottom: 20px;
        
        /* Sin cambios aquí, pero asegúrate de que los botones sean bloques */
        }
        .botones-leyes-container {
        display: flex;
        flex-direction: column;  /* Apila verticalmente */
        align-items: center;     /* Centra horizontalmente */
        }
        .btn-recent {
        background: #fff;
        border: 2px solid #000000;
        color: #000 !important;
        font-weight: 200 !important;
        padding: 0.75rem 1.5rem !important;
        transition: background 0.3s ease !important;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
        user-select: none;
        display: grid !important;  /* Fuerza bloque */
        width: 100%;               /* Ocupa toda la anchura */
        margin: 0 auto 10px auto;  /* Centrado y espaciado */
                      /* Evita que Flexbox lo estire */
        }
     

        .btn-recent:hover, .btn-recent:focus {
            background:#000;
            color: white !important;
            outline: none !important;
        }


    /* Resultados */
    .result-item {
      animation: fadeIn 0.5s ease-in;
      background: white;
      border-radius: 0.75rem;
      padding: 1rem;
      box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
      margin-bottom: 1rem;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
      color: #000000;
    }
    .result-item a {
      color: #000000 ;
      font-weight: 600 !important;
      text-decoration: none !important;
    }
    .result-item a:hover {
      text-decoration: underline !important;
    }
    .leyes-result {
            left: 0;
            right: 0;
            max-width: 100%;
            padding: 0 40px;
            text-align: left;
            margin-bottom: 20px;
            color: #000;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
        /*Seccion de videos*/
       .main-content {
            display: flex;
            padding: 20px;
        }

        .main-videoini {
            flex: 2;
            margin-right: 20px;
           
        }

        .main-videoini video {
            width: 100%;
            height: auto; /* Asegura que el video mantenga su proporción */
            border-radius: 5px;
            
        }

        .related-videosini {
            flex: 1;
            background-color: #fff;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .related-videosini h3 {
            margin: 0 0 10px;
        }

        .related-videoini {
            display: flex;
            margin-bottom: 10px;
        }

        .related-videoini img {
            width: 80px;
            height: auto;
            margin-right: 10px;
        }

        .related-videoini-title {
            font-weight: bold;
            color: #333;
        }

        .videoini-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            padding: 20px;
        }

        .videoini {
            background-color: #fff;
            overflow: hidden;
         
        }

        .videoini img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            display: block;
        }


   

        /* Estilos para dispositivos móviles */
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column; /* Cambia a columna en pantallas pequeñas */
            }

            .main-videoini {
                margin-right: 0; /* Elimina el margen derecho */
                margin-bottom: 20px; /* Agrega margen inferior */
            }
        }
        /*texto de apoyos al cine*/
     /* texto de apoyos al cine */
        .hero-convoca {
            width: 100%;
            text-align: left;
            padding: 0 100px;
        }

        .hero-textconvoca {
            left: 0;
            right: 0;
            max-width: 100%;
            padding: 0 5%; /* Cambiado a porcentaje para mejor responsividad */
            text-align: left;
            margin-bottom: 20px;
        }

        .hero-titleconvoca {
            margin-bottom: 10px;
        }

        .hero-subtitleconvoca {
            margin-bottom: 20px;
        }

        .convocatorias {
        margin: 4px auto;
        max-width: 1200px;
        padding: 5px;
        }
.grid-convocatorias {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas grandes */
    grid-auto-rows: 170px; /* altura base para escalar */
    grid-gap: 20px;
}

/* Media query para tablets (pantallas medianas) */
@media (max-width: 1024px) {
    .grid-convocatorias {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    }
}

/* Media query para móviles (pantallas pequeñas) */
@media (max-width: 768px) {
    .grid-convocatorias {
        grid-template-columns: repeat(2, 1fr); /* Mini mosaico: 2 columnas para mantener variación */
        grid-auto-rows: 120px; /* Altura reducida para "mini" */
        grid-gap: 13px; /* Gap más pequeño para compactar */
    }
}

.item {
    position: relative;
    overflow: hidden;
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* recorta y llena el bloque; cambiar a contain si prefieres */
    display: block;
}

/* Variantes de tamaño */
.item.alto {
    grid-row: span 2; /* ocupa 2 filas */
}

.item.mediano {
    grid-row: span 1; /* solo una fila */
}

.item.ancho {
    grid-column: span 2; /* ocupa 2 columnas */
}

/* Ajustes para móviles en el mini mosaico */
@media (max-width: 768px) {
    .item.alto {
        grid-row: span 2; /* mantiene 2 filas, pero más compacto */
    }
    
    .item.ancho {
        grid-column: span 2; /* ocupa toda la fila en 2 columnas */
    }
    .item img{
        object-fit: contain;
    }
    /* .mediano ya es span 1, perfecto para mini mosaico */
}


        /* imagenes de la seccion de apoyos */
        .apoyo-container {
            position: relative;
            width: 100%;
            height: 80vh; /* Considera usar 'min-height' para mejor responsividad */
        }

        .apoyo-image {
            width: 100%;
            height: 100%;
            object-fit: contain; /* Cambiado a 'cover' para mejor ajuste */
            filter: brightness(0.8);
        }

        /* Media Queries para responsividad */
        @media (max-width: 768px) {
            .hero-textconvoca {
                padding: 0 10px; /* Aumenta el padding en pantallas más pequeñas */
            }

            .convocatorias-container {
                flex-direction: column; /* Asegúrate de que se mantenga en columna */
            }

            .convocatoria-image {
                max-width: 100%; /* Asegúrate de que las imágenes no excedan el ancho */
            }

            .apoyo-container {
                height: 50vh; /* Reduce la altura en pantallas más pequeñas */
            }
        }

        /*boton de resultados y texto*/
        .hero-convoca7 {
            display: flex; /* Usamos Flexbox para alinear lado a lado */
            justify-content: space-between; /* Espacio entre texto e imagen */
            align-items: center; /* Centra verticalmente */
            width: 100%; /* O ajusta al ancho deseado, ej. 1100px para acomodar 416 + 682 + gap */
           
            gap: 20px; /* Espacio opcional entre elementos */
        }

        .hero-textconvoca7 {
            width: 416px;
            height: 169px;
            display: flex;
            align-items: center; /* Centra el texto verticalmente dentro del contenedor */
            justify-content: center; /* Centra horizontalmente si es necesario */
            /* Agrega estilos adicionales como padding, background, etc. */
        }

        .hero-imageconvoca7 {
            width: 682px;
            height: 81px;
            overflow: hidden; /* Evita desbordes */
        }

        .hero-imageconvoca7 img {
            padding-right: 70px;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Mantiene proporción sin recortar */
        }

        .convocatorias-pading{
            max-width: 1200px; /* Limita el ancho máximo para evitar que se extienda demasiado en pantallas grandes */
            margin: 0 auto; /* Centra el contenedor horizontalmente */
            padding: 0 10.625rem; /* Equivalente a 170px, usando rem para responsividad básica */
            box-sizing: border-box; /* Incluye padding en el ancho total */
        }
                /* Media query para tablets (pantallas menores a 768px) */
        @media (max-width: 768px) {
        .convocatorias-pading {
            padding: 0 3rem; /* Reduce a ~48px para tablets */
        }
        }
        /* Media query para móviles (pantallas menores a 480px) */
        @media (max-width: 480px) {
        .convocatorias-pading {
            padding: 0 1rem; /* Reduce a ~20px para móviles */
        }
        }
/*recursos humanos*/
        .notcia-container1 {
            width: 100%;
            padding: 0 100px; 
        }
        .rh-text1 {
            left: 0;
            right: 0;
            max-width: 100%;
            padding: 0 280px;
            text-align: left;
            margin-bottom: 20px;
        }
        .rh-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #000;       /* fondo negro en toda la franja */
            padding: 0;  
            height: 80px;   
            color: #fff;
                /* sin espacio extra */
        }

        .rh-title1 {
            margin-bottom: 20px;
        }

        .rh-subtitle1 {
            margin-bottom: 20px;
        }
        
/*documentos de la visra de sobre nosotros aqui estan los estilos de los botones*/
        .button-section1{
            display: flex; /* Cambia a flex */
            flex-direction: column; /* Alinea los elementos en una columna */
            gap: 12px; /* Espacio entre los elementos */
            margin: 24px auto;
            max-width: 1100px;
            padding: 0 16px;
        }
        .wide-button{
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 14px 16px;
            border: 3px solid #000000;
          
            background: #fff;
            text-decoration: none;
            color: #1a1a1a;
            font-weight: 600;
            transition: box-shadow .2s ease, transform .02s ease;
        }
        .wide-button:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.08); }
        .wide-button small{ font-weight: 400; color:#6b7280; }
        .wb-left{ display:flex; align-items:center; gap:10px; }
        .wb-icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:8px; background:#f1f5f9; }
        .wb-chevron{ opacity:.6; }
        .empty-hint{ max-width: 900px; margin: 16px auto; padding: 14px 16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; color:#334155; }
        /*ESTILOS DE FOCINE*/
        
        .focine-section {
            padding: 40px 20px;
            overflow-x: auto;
            margin: 0 auto;
        }

        /*botones de produccion,ex,acervo*/
        .parent {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas grandes */
            grid-template-rows: repeat(2, 1fr); /* 2 filas para el span */
            gap: 5px;
            padding: 20px;
            max-width: 1200px; /* Ancho máximo para centrar en pantallas grandes */
            margin: 0 auto; /* Centrar el contenedor horizontalmente */
        }
                
        /* Estilos comunes para los "botones" (divs estilizados como botones) */
        .produccion,
        .exhibicion,
        .acervos {
            grid-row: span 2; /* Span 2 filas en pantallas grandes */
            color: white;
            border: none;
            /*padding: 0 20px;*/
            text-align: center;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Noto Sans', sans-serif; /* Tipografía específica: Noto Sans (moderna, sans-serif y legible en múltiples idiomas) */
            width: 100%;
            height: auto;
        }
        .produccion {
            background-color: #6B5293;
        }
        .exhibicion {
            background-color: #808BC3;
        }
        .acervos {
            background-color: #8690D6;
        }
                
        /* Efecto hover */
        .produccion:hover,
        .exhibicion:hover,
        .acervos:hover {
            background-color: #4a148c; /* Morado más oscuro */
        }

        /* Media Queries para Responsividad */
        /* Para tablets (ancho máximo 1024px) */
       /* Para monitores muy grandes (ancho mínimo 1800px) */
        @media (min-width: 1800px) {
            .parent {
                max-width: 1600px; /* Aumentar el ancho máximo para ocupar más espacio en monitores grandes */
                gap: 10px; /* Aumentar el gap para mejor separación visual */
                padding: 30px; /* Padding mayor para aprovechar el espacio */
            }
            
            .produccion,
            .exhibicion,
            .acervos {
                width:100%; /* Aumentar el ancho de cada elemento */
                height: auto; /* Aumentar la altura proporcionalmente */
                font-size: 30px; /* Fuente más grande para mejor legibilidad */
                padding: 0 30px; /* Padding mayor para el texto */
            }
        }
        /* Tablets y pantallas medianas (768px a 1024px): 2 columnas */
        @media (max-width: 1024px) and (min-width: 768px) {
            .parent {
                grid-template-columns: repeat(2, 1fr); /* Cambia a 2 columnas */
                grid-template-rows: repeat(2, 1fr); /* Mantiene 2 filas, pero ajusta span si es necesario */
            }
            
            .produccion,
            .exhibicion,
            .acervos {
                grid-row: span 1; /* En 2 columnas, cada uno ocupa 1 fila para mejor distribución */
                font-size: 16px; /* Fuente un poco más pequeña */
                padding: 15px; /* Padding reducido */
            }
        }
        
        /* Móviles y pantallas pequeñas (hasta 767px): 1 columna, apilados verticalmente */
        @media (max-width: 767px) {
            .parent {
                grid-template-columns: 1fr; /* 1 sola columna */
                grid-template-rows: repeat(3, auto); /* 3 filas para apilar los 3 elementos */
                gap: 10px; /* Gap más pequeño */
                padding: 10px;
            }
            
            .produccion,
            .exhibicion,
            .acervos {
                grid-row: span 1; /* Cada uno ocupa su propia fila */
                font-size: 16px; /* Fuente adaptable */
                padding: 15px;
                width: 100%; /* Asegura que ocupen todo el ancho */
                height: auto;
            }
        }
        
        /* Pantallas muy pequeñas (ej. móviles en orientación landscape o <480px): Ajustes adicionales */
        @media (max-width: 480px) {
            .parent {
                padding: 10px;
                gap: 8px;
            }
            
            .produccion,
            .exhibicion,
            .acervos {
                font-size: 14px; /* Fuente más pequeña para no desbordar */
                padding: 12px;
                width: 100%;
            }
        } 

        .focine-container {
            position: relative;
            width: 100%;
            height: 110vh;
        }
        .focine-container1 {
            width: 100%; 
        }
        
        .focine-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: brightness(0.8);
        }
        
        
        .focine-container1 {
            width: 100%; 
        }

       .focine-title, .focine-title2, .focine-text1 {
            text-align: left; /* Alineación a la izquierda */
            margin: 0%; /* Eliminar márgenes para alinear */
            padding-left: 35px; /* Eliminar padding si es necesario */
        }

        .focine-text1 p {
            margin-top: 10px; /* Ajustar el margen superior si es necesario */
            padding-left: 55px; /* Eliminar padding si es necesario */
        }
        /*BOTONES DE FOCINE*/
         /* Botones */
        .buttons-container-wrapper {
            max-width: 100%;
            margin: auto;
            padding: 0; /* quitar padding para que el scroll quede pegado */
            background-color: #000; /* fondo negro como en el ejemplo */
        }

        .buttons-container {
            display: flex;
            overflow-x: auto; /* scroll horizontal */
            white-space: nowrap; /* evitar que los botones se envuelvan */
            padding: 10px 20px; /* espacio vertical y lateral */
            scrollbar-width: none; /* Firefox: ocultar scrollbar */
        }

        .buttons-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari y Opera: ocultar scrollbar */
        }


        .category-button {
            flex: 0 0 auto; /* evitar que se estiren */
            margin-right: 20px; /* espacio entre botones */
            padding: 10px 20px;
            background-color: transparent; /* quitar fondo para que se vea el fondo negro */
            border: 1px solid white; /* borde blanco para que se vean */
            color: white;
            font-weight: 500;
            font-size: 16px;
            cursor: pointer;
            white-space: nowrap;
            text-align: center;
            transition: background-color 0.3s ease;
        }
        .category-button.active {
            background-color: #ffffff;
            border-color: #ffffff;
            color: rgb(8, 8, 8);
        }
        /* Estilo del thumb (la parte que se mueve) */
        .buttons-container::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 4px;
        }
        /* Firefox: mostrar scrollbar al hacer hover */
        .buttons-container:hover {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
        }


        /* Responsive */
        @media (max-width: 768px) {
           
            .focine-title {
                font-size: 2rem;
            }

            .focine-title2 {
                font-size: 1.2rem;
            }

            .buttons-container {
                overflow-x: auto;
                flex-wrap: nowrap;
                justify-content: flex-start;
                scrollbar-width: none;
            }

            .buttons-container::-webkit-scrollbar {
                display: none;
            }

            .category-button {
                padding: 10px 18px;
                font-size: 14px;
                white-space: nowrap;
            }
             .convocatorias-title {
                font-size: 2rem;
            }
            
            .convocatoria-card {
                flex: 0 0 300px;
            }
            
            .convocatoria-card img {
                width: 300px;
                height: 172px;
            }

        }
        /*menu desplegable ivon focine*/

        .image-container {
            flex-shrink: 0; /* Evita que la imagen se encoja */
            padding-right: -20px; /* Separación de 30px del borde derecho de la pantalla */
            order: 1; /* Imagen después del menú, por lo que queda a la derecha */
        }
        .sidebar-image {
            width: 490px;
            height: 700px;
            object-fit: cover; /* Mantiene proporciones y cubre el área */
        }

        details {
            margin: 0;
            border-bottom: 1px solid #eee; /* Separador sutil entre elementos */
        }
        details:last-child {
            border-bottom: none;
        }

        summary {
            padding: 20px;
            cursor: pointer;
            border-top: 2px solid black;
            border-bottom: none;
            border-left: none;
            border-right: none;
            font-weight: bold;
            font-size: 18px;
            outline: none;
            transition: background-color 0.3s ease, padding 0.3s ease;
            position: relative;
            list-style: none; /* Quita viñetas por defecto */
        }
        summary::-webkit-details-marker {
            display: none;
        }
        summary::before {
           
            margin-right: 10px;
            font-size: 14px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
        details[open] summary::before {
            transform: rotate(180deg); /* Rota la flecha para indicar abierto */
        }
        summary:hover {
            background-color: #e9e9e9;
            padding-left: 25px; /* Efecto sutil de expansión al hover */
        }
        .content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
            background-color: #fff;
        }
        details[open] .content {
            max-height: 2000px; /* Valor grande para cubrir cualquier contenido; ajusta si es necesario */
            padding: 20px;
        }
        .content h3 {
            color: #333;
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 16px;
        }
        .content p {
            margin-bottom: 15px;
        }
        .content ul {
            margin: 10px 0;
            padding-left: 20px;
        }
        .documents {
            background-color: #f8f9fa;
            padding: 15px;
            margin-top: 15px;
           
            border-left: 4px solid #333;
        }
        .documents h4 {
            margin: 0 0 10px 0;
            color: #333;
        }
        .documents ul {
            list-style-type: none;
            padding: 0;
        }
        .documents li {
            padding: 8px 0;
            border-bottom: 1px solid #ddd;
            transition: background-color 0.2s ease;
        }
        .documents li:hover {
            background-color: #e9ecef;
            padding-left: 10px;
        }
        a {
            color: #007bff;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .image-container {
                padding-right: 0;
                margin-bottom: 20px;
                order: 1; /* Imagen arriba en responsive */
            }

            .sidebar-image {
                width: 100%;
                max-width: 490px;
                height: auto; /* Mantiene proporción en responsive */
            }

            summary {
                font-size: 16px;
                padding: 15px;
            }
            .content {
                padding: 15px !important; /* !important para sobrescribir la transición */
            }
            details[open] .content {
                padding: 15px;
            }
            .documents {
                padding: 10px;
            }
        }

        @media (max-width: 480px) {
            summary {
                padding: 12px;
                font-size: 15px;
            }
            .content h3 {
                font-size: 14px;
            }
            .documents li {
                font-size: 14px;
            }
        }



        .secciones {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(1, 1fr); /* Mantengo, pero el span 3 crea filas implícitas */
            gap: 0.8125rem; /* 13px -> 0.8125rem */
            padding: 0 22.5rem; /* 360px -> 22.5rem para escalabilidad */
        }

        .seccion1 {
            background-color: #115C8E;
            grid-row: span 3 / span 3;
            height: 11.1875rem; /* 179px -> 11.1875rem */
            color: white;
            border: none;
            padding: 0 1.25rem; /* 20px -> 1.25rem */
            text-align: center;
            font-size: 2.5rem; /* 40px -> 2.5rem */
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .seccion2 {
            background-color: #304A8E;
            grid-row: span 3 / span 3;
            height: 11.1875rem; /* 179px -> 11.1875rem */
            color: white;
            border: none;
            padding: 0 1.25rem; /* 20px -> 1.25rem */
            text-align: center;
            font-size: 2.5rem; /* 40px -> 2.5rem */
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Responsivo */
        @media (max-width: 768px) {
            .secciones {
                grid-template-columns: 1fr; /* Cambia a 1 columna para tablets */
                padding: 0 2rem; /* Reduce padding lateral */
                gap: 1rem; /* Reduce gap */
            }
            .seccion1,
            .seccion2 {
                grid-row: span 1; /* Ocupa solo 1 fila en layout apilado */
                height: 10rem; /* Reduce altura para tablets */
                font-size: 2rem; /* Reduce fuente */
                padding: 0 1rem; /* Reduce padding interno */
            }
        }

        @media (max-width: 480px) {
            .secciones {
                padding: 0 1rem; /* Más pequeño en móviles */
                gap: 0.75rem; /* Reduce gap aún más */
            }
            .seccion1,
            .seccion2 {
                height: 8rem; /* Altura más pequeña para móviles */
                font-size: 1.5rem; /* Fuente más pequeña */
                padding: 0 0.75rem; /* Padding interno reducido */
            }
        }

/*desarrollo de proyectors y estructura de guion*/

        /*convocatorias focine*/
 /* Sección Convocatorias Horizontal */
        .convocatorias-section {
        
            padding: 60px 20px;
            margin-top: 40px;
        }

        .convocatorias-container {
            max-width: 1400px;
            margin: 0 auto;
            overflow: hidden;
        }

        .convocatorias-title {
            text-align: left;
            margin-bottom: 10px;
           
            position: relative;
        }

        .convocatorias-title:after {
            content: '';
            display: block;
            width: 100px;
            height: 4px;
         
            margin: 15px auto;
        }

        .convocatorias-horizontal {
            display: flex;
            gap: 30px;
            overflow-x: auto;
            padding-bottom: 20px;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .convocatoria-card {
            flex: 0 0 426px;
            scroll-snap-align: start;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .convocatoria-card:hover {
            transform: translateY(-5px);
        }

        .convocatoria-card img {
            width: 426px;
            height: 245px;
            object-fit: cover;
            display: block;
        }

        /* Hide scrollbar but keep functionality */
        .convocatorias-horizontal::-webkit-scrollbar {
            display: none;
        }

        /*convocatorias focine*/
 /* Sección Convocatorias Horizontal */
        .convocatorias-section {
        
            padding: 60px 20px;
            margin-top: 40px;
        }

        .convocatorias-container {
            max-width: 1400px;
            margin: 0 auto;
            overflow: hidden;
        }

        .convocatorias-title {
            text-align: left;
            margin-bottom: 10px;
           
            position: relative;
        }

        .convocatorias-title:after {
            content: '';
            display: block;
            width: 100px;
            height: 4px;
         
            margin: 15px auto;
        }

        .convocatorias-horizontal {
            display: flex;
            gap: 30px;
            overflow-x: auto;
            padding-bottom: 20px;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .convocatoria-card {
            flex: 0 0 426px;
            scroll-snap-align: start;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .convocatoria-card:hover {
            transform: translateY(-5px);
        }

        .convocatoria-card img {
            width: 426px;
            height: 245px;
            object-fit: cover;
            display: block;
        }

        /* Hide scrollbar but keep functionality */
        .convocatorias-horizontal::-webkit-scrollbar {
            display: none;
        }
/*acervo*/
        
        .pila-imagenes {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 20px;
            width: 100%;
            max-width: 1600px; /* ancho máximo para pantallas grandes */
            margin-left: auto;
            margin-right: auto; /* centra la pila en pantallas grandes */
        }

        .imagen-container {
            background: rgba(255, 255, 255, 0.05);
         
            overflow: hidden;
            transition: transform 0.2s ease;
            width: 100%; /* ocupa todo el ancho del contenedor padre */
            max-width: 100%; /* no excede el ancho del padre */
        }

        .imagen-container:hover {
            transform: scale(1.05);
        }

        .imagen {
            width: 100%; /* la imagen ocupa todo el ancho del contenedor */
            height: auto; /* mantiene la proporción */
            object-fit: contain;
            display: block; /* elimina espacios debajo de la imagen */
        }

        @media (max-width: 480px) {
            .pila-imagenes {
                max-width: 100%;
                padding: 0 10px; /* un poco de espacio a los lados */
            }
        }

        /*PELICULAS expo acervos */
.containerpelis {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 0px; /* Espacio en medio entre las dos pilas (izquierda/derecha) */
    justify-content: space-between;
    padding: 24px; /* Padding generoso alrededor del contenedor */
    align-items: flex-start; /* Alinea las pilas desde arriba para consistencia vertical */
}

.containerpelis p { /* Estilo para el mensaje "No hay películas" (centrado y visible) */
    width: 100%;
    text-align: center;
    
    font-style: italic;
    margin: 20px 0;
    font-size: 1.1rem;
}

.stack {
    display: flex;
    flex-direction: column; /* Apila imágenes verticalmente en cada pila */
    gap: 7px; /* Espacio entre imágenes dentro de cada pila */
    width: 48%; /* Cada pila ocupa ~48% para dejar espacio con gap */
}

.stack.izquierda {
     order: 1;/* para izquierda */
}

.stack.derecha {
    order: 2; /*para derecha, pero no es necesario con flex */
}

.image-wrapper {
    position: relative;
    cursor: pointer;
   
    overflow: hidden; /* Para que el overlay no se salga de los bordes */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra inicial sutil para profundidad */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    width: 100%; /* Ocupa todo el ancho de su stack */
}

.image-wrapper:hover,
.image-wrapper:focus-within {
    box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* Sombra más intensa en hover */
    transform: translateY(-4px); /* Elevación sutil (no desalinea las pilas) */
}

.image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 250px; /* Altura mínima para consistencia en las pilas */
    object-fit: cover; /* Cubre el espacio sin distorsión (ideal para galerías) */
    transition: transform 0.3s ease;
}

.image-wrapper:hover img,
.image-wrapper:focus-within img {
    transform: scale(1.05); /* Zoom suave solo en la imagen */
}

.info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.7)); /* Gradiente para mejor legibilidad del texto */
    color: #fff;
    padding: 16px;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    line-height: 1.4; /* Espaciado de texto mejorado */
    max-height: 100%; /* Limita la altura para no tapar toda la imagen (scroll si es necesario) */
    overflow-y: auto; /* Scroll vertical si la sinopsis es muy larga */
    border-radius: 0 0 8px 8px; /* Bordes redondeados solo en la parte inferior del overlay */
}

.image-wrapper:hover .info-overlay,
.image-wrapper:focus-within .info-overlay {
    opacity: 1;
    transform: translateY(0); /* Desliza hacia arriba suavemente */
}

.info-title {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 2.1rem; /* Tamaño base para títulos */
}

.info-title + .info-title { /* Para el segundo .info-title (director + año) */
    font-weight: normal; /* No bold para director/año */
    font-size: 0.95rem;
    margin-bottom: 12px;
    opacity: 0.9; /* Ligeramente más tenue para jerarquía */
}

.info-overlay div { /* Para la sinopsis y otros divs dentro del overlay */
    margin-bottom: 8px;
}

.info-overlay br { /* Para el <br> antes del link */
    display: none; /* Opcional: Elimina salto de línea extra si no lo quieres */
}

.info-overlay a {
    color: #fff;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.info-overlay a:hover {
    color: #ccc; /* Hover sutil en el link "Ver ficha" */
}

/* Responsive para tablets y móviles: apila las stacks verticalmente (una columna) */
@media (max-width: 768px) {
    .containerpelis {
        gap: 16px;
        padding: 16px;
        flex-direction: column; /* Stacks se apilan verticalmente */
    }
    .stack {
        width: 100%; /* Cada stack ocupa todo el ancho en móviles */
        gap: 16px;
    }
    .info-overlay {
        padding: 12px;
        max-height: 50%; /* Menos altura en móviles para no tapar mucho */
    }
    .info-title {
        font-size: 1rem;
    }
    .image-wrapper img {
        min-height: 200px; /* Imágenes más compactas en móviles */
    }
    .containerpelis p {
        font-size: 1rem;
    }
}

/* Mejoras para pantallas muy grandes: más espacio en pilas */
@media (min-width: 1600px) {
    .containerpelis {
        max-width: 1400px;
        gap: 10px; /* Más espacio entre las dos pilas */
        padding: 48px;
    }
    .stack {
        width: 48%;
        gap: 32px; /* Más espacio entre imágenes en cada pila */
    }
    .info-overlay {
        font-size: 1.125rem;
        padding: 20px;
        max-height: 70%; /* Más espacio para texto largo */
    }
    .info-title {
        font-size: 1.5rem;
    }
    .info-title + .info-title {
        font-size: 1.125rem;
    }
    .image-wrapper img {
        min-height: 300px; /* Imágenes más altas para pantallas grandes */
    }
}


        /*imagen de la portada pelicula acervo expo*/
         .hero-acervopeli {
            position: relative;
            width: 100%;
            height: 56vh;/*alto del contenedor pai*/
        }
        
        .acervopeli-imagen {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: brightness(0.8);
        }
        @media (max-width: 768px) {
            .hero-acervopeli {
                height: 15vh; /* menos alto en móviles */
            }
        }

        /*transparencia*/
.tr-header1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000000; /* fondo negro */
    border: 2px solid #000; /* contorno negro */
    padding: 0;
    height: 80px;
    color: #f8f8f8; /* letras blancas */
}
.tr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff; /* fondo blanco */
    border: 2px solid #000; /* contorno negro */
    padding: 0;
    height: 70px;
    color: #000; /* letras negras */
}
.tr-header h1 {
    padding-left: 80px;
    font-size: 4.25rem;
}
.tr-header1 h1 {
    padding-left: 80px;
    font-size: 5.25rem;
}

.unidad-rectangulo {
    width: 490px;
    height: auto;
    background: #E6F0E6; /* fondo verde claro */
    display: flex;
    align-items: center; /* centra verticalmente el h1 */
    justify-content: center; /* centra horizontalmente el h1 */
    text-align: left; /* centra el texto dentro del h1 */
    margin: 28px 0; /* centra el rectángulo horizontalmente en la página */
    position: relative; /* para asegurar el centrado */
    color: #000;
}
.unidad-rectangulo h1 {
    font-size: 4.50rem;
    padding-left: 80px;
}
.unidad-rectangulo h2 {
    font-size: 3.50rem;
    padding-left: 80px;
}

.tarjeta-info {
    height: 200px;
    width: 424px; /* ancho aproximado para la tarjeta */
    padding: 20px;
    background: #E9E9EB; /* fondo gris claro */
    margin: 20px auto; /* centrado horizontalmente */
    text-align: center;
    align-items: center; /* centra verticalmente el h1 */
    justify-content: center; /* centra horizontalmente el h1 */
}
.tarjeta-info p {
    margin: 5px 0;
}

/* Comité de ética estilos */
.comite-rectangulo {
    width: 380px;
    height: 180px;
    background: #E6F0E6; /* fondo verde claro */
    border: 2px solid #000; /* contorno negro para el rectángulo */
    display: flex;
    align-items: center; /* centra verticalmente el h1 */
    justify-content: center; /* centra horizontalmente el h1 */
    text-align: center; /* centra el texto dentro del h1 */
    margin: 0 auto; /* centra el rectángulo horizontalmente en la página */
    position: relative; /* para asegurar el centrado */
}
.grid-comite {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap: 8px; /* espacio entre tarjetas */
    justify-content: right; /* centrar el grid horizontalmente */
    max-width: 800px; /* ancho máximo para el grid, ajusta según necesites */
    margin: 0 1230px auto; /* centrar el contenedor en la página */
}
.tarjeta-comite {
    width: 380px;
    height: auto;
    /* ancho completo dentro de la columna del grid */
    padding: 0 80px;
    background: #E9E9EB; /* fondo gris claro */
    text-align: center;
    box-sizing: border-box; /* para incluir padding en el ancho */
}
.tarjeta-comite p {
    font-size: 1.25rem;
    margin: 15px 0;
}

/* Obligaciones */
:root {
    --negro: #000;
    --gris: #f4f4f4;
    --gris-texto: #555;
}

.obligaciones {
    padding: 50px 0;
    font-family: 'Arial', sans-serif;
    color: var(--negro);
}

.obl-container {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
}

.obl-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.obl-intro {
    color: var(--gris-texto);
    line-height: 1.6;
    margin-bottom: 35px;
    padding-left: 500px;
    padding-right: 70px;
}

/* Cuadros superiores */
.obl-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
    padding-left: 500px;
    padding-right: 100px;
}
.obl-boxes2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 40px;
    padding-left: 600px;
    padding-right: 210px;
}

.obl-box {
    height: 85px;
    width: 316px;
    border: 2px solid #000;
    text-align: center;
    padding: 15px 10px;
    font-weight: 700;
    background: #fff;
    text-decoration: none;
    color: #000;
    transition: all 0.2s ease;
}

.obl-box span {
    font-weight: 400;
    font-size: 0.8rem;
    display: block;
    margin-top: 3px;
}

.obl-box:hover {
    background: var(--negro);
    color: #fff;
    transform: translateY(-3px);
}

.obl-box.wide {
    grid-column: span 2;
}

/* Tarjetas grises */
.obl-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding-left: 120px;
}

.obl-card {
    width: 537px;
    height: 430px;
    background: var(--gris);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.obl-card h1 {
    text-align: left;
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.obl-card p {
    text-align: justify;
    color: var(--gris-texto);
    line-height: 1.5;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* Botón gris dentro de tarjetas */
.obl-btn-gray {
    display: inline-block;
    background: #ddd;
    color: var(--negro);
    text-decoration: none;
    font-weight: 600;
    padding: 10px 16px;
    transition: background 0.2s ease;
}

.obl-btn-gray:hover {
    background: #c9c9c9;
}

/* Media Queries para Responsividad */

/* Pantallas grandes (desktops grandes, >1200px) */
@media (min-width: 1201px) {
    .tr-header h1 {
        font-size: 4.5rem; /* Aumentar ligeramente en pantallas muy grandes */
    }
    .tr-header1 h1 {
        font-size: 5.5rem;
    }
    .unidad-rectangulo h1 {
        font-size: 4.75rem;
    }
    .obl-title {
        font-size: 2.5rem;
    }
    .obl-card h1 {
        font-size: 3.5rem;
    }
}

/* Pantallas medianas (tablets, 768px - 1200px) */
@media (max-width: 1200px) {
    .tr-header h1 {
        font-size: 3.5rem;
        padding-left: 40px;
    }
    .tr-header1 h1 {
        font-size: 4.5rem;
        padding-left: 40px;
    }
    .tr-header, .tr-header1 {
        height: auto;
    }
    .unidad-rectangulo {
        width: 90%; /* Hacer más flexible */
        max-width: 490px;
        height: 120px;
        margin: 20px auto;
    }
    .unidad-rectangulo h1 {
        font-size: 3.5rem;
        padding-left: 40px;
    }
    .tarjeta-info {
        width: 90%;
        max-width: 424px;
        height: auto; /* Permitir altura variable */
        padding: 15px;
    }
    .comite-rectangulo {
        width: 90%;
        max-width: 380px;
        height: 150px;
    }
    .grid-comite {
        grid-template-columns: repeat(2, 1fr);
        margin: 0 auto;
        max-width: 90%;
        padding: 0 20px;
    }
    .tarjeta-comite {
        width: 100%;
        height: 150px;
        padding: 0 40px;
    }
    .tarjeta-comite p {
        font-size: 1rem;
    }
    .obl-intro {
        padding-left: 20px;
        padding-right: 20px;
    }
    .obl-boxes {
        grid-template-columns: repeat(2, 1fr);
        padding-left: 20px;
        padding-right: 20px;
    }
    .obl-boxes2 {
        grid-template-columns: repeat(2, 1fr);
        padding-left: 20px;
        padding-right: 20px;
    }
    .obl-box {
        width: 100%;
        height: auto;
        padding: 10px;
    }
    .obl-cards {
        grid-template-columns: 1fr;
        padding-left: 20px;
        padding-right: 20px;
    }
    .obl-card {
        width: 100%;
        height: auto;
        max-width: 537px;
    }
    .obl-card h1 {
        font-size: 2.5rem;
    }
    .obl-card p {
        font-size: 0.9rem;
    }
}

/* Pantallas pequeñas (móviles, <768px) */
@media (max-width: 767px) {
    .tr-header h1 {
        font-size: 2.5rem;
        padding-left: 20px;
    }
    .tr-header1 h1 {
        font-size: 3.5rem;
        padding-left: 20px;
    }
    .tr-header, .tr-header1 {
        height: auto;
        flex-direction: column; /* Apilar elementos si es necesario */
        text-align: center;
    }
    .unidad-rectangulo {
        width: 95%;
        height: auto;
        margin: 15px auto;
    }
    .unidad-rectangulo h1 {
        font-size: 2.5rem;
        padding-left: 20px;
        text-align: center;
    }
    .tarjeta-info {
        width: 95%;
        height: auto;
        padding: 10px;
        margin: 10px auto;
    }
    .comite-rectangulo {
        width: 95%;
        height: 120px;
    }
    .grid-comite {
        grid-template-columns: 1fr; /* Una columna en móviles */
        margin: 0 auto;
        max-width: 95%;
        padding: 0 10px;
    }
    .tarjeta-comite {
        width: 100%;
        height: 120px;
        padding: 0 20px;
    }
    .tarjeta-comite p {
        font-size: 0.9rem;
    }
    .obl-title {
        font-size: 1.8rem;
        text-align: center;
    }
    .obl-intro {
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }
    .obl-boxes {
        grid-template-columns: 1fr;
        padding-left: 10px;
        padding-right: 10px;
    }
    .obl-boxes2 {
        grid-template-columns: 1fr;
        padding-left: 10px;
        padding-right: 10px;
    }
    .obl-box {
        width: 100%;
        height: auto;
        padding: 10px;
    }
    .obl-box.wide {
        grid-column: span 1;
    }
    .obl-cards {
        grid-template-columns: 1fr;
        padding-left: 10px;
        padding-right: 10px;
    }
    .obl-card {
        width: 100%;
        height: auto;
    }
    .obl-card h1 {
        font-size: 2rem;
        text-align: center;
    }
    .obl-card p {
        font-size: 0.85rem;
    }
    .obl-btn-gray {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* Responsive existente para obligaciones (refinado) */
@media (max-width: 900px) {
    .obl-boxes {
        grid-template-columns: repeat(2, 1fr);
    }
    .obl-box.wide {
        grid-column: span 2;
    }
    .obl-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .obl-boxes {
        grid-template-columns: 1fr;
    }
}

/* Pantallas grandes (desktops grandes, >1200px) */
@media (min-width: 1201px) {
    .rh-text1 {
        padding: 0 320px; /* Aumentar padding ligeramente en pantallas muy grandes */
    }
    .rh-header1 {
        height: 110px; /* Aumentar altura si es necesario */
    }
}
/* Pantallas medianas (tablets, 768px - 1200px) */
@media (max-width: 1200px) {
    .rh-text1 {
        padding: 0 150px; /* Reducir padding para tablets */
    }
    .rh-header1 {
        height: 90px; /* Reducir altura */
    }
}
/* Pantallas pequeñas (móviles, <768px) */
@media (max-width: 767px) {
    .rh-text1 {
        padding: 0 20px; /* Reducir padding significativamente para móviles */
        text-align: center; /* Centrar texto en móviles para mejor legibilidad */
    }
    .rh-header1 {
        height: 60px; /* Reducir altura */
        flex-direction: column; /* Apilar elementos si es necesario */
        text-align: center;
    }
    .rh-title1 {
        margin-bottom: 15px; /* Ajustar margen */
    }
}
    .dias-inhabiles{ padding: clamp(20px,3vw,36px) 0; color:#111; }
 /* Grid de tarjetas */
  .di-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:18px;
    padding: 0 0 16px;  /* quité los 500px y 100px */
  }

  .di-card{
    border:1px solid #e3e6e8;
    background:#f7f8f9;
    overflow:hidden;
  }
  .di-card p{
    font-size: 1rem;
  }
  .di-card header{
    background: #dde6ee;
    color:#2a2f33;
    font-weight:800;
    text-align:center;
    padding:10px 8px;
    letter-spacing:.4px;
  }
  .di-body{
    padding:16px 16px 18px;
    text-align:center;
    min-height:150px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
  }
  .di-body p{ margin:0; }
  .di-body p strong{ font-weight:800; }
/* Contenedor general (opcional, pero ayuda) */
.dias-inhabiles-wrapper{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 32px;
}
/* Responsive */
@media (max-width: 768px){
  /* En tablet y cel: una sola columna para que no se apachurren */
  .di-grid{
    grid-template-columns: 1fr;
  }

  .di-body{
    text-align: left;  /* suele leerse mejor en cel */
  }
}

@media (max-width: 480px){
  .di-card p,
  .di-card li{
    font-size: 0.9rem;
    line-height: 1.5;
  }
}


/*proteccion de datos personales*/
.proteccion-rectangulo {
    width: 490px;
    height: 140px;
    background: #F0E6E6; /* fondo rosa claro */
    display: flex;
    align-items: center; /* centra verticalmente el h1 */
    justify-content: center; /* centra horizontalmente el h1 */
    text-align: left; /* centra el texto dentro del h1 */
    margin: 28px 0; /* centra el rectángulo horizontalmente en la página */
    position: relative; /* para asegurar el centrado */
    color: #000;
}
.proteccion-rectangulo h1 {
    font-size: 4.50rem;
    padding-left: 80px;
}
.proteccion-rectangulo h2 {
    font-size: 3.50rem;
    padding-left: 80px;
}
 /* Tablet responsiveness */
@media (max-width: 1024px) {
    .proteccion-rectangulo {
        width: 80vw; /* 80% of viewport width */
        height: auto; /* Allow height to adjust */
        padding: 20px; /* Add internal padding for breathing room */
    }
    .proteccion-rectangulo h1 {
        font-size: 3.00rem;
        padding-left: 40px;
    }
    .proteccion-rectangulo h2 {
        font-size: 2.50rem;
        padding-left: 40px;
    }
}
/* Mobile responsiveness */
@media (max-width: 768px) {
    .proteccion-rectangulo {
        width: 90vw; /* 90% of viewport width */
        height: auto;
        padding: 15px;
    }
    .proteccion-rectangulo h1 {
        font-size: 2.50rem;
        padding-left: 20px;
    }
    .proteccion-rectangulo h2 {
        font-size: 2.00rem;
        padding-left: 20px;
    }
}

  .pdp-row{
    display: grid;
    grid-template-columns: 600px ; /* izquierda rectángulo, derecha botones */
    gap: 16px;
    align-items: right;
  }


  .pdp-actions{
    /* desplazamos el bloque de botones para que empiece a media altura del rectángulo */
    padding-left: 500px;
  }

  .pdp-btn{
    display: block;
    width: 800px;
    text-decoration: none;
    color:#2b2b2b;
    border: 2px solid #000;
    background: #fff;
    padding: 10px 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 700;
    text-align: center;
    transition: .15s ease;
  }
  .pdp-btn:hover{
    background: #000;
    color: #fff;
  }

  /* Responsive */
  @media (max-width: 880px){
    .pdp-row{ grid-template-columns: 1fr; }
    .pdp-badge{ width: max-content; }
    .pdp-actions{ padding-top: 12px; } /* al apilar, quitamos el “media altura” */
  }

  /*apertiura*/
    .ap-title1 {
    margin-bottom: 20px;
    }
    .ap-text1 {
        left: 0;
        right: 0;
        max-width: 100%;
        padding: 0 180px;
        text-align: left;
        margin-bottom: 20px;
    }

@media (max-width: 1024px) {
    .ap-text1 {
        padding: 0 100px;
    }
}
/* Mobile responsiveness */
@media (max-width: 768px) {
    .ap-text1 {
        padding: 0 20px;
    }
}
    /*informacion util*/
.info-util {
  padding: 40px 0;
  color: var(--iu-text);
  font-family: Arial, sans-serif;
}

.iu-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  align-items: start;
}

/* Columna izquierda */
.iu-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.iu-badge {
  background: var(--iu-blue);
  border-left: 6px solid #000;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.iu-badge h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
}

.iu-image img {
  width: 100%;
  max-width: 310px;
  height: auto;
  border: 1px solid #ccc;
}

/* Columna derecha */
.iu-right p {
  margin-bottom: 16px;
  line-height: 1.6;
  color: var(--iu-muted);
  text-align: justify;
}

/* Responsive */
@media (max-width: 880px) {
  .iu-container {
    grid-template-columns: 1fr;
  }
  .iu-left {
    align-items: center;
  }
  .iu-badge {
    width: 100%;
    text-align: center;
  }
  .iu-image img {
    margin-bottom: 20px;
  }
}

/*section del editor de texto para lo de transparencia proactiva prueba*/
.editor-output {
  width: 1294px;
  height: 1000px;
  border: 2px solid #000;        /* opcional, solo para ver el contorno */
  margin: 0 auto;                /* centrar horizontalmente */
  overflow: auto;                /* muestra scroll si el contenido se pasa */
  background-color: #fff;        /* fondo blanco o el que uses */
  box-sizing: border-box;        /* asegura que el borde no altere el tamaño */
  padding: 20px;                 /* espacio interior */
}

/* El contenido del editor */
.contenido-editor {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  color: #222;
}

/*los sumary de transparencia*/


  .cs{ padding: 28px 0; color:#111; }
  .cs-wrap{
    max-width: 1100px; margin:0 auto; padding:0 16px;
    display:grid; grid-template-columns: 300px 1fr; gap:24px; align-items:start;
  }

  /* Izquierda */
  .cs-badge{
    background:#c6d9eb; border-left:6px solid #000;
    padding:14px 18px; margin-bottom:20px;
  }
  .cs-badge h2{ margin:0; font-size:1.6rem; font-weight:800; line-height:1.15; }
  .cs-sideinfo{ color: #111; line-height:1.4;text-align: left; }

  /* Derecha */
  .cs-intro{
    color: #fff; margin:0 0 8px; line-height:1.6;
    border-bottom:2px solid #fff; padding-bottom:10px;
  }

  /* Acordeones */
  .cs-acc{
    border-bottom:2px solid #ffffffff;
    padding:10px 0;
  }
  .cs-acc + .cs-acc{ margin-top:6px; } /* separación entre filas */

  .cs-acc > summary{
    list-style:none; cursor:pointer; font-weight:800;
    position:relative; padding:6px 0; outline:none;
  }
  /* Flecha */
  .cs-acc > summary::after{
    content:"▸"; font-size:14px; position:absolute; right:4px; top:50%;
    transform: translateY(-50%) rotate(0deg); transition: transform .15s ease;
  }
  .cs-acc[open] > summary::after{ transform: translateY(-50%) rotate(90deg); }

  .cs-list{ margin:8px 0 12px 0; padding-left:20px; }
  .cs-list li{ margin:6px 0; }
  .cs-list a{ color:inherit; text-underline-offset:3px; }

  .cs-slot{ padding:6px 0 12px; color:#5b5b5b; }

  /* Responsive */
  @media (max-width: 900px){
    .cs-wrap{ grid-template-columns: 1fr; }
    .cs-badge{ width:100%; }
  }
/*adminy finanzas */
.admin-rectangulo {
    width: 490px;
    height: 140px;
    background: #F0E6E6; /* fondo verde claro */
    display: flex;
    align-items: center; /* centra verticalmente el h1 */
    justify-content: center; /* centra horizontalmente el h1 */
    text-align: center; /* centra el texto dentro del h1 */
    margin: 28px 0; /* centra el rectángulo horizontalmente en la página */
    position: relative; /* para asegurar el centrado */
    color: #000;
}

/*ANUARIO*/


    /* ====== BANNER PRINCIPAL ====== */

    .anuario-hero {
        position: relative;
        overflow: hidden;
        height: auto;
    }

    .anuario-hero-bg img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    /* ====== INTRODUCCIÓN + CUADRO CONTACTO ====== */

    .anuario-intro {
        background-color: #ffffff;
        margin: 0 15%;
    }

    .intro-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
    }

    .intro-cuadro {
        background-color: #f3f3f3;
        padding: 20px;
        font-size: 1.55rem;
        height: 250px;
        text-align: left;
    }

    .intro-cuadro h3 {
        font-size: 1.55rem;
        margin-bottom: 10px;
    }

    .intro-contacto {
        margin-top: 15px;
    }
    .intro-texto{
        text-align: left;
    }
/* ====== ANUARIO ACTUAL 2024 ====== */

        .anuario-actual {
  
            margin: 0 15%;
        }

        .actual-grid {
            display: grid;
            grid-template-columns: 2fr 1.2fr;
            gap: 40px;
            align-items: flex-start;
        }

        .actual-texto h2 {
            margin-bottom: 15px;
        }

        .actual-texto ul {
            padding-left: 18px;
            margin-top: 10px;
        }

        .actual-portada {
            text-align: center;
        }

        .actual-portada img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,.25);
        }

        .btn-descarga {
            display: inline-block;
            padding: 2px 20px;
            background-color: #DCE6EB;
            color: #000;
            text-decoration: none;
            font-weight: 900;
            font-size: 0.95rem;
            text-transform: uppercase;
            width: 250px;
            height: 70px;
        }
        .btn-descarga h1{
            font-size: 1.5rem;
        }

        .btn-descarga:hover {
            background-color: #371343;
        }

        .an-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff; /* fondo blanco */
            border: 2px solid #000; /* contorno negro */
            padding: 0;
            height: 70px;
            color: #000; /* letras negras */
        }
        .an-header h2 {
            padding-left: 80px;
            font-size: 4.25rem;
        }

        /* ====== EDICIONES ANTERIORES ====== */

        .anuario-ediciones {
            background-color: #fff;
            margin: 0 10%;
        }

        .anuario-ediciones h2 {
            margin-bottom: 20px;
        }

        /* carrusel simple horizontal */
        .ediciones-slider {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 10px;
            scroll-snap-type: x mandatory;
        }

        .ediciones-slider::-webkit-scrollbar {
            height: 10px; /* Más grueso para visibilidad */
            background: rgba(0,0,0,0.1); /* Fondo sutil */
        }

        .ediciones-slider::-webkit-scrollbar-thumb {
            background: #070707;
            border-radius: 5px; /* Bordes redondeados */
            border: 1px solid rgba(255,255,255,0.2); /* Borde para contraste */
        }

        .edicion-card {
            flex: 0 0 160px;
            text-align: center;
            text-decoration: none;
            color: #000;
            scroll-snap-align: start;
        }

        .edicion-card img {
            width: 317px;
            height: 290px;
            display: block;
            box-shadow: 0 4px 8px rgba(0,0,0,.25);
           
        }

        .edicion-card span {
            font-size: 0.85rem;
            font-weight: 600;
        }

        .slider-arrow {
            background: rgba(0,0,0,0.7); /* Más opaco para visibilidad */
            color: white;
            border: none;
            padding: 12px; /* Más grande para mejor toque */
            cursor: pointer;
            position: absolute;
            z-index: 1;
            font-size: 1.5rem;
            border-radius: 50%;
            opacity: 0.8;
            transition: opacity 0.3s, transform 0.2s;
        }
        .slider-arrow:hover {
            opacity: 1;
            transform: scale(1.1); /* Efecto sutil al hover */
        }
        .left-arrow {
            left: 10px;
        }
        .right-arrow {
            right: 10px;
        }

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

/* Móvil (hasta 768px) */
@media (max-width: 768px) {
    /* BANNER PRINCIPAL */
    .anuario-hero {
        height: auto;
    }

    .anuario-hero-bg img {
        width: 100%;
        height: auto;
    }

    /* INTRODUCCIÓN + CUADRO CONTACTO */
    .anuario-intro {
        background-color: #ffffff;
        margin: 0 5%; /* Reducir márgenes para móvil */
    }

    .intro-grid {
        display: grid;
        grid-template-columns: 1fr; /* Una columna para móvil */
        gap: 20px; /* Reducir gap */
    }

    .intro-cuadro {
        background-color: #f3f3f3;
        padding: 15px; /* Reducir padding */
        font-size: 1.2rem; /* Reducir fuente */
        height: auto; /* Altura automática */
        text-align: left;
    }

    .intro-cuadro h3 {
        font-size: 1.3rem; /* Reducir fuente */
        margin-bottom: 8px;
    }

    .intro-contacto {
        margin-top: 10px;
    }

    .intro-texto {
        text-align: left;
    }

    /* ANUARIO ACTUAL 2024 */
    .anuario-actual {
        margin: 0 5%; /* Reducir márgenes */
    }

    .actual-grid {
        display: grid;
        grid-template-columns: 1fr; /* Una columna para móvil */
        gap: 20px; /* Reducir gap */
        align-items: flex-start;
    }

    .actual-texto h2 {
        margin-bottom: 10px;
        font-size: 1.5rem; /* Reducir fuente si es necesario */
    }

    .actual-texto ul {
        padding-left: 15px;
        margin-top: 8px;
    }

    .actual-portada {
        text-align: center;
    }

    .actual-portada img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto 10px;
        box-shadow: 0 4px 10px rgba(0,0,0,.25);
    }

    .btn-descarga {
        display: inline-block;
        padding: 2px 15px; /* Reducir padding */
        background-color: #DCE6EB;
        color: #000;
        text-decoration: none;
        font-weight: 900;
        font-size: 0.8rem; /* Reducir fuente */
        text-transform: uppercase;
        width: 200px; /* Reducir ancho */
        height: 50px; /* Reducir altura */
    }

    .btn-descarga h1 {
        font-size: 1.2rem; /* Reducir fuente */
    }

    .btn-descarga:hover {
        background-color: #371343;
    }

    .an-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border: 2px solid #000;
        padding: 0;
        height: 50px; /* Reducir altura */
        color: #000;
    }

    .an-header h2 {
        padding-left: 20px; /* Reducir padding */
        font-size: 2rem; /* Reducir fuente significativamente */
    }

    /* EDICIONES ANTERIORES */
    .anuario-ediciones {
        background-color: #fff;
        margin: 0 5%; /* Reducir márgenes */
    }

    .anuario-ediciones h2 {
        margin-bottom: 15px;
        font-size: 1.5rem; /* Reducir fuente si es necesario */
    }

    .ediciones-slider {
        display: flex;
        gap: 12px; /* Reducir gap */
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }

    .ediciones-slider::-webkit-scrollbar {
        height: 8px;
        background: rgba(0,0,0,0.1);
    }

    .ediciones-slider::-webkit-scrollbar-thumb {
        background: #070707;
        border-radius: 4px;
        border: 1px solid rgba(255,255,255,0.2);
    }

    .edicion-card {
        flex: 0 0 120px; /* Reducir ancho */
        text-align: center;
        text-decoration: none;
        color: #000;
        scroll-snap-align: start;
    }

    .edicion-card img {
        width: 240px; /* Reducir ancho */
        height: 220px; /* Reducir altura */
        display: block;
        box-shadow: 0 4px 8px rgba(0,0,0,.25);
    }

    .edicion-card span {
        font-size: 0.75rem; /* Reducir fuente */
        font-weight: 600;
    }

    .slider-arrow {
        background: rgba(0,0,0,0.7);
        color: white;
        border: none;
        padding: 8px; /* Reducir padding */
        cursor: pointer;
        position: absolute;
        z-index: 1;
        font-size: 1.2rem; /* Reducir fuente */
        border-radius: 50%;
        opacity: 0.8;
        transition: opacity 0.3s, transform 0.2s;
    }

    .slider-arrow:hover {
        opacity: 1;
        transform: scale(1.1);
    }

    .left-arrow {
        left: 5px;
    }

    .right-arrow {
        right: 5px;
    }
}

/* Tablet (769px a 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* BANNER PRINCIPAL */
    .anuario-hero {
        height: auto;
    }

    .anuario-hero-bg img {
        width: 100%;
        height: auto;
    }

    /* INTRODUCCIÓN + CUADRO CONTACTO */
    .anuario-intro {
        background-color: #ffffff;
        margin: 0 10%; /* Márgenes intermedios */
    }

    .intro-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr; /* Ajustar proporciones */
        gap: 30px;
    }

    .intro-cuadro {
        background-color: #f3f3f3;
        padding: 18px;
        font-size: 1.4rem;
        height: 220px; /* Altura ajustada */
        text-align: left;
    }

    .intro-cuadro h3 {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }

    .intro-contacto {
        margin-top: 12px;
    }

    .intro-texto {
        text-align: left;
    }

    /* ANUARIO ACTUAL 2024 */
    .anuario-actual {
        margin: 0 10%;
    }

    .actual-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr; /* Ajustar proporciones */
        gap: 30px;
        align-items: flex-start;
    }

    .actual-texto h2 {
        margin-bottom: 12px;
    }

    .actual-texto ul {
        padding-left: 16px;
        margin-top: 8px;
    }

    .actual-portada {
        text-align: center;
    }

    .actual-portada img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,.25);
    }

    .btn-descarga {
        display: inline-block;
        padding: 2px 18px;
        background-color: #DCE6EB;
        color: #000;
        text-decoration: none;
        font-weight: 900;
        font-size: 0.9rem;
        text-transform: uppercase;
        width: 220px; /* Ancho ajustado */
        height: 60px; /* Altura ajustada */
    }

    .btn-descarga h1 {
        font-size: 1.3rem;
    }

    .btn-descarga:hover {
        background-color: #371343;
    }

    .an-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border: 2px solid #000;
        padding: 0;
        height: 60px; /* Altura ajustada */
        color: #000;
    }

    .an-header h2 {
        padding-left: 50px; /* Padding ajustado */
        font-size: 3rem; /* Fuente ajustada */
    }

    /* EDICIONES ANTERIORES */
    .anuario-ediciones {
        background-color: #fff;
        margin: 0 8%; /* Márgenes ajustados */
    }

    .anuario-ediciones h2 {
        margin-bottom: 18px;
    }

    .ediciones-slider {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 9px;
        scroll-snap-type: x mandatory;
    }

    .ediciones-slider::-webkit-scrollbar {
        height: 9px;
        background: rgba(0,0,0,0.1);
    }

    .ediciones-slider::-webkit-scrollbar-thumb {
        background: #070707;
        border-radius: 4px;
        border: 1px solid rgba(255,255,255,0.2);
    }

    .edicion-card {
        flex: 0 0 140px; /* Ancho ajustado */
        text-align: center;
        text-decoration: none;
        color: #000;
        scroll-snap-align: start;
    }

    .edicion-card img {
        width: 280px; /* Ancho ajustado */
        height: 260px; /* Altura ajustada */
        display: block;
        box-shadow: 0 4px 8px rgba(0,0,0,.25);
    }

    .edicion-card span {
        font-size: 0.8rem;
        font-weight: 600;
    }

    .slider-arrow {
        background: rgba(0,0,0,0.7);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        position: absolute;
        z-index: 1;
        font-size: 1.4rem;
        border-radius: 50%;
        opacity: 0.8;
        transition: opacity 0.3s, transform 0.2s;
    }

    .slider-arrow:hover {
        opacity: 1;
        transform: scale(1.1);
    }

    .left-arrow {
        left: 8px;
    }

    .right-arrow {
        right: 8px;
    }
}

/* Pantallas grandes (1025px en adelante) - Mantener estilos originales o ajustes menores si es necesario */
@media (min-width: 1025px) {
    /* Los estilos originales ya están optimizados para pantallas grandes, pero puedes agregar ajustes específicos aquí si es necesario */
    /* Por ejemplo, si quieres aumentar márgenes o tamaños para pantallas muy grandes */
    .anuario-intro {
        margin: 0 20%; /* Aumentar márgenes para pantallas grandes */
    }

    .anuario-actual {
        margin: 0 20%;
    }

    .anuario-ediciones {
        margin: 0 15%;
    }
}