/* ============================================================
   CGAP · Blog & Tips (sección "Blog & tips" de pages/nosotros.html —
   la ex pages/blog.html se dio de baja, quedaba aislada sin ningún link
   desde el resto del sitio; ver CLAUDE.md/CHANGELOG)
   ============================================================ */

/* Filtros por categoría */
.blog2-filters{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;margin-bottom:32px;
}
.blog2-chip{
  padding:9px 20px;border-radius:100px;
  border:1.5px solid var(--line);background:#fff;
  font-size:.85rem;font-weight:600;color:var(--muted);
  cursor:pointer;transition:all .18s;
}
.blog2-chip:hover{border-color:var(--magenta);color:var(--magenta)}
.blog2-chip.active{background:var(--magenta);color:#fff;border-color:var(--magenta)}

/* Cards (una sola fila, ver .carousel/.car-track más abajo — el
   contenido lo arma js/blog.js a partir de blog-data.js) */
.blog2-card{
  background:var(--blush-soft);border-radius:16px;
  border:1px solid var(--line);padding:24px;
  display:flex;flex-direction:column;gap:10px;
  transition:box-shadow .2s,transform .2s;
}
.blog2-card:hover{box-shadow:0 6px 20px rgba(173,30,119,.1);transform:translateY(-2px)}
.blog2-card-tag{
  font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tag-color, var(--magenta));
}
.blog2-card-title{font-family:'Fraunces',serif;font-size:1rem;color:var(--plum);margin:0;line-height:1.35}
.blog2-card-title a{color:inherit;text-decoration:none}
.blog2-card-title a:hover{color:var(--magenta)}
.blog2-card-what{font-size:.82rem;color:var(--muted);line-height:1.6;margin:0}
.blog2-card-quick{font-size:.82rem;color:#555;line-height:1.65;margin:0;flex:1}
/* CTA más llamativo: antes era un <a class="btn-outline"> con una clase
   que no existía en ningún lado, así que salía como texto plano sin
   ningún estilo de botón — ahora es una píldora sólida. */
.blog2-card-btn{
  margin-top:8px;align-self:flex-start;
  display:inline-flex;align-items:center;
  font-size:.82rem;font-weight:700;color:#fff;
  background:var(--magenta);padding:10px 20px;border-radius:100px;
  text-decoration:none;transition:background .2s,transform .2s;
}
.blog2-card-btn:hover{background:var(--magenta-dark);transform:translateY(-2px)}

/* Carrusel (una sola fila que se recorre con los botones ‹›, mismo
   patrón que el carrusel de "otras prácticas"/"otros tratamientos" de
   practica-detalle.css, copiado acá para no depender de esa hoja en
   esta página). .nos2-blog-catalog agranda el padding lateral del .wrap
   (24px por defecto) para que los botones floten con lugar de sobra dentro
   de ese margen propio, sin depender de cuánto margen externo le quede al
   .wrap contra el borde del viewport — a resoluciones de notebook comunes
   (1280-1366px) ese margen externo no alcanzaba y el botón terminaba
   superpuesto sobre la primera/última card. */
.nos2-blog-catalog{padding-left:80px;padding-right:80px}
.nos2-blog .carousel{position:relative}
.nos2-blog .car-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 2px 18px;-ms-overflow-style:none;scrollbar-width:none}
.nos2-blog .car-track::-webkit-scrollbar{display:none}
.nos2-blog .car-btn{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--magenta);font-size:1.5rem;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:background .2s,transform .2s}
.nos2-blog .car-btn:hover{background:var(--magenta);color:#fff;transform:translateY(-50%) scale(1.06)}
.nos2-blog .car-btn.prev{left:-56px}
.nos2-blog .car-btn.next{right:-56px}
.nos2-blog .car-track .blog2-card{scroll-snap-align:start;flex:0 0 320px}