/* RESET & VARIABLES */

:root {
    --primary: #002147;
    --secondary: #ffcc00;
    --bg: #f4f4f9;
    --bg-dark: #011c34;
    --text: #222;
    --text-light: #fff;
    --radius: 8px;
    --transition: 0.3s ease;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #f2f7fc;
    color: #222;
    padding: 0;
    margin: 0;
  }
  
  /* HEADER */
  .site-header {
    background:var(--primary);
    color:var(--text-light);
    padding:1rem 2rem;
    display:flex; flex-wrap:wrap;
    align-items:center; justify-content:space-between;
    position:relative;
  }
  .logo-area { display:flex; align-items:center; }
  .logo { height:60px; margin-right:1rem; animation:logoAppear 1s ease; }
  @keyframes logoAppear { from{opacity:0;transform:scale(0.5);} to{opacity:1;transform:scale(1);} }
  .site-title { font-size:1.8rem; text-shadow:1px 1px 4px #000; }
  .header-info p { font-size:0.9rem; }
  


/* Estructura principal con flexbox para asegurar el footer abajo */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

/* Contenedor principal para empujar el footer hacia abajo */
main {
  flex: 1;
}

/* Footer limpio y centrado */
.main-footer {
  background-color: #003366; /* Color azul oscuro */
  color: white;
  text-align: center;
  padding: 1em 0; /* No exageres con el padding */
  width: 100%;
  box-sizing: border-box;
  margin-top: auto; /* Empuja el footer al fondo si el contenido es corto */
  font-size: 0.95rem;
}


  
  /* Botón de ver más (opcional) */
  /* === Botones del carrusel === */
.carousel-controls {
  text-align: center;
  margin-top: 2rem;
}

.carousel-controls button {
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  margin: 0 10px;
  transition: all var(--transition);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.carousel-controls button:hover {
  background-color: var(--secondary);
  color: var(--primary);
  transform: scale(1.05);
}

.carousel-controls button:active {
  transform: scale(0.98);
}



/* === NOTICIAS RECIENTES EN CUADRÍCULA === */
.section-noticias {
  background-color: #f9fafc;
  padding: 4rem 2rem;
  text-align: center;
}

.section-noticias h2 {
  font-size: 2.2rem;
  color: var(--primary);
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.section-noticias h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
}

/* Contenedor de tarjetas */
#noticias-completas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Tarjetas mínimas de 280px */
  gap: 2rem;
  margin-top: 2rem;
}

/* Tarjeta individual de noticia */
.noticia-item {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

/* Imagen de la noticia */
.noticia-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

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

/* Enlace completo a la noticia */
.noticia-link {
  display: block;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
}

/* Título de la noticia */
.noticia-content h3 {
  font-size: 1.25rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.noticia-content h3:hover {
  color: var(--secondary);
}

/* Fecha de publicación */
.noticia-content small {
  display: block;
  color: #777;
  font-size: 0.9rem;
}


/* === PÁGINA INDIVIDUAL DE NOTICIA === */
.noticia-detalle {
  padding: 4rem 2rem;
  max-width: 800px;
  margin: auto;
}

.noticia-content {
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  text-align: left;
}

.noticia-content h2 {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.noticia-content small {
  display: block;
  color: #777;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.noticia-img-detalle {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  transition: transform 0.4s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.noticia-img-detalle:hover {
  transform: scale(1.02);
}

.noticia-content p {
  line-height: 1.7;
  color: #333;
}

.btn-volver {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
}

.btn-volver:hover {
  background: var(--secondary);
  color: var(--primary);
  transform: scale(1.02);
}