/* ══════════════════════════════════════════════════════════════════════════
   KORA · LAS PÁGINAS DE COLECCIÓN, COMO «PHOTO BOOKS» DE AU — 16 oct 2026

   Vivi, con las capturas de Artifact Uprising al lado: «vamos a usar la
   referencia de su página "photo books" para nuestras colecciones.. sólo sí
   dejar nuestras portadas más grandes que lo que traen ellos».

   Lo que se trae de AU:
     · la ruta arriba (CATÁLOGO / HOMENAJE), chiquita y en mayúsculas;
     · el nombre de la colección a la izquierda, grande, sin franja ni
       rótulo encima; la frase y la presentación debajo, en dos renglones;
     · el encabezado de sección con su enlace a la derecha («Ver todos»);
     · cada libro en un recuadro gris claro, y debajo, alineado a la
       izquierda: la voz, el nombre, dos o tres renglones, el precio y el
       enlace subrayado en mayúsculas.
   Lo que no: sus cinco por renglón. Aquí son tres, para que la portada se
   lea (la pidió más grande).

   Vale para todas las páginas `nhv-scope`: Historias de familia (#s8), las de
   kora-colecciones.js (#s16) y Navidad (#s17), que además lleva su foto a la
   izquierda. Se carga DESPUÉS de kora-versiones, kora-colecciones y
   kora-navidad, que es lo que corrige.
   ══════════════════════════════════════════════════════════════════════════ */
.nhv-scope .nhv-wrap{ max-width:1180px; padding:22px 24px 84px }

