/*FAQ - Modernizado con <details> y <summary> */

.contenedor-acordeon {
  width: 100%;
  max-width: 800px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 80px;
}

.contenedor-acordeon h2 {
  text-align: center;
  font-size: 1.5rem; /* Ajustado para mejor legibilidad */
  margin-top: 40px;
  margin-bottom: 20px;
  color: #652525; /* Color institucional para el subtítulo */
  text-transform: uppercase;
  border-bottom: 2px solid #ccc;
  padding-bottom: 10px;
}

details {
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra suave */
}

summary {
  background-color: #652525; /* Tu color bordó original */
  color: #fff;
  padding: 20px;
  font-size: 17px;
  cursor: pointer;
  list-style: none; /* Oculta el triángulo por defecto */
  display: flex;
  justify-content: space-between; /* Pone el texto a la izq y el + a la der */
  align-items: center;
  transition: background-color 0.3s ease;
}

summary:hover {
  background-color: #875555; /* Tu color hover original */
}

/* Eliminar el marcador por defecto en Chrome/Safari */
summary::-webkit-details-marker {
  display: none;
}

details[open] summary::after {
  transform: rotate(45deg); /* Gira el + para que parezca una X */
}

.contenido-acordeon {
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-top: none;
  background-color: #fdfdfd;
  color: #333;
  line-height: 1.6;
}

/* Ajuste para listas dentro del contenido */
.contenido-acordeon ul {
  padding-left: 20px;
  margin-top: 10px;
}

.contenido-acordeon li {
  margin-bottom: 10px;
}

/*FAQ FIN0/


/* INDEX */


    /* Estilo para el fondo del pop-up (oscuro y semi-transparente) */
.popup {
  display: none; /* Oculto por defecto */
  position: fixed; /* Se queda fijo en la pantalla */
  z-index: 2000; /* Se asegura de que esté por encima de todo */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Permite scroll si el contenido es muy grande */
  background-color: rgba(0,0,0,0.5); /* Fondo negro con opacidad */
}

/* Estilo para la caja del contenido del pop-up */
.popup-contenido {
  background-color: #fefefe; /* Color de fondo blanco */
  margin: 15% auto; /* 15% desde arriba y centrado horizontalmente */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Ancho del pop-up */
  max-width: 500px; /* Un ancho máximo para no ser demasiado grande en pantallas grandes */
  text-align: center; /* Centra la imagen */
  position: relative;
  border-radius: 10px;
}

/* Estilo para la imagen dentro del pop-up */
.popup-contenido img {
  max-width: 100%; /* La imagen nunca será más ancha que su contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
}

/* Estilo para el botón de cerrar (la "X") */
.cerrar {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.cerrar:hover,
.cerrar:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
  
}
.navbar {
  background-color: transparent !important; /* La hacemos transparente por defecto */
  -webkit-transition: all .5s; /* Transición suave para el cambio de color */
  transition: all .5s;
}

/* Estado de la barra cuando se hace scroll (se añade la clase 'alt-color') */
.navbar.alt-color {
  background-color: #652525 !important; /* Vuelve a tu color bordó original */
}

/* --- Estilos para mejorar el carrusel --- */
.carousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* Capa oscura semitransparente */
  z-index: 1;
}

.carousel-caption {
  z-index: 2; /* Asegura que el texto esté por encima de la capa oscura */
}
/* === Estilo del Carrusel Mejorado === */
.carousel-item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
}

.carousel-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.carousel-caption {
  z-index: 2;
  bottom: 25%;
  text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}

.carousel-caption h2 {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}

.carousel-caption p {
  font-size: 1.3rem;
  color: #f8f8f8;
}

/* Animación de entrada */
.animate-caption {
  animation: fadeInUp 1.2s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Indicadores más visibles */
.carousel-indicators li {
  background-color: rgba(255,255,255,0.6);
}

.carousel-indicators .active {
  background-color: #b30000;
}

/* Controles con hover suave */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1) drop-shadow(0 0 3px rgba(0,0,0,0.6));
  width: 40px;
  height: 40px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

/* Adaptación móvil */
@media (max-width: 768px) {
  .carousel-caption h2 {
    font-size: 1.8rem;
  }
  .carousel-caption p {
    font-size: 1rem;
  }
  .carousel-caption {
    bottom: 15%;
  }
}
/* --- Estilos para Video de Fondo en Carrusel --- */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* Rellena sin franjas negras */
  object-position: center bottom; /* Prioriza mostrar la parte inferior */
  z-index: 0;
  background-color: #000;   /* Evita bordes blancos */
}

