:root{
  --negro:#171717;
  --gris:#252525;
  --blanco:#ffffff;
  --rojo:#E8272A;
  --crema:#F9DFC1;
}
/* ── HAMBURGER ── */
.hamburger{
  background:none; border:none;
  width:40px; padding:0; z-index:9998;
  display:flex; flex-direction:column; gap:8px;
  position:fixed; top:31px; right:56px;
  mix-blend-mode:difference;
  cursor:default;
}
.hamburger .bar{ display:block; }

/* ── PAGE TOPBAR ── */
.page-topbar{
  width:100%;
  height:100px;
  position:relative;
  pointer-events:none;
}
.page-topbar-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:38px;
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:24px;
  color:var(--blanco);
  text-transform:lowercase;
  white-space:nowrap;
}
.page-topbar-count{
  position:absolute;
  right:56px;
  top:78px;
  font-family:'DM Sans',sans-serif;
  font-weight:500;
  font-size:13px;
  color:#666;
}

/* ── FILTROS ── */
.blog-filters-wrap{
  display:flex;
  justify-content:center;
  padding:0 56px 40px;
}
.blog-filters{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid #333;
  border-radius:100px;
  max-width:100%;
}
.filter-btn{
  font-family:'Unbounded',sans-serif;
  font-weight:500;
  font-size:13px;
  color:#888;
  background:none;
  border:none;
  padding:9px 20px;
  border-radius:100px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
  white-space:nowrap;
  flex-shrink:0;
}
.filter-btn:hover{ color:var(--blanco); }
.filter-btn.active{
  background:var(--rojo);
  color:var(--blanco);
}

/* ── FILTRO MOBILE (dropdown, mismo componente que servicios.html) ── */
.mobile-filter-wrap{ display:none; position:relative; }
.mobile-filter-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background-color:var(--gris);
  border:1px solid #333;
  border-radius:100px;
  color:var(--blanco);
  font-family:'Unbounded',sans-serif;
  font-weight:500;
  font-size:14px;
  padding:14px 20px;
  cursor:pointer;
  text-align:left;
}
.mobile-filter-toggle .chev{
  flex-shrink:0;
  transition:transform .25s ease;
}
.mobile-filter-toggle.open .chev{ transform:rotate(180deg); }
.mobile-filter-toggle:focus{ outline:none; border-color:var(--rojo); }

.mobile-filter-options{
  list-style:none;
  position:absolute;
  top:calc(100% + 10px);
  left:24px;
  right:24px;
  background:var(--gris);
  border:1px solid #333;
  border-radius:20px;
  padding:10px;
  z-index:30;
  box-shadow:0 16px 32px rgba(0,0,0,.5);
}
.mobile-filter-options[hidden]{ display:none; }
.mobile-filter-options li{
  font-family:'Unbounded',sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--blanco);
  padding:16px 18px;
  border-radius:14px;
  cursor:pointer;
}
.mobile-filter-options li + li{ margin-top:8px; }
.mobile-filter-options li.active{
  background:var(--rojo);
  font-weight:700;
}

/* ── BLOG GRID (1 columna central) ── */
.blog-list-wrap{
  padding:0 56px 40px;
  position:relative;
}
.blog-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:760px;
  margin:0 auto;
}

/* ── CARD (adaptada de .estudio-card) ── */
.blog-post-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  border:1px solid #404040;
  border-radius:4px;
  padding:28px 32px;
  gap:14px;
  transition:background .3s, border-color .3s;
  cursor:pointer;
}
.blog-post-card:hover{
  background:var(--gris);
  border-color:var(--gris);
}
.bpc-meta{
  display:flex;
  align-items:center;
  gap:12px;
}
.bpc-tag{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:3px;
  line-height:1;
}
.bpc-tag.tag-blog{
  background:var(--rojo);
  color:var(--blanco);
}
.bpc-tag.tag-podcast{
  background:transparent;
  border:1px solid var(--crema);
  color:var(--crema);
}
.bpc-fecha{
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.08em;
  color:#737373;
}
.bpc-titulo{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.25;
  color:var(--blanco);
}
.bpc-extracto{
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  line-height:1.65;
  color:#737373;
}
.bpc-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:8px;
  border-top:1px solid #2a2a2a;
  margin-top:4px;
}
.bpc-ver{
  font-family:'DM Sans',sans-serif;
  font-weight:500;
  font-size:13px;
  color:var(--blanco);
  opacity:0.5;
  transition:opacity .2s;
}
.blog-post-card:hover .bpc-ver{ opacity:1; }

/* Scroll reveal */
.blog-post-card.reveal-hidden{ opacity:0; transform:translateY(16px); }

/* ── PAGINACIÓN (idéntica a todos-los-casos) ── */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  padding:24px 24px 100px;
}
.page-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Unbounded',sans-serif;
  font-weight:500;
  font-size:13px;
  color:#666;
  background:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
  text-decoration:none;
}
.page-btn:hover:not(.active):not(.stub){
  border-color:#555;
  color:var(--blanco);
}
.page-btn.active{
  background:var(--rojo);
  color:var(--blanco);
}
.page-btn.stub{
  cursor:default;
  color:#3a3a3a;
}
.page-arrow{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:1px solid #333;
  cursor:pointer;
  transition:border-color .2s ease;
  text-decoration:none;
}
.page-arrow:hover{ border-color:var(--blanco); }
.page-arrow svg path{ stroke:#888; transition:stroke .2s ease; }
.page-arrow:hover svg path{ stroke:var(--blanco); }
.page-arrow[disabled]{ opacity:0.25; pointer-events:none; }
.page-arrow[aria-disabled="true"]{ opacity:0.25; pointer-events:none; }
.page-numbers-wrap{ display:flex; align-items:center; gap:8px; }
.blog-empty{ color:#888; font-family:'DM Sans',sans-serif; font-size:16px; text-align:center; padding:60px 20px; }

/* ── MOBILE ── */
@media (max-width:768px){
  .hamburger{ top:26px; right:24px; width:32px; }
  .page-topbar{ height:96px; }
  .page-topbar-title{ font-size:18px; top:32px; }
  .page-topbar-count{ display:none; }

  .blog-filters-wrap{
    display:block;
    padding:16px 0 24px;
  }
  .blog-filters{ display:none; }
  .mobile-filter-wrap{ display:block; width:100%; padding:0 24px; box-sizing:border-box; }

  .blog-list-wrap{ padding:0 24px 24px; }
  .blog-grid{ gap:12px; }
  .blog-post-card{ padding:20px 20px; gap:10px; }
  .bpc-titulo{ font-size:17px; }
  .bpc-extracto{ font-size:13px; line-height:1.55; }
  .bpc-fecha{ font-size:10px; }
  .bpc-tag{ font-size:9px; padding:4px 8px; }

  .pagination{ padding:16px 12px 64px; gap:6px; flex-wrap:nowrap; }
  .page-btn{ width:28px; height:28px; font-size:12px; flex-shrink:0; }
  .page-arrow{ width:28px; height:28px; flex-shrink:0; }
  #pageNumbers{
    overflow-x:auto;
    flex:1;
    min-width:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }
  #pageNumbers::-webkit-scrollbar{ display:none; }
}

/* ── Logo móvil — tamaño propio de esta página ── */
@media (max-width:768px){
  #logo-sticky{ width:56px; top:20px; left:24px; }
}