/* =========================================================
   BLOG – Index + Single
   Navbar y Ola SIEMPRE visibles (fixed) + Sticky footer
   ========================================================= */
html, body { height: 100% }
:root{
  --navbar-h: 64px;  /* alto real del navbar (tu script lo actualiza) */
  --onda-h:   64px;  /* alto visible de la ola */
}

/* Body base + espacio para el navbar fixed */
body.blog-page{
  background:#fff;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding-top: var(--navbar-h); /* evita que el contenido quede debajo del navbar */
}

/* Contenedor principal que crece y empuja el footer */
.blog-page .blog-strip{
  background:#fff;
  position:relative;
  overflow:visible;
  flex:1 0 auto;
  margin-top: var(--onda-h); /* compensar la ola fija */
}

/* Footer siempre al fondo (sea include directo o envuelto) */
.blog-page footer,
.blog-page .footer,
.blog-page .footer-curve{
  margin-top:auto;
  width:100%;
}
.blog-page .footer-curve{ position:relative; background:#fff }

/* =========================================================
   NAVBAR FIJO + OLA FIJA (acompañan toda la página)
   ========================================================= */

/* Navbar fixed SOLO en páginas del blog */
.blog-page .navbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1100; /* por encima de todo */
}

/* Ola fija pegada debajo del navbar */
.blog-page .onda-superior.onda-fixed{
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  width: 100%;
  height: var(--onda-h);
  z-index: 1090;          /* justo debajo del navbar */
  pointer-events: none;   /* no bloquea clics del contenido */
  display: block;
}

/* Transiciones suaves y soporte para levantar al final (opcional) */
.blog-page .navbar,
.blog-page .onda-superior{ 
  transition: transform .28s ease, opacity .28s ease; 
  will-change: transform; 
}

/* Si usás el JS de IntersectionObserver, esto levanta el navbar al final */
body.blog-page.nav-lift .navbar{ transform: translateY(-100%); }
body.blog-page.nav-lift .onda-superior{ 
  transform: translateY(calc(-1 * var(--navbar-h)));
  opacity: 0;
}

/* Asegura que los SVG no dejen gaps por baseline */
.blog-page svg{ display:block }

/* =========================================================
   Tipografía y título
   ========================================================= */
.blog-page .blog-title,
.blog-page .display-5.fw-semibold{
  color:var(--secundario) !important;
  letter-spacing:.2px;
  line-height:1.1;
}

/* =========================================================
   Tarjeta de artículo
   ========================================================= */
.blog-page .blog-item{
  --card-pad:1.25rem;
  background:#fff;
  border:1px solid rgba(17,24,39,.04);
  border-radius:22px;
  box-shadow:0 10px 24px rgba(17,24,39,.06);
  padding:var(--card-pad);
  transition:box-shadow .2s ease, transform .15s ease;
  position:relative;
  overflow:hidden;
  z-index:0;
}
.blog-page .blog-item:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(17,24,39,.10);
}

/* Link de título */
.blog-page .blog-link{
  color:#0f172a;
  font-weight:800;
  text-decoration:none;
  letter-spacing:.2px;
  transition:color .15s ease, text-underline-offset .15s ease;
}
.blog-page .blog-link:hover{
  color:var(--secundario);
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Fecha */
.blog-page .blog-date{
  display:inline-block;
  padding:.35rem .65rem;
  border:1px solid rgba(0,0,0,.08);
  color:#475569;
  background:#fff;
  border-radius:999px;
  font-weight:700;
  font-size:.92rem;
}

/* Resumen */
.blog-page .blog-item .lead{ color:#555; line-height:1.7 }

/* Miniatura */
.blog-page .blog-thumb{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 6px 16px rgba(17,24,39,.06);
  transition:transform .25s ease, box-shadow .2s ease;
}
.blog-page .blog-item:hover .blog-thumb{
  transform:scale(1.01);
  box-shadow:0 10px 24px rgba(17,24,39,.10);
}

/* Placeholder sin imagen */
.blog-page .blog-thumb.placeholder{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
  border:1px dashed rgba(0,0,0,.12);
  color:#64748b;
  font-weight:700;
}

/* Espaciados compatibles con .mb-5/.pb-5 existentes */
.blog-page .blog-item.mb-5{ margin-bottom:2.25rem !important }
.blog-page .blog-item.pb-5{ padding-bottom:calc(var(--card-pad) + .25rem) !important }

/* =========================================================
   Paginación
   ========================================================= */
.blog-page .pagination .page-link{
  border-radius:10px;
  border:1px solid rgba(17,24,39,.08);
  color:#334155;
  font-weight:700;
  background:#fff;
}
.blog-page .pagination .page-link:hover,
.blog-page .pagination .active .page-link{
  background:var(--secundario);
  color:#fff;
  border-color:var(--secundario);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width:992px){
  .blog-page .blog-item{ padding:1.75rem }
  .blog-page .h3{ font-size:1.55rem }
}
@media (max-width:991.98px){
  .blog-page .blog-item{ padding:1rem; border-radius:18px }
  .blog-page .blog-thumb{ border-radius:14px }
}
@media (max-width:575.98px){
  .blog-page .display-5{ font-size:2rem }
  .blog-page .h3{ font-size:1.25rem }
  .blog-page .blog-date{ font-size:.88rem }
  .blog-page .lead{ font-size:1rem }
}

/* =========================================================
   Accesibilidad
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .blog-page .blog-item,
  .blog-page .blog-thumb,
  .blog-page .navbar,
  .blog-page .onda-superior{ transition:none !important }
}
/* Quitar sombra/borde del navbar solo en blog */
.blog-page .navbar{
  box-shadow: none !important;
  border-bottom: 0 !important;
  filter: none !important;           /* por si usaste drop-shadow */
  -webkit-filter: none !important;
}

/* Si el markup tiene clases shadow*, también las anulamos */
.blog-page .navbar.shadow,
.blog-page .navbar.shadow-sm,
.blog-page .navbar.shadow-lg{
  box-shadow: none !important;
}

/* Algunos temas dibujan una “hairline” con ::after */
.blog-page .navbar::after{
  content: none !important;
}

/* Por las dudas, la ola tampoco debe proyectar sombra */
.blog-page .onda-superior.onda-fixed{
  box-shadow: none !important;
  filter: none !important;
}
.onda-superior{ width:100%; height:auto; display:block; }