/* Para pantallas pequeñas, reducimos altura */
@media (max-width: 768px) {
  .carousel-item {
    height: 70vh;
    min-height: 60vh
  }

  .video-background {
    height: 70vh;
    width: 100%;
    max-height: 60vh;
  }
}

/* --- Fin de estilos para carrusel --- */
 /* ================== NUEVA SECCIÓN ARTE Y CULTURA ================== */
    .arte-cultura {
      text-align: center;
      padding: 80px 0;
      background: #f8f8f8;
    }

    .arte-cultura h1 {
      font-size: 2.8rem;
      font-weight: 700;
      color: #5b1e1e;
      margin-bottom: 50px;
      letter-spacing: 1px;
    }

    .contenedor-cultura {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      flex-wrap: wrap;
    }

    .cuadro {
      position: relative;
      width: 300px;
      height: 300px;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      animation: aparecerSuave 1s ease forwards;
      background-color: #000;
    }

    .cuadro:hover {
      transform: translateY(-10px) scale(1.05);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

    .cuadro img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s ease;
    }

    .cuadro:hover img {
      transform: scale(1.1);
      filter: brightness(70%);
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      transition: opacity 0.5s ease;
      padding: 20px;
      text-align: center;
    }

    .cuadro:hover .overlay {
      opacity: 1;
    }

    .overlay h2 {
      font-size: 1.8rem;
      margin-bottom: 10px;
      font-weight: 700;
    }

    .overlay p {
      font-size: 1rem;
      line-height: 1.4;
      max-width: 250px;
    }

    @keyframes aparecerSuave {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
/* ================== INICIO SECCIÓN ARTE Y CULTURA (NUEVA) ================== */

/* === 4. FONDO MEJORADO (REEMPLAZA REGLA .NoticiasFondo ANTERIOR) === */
.efemerides-c, .NoticiasFondo {
  background: #ffffff; /* Fondo blanco para contrastar con el body */
  padding: 2.5rem 1.5rem; /* Espaciado interno */
  border-radius: 12px; /* Bordes redondeados */
  margin: 2rem 0; /* Espacio vertical entre secciones */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra suave */
  text-align: center;
}


.seccion-arte-cultura {
    text-align: center;
    padding: 70px 20px; /* Espaciado interno */
    background: #f8f8f8; /* Un fondo gris claro para separarla */
}

.seccion-arte-cultura h1 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #5b1e1e; /* Mantenemos el color bordó de tu sitio */
    margin-bottom: 50px;
    letter-spacing: 1px;
}

.contenedor-cajas-arte {
    display: flex; /* Activa Flexbox para alinear */
    justify-content: center; /* Centra las cajas horizontalmente */
    align-items: center; /* Centra verticalmente (si tuvieran alturas distintas) */
    gap: 30px; /* Espacio entre las cajas */
    flex-wrap: wrap; /* Permite que las cajas bajen en pantallas pequeñas */
}

.caja-arte {
    /* Dimensiones (más chicas, como pediste) */
    width: 300px;
    height: 200px;
    
    /* Apariencia */
    position: relative; /* Clave para el título y el hover */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Para que la imagen respete el borde redondeado */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-decoration: none; /* Quitamos subrayado feo del enlace */
    
    /* Fondo (Imagen + Gradiente) */
    background-size: cover; /* La imagen cubre todo el cuadro */
    background-position: center; /* La imagen se centra */
    
    /* Posicionar el título abajo */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Alinea el <h3> abajo del todo */
    padding: 20px;
    box-sizing: border-box; /* Para que el padding no afecte el tamaño */
    
    /* Transición para el hover */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Efecto de "levantar" la caja al pasar el mouse */
.caja-arte:hover {
    transform: translateY(-10px); /* Mueve la caja 10px hacia arriba */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* --- Imágenes de fondo (¡DEBES CAMBIAR ESTAS RUTAS!) --- */
/* El 'linear-gradient' es un truco para oscurecer un poco la
   imagen de fondo y que el título blanco se lea perfectamente.
*/
#caja-revista {
    /* CAMBIA 'img/ruta-a-tu-imagen-revista.jpg' */
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.6)), url('img/oferta26.jpg');
    color: #652525;
    background-size: contain;
