:root{
  --bg:#f7f8fb;
  --primary:#0f1724;
  --muted:#6b7280;
  --accent:#0ea5a4;
  --card:#ffffff;
  --max-width:1200px;
  --header-height:76px;
  --font-sans: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
}

/* HEADER */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  box-sizing:border-box;
  z-index:1000;
  color:var(--card);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(15,23,36,0.06);
  background-image: url(IMGSEP/FD.png);
  background-size: cover;
  background-position: center;
  background-color: rgba(3,7,18,0.36);
  background-blend-mode: overlay;
  box-shadow: 0 10px 20px rgba(2,6,23,0.08);
}

.header-inner{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px;
}

.header-logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.header-logo img{
  height:68px;
  width:auto;
  object-fit:contain;
  display:block;
  border-radius:6px;
}
.site-title{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:40px;
  color:var(--card);
  letter-spacing:0.2px;
}

nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-list{
  display:flex;
  gap:15px;
  align-items:center;
}

.btn{
  font-family:var(--font-sans);
  background:transparent;
  border:1px solid rgba(255,255,255,0.12);
  color:var(--card);
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  transition:all .18s ease;
}
.btn:hover{ transform:translateY(-2px); }

.submenu{
  position:absolute;
  top:calc(var(--header-height) + 8px);
  right:20px;
  background:var(--card);
  color:var(--primary);
  border-radius:20px;
  min-width:220px;
  overflow:hidden;
  display:none;
  flex-direction:column;
  z-index:1100;
}
.submenu.active{ display:flex; }

.submenu .group{
  padding:10px;
  border-bottom:1px solid rgba(15,23,36,0.06);
}
.submenu .group:last-child{ border-bottom:none; }

.white-btn{
  background:#fff;
  color:#000;
  border:none;
  padding:8px 10px;
  border-radius:6px;
  font-weight:700;
  display:block;
  text-align:left;
  width:100%;
  cursor:pointer;
}

.year-dropdown{
  display:none;
  margin-top:8px;
  padding-left:8px;
  gap:6px;
  flex-direction:column;
}
.year-dropdown.active{ display:flex; }

.month-link{
  padding:6px 8px;
  font-size:14px;
  color:var(--primary);
  text-decoration:none;
  border-radius:6px;
}
.month-link:hover{ background:rgba(14,165,164,0.06); }

.hamburger{
  display:none;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.06);
  padding:8px;
  border-radius:8px;
  cursor:pointer;
}

/* MAIN */
main{
  margin-top:calc(var(--header-height) + 28px);
  padding:30px 20px;
  max-width:var(--max-width);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

.section-title{
  text-align:center;
  font-family:var(--font-sans);
  font-weight:800;
  font-size:28px;
  color:var(--primary);
  margin-bottom:18px;
}

.news-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}

.news-card{
  background:var(--card);
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.news-card:hover{
  transform:translateY(-6px);
  box-shadow: 0 18px 40px rgba(2,6,23,0.08);
}
.news-image{
  width:100%;
  height:170px;
  object-fit:cover;
}
.news-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.news-title{
  font-weight:700;
  font-size:16px;
  color:var(--primary);
}
.news-desc{
  font-size:14px;
  color:var(--muted);
  line-height:1.4;
}

.socials{
  margin-top:36px;
  text-align:center;
}
.social-title{
  font-family:var(--font-sans);
  font-size:20px;
  font-weight:700;
  color:var(--primary);
  margin-bottom:10px;
}
.social-icons img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin: 0 10px;
  transition: transform 0.3s ease;
}
.social-icons img:hover {
  transform: scale(1.2);
}

/* FOOTER */
footer{
  background-image: url(IMGSEP/FD.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px 20px;
  color: #ffffff;
}
.footer-card{
  background: rgba(0,0,0,0.35);
  border-radius: 12px;
  padding: 22px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(2,6,23,0.04);
  color: inherit;
}
.footer-card a {
  color: #ffd700;
  text-decoration: none;
}
.footer-card a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 980px){
  .news-grid{ grid-template-columns: repeat(2, 1fr); }
  .header-logo img{ height:42px; }
  .site-title{ font-size:16px; }
}
@media (max-width: 720px){
  .news-grid{ grid-template-columns: 1fr; }
  .nav-list{ display:none; }
  .hamburger{ display:inline-flex; }
  .submenu{ right:12px; left:12px; top:calc(var(--header-height) + 10px); min-width:unset; }
  header{ padding:10px 12px; }
}

