/* ============================================================================
   Blog con estética corporativa. Se carga junto a atrio-base + revista + site.
   El contenido del blog conserva sus componentes (.at-*); aquí solo el hero,
   la sub-navegación, el buscador y algunos ajustes de encaje con el nav.
   ========================================================================== */

/* El shell del blog va sobre fondo claro corporativo */
body.body-site.body-revista{ background:#fff; }

/* Hero del blog (usa .phero de site.css) */
.blog-phero{ padding:120px 0 34px; }
.blog-phero.is-compact{ padding:104px 0 22px; }
.blog-phero h1{ font-size:clamp(1.9rem,4vw,2.7rem); }

/* Barra: sub-nav + buscador */
.blog-bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:22px; flex-wrap:wrap;
}
.blog-subnav{ display:flex; gap:8px; }
.blog-subnav a{
  color:rgba(255,255,255,.82); font-weight:600; font-size:.92rem;
  padding:8px 16px; border-radius:999px; border:1px solid transparent; transition:.15s;
}
.blog-subnav a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.blog-subnav a.is-active{ color:#0b1f13; background:var(--leaf-2); }

.blog-search{
  position:relative; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  border-radius:12px; padding:0 14px; min-width:min(340px,100%); backdrop-filter:blur(6px);
}
.blog-search svg{ width:18px; height:18px; color:rgba(255,255,255,.7); flex:none; }
.blog-search input{
  background:transparent; border:0; outline:0; color:#fff; font:inherit;
  padding:11px 0; width:100%;
}
.blog-search input::placeholder{ color:rgba(255,255,255,.6); }

/* Panel de sugerencias (reusa .at-search-sug de revista.css pero reposicionado) */
.blog-search .at-search-sug{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  background:#fff; color:var(--ink); border:1px solid var(--line,#e4e9e0);
  border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.22); overflow:hidden;
  display:none; max-height:min(60vh,420px); overflow-y:auto;
}
.blog-search .at-search-sug.is-open{ display:block; }
.blog-search .at-sug{ display:flex; gap:12px; align-items:center; padding:11px 14px; text-decoration:none; color:var(--ink); }
.blog-search .at-sug:hover{ background:var(--cream,#f4f7f0); }
.blog-search .at-sug + .at-sug{ border-top:1px solid var(--line,#eee); }
.blog-search .at-sug-ic{ width:30px; height:30px; border-radius:8px; background:var(--leaf-soft,#eaf3df); color:var(--leaf-d,#5c9128); display:grid; place-items:center; flex:none; }
.blog-search .at-sug-ic svg{ width:16px; height:16px; }
.blog-search .at-sug-cat{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted,#5f7064); }
.blog-search .at-sug-ti{ display:block; font-size:.92rem; font-weight:500; }
.blog-search .at-sug-empty{ padding:14px; color:var(--muted,#5f7064); font-size:.9rem; }

/* El contenido del blog respira dentro del ancho corporativo */
.body-revista .at-wrap{ padding-top:34px; }

/* ── Header propio del blog (separado del corporativo) ───────────────────── */
/* Sin hero detrás → header sólido y sticky desde el inicio (legible sobre blanco). */
.site-nav--blog,
.site-nav--blog.is-solid{
  position:sticky; top:0;
  background:rgba(11,31,19,.97);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 6px 24px rgba(0,0,0,.16);
}
/* Con la barra fija (announce), el contenido y el header arrancan bajo ella */
body.body-revista.has-announce{ padding-top:38px; }
body.body-revista.has-announce .site-nav--blog{ top:38px; }

.site-nav--blog .nav-brand small{ color:var(--leaf-2); }
.nav-back{ opacity:.85; }
.nav-back:hover{ opacity:1; }
/* Buscador dentro del header del blog */
.header-search{ min-width:min(300px,42vw); padding:0 12px; }
.header-search svg{ width:17px; height:17px; }
.header-search input{ padding:9px 0; font-size:.9rem; }

@media(max-width:900px){
  .header-search{ min-width:180px; }
}
@media(max-width:640px){
  .site-nav--blog .header-search{ display:none; }
}

/* .blog-bar/.blog-subnav quedaron sin uso al mover la nav al header (se conservan por si acaso) */

/* ══ Paleta y tarjetas del BLOG unificadas con el sitio corporativo ═════════ */
/* Sobrescribe los tokens del blog (rojo → verde de marca; fuentes → Inter). */
body.body-revista{
  --red:#5c9128;
  --red-soft:#eaf3df;
  --serif:'Inter',system-ui,-apple-system,sans-serif;
  --read:'Inter',system-ui,-apple-system,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --ui:'Inter',system-ui,-apple-system,sans-serif;
}
body.body-revista ::selection{ background:rgba(110,168,50,.22); }

/* Tarjetas de la cuadrícula: misma receta que .pcard del sitio y .lp-card de
   la portada —esquina viva y filete que se tiñe de verde al pasar el cursor—.
   Antes el borde desaparecía al hacer hover y la diferencia saltaba a la vista
   al pasar de /proyectos a /revista. */
.body-revista .at-card{
  background:var(--surface-1,#fff); border:1px solid var(--line,#e4e9e0);
  overflow:hidden; padding:0 0 16px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s, box-shadow .25s;
}
.body-revista .at-card .at-card-img{ margin-bottom:12px; aspect-ratio:16/10; }
.body-revista .at-card > *:not(.at-card-img){ padding-left:16px; padding-right:16px; }
.body-revista .at-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px -22px rgba(16,40,24,.45);
  border-color:var(--leaf,#6ea832);
}

/* Destacado + filas: imágenes redondeadas y hover suave verde */
.body-revista .at-lead-img,
.body-revista .at-row-thumb{ border-radius:12px; overflow:hidden; }
.body-revista .at-lead{ border-bottom-color:var(--line,#e4e9e0); }
.body-revista .at-row{ border-radius:12px; padding-left:12px; padding-right:12px; border-bottom:1px solid var(--line,#eef); }
.body-revista .at-row:hover{ background:var(--cream,#f4f7f0); }

/* Chips tipo píldora como en la tienda/corporativo */
.body-revista .at-chip{ border-radius:999px; padding:7px 15px; }
.body-revista .at-chip.is-active{ background:var(--forest-800,#12301e); border-color:var(--forest-800,#12301e); color:#fff; }

/* Botones de vista / tabs activos en verde (heredan de --red ya sobrescrito) */
.body-revista .at-vbtn.is-active{ background:var(--forest-800,#12301e); border-color:var(--forest-800,#12301e); }

/* Ficha de artículo: acento del "volver" y enlaces en verde ya vienen por token */
.body-revista .at-rail-item:hover .at-rail-title{ color:var(--red); }

/* Reels a pantalla completa (inmersivo, con su propio botón de cerrar) */
.at-reels{ top:0 !important; z-index:3000 !important; }
body.reels-open{ overflow:hidden; }
.at-vbtn .material-symbols-outlined{ font-size:20px; }
.at-reel-actions .material-symbols-outlined{ font-size:26px; }
.at-reels-close .material-symbols-outlined{ font-size:26px; }