background-repeat: no-repeat;
}

#caja-coro {
    /* CAMBIA 'img/ruta-a-tu-imagen-coro.jpg' */
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.6)), url('img/biblioteca/bibliotecaEntrada.jpg');
    color: #652525;
  }

#caja-museo {
    /* CAMBIA 'img/ruta-a-tu-imagen-museo.jpg' */
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.6)), url('img/esgAntigua03.jpg');
    color: #652525;
  }
/* --------------------------------------------------------- */


.caja-arte h3 {
    font-size: 1.9rem; /* Tamaño del título */
    font-weight: 600;
    color: #ffffff; /* Color del título */
    margin: 0;
    padding-bottom: 8px; /* Espacio para el subrayado */
    position: relative; /* Para el pseudo-elemento ::after */
    text-shadow: 0 2px 4px rgba(0,0,0,0.6); /* Sombra para legibilidad */
}

/* El subrayado animado */
.caja-arte h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Inicia en el centro */
    transform: translateX(-50%); /* Lo centra perfectamente */
    width: 0; /* Inicia sin ancho */
    height: 3px; /* Grosor del subrayado */
    background-color: #000; /* Color del subrayado */
    transition: width 0.3s ease-in-out; /* Animación de crecimiento */
}

/* Efecto HOVER para el subrayado */
.caja-arte:hover h3::after {
    width: 80%; /* Ancho final del subrayado al hacer hover */
}
/* =================== FIN SECCIÓN ARTE Y CULTURA (NUEVA) =================== */

    /* ================== FIN ESTILOS ARTE Y CULTURA ================== */

        body {
       background-color: #f8f9fa;
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     }

    h2 {
      font-weight: 700;
      color: #2b2b2b;
      text-align: center;
      margin-top: 40px;
    }

    /* ================== ESTILOS MEJORADOS (EFEMÉRIDES Y NOTICIAS) ================== */

    /* === 3. Estilo de Título de Sección (como Arte y Cultura) === */
    .titulo-seccion {
      font-size: 2.8rem;
      font-weight: 700;
      color: #5b1e1e;
      margin-bottom: 50px;
      letter-spacing: 1px;
      text-align: center;
    }

    /* --- 1. Estilo General de Tarjetas (Afecta Ambas Secciones) --- */
    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
      background-color: #f2f2f2;
      text-align: left; /* Alinea el texto de las tarjetas a la izquierda */
    }

    .card:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    .card .card-img-top {
      /* === 1. FOTO MÁS CHICA === */
      /* La altura se controla por inline style en tu nuevo HTML, así que esta regla no aplicará */
      /* height: 170px; */ 
      object-fit: cover; /* Evita que la imagen se distorsione */
      transition: transform 0.4s ease;
    }
    
    /* Estilos para las tarjetas de noticias del nuevo código */
    .titulonoticia a {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        font-size: 1.1rem; /* Ajusta el tamaño si es necesario */
    }
    .titulonoticia a:hover {
        color: #652525;
    }
    .card-body .card-text {
        font-size: 0.9rem;
        color: #555;
        text-align: justify;
    }
    .card-body a {
        color: #652525;
        font-weight: bold;
        text-decoration: none;
    }
    .card-body a:hover {
        text-decoration: underline;
    }


    .card:hover .card-img-top {
      transform: scale(1.05);
    }

    /* --- 2. Estilos Específicos para "Últimas Noticias" --- */
    .fecha-noticia {
      font-size: 0.85rem;
      font-weight: 600;
      color: #888;
      margin-bottom: 10px;
      display: block;
    }

    /* --- 3. Animación de entrada al hacer scroll --- */
    .animar-al-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1s ease-out, transform 0.8s ease-out;
    }

    .animar-al-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ====== Ajustes responsive adicionales ====== */

/* Carrusel en móviles */
@media (max-width: 768px) {
 .carousel-item {
   /* Esta regla es un poco redundante porque más abajo la fijas a 70vh,
       pero la mantenemos por consistencia */
  height: auto;
  min-height: 60vh;
 }

  /* * === ¡AQUÍ ESTÁ LA CORRECCIÓN! ===
   * Cambiamos 'object-fit' a 'contain' en móviles.
   * Esto fuerza al video a mostrarse completo, sin recortes.
   * También eliminamos las reglas de 'height' y 'width' que
   * creaban conflictos con las reglas base.
  */
 .video-background {
  object-fit: contain; 
 }
}

