/* static/css/public.css — cromo público compartido (B1 · auditoría 2026-09).
   TODO lo que el layout público (templates/public_layout.html) aporta a las
   páginas del sitio (landing, blog, recursos, /contacto, /legal): base de body,
   hoja de menú móvil, lightbox de la galería y marca de "sección activa".

   Reglas de la ficha B1 que este archivo respeta:
   - CERO librerías externas (la CSP es default-src 'self': un recurso de CDN
     se bloquearía EN SILENCIO y la página se vería rota sin error visible).
   - CERO JavaScript aquí; el comportamiento vive en static/public.js.
   - No redefine clases de css/landing-shared.css ni del <style> del landing:
   conviven; lo de aquí son clases NUEVAS con prefijos propios (pm-, lb-). */

/* ── Base de body para toda la web pública ──────────────────────────────────
   Antes cada página traía su copia (fuentes, fondo lino, color tinta). El
   layout las unifica; las páginas siguen pudiendo sobreescribir en su propio
   <style> (se cargan después). */
body.pp {
  margin: 0;
  background: var(--lino);
  color: var(--tinta);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Sección activa en el nav (#7) ───────────────────────────────────────────
   Dos vías: la del servidor (aria-current="page" para páginas completas:
   /blog, /recursos, /contacto, /legal) y la del scroll de la portada
   (.nav-active, la pone public.js). Specificidad mayor que `a.nav` de
   landing-shared.css / del <style> del landing, así que gana siempre. */
a.nav[aria-current="page"],
a.nav.nav-active { color: var(--pino); }
a.nav[aria-current="page"] { text-decoration-color: var(--salvia); }

/* ── Botón hamburguesa (#3): visible SOLO debajo de lg (celular y tablet) ──── */
.pp-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  color: var(--pino); background: transparent; cursor: pointer;
  border: 1.5px solid #14564D2e;
  transition: background var(--dur, 200ms) var(--ease-out, ease-out);
}
.pp-burger:hover { background: var(--mist); }
@media (min-width: 1024px) { .pp-burger { display: none; } }
.pp-burger svg { display: block; }

/* ── Hoja de menú móvil (#3): patrón de la hoja "Más" del interior ───────────
   (templates/base.html): backdrop + hoja + hidden + clase .open para la
   transición. La abren/cierran desde public.js con manejo de Esc y foco.

   ⚠️ El [hidden] de estas piezas hay que re-declararlo: el atributo vale
   display:none en la hoja de estilos del navegador, pero una regla propia con
   display (flex/…) lo pisa y la capa queda "invisible pero presente",
   tragándose todos los clics de la página (lo destapó el smoke de B1). */
.pm-backdrop[hidden], .pm-sheet[hidden], .lb-backdrop[hidden] { display: none; }
.pm-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(27, 43, 41, .38);
  opacity: 0; transition: opacity .2s ease-out;
}
.pm-backdrop.open { opacity: 1; }
.pm-sheet {
  position: fixed; top: 0; left: 0; right: 0; z-index: 41;
  background: #FBFAF7; border-bottom: 1px solid #1456461f;
  box-shadow: 0 24px 48px -24px rgba(15, 67, 57, .45);
  transform: translateY(-8px); opacity: 0;
  transition: transform .2s ease-out, opacity .2s ease-out;
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.pm-sheet.open { transform: none; opacity: 1; }
.pm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid #14564614;
}
.pm-head .t { font-family: 'Bricolage Grotesk', sans-serif; font-weight: 800; font-size: 15px; }
.pm-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer;
  background: transparent; color: var(--pino);
}
.pm-close:hover { background: var(--mist); }
.pm-nav { display: flex; flex-direction: column; padding: 10px 12px 14px; }
.pm-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 11px; text-decoration: none;
  color: var(--tinta); font-weight: 600; font-size: 15.5px;
}
.pm-link:hover { background: var(--mist); color: var(--pino); }
.pm-link[aria-current="page"], .pm-link.nav-active {
  background: var(--mist); color: var(--pino);
}
.pm-link[aria-current="page"]::before, .pm-link.nav-active::before {
  content: ""; width: 3px; height: 20px; border-radius: 3px;
  background: var(--durazno); margin-left: -12px; margin-right: -1px;
}
.pm-ctas { display: flex; gap: 10px; padding: 6px 20px 18px; }
.pm-ctas .btn { flex: 1 1 0; justify-content: center; padding: 11px 12px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .pm-backdrop, .pm-sheet { transition: none; }
}

/* ── Lightbox de la galería (#2) ─────────────────────────────────────────────
   Lo abre public.js al hacer clic en un enlace .js-lightbox (galería "Así se
   ve" del landing). Cierra con Esc, clic fuera o el botón. Escrito a mano:
   ningún paquete de lightbox (CSP default-src 'self'). */
.lb-backdrop {
  position: fixed; inset: 0; z-index: 50; cursor: zoom-out;
  background: rgba(15, 40, 34, .82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity .18s ease-out;
}
.lb-backdrop.open { opacity: 1; }
.lb-figure {
  margin: 0; max-width: min(1100px, 94vw); cursor: default;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lb-figure img {
  display: block; max-width: 100%; max-height: 80vh;
  border-radius: 14px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
  background: #fff;
}
.lb-cap { color: #eef3f0; font-size: 13.5px; text-align: center; max-width: 70ch; }
.lb-cap .t { font-weight: 700; color: #fff; }
.lb-close {
  position: fixed; top: 16px; right: 16px; z-index: 51; cursor: pointer;
  width: 42px; height: 42px; border-radius: 12px; border: none;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.lb-close:hover { background: rgba(255, 255, 255, .22); }
@media (prefers-reduced-motion: reduce) {
  .lb-backdrop { transition: none; }
}