/* Small niceties */
a { color:inherit; }
button:focus, a:focus { outline:3px solid rgba(14,165,164,0.16); outline-offset:2px; border-radius:6px; }


/* Ajustes Visuales para Botones Principales (Regresar a Inicio y Fechas disponibles) */
.btn {
/* Parámetros de Modificación: Controla la intensidad del fondo y el borde */
background: rgba(255, 255, 255, 0.08); /* Fondo ligeramente más visible */
border: 1px solid rgba(255, 255, 255, 0.2); /* Borde más definido */
transition: all .25s ease;
}

.btn:hover {
 /* Efecto de Cursor: Más visible al pasar el ratón */
background: rgba(255, 255, 255, 0.15); /* Aumenta el color de fondo en hover */
border-color: rgba(255, 255, 255, 0.4); /* Ilumina el borde en hover */
transform: translateY(-3px); /* Parámetro de Modificación: Controla el desplazamiento vertical */
}

/* Ajustes Visuales para Botones de Año (2024 y 2025) dentro del Submenú */
.white-btn {
/* Parámetros de Modificación: Controla el color del texto y el padding interno */
color: var(--primary); /* Asegura que el texto sea el color primario (negro/azul oscuro) */
transition: background .18s ease;
}

.submenu .group:hover .white-btn {
/* Efecto de Cursor para el botón de año cuando se hace hover sobre todo el grupo */
background: rgba(14, 165, 164, 0.1); /* Parámetro de Modificación: Fondo suave de acento en hover del grupo */
}

/* Efecto de Sombreado para los Enlaces de Meses (Diciembre, Enero, etc.) */
.month-link {
/* Parámetros de Modificación: Controla el color base del texto y el padding */
color: var(--primary);
transition: background .18s ease, color .18s ease;
}

.month-link:hover {
/* Efecto de Cursor: Resalta el enlace individual */
background: var(--accent); /* Parámetro de Modificación: Color de fondo más fuerte (acento) */
color: var(--card); /* Parámetro de Modificación: Color de texto blanco para contraste */
border-radius: 8px; /* Parámetro de Modificación: Ajusta el redondeo del sombreado */
} 
/* ==================================== */
/* === ESTILOS PARA BOTÓN DE ACCIÓN (REGRESAR A INICIO) === */
/* ==================================== */

.action-button-section {
    /* Centra el botón en la página */
    text-align: center;
    padding: 30px 20px; 
    max-width: var(--max-width);
    margin: 0 auto;
    box-sizing: border-box;
}

.cta-button {
    /* Parámetros de Modificación: Controla el color y el tamaño del botón */
    display: inline-block;
    background-color: #007bff; /* Color Azul de Fondo (Modificar: #007bff o #0ea5e9 para tu color accent) */
    color: #ffffff; /* Color de Letra Blanco */
    font-family: var(--font-sans);
    font-weight: 700;
    text-decoration: none;
    padding: 14px 30px; /* Tamaño del botón (Modificar el padding) */
    border-radius: 10px; /* Redondez de las esquinas */
    font-size: 18px; /* Tamaño del texto */
    letter-spacing: 0.5px;
    
    /* Reacción al Cursor (Hover) */
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4); /* Sombra suave para que destaque */
}

/* Efecto al pasar el cursor */
.cta-button:hover {
    /* Parámetros de Modificación: Controla cómo reacciona al cursor */
    background-color: #0056b3; /* Un azul más oscuro al hacer hover */
    transform: translateY(-4px); /* Se eleva ligeramente */
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.6); /* La sombra se intensifica */
}

/* Ajuste Responsivo: Se adapta bien en móviles */
@media (max-width: 600px) {
    .cta-button {
        /* Permite que el botón ocupe casi todo el ancho en móviles */
        width: 90%; 
        font-size: 16px;
        padding: 12px 20px;
    }
}