/* Pop-ups responsive */
.popup-contenido {
  width: 90%;
  max-width: 400px;
  margin: 25% auto;
  padding: 15px;
}
.popup-contenido img {
  max-width: 100%;
  height: auto;
}

/* Botones del pop-up en pantallas pequeñas */
@media (max-width: 576px) {
  #abrirPopup1, #abrirPopup2 {
    width: 90%;
    font-size: 0.9rem;
    padding: 10px;
  }
}

/* Sección Arte y Cultura */
.caja-arte {
  width: 100%;
  max-width: 320px;
  height: 220px;
}

@media (max-width: 768px) {
  .seccion-arte-cultura h1 {
    font-size: 2rem;
  }
  .caja-arte h3 {
    font-size: 1.3rem;
  }
}

/* Efemérides y Noticias */
.card-img-top {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .card-body .card-text {
    font-size: 0.85rem;
  }
  .titulonoticia a {
    font-size: 1rem;
  }
}

/* Espaciado general */
.container, .efemerides-c, .NoticiasFondo {
  padding-left: 15px;
  padding-right: 15px;
}

/* Evitar overflow horizontal */
body {
  overflow-x: hidden;
}

/* Asegura que videos de fondo sean fluidos */
.video-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
   AGREGADOS PROFESIONALES PARA RESPONSIVE EN MÓVILES
   ========================================================== */
@media (max-width: 768px) {
    /* 1. Arreglo para los botones de Memorias: que se apilen */
    .botones-memorias-container {
        flex-direction: column; /* Apila uno arriba del otro */
        align-items: center;
        gap: 15px !important;
    }
    
    .botones-memorias-container button {
        width: 100%; /* Botón ocupa todo el ancho */
        max-width: 300px;
    }

    /* 2. Arreglo para las imágenes con altura fija (estilo inline) */
    /* Esto sobreescribe el style="height:330px" que rompe el diseño en celulares */
    .card-img-top {
        height: 200px !important; 
        object-fit: cover !important;
    }
    
    /* 3. Títulos más pequeños en móvil */
    .titulo-seccion {
        font-size: 2rem;
    }
    
    .carousel-caption h2 {
        font-size: 1.5rem;
    }
}

/*FIN INDEX*/


/* Autoridades */


   .cargo-titulo {
        color:rgb(102, 0, 0); /* Azul institucional oscuro (ajustable) */
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
        font-size: 1rem;
    }
    .nombre-autoridad {
        color: #333;
        margin-bottom: 0;
        font-size: 1.1rem;
    }
    .item-autoridad {
        border-left: 3px solid #ccc; /* Línea decorativa a la izquierda */
        padding-left: 15px;
        margin-bottom: 20px;
    }

   /* ================== OFERTA ACADÉMICA 2025 ================== */

/* Contenedor principal de la grilla */
.grilla-oferta {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    justify-content: center;
}

