/* =====================================================================
   BLOG.CSS — sección (/blog/) y post individual (/blog/<slug>/)
   =====================================================================
   Pensado para un blog que va a alimentar un ADMIN: el diseño no puede
   depender de cuánto texto traiga cada post, ni de que la foto sea
   vertical u horizontal, ni de que haya autor o categoría.

   Reglas del sistema aplicadas desde el primer render:
     · ⛔ nunca negro — el oscuro es var(--azul) #043768
     · medida de línea de lectura: 68 caracteres (no más)
     · móvil: 24px de aire, copy 15/1.55, todo lo tocable 44px
     · el bloque móvil va AL FINAL para ganar por cascada
   ===================================================================== */

/* ═════════════════════════════════════════════════════════════════════
   POST INDIVIDUAL
   ═════════════════════════════════════════════════════════════════════ */

/* 1 · progreso de lectura — la única animación del artículo */
.bp-progreso{position:fixed;top:0;left:0;right:0;height:3px;z-index:2400;
  background:rgba(3,35,71,.12);pointer-events:none}
.bp-progreso span{display:block;height:100%;width:0;background:var(--amarillo);
  transition:width .1s linear}

/* 2 · hero */
/* ⚠️⚠️ 2026-07-28 · Carlos: "falta el header en los single blogs".
   El hero es `position:relative` y arranca en y=0, justo donde flota el
   header. Sin z-index propio se apila por orden del DOM y, al ir DESPUÉS
   del <header>, lo tapaba. Con z-index:0 el hero queda por debajo del
   header (que va en 2200) y la píldora vuelve a verse.
   ⚠️ Y el título necesita aire arriba, o queda debajo de la píldora. */
.bp-hero{position:relative;z-index:0;min-height:clamp(360px,58vh,560px);display:flex;
  align-items:flex-end;overflow:hidden;background:var(--azul);
  padding-top:96px}
.bp-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bp-hero__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,35,71,.30) 0%,rgba(3,35,71,.05) 34%,
                                    rgba(3,35,71,.72) 76%,rgba(3,35,71,.94) 100%)}
