/* ══════════════════════════════════════════════════════════════════════════
   KORA · LO QUE VA DEBAJO DE LA FICHA — 18 oct 2026
   Ver js/kora-ficha-abajo.js. Proporciones de la ficha de AU: títulos de
   sección centrados en serif ~26 px; cinco tarjetas con la portada sobre el
   gris de la casa, nombre y «Desde» debajo; cuatro promesas con ícono de
   línea, rótulo en versalitas espaciadas, una rayita y dos renglones.
   ══════════════════════════════════════════════════════════════════════════ */
.kfa{ margin:72px 0 40px; text-align:center }
.kfa-sec + .kfa-sec{ margin-top:72px }
.kfa-h{ margin:0 0 28px; font-family:var(--font-display); font-weight:400; font-size:26px; color:var(--k2-ink,#1F1D1B) }

/* Te puede gustar */
.kfa-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; text-align:left }
.kfa-card{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:0; border:0; background:none; cursor:pointer; text-align:left; font:inherit; color:inherit }
.kfa-art{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1/1; background:#EFEDE9; margin-bottom:10px; transition:background .2s }
.kfa-art > img{ width:62%; height:auto; display:block; box-shadow:0 12px 22px -16px rgba(44,37,32,.55); transition:transform .25s }
.kfa-card:hover .kfa-art{ background:#E9E6E1 }
.kfa-card:hover .kfa-art > img{ transform:translateY(-3px) }
.kfa-nom{ font-family:'Jost',sans-serif; font-weight:400; font-size:15px; color:var(--k2-ink,#1F1D1B); line-height:1.3 }
.kfa-pr{ font-family:'Jost',sans-serif; font-weight:400; font-size:14px; color:var(--k2-ink-soft,#46423D) }

/* Porque su historia importa */
.kfa-prow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px; max-width:1040px; margin:0 auto }
.kfa-p svg{ width:52px; height:52px; fill:none; stroke:var(--k2-ink,#1F1D1B); stroke-width:.9; stroke-linecap:round; stroke-linejoin:round; margin-bottom:22px }
.kfa-pt{ margin:0; font-family:'Jost',sans-serif; font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--k2-ink,#1F1D1B); line-height:1.5 }
.kfa-pr-l{ display:block; width:12px; height:1px; background:var(--k2-ink,#1F1D1B); margin:12px auto }
.kfa-pd{ margin:0 auto; max-width:24ch; font-family:var(--font-display); font-size:15.5px; line-height:1.45; color:var(--k2-ink-soft,#46423D) }

@media (max-width:900px){
  .kfa-row{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:42%; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px; scrollbar-width:none }
  .kfa-row::-webkit-scrollbar{ display:none }
  .kfa-card{ scroll-snap-align:start }
  .kfa-prow{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 18px }
}
@media (max-width:640px){
  .kfa{ margin-top:48px }
  .kfa-sec + .kfa-sec{ margin-top:52px }
  .kfa-h{ font-size:22px; margin-bottom:20px }
  .kfa-p svg{ width:42px; height:42px; margin-bottom:14px }
  .kfa-pt{ font-size:11px; letter-spacing:.16em }
  .kfa-pd{ font-size:14.5px }
}

/* ── La banda de abajo ──────────────────────────────────────────────────
   Blanca, con su filo de arriba, a todo lo ancho; entra deslizándose cuando
   el botón de la ficha ya se fue. */
.kfa-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.97); border-top:1px solid #E9E6E1;
  box-shadow:0 -10px 28px -22px rgba(44,37,32,.5);
  transform:translateY(105%); transition:transform .28s ease; pointer-events:none;
}
.kfa-barra.on{ transform:none; pointer-events:auto }
.kfa-barra-in{ display:flex; align-items:center; gap:18px; max-width:1180px; margin:0 auto; padding:12px 24px }
.kfa-barra-img{ flex:0 0 auto; width:56px; height:56px; overflow:hidden; background:#EFEDE9 }
.kfa-barra-img img{ width:100%; height:100%; object-fit:cover; display:block }
.kfa-barra-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; text-align:left }
.kfa-barra-n{ font-family:var(--font-display); font-weight:400; font-size:21px; color:var(--k2-ink,#1F1D1B); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.kfa-barra-p{ font-family:'Jost',sans-serif; font-weight:600; font-size:14px; color:var(--k2-ink,#1F1D1B) }
.kfa-barra-btn{
  flex:0 0 auto; min-width:280px; border:0; border-radius:4px; cursor:pointer;
  background:#1F1D1B; color:#FBFAF7; font-family:'Jost',sans-serif; font-weight:600;
  font-size:14px; letter-spacing:.06em; padding:11px 24px;
}
.kfa-barra-btn:hover{ background:#000 }
@media (max-width:640px){
  .kfa-barra-in{ gap:12px; padding:10px 16px }
  .kfa-barra-img{ width:42px; height:42px }
  .kfa-barra-n{ font-size:16px }
  .kfa-barra-p{ font-size:12.5px }
  .kfa-barra-btn{ min-width:0; padding:8px 14px; font-size:13px }
}
/* Que la banda no tape lo último de la página */
body.kfa-con-barra #s6 .kfa{ padding-bottom:90px }

/* ── 1 · La foto fija mientras la información avanza ─────────────────────
   Ya era `sticky` (styles.css, top 90). Para que se note hacen falta dos
   cosas: que la foto quepa entera en la pantalla mientras está fija —se
   topa al alto de la ventana— y que la columna de la derecha mida más que
   ella (por eso «Qué incluye» y «Precios y formatos» llegan abiertos). */
@media (min-width:901px){
  #s6 .k2-gallery{ top:68px; width:min(100%, calc(100vh - 190px)); justify-self:center }
}

/* Las portadas de «Te puede gustar», las mismas de las repisas: cuadradas
   sobre el gris, con la portada al centro. Medidas en cqw, como en Navidad. */
.kfa .kfa-art.nhv-covwrap{ position:relative; padding-top:0; aspect-ratio:1/1; display:block }
.kfa .kfa-art.nhv-covwrap .nhv-cov{ position:absolute; left:16%; right:16%; width:auto; top:50%; transform:translateY(-50%); container-type:inline-size }
.kfa-card:hover .kfa-art.nhv-covwrap .nhv-cov{ transform:translateY(calc(-50% - 3px)) }
.kfa .nhv-cov.kids:not(.nv-navidad) .ct{ font-size:10.5cqw }
.kfa .nhv-cov.kids:not(.nv-navidad) .cs{ font-size:4cqw; white-space:normal; line-height:1.25 }
.kfa .nhv-cov.kids:not(.nv-navidad) .ck{ font-size:3.4cqw }
.kfa .nhv-cov.kids .cart{ margin:2.5cqw 0 1.5cqw }
.kfa .nhv-cov.keep .cart{ margin-top:4cqw }
.kfa .nhv-cov.kids .cart img{ max-width:100%; max-height:100% }
.kfa .nhv-cov.keep .ck{ font-size:3.6cqw }
.kfa .nhv-cov.keep .ct{ font-size:9cqw }
.kfa .nhv-cov.keep .cs{ font-size:3.8cqw; white-space:normal; line-height:1.25 }

/* «Sobre el libro» (kora-ficha.js), como el «Additional Details» de AU:
   el rótulo en bold y su línea al lado, renglón por renglón. */
#s6 .k2-sobre{ margin:4px 0 6px; display:flex; flex-direction:column; gap:10px; text-align:left }
#s6 .k2-sobre > div{ display:grid; grid-template-columns:140px 1fr; gap:12px; font-family:'Jost',sans-serif; font-size:14px; line-height:1.55 }
#s6 .k2-sobre dt{ font-weight:600; color:var(--k2-ink,#1F1D1B) }
#s6 .k2-sobre dd{ margin:0; font-weight:400; color:var(--k2-ink-soft,#46423D) }
@media (max-width:640px){ #s6 .k2-sobre > div{ grid-template-columns:1fr; gap:0 } }

/* ═══ AL PASAR EL CURSOR: SE OSCURECE, NO SE MUEVE — 18 oct 2026 ═════════
   Vivi, con la repisa navideña de AU al lado: «me gusta que cuando tienes el
   cursor sobre una portada, en lugar de que se mueva un poco para arriba, se
   queda en el mismo lugar pero se oscurece ligeramente». Vale para todas las
   portadas del catálogo (colecciones, Historias de familia, Navidad, «Te
   puede gustar»): el recuadro entero —fondo y portada— baja un 6 % de luz. */
.nhv-scope .nhv-covwrap{ transition:filter .22s ease }
.nhv-scope .nhv-covwrap:hover{ transform:none }
.nhv-scope .nhv-covwrap:not(.soon):hover{ filter:brightness(.93) }
.nhv-scope .nhv-covwrap:not(.soon):hover .nhv-cov{ transform:translateY(-50%) }
.nhv-scope .nhv-covwrap:hover{ background:#EFEDE9 }
.kfa-card .kfa-art{ transition:filter .22s ease }
.kfa-card:hover .kfa-art{ background:#EFEDE9; filter:brightness(.93) }
.kfa-card:hover .kfa-art > img{ transform:none }
.kfa-card:hover .kfa-art.nhv-covwrap .nhv-cov{ transform:translateY(-50%) }

/* ═══ NAVIDAD: LAS PORTADAS SOBRE VERDE OLIVO — 18 oct 2026 ══════════════
   «Ponerle un fondo verde olivo oscuro detrás de las portadas, para hacerlas
   más navideñas, así como lo hace AU». El mismo verde de la banda de arriba
   (#3E4634), y la sombra de la portada un poco más honda sobre lo oscuro. */
/* 18 oct · un tono más claro que la banda de arriba (#3E4634), para que no
   se repita el mismo bloque dos veces (Vivi). */
.nv-scope .nv-regalos-row .nhv-covwrap,
.nv-scope .nv-regalos-row .nhv-covwrap:hover{ background:#535D47 }
.nv-scope .nv-regalos-row .nhv-covwrap .nhv-cov{ box-shadow:0 18px 30px -16px rgba(0,0,0,.6) }

/* ═══ NAVIDAD: LA PORTADA, MUCHO MÁS GRANDE — 18 oct 2026 ════════════════
   Vivi: «que la portada de Navidad sea muuucho más grande.. quitar el título
   de NAVIDAD y el precio de aquí para dejar la portada brillar.. también
   darle más sombra detrás / a los lados». Queda la frase, la portada y el
   botón. La banda crece para que quepa; la portada mide hasta 420 px. */
.nv-scope .nv-hero{ min-height:clamp(560px, 78vh, 760px) }
.nv-scope .nv-hero-info .nhv-head .nhv-h1{ display:none }
.nv-scope .nv-hero-info .nhv-head{ margin-bottom:22px }
.nv-scope .nv-hero-libros{ max-width:min(420px, 30vw) }
.nv-scope .nv-hero-libros .au-precio{ display:none }
.nv-scope .nv-hero-libros .nhv-covwrap .nhv-cov{
  box-shadow:0 46px 70px -28px rgba(0,0,0,.75), 0 18px 38px -14px rgba(0,0,0,.55),
             -18px 10px 34px -22px rgba(0,0,0,.5), 18px 10px 34px -22px rgba(0,0,0,.5);
}
@media (max-width:820px){
  .nv-scope .nv-hero{ min-height:0 }
  .nv-scope .nv-hero-libros{ max-width:min(320px, 74vw) }
}

/* La línea chica del título de Navidad («NUESTRAS AVENTURAS DE») salía de
   un trazo: la letra de Navidad viene en un solo grosor, así que se le da
   cuerpo con un filo del mismo color. Sólo en las portadas del sitio. */
.nhv-scope .nhv-cov.nv-navidad .ct .n1{ -webkit-text-stroke:.045em currentColor; paint-order:stroke fill }

/* ═══ TÍTULOS UN GRADO MÁS LIGEROS — 18 oct 2026 ═════════════════════════
   «Podemos hacer un poco más delgados los títulos en general.. cuando
   cambiamos de font se nos pasó un poquito la mano». Venían en 500, que en
   EB Garamond pesa más que en Cormorant: los títulos del sitio quedan en
   400, su grosor normal. Las portadas y las hojas del libro no se tocan. */
.nhv-scope .nhv-h1, .nhv-scope .au-sec h2, .nhv-scope .nhv-head .nv-claim, .nv-scope .nv-claim,
.kc-scope .kc-claim, .kca-h, .kclub-h, .kclub-banda-h, .kcu-h, .fi-elegir-h, .k2new h1.k2-q,
.k2new .k2-col-h, .k2new .k2-dtitle, .k2new .k2-hero-r .k2-dtitle, .k2new .k2-dres-tit,
.lp-sec-title, .lp-step h4, .lp-faq-q, .lp-io-q, .lpt-q, .lpp-name, .howto-title, .est-copy h3,
.quedan-caja h3, .kfa-h{ font-weight:400 }
/* Sin la ruta de arriba, la banda empieza justo bajo el encabezado. */
.nv-scope #nvWrap{ padding-top:0 }

/* ═══ NAVIDAD: LA FRASE BAJO LA PORTADA Y LA GUÍA DE REGALOS — 18 oct ═══ */
.nv-scope .nv-hero-libros .nv-claim-abajo{
  margin:18px 0 14px; font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(17px,1.5vw,20px); line-height:1.35; color:#E3D6B8; text-align:center;
}
.nv-scope .nv-guia{ margin-top:12px }
.nv-scope .nv-guia .au-sec{ margin-top:34px }
/* 26 oct · Vivi: con seis, en la computadora y el iPad salían «5 en un renglón y 1
   abajo… mejor 3 y 3, más grandes, y quizá cuadradas». En el celular siguen de 2 en 2. */
.nv-scope .nv-guia-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px }
@media (min-width:901px){ .nv-scope .nv-guia-art{ aspect-ratio:1/1 !important } .nv-scope .nv-guia-n{ font-size:13px } .nv-scope .nv-guia-tj .tj-card{ width:52% } .nv-scope .nv-guia-art .kp-marco{ width:56% } }
.nv-scope .nv-guia-tj{ display:flex; align-items:center; justify-content:center; width:100%; height:100% }
.nv-scope .nv-guia-tj .tj-card{ width:64% }
.nv-scope .nv-guia-art .kp-marco{ width:68% }
.nv-scope .nv-guia-t{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left }
.nv-scope .nv-guia-t[role="button"]{ cursor:pointer }
.nv-scope .nv-guia-art{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:3/4; overflow:hidden; margin-bottom:12px; transition:filter .22s ease }
.nv-scope .nv-guia-art img{ width:100%; height:100%; object-fit:cover; display:block }
.nv-scope .nv-guia-t[role="button"]:hover .nv-guia-art{ filter:brightness(.93) }
.nv-scope .nv-guia-ph{ font-family:var(--font-display); font-size:clamp(22px,2.2vw,30px); color:#FBF7EF; letter-spacing:.02em; text-align:center; padding:0 12px }
.nv-scope .nv-guia-n{ font-family:'Jost',sans-serif; font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#1F1D1B; padding-bottom:3px; border-bottom:1px solid currentColor }
.nv-scope .nv-guia-t.pronto .nv-guia-n{ border-bottom-color:transparent }
.nv-scope .nv-guia-pr{ font-family:'Jost',sans-serif; font-size:12px; color:#79746D }
@media (max-width:900px){ .nv-scope .nv-guia-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px } }

/* El pie copiado (js/kora-pie.js): a todo lo ancho, como en la portada, y con
   aire abajo cuando la banda del resumen está encima. */
.screen > .lp-footer--copia{ margin-top:4.5rem }
body.kfa-con-barra .lp-footer{ padding-bottom:84px }
body.kfa-con-barra #s6 .kfa{ padding-bottom:0 }