/* Altitud 100K — Blog
   Paleta: #02183D (navy), #FFFFFF, #F21651, #F9921C, #8C1C3F, #913793
   Tipos: Poppins (titulares), Inter (texto) */

:root{
  --navy:#02183D;
  --white:#FFFFFF;
  --fucsia:#F21651;
  --orange:#F9921C;
  --burgundy:#8C1C3F;
  --purple:#913793;

  --ink:#0C1020;             /* texto oscuro en cards blancas */
  --muted:#8290A6;           /* texto secundario sobre navy */
  --card: #FFFFFF;           /* fondo de card */
  --ghost: rgba(255,255,255,.1);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* Reset mínimo y base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:#E8EEF6;
  background: var(--navy);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{width:min(1200px, 92%); margin-inline:auto}

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem;
  padding:.9rem 1.2rem;
  border-radius:999px;
  font-weight:600; letter-spacing:.2px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border:2px solid transparent;
  cursor:pointer;
}
.btn.small{padding:.55rem .9rem; font-size:.9rem}
.btn.primary{background:linear-gradient(135deg,var(--fucsia),var(--purple)); color:#fff; box-shadow:var(--shadow)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.secondary{background:var(--ghost); border-color:rgba(255,255,255,.25)}
.btn.secondary:hover{background:rgba(255,255,255,.15)}
.btn.ghost{border-color:rgba(255,255,255,.35); background:transparent}
.btn.ghost:hover{background:var(--ghost)}
.btn.white{background:#fff; color:var(--ink)}
.btn.text{padding:0; border:0; background:transparent; color:var(--fucsia)}
.btn.text:hover{opacity:.9}
button{font:inherit; color:inherit}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter: saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(2,24,61,.85), rgba(2,24,61,.65));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding: .8rem 0}
.brand{display:flex; align-items:center; gap:.7rem}
.brand img{height:36px; width:auto}
.brand-text{
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:700; letter-spacing:.5px; font-size:1.1rem;
}
.brand-text span{color:var(--fucsia)}
.mainnav{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.mainnav a{opacity:.9; padding:.4rem .6rem; border-radius:8px}
.mainnav a:hover,.mainnav a.active{opacity:1; background:rgba(255,255,255,.06)}

/* Hero */

/* Hero */
.hero{
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 70vh, 760px);
}
.hero .wrap{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2.2rem;
  align-items: center;
  padding: clamp(2rem, 4vw, 4rem) 0; /* el padding va en el contenido, no en el contenedor */
  position: relative;
  z-index: 2; /* por encima del video */
}
.hero h1{
  font-family:Poppins, Inter, sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height:1.05; margin:.2rem 0 .8rem
}
.hero p{max-width: 62ch; color:#D6DEEA; font-size:1.05rem}
.hero-cta{display:flex; gap:.8rem; margin:1rem 0 1.2rem}
.hero-meta{display:flex; gap:.6rem; list-style:none; padding:0; margin:0}
.hero-meta li{
  font-size:.85rem; color:#C4D0E5; background:rgba(255,255,255,.08);
  padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.12)
}
.hero-art img{border-radius: clamp(16px, 2vw, 22px); box-shadow: var(--shadow)}

/* Video de fondo */
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
/* Capa de oscurecido para legibilidad */
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(242,22,81,.35), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(145,55,147,.30), transparent 60%),
    linear-gradient(180deg, rgba(2,24,61,.55), rgba(2,24,61,.75));
}

/* Dos fuentes de video: desktop/móvil */
.hero-mobile{ display:none; }
@media (max-width: 720px){
  .hero-desktop{ display:none; }
  .hero-mobile{ display:block; }
}

