/* =============================
styles.css (guárdalo como styles.css)
Paleta: #040006 (negro), #214069 (azul), #DA4751 (rojo), #48AD8C (verde), #F7F9FB (fondo tenue)
============================= */


:root{
--c-black:#040006;
--c-blue:#214069;
--c-red:#DA4751;
--c-green:#48AD8C;
--c-bg:#F7F9FB;
--radius:16px;


--fi-pad: clamp(12px, 3vw, 24px);
  --fi-gap: 12px;
  --fi-border: #e5e7eb;
  --fi-text: #111;
  --fi-bg: #fff;
  
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
color: var(--c-black);
background: var(--c-bg);
line-height:1.6;
}


/* Contenedor máximo 1200px */
.container{
width: min(1200px, 92vw);
margin: 0 auto;
}


/* Header */
header{
background: #fff;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.header{
display:flex; align-items:center; justify-content:space-between;
padding: 12px 0;
}
.logos{display:flex; align-items:center; gap:24px; opacity:.9}
.logos img{max-height:52px; width:auto; /*filter: grayscale(100%);*/opacity:.85}

/* === Héroe con degradado === */
.hero-gradient{
  position: relative;
  isolation: isolate;          /* asegura que el ::before no se “escape” */
  border-radius: 16px;
  overflow: hidden;
  /* Fallback liso si no soporta gradientes */
  background: var(--c-bg);
}

