@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   SuperEscuela — blog
   Sits on top of /assets/css/style.css (barra, botones, pie,
   tokens). Only what the hub and the articles add lives here.
   ═══════════════════════════════════════════════════════════ */

.nav a[aria-current="page"]{ color:var(--azul); border-bottom-color:var(--amarillo); }

/* ───────── Hub ───────── */
.blog-hero{
  max-width:var(--ancho); margin:0 auto;
  padding:clamp(30px,5vw,64px) clamp(18px,4vw,32px) clamp(26px,4vw,44px);
}
.blog-hero__saludo{ font-size:.95rem; color:var(--rojo); font-variation-settings:"wght" 600; margin-bottom:12px; }
.blog-hero h1{
  font-size:clamp(2.5rem,6.4vw,4.8rem);
  font-variation-settings:"wdth" 124,"wght" 800; letter-spacing:-.04em; max-width:16ch;
}
.blog-hero__bajada{ margin-top:18px; max-width:52ch; font-size:1.07rem; color:var(--texto); }

.blog-filtros{
  max-width:var(--ancho); margin:0 auto; padding:0 clamp(18px,4vw,32px) 8px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.blog-filtros button{
  font:inherit; font-size:.9rem; cursor:pointer;
  font-variation-settings:"wdth" 105,"wght" 600;
  padding:8px 18px; border-radius:999px;
  border:2px solid var(--nieve-2); background:#fff; color:var(--azul);
}
.blog-filtros button[aria-pressed="true"]{ background:var(--azul); border-color:var(--azul); color:#fff; }

.blog-lista{
  max-width:var(--ancho); margin:0 auto;
  padding:clamp(20px,3vw,34px) clamp(18px,4vw,32px) var(--paso);
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.tarjeta{
  --tono:var(--azul);
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--nieve); border-radius:var(--radio);
  text-decoration:none; color:var(--azul);
  transition:transform .14s ease, box-shadow .14s ease;
}
.tarjeta:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -22px rgba(0,43,127,.55); }
.tarjeta[hidden]{ display:none; }
.tarjeta__franja{ height:12px; background:var(--tono); }
.tarjeta__cuerpo{ display:flex; flex-direction:column; flex:1; padding:24px 26px 26px; }
.tarjeta__tema{ font-size:.8rem; color:var(--gris); font-variation-settings:"wght" 600; text-transform:uppercase; letter-spacing:.06em; }
.tarjeta h2{ margin-top:10px; font-size:1.42rem; line-height:1.12; font-variation-settings:"wdth" 110,"wght" 800; }
.tarjeta p{ margin-top:12px; font-size:.94rem; color:var(--texto); }
.tarjeta__leer{ margin-top:auto; padding-top:20px; font-size:.88rem; font-variation-settings:"wght" 600; color:var(--rojo); }
.tarjeta--destacada{
  grid-column:1 / -1; background:var(--azul); color:#fff;
  display:grid; grid-template-columns:.85fr 1.15fr; align-items:center;
}
.tarjeta--destacada .tarjeta__franja{ display:none; }
.tarjeta--destacada .tarjeta__cuerpo{ padding:clamp(26px,3.6vw,44px); height:100%; }
.tarjeta__foto{ width:100%; height:auto; }
.tarjeta--destacada .tarjeta__tema{ color:var(--celeste); }
.tarjeta--destacada h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:22ch; }
.tarjeta--destacada p{ color:#D3E2F7; max-width:60ch; font-size:1.02rem; }
.tarjeta--destacada .tarjeta__leer{ color:var(--amarillo); }
.tarjeta--rojo{ --tono:var(--rojo); }
.tarjeta--amarillo{ --tono:var(--amarillo); }
.tarjeta--verde{ --tono:var(--verde); }
.tarjeta--celeste{ --tono:var(--celeste); }

/* ───────── Artículo ───────── */
.articulo{ max-width:760px; margin:0 auto; padding:clamp(26px,4vw,52px) clamp(18px,4vw,32px) var(--paso); }
.articulo__volver{ font-size:.9rem; color:var(--gris); text-decoration:none; font-variation-settings:"wght" 600; }
.articulo__volver:hover{ color:var(--azul); }
.articulo__tema{ margin-top:26px; font-size:.85rem; color:var(--rojo); font-variation-settings:"wght" 600; text-transform:uppercase; letter-spacing:.06em; }
.articulo h1{
  margin-top:10px; font-size:clamp(2.2rem,5.2vw,3.6rem);
  font-variation-settings:"wdth" 120,"wght" 800; letter-spacing:-.035em;
}
.articulo__bajada{ margin-top:18px; font-size:1.15rem; color:var(--texto); line-height:1.55; }
.articulo__fecha{ margin-top:16px; font-size:.85rem; color:var(--gris); }
.articulo__franja{ display:flex; height:10px; margin:28px 0 8px; border-radius:999px; overflow:hidden; }
.articulo__franja span{ background:var(--c); width:var(--w); }

.prosa{ color:var(--texto); }
.prosa > * + *{ margin-top:1.05em; }
.prosa h2{
  margin-top:1.9em; color:var(--azul);
  font-size:clamp(1.45rem,2.6vw,1.85rem); font-variation-settings:"wdth" 112,"wght" 800;
}
.prosa h2 + *{ margin-top:.7em; }
.prosa a{ color:var(--azul); text-decoration-color:var(--amarillo); text-decoration-thickness:3px; text-underline-offset:3px; }
.prosa a:hover{ text-decoration-color:var(--rojo); }
.prosa strong{ color:var(--azul); font-variation-settings:"wght" 700; }
.prosa ul, .prosa ol{ display:grid; gap:.6em; }
.prosa ul li{ position:relative; padding-left:26px; }
.prosa ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:11px; height:11px; border-radius:3px; background:var(--amarillo);
}
.prosa ul li:nth-child(4n+2)::before{ background:var(--rojo); }
.prosa ul li:nth-child(4n+3)::before{ background:var(--verde); }
.prosa ul li:nth-child(4n+4)::before{ background:var(--celeste); }
.prosa ol{ counter-reset:paso; }
.prosa ol li{ counter-increment:paso; position:relative; padding-left:46px; }
.prosa ol li::before{
  content:counter(paso); position:absolute; left:0; top:-.05em;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--azul); color:#fff; font-size:.95rem; font-variation-settings:"wght" 800;
}
.prosa figure{ margin:1.8em 0; }
.prosa figure img{ border-radius:var(--radio); box-shadow:0 26px 50px -34px rgba(0,43,127,.7); }
.prosa figcaption{ margin-top:10px; font-size:.85rem; color:var(--gris); }
.dato{
  margin:1.8em 0; padding:22px 26px; border-radius:var(--radio);
  background:var(--nieve); border-left:7px solid var(--amarillo);
  color:var(--azul); font-variation-settings:"wdth" 106,"wght" 600; font-size:1.08rem; line-height:1.45;
}