/* El enlace que actúa como tarjeta completa */
.card-oferta {
    display: flex; /* Para centrar el texto verticalmente */
    align-items: center;
    justify-content: center;
    text-align: center;
    
    background-color: #fff; /* Fondo blanco limpio */
    color: #333; /* Texto gris oscuro */
    
    border: 1px solid #e0e0e0;
    border-left: 5px solid #652525; /* Borde izquierdo con color institucional */
    border-radius: 8px; /* Bordes redondeados suaves */
    
    padding: 25px 20px;
    min-height: 140px; /* Altura mínima para uniformidad */
    height: 100%; /* Ocupa toda la altura disponible */
    
    text-decoration: none; /* Sin subrayado */
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.4;
    
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse */
.card-oferta:hover {
    background-color: #652525; /* Se vuelve bordó */
    color: #fff; /* Texto blanco */
    transform: translateY(-5px); /* Se levanta un poco */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    text-decoration: none;
}

/* Contenedor de cada item (para el espaciado) */
.col-oferta {
    padding: 0 15px;
    margin-bottom: 30px; /* Espacio entre filas */
    flex: 0 0 100%; /* Por defecto 1 columna (móvil) */
    max-width: 100%;
}

/* Botones de Pagos (estilo distinto para diferenciar) */
.btn-pago {
    display: inline-block;
    background-color: transparent;
    border: 2px solid #652525;
    color: #652525;
    padding: 15px 30px;
    border-radius: 50px; /* Redondos */
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    margin: 10px;
    transition: 0.3s;
}

.btn-pago:hover {
    background-color: #652525;
    color: #fff;
    text-decoration: none;
}

/* ================== RESPONSIVE ================== */
@media (min-width: 768px) {
    .col-oferta {
        flex: 0 0 50%; /* 2 columnas en tablets */
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .col-oferta {
        flex: 0 0 33.3333%; /* 3 columnas en PC */
        max-width: 33.3333%;
    }
}

/* ================== SECCIÓN SIU  ================== */

/* Contenedor de cada ítem del SIU */
.item-siu {
    margin-bottom: 40px;
    text-align: center; /* Centramos imagen y textos */
}

/* Estilo de la imagen (hace de botón) */
.img-siu {
    max-width: 250px; /* Tamaño máximo original */
    width: 100%; /* Se adapta en móviles */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
}

/* Efecto hover en la imagen */
.item-siu a:hover .img-siu {
    transform: scale(1.05); /* Crece un poquito */
    box-shadow: 0 10px 25px rgba(102, 0, 0, 0.2); /* Sombra rojiza suave */
}

/* Texto descriptivo */
.texto-siu {
    text-align: justify; /* Mantenemos el justificado que tenías */
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    max-width: 350px; /* Evita que el texto se estire demasiado en pantallas grandes */
    margin: 0 auto; /* Centra el bloque de texto */
}

/* Caja de Aviso Importante */
.alerta-siu {
    background-color: #f9f9f9;
    border-left: 5px solid #652525; /* Color institucional */
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.alerta-siu strong {
    color: #652525;
    font-size: 1.1rem;
}

/* Estilo para el Video Responsive */
.video-container {
    position: relative;
    width: 100%;
    max-width: 500px; /* Ancho máximo del video */
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
}
    

/* ================== ESTILOS PARA NOTICIA INDIVIDUAL ================== */

/* Contenedor principal para limitar el ancho y centrar la lectura */
.noticia-container {
    max-width: 900px; /* Ancho ideal para lectura */
    margin: 40px auto; /* Centrado horizontal */
    padding: 0 20px;
    background-color: #fff;
}

/* Estilo del Título Principal */
.noticia-titulo {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #652525; /* Tu color institucional */
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid #b2a132; /* Tu color dorado secundario como detalle */
    line-height: 1.3;
}

/* Estilo del cuerpo del texto */
.noticia-cuerpo {
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.1rem; /* Un poco más grande para leer mejor */
    line-height: 1.8; /* Más espacio entre líneas = más elegancia */
    color: #333;
    text-align: justify;
    margin-bottom: 50px;
}

.noticia-cuerpo p {
    margin-bottom: 20px; /* Espacio entre párrafos */
}

/* === GALERÍA DE IMÁGENES MODERNA (GRID) === */
.galeria-moderna {
    display: grid;
    /* Esto crea columnas automáticas. Mínimo 250px de ancho cada foto */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px; /* Espacio entre fotos */
    margin-top: 40px;
    margin-bottom: 50px;
}

.galeria-moderna img {
    width: 100%;
    height: 250px; /* Altura uniforme para que se vea ordenado */
    object-fit: cover; /* Recorta la imagen para llenar el cuadro sin deformarla */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Efecto al pasar el mouse por las fotos */
.galeria-moderna img:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Botón de volver mejorado */
.btn-volver-container {
    text-align: center;
    margin: 40px 0;
}

.btn-volver {
    display: inline-block;
    background-color: #652525;
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: background 0.3s;
}

.btn-volver:hover {
    background-color: #4a1b1b;
    color: #fff;
    text-decoration: none;
}

/* Header simple para la noticia (si no usas el navbar completo) */
.header-simple {
    background-color: #652525;
    padding: 15px 0;
    text-align: center;
    margin-bottom: 40px;
}
.header-simple img {
    height: 80px; /* Ajusta según tu logo */
    filter: brightness(0) invert(1); /* Vuelve el logo blanco si es PNG transparente */
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .noticia-titulo {
        font-size: 1.5rem;
    }
    .galeria-moderna img {
        height: auto; /* En móvil dejamos que la altura sea natural */
        max-height: 300px;
    }
}