/* ============ Base & variables ============ */
:root{
  --bg:#fcfcfd;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;

  --accent:#ffb703;    /* amarillo */
  --accent2:#fb8500;   /* naranja */

  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.04);

  --container:1280px;
  --container-xl:1440px;
  --gutter:20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;height:auto}
a{color:#0b3ea8;text-decoration:none}
a:hover{text-decoration:underline}
.meta{color:#94a3b8;font-size:.82rem}
.muted{color:var(--muted)}
.tcenter{text-align:center}

/* ============ Layout contenedor ============ */
.section{max-width:var(--container);margin:26px auto;padding:0 var(--gutter)}
.section.fullbleed{max-width:none;margin:0 auto;padding:0}
.section.fullbleed .ad{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

@media (min-width:1536px){ .section{max-width:var(--container-xl)} }

/* ============ Header / menú centrado ============ */
/* ===== HEADER / MENÚ CENTRADO ===== */
/* ============ Header / menú centrado (corrige .topbar) ============ */
/
* Contenedor principal del header */
.site-header .topbar{
  /* ancho como el resto del sitio */
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--gutter);

  /* layout en una línea: logo | menú centrado | búsqueda */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 24px;
  background: #fff;
}

/* Logo más grande + margen izquierdo extra */
.site-header .logo{
  justify-self: start;
  margin-left: 6px;             /* margen izquierdo sutil */
}
.site-header .logo img{
  height: 40px;                 /* agrandado */
  width: auto;
}

/* Menú centrado real */
.site-header .nav{
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  white-space: nowrap;          /* evita salto de línea */
}
.site-header .nav a{
  position: relative;
  font-size: 16px;
  color: #111827;
  padding: 8px 6px;
  text-decoration: none;
}
.site-header .nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px;
  height:3px; border-radius:3px;
  transform:scaleX(0); transform-origin:center;
  transition:transform .18s ease;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.site-header .nav a:hover{ color:#0b3ea8; }
.site-header .nav a:hover::after{ transform:scaleX(1); }
.site-header .nav a.active::after{ transform:scaleX(1); }

/* Búsqueda en la misma línea, alineada a la derecha */
.site-header .search{
  justify-self: end;
  display: block;
}
.site-header .search input[type="search"]{
  width: 100%;
  max-width: 300px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.site-header .search input[type="search"]:focus{
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(251,133,0,.20); /* halo naranja */
}

/* Línea de acento bajo el header */
.header-accent{
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .site-header .topbar{
    grid-template-columns: 1fr;      /* apilar */
    row-gap: 10px;
    justify-items: center;
  }
  .site-header .logo{ justify-self: start; margin-left: var(--gutter); }
  .site-header .nav{ gap: 16px; flex-wrap: wrap; }
  .site-header .search{ width: 100%; }
  .site-header .search input[type="search"]{ max-width: none; width: 100%; }
  .site-header .logo img{ height: 34px; }
}
@media (max-width: 640px){
  .site-header .nav a{ font-size: 15px; }
  .site-header .logo img{ height: 30px; }
}

/* ============ Header / menú centrado (corrige .topbar) ============ */
/* Contenedor principal del header */
.site-header .topbar{
  /* ancho como el resto del sitio */
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--gutter);

  /* layout en una línea: logo | menú centrado | búsqueda */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 24px;
  background: #fff;
}

/* Logo más grande + margen izquierdo extra */
.site-header .logo{
  justify-self: start;
  margin-left: 6px;             /* margen izquierdo sutil */
}
.site-header .logo img{
  height: 40px;                 /* agrandado */
  width: auto;
}

/* Menú centrado real */
.site-header .nav{
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  white-space: nowrap;          /* evita salto de línea */
}
.site-header .nav a{
  position: relative;
  font-size: 16px;
  color: #111827;
  padding: 8px 6px;
  text-decoration: none;
}
.site-header .nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px;
  height:3px; border-radius:3px;
  transform:scaleX(0); transform-origin:center;
  transition:transform .18s ease;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.site-header .nav a:hover{ color:#0b3ea8; }
.site-header .nav a:hover::after{ transform:scaleX(1); }
.site-header .nav a.active::after{ transform:scaleX(1); }

/* Búsqueda en la misma línea, alineada a la derecha */
.site-header .search{
  justify-self: end;
  display: block;
}
.site-header .search input[type="search"]{
  width: 100%;
  max-width: 300px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.site-header .search input[type="search"]:focus{
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(251,133,0,.20); /* halo naranja */
}

/* Línea de acento bajo el header */
.header-accent{
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .site-header .topbar{
    grid-template-columns: 1fr;      /* apilar */
    row-gap: 10px;
    justify-items: center;
  }
  .site-header .logo{ justify-self: start; margin-left: var(--gutter); }
  .site-header .nav{ gap: 16px; flex-wrap: wrap; }
  .site-header .search{ width: 100%; }
  .site-header .search input[type="search"]{ max-width: none; width: 100%; }
  .site-header .logo img{ height: 34px; }
}
@media (max-width: 640px){
  .site-header .nav a{ font-size: 15px; }
  .site-header .logo img{ height: 30px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px){
  .site-header .bar{
    grid-template-columns: 1fr auto 1fr;
    gap:14px;
  }
  .site-header .logo img{ height:32px; }
  .site-header nav{ gap:14px; }
}

@media (max-width: 720px){
  /* En mobile, apilamos: fila1 (logo), fila2 (menú centrado), fila3 (buscador) */
  .site-header .bar{
    grid-template-columns: 1fr;
    justify-items:center;
    row-gap:10px;
  }
  .site-header .logo{ justify-self:start; }
  .site-header .search{ width:100%; }
  .site-header .search input[type="search"]{ max-width:none; }
  .site-header .logo img{ height:30px; }
  .site-header nav a{ font-size:15px; }
}

/* ============ Anuncios: bloque 70/30 ============ */
.ads-top-70-30{
  display:grid; grid-template-columns:7fr 3fr; gap:16px; align-items:center;
}
.ad img{max-width:100%;height:auto}
.ad--placeholder{border:1px dashed var(--line);padding:14px;color:#6b7280;border-radius:12px}
.ad--board,.ad--side{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:var(--shadow)}

/* ============ Cards & media ============ */
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.pad{padding:12px}
.pad-lg{padding:18px}
.card-title{display:block;font-weight:650;color:var(--ink);line-height:1.3}
.ratio{aspect-ratio:16/9;overflow:hidden}
.cover{width:100%;height:100%;object-fit:cover}

/* ============ Bloque principal (700px máx) ============ */
.block-main{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch}
.h700{display:flex;flex-direction:column;max-height:700px}
.h700 .h-media{height:56%}
.h700 .h-media .cover{width:100%;height:100%;object-fit:cover}
.h700 .pad-lg{flex:1;display:flex;flex-direction:column}
.hero-title{font-size:clamp(22px,2.1vw,30px);line-height:1.22;color:var(--ink);font-weight:800;text-decoration:none}
.main-right{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.h700-item{display:flex;flex-direction:column}
.h700-item .h-media-sm{aspect-ratio:16/9;overflow:hidden}
.h700-item .h-media-sm .cover{height:100%;object-fit:cover}

/* ============ Bloque Últimas 75/25 ============ */
.block-latest{display:grid;grid-template-columns:3fr 1fr;gap:16px}
.grid{display:grid;gap:14px}
.grid.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.block-head{margin-bottom:8px}
.block-kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#9aa3ae;margin-bottom:2px}
.block-title{font-size:clamp(20px,1.8vw,28px);line-height:1.2;margin:0;position:relative;display:inline-block;padding-bottom:8px}
.block-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px}
.block-title--op::after{background:linear-gradient(90deg,#8b5cf6,#22d3ee)}
.block-title--int::after{background:linear-gradient(90deg,#10b981,#f59e0b)}
.block-title--sponsors::after{background:linear-gradient(90deg,#94a3b8,#0ea5e9)}
.block-title--convoc{font-size:1rem;margin:0;padding-bottom:6px}
.latest-right .card{margin-bottom:12px}

/* ============ Responsivo ============ */
@media (max-width:1180px){
  .ads-top-70-30{grid-template-columns:1fr}
  .block-main{grid-template-columns:1fr}
  .block-latest{grid-template-columns:1fr}
  .grid.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  :root{ --gutter:14px; }
  .section{margin:20px auto}
  .grid.grid-3{grid-template-columns:1fr}
}