.articulo__cta{
  margin-top:3em; padding:clamp(26px,4vw,40px); border-radius:26px;
  background:var(--azul); color:#fff;
}
.articulo__cta p{ font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1.2; font-variation-settings:"wdth" 112,"wght" 800; max-width:24ch; }
.articulo__cta .btn{ margin-top:22px; }

.relacionados{ margin-top:3em; }
.relacionados h2{ font-size:1.3rem; font-variation-settings:"wdth" 110,"wght" 800; }
.relacionados ul{ margin-top:14px; display:grid; gap:10px; }
.relacionados a{
  display:block; padding:14px 18px; border-radius:var(--radio-s);
  background:var(--nieve); text-decoration:none; color:var(--azul);
  font-variation-settings:"wdth" 106,"wght" 600;
}
.relacionados a:hover{ background:var(--nieve-2); }

/* ───────── Comunicados de prensa ───────── */
.tarjeta--prensa .tarjeta__tema{ color:var(--rojo); }
.prosa .entrada{ font-size:1.08rem; }
.cita{
  margin:2.2em 0; padding:clamp(24px,3.6vw,36px); border-radius:var(--radio);
  background:var(--azul); color:#fff; position:relative;
}
.cita::before{
  content:"“"; position:absolute; top:-.18em; left:18px;
  font-size:6rem; line-height:1; color:var(--amarillo); font-variation-settings:"wght" 800;
}
.cita blockquote{ margin:0; }
.cita p{ font-size:clamp(1.12rem,2.2vw,1.32rem); line-height:1.45; font-variation-settings:"wdth" 104,"wght" 500; }
.cita figcaption{ margin-top:16px; color:var(--celeste); font-size:.92rem; font-variation-settings:"wght" 600; }

.prensa-datos{
  margin:2.2em 0; padding:clamp(22px,3.4vw,32px); border-radius:var(--radio);
  background:var(--nieve); border-top:8px solid var(--amarillo);
}
.prensa-datos h2{ margin:0 !important; font-size:1.3rem !important; }
.prensa-datos dl{ margin-top:14px; display:grid; }
.prensa-datos dl > div{ display:grid; grid-template-columns:150px 1fr; gap:14px; padding:10px 0; border-top:1px solid var(--borde); }
.prensa-datos dt{ color:var(--gris); font-size:.9rem; font-variation-settings:"wght" 600; }
.prensa-datos dd{ margin:0; color:var(--azul); font-size:.96rem; }

.prensa-contacto{
  margin-top:3em; padding:clamp(22px,3.4vw,32px); border-radius:var(--radio);
  border:2px solid var(--nieve-2); color:var(--texto);
}
.prensa-contacto h2{ font-size:1.3rem; color:var(--azul); font-variation-settings:"wdth" 110,"wght" 800; }
.prensa-contacto p{ margin-top:10px; }
.prensa-contacto a{ color:var(--azul); text-decoration-color:var(--amarillo); text-decoration-thickness:3px; text-underline-offset:3px; }

/* ───────── Responsive ───────── */
@media (max-width:1000px){
  .blog-lista{ grid-template-columns:repeat(2,1fr); }
  .tarjeta--destacada{ grid-template-columns:1fr; }
  .tarjeta__foto{ order:-1; }
}
@media (max-width:620px){
  .blog-lista{ grid-template-columns:1fr; }
  .articulo__cta .btn{ width:100%; }
  .prensa-datos dl > div{ grid-template-columns:1fr; gap:2px; }
}