.bp-hero__in{position:relative;z-index:2;padding-bottom:clamp(26px,5vh,52px);color:#fff}

.bp-migas{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:2px;font-size:12px;color:rgba(255,255,255,.82);
  display:flex;align-items:center;gap:8px;margin:0 0 14px}
.bp-migas a{color:var(--amarillo);text-decoration:none}
.bp-migas a:hover{text-decoration:underline}

.bp-titulo{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  color:#fff;margin:0;line-height:1.06;letter-spacing:.4px;
  font-size:clamp(29px,4.6vw,60px);max-width:20ch;
  text-shadow:0 4px 22px rgba(3,35,71,.5)}

.bp-ficha{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:16px 0 0;
  font-family:"Museo Sans Rounded",sans-serif;font-size:14px;color:rgba(255,255,255,.88)}
.bp-autor{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.bp-autor img{border-radius:50%;object-fit:cover}
.bp-sep{opacity:.5}

/* 5 · cuerpo · la rejilla deja el compartir a un lado */
.bp-lienzo{background:#fff;padding:clamp(30px,5vh,58px) 0 clamp(20px,4vh,40px)}
/* ⚠️⚠️ 2026-07-28 · Carlos: "el contenido debe ir centrado y las redes abajo,
   en línea".  Fuera la columna lateral de compartir: era la que descuadraba
   el texto (con ella el bloque se iba a la izquierda) y además obligaba a
   mantener dos juegos de botones. Ahora:
     · una sola columna, centrada, con la medida de línea de lectura;
     · las redes, EN LÍNEA al pie del artículo, en los dos tamaños. */
.bp-rejilla{display:block}
.bp-contenido{min-width:0;max-width:68ch;margin-inline:auto}

/* 6 · compartir lateral, pegado mientras se lee */
/* la barra lateral queda fuera de pantalla: el JS la usa como ORIGEN para
   clonar los botones al pie, así sigue habiendo un solo juego de enlaces */
.bp-compartir{display:none}
.bp-compartir__lbl{font-family:"Oswald",sans-serif;text-transform:uppercase;
  letter-spacing:1.6px;font-size:10.5px;color:#7b8794;writing-mode:vertical-rl;
  margin-bottom:4px}
.bp-share{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid rgba(3,35,71,.16);background:#fff;color:var(--azul);
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s}
.bp-share:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
.bp-share:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}
.bp-share svg{width:19px;height:19px;pointer-events:none}
.bp-copiado{font-family:"Museo Sans Rounded",sans-serif;font-size:11px;
  color:var(--verde);text-align:center;line-height:1.3}
.bp-copiado[hidden]{display:none}

/* 4 · índice del artículo */
.bp-indice{background:var(--crema);border-radius:16px;padding:18px 22px;
  margin:0 0 clamp(22px,3vh,32px);border:1px solid rgba(3,35,71,.08)}
.bp-indice__lbl{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:2px;font-size:11.5px;color:var(--rojo);margin:0 0 10px}
.bp-indice ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.bp-indice a{font-family:"Museo Sans Rounded",sans-serif;font-size:14.5px;
  color:var(--azul);text-decoration:none;line-height:1.4}
.bp-indice a:hover{text-decoration:underline}
.bp-indice a.activo{font-weight:700;color:var(--rojo)}

/* el texto del post: lo escribe el admin, así que se estilan las etiquetas */
.bp-texto{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:#26333f;font-size:clamp(16px,1.15vw,17.5px);line-height:1.72}
/* 2026-07-28 · Carlos: el texto del contenido, JUSTIFICADO.
   Es la ley B del sistema: párrafos de 4+ líneas van justificados.
   ⚠️ Sólo los párrafos y las listas — los títulos NO se justifican nunca
   (una línea suelta justificada se estira hasta las esquinas).
   ⚠️ `hyphens:none` + `text-wrap:pretty`: sin partir palabras y evitando
   que quede una sola al final (ley de viudas). */
.bp-texto p,
.bp-texto li{text-align:justify;hyphens:none;text-wrap:pretty}
.bp-texto h2,.bp-texto h3,.bp-texto figcaption{text-align:left}
.bp-texto > * + *{margin-top:1.15em}
.bp-texto h2{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  color:var(--azul);font-size:clamp(21px,2.3vw,30px);line-height:1.18;
  letter-spacing:.3px;margin-top:1.8em;scroll-margin-top:110px}
.bp-texto h3{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  color:var(--rojo);font-size:clamp(17px,1.7vw,21px);margin-top:1.5em;letter-spacing:.3px}
.bp-texto a{color:var(--rojo);text-decoration:underline;text-underline-offset:3px}
.bp-texto strong,.bp-texto b{font-weight:700;color:var(--azul)}
.bp-texto ul,.bp-texto ol{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.bp-texto li::marker{color:var(--rojo)}
.bp-texto img{max-width:100%;height:auto;border-radius:16px;display:block}
.bp-texto figure{margin:1.6em 0}
.bp-texto figcaption{font-size:13px;color:#7b8794;margin-top:8px;text-align:center}
/* una cita destacada, por si el admin las usa */
.bp-texto blockquote{margin:1.6em 0;padding:4px 0 4px 22px;
  border-left:4px solid var(--amarillo);font-size:1.08em;color:var(--azul);font-weight:500}
.bp-texto hr{border:0;height:1px;background:rgba(3,35,71,.12);margin:2em 0}

/* 7 · etiquetas */
.bp-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:clamp(24px,4vh,38px) 0 0;padding:0}
.bp-tags li{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;
  font-size:11.5px;color:var(--azul);background:var(--crema);
  border:1px solid rgba(3,35,71,.1);border-radius:999px;padding:7px 13px}

/* las redes, en línea y centradas bajo el artículo */
.bp-compartir-pie{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:10px;
  margin-top:clamp(26px,4vh,40px);padding-top:24px;
  border-top:1px solid rgba(3,35,71,.1)}
.bp-compartir-pie .bp-compartir__lbl{writing-mode:horizontal-tb;margin:0 6px 0 0;
  font-size:11.5px;letter-spacing:2px}

.bp-volver{display:flex;justify-content:center;align-items:center;min-height:44px;margin-top:22px;
  font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:1px;font-size:13px;color:var(--rojo);text-decoration:none}
.bp-volver:hover{text-decoration:underline}

/* 8 · CTA — MORADO: encima el cuerpo (blanco), debajo relacionados (crema) */
.bp-cta{background:#0a0620;color:#fff;text-align:center;
  padding:clamp(46px,7vh,80px) 0;margin-top:clamp(30px,5vh,56px)}
.bp-cta h2{font-family:"Boris Black","Oswald",sans-serif;font-weight:400;margin:0;
  text-transform:uppercase;color:var(--amarillo);font-size:clamp(28px,5vw,58px);line-height:1}
.bp-cta p{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:rgba(255,255,255,.9);margin:12px auto 22px;max-width:46ch;line-height:1.55}

/* 9 · relacionados */
.bp-rel{background:var(--crema);padding:clamp(46px,7vh,84px) 0}
.bp-rel__titulo{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  color:var(--azul);font-size:clamp(22px,3vw,34px);margin:0 0 clamp(20px,3vh,30px);
  letter-spacing:.5px}

/* ═════════════════════════════════════════════════════════════════════
   TARJETA DE POST — la usan la sección y los relacionados
   ═════════════════════════════════════════════════════════════════════ */
.bl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(18px,2.4vw,28px)}
.bl-card{display:flex;flex-direction:column;background:#fff;border-radius:20px;
  overflow:hidden;border:1px solid rgba(3,35,71,.08);
  box-shadow:0 8px 26px rgba(3,35,71,.07);
  transition:transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s}
.bl-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(3,35,71,.14)}
/* aspect-ratio fijo: da igual el tamaño que suba el admin (ley E) */
.bl-card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--crema)}
.bl-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bl-card:hover .bl-card__media img{transform:scale(1.06)}
/* 2026-08-02 · REGLA de Carlos: TODO lo que va dentro de un card, al centro */
.bl-card__cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;text-align:center}
.bl-card__cat{align-self:center;font-family:"Oswald",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:1.4px;font-size:10.5px;
  background:var(--rojo);color:#fff;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.bl-card__titulo{margin:0;font-family:"Oswald",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;font-size:clamp(16px,1.5vw,19px);line-height:1.22}
.bl-card__titulo a{color:var(--azul);text-decoration:none}
.bl-card__titulo a:hover{color:var(--rojo)}
.bl-card__extracto{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:#5b6b7d;font-size:14.5px;line-height:1.5;margin:9px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* margin-top:auto → los pies quedan alineados aunque los títulos midan distinto */
.bl-card__pie{margin:auto 0 0;padding-top:14px;display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.2px;
  font-size:11.5px;color:#7b8794}
/* 2026-08-02 · Carlos: "ningún card tiene el Leer más" — enlace explícito
   al final de cada tarjeta (y del destacado), con la flecha que avanza. */
.bl-leermas{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  margin:12px auto 0;font-family:"Oswald",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:1.4px;font-size:13px;
  color:var(--rojo);text-decoration:none;position:relative}
/* mínimo táctil de 44px sin engordar el diseño (forense 2026-08-02: medía 20px) */
.bl-leermas::after{content:'';position:absolute;inset:-12px}
.bl-leermas svg{width:16px;height:16px;transition:transform .2s}
.bl-leermas:hover svg{transform:translateX(4px)}
.bl-leermas:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

/* ═════════════════════════════════════════════════════════════════════
   SECCIÓN /blog/
   ═════════════════════════════════════════════════════════════════════ */
.bl-cab{background:var(--azul);color:#fff;padding:clamp(96px,14vh,150px) 0 clamp(30px,5vh,54px);
  text-align:center;position:relative;overflow:hidden}
.bl-cab::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:url("../img/welcome-pattern.png") center 0/620px auto repeat;
  opacity:.05}
.bl-cab__in{position:relative;z-index:1}
.bl-cab__eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:4px;font-size:13px;color:var(--amarillo);margin:0 0 10px}
.bl-cab__titulo{font-family:"Boris Black","Oswald",sans-serif;font-weight:400;margin:0;
  text-transform:uppercase;font-size:clamp(42px,8vw,96px);line-height:1;letter-spacing:1px}
/* 2026-08-02 · Carlos: el corte del título es de DISEÑO y vale en TODOS los
   formatos: "From Tacos" / "to Tequila" ("De los tacos" / "al tequila").
   En escritorio el ancho lo partía a su aire y el "to" quedaba arriba. */
.bl-cab__titulo .bl-cab__l1,
.bl-cab__titulo .bl-cab__l2{display:block;white-space:nowrap}
.bl-cab__sub{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:rgba(255,255,255,.86);margin:14px auto 0;max-width:52ch;
  font-size:clamp(15px,1.5vw,18px);line-height:1.55}

/* filtros por categoría — se llenan solos con lo que traiga el admin */
.bl-filtros{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:clamp(20px,3vh,30px) auto 0;max-width:1000px}
.bl-filtro{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  border-radius:999px;text-decoration:none;white-space:nowrap;
  font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:1px;font-size:12.5px;color:#fff;
  background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.22);
  transition:background .18s,color .18s,border-color .18s}
