/* WondarCore — código propio, no generado. Se puede modificar libremente.
   Página de detalle de una Nota (/nota/{slug}-{id}) — rediseño editorial 2026-08-31, con el mismo
   lenguaje visual que la página de Guía (Gonzalo/guia.html / guia-detalle-publico.css): hero
   full-bleed con título en serif, cuerpo a página completa con subtítulos y listas, fotos
   redondeadas y visor con la ubicación de cada foto.
   Autónomo (tokens --np-* propios, mismos valores que la guía) para no depender de
   guia-detalle-publico.css. Las notas viejas (sin subtítulos ni listas) se ven igual — el cuerpo se
   inyecta tal cual venga. */

:root {
  --np-ink: #1a1a2e;
  --np-muted: #6b7280;
  --np-faint: #9aa1ac;
  --np-line: #e6e7ea;
  --np-navy: #1e3650;
  --np-navy-soft: #eef2f6;
  --np-warm: #c2694a;
  --np-exp: #16a34a;
  --np-serif: 'Iowan Old Style', 'Palatino Linotype', 'Palatino', 'Georgia', serif;
}

/* Fondo blanco en toda la página de nota (como era antes), en vez del gris del resto del sitio. */
body:has(#nota-publico) { background: #fff; }

.np-doc {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 4rem;
  color: var(--np-ink);
}

/* ---------- Breadcrumb ---------- */
.np-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--np-muted);
  margin-bottom: 1.1rem;
}
.np-breadcrumb a { color: var(--np-muted); text-decoration: none; }
.np-breadcrumb a:hover { color: var(--np-navy); }
.np-breadcrumb .bc-sep { color: var(--np-faint); }
.np-breadcrumb .bc-current { color: var(--np-ink); font-weight: 600; }

/* ============ HERO ============ */
.np-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.np-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.np-hero-bg[data-photo-index] { cursor: zoom-in; }
.np-hero--sin-foto { background: linear-gradient(135deg, var(--np-navy), #2d1b4e); min-height: 320px; }
.np-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(11,17,28,0.9) 0%, rgba(11,17,28,0.42) 46%, rgba(11,17,28,0.05) 80%);
}
.np-hero-inner {
  width: 100%;
  padding: 2.4rem clamp(1.4rem, 4vw, 3.2rem);
  color: #fff;
}
.np-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  margin-bottom: 1rem;
}
.np-hero-title {
  font-family: var(--np-serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
.np-hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.np-author {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
}
.np-author-pic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.5);
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.18);
  font-weight: 800;
  font-size: 0.95rem;
}
.np-author-meta { display: flex; flex-direction: column; line-height: 1.35; }
.np-author-name { font-weight: 700; font-size: 0.92rem; }
.np-author-date { font-size: 0.78rem; color: rgba(255,255,255,0.72); }

/* ============ CUERPO ============ */
.np-main {
  margin-top: 2.6rem;
}

/* Destinos / lugares vinculados — todos cliqueables a su ficha real */
.np-lugares {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--np-line);
}
.np-lugares:empty { display: none; }
.np-lugares-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--np-muted);
  margin-right: 4px;
}
.np-lugar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--np-line);
  transition: border-color 0.15s;
}
.np-lugar-chip:hover { border-color: currentColor; }
.np-lugar-chip--destino { color: var(--np-navy); background: var(--np-navy-soft); }
.np-lugar-chip--atraccion { color: var(--np-exp); background: rgba(22,163,74,0.08); }
.np-lugar-chip--pais { color: var(--np-navy); background: var(--np-navy-soft); }

/* Tags de palabras clave (si la nota tiene) */
.np-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.6rem; }
.np-tags:empty { display: none; }

/* Artículo — ancho completo del documento (mismo ancho que el banner). La nota no tiene columna
   lateral (a diferencia de la guía, que sí lleva el itinerario al costado), así que el cuerpo ocupa
   todo el ancho en vez de dejar media pantalla vacía a la derecha (pedido de Gonzalo, 2026-08-31). */
.np-article {
  max-width: none;
}
.np-article > p {
  font-size: 1.06rem;
  line-height: 1.72;
  color: #33384a;
  margin: 0 0 1.15rem;
}
.np-article > p:first-child {
  font-family: var(--np-serif);
  font-size: clamp(1.12rem, 1.6vw, 1.32rem);
  line-height: 1.62;
}
.np-article strong, .np-article b { color: var(--np-ink); font-weight: 700; }
.np-article h2 {
  font-family: var(--np-serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 2.2rem 0 0.9rem;
  text-wrap: balance;
}
.np-article h3 {
  font-family: var(--np-serif);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 1.6rem 0 0.6rem;
}
.np-article ul, .np-article ol {
  margin: 0 0 1.15rem 1.15rem;
  padding: 0;
  color: #33384a;
}
.np-article li { font-size: 1.04rem; line-height: 1.7; margin-bottom: 0.25rem; }
.np-article li::marker { color: var(--np-warm); }

/* Cita destacada (si en el futuro se suma al editor) */
.np-article blockquote {
  font-family: var(--np-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.42;
  color: var(--np-navy);
  margin: 2.2rem 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--np-warm);
  text-wrap: balance;
}

/* ---------- Fotos: "Más fotos" ---------- */
.np-galeria { margin-top: 2rem; }
.np-galeria:empty { display: none; }
.np-galeria-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--np-warm);
  margin: 0 0 0.7rem;
}
.np-galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.np-galeria-item {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  cursor: zoom-in;
  box-shadow: 0 6px 18px rgba(20,25,40,0.08);
}

/* ---------- Links ---------- */
.np-links { margin-top: 1.6rem; }
.np-links:empty { display: none; }
.np-links-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--np-muted); margin: 0 0 0.5rem;
}
.np-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.np-links a { color: var(--np-navy); font-size: 0.9rem; word-break: break-all; }

/* ---------- Barra de interacción + comentarios ---------- */
.np-foot { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--np-line); }
.np-foot .pub-card-footer { margin: 0; }
.np-foot .pub-comments { max-width: 760px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 620px) {
  .np-doc { padding: 1rem 1rem 3rem; }
  .np-hero { border-radius: 16px; min-height: 380px; }
  .np-hero-inner { padding: 1.8rem 1.3rem; }
  .np-galeria-grid { grid-template-columns: repeat(2, 1fr); }
  .np-article blockquote { font-size: 1.2rem; }
}