/* ── la ruta ── */
.nhv-scope .au-migas{
  display:flex; gap:10px; align-items:baseline; margin:0 0 22px;
  font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#262523;
}
.nhv-scope .au-migas a{ cursor:pointer; color:#262523; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px }
.nhv-scope .au-migas span{ color:#9E9891 }
.nhv-scope .au-migas b{ font-weight:500 }

/* ── el encabezado: a la izquierda, sin franja ── */
.nhv-scope .nhv-head{ text-align:left; max-width:none; margin:0 0 8px; padding:0; background:none }
.nhv-scope .nhv-head .nhv-eyebrow{ display:none }
.nhv-scope .nhv-h1{
  font-family:var(--font-display); font-weight:500; color:#262523;
  font-size:clamp(34px,4.2vw,48px); line-height:1.05; margin:0 0 8px;
}
.nhv-scope .nhv-head .kc-claim,
.nhv-scope .nhv-head .nv-claim{ text-align:left; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(18px,1.9vw,22px); color:#6B6660; margin:0 0 6px }
.nhv-scope .nhv-head .nhv-lede{ text-align:left; max-width:820px; margin:0; font-size:17.5px; color:#7A746C }

/* ── el encabezado de sección ── */
.nhv-scope .au-sec{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:40px 0 18px }
.nhv-scope .au-sec h2{ margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(25px,2.6vw,31px); color:#262523 }
.nhv-scope .au-sec a{
  cursor:pointer; white-space:nowrap; color:#262523;
  font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;
}

/* ── la reja: tres por renglón, siempre del mismo tamaño ── */
.nhv-scope .nhv-row,
.nhv-scope .nhv-row.kc-row-1,
.nhv-scope .nhv-row.kc-row-2{
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 24px; max-width:none; margin:0; justify-content:start;
}
.nhv-scope .nhv-card{ align-items:stretch; text-align:left }

/* El recuadro gris, y la portada adentro, más grande que en AU */
.nhv-scope .nhv-covwrap{ width:100%; margin:0; padding-top:118%; background:#EFEDE9; transition:background .2s }
.nhv-scope .nhv-covwrap:hover{ transform:none; background:#E9E6E1 }
.nhv-scope .nhv-covwrap .nhv-cov{
  inset:auto; left:13%; right:13%; top:50%; transform:translateY(-50%);
  aspect-ratio:680/822; height:auto; transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 0 0 1px rgba(44,37,32,.06), 0 14px 26px -18px rgba(44,37,32,.55);
}
.nhv-scope .nhv-covwrap:not(.soon):hover .nhv-cov{ transform:translateY(calc(-50% - 4px)) }

/* Lo de abajo, alineado a la izquierda */
.nhv-scope .au-meta{ display:flex; flex-direction:column; align-items:flex-start; padding-top:16px }
.nhv-scope .au-meta .nhv-badge{ margin:0 0 5px; font-size:10.5px }
.nhv-scope .au-nom{ margin:0 0 5px; font-family:'Jost',sans-serif; font-weight:500; font-size:16px; color:#262523; letter-spacing:.01em }
.nhv-scope .au-meta .nhv-desc{ max-width:none; margin:0 0 8px; font-size:16.5px; line-height:1.4; color:#6B6660 }
.nhv-scope .au-precio{ margin:0 0 12px; font-family:'Jost',sans-serif; font-size:13.5px; color:#262523 }
.nhv-scope .au-meta .nhv-cta,
.nhv-scope .au-meta .nhv-cta.kids,
.nhv-scope .au-meta .nhv-cta.notify{
  background:none; border:0; border-bottom:1px solid currentColor; border-radius:0; padding:0 0 3px;
  color:#262523; font-family:'Jost',sans-serif; font-weight:500; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
}
.nhv-scope .au-meta .nhv-cta:hover{ background:none; color:#4C6657 }

/* ── lo que viene: la misma reja, más chica ── */
.kc-scope .kc-viene{ text-align:left; margin-top:64px; padding-top:0; border-top:0 }
.kc-scope .kc-vienelede{ text-align:left; margin:-8px 0 22px }
.kc-scope .kc-minis{ max-width:none; margin:0; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); text-align:left }
.kc-scope .kc-mini{ align-items:flex-start }
.kc-scope .kc-minicov{ background:#EFEDE9 }

@media (max-width:900px){
  .nhv-scope .nhv-row, .nhv-scope .nhv-row.kc-row-1, .nhv-scope .nhv-row.kc-row-2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none }
}
@media (max-width:600px){
  .nhv-scope .nhv-wrap{ padding:16px 16px 64px }
  .nhv-scope .nhv-row, .nhv-scope .nhv-row.kc-row-1, .nhv-scope .nhv-row.kc-row-2{ grid-template-columns:1fr; gap:36px }
  .nhv-scope .au-sec{ margin-top:28px }
}

/* ══ NAVIDAD: la foto a la izquierda, el libro sobre olivo a la derecha ══════
   Vivi: «una foto grande del lado izquierdo de una familia en Navidad y la
   info y portada del lado derecho»; y después: «debe ir hasta la orilla, y del
   lado derecho un fondo verde olivo oscuro detrás del libro y de la info…
   alineado a la foto de la izquierda; compactar la info, pues ya le picas al
   libro y te abre su página». La banda va de orilla a orilla; las dos mitades
   miden lo mismo de alto. La foto es provisional (no hay una en alta). */
.nv-scope .nv-hero{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:stretch;
  margin:0 calc(50% - 50vw); min-height:clamp(400px, 56vh, 540px);   /* 16 oct · más corta: abajo se asoma la fila de regalos */
}
.nv-scope .nv-hero-foto{ margin:0; min-height:100%; position:relative }
.nv-scope .nv-hero-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30% }
.nv-scope .nv-hero-info{
  background:#3E4634; color:#F3EEE3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:clamp(24px,3vw,36px) clamp(20px,4vw,56px);
}
.nv-scope .nv-hero-info .nhv-head{ text-align:center; margin:0 0 14px }
.nv-scope .nv-hero-info .nhv-head .nhv-eyebrow{ display:block; text-align:center; margin:0 0 6px; color:#D9C9A3 }
.nv-scope .nv-hero-info .nhv-h1{ color:#FBF7EF; font-size:clamp(38px,4.2vw,52px); margin:0 0 4px }
.nv-scope .nv-hero-info .nhv-head .nv-claim{ text-align:center; color:#E3D6B8; margin:0 }
.nv-scope .nv-hero-info .nv-fecha{ margin:0 0 18px; max-width:none; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#F3EEE3 }
.nv-scope .nv-hero-libros{ width:100%; max-width:205px }
.nv-scope .nv-hero-libros .nhv-card{ display:flex; align-items:center; text-align:center }
.nv-scope .nv-hero-libros .nhv-covwrap{ background:none; padding-top:121%; }
.nv-scope .nv-hero-libros .nhv-covwrap .nhv-cov{ left:0; right:0; box-shadow:0 20px 34px -18px rgba(0,0,0,.6) }
.nv-scope .nv-hero-libros .au-meta{ align-items:center; padding-top:12px }
.nv-scope .nv-hero-libros .au-meta .nhv-badge{ color:#C9D3BF }
.nv-scope .nv-hero-libros .au-nom{ color:#FBF7EF }
.nv-scope .nv-hero-libros .au-precio{ color:#E3D6B8 }
.nv-scope .nv-hero-libros .au-meta .nhv-cta{ color:#FBF7EF }
.nv-scope .nv-hero-libros .au-meta .nhv-cta:hover{ color:#E3D6B8 }
.nv-scope .nv-sec{ text-align:left }
/* La fila de regalos: cuatro, uno de cada colección (ver REGALOS en kora-navidad.js) */
.nv-scope .nv-regalos .au-sec{ margin-top:34px }
.nv-scope .nv-regalos-row{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:28px 20px }
.nv-scope .nv-regalos-row .nhv-covwrap .nhv-cov{ left:12%; right:12% }
/* Portadas más chicas que en las colecciones: la letra se mide contra el
   ancho de la portada (cqw), no de la pantalla, para que no se desborde. */
.nv-scope .nv-regalos-row .nhv-cov{ container-type:inline-size }
.nv-scope .nv-regalos-row .nhv-cov.kids .ct{ font-size:10.5cqw; margin-top:2cqw }
.nv-scope .nv-regalos-row .nhv-cov.kids .cs{ font-size:4cqw; white-space:normal; line-height:1.25 }
.nv-scope .nv-regalos-row .nhv-cov.kids .ck{ font-size:3.4cqw }
.nv-scope .nv-regalos-row .nhv-cov.kids .cart{ margin:3cqw 0 }
.nv-scope .nv-regalos-row .nhv-cov.keep .ck{ font-size:3.6cqw; margin-bottom:2cqw }
.nv-scope .nv-regalos-row .nhv-cov.keep .ct{ font-size:9cqw }
.nv-scope .nv-regalos-row .nhv-cov.keep .cs{ font-size:3.8cqw; white-space:normal; line-height:1.25 }
@media (max-width:900px){ .nv-scope .nv-regalos-row{ grid-template-columns:repeat(2,minmax(0,1fr)) !important } }
@media (max-width:820px){
  .nv-scope .nv-hero{ grid-template-columns:1fr; min-height:0 }
  .nv-scope .nv-hero-foto{ min-height:0; height:62vw; max-height:440px }
  .nv-scope .nv-hero-libros{ max-width:260px }
}
.nv-scope .nv-hero-libros .au-nom{ white-space:nowrap }
/* 16 oct · Vivi: «en la parte del fondo verde ya no necesita decir KORA ·
   NAVIDAD, ni KIDS, ni el título de "Nuestras aventuras de Navidad".. todo eso
   se lee en la portada puesta más grande». Quedan: Navidad, la frase, la
   portada, el precio y el botón. */
.nv-scope .nv-hero-info .nhv-head .nhv-eyebrow,
.nv-scope .nv-hero-libros .au-meta .nhv-badge,
.nv-scope .nv-hero-libros .au-nom{ display:none }
.nv-scope .nv-hero-libros{ max-width:255px }
.nv-scope .nv-hero-libros .au-meta{ padding-top:16px }
@media (max-width:820px){ .nv-scope .nv-hero-libros{ max-width:240px } }

/* 16 oct · Navidad: «Para cada quien de los tuyos», debajo de los regalos.
   Las mismas tarjetas de persona que tenía el landing (.kq-tile), en una
   reja de seis que en el celular se vuelve de dos. */
.nv-scope .nv-quien{ margin-top:12px }
.nv-scope .nv-quien-row{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px }
.nv-scope .nv-quien-t{ width:auto; min-width:0; flex:none }
@media (max-width:900px){ .nv-scope .nv-quien-row{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:520px){ .nv-scope .nv-quien-row{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ── 16 oct · Personas que Amamos: «¿Para quién es?» ─────────────────────
   Las mismas tarjetas de persona de Navidad, del mismo tamaño (seis por
   renglón), y la elegida se marca. Filtra la reja de abajo ahí mismo. */
.kc-scope .kc-quien{ margin:8px 0 40px }
.kc-scope .kc-quien-row{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px }
.kc-scope .kc-quien-t{ width:auto; min-width:0; flex:none }
.kc-scope .kc-quien-t.on .kq-pill{ background:#262523; color:#FAF8F4 }
.kc-scope .kc-quien-todos[hidden]{ display:none }
.kc-scope .nhv-card[hidden]{ display:none }
@media (max-width:900px){ .kc-scope .kc-quien-row{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (max-width:520px){ .kc-scope .kc-quien-row{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ── 16 oct · La portada, proporcionada ──────────────────────────────────
   Vivi: «están saliendo los títulos muy grandes y las ilustraciones muy
   pequeñas». El título medía en px de pantalla y la portada no: en una
   tarjeta de 250 px el título se comía la mitad. Ahora todo mide en `cqw`
   —por ciento del ancho de la portada— y la acuarela toma el resto. */
.kc-scope .nhv-row .nhv-cov{ container-type:inline-size }
.kc-scope .nhv-row .nhv-cov.kids .ct{ font-size:10cqw; margin-top:1cqw }
.kc-scope .nhv-row .nhv-cov.kids .cs{ font-size:4.6cqw; white-space:normal; line-height:1.25 }
.kc-scope .nhv-row .nhv-cov.kids .ck{ font-size:3.6cqw }
.kc-scope .nhv-row .nhv-cov.kids .cart{ margin:2.5cqw 0 1.5cqw }
.kc-scope .nhv-row .nhv-cov.kids .cart img{ max-width:100%; max-height:100% }
.kc-scope .nhv-row .nhv-cov.keep .ck{ font-size:3.4cqw }
.kc-scope .nhv-row .nhv-cov.keep .ct{ font-size:8.5cqw }
.kc-scope .nhv-row .nhv-cov.keep .cs{ font-size:3.6cqw; white-space:normal; line-height:1.25 }

/* ── 16 oct · Para nuestros chiquitos: como Navidad ──────────────────────
   Una banda por libro, de orilla a orilla: la foto de un lado, del otro un
   fondo liso con la portada y lo justo (nombre, renglón, precio, botón). La
   segunda va al revés, para que la página no se lea como lista. */
.kc-scope .kc-banda{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:stretch;
  margin:28px calc(50% - 50vw) 0; min-height:clamp(400px, 52vh, 520px);
}
.kc-scope .kc-banda--der .kc-banda-foto{ order:2 }
.kc-scope .kc-banda-foto{ position:relative; min-height:100% }
.kc-scope .kc-banda-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35% }
.kc-scope .kc-banda-info{ display:flex; align-items:center; justify-content:center; padding:clamp(24px,3vw,40px) clamp(20px,4vw,56px) }
.kc-scope .kc-banda-libro{ width:100%; max-width:250px }
.kc-scope .kc-banda-libro .nhv-card{ display:flex; flex-direction:column; align-items:center; text-align:center }
.kc-scope .kc-banda-libro .nhv-covwrap{ background:none; padding-top:121% }
.kc-scope .kc-banda-libro .nhv-covwrap:hover{ background:none }
.kc-scope .kc-banda-libro .nhv-covwrap .nhv-cov{ left:0; right:0; box-shadow:0 20px 34px -20px rgba(44,37,32,.55) }
.kc-scope .kc-banda-libro .au-meta{ align-items:center; padding-top:16px }
.kc-scope .kc-banda-libro .au-meta .nhv-desc{ font-size:15.5px }
.kc-scope .kc-banda-libro .nhv-cov{ container-type:inline-size }
.kc-scope .kc-banda-libro .nhv-cov.kids .ct{ font-size:10cqw; margin-top:1cqw }
.kc-scope .kc-banda-libro .nhv-cov.kids .cs{ font-size:4.6cqw; white-space:normal; line-height:1.25 }
.kc-scope .kc-banda-libro .nhv-cov.kids .ck{ font-size:3.6cqw }
.kc-scope .kc-banda-libro .nhv-cov.kids .cart{ margin:2.5cqw 0 1.5cqw }
.kc-scope .kc-banda-libro .nhv-cov.kids .cart img{ max-width:100%; max-height:100% }
@media (max-width:820px){
  .kc-scope .kc-banda{ grid-template-columns:1fr; min-height:0 }
  .kc-scope .kc-banda--der .kc-banda-foto{ order:0 }
  .kc-scope .kc-banda-foto{ min-height:0; height:62vw; max-height:440px }
}

/* ── 16 oct · Historias de familia: las tres portadas, proporcionadas ────
   El subtítulo del cuento se salía de la portada y los títulos de los dos
   Keepsake se comían la imagen. Como en las colecciones: todo en `cqw`. */
#s8 .nhv-row .nhv-cov{ container-type:inline-size }
#s8 .nhv-row .nhv-cov.kids .ct{ font-size:10cqw; margin-top:1cqw }
#s8 .nhv-row .nhv-cov.kids .cs{ font-size:4.4cqw; white-space:normal; line-height:1.25 }
#s8 .nhv-row .nhv-cov.kids .ck{ font-size:3.6cqw }
#s8 .nhv-row .nhv-cov.kids .cart{ margin:2.5cqw 0 1.5cqw }
#s8 .nhv-row .nhv-cov.kids .cart img{ max-width:100%; max-height:100% }
#s8 .nhv-row .nhv-cov.keep .ck{ font-size:3.6cqw; margin-bottom:3cqw }
#s8 .nhv-row .nhv-cov.keep .cart img{ max-width:84% }
#s8 .nhv-row .nhv-cov.keep .ct{ font-size:8cqw; margin-top:3cqw }
#s8 .nhv-row .nhv-cov.keep .cs{ font-size:4cqw; white-space:normal; line-height:1.25 }
#s8 .nhv-row .nhv-cov.leg .ct{ font-size:9.5cqw }
#s8 .nhv-row .nhv-cov.leg .cs{ font-size:4.4cqw; white-space:normal; line-height:1.25 }
#s8 .nhv-row .nhv-cov.leg .cframe{ width:72%; margin-top:7cqw }
#s8 .nhv-row .nhv-cov.leg .ck{ font-size:3.6cqw }

/* ── 16 oct · «Para tus más queridos»: fotos de esquina recta ──────────── */
/* 17 oct · y sin el delineado gris: la foto sola. La elegida en «¿Para quién
   es?» se marca con un contorno oscuro por dentro, que no mueve nada. */
.nv-scope .nv-quien .kq-art,
.kc-scope .kc-quien .kq-art{ border-radius:0; border:0 }
.nv-scope .nv-quien .kq-tile:hover .kq-art,
.kc-scope .kc-quien .kq-tile:hover .kq-art{ border:0 }
.kc-scope .kc-quien-t.on .kq-art{ border:0; outline:2px solid #262523; outline-offset:-2px }

/* ── 17 oct · LAS PORTADAS DEL CATÁLOGO, EN EL ORDEN DEL EDITOR ──────────
   Vivi: «en los kids el título debería quedar abajo de la ilustración, y en
   la representación keepsake con el recuadro el título va arriba.. así lo
   tenemos en realidad en el editor». Como en kidsCoverHTML (sello, acuarela,
   título, subtítulo) y coverInner (título, subtítulo, recuadro, «Kora»).
   Con `order`, igual que ya hacía la portada de Navidad: el HTML de cada
   página no cambia y las tres (colecciones, Historias de familia, Navidad)
   quedan iguales de un golpe. */
.nhv-scope .nhv-cov.kids:not(.nv-navidad) .ck{ order:0; margin:0 0 2cqw }
.nhv-scope .nhv-cov.kids:not(.nv-navidad) .cart{ order:1 }
.nhv-scope .nhv-cov.kids:not(.nv-navidad) .ct{ order:2; margin-top:2cqw }
.nhv-scope .nhv-cov.kids:not(.nv-navidad) .cs{ order:3; margin-top:1.2cqw }
.nhv-scope .nhv-cov.kids:not(.nv-navidad){ container-type:inline-size }

.nhv-scope .nhv-cov.keep{ container-type:inline-size }
.nhv-scope .nhv-cov.keep .ct{ order:0; margin:4cqw 0 0 }
.nhv-scope .nhv-cov.keep .cs{ order:1; margin-top:1.5cqw }
.nhv-scope .nhv-cov.keep .cart{ order:2; margin-top:5cqw }
.nhv-scope .nhv-cov.keep .ck{ order:3; margin:4cqw 0 0 }