/* Respeta “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none; }
  .hero::after{ background: linear-gradient(180deg, rgba(2,24,61,.65), rgba(2,24,61,.85)); }
}




/* Filtros */
.filters{position:sticky; top:64px; z-index:30; background:rgba(2,24,61,.92); border-block:1px solid rgba(255,255,255,.08)}
.filters .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; flex-wrap:wrap}
.chips{display:flex; gap:.5rem; flex-wrap:wrap}
.chip{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#EFF4FF; padding:.5rem .75rem; border-radius:999px; cursor:pointer; font-weight:600; font-size:.92rem;
}
.chip:hover{background:rgba(255,255,255,.12)}
.chip.is-active{background:linear-gradient(135deg,var(--fucsia),var(--purple)); border-color:transparent}
.search{display:flex; align-items:center; gap:.45rem; padding:.42rem .7rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
.search input{background:transparent; border:0; outline:0; color:#fff; min-width:240px}
.search input::placeholder{color:#C7D3EA}

/* Featured */
.content-area{padding: 2.2rem 0}
.featured{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:1.6rem;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); padding:1rem; border-radius: var(--radius);
}
.card-media img{border-radius: calc(var(--radius) - 6px)}
.card-body{padding:.6rem .8rem}
.card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem}
.meta{color:#C7D3EA; font-size:.9rem; opacity:.9}
.card-title a{display:inline-block; font-family:Poppins, Inter, sans-serif; font-weight:700; font-size: clamp(1.2rem, 2.6vw, 1.8rem)}
.card-excerpt{color:#E3EAF6; margin:.5rem 0 1rem}
.card-actions{display:flex; align-items:center; gap:1rem}

/* Pills por categoría */
.pill{--bg:rgba(255,255,255,.12); background:var(--bg); color:#fff; font-weight:700; letter-spacing:.2px; padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); font-size:.82rem}
.cat-divulgacion{--bg: linear-gradient(135deg,var(--orange),#FFB24E)}
.cat-opinion{--bg: linear-gradient(135deg,var(--fucsia),#FF4C84)}
.cat-ingenieria{--bg: linear-gradient(135deg,#2C9CF0,#7FD1FF)}
.cat-stem{--bg: linear-gradient(135deg,var(--purple),#BC6DD6)}
.cat-noticias{--bg: linear-gradient(135deg,var(--burgundy),#BE365B)}

/* Grid de cards */
.grid{
  margin-top:2rem;
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 6;
  background: var(--card); color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform: translateY(-4px)}
.card .card-body .card-excerpt{color:#3C4456}

/* Utilidades */
.center{display:flex; justify-content:center; margin:1.6rem 0}

/* Newsletter */
.newsletter{
  margin: 3.2rem 0 0; padding: 3rem 0;
  background: radial-gradient(120% 120% at 10% 0%, var(--fucsia), transparent 60%),
              radial-gradient(120% 120% at 100% 0%, var(--purple), transparent 60%),
              linear-gradient(160deg, var(--fucsia), var(--purple));
  border-top:1px solid rgba(255,255,255,.15);
}
.newsletter .wrap{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.newsletter h2{font-family:Poppins, Inter, sans-serif; margin:0 0 .4rem}
.news-form{display:flex; gap:.6rem}
.news-form input{
  padding:.9rem 1rem; border-radius:999px; border:0; min-width:280px;
}

/* Footer */
.site-footer{position:relative; padding:2.5rem 0 4.5rem; background:rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.08); margin-top:0}
.site-footer .wrap{display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:1.6rem; align-items:start}
.site-footer img{height:38px}
.footnav a{display:block; padding:.35rem 0; color:#D6DEEA}
.social a{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px; background:rgba(255,255,255,.08); margin-right:.5rem}
.social a:hover{background:rgba(255,255,255,.16)}
.to-top{
  position:absolute; right:2rem; bottom:1.6rem; border:0; border-radius:999px; width:46px; height:46px;
  background:linear-gradient(135deg,var(--orange),#FFC26B); color:#111; font-weight:800; cursor:pointer; box-shadow:var(--shadow); display:none;
}

/* Barra de progreso */
.reading-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--fucsia), var(--purple), var(--orange));
  z-index:60;
}

/* Responsividad */
@media (max-width: 1024px){
  .hero .wrap{grid-template-columns: 1fr; text-align:left}
  .hero-art{order:-1} /* imagen arriba en tablets */
  .featured{grid-template-columns: 1fr}
  .grid .card{grid-column: span 6}
}
@media (max-width: 720px){
  .mainnav{display:none}
  .filters{top:56px}
  .grid{grid-template-columns: repeat(6,1fr)}
  .grid .card{grid-column: span 6}
  .site-footer .wrap{grid-template-columns: 1fr}
  .news-form{width:100%}
  .news-form input{flex:1}
}

/* Utilidades de estado */
.hidden{display:none !important}






.hero { position:relative; overflow:hidden; }
.hero::before { /* puedes mantener tu glow actual o usarlo de overlay */ }

.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;            /* rellena sin deformar */
  filter: saturate(105%) contrast(105%);
  z-index:0;
}

/* Capa para oscurecer y que el texto sea legible */
/* Overlay más CLARO, modificar aca para cambiar, la claridad del hero */ 
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(242,22,81,.18), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(145,55,147,.16), transparent 60%),
    /* degradé oscuro suave solo para contraste de texto */
    linear-gradient(180deg, rgba(2,24,61,.22), rgba(2,24,61,.42));
}


.hero .wrap, .hero-copy, .hero-art { position:relative; z-index:2; }

/* Si usas dos videos, muestra/oculta por media query */
.hero-mobile{ display:none; }
@media (max-width: 720px){
  .hero-desktop{ display:none; }
  .hero-mobile{ display:block; }
}

/* Respeta “reducir movimiento” del usuario */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display:none; }
  .hero::after{ background: linear-gradient(180deg, rgba(2,24,61,.65), rgba(2,24,61,.85)); }
}







/* ===== Legibilidad del título sobre el video (Hero) ===== */
.hero-copy{
  position: relative;
  z-index: 3;             /* sobre el video y la capa oscura */
  isolation: isolate;     /* aísla los pseudos de mezclas externas */
}

/* Halo suave detrás del bloque de texto */
.hero-copy::before{
  content: "";
  position: absolute;
  /* expandimos un poco el área para cubrir título + párrafos + botones */
  inset: -1.2rem -1.2rem -1.2rem -1.2rem;
  /* degradé oscuro con bordes degradados para que no parezca “caja” */
  background:
    radial-gradient(140% 120% at 25% 10%,
      rgba(2,24,61,.72) 0%,
      rgba(2,24,61,.46) 45%,
      rgba(2,24,61,.22) 75%,
      rgba(2,24,61,0) 100%);
  border-radius: clamp(16px, 2vw, 24px);
  backdrop-filter: blur(3px) saturate(110%);
  -webkit-backdrop-filter: blur(3px) saturate(110%);
  z-index: -1;            /* queda por detrás del texto */
  pointer-events: none;
}

/* Sombras sutiles para resaltar el texto */
.hero h1{
  color:#fff;
  text-shadow:
    0 2px 22px rgba(2,24,61,.65),
    0 0 1px rgba(0,0,0,.45);
}
.hero p{
  color:#EAF2FF;
  text-shadow: 0 2px 14px rgba(2,24,61,.55);
}

/* Si quieres un poquito más de contraste,
   sube estos valores y listo: */
@media (min-width: 0){
  .hero-copy::before{
    /* ejemplo: +10% de opacidad general */
    background:
      radial-gradient(140% 120% at 25% 10%,
        rgba(2,24,61,.80) 0%,
        rgba(2,24,61,.54) 45%,
        rgba(2,24,61,.28) 75%,
        rgba(2,24,61,0) 100%);
  }
}






/* ===== Botón Compartir (pill con icono) ===== */
.btn.share-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .9rem; border-radius:999px;
  font-weight:600; border:1.5px solid; background:transparent;
  cursor:pointer; transition:all .2s ease;
}
.btn.share-btn svg{width:18px;height:18px;display:block}

/* En cards blancas (grid) */
.card .btn.share-btn{
  color:var(--ink);
  border-color:rgba(12,16,32,.18);
  background:rgba(12,16,32,.04);
}
.card .btn.share-btn:hover{
  background:rgba(12,16,32,.08);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}

/* En el destacado (fondo oscuro) */
.featured .btn.share-btn{
  color:#EAF2FF;
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
}
.featured .btn.share-btn:hover{ background:rgba(255,255,255,.12) }

/* Estado de copiado */
.btn.share-btn.is-copied{
  color:#2fb36d;
  border-color:#2fb36d;
  background:rgba(47,179,109,.12);
}














/* =========================
   TEMA CLARO ALTITUD 100K
   ========================= */

/* Base clara (con un toque azul muy suave) */
body.theme-light{
  color:#0F1D3B; /* texto base */
  background:
    radial-gradient(120% 120% at 15% -10%, rgba(242,22,81,.06), transparent 55%),
    radial-gradient(120% 120% at 100% -20%, rgba(145,55,147,.05), transparent 55%),
    linear-gradient(180deg, #F8FBFF 0%, #F1F6FF 60%, #ECF2FF 100%);
}

/* Hero: mantenemos texto claro y overlay más suave para que el video se vea más */
body.theme-light .hero::after{
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(242,22,81,.12), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(145,55,147,.10), transparent 60%),
    linear-gradient(180deg, rgba(2,24,61,.12), rgba(2,24,61,.28));
}
body.theme-light .hero h1{ color:#FFF; }
body.theme-light .hero p{ color:#F1F6FF; }

/* Halo detrás del bloque de texto (un poco más claro) */
body.theme-light .hero-copy::before{
  background:
    radial-gradient(140% 120% at 25% 10%,
      rgba(2,24,61,.60) 0%,
      rgba(2,24,61,.38) 45%,
      rgba(2,24,61,.16) 75%,
      rgba(2,24,61,0) 100%);
  backdrop-filter: blur(3px) saturate(110%);
  -webkit-backdrop-filter: blur(3px) saturate(110%);
}

/* Barra de filtros y búsqueda en blanco */
body.theme-light .filters{
  background: rgba(255,255,255,.92);
  border-block: 1px solid #E6ECF5;
  box-shadow: 0 8px 24px rgba(2,24,61,.06);
}
body.theme-light .chip{
  color:#1E2A44;
  background:#FFFFFF;
  border-color:#E2E8F4;
}
body.theme-light .chip:hover{ background:#F6F9FF }
body.theme-light .chip.is-active{
  color:#fff;
  background: linear-gradient(135deg, var(--fucsia), var(--purple));
  border-color: transparent;
}
body.theme-light .search{
  background:#FFFFFF;
  border-color:#E2E8F4;
}
body.theme-light .search input{ color:#1E2A44 }
body.theme-light .search input::placeholder{ color:#6B7A96 }

/* Cards y tipografías dentro del grid ya son claras;
   solo suavizamos sombras y metadatos */
body.theme-light .card{ box-shadow: 0 14px 30px rgba(2,24,61,.10) }
body.theme-light .meta{ color:#6B7A96 }

/* Topbar: puedes mantenerla oscura (identidad de marca) o aclararla.
   — Opción A (recomendada): conservar oscura (no toques nada).
   — Opción B (clara): descomenta lo siguiente. */
/*
body.theme-light .topbar{
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid #E6ECF5;
}
body.theme-light .mainnav a{ color:#26324A; opacity:.9 }
body.theme-light .mainnav a:hover,
body.theme-light .mainnav a.active{ background:#EEF3FF; opacity:1 }
*/

/* Newsletter: mantiene el gradiente pero con menos “peso” */
body.theme-light .newsletter{
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(242,22,81,.80), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(145,55,147,.70), transparent 60%),
    linear-gradient(160deg, rgba(242,22,81,.90), rgba(145,55,147,.85));
}

/* Footer claro */
body.theme-light .site-footer{
  background:#F6F9FF;
  border-top:1px solid #E6ECF5;
  color:#3A4761;
}
body.theme-light .footnav a{ color:#415575 }
body.theme-light .social a{ background:#EEF3FF }

/* Botón “Compartir” en cards (ligeramente más claro aún) */
body.theme-light .card .btn.share-btn{
  background:#F6F9FF;
  border-color:#E2E8F4;
}
body.theme-light .card .btn.share-btn:hover{
  background:#EEF3FF;
  box-shadow:0 6px 18px rgba(2,24,61,.10);
}

/* Lectura de progreso: misma paleta, un poco más fina si quieres */
body.theme-light .reading-progress{
  height: 3px;
}





/* =====================================
   CONTRASTE EXTRA – TEMA CLARO
   ===================================== */

/* 1) Topbar: links 100% legibles sobre el fondo */
body.theme-light .topbar{
  background: linear-gradient(180deg, rgba(2,24,61,.78), rgba(2,24,61,.62));
  backdrop-filter: saturate(140%) blur(8px);
}
body.theme-light .topbar .mainnav a{
  color:#F4F8FF;              /* blanco azulado */
  opacity:1;                  /* quita el 0.9 */
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
  font-weight:600;
}
body.theme-light .topbar .mainnav a:hover,
body.theme-light .topbar .mainnav a.active{
  background: rgba(255,255,255,.12);
  color:#fff;
}

/* 2) Hero: CTA “Recibe novedades” y chips más fuertes */
.hero .btn.ghost{
  color:#FFFFFF;
  border-color: rgba(255,255,255,.60);
  background: rgba(2,24,61,.18);          /* leve oscurecido para contraste */
  box-shadow: 0 6px 18px rgba(0,0,0,.10) inset;
}
.hero .btn.ghost:hover{
  background: rgba(2,24,61,.26);
}

/* Chips debajo del título (STEM, Ingeniería, etc.) */
.hero-meta li{
  color:#FFFFFF;
  background: rgba(2,24,61,.40);          /* antes .08: muy tenue sobre el video */
  border:1px solid rgba(255,255,255,.36);
  box-shadow: 0 6px 18px rgba(0,0,0,.10) inset, 0 6px 18px rgba(0,0,0,.08);
}

/* 3) Destacado (featured) en tema claro: texto y botones con contraste */
body.theme-light .featured{
  background:#FFFFFF;                     /* fondo blanco limpio */
  border:1px solid #E6ECF5;
}
body.theme-light .featured .meta{ color:#6B7A96; }
body.theme-light .featured .card-excerpt{ color:#3A4761; }  /* mucho más legible */
body.theme-light .featured .btn.text{ color:#F21651; }      /* fucsia marca */
/* botón Compartir en el destacado */
body.theme-light .featured .btn.share-btn{
  color:#26324A;
  border-color:#E2E8F4;
  background:#F6F9FF;
}
body.theme-light .featured .btn.share-btn:hover{
  background:#EEF3FF;
}
















/* --- Control de solape entre HERO y FILTROS --- */
:root{
  --hero-bleed: 72px;        /* cuánto “baja” el video */
  --filters-top-pad: 20px;   /* aire interno arriba en filtros */
}

/* El video se extiende bajo la siguiente sección */
.hero{
  position: relative;
  min-height: clamp(520px, 68vh, 860px);
  margin-bottom: calc(-1 * var(--hero-bleed));
  overflow: hidden;
}
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subimos la sección de filtros para que tape el hueco,
   y dejamos solo un padding pequeño arriba. */
.hero + .filters{
  position: relative;
  z-index: 2;
  /* mover hacia arriba la sección (mismo valor que el bleed del hero) */
  margin-top: calc(-1 * var(--hero-bleed));
  /* un poco de respiro interno arriba para que no pegue con el borde */
  padding-top: var(--filters-top-pad);

  /* opcional: que el “tab” blanco tenga borde redondeado arriba */
  background: #fff;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}

/* En móvil, un poco menos de bleed y de padding */
@media (max-width: 640px){
  :root{
    --hero-bleed: 56px;
    --filters-top-pad: 16px;
  }
}



/* ===== Eliminar la franja entre el hero y la sección de filtros ===== */

/* Ajuste rápido desde una variable */
:root{
  /* cuánto debe solaparse la siguiente sección con el hero */
  --overlap-hero: 90px;     /* súbelo/bájalo según necesites (p.ej. 70–120) */
}

/* El video llena el hero por completo (por si acaso) */
.hero{
  position: relative;
  overflow: hidden;
}
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subimos TODO el bloque siguiente (#blog-surface) para tapar la franja */
#blog-surface{
  position: relative;
  z-index: 2;                         /* encima del video */
  margin-top: calc(-1 * var(--overlap-hero));
}

/* Asegúrate de que los filtros no vuelvan a empujar hacia abajo */
#blog-surface,
#blog-surface .filters,
#blog-surface .filters .wrap{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Si quieres que el "tab" de filtros quede blanco y redondeado arriba */
#blog-surface .filters{
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding-top: 16px; /* un poco de aire interno ya dentro del blanco */
}

/* Opcional: en móvil, un poco menos de solape */
@media (max-width: 640px){
  :root{ --overlap-hero: 70px; }
}





/* === Filtros: franja tipo boletín, centrada en eje Y === */
:root{
  --filters-h: 86px;                 /* alto mínimo de la franja */
  --filters-pad-x: 20px;             /* padding lateral */
}

/* Fondo y layout de la franja */
.filters{
  /* quita el blanco anterior si lo tenías */
  background: linear-gradient(
              180deg,
              color-mix(in srgb, var(--violet, #913793) 12%, #fff 88%),
              color-mix(in srgb, var(--blue,   #58C6FF) 10%, #fff 90%)
            );
  border-radius: 22px 22px 0 0;
  box-shadow: 0 1px 0 #ffffffa6 inset, 0 10px 28px rgba(0,0,0,.06);
}

/* Centrado vertical + separación */
.filters .wrap{
  min-height: var(--filters-h);
  padding: 12px var(--filters-pad-x);
  display: flex;
  align-items: center;               /* ← centrado en eje Y */
  justify-content: space-between;
  gap: 20px;
}

/* Grupo de chips: centrado y sin márgenes raros */
.filters .chips{
  display: flex;
  align-items: center;               /* ← centrado en eje Y */
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

/* Asegura legibilidad de las chips sobre el nuevo fondo */
.filters .chips .chip,
.filters .chips a{
  background: #ffffff;
  color: #0b1430;
  border: 1px solid #e6eaf2;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* La chip “Todo” puede mantener su gradiente de marca */
.filters .chips .chip.active{
  background: linear-gradient(180deg, #d62576, #a838a8);
  color: #fff;
  border-color: transparent;
}

/* Buscador legible y centrado verticalmente */
.filters .search{
  display: flex;
  align-items: center;               /* ← centrado en eje Y */
  gap: 10px;
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  margin: 0;                         /* quita saltos arriba/abajo */
}
.filters .search svg{ opacity: .7 }
.filters .search input{
  height: 36px;
  line-height: 36px;                 /* ayuda a centrar el texto dentro */
  border: 0;
  outline: 0;
  background: transparent;
  color: #0b1430;                    /* texto oscuro para fondo claro */
}

/* Responsive: apílalo bonito en pantallas pequeñas */
@media (max-width: 900px){
  .filters .wrap{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px var(--filters-pad-x);
  }
  .filters .search{ width: 100% }
}