/* Capa de degradado: muy sutil, con guiños a azul y verde institucional */
.hero-gradient::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;

  /* Mezclamos radial + lineal para un efecto limpio y académico */
  background:
    radial-gradient(1200px 600px at 10% 25%,
      color-mix(in srgb, var(--c-green) 16%, transparent) 0%,
      transparent 60%) ,
    radial-gradient(900px 500px at 85% 30%,
      color-mix(in srgb, var(--c-blue) 18%, transparent) 0%,
      transparent 65%) ,
    linear-gradient(180deg,
      #ffffff 0%,
      var(--c-bg) 30%,
      color-mix(in srgb, var(--c-blue) 6%, var(--c-bg)) 65%,
      #ffffff 100%);
  /* Si tu motor no soporta color-mix, quedará el linear-gradient */
}
/* Opcional: caja del héroe para respiración visual */
/*.hero{
  padding: clamp(20px, 5vw, 40px);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.04);
}
.hero > *{ position: relative; z-index: 1; }*/
/* Hero */
.hero{
display:grid; grid-template-columns: 140px 1fr; align-items:center; gap:24px;
background: linear-gradient(180deg, #fff, #f9fbfd);
border: 1px solid rgba(0,0,0,.05);
border-radius: var(--radius);
padding: 28px;
margin: 24px auto;
box-shadow: 0 6px 24px rgba(0,0,0,.05);
}
.hero .fecha-evento{
  grid-column: 2 / -1;      /* misma columna que el h1 */
  margin: -40px 0 10px;
  font-weight: 700;
  color: var(--c-black);
  /* opcional: si quieres que no se rompa */
  white-space: nowrap;
}
.logo-foro{width:140px; height:auto}
.hero h1{
margin:0;
font-weight:800; letter-spacing:.3px; line-height:1.15;
color: var(--c-blue);
}
.hero h1 span{color: var(--c-red)}


/* Countdown */
.countdown{
grid-column: 1 / -1;
display:flex; gap:12px; flex-wrap:wrap; margin-top:12px;
}
.countdown > div{
flex: 1 1 130px;
background:#fff; border:1px solid rgba(0,0,0,.06);
border-radius:12px; padding:14px; text-align:center;
}
.countdown span{display:block; font-size:40px; font-weight:800; color:var(--c-blue)}
.countdown p{margin:0; font-weight:600; color: #51607a}


/* Botones */
.btn, .btn-secondary{
display: inline-block;
  background: var(--c-red);
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 24px;
  text-decoration: none;
  white-space: nowrap;
  width: 310px;        /* ✅ deja que el botón se adapte al texto */
  max-width: none;    /* evita límites de ancho */
}
.btn{background: var(--c-red); color:#fff}
.btn:hover{filter: brightness(.95)}
.btn-secondary{background:#fff; color:var(--c-blue); border:2px solid var(--c-blue)}
.btn-secondary:hover{background: var(--c-blue); color:#fff}


/* Secciones */
main section{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding:24px; margin:24px 0}
main h2{margin-top:0; color:var(--c-blue); font-size:28px}
#tematicas ul{margin:0; padding-left:20px}
#tematicas li{margin:8px 0}


/* Footer */
footer{background:#f7f9fb;padding:20px;border-top:1px solid rgba(0,0,0,.1)}
.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-bottom:10px; width:400px; margin:0 auto;}
.logos-footer{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.logos-footer img{height:60px;width:auto;opacity:.9;transition:opacity .3s}
.logos-footer img:hover{opacity:1}
.footer-nav a{margin:0 10px;color:#214069;text-decoration:none;font-weight:600}
.footer-nav a:hover{text-decoration:underline;color:var(--c-red)}
.copyright{text-align:center;color:#51607a;font-size:.9rem;margin-top:10px}


/* Responsivo */
@media (max-width: 768px){
.hero{grid-template-columns: 1fr; text-align:center}
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.info-grid > div {
  background: #ffffff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.info-grid h2 {
  color: #214069;
  font-weight: 700;
  margin-bottom: 1rem;
}

.info-grid p,
.info-grid li {
  line-height: 1.6;
  color: #222;
}

.info-grid ul {
  margin: 0;
  padding-left: 1.2rem;
}

/* === Sección Fechas Importantes === */
#fechas-importantes {
  background: linear-gradient(135deg, #f7f9fb 0%, #eaf2f6 100%);
  border-radius: 10px;
  margin-top: 3rem;
  padding: 2rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

#fechas-importantes h2 {
  color: #214069;
  margin-bottom: 1rem;
  font-weight: 700;
}

#fechas-importantes ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#fechas-importantes li {
  background-color: #fff;
  border-left: 5px solid #48AD8C;
  padding: 0.8rem 1rem;
  margin-bottom: 0.8rem;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
}

#fechas-importantes li:hover {
  transform: translateY(-2px);
  border-left-color: #DA4751;
}

#fechas-importantes strong {
  color: #214069;
}

/* === Adaptación para pantallas pequeñas === */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  #fechas-importantes {
    padding: 1.5rem;
  }
}

/* Header sticky y layout */
header{
background:#fff;
border-bottom:1px solid rgba(0,0,0,.06);
position: sticky; top: 0; z-index: 50;
}
.header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
.brand-logos{max-height:46px; width:auto; /*filter: grayscale(100%); opacity:.85*/}


/* Menú superior */
.topnav{display:flex; gap:22px; align-items:center}
.topnav a{font-weight:700; text-decoration:none; color:var(--c-blue); padding:8px 6px; border-radius:8px; position:relative}
.topnav a:hover{background: rgba(33,64,105,.06)}
.topnav a:focus{outline:2px solid var(--c-green); outline-offset:2px}


/* Responsive */
@media (max-width: 820px){
.topnav{gap:14px; font-size:.95rem; flex-wrap:wrap}
}


.fi-header{
  background: var(--fi-bg);
  border-bottom: 1px solid var(--fi-border);
}
.fi-bar{
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--fi-pad);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--fi-gap);
}
.fi-brand img{
  display: block;
  max-width: min(520px, 70vw); /* el logo escala correctamente */
  height: auto;
}

/* Contenedor del menú (hamburguesa + nav) */
.fi-navwrap{
  margin: 0;
  position: relative;
}

/* Botón hamburguesa */
.fi-burger{
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--fi-border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
.fi-burger::-webkit-details-marker{ display: none; }
.fi-burger-box{
  width: 18px; height: 12px; position: relative;
}
.fi-burger-box::before,
.fi-burger-box::after{
  content:""; position:absolute; left:0; right:0; height:2px; background: var(--fi-text);
  transform-origin: center;
}
.fi-burger-box::before{ top:0; box-shadow: 0 5px 0 0 var(--fi-text); }
.fi-burger-box::after{ bottom:0; }

/* Menú (oculto en móvil hasta abrir) */
.fi-nav{
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 8px);
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--fi-border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.fi-nav a{
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--fi-text);
  text-decoration: none;
  white-space: nowrap;
}
.fi-nav a:hover{ background: #f7f7f7; }
.fi-nav a[aria-current="page"]{
  font-weight: 700;
}

/* Al abrir <details>, muestra el nav */
.fi-navwrap[open] .fi-nav{ display: block; }

/* ====== Vista ≥ 900px: menú en línea, sin hamburguesa ====== */
@media (min-width: 900px){
  .fi-bar{
    grid-template-columns: auto 1fr;
  }
  .fi-navwrap{
    display: contents; /* deja pasar el nav */
  }
  .fi-burger{ display: none; }
  .fi-nav{
    position: static;
    display: flex !important;
    gap: 8px;
    min-width: unset; padding: 0; border: 0; box-shadow: none;
  }
  .fi-nav a{
    padding: 10px 14px;
    border: 1px solid var(--fi-border);
    border-radius: 999px;
  }
  .fi-nav a:hover{ background: #fff; filter: brightness(.98); }
}

/* ====== Cosas base para imágenes fluidas (por si no están) ====== */
img{ max-width: 100%; height: auto; }