/* =========================================================
   POST (single) – Layout base + sticky footer
   ========================================================= */
html, body { height:100% }
body.blog-page{
  background:#fff;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.post-hero, .post-body{ flex:0 0 auto }
.blog-page footer, .blog-page .footer, .blog-page .footer-curve{
  margin-top:auto;
  width:100%;
}

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

/* =========================================================
   Ola superior fija (debajo del navbar)
   ========================================================= */
:root{
  --navbar-h:64px;   /* ajustá si tu navbar mide distinto */
  --onda-h:64px;     /* alto visible de la ola superior */
}

/* La ola queda fija, siempre pegada bajo el navbar */
.blog-page .onda-superior.onda-fixed{
  position:fixed;
  top:var(--navbar-h);
  left:0;
  width:100%;
  height:var(--onda-h);
  z-index:1090;          /* navbar arriba (1100), ola debajo, contenido más abajo */
  pointer-events:none;   /* no bloquea clics */
}

/* Empujamos el primer bloque para que no quede oculto por la ola */
.post-hero{ margin-top:var(--onda-h) }

/* =========================================================
   Contenedor y hero
   ========================================================= */
.post-container{ max-width:860px; margin-inline:auto }
.post-hero{
  background:#fff;       /* fondo blanco total */
  padding:1rem 0 0;
}
.post-header{ padding-top:.5rem }
.post-back{
  display:inline-block;
  font-weight:700;
  padding:.45rem .7rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.65rem;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  text-decoration:none;
  color:#2b3a42;
  transition:transform .15s ease, box-shadow .2s ease;
}
.post-back:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.08) }

/* Título y meta */
.post-title{
  margin:1rem 0 .25rem;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--secundario);
}
.post-meta{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:#4b5563;
  font-weight:600;
}
.post-chip{
  display:inline-block;
  padding:.38rem .65rem;
  border:1px solid var(--secundario);
  border-radius:999px;
  background:#fff;
  line-height:1;
  font-size:.92rem;
}
.post-dot{ opacity:.5 }

/* =========================================================
   Imagen principal / media
   ========================================================= */
.post-media{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 0 1.25rem;
}
.post-media img{
  width:100%;
  max-width:50%;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

/* =========================================================
   Cuerpo del post
   ========================================================= */
.post-body{ padding:1.25rem 0 3rem; background:#fff }

.post-excerpt{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  padding:1.25rem 1.5rem;
  color:#374151;
  font-size:1.05rem;
  line-height:1.75;
  margin:0 0 1.25rem;
}

.post-content{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  padding:2rem;
  color:#2a2a2a;
  font-size:1.075rem;
  line-height:1.85;
}

/* Prosa/lectura */
.post-content p{ margin:0 0 1.1em }
.post-content h2{
  margin:1.6em 0 .6em;
  font-weight:800;
  color:var(--secundario);
  font-size:1.6rem;
}
.post-content h3{
  margin:1.4em 0 .5em;
  font-weight:700;
  color:#222;
  font-size:1.3rem;
}
.post-content a{
  color:var(--secundario);
  text-decoration:underline;
  text-underline-offset:3px;
}
.post-content ul, .post-content ol{ padding-left:1.25rem; margin:0 0 1.1em }
.post-content li{ margin:.3em 0 }
.post-content blockquote{
  margin:1.2em 0;
  padding:1rem 1.25rem;
  border-left:4px solid var(--secundario);
  background:#fafafa;
  border-radius:.5rem;
  color:#374151;
}
.post-content code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.95em;
  background:#f6f7f9;
  padding:.15em .35em;
  border-radius:.35rem;
  border:1px solid rgba(0,0,0,.06);
}
.post-content pre code{ display:block; padding:1rem; overflow:auto }
.post-content img{ max-width:100%; height:auto; border-radius:.5rem }

/* Video embebido */
.post-video{
  margin:1.25rem 0 0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* =========================================================
   Responsive
   ========================================================= */
   
@media (max-width:991.98px){
  .post-media img{ max-width:100% }
  .post-content{ padding:1.25rem }
}
@media (max-width:575.98px){
  .post-title{ font-size:1.65rem }
  .post-content{ font-size:1rem }
}

/* =========================================================
   Accesibilidad
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .post-back, .post-content, .post-video { transition:none !important }
}
:root { --navbar-h: 64px; } /* respaldo */

.blog-page .navbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  width: 100%;
}

body.blog-page{ padding-top: var(--navbar-h); }

.blog-page .onda-superior.onda-fixed{
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  width: 100%;
  height: var(--onda-h, 64px);
  z-index: 1090;
  pointer-events: none;
}

.post-hero{ margin-top: var(--onda-h, 64px); }
/* 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;
}