.bl-filtro:hover{background:rgba(255,255,255,.2)}
.bl-filtro.activo{background:var(--amarillo);color:var(--azul);border-color:var(--amarillo)}
.bl-filtro:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}

/* post destacado: el más reciente, a lo ancho */
.bl-destacado{background:var(--crema);padding:clamp(30px,5vh,54px) 0 0}
.bl-dest{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(18px,3vw,42px);align-items:center;
  background:#fff;border-radius:24px;overflow:hidden;
  border:1px solid rgba(3,35,71,.08);box-shadow:0 14px 40px rgba(3,35,71,.10)}
.bl-dest__media{aspect-ratio:16/11;overflow:hidden;background:var(--crema)}
.bl-dest__media img{width:100%;height:100%;object-fit:cover}
/* centrado (regla del card) y padding simétrico: con el texto al centro, el
   hueco derecho asimétrico de antes descuadraba el eje óptico */
.bl-dest__cuerpo{padding:clamp(20px,3vw,40px) clamp(20px,3vw,44px);text-align:center}
.bl-dest__eyebrow{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:2px;font-size:11.5px;color:var(--rojo);margin:0 0 10px}
.bl-dest__titulo{margin:0;font-family:"Oswald",sans-serif;font-weight:700;
  text-transform:uppercase;color:var(--azul);letter-spacing:.3px;
  font-size:clamp(22px,2.8vw,36px);line-height:1.15}
