/* /blog rediseñado (Edu 25/10). Estética de la web: crema, tinta, píldoras, tarjetas redondeadas. */
:root { --b-tinta: #0b0b0c; --b-gris: #6b6e72; --b-linea: rgba(0, 0, 0, .08); --b-ease: cubic-bezier(.22, .9, .24, 1); }
/* portada */
.blog-hero.bh-dos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: end; border-bottom: 0 !important; }
.bh-txt h1 { letter-spacing: -.035em; }
.bh-lado { background: #fff; border: 1px solid var(--b-linea); border-radius: 22px; padding: 22px; box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .35); }
.bh-autor { display: flex; align-items: center; gap: 14px; }
.bh-autor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #eee; }
.bh-autor b { display: block; font-size: 16px; font-weight: 600; color: var(--b-tinta); }
.bh-autor span { display: block; font-size: 13px; color: var(--b-gris); margin-top: 2px; }
.bh-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.bh-cifras div { background: #f6f6f2; border-radius: 14px; padding: 12px; }
.bh-cifras b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--b-tinta); }
.bh-cifras span { display: block; font-size: 12px; color: var(--b-gris); margin-top: 2px; }
.bh-boton { display: flex; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 99px; background: var(--b-tinta); color: #fff !important;
  font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background .2s; }
.bh-boton:hover { background: #2a2a2c; }
.bh-boton span { transition: transform .25s var(--b-ease); }
.bh-boton:hover span { transform: translateX(4px); }
/* cabecera de la lista + filtros */
.bf-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.bf-cab .blog-section-label { margin: 0 !important; }
.bf-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.bf-filtros button { border: 1px solid var(--b-linea); background: #fff; color: var(--b-tinta); border-radius: 99px; padding: 8px 15px;
  font: 500 13.5px/1 var(--font-main, 'Inter', sans-serif); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.bf-filtros button:hover { border-color: rgba(0, 0, 0, .25); }
.bf-filtros button.on { background: var(--b-tinta); color: #fff; border-color: var(--b-tinta); }
/* tarjetas */
.blog-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
.blog-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--b-linea) !important; border-left: 1px solid var(--b-linea) !important;
  border-radius: 20px !important; overflow: hidden; background: #fff !important; transition: transform .35s var(--b-ease), box-shadow .35s, opacity .3s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .4); }
.blog-card.oculta { display: none; }
.bc-img { height: 170px; overflow: hidden; background: #eee; }
.bc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--b-ease); }
.blog-card:hover .bc-img img { transform: scale(1.05); }
.blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px !important; }
.blog-card-body h2 { letter-spacing: -.02em; }
.blog-card-tag { align-self: flex-start; border-radius: 99px !important; padding: 4px 10px !important; background: #f2f2ee !important; }
.blog-card-meta { display: flex; align-items: center; gap: 8px; margin-top: auto !important; padding-top: 14px; }
.bc-autor { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.blog-card-link { border-bottom: 0 !important; margin-top: 12px; font-weight: 600; }
.blog-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }      /* toda la tarjeta es el enlace */
/* destacada: ocupa dos columnas con la imagen al lado */
.blog-card.bc-destacada { grid-column: span 2; flex-direction: row; }
.bc-destacada .bc-img { width: 48%; height: auto; min-height: 300px; flex-shrink: 0; }
.bc-destacada .blog-card-body { padding: 28px 30px !important; }
.bc-destacada h2 { font-size: clamp(22px, 2.1vw, 28px) !important; line-height: 1.15 !important; }
/* banda final */
.bb-banda { max-width: var(--max-w, 1200px); margin: 30px auto 90px; display: flex; align-items: center; justify-content: space-between; gap: 22px;
  flex-wrap: wrap; padding: 32px 36px; border-radius: 24px; background: radial-gradient(120% 140% at 0% 100%, #1d2a4a 0%, #0f1012 60%); color: #fff; }
.blog-grid-wrap + .bb-banda, main > .bb-banda { width: calc(100% - 80px); }
.bb-banda b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.bb-banda span { display: block; margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, .65); }
.bb-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.bb-btn { padding: 14px 24px; border-radius: 99px; font-size: 15px; font-weight: 500; text-decoration: none; transition: background .2s; }
.bb-claro { background: #fff; color: var(--b-tinta); }
.bb-claro:hover { background: rgba(255, 255, 255, .86); }
.bb-linea { border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.bb-linea:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 960px) {
  .blog-hero.bh-dos { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-card.bc-destacada { grid-column: auto; flex-direction: column; }
  .bc-destacada .bc-img { width: 100%; min-height: 0; height: 190px; }
  .main > .bb-banda, main > .bb-banda { width: calc(100% - 40px); padding: 26px 22px; }
}

/* (25/10) caras sin cortar */
.bh-autor img, .bc-autor { object-position: 50% 6%; }