.bl-dest__titulo a{color:inherit;text-decoration:none}
.bl-dest__titulo a:hover{color:var(--rojo)}
.bl-dest__extracto{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:#4a5b6d;font-size:15.5px;line-height:1.6;margin:12px 0 0}
.bl-dest__pie{margin:16px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.2px;
  font-size:11.5px;color:#7b8794}

.bl-lista{background:var(--crema);padding:clamp(28px,4.5vh,48px) 0 clamp(46px,7vh,86px)}

/* paginación */
.bl-pag{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:clamp(30px,5vh,52px) 0 0;flex-wrap:wrap}
.bl-pag a,.bl-pag span{min-width:44px;height:44px;padding:0 12px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-family:"Oswald",sans-serif;font-weight:600;font-size:14px;
  color:var(--azul);background:#fff;border:1.5px solid rgba(3,35,71,.12)}
.bl-pag a:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
.bl-pag .activa{background:var(--azul);border-color:var(--azul);color:#fff}
.bl-pag .puntos{border:0;background:none;color:#7b8794}
.bl-pag a:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}

.bl-vacio{text-align:center;font-family:"Museo Sans Rounded",sans-serif;
  color:var(--azul);padding:60px 0}

.bp-404{background:var(--crema);padding:120px 0;text-align:center}
.bp-404 h1{font-family:"Oswald",sans-serif;text-transform:uppercase;color:var(--azul)}

/* ═════════════════ 📱 MÓVIL — al FINAL, gana por cascada ═════════════════ */
@media (max-width:900px){
  /* 2026-08-02 · Carlos (captura): salían TRES líneas — el mínimo de 42px del
     clamp de escritorio no cabe en 390px y "From Tacos" partía por dentro.
     Talla propia de móvil (la manda "De los tacos", la línea más ancha);
     el display:block de las dos líneas ya es global (regla de arriba). */
  .bl-cab__titulo{font-size:clamp(26px,9vw,42px)}

  .bp-hero{min-height:clamp(300px,52vh,420px)}
  .bp-titulo{font-size:clamp(26px,7.4vw,36px);max-width:none}
  .bp-ficha{font-size:13.5px;gap:7px}

  .bp-contenido{max-width:none}

  .bp-texto{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.62)}
  .bp-indice{padding:16px 18px}

  .bl-dest{grid-template-columns:1fr}
  .bl-dest__cuerpo{padding:18px 20px 22px}
  .bl-grid{grid-template-columns:1fr 1fr}
  .bl-card__extracto{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)}
  .bl-filtros{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    overflow-y:hidden;scrollbar-width:none;padding-inline:var(--m-aire,24px);
    touch-action:auto;overscroll-behavior-x:contain}
  .bl-filtros::-webkit-scrollbar{display:none}
  .bp-cta .btn{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .bp-progreso span,.bl-card,.bl-card__media img{transition:none}
}

/* ═════ ENTRADA DE LAS TARJETAS (2026-07-28) ═════
   El estado inicial escondido SÓLO se aplica cuando el JS toma el mando
   (body.bl-anima). Sin JS o con reduced-motion, las tarjetas se ven. */
.bl-anima .bl-card,
.bl-anima .bl-dest,
.bl-anima .lblog-card{opacity:0;will-change:transform,opacity;backface-visibility:hidden}
/* ⚠️ sin transition: el movimiento lo escribe el JS en cada frame del
   scroll; una transición encima lo dejaría persiguiendo al dedo. El hover
   vive en la foto, que sí puede transicionar. */
.bl-anima .bl-card{transition:box-shadow .26s}

/* ── SIN FOTO ──────────────────────────────────────────────────────────
   2026-07-28 · Un post sin imagen destacada no puede dejar un hueco ni un
   <img> roto: se pinta el azul de marca con su trama. Ocupa exactamente lo
   mismo, así la rejilla no se descuadra.
   (1 de los 309 posts del sitio real ya viene así; desde el admin habrá más.) */
.bl-sin-foto{display:block;width:100%;height:100%;min-height:180px;
  background:var(--azul) url("../img/welcome-pattern.png") center/280px auto repeat;
  background-blend-mode:soft-light}
.bl-dest__media .bl-sin-foto{min-height:260px}

.bp-hero--sin-foto{background:var(--azul)}
.bp-hero--sin-foto::before{content:'';position:absolute;inset:0;
  background:url("../img/welcome-pattern.png") center 0/420px auto repeat;
  opacity:.07;pointer-events:none}
/* sin foto no hace falta oscurecer nada para que el título se lea */
.bp-hero--sin-foto .bp-hero__velo{background:none}

/* ── TABLET → MÓVIL ────────────────────────────────────────────────────
   2026-07-28 · Por debajo de 600px una sola columna: a dos, la tarjeta se
   queda sin ancho para el extracto y el título parte en cuatro líneas. */
@media (max-width:600px){
  .bl-grid{grid-template-columns:1fr}
}