/* ============================================================
   Kora — estilos principales
   ============================================================ */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --linen:#F5F0E8;--linen-dark:#EDE6D6;--dark:#2C2520;--sage:#8A9E8C;--blush:#D4B5A8;
    --white:#FDFAF5;
    /* Los cuatro cafés, ronda 21 ago 2026 · "el café pierde saturación":
       mismos valores de luz, menos calor. Solo el cromo del editor — la hoja
       del libro (#F6F3EC) y el verso se quedan como están, ese crema es papel.
       (Antes: --sand #A28D5F · --sand-light #DDD0B8 · --taupe #9E8E78 ·
       --clay #7A6652. Vivían aquí Y otra vez 2,000 líneas abajo, con valores
       distintos: quien leyera este bloque se llevaba los colores viejos.
       Unificados el 8 sep 2026.) */
    --sand:#9B8E74;--sand-light:#D8D1C4;--taupe:#948A7C;--clay:#72665A;
    --font-display:'Cormorant Garamond',serif;--font-body:'Jost',sans-serif;
  }
  html{scroll-behavior:smooth;background:#FFFFFF;-webkit-text-size-adjust:100%}

  /* La forma del spread, en un solo lugar (10 sep 2026). Estaba repetida como
     1.652 y 38/23 en seis reglas, así que cambiarla obligaba a cazarlas todas.
     38/23 son dos hojas de 4:5 con su lomo. TODOS los libros son 4:5, board
     books incluidos (Vivi, 10 sep 2026), así que hoy hay un solo valor; la
     variable se queda porque es el sitio donde tocarlo si eso cambia. */
  /* LA FORMA DEL LIBRO · 16 sep 2026 ─────────────────────────────────────
     `--k-pagina` es la hoja; `--k-spread-ar` son dos hojas. Y ya está: el
     spread es EXACTAMENTE dos páginas.
     Antes era 38/23, que son dos páginas de 4:5 más un 3.26 % de holgura de
     lomo (el factor está escrito con todas sus letras en kora-esencial.css).
     Esa holgura causó el único error de forma que había en la casa: alguien
     dividió 38/23 entre dos para sacar la hoja suelta —19/23 = 0.826— y así le
     metió la holgura del lomo A LA PÁGINA. Por eso `bookAspect()` recortaba las
     fotos a 4:5 y la hoja era 0.826: cada foto a página entera se recortaba con
     una forma y se colocaba en otra.
     La holgura se va. El lomo no es papel —es el cosido—, y ya se dibuja como
     sombra encima (`.spread::after`), que no ocupa ancho. Así la hoja del editor
     tiene la forma que se va a imprimir, que era el punto de toda la ronda.
     Los milímetros NO están aquí: viven en `KORA_TRIM` (app.js), porque son de
     cada libro y el CSS no sabe cuál está abierto. */
  :root{ --k-pagina:4/5; --k-spread:1.6; --k-spread-ar:8/5 }

  /* 10 sep 2026 · Vivi: "cuando abres una página nueva se abre a la mitad del
     título de arriba y se ve cortado".
     La causa: `.wf-head` es sticky en top:0, y todo el sitio baja a sus anclas
     con `scrollIntoView({block:'start'})` — que alinea el elemento con el borde
     de la ventana, o sea DEBAJO del header, que lo tapa.
     Se arregla una sola vez y para todos: `scroll-padding-top` en el scrollport
     le dice al navegador dónde empieza de verdad el área visible, y lo respetan
     tanto scrollIntoView como los saltos a #ancla. No hay que tocar ninguna de
     las llamadas (seedComenzar, irAPrueba, navGoHow, los temas del catálogo…).
     El valor sigue al alto del header, que cambia con el ancho: 58px de base,
     y ~76px en tablet, donde .wf-head-in abre su padding a 1.1rem. */
  html{scroll-padding-top:76px}
  @media(max-width:820px){ html{scroll-padding-top:94px} }
  @media(max-width:640px){ html{scroll-padding-top:76px} }
  /* 27 ago 2026: era un base64 de 43 KB dentro del CSS. Como archivo pesa 32 KB,
   se cachea aparte y no bloquea la lectura de la hoja. */
:root{--ph-blob:url("/img/fondos/ph-blob.webp")}
  body{background:#FFFFFF;color:var(--dark);font-family:var(--font-body);font-weight:300;overflow-x:hidden;line-height:1.5}
  a{color:inherit;text-decoration:none}
  button{cursor:pointer;font-family:var(--font-body)}
  ::selection{background:var(--sand-light);color:var(--dark)}

  /* ── HEADER ── */
  .wf-head{position:sticky;top:0;z-index:100;background:#FFFFFF;border-bottom:.5px solid rgba(201,185,154,.3)}
  .wf-head-in{display:flex;align-items:center;justify-content:space-between;padding:.55rem 3rem;max-width:1240px;margin:0 auto}
  .wf-logo{font-family:var(--font-display);font-size:24px;font-weight:500;letter-spacing:.22em;color:var(--dark);line-height:1}
  .wf-steps{display:flex;align-items:center}
  .wf-step{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);transition:color .3s}
  .wf-step.active{color:var(--clay)}
  @media(max-width:820px){.wf-head-in{padding:1.1rem 1.4rem}}

  .screen{display:none}.screen.active{display:block;animation:fade .5s ease}
  @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  .section-eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin-bottom:1rem}

  .btn-primary{font-family:var(--font-body);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--white);background:var(--clay);padding:.95rem 2.3rem;border:none;font-weight:400;transition:background .3s}
  .btn-primary:hover{background:var(--dark)}
  .btn-primary:disabled{background:var(--sand-light);cursor:default}
  .btn-secondary{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);background:transparent;padding:.6rem 0;border:none;border-bottom:.5px solid var(--sand-light);transition:color .3s,border-color .3s}
  .btn-secondary:hover{color:var(--dark);border-color:var(--clay)}

  /* ── QUIZ ── */
  .quiz{max-width:680px;margin:0 auto;padding:3rem 1.4rem 5rem}
  input[type=text],input[type=date],textarea{width:100%;border:.5px solid var(--sand-light);background:var(--white);padding:.75rem .9rem;font-family:var(--font-body);font-size:14.5px;font-weight:300;color:var(--dark);outline:none;transition:border-color .3s;border-radius:2px}
  input[type=text]:focus,input[type=date]:focus,textarea:focus{border-color:var(--clay)}
  /* selector de fecha: que combine con la tipografía y los colores de la marca */
  input[type=date]{min-height:46px;letter-spacing:.02em}
  input[type=date]::-webkit-datetime-edit{font-family:var(--font-body);color:var(--dark)}
  input[type=date]::-webkit-datetime-edit-text{color:var(--sand);padding:0 .1em}
  input[type=date]:invalid::-webkit-datetime-edit{color:var(--sand)}
  input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.45;transition:opacity .3s}
  input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.7}
  input::placeholder,textarea::placeholder{color:var(--sand)}
  textarea{resize:vertical;min-height:60px;line-height:1.6}
  /* UNA sola pill en toda Kora. La base iba en radio 2 px —esquinas casi
     cuadradas— y al marcarla se rellenaba de barro sólido; dentro del editor
     otra regla la pintaba redondeada, blanca y con anillo. O sea: la misma
     pregunta se veía de dos maneras según dónde la hicieras. Manda la del
     editor, que es la que se lee bien de cerca. Lo único que cambia por sitio
     es el aire (padding y gap), abajo. */
  .pills{display:flex;flex-wrap:wrap;gap:.45rem}
  .pill{font-size:13px;letter-spacing:0;line-height:1.3;color:var(--taupe);background:var(--white);border:1px solid var(--sand-light);border-radius:10px;padding:.5rem .85rem;cursor:pointer;transition:.2s;user-select:none}
  .pill:hover{border-color:var(--sand)}
  .pill.on{background:#fff;border-color:var(--clay);color:#2c2520;box-shadow:inset 0 0 0 1px var(--clay)}
  .pill.dim{opacity:.4}
  /* Semilla (paso 1): más contraste entre fondo, encabezado y pills — el fondo baja
     medio tono y las cajas/pills quedan en blanco, así dejan de verse monótonos. */
  /* Marcador "En memoria" — mismo tamaño y tono que los botones de al lado (niña/niño),
     con estado seleccionado claro (relleno oscuro, igual que el género elegido). */
  .k2-kidmem{font-family:'Jost';font-size:16px;line-height:1;color:var(--k2-taupe);background:var(--k2-paper);border:1px solid var(--k2-line);border-radius:10px;padding:11px 15px;flex:0 0 auto;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}
  .k2-kidmem:hover{color:#b5654d;border-color:#d8b2a4}
  .k2-kidmem.on{background:var(--k2-ink);color:#fff;border-color:var(--k2-ink)}
  .gtoggle{display:inline-flex;border:.5px solid var(--sand-light);border-radius:2px;overflow:hidden}
  .gbtn{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);border:none;padding:.55rem 1rem;background:var(--white);transition:all .2s}
  .gbtn.on{background:var(--clay);color:var(--white)}
  /* El panel de la semilla usa este mismo toggle para listas de más de dos
     opciones —"¿quién es de ti?" trae seis— y en fila se salían de la caja.
     Aquí se dejan envolver, cada botón con su propio borde. */
  .semilla-ops{display:flex;flex-wrap:wrap;gap:6px;border:none;overflow:visible}
  .semilla-ops .gbtn{border:.5px solid var(--sand-light);border-radius:3px;padding:.5rem .7rem;white-space:nowrap}
  .child-top{display:flex;gap:.7rem;align-items:center;margin-bottom:1rem}

  /* ── progress / error (fixed banner) ── */
  .prog{display:none;position:sticky;top:58px;left:0;right:0;z-index:90;background:rgba(232,224,212,.98);backdrop-filter:blur(8px);border-bottom:.5px solid var(--sand-light);padding:.9rem 1rem;text-align:center}
  .prog.on{display:block}
  .prog-in{max-width:560px;margin:0 auto}
  .prog .bar{height:3px;background:var(--sand-light);border-radius:3px;overflow:hidden;margin-bottom:.6rem}
  .prog .fill{height:100%;width:0;background:var(--clay);transition:width .4s ease}
  .prog .lbl{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--taupe)}
  .prog .step{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-top:.25rem}
  .err{display:none;position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:91;max-width:560px;width:92%;background:#f3e4de;border:.5px solid #d9b6a8;border-radius:3px;padding:1rem 1.3rem;color:#7a4a3a;font-size:13px;line-height:1.6;box-shadow:0 12px 30px -18px rgba(0,0,0,.3)}
  .err.on{display:block}.err b{font-weight:500}

  /* chapter tools (lock + regenerate this one) */
  .lock-toggle{display:inline-flex;align-items:center;gap:.55rem;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);background:transparent;border:.5px solid var(--sand-light);padding:.5rem 1rem;border-radius:2px;transition:all .2s}
  .lock-toggle:hover{border-color:var(--clay)}
  .lock-toggle.on{background:var(--sage);border-color:var(--sage);color:var(--white)}
  .lock-box{width:14px;height:14px;border:.5px solid var(--sand);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1}
  .lock-toggle.on .lock-box{background:var(--white);border-color:var(--white);color:var(--sage)}
  .btn-mini{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);background:transparent;border:.5px solid var(--sand-light);padding:.5rem 1rem;border-radius:2px;transition:all .2s}
  .btn-mini:hover{border-color:var(--clay);background:var(--linen)}
  .btn-mini:disabled{opacity:.4;cursor:default}
  .chtab.locked::before{content:'✓ ';color:var(--sage);font-weight:700}

  /* ── EDITOR ── */
  .editor{max-width:none;margin:0 auto;padding:.7rem 0 2.4rem 1.4rem}
  .editor-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:.75rem;padding-right:1.4rem}
  .eh-title{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
  .eh-title .kvida.on{align-self:center}
  .editor-head h2{font-family:var(--font-display);font-size:27px;font-weight:500;color:#4a3f30}
  .eh-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  .eh-menu{position:relative}
  .eh-link{background:transparent;border:none;font-family:var(--font-body);font-size:13px;color:var(--clay);cursor:pointer;padding:.45rem .2rem;white-space:nowrap;transition:color .2s}
  .eh-link:hover{color:var(--dark)}
  .btn-buy{font-family:var(--font-body);font-size:13px;letter-spacing:.02em;color:var(--white);background:#6E5A43;padding:.7rem 1.45rem;border:none;border-radius:8px;cursor:pointer;transition:background .3s;white-space:nowrap}
  .btn-buy:disabled{background:var(--sand-light);cursor:default}
  /* Descargar PDF en verde sage (positivo, "go") en vez del terracota */
  #btnPdf{background:#8DA27D}
  #btnPdf:hover{background:#79906A}
  .chtabs{display:flex;gap:.4rem;overflow-x:auto;position:relative;width:100%;padding-bottom:.5rem;margin-bottom:0;border-bottom:1px solid rgba(90,75,57,.5);scrollbar-width:thin;scrollbar-color:#5A4B39 transparent}
  .chtabs::-webkit-scrollbar{height:3px}
  .chtabs::-webkit-scrollbar-track{background:transparent}
  .chtabs::-webkit-scrollbar-thumb{background:#5A4B39;border-radius:2px}
  .chtab{font-size:13px;font-weight:300;letter-spacing:.01em;color:var(--taupe);padding:.32rem .7rem;white-space:nowrap;border:1px solid transparent;border-radius:8px;transition:all .2s;background:transparent;position:relative}
  .panel-hide{display:block;width:fit-content;margin:0 0 .9rem auto;border:0;background:none;cursor:pointer;font-family:var(--font-body);font-size:12.5px;letter-spacing:.02em;color:var(--clay);padding:.1rem 0;transition:color .15s}
  .panel-hide:hover{color:#4a3f30}
  .panel-show{display:none}
  #editorWrap.panel-hidden .panel-show{display:flex;align-items:center;gap:.3rem;position:fixed;right:0;top:150px;z-index:40;border:1px solid var(--sand-light);border-right:0;background:var(--white);cursor:pointer;font-family:var(--font-body);font-size:12.5px;color:var(--clay);padding:.55rem .8rem .55rem .7rem;border-radius:9px 0 0 9px;box-shadow:0 6px 18px -10px rgba(60,48,34,.4);transition:color .15s}
  #editorWrap.panel-hidden .panel-show:hover{color:#4a3f30}
  .chtab:hover{color:var(--clay)}
  .chtab.on{color:#3a3026;font-weight:400;background:var(--white);border-color:var(--sand-light)}
  .chtab.filled::after{content:'·';color:var(--sage);margin-left:5px;font-weight:700}
  .chtab.written{font-weight:400;color:#5A4B39}
  .chtab.approved{color:var(--sage)}
  .chtab.approved::before{content:"✓ ";color:var(--sage)}
  .editor-grid{display:grid;grid-template-columns:1fr 290px;gap:0;align-items:stretch}
  #editorWrap.panel-hidden .editor-grid{grid-template-columns:1fr}
  #editorWrap.panel-hidden .panel{display:none}
  @media(max-width:900px){
    .editor-grid{grid-template-columns:1fr;gap:1.2rem}
    .ed-left{position:static}
    #s2{overflow-x:hidden}
    .editor{padding-left:16px;padding-right:16px}
    .spread{box-shadow:0 22px 44px -28px rgba(44,37,32,.5)}
    .spread.single .pg{width:100%}
  }

  /* spread (shared by editor + libro completo) */
  /* Las hojas de atrás —tres por lado, en tonos que se van hundiendo— son lo que
     hace que el spread se lea como un libro abierto y no como una imagen. Viven
     en una variable porque el Revelado las necesita idénticas sobre su fondo
     oscuro, y una copia se habría desfasado en la primera afinada. */
  .spread{--hojas:6px 7px 0 -2px #ebe3d5, 11px 12px 0 -3px #ddd1bd, 16px 17px 0 -5px #cdbea4, -6px 7px 0 -2px #ebe3d5, -11px 12px 0 -3px #ddd1bd, -16px 17px 0 -5px #cdbea4;
    position:relative;background:#F6F3EC;border:.5px solid #E0D9CB;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:var(--k-spread-ar);width:100%;max-width:calc((100dvh - 380px) * var(--k-spread));min-height:calc(100dvh - 470px);margin-inline:auto;border-radius:3px;overflow:hidden;box-shadow:var(--hojas), 0 36px 78px -42px rgba(44,37,32,.55)}
  /* pg con acuarela: sin padding para que la imagen respire */
  .pg.has-watercolor{padding-left:0;padding-right:0;position:relative}
  .pg:has(.blob){padding-left:0;padding-right:0;position:relative}
  .spread::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:26px;transform:translateX(-13px);pointer-events:none;z-index:4;background:linear-gradient(90deg, transparent, rgba(150,125,85,.04) 28%, rgba(120,96,60,.10) 50%, rgba(150,125,85,.04) 72%, transparent)}
  .pg{padding:6% 6%;display:flex;flex-direction:column;justify-content:center;min-height:0}
  .ttl{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(20px,2.4vw,26px);color:var(--clay);text-align:center;margin-bottom:1.2rem}
  .verse{font-family:var(--font-display);font-weight:400;font-size:clamp(12.5px,1.12vw,14.5px);line-height:1.55;color:var(--dark);text-align:center}
  .verse p{margin-bottom:0.7rem}.verse p:last-child{margin-bottom:0}.verse p.vclose{margin-top:1.3rem}
  .divider{display:block;margin:1.4rem auto 0;width:74px;opacity:.6}

  /* abstract watercolor placeholder */
  .blob{position:relative;width:76%;aspect-ratio:1/1.14;margin:auto;overflow:visible;
    border-radius:46% 54% 57% 43% / 49% 41% 59% 51%;
    background:
      radial-gradient(58% 50% at 34% 30%, rgba(138,158,140,.50), transparent 70%),
      radial-gradient(55% 55% at 72% 38%, rgba(212,181,168,.50), transparent 72%),
      radial-gradient(70% 70% at 52% 76%, rgba(201,185,154,.42), transparent 75%),
      var(--linen);
    display:flex;align-items:center;justify-content:center;text-align:center;padding:1.6rem;overflow:visible}
  /* Cuando hay acuarela: el blob se expande para llenar la página y pierde forma */
  .blob.real{width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:transparent;padding:1.2rem 0.8rem;min-height:0;overflow:visible;display:flex;align-items:center;justify-content:center;}
  .blob.clickable{cursor:pointer;transition:filter .25s}
  .blob.clickable:hover{filter:brightness(1.03) saturate(1.08)}
  .blob img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .blob.real img{filter:none;object-fit:contain;position:relative;inset:auto;width:auto;height:auto;max-width:94%;max-height:100%;display:block;margin:auto}
  /* placeholder vacío: MISMA caja y posición que tendrá la acuarela real */
  .blob.empty{width:100%;height:100%;aspect-ratio:auto;min-height:0;background:transparent;border-radius:0;padding:1.2rem 0.8rem;display:flex;align-items:center;justify-content:center;position:relative;overflow:visible}
  /* 2 sep · Vivi: "el blob que cambiaste de amarillo a menta no era lo que me
     refería.. me refería a usar el mismo tipo de blob que usamos en keepsake
     (que ya no es el splash de acuarela).. es un blob «digital»".

     Corregido: ya no se tiñe el splash amarillo de Kids —que tenía bordes
     mordidos y mucho contraste, otra cosa— sino que se parte del MISMO disco
     de Keepsake (`/img/fondos/ph-blob.webp`), quieto y de poco contraste, y sólo se le
     mueve el matiz de su verde oliva (63°) al menta (152°). Queda el mismo
     objeto en los dos productos, que era el punto; lo único que cambia es el
     color. Va al doble de tamaño porque en Kids se pinta hasta 430 px y el
     original mide 260. Para que Kids use el de Keepsake tal cual, basta con
     poner aquí var(--ph-blob). El amarillo sigue en /img/fondos/kids-blob.webp. */
  :root{--ph-blob-kids:url("/img/fondos/kids-blob-menta.webp")}
  .blob.empty .cap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;max-width:64%;color:#43392b;padding:1.1rem 1.4rem;background:radial-gradient(ellipse at 50% 50%, rgba(245,241,233,.92) 0%, rgba(245,241,233,.7) 48%, rgba(245,241,233,0) 78%)}
  .duo .blob.empty{min-height:0;padding:0}
  .blob.preview img{filter:saturate(1.18) contrast(.9) brightness(1.06) sepia(.14) blur(.5px)}
  .blob .pv-badge{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:2;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--white);background:rgba(122,102,82,.8);padding:3px 9px;border-radius:2px;white-space:nowrap}
  .blob .cap{position:relative;font-family:var(--font-body);font-weight:300;font-size:12px;color:var(--taupe);line-height:1.5;max-width:84%}
  .blob .cap b{display:block;font-size:8.5px;letter-spacing:.28em;color:var(--clay);margin-bottom:.45rem;font-weight:500}
  .blob.converting{position:relative;background:none;box-shadow:none;display:flex;align-items:center;justify-content:center;animation:none}
  .blob.converting::before{content:"";position:absolute;inset:0;background:var(--ph-blob) center/contain no-repeat;animation:ph-breathe 5.2s ease-in-out infinite;z-index:0}
  /* indicador: regenerando texto — se OCULTA el verso anterior por completo
     (evita que asome texto viejo o un placeholder como "Regenerando este texto…");
     así queda UN SOLO aviso, centrado. */
  .spread.regenerating .verse{opacity:0;transition:opacity .25s ease}
  /* El aviso va sobre LA HOJA que se está reescribiendo, no al centro del
     spread: al centro caía sobre la ilustración o sobre el lomo, y no se
     entendía qué se estaba rehaciendo. Una hoja con ilustración no lo lleva; una
     con el texto fijado tampoco, porque su verso no se toca. */
  .spread.regenerating .pg{position:relative}
  .spread.regenerating .pg-fijo .verse{opacity:1}
  .spread.regenerating .pg:has(.verse):not(.pg-fijo)::after{
    content:"Escribiendo…";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    font-family:var(--font-body);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--clay);white-space:nowrap;animation:regpulse 1.4s ease-in-out infinite;z-index:6;pointer-events:none}
  @keyframes regpulse{0%,100%{opacity:.4}50%{opacity:1}}
  @keyframes blobpulse{0%,100%{opacity:1}50%{opacity:.6}}
  @keyframes phsway{0%,100%{transform:scale(.97) rotate(-2.5deg);opacity:.78}50%{transform:scale(1.05) rotate(2.5deg);opacity:1}}
  @keyframes blobmorph{0%,100%{border-radius:46% 54% 55% 45% / 50% 44% 56% 50%;transform:scale(1)}50%{border-radius:56% 44% 45% 55% / 56% 56% 44% 44%;transform:scale(1.04)}}
  @keyframes ph-breathe{0%,100%{transform:scale(.985) rotate(-1deg);opacity:.94}50%{transform:scale(1.028) rotate(1deg);opacity:1}}
  @keyframes ph-breathe-kids{0%,100%{transform:scale(.95) rotate(-2.5deg);opacity:.9}50%{transform:scale(1.07) rotate(2.5deg);opacity:1}}
  @media(prefers-reduced-motion:reduce){.blob.converting::before{animation:none!important}}
  .blob.converting .conv-label{position:relative;font-family:var(--font-body);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#43392b;line-height:2;padding:.5rem .9rem;background:radial-gradient(ellipse at 50% 50%, rgba(245,241,233,.92) 0%, rgba(245,241,233,.6) 55%, rgba(245,241,233,0) 80%);border-radius:50%}
  /* ── duo: dos hojas idénticas, centradas y sin recorte ── */
  .duo .pg{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6% 7%}
  .duo .blob,.duo .blob.empty,.duo .blob.real{width:90%;max-width:330px;min-height:0;padding:0;margin:0 auto;aspect-ratio:auto;display:flex;align-items:center;justify-content:center}
  .duo .blob.empty .ph-shape{width:100%;max-width:300px;max-height:300px}
  .duo .blob.real img{max-height:300px;max-width:100%;width:auto;object-fit:contain;display:block;margin:0 auto}
  .duo .blob + *{margin-top:auto}                           /* empuja título+verso al fondo → alineados entre ambas hojas */
  .duo .ttl{margin-bottom:.9rem;text-align:center;width:100%}
  .duo .verse{text-align:center;width:100%;max-width:100%}
  .duo .pg:nth-child(2) .blob{margin-top:2.4rem}   /* la hoja derecha no lleva título → su acuarela baja un poco */

  /* per-chapter controls live with the photos, in the panel */
  .panel-tools{margin-top:1.3rem;display:flex;flex-direction:column;gap:.6rem}
  .panel-tools .lock-toggle,.panel-tools .btn-mini{width:100%;justify-content:center;text-align:center}

  .spread-nav{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:calc((100dvh - 380px) * var(--k-spread));margin:.7rem auto 0;gap:1rem}
  .sn-corner{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe);background:transparent;border:none;cursor:pointer;padding:.5rem .2rem;font-weight:400;transition:color .2s;white-space:nowrap}
  .sn-corner:hover{color:var(--dark)}
  .sn-corner:disabled{opacity:0;pointer-events:none}
  .sn-page{font-family:var(--font-display);font-style:italic;font-size:12px;color:var(--sand)}

  /* barra de control bajo el spread (versión · regenerar · aprobar) */
  .ctrlbar{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;width:max-content;max-width:100%;margin:.45rem auto 0;padding:.28rem .8rem;background:var(--white);border:1px solid var(--sand-light);border-radius:14px;box-shadow:0 10px 26px -18px rgba(44,37,32,.4)}
  .ctrlbar.locked{opacity:.7}
  /* ── nueva barra de control: versiones · regenerar · aprobar ── */
  .ctrl-ver{display:flex;align-items:center;gap:.5rem}
  .ctrl-arrow{width:24px;height:24px;border-radius:50%;border:1px solid var(--sand-light);background:var(--linen);color:var(--clay);font-size:14px;line-height:1;cursor:pointer;transition:.2s}
  .ctrl-arrow:hover{border-color:var(--clay)} .ctrl-arrow:disabled{opacity:.3;cursor:default}
  .ctrl-verlbl{font-size:12px;color:var(--taupe);letter-spacing:.03em;min-width:92px;text-align:center}
  .ctrl-sep{width:1px;height:22px;background:var(--sand-light)}
  .ctrl-regen{font-size:12px;letter-spacing:.02em;color:var(--clay);background:transparent;border:none;cursor:pointer;padding:.28rem .6rem;white-space:nowrap;transition:.2s}
  .ctrl-regen:hover{color:var(--dark)}
  .ctrl-hint{text-align:center;font-size:13px;font-style:italic;color:#5f5240;margin:.7rem 0 0;font-family:var(--font-display)}
  /* ── círculo de fijar texto por página ── */
  .spread .pg{position:relative}
  /* ── DÓNDE EMPIEZA Y DÓNDE TERMINA CADA PARTE · 16 sep 2026 ──
     Una división, no un rótulo: en una fila que se desplaza, un título de acto
     cada cinco pestañas sería otro renglón de ruido. Basta con que el ojo vea
     que ahí se corta algo. */
  .chsep{flex:0 0 auto;align-self:stretch;width:1px;margin:.15em .6em;
    background:rgba(90,75,57,.34);border-radius:1px}

  /* ── EL CÍRCULO DE FIJAR, CON SU NOMBRE AL LADO ──
     La explicación vivía en un renglón al pie del editor, lejos del círculo del
     que hablaba y costando alto en todas las hojas, incluso en las que no lo
     tienen. Aquí va pegada al suyo. Se apaga en pantalla chica, donde el
     `title` del botón hace el trabajo y el ancho no sobra. */
  .fixwrap{position:absolute;bottom:14px;left:14px;display:flex;align-items:center;gap:.45em;z-index:5}
  .spread .pg:nth-child(2) .fixwrap{left:auto;right:14px;flex-direction:row-reverse}
  .fixlbl{font-family:var(--font-body);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--sand);white-space:nowrap;transition:color .2s}
  .fixwrap.on .fixlbl{color:var(--sage)}
  .fixwrap:hover .fixlbl{color:var(--clay)}
  @media(max-width:760px){ .fixlbl{display:none} }
  .fixdot{position:relative;bottom:auto;left:auto;flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:1px solid var(--sand-light);background:var(--white);color:transparent;font-size:9px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:.2s}
  .fixdot:hover{border-color:var(--clay)}
  .fixdot.on{background:var(--sage);border-color:var(--sage);color:#fff}

  /* ── panel: preguntas por capítulo ── */
  .pq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.5rem}
  .pq-head .pq-eyebrow{margin-bottom:0}
  .pq-check{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--sand-light);background:var(--white);color:transparent;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
  .pq-check:hover{border-color:var(--clay)}
  .pq-check.on{background:var(--sage);border-color:var(--sage);color:#fff}
  .pq-check-wrap{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:none}
  .pq-check-lbl{font-size:8.5px;letter-spacing:.1em;line-height:1.25;text-transform:uppercase;color:var(--sand);text-align:center;max-width:46px}
  .pq-eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);margin-bottom:.5rem}
  .pq-title{font-family:var(--font-display);font-weight:500;font-size:29px;color:var(--dark);line-height:1.1;margin-bottom:.45rem}
  .pq-title em{font-style:italic;color:var(--clay)}
  .pq-lede{font-size:12.5px;color:var(--taupe);line-height:1.5;margin-bottom:1.5rem}
  input.pq-input[type=date]{min-height:0;padding:.42rem .6rem;font-size:13px;width:auto;max-width:210px}
  .pq-label{display:block;font-size:13px;color:var(--dark);margin-bottom:.55rem;font-weight:400}
  .pq-hint{font-size:11px;font-style:italic;color:var(--clay);letter-spacing:0}
  .pq-input{width:100%;border:1px solid var(--sand-light);border-radius:10px;background:#FCFAF5;padding:.7rem .8rem;font-family:var(--font-body);font-size:13.5px;color:var(--dark);outline:none;transition:border-color .2s}
  .pq-input:focus{border-color:var(--clay)}
  .pq-area{min-height:84px;resize:vertical;line-height:1.5}
  .pq-photos-label{font-size:13px;font-weight:400;color:var(--dark);margin:1.6rem 0 .7rem}
  .pq-photos-label span{color:var(--sand);font-size:11.5px}
  .pq-photos{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
  .pq-photos.one{grid-template-columns:1fr}
  .pq-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1.5rem .8rem;border:1.5px dashed var(--sand-light);border-radius:12px;background:#FCFAF5;cursor:pointer;color:var(--taupe);transition:.2s;min-height:118px}
  .pq-photo:hover{border-color:var(--clay)}
  .pq-photo.filled{border-style:solid}
  .pq-photo-ic{color:var(--sand)}
  .pq-photo-thumb{width:54px;height:54px;border-radius:8px;overflow:hidden}
  .pq-photo.filled{padding:.4rem;min-height:0;gap:.35rem}
  .pq-photo.filled .pq-photo-thumb{width:100%;height:auto;aspect-ratio:1/1;max-height:210px}
  .pq-photo-thumb img{width:100%;height:100%;object-fit:cover}
  .pq-photo-thumb .mini-blob{width:100%;height:100%;border-radius:8px;background:radial-gradient(circle at 40% 35%,var(--sage),var(--blush) 60%,var(--sand))}
  .pq-photo-lbl{font-size:12.5px;color:var(--dark)}
  .pq-photo-act{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
  .pq-next{width:100%;margin-top:1.9rem;background:#5A4B39;color:#fff;border:none;border-radius:12px;padding:1rem;font-family:var(--font-body);font-size:13px;letter-spacing:.04em;cursor:pointer;transition:background .2s;box-shadow:0 7px 18px -9px rgba(44,37,32,.55)}
  .pq-skip{display:block;width:100%;margin-top:.55rem;background:transparent;border:none;color:var(--taupe);font-family:var(--font-body);font-size:11.5px;letter-spacing:.02em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.3rem 0;transition:color .15s;text-align:center}
  .pq-skip:hover{color:var(--clay)}
  .pq-next:disabled{opacity:.6;cursor:default}
  /* placeholder de capítulo sin generar */
  .ph-blob{display:block;width:74%;max-width:300px;aspect-ratio:1/1;margin:auto;background:var(--ph-blob) center/contain no-repeat}
  .verse-ph{display:flex;flex-direction:column;gap:14px;align-items:center;margin-top:1.4rem;width:100%}
  .verse-ph span:nth-child(1){width:72%}
  .verse-ph span:nth-child(2){width:58%}
  .verse-ph span:nth-child(3){width:78%}
  .verse-ph span:nth-child(4){width:52%}
  .verse-ph span:nth-child(5){width:66%}

  /* upload panel */
  .panel{padding-right:.2rem}
  /* escritorio: #s2 llena la ventana bajo el header; encabezado+capítulos+spread quedan fijos y SOLO el panel hace scroll, empezando debajo de la línea de capítulos */
  @media(min-width:901px){
    html:has(#s2.active){overflow:hidden}                 /* nada de scroll de página en el editor → no aparece el scrollbar gris desde arriba */
    html:has(#editorWrap.off){overflow:auto}               /* en "ver libro completo" sí scrollea la página */
    #s2:has(#editorWrap.off){height:auto;overflow:visible} /* el libro completo necesita alto libre */  /* sin panel: la hoja crece a ancho completo */
    #s2{height:calc(100dvh - 70px);overflow:hidden}        /* 70px = alto real del header */
    #s2 .editor{height:100%;display:flex;flex-direction:column;padding-bottom:0}
    #s2 #editorWrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
    #s2 .chtabs{flex:0 0 auto}
    #s2 .editor-grid{flex:1 1 auto;min-height:0}
    #s2 .ed-left{position:relative;height:100%;min-height:0;overflow:hidden;padding:1.2rem 1.4rem 0 20px}
    #s2 .ed-left:has(.spread.single){display:flex;flex-direction:column;justify-content:flex-start}   /* portada sencilla: alineada arriba, igual que los spreads del interior */
    #s2 .ed-left::after{content:"";position:absolute;top:0;right:0;height:100%;width:1px;background:linear-gradient(to bottom,transparent 0,rgba(90,75,57,.5) 70px)}
    #s2 .panel{height:100%;min-height:0;overflow-y:auto;padding:1.4rem .9rem 2rem 1.8rem;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(80,74,66,.42) transparent}
    #s2 .panel::-webkit-scrollbar{width:11px}
    #s2 .panel::-webkit-scrollbar-track{background:transparent}
    #s2 .panel::-webkit-scrollbar-thumb{background:rgba(80,74,66,.42);border-radius:6px;border:3px solid transparent;background-clip:padding-box}
    #s2 .panel::-webkit-scrollbar-thumb:hover{background:rgba(80,74,66,.6)}
  }
  .panel-label{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--taupe);margin-bottom:1rem}
  .upbox{border:.5px solid var(--sand-light);padding:1.2rem;text-align:center;cursor:pointer;transition:border-color .3s;margin-bottom:1rem;border-radius:11px;background:#fff}
  .upbox:hover{border-color:var(--clay)}
  .upbox.filled{border-color:var(--sage)}
  .upbox-thumb{width:100%;height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;overflow:hidden;border-radius:9px}
  .upbox-thumb img{width:100%;height:100%;object-fit:cover}
  .upbox-thumb .mini-blob{width:72px;height:72px;border-radius:46% 54% 57% 43% / 49% 41% 59% 51%;background:radial-gradient(circle at 40% 35%,var(--sage),var(--blush) 60%,var(--sand))}
  .upbox-cap{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--taupe);line-height:1.5;margin-bottom:.5rem}
  .upbox-action{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay)}
  .upbox.filled .upbox-action{color:var(--sage)}
  .panel-vault{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.4rem;color:#6b5d4a}
  .panel-vault p{line-height:1.6;font-style:italic;font-family:var(--font-display);font-size:14.5px}

  /* libro completo (scroll) */
  #fullWrap{display:none;max-width:1140px;margin:0 auto}
  #fullWrap.on{display:block}
  #editorWrap.off{display:none}
  #s2 #editorWrap.off{display:none}   /* gana a #s2 #editorWrap → ver libro completo oculta el editor */
  .full-spread{margin:1.4rem auto;animation:fade .5s ease}
  .cover-pg{
    --linen-base:#DFDACF;
    background-color:var(--linen-base);
    background-image:
      linear-gradient(118deg, rgba(255,255,255,.06), rgba(0,0,0,.035) 62%),
      var(--lino);
    background-size:auto, 200px 200px;
    background-blend-mode:soft-light, overlay;
    box-shadow:inset 0 0 90px rgba(60,48,34,.12)}
  .cover-inner{grid-column:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:24% 2rem 8%;text-align:center}
  @media(max-width:760px){.cover-inner{grid-column:1}}
  /* 13 sep 2026 · el grabado se vuelve tinta con nombre.
     Era un color calculado a mano dentro de la regla, y eso funcionaba mientras
     la tela fuera siempre clara: el título se pinta con la MISMA tela, un poco
     más oscura, que es exactamente lo que hace un hundido. Sobre tela oscura
     ese cálculo da café sobre café y el título desaparece.
     Ahora son cuatro variables —tinta, tinta del subtítulo, luz y sombra— y el
     tono de la tela las cambia de golpe. Nadie pregunta de qué color es. */
  .cover-sheet, .cover-pg{
    --emboss:color-mix(in srgb, var(--linen-base) 32%, #5a4632 68%);
    --emboss-sub:color-mix(in srgb, var(--linen-base) 58%, #463a28 42%);
    --emboss-hi:rgba(255,255,255,.55);
    --emboss-lo:rgba(40,30,18,.34);
  }
  /* Tela oscura: el hundido no se ve y lo que se usa de verdad es una lámina
     pálida. La luz y la sombra se invierten con ella — si no, el título queda
     claro pero con un realce blanco encima que lo despinta.
     ── 16 sep 2026 · ARENA, Y NO POR CAPRICHO ──────────────────────────
     Historia corta, porque las dos vueltas enseñan la misma curva.
     Era una lámina de CREMA FIJO: en verde, azul, ladrillo y chocolate salía
     casi el mismo color (lum 202 en los cuatro), y eso no es un hundido, es
     tinta encima. El 15 se cambió por un lavado de la propia tela, y con eso
     el hilo del lino volvía a morder la letra igual que muerde la tela —que
     era el otro problema, medido: ±1.1 contra ±1.2.
     Pero Vivi, viéndolo: "aún no se ve bien el título y subtítulo en color
     arena embossed". Tenía razón en las dos cosas: no era arena, y con un
     contraste de 67 apenas se leía.

     LA CURVA, medida en azul noche — cuanto más se aclara la tinta, más se ve
     y menos la muerde el hilo (el hilo en la tela es siempre ±1.2):

         lavado de la tela   lum 133 · hilo ±1.1 · contraste  67
         arena 75 %          lum 162 · hilo ±1.0 · contraste  96   ← ésta
         arena 84 %          lum 178 · hilo ±0.8 · contraste 112
         arena 92 %          lum 201 · hilo ±0.6 · contraste 135   ← el hueso de antes

     La última fila es exactamente de donde veníamos: `overlay` sobre un píxel
     casi blanco satura y el hilo muere al tocar la letra. Así que el tope no es
     estético, es físico — pasado cierto punto la tapa vuelve a verse impresa.
     Se toma la que sube el contraste casi un 50 % SIN soltar el hilo. Y sigue
     llevando tela adentro: por eso cambia con ella, y un vino mañana da un
     arena con vino sin tocar esta regla.
     El subtítulo va un paso más claro, como desde el 15: es texto chico sobre
     fondo oscuro y es lo primero que se pierde. */
  .cover-sheet[data-tono="oscuro"]{
    --emboss:color-mix(in srgb, var(--linen-base) 25%, #C9BBA0 75%);
    /* El subtítulo va un paso más claro que el título, al revés que en tela
       clara. Ahí el subtítulo se apaga para no competir con el nombre y se lee
       igual: es texto oscuro sobre fondo claro, donde lo chico aguanta. Aquí es
       texto claro sobre fondo oscuro y lo chico es lo primero que se pierde —
       «Una vida entera» y «Kora» casi desaparecían en ladrillo y en chocolate.
       El nombre sigue mandando por TAMAÑO, que es como manda un nombre en una
       tapa. */
    --emboss-sub:color-mix(in srgb, var(--linen-base) 16%, #CFC1A6 84%);
    --emboss-hi:rgba(22,16,10,.34);
    --emboss-lo:rgba(255,255,255,.20);
  }
  .cover-emboss{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4.2vw,44px);line-height:1.06;letter-spacing:.04em;
    color:var(--emboss);
    text-shadow:0 1px 0 var(--emboss-hi), 0 -1px 1px var(--emboss-lo)}
  .cover-emboss-sub{color:var(--emboss-sub);text-shadow:0 1px 0 var(--emboss-hi)}
  /* "Kora" al pie de la tapa de lino heredaba el color de la página. */
  .cover-pg .ckora{color:var(--emboss-sub)}
  .cover-pg .csub{font-family:var(--font-display);font-style:italic;font-size:clamp(13px,1.8vw,17px);margin-top:.55rem}
  .cover-mat{width:72%;max-width:360px;aspect-ratio:1/1;margin:4.4rem auto 1.4rem;background:#FBF7EF;padding:13px;display:flex;border-radius:2px;border:10px solid #F4EFE4;
    box-shadow:inset 0 2px 5px rgba(120,100,70,.20), inset 0 -1px 0 rgba(255,255,255,.65), 0 1px 1px rgba(255,255,255,.5)}
  .cover-mat.click{cursor:pointer;transition:box-shadow .25s,transform .25s}
  .cover-mat.click:hover{box-shadow:inset 0 2px 6px rgba(120,100,70,.26), inset 0 -1px 0 rgba(255,255,255,.7), 0 1px 1px rgba(255,255,255,.5)}
  .cover-ph{flex:1;aspect-ratio:1/1;overflow:hidden;position:relative;background:transparent}
  .cover-ph img{width:100%;height:100%;object-fit:cover;display:block}
  .cover-mat.add{flex-direction:column;align-items:center;justify-content:center;border:.5px dashed var(--sand);color:var(--taupe);font-size:10px;letter-spacing:.18em;text-transform:uppercase;text-align:center}
  .cover-swatches{display:flex;gap:.55rem;justify-content:center;margin-top:1.1rem}
  .cover-sw{width:26px;height:26px;border-radius:50%;border:1px solid rgba(44,37,32,.18);box-shadow:0 1px 4px rgba(44,37,32,.18);cursor:pointer;padding:0}
  .cover-sw.on{outline:2px solid rgba(122,102,82,.9);outline-offset:2px}
  .cover-pg .ckora{font-family:var(--font-display);font-size:19px;letter-spacing:.06em;margin-top:1.6rem}
  .dedic-eyebrow{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand);margin-bottom:1.3rem;text-align:center}
  .dedic-text{font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.7vw,20px);line-height:1.7;color:var(--taupe);text-align:center;max-width:82%;margin:0 auto}

  /* ── portada interior (hueso) · Keepsake ── */
  .ci-pg{background:#FDFAF5}
  .ci-blank{}
  @media(max-width:760px){.ci-blank{display:none}}
  /* 12 sep 2026 · Vivi: "en la dedicatoria y la portada interior el contenido
     va muy arriba, y «Kora» muy pegado". El bloque se baja con el reparto del
     padding (arriba más que abajo, centrado dentro de lo que queda) y la firma
     se despega. */
  .ci-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12% 2rem 6%}
  .ci-title{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.3vw,38px);line-height:1.08;letter-spacing:.03em;color:#3b3326}
  .ci-sub{font-family:var(--font-display);font-style:italic;font-size:clamp(13px,1.8vw,17px);color:var(--taupe);margin-top:.55rem}
  .ci-art{width:74%;max-width:340px;aspect-ratio:1/1;margin:2.4rem auto 1.6rem;position:relative;overflow:hidden;border-radius:2px}
  .ci-art img{width:100%;height:100%;object-fit:contain;display:block}
  .ci-art.click{cursor:pointer}
  .ci-art.add{display:flex;flex-direction:column;align-items:center;justify-content:center;border:.5px dashed var(--sand);color:var(--taupe);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
  .ci-conv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(253,250,245,.82);color:var(--clay);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
  .ci-div{width:84px;opacity:.5;margin:.4rem auto .2rem}
  .ci-kora{font-family:var(--font-display);font-size:19px;letter-spacing:.06em;color:var(--clay);margin-top:2.8rem}
  .ci-dedic{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:12% 1.5rem 8%}

  /* ── EL PRÓLOGO Y EL ÍNDICE ── 12 sep · rehechos el 16 sep 2026 ─────────
     Vivi, viéndolos impresos: "en un libro de este nivel, se siente todo muy
     apretado", y "el tamaño de letra está algo chico, sobre todo subtítulos
     como PRÓLOGO, ÍNDICE, PARTE I".

     LAS DOS COSAS ERAN LA MISMA CAUSA, y no era el diseño: era la UNIDAD.
     Toda esta tipografía estaba en píxeles fijos o en `vw` —`.pro-eyebrow` era
     `9.5px` a secas— o sea medida contra la VENTANA, no contra la hoja. En el
     editor eso pasa desapercibido porque la hoja es chica; en el libro completo
     la hoja crece y la letra no, así que "PRÓLOGO" se queda en 9.5 px sobre una
     página de 216 mm. Comparado con un verso que sí escala (`cqw`), todo lo
     demás encoge.
     Ahora se miden contra la hoja, con el mismo ancla que el verso: 1.69cqw son
     los 14.5 px de la hoja de 859 px del editor. Y de paso suben, que era la
     otra mitad de la queja: las cejas de 9.5 a ~13 px equivalentes.
     El `clamp` es para el EDITOR, donde la hoja es chica y el texto se infla a
     propósito. En el libro completo y en el PDF se quita — ver el bloque de
     `#fullWrap` más abajo. */

  /* La hoja del epígrafe: la frase de la casa, sola. No está vacía: está en
     silencio, y separa lo universal de lo que ya es de esta familia. */
  .pro-epi-pg{display:flex;align-items:center;justify-content:center}
  .pro-epi{text-align:center;padding:0 11%}
  .pro-epi p{font-family:var(--font-display);font-style:italic;font-size:clamp(17px,2.68cqw,30px);line-height:1.55;color:var(--taupe);margin:0}
  .pro-div{width:9.8cqw;min-width:70px;opacity:.45;margin:2.2rem auto 0}
  .pro-inner{display:flex;flex-direction:column;justify-content:center;height:100%;padding:11% 12% 10%}
  .pro-eyebrow{font-family:var(--font-body);font-size:clamp(11px,1.51cqw,17px);letter-spacing:.3em;text-transform:uppercase;color:var(--sand);margin-bottom:3.1cqw;text-align:center}
  /* 1.68cqw NO ES UN NÚMERO SUELTO: es lo más grande que CABE. El prólogo de la
     casa son dieciocho renglones y tiene que entrar en su página — medido en
     Chromium, a 1.98cqw se salía por 102 px (y así se veía en el libro de Vivi,
     cortado arriba y abajo: el aviso de imprenta tenía razón). 1.75 cabe por
     dos píxeles, que no es holgura. Aquí hay margen y sigue siendo más grande
     que los 17 px de antes. Si el prólogo crece al reescribirlo, el aviso lo
     dice antes de comprar — para eso está. */
  .pro-text p{font-family:var(--font-display);font-size:clamp(14px,1.68cqw,20px);line-height:1.75;color:#4a4033;margin:0 0 1em;text-align:left}
  .pro-text p:last-child{margin-bottom:0}

  /* ── el índice ──
     Dos mitades, once renglones y ni un número de página. La primera mitad se
     lee como estructura (el "Parte III" delante, chico y espaciado); la segunda
     como una lista de cosas que están guardadas ahí. Lo que tiene que verse de
     un golpe es que son DOS, y de eso se encargan los dos rótulos. */
  .idx-inner{display:flex;flex-direction:column;justify-content:center;height:100%;padding:11% 12% 10%}
  .idx-grupo{margin-bottom:4.6cqw}
  .idx-grupo:last-child{margin-bottom:0}
  .idx-parte{font-family:var(--font-body);font-size:clamp(11px,1.63cqw,18px);text-transform:uppercase;letter-spacing:.26em;color:var(--clay);margin-bottom:1.5cqw}
  .idx-parte::after{content:'';display:block;width:2.6em;height:.5px;margin:.7cqw 0 0;background:var(--sand-light)}
  .idx-hoja{font-family:var(--font-display);font-size:clamp(14px,2.04cqw,24px);line-height:1.55;color:#4a4033;margin-bottom:.85cqw;display:flex;gap:.6em;align-items:baseline}
  .idx-hoja:last-child{margin-bottom:0}
  .idx-num{flex:0 0 auto;font-family:var(--font-body);font-size:.6em;text-transform:uppercase;letter-spacing:.16em;color:var(--sand);min-width:5.6em}
  @media(max-width:760px){
    /* En el celular el spread se lee hoja por hoja: menos margen, para que la
       caja de texto no se quede sin ancho. */
    .idx-inner{padding:10% 10% 9%}
    .idx-num{min-width:4.8em}
    .pro-epi{padding:0 8%}
    .pro-inner{padding:10% 10% 9%}
  }
  /* ── capítulo aún por escribir ── */

  /* ── portada: una sola hoja (single) ── */
  .spread.single{display:flex;justify-content:center;align-items:center;background:transparent;border:none;box-shadow:none;min-height:0;aspect-ratio:auto;height:auto;overflow:visible}
  .spread.single::after{display:none}
  .spread.single .pg{height:calc(100dvh - 330px);width:auto;max-width:96%;aspect-ratio:var(--k-pagina);min-height:0;border-radius:4px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(44,37,32,.5)}
  .cover-pg.cover-sheet{display:flex;align-items:center;justify-content:center;padding:0;box-shadow:inset 0 0 70px rgba(120,100,70,.06)}
  .cover-inner-1{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:13% 2rem 10%;text-align:center;width:100%}
  /* ── portada moderna (acuarela grande, una hoja) ── */
  /* 13 sep 2026 · el fondo lo pone la tela (--linen-base, desde app.js). El
     valor de respaldo es el mate de siempre, así que un libro viejo que no
     traiga tela se ve idéntico a ayer. */
  .cover-modern.cover-sheet{grid-column:auto;display:flex;align-items:center;justify-content:center;background:var(--linen-base,#FAF6EF);padding:0;width:100%}
  .cm-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:13% 2rem 8%;width:100%}
  .cm-kora{position:absolute;top:7%;left:0;right:0;font-family:var(--font-display);font-size:15px;letter-spacing:.18em;color:var(--clay);opacity:.85}
  .cm-art{width:86%;max-width:430px;aspect-ratio:1/1;overflow:hidden;border-radius:2px;position:relative}
  .cm-art img{width:100%;height:100%;object-fit:contain;display:block}
  .cm-art.click{cursor:pointer}
  .cm-art.add{display:flex;flex-direction:column;align-items:center;justify-content:center;border:.5px dashed var(--sand);color:var(--taupe);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
  .cm-title{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,5.2vw,54px);line-height:1.04;letter-spacing:.03em;color:#3b3326;margin-top:1.7rem}
  .cm-sub{font-family:var(--font-display);font-style:italic;font-size:clamp(15px,2.1vw,20px);color:var(--taupe);margin-top:.55rem}
  /* ── 13 sep 2026 · LA ACUARELA GRANDE SOBRE TELA OSCURA ──
     La acuarela está pintada sobre papel blanco y su orilla se desvanece. Sobre
     tela clara eso es justo lo que la hace ver pintada encima de la tapa; sobre
     tela oscura el papel se ve como un rectángulo blanco pegado.
     La solución no es aclarar la tela: es la de cualquier álbum encuadernado en
     tela oscura — la lámina va MONTADA, en su cartulina, con su sombra. Va por
     data-tono, no por el nombre del color: si mañana entra un vino, ya está. */
  .cover-sheet[data-tono="oscuro"] .cm-title{ color:var(--emboss) }
  .cover-sheet[data-tono="oscuro"] .cm-sub,
  .cover-sheet[data-tono="oscuro"] .cm-kora{ color:var(--emboss-sub); opacity:1 }
  /* 16 sep 2026 · LA ACUARELA MONTADA EN PAPEL, y ahora por la razón correcta.
     Esto colgaba de `data-tono="oscuro"`, o sea del COLOR de la tela. Pero lo
     que decide no es que la tela sea oscura: es si la imagen se puede imprimir
     ENCIMA de ella. Sobre un lino claro la tinta se lee; sobre uno oscuro se
     ensucia, y entonces la acuarela va montada en papel — igual que en la
     opción de marco, que es lo que Vivi pidió.
     Lo declara la tela (`directa` en KEEP_TELA) y la hoja lo estampa en
     `data-montada`. Ninguna regla pregunta de qué color es, y una tela nueva
     llega con su respuesta puesta. */
  .cover-sheet[data-montada="1"] .cm-art{
    background:#FBF7EF; padding:3.2cqw; border-radius:2px;
    box-shadow:0 2px 10px -3px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12);
  }
  .cover-sheet[data-montada="1"] .cm-art.add{ background:transparent; box-shadow:none }
  /* El marco de la de lino ya es papel montado: sobre tela oscura solo necesita
     que su sombra exista, porque la que tenía era un realce blanco. */
  .cover-sheet[data-tono="oscuro"] .cover-mat{
    box-shadow:inset 0 2px 5px rgba(120,100,70,.20), 0 3px 14px -4px rgba(0,0,0,.5);
  }
  /* ── blob "pintando tu acuarela" (mismo lenguaje que los capítulos) ── */
  .cm-art.painting,.ci-art.painting{border:none;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 48% 40%,#efe3cf,#e3d4b9);box-shadow:0 12px 32px -20px rgba(60,48,34,.4);animation:blobmorph 3.2s ease-in-out infinite;border-radius:46% 54% 57% 43% / 49% 41% 59% 51%}
  .cover-ph.cover-paint{width:100%;height:100%;min-height:170px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 48% 40%,#efe3cf,#e3d4b9);animation:blobmorph 3.2s ease-in-out infinite;border-radius:46% 54% 57% 43% / 49% 41% 59% 51%}
  .cm-art.ready img,.ci-art.ready img{width:100%;height:100%;object-fit:contain;display:block}

  :root{--font-cover-modern:'Fraunces',Georgia,serif}
  /* opción Moderna: títulos de capítulo del interior en Jost */
  body.cover-moderna .ttl{font-family:'Jost',sans-serif;font-weight:500;font-style:normal;letter-spacing:.012em}
  /* ── portada principal como hoja sencilla: tamaños relativos a la hoja, no a la ventana ── */
  .cover-sheet{container-type:inline-size}
  /* Moderna */
  .cover-sheet .cm-inner{padding:13cqw 9% 9cqw}
  .cover-sheet .cm-kora{top:6cqw;font-family:'Jost',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(10px,2.8cqw,13px);letter-spacing:.22em;color:var(--taupe)}
  .cover-sheet .cm-art{width:80%;max-width:none}
  .cover-sheet .cm-title{font-family:var(--font-cover-modern);font-weight:500;letter-spacing:-.01em;font-size:clamp(33px,11.4cqw,53px);margin-top:5cqw;line-height:1.04}
  .cover-sheet .cm-sub{font-family:'Jost',sans-serif;font-weight:400;font-style:normal;text-transform:uppercase;letter-spacing:.15em;font-size:clamp(11px,3.5cqw,15px);margin-top:3.4cqw;color:var(--taupe)}
  /* Lino */
  .cover-sheet .cover-inner-1{height:100%;padding:12cqw 9% 8cqw;justify-content:flex-start}
  .cover-sheet .cover-emboss{font-size:clamp(32px,10.8cqw,54px)}
  .cover-sheet .csub{font-size:clamp(15px,4.8cqw,23px);margin-top:1.9cqw}
  /* El marco va HUNDIDO en la tela, no puesto encima: es una ventana recortada
     en el lino. La sombra exterior lo hacía flotar como calcomanía pegada.
     DÓNDE VA LA SOMBRA: sobre el PAÑO EXTERIOR del marco oscuro (el borde de
     10px), que es donde le caería la tela de alrededor si estuviera encajado.
     Un `inset` puesto en .cover-mat no sirve: box-shadow inset se dibuja dentro
     del padding box —o sea sobre el paño CLARO de adentro—, que es justo al
     revés. Por eso va en un ::before estirado -10px, el ancho del borde. */
  /* Marco DELGADO, y la imagen a paño: el marco blanco de adentro partía la
     portada en dos recuadros concéntricos y le quitaba tamaño a la acuarela.
     Ahora es un solo canto de arena y la imagen llega hasta él. */
  .cover-sheet .cover-mat{position:relative;width:74%;max-width:none;margin:auto auto 3.5cqw;padding:0;border:6px solid #EFE8D9;border-radius:2px;
    background:transparent;box-shadow:none}
  .cover-sheet .cover-mat::before{
    content:"";position:absolute;inset:-6px;pointer-events:none;z-index:3;border-radius:2px;
    box-shadow:inset 0 3px 7px rgba(96,76,48,.34),      /* la tela le cae encima por arriba */
               inset 0 0 13px 2px rgba(96,76,48,.16),   /* y se cierra por los cuatro lados */
               inset 0 -2px 3px rgba(255,255,255,.55);  /* el canto de abajo, que alcanza luz */
  }
  /* Sin foto todavía: ahí sí hace falta aire adentro para que quepa el aviso. */
  .cover-sheet .cover-mat.add{padding:10px}
  /* EL LINO POR ENCIMA DE LA IMAGEN. La portada es de tela: la acuarela está
     impresa SOBRE el lino, no pegada encima. Multiply para que el hilo se lea
     igual en un cielo claro que en una sombra. Va debajo de la sombra de
     ventana (z-index 2), que es la que hunde el marco. */
  .cover-sheet .cover-ph::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background-image:var(--lino);background-size:150px 150px;
    mix-blend-mode:multiply;opacity:.16;
  }
  .cover-sheet .cover-ph{position:relative;overflow:hidden;border:1px solid rgba(108,88,60,.40)}
  /* la acuarela llena la ventana: se acerca y se ancla un poco arriba para comerse el margen de papel blanco de abajo */
  .cover-sheet .cover-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.1);transform-origin:50% 30%}
  /* efecto "ventana" real: sombra interior dirigida (más oscura arriba, como si el lino proyectara sombra hacia adentro) */
  .cover-sheet .cover-ph::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    box-shadow:inset 0 4px 11px rgba(48,36,20,.58), inset 0 0 30px 6px rgba(58,44,26,.55), inset 0 -2px 6px rgba(58,44,26,.30)}
  .cover-sheet .ckora{font-size:clamp(12px,3.6cqw,16px);margin-top:0}
  .paint-label{font-family:var(--font-body);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);position:relative}
  /* ── firma de la dedicatoria (aparte) ── */
  .dedic-sign{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--sand);margin-top:1.5rem;text-align:center}
  /* ── selector de estilo de portada (panel) ── */
  .cover-style{display:flex;flex-direction:column;gap:.6rem;margin-top:.3rem}
  .cstyle{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:.7rem .8rem;border:1px solid var(--sand-light);border-radius:10px;background:var(--white);color:var(--taupe);font-family:var(--font-body);font-size:13px;cursor:pointer;transition:.18s}
  .cstyle.on{border-color:var(--clay);color:var(--dark);box-shadow:0 4px 12px -7px rgba(122,102,82,.5)}
  .cstyle-sw{width:30px;height:30px;border-radius:6px;flex:0 0 auto;border:1px solid rgba(44,37,32,.15)}
  .cstyle-sw.lino{background:#DFDACF}
  .cstyle-sw.moderna{background:linear-gradient(135deg,#FAF6EF 38%,#cfae84 145%)}
  .data-pg{text-align:center}
  .data-pg h2{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:23px;color:var(--clay);margin-bottom:1.3rem}
  .data-pg ul{list-style:none;font-family:var(--font-display);font-size:16px;color:var(--taupe);line-height:2.3}
  .data-pg ul b{font-weight:500;color:var(--clay)}
  .data-pg .mem{font-style:italic;color:var(--taupe);font-size:14px;margin-top:1rem}
  .data-pg .data-sub{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand);margin:1.4rem 0 .5rem}
  .data-pg .data-sub:first-of-type{margin-top:.2rem}
  .data-pg .data-facts{font-size:15px;line-height:1.9}
  .data-pg .data-facts .dk{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);font-family:var(--font-body)}
  .pg-empty{}
  @media(max-width:760px){.spread{grid-template-columns:1fr;aspect-ratio:auto}.spread::after{display:none}.pg{padding:2rem 1.6rem;min-height:430px}.pg-empty{display:none}}
  /* en vertical (móvil) las dos hojas se apilan: divisor suave y difuso entre ambas */
  @media(max-width:760px){ .spread > .pg:not(.pg-empty) + .pg:not(.pg-empty){box-shadow:inset 0 15px 13px -13px rgba(120,96,60,.28);} }

  /* ── guardado / retomar ── */
  .eh-save{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);white-space:nowrap}
  #resumeNote{display:none;position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:120;
    align-items:center;gap:.6rem;background:var(--white);border:.5px solid var(--sand-light);
    box-shadow:0 16px 40px -22px rgba(44,37,32,.45);border-radius:4px;padding:.8rem 1.2rem;
    font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--clay);max-width:90%}
  #resumeNote svg{flex-shrink:0;color:var(--sage)}

  /* ── impresión → Guardar como PDF ── */
  #printRoot{display:none}
  /* ── catálogo · Selecciona tu historia ── */

  @media print{
    /* Respaldo. El bueno lo inyecta `aplicarPliego()` (app.js) con la medida
       del libro que se está imprimiendo, porque `@page{size:…}` no lee
       variables. Éste es el pliego del keepsake: 216 × 270 × 2. */
    @page{ size:432mm 270mm; margin:0; }
    html,body{background:#fff !important}
    body > *:not(#printRoot){ display:none !important; }
    #printRoot{ display:block !important; margin:0; max-width:none; width:100% }
    #printRoot, #printRoot *{ animation:none !important }
    #printRoot .full-spread{
      margin:0 !important; width:380mm; height:230mm;
      page-break-after:always; break-after:page; page-break-inside:avoid; break-inside:avoid;
      opacity:1 !important; transform:none !important; display:flex; overflow:hidden;
    }
    #printRoot .full-spread:last-child{ page-break-after:auto; break-after:auto; }
    #printRoot .spread{
      box-shadow:none !important; border:none !important; border-radius:0 !important;
      width:100%; height:100%; min-height:0 !important; margin:0 !important;
      display:grid; grid-template-columns:1fr 1fr; overflow:hidden;
    }
    #printRoot .pg{ overflow:hidden }
    #printRoot .spread::after{ display:none }
    /* ── EL PDF SE MEDÍA CONTRA LA VENTANA · 15 sep 2026 ──────────────────
       `#printRoot` vive FUERA de `#s2`, así que nunca le tocó la regla del
       21 ago que mide el verso contra la hoja (`cqw`): en el PDF `.verse`
       caía al `clamp(12.5px, 1.12vw, 14.5px)` de la regla general, y `vw` en
       una hoja de impresión no es la hoja — es el ancho de página del
       navegador. O sea que el libro impreso tenía una TERCERA escala, distinta
       de la del editor y de la de la vista completa.
       Eso hace imposible avisar de nada: el aviso de imprenta puede decir la
       verdad solo si lo impreso usa la misma proporción que se midió. Aquí el
       PDF entra a la misma regla que la vista completa, con el mismo número.
       Como en el editor, la portada queda fuera: se mide por su contenido y la
       contención se lo impediría. */
    #printRoot .spread:not(.single){ container-type:inline-size }
    #printRoot .spread:not(.single) .verse{ font-size:1.69cqw }
    #printRoot .spread:not(.single) .cap{ font-size:1.5cqw }
    #printRoot .spread:not(.single) .ttl{ font-size:3.03cqw; margin-bottom:4.2cqw }
    #printRoot .spread:not(.single) .divider{ width:8.6cqw; margin-top:4.9cqw }
    #printRoot .pro-epi p{ font-size:2.68cqw }
    #printRoot .pro-eyebrow{ font-size:1.51cqw }
    #printRoot .pro-text p{ font-size:1.68cqw }
    #printRoot .idx-parte{ font-size:1.63cqw }
    #printRoot .idx-hoja{ font-size:2.04cqw }
    /* El aviso es del editor: no se imprime. */
    #printRoot .kimp-aviso{ display:none !important }
    #printRoot .pg-empty{ display:block }
    #printRoot .blob.real img{ max-height:170mm }
    #printRoot .cover-inner{ grid-column:2 !important }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  }

  /* ═══════════ LANDING (s0) ═══════════ */
  #s0{padding:0;background:var(--white)}
  .lp-wrap{max-width:1160px;margin:0 auto;padding:0 1.4rem}
  /* HERO a sangre completa con la foto real (/img/inicio/landing-hero.jpg).
     El ::before es un velo de crema que garantiza la lectura del texto a la izquierda. */
  .lp-eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand);margin-bottom:1.1rem}
  .lp-h1{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,5vw,58px);line-height:1.04;color:var(--dark);margin-bottom:1.3rem}
  .lp-h1 em{font-style:italic;color:var(--clay)}
  .lp-sub{font-size:15px;line-height:1.7;color:var(--taupe);max-width:30rem;margin-bottom:1.9rem}
  .lp-cta-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
  .lp-section{padding:3.2rem 0;border-top:.5px solid var(--sand-light)}
  .lp-sec-title{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.4vw,40px);line-height:1.1;color:var(--dark);text-align:center;margin-bottom:.7rem}
  .lp-sec-title em{font-style:italic;color:var(--clay)}
  .lp-sec-lead{text-align:center;color:var(--taupe);font-size:14.5px;line-height:1.7;max-width:34rem;margin:0 auto 2.2rem}
  .lp-ba{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start;max-width:920px;margin:0 auto}
  .lp-ba figure{margin:0}
  .lp-ba img{width:100%;border-radius:4px;display:block}
  .lp-ba figcaption{text-align:center;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);margin-top:.7rem}
  .lp-try{background:var(--linen);border-radius:6px;padding:2.6rem 2rem;margin-top:.5rem}
  .lp-drop{border:.5px dashed var(--sand);border-radius:4px;background:var(--white);padding:1.5rem;text-align:center;cursor:pointer;transition:border-color .25s,background .25s}
  .lp-drop:hover{border-color:var(--clay);background:#fff}
  .lp-drop .ttl{font-size:13px;color:var(--clay);letter-spacing:.04em}
  .lp-drop .sub{font-size:11px;color:var(--sand);margin-top:.35rem}
  .lp-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 1.4rem;max-width:980px;margin:0 auto}
  .lp-col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:.5px solid var(--sand-light)}
  .lp-col ul{list-style:none}
  .lp-col li{font-family:var(--font-display);font-size:16px;color:var(--dark);margin-bottom:.7rem;line-height:1.25}
  .lp-col li span{display:block;font-family:var(--font-body);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-top:.15rem}
  .lp-tag-now{color:var(--sage) !important;font-weight:500}
  .lp-foot{text-align:center;padding:2.8rem 0 3.6rem;border-top:.5px solid var(--sand-light)}
  .lp-foot .note{color:var(--sand);font-size:12px;letter-spacing:.04em;margin-top:1.4rem}
  @media(max-width:820px){
    .lp-cols{grid-template-columns:1fr 1fr;gap:1.2rem}
    .lp-ba{gap:.8rem}
  }
  .lp-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.3rem}
  .lp-try textarea{resize:vertical}
  .lp-mini{padding:1.4rem 1.2rem;width:100%;text-align:center}
  .lp-mini .verse{margin-bottom:.4rem}
  .lp-mini img{max-width:100%;max-height:300px;border-radius:3px;display:block;margin:.8rem auto 0}
  .lp-step{text-align:center;padding:0 .3rem}

  /* ── CUENTAS · login / registro ── */
  .auth-ov{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:1.4rem;background:rgba(44,37,32,.55);backdrop-filter:blur(8px)}
  .auth-ov.on{display:flex;animation:fade .35s ease}
  .auth-card{position:relative;width:100%;max-width:380px;background:var(--white);border:.5px solid var(--sand-light);border-radius:18px;padding:2.4rem 2rem 2rem;box-shadow:0 24px 60px rgba(44,37,32,.22);text-align:center}
  .auth-logo{font-family:var(--font-display);font-size:20px;letter-spacing:.18em;color:var(--clay);margin-bottom:1.2rem}
  .auth-title{font-family:var(--font-display);font-weight:300;font-size:30px;line-height:1.1;color:var(--dark);margin-bottom:.4rem}
  .auth-sub{font-size:13px;color:var(--taupe);margin-bottom:1.6rem;line-height:1.45}
  .auth-input{width:100%;padding:.85rem 1rem;margin-bottom:.7rem;border:.5px solid var(--sand-light);border-radius:10px;background:var(--linen);font-family:var(--font-body);font-size:15px;color:var(--dark);outline:none;transition:border-color .2s}
  .auth-input:focus{border-color:var(--clay);background:var(--white)}
  .auth-input::placeholder{color:#b3a892}
  .auth-err{min-height:1.1em;font-size:12.5px;color:#b5483a;margin:.1rem 0 .8rem;line-height:1.35}
  .auth-submit{width:100%;margin-top:.2rem}
  .auth-toggle{font-size:13px;color:var(--taupe);margin-top:1.1rem}
  .auth-toggle a{color:var(--clay);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .auth-close{position:absolute;top:.7rem;right:.9rem;background:none;border:none;font-size:24px;line-height:1;color:var(--taupe);padding:.2rem .4rem}
  .wf-session{display:flex;align-items:center;gap:.7rem;font-size:12px}
  .wf-login{background:none;border:.5px solid var(--sand-light);border-radius:20px;padding:.32rem .9rem;font-size:11px;letter-spacing:.06em;color:var(--clay);font-family:var(--font-body)}
  .wf-login:hover{border-color:var(--clay)}
  @media(max-width:820px){.auth-card{padding:2rem 1.4rem 1.6rem}}

  /* ── MI CUENTA · menú arriba a la derecha ── */
  .acct-wrap{position:relative}
  .acct-btn{display:flex;align-items:center;gap:.4rem;background:none;border:none;padding:.15rem}
  .acct-avatar{width:30px;height:30px;border-radius:50%;background:var(--clay);color:var(--white);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center}
  .acct-avatar.lg{width:40px;height:40px;font-size:16px;flex-shrink:0}
  .acct-caret{font-size:10px;color:var(--taupe)}
  .acct-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--white);border:.5px solid var(--sand-light);border-radius:14px;box-shadow:0 18px 44px rgba(44,37,32,.18);padding:.5rem;display:none;z-index:200}
  .acct-menu.on{display:block;animation:fade .2s ease}
  .acct-head{display:flex;align-items:center;gap:.7rem;padding:.7rem .7rem .9rem;border-bottom:.5px solid var(--linen-dark)}
  .acct-id{min-width:0}
  .acct-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
  .acct-email{font-size:13px;color:var(--dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
  .acct-sec{padding:.8rem .7rem}
  .acct-sec-t{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);margin-bottom:.5rem}
  .acct-book{background:var(--linen);border:.5px solid var(--sand-light);border-radius:10px;padding:.8rem}
  .acct-book-title{font-family:var(--font-display);font-size:17px;color:var(--dark);line-height:1.2;margin-bottom:.2rem}
  .acct-book-note{font-size:11.5px;color:var(--taupe);margin-bottom:.7rem}
  .acct-cont{width:100%;background:var(--clay);color:var(--white);border:none;border-radius:8px;padding:.55rem;font-family:var(--font-body);font-size:12.5px;letter-spacing:.04em}
  .acct-cont:hover{background:var(--dark)}
  .acct-item{width:100%;text-align:left;background:none;border:none;padding:.7rem;font-family:var(--font-body);font-size:13.5px;color:var(--dark);border-radius:8px}
  .acct-item:hover{background:var(--linen)}
  .acct-item.logout{color:var(--clay);border-top:.5px solid var(--linen-dark);border-radius:0 0 8px 8px;margin-top:.2rem}
  @media(max-width:820px){.acct-menu{width:min(86vw,260px)}}

  .acct-book-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;text-align:left;background:var(--linen);border:.5px solid var(--sand-light);border-radius:9px;padding:.6rem .75rem;margin-bottom:.4rem;font-family:var(--font-body);cursor:pointer;transition:.15s}
  .acct-book-row:hover{border-color:var(--clay)}
  .acct-book-row.active{background:var(--white);border-color:var(--clay)}
  .acct-book-row-t{font-family:var(--font-display);font-size:15px;color:var(--dark);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acct-book-row-go{color:var(--clay);font-size:14px;flex-shrink:0}
  .acct-book-row-tag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand);flex-shrink:0}
  .acct-more{font-size:11.5px;color:var(--taupe);padding:.1rem .2rem .3rem}

  /* ── MI BIBLIOTECA ── */
  .lib-wrap{max-width:1180px;margin:0 auto;padding:2.6rem 3rem 5rem}
  .lib-title{font-family:var(--font-display);font-size:clamp(34px,5vw,52px);font-weight:300;line-height:1.05}
  .lib-sub{color:var(--taupe);font-size:15px;margin-top:.5rem;max-width:520px}
  .lib-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 2rem}
  .lib-chip{border:.5px solid var(--sand-light);background:var(--white);color:var(--clay);border-radius:30px;padding:.5rem 1.1rem;font-size:12.5px;letter-spacing:.04em;cursor:pointer;transition:.2s}
  .lib-chip .n{color:var(--sand);margin-left:.35rem;font-size:11px}
  .lib-chip:hover{border-color:var(--clay)}
  .lib-chip.on{background:var(--clay);color:var(--white);border-color:var(--clay)}
  .lib-chip.on .n{color:rgba(255,255,255,.7)}
  .lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.6rem}
  .lib-card{position:relative;background:var(--white);border:.5px solid var(--sand-light);border-radius:16px;overflow:hidden;cursor:pointer;transition:.25s;box-shadow:0 2px 14px rgba(44,37,32,.04)}
  .lib-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(44,37,32,.12)}
  .lib-cover{height:210px;position:relative;display:flex;align-items:flex-end;padding:1rem;background-size:cover;background-position:center}
  .lib-star{position:absolute;top:.7rem;left:.8rem;font-size:17px;color:#fff;text-shadow:0 1px 4px rgba(44,37,32,.3);background:rgba(122,102,82,.28);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);border:none;cursor:pointer}
  .lib-star.on{color:#F4C97A}
  .lib-pill{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:.32rem .7rem;border-radius:20px;background:rgba(253,250,245,.92);color:var(--clay)}
  .lib-pill.paid{background:var(--clay);color:#fff}
  .lib-pill.soon{background:rgba(253,250,245,.92);color:var(--sand)}
  .lib-b{padding:1.1rem 1.1rem 1.3rem}
  .lib-card-t{font-family:var(--font-display);font-size:21px;line-height:1.15;margin-bottom:.25rem}
  .lib-meta{font-size:12px;color:var(--taupe)}
  .lib-menu-btn{position:absolute;top:.7rem;right:.8rem;width:32px;height:32px;border-radius:50%;border:none;background:rgba(122,102,82,.28);color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center}
  .lib-menu{position:absolute;top:3rem;right:.8rem;background:var(--white);border:.5px solid var(--sand-light);border-radius:12px;box-shadow:0 14px 34px rgba(44,37,32,.18);padding:.35rem;z-index:5;display:none;min-width:150px}
  .lib-menu.on{display:block}
  .lib-menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:.6rem .7rem;font-family:var(--font-body);font-size:13px;color:var(--dark);border-radius:8px;cursor:pointer}
  .lib-menu button:hover{background:var(--linen)}
  .lib-menu button.del{color:#b5483a;border-top:.5px solid var(--linen-dark);margin-top:.2rem}
  .lib-card.new{border:1px dashed var(--sand);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:320px;color:var(--clay);box-shadow:none}
  .lib-card.new:hover{background:var(--white);transform:translateY(-3px)}
  .lib-plus{width:54px;height:54px;border-radius:50%;border:1px solid var(--sand);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:300;margin-bottom:.9rem}
  .lib-empty{grid-column:1/-1;color:var(--taupe);font-size:14px;padding:1rem 0}
  @media(max-width:600px){.lib-wrap{padding:2rem 1.2rem 4rem}.lib-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.lib-cover{height:160px}.lib-card-t{font-size:18px}}

/* ============================================================
   Kora Kids — estilos del sub-brand (antes id="kids-style")
   ============================================================ */
/* tarjetas Kora · Kids — estilo prototipo: hueso, sin marco, nombre en clay */
.kk-cover{aspect-ratio:3/4;width:100%;max-width:260px;border-radius:3px;overflow:hidden;box-shadow:0 22px 48px -28px rgba(44,37,32,.5);background:#F6F3EE;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:7% 1rem 6%;text-align:center;box-sizing:border-box;transition:transform .18s ease,box-shadow .18s ease;}
.kk-art{width:88%;margin:.1rem auto .2rem;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;}
.kk-art img{width:100%;height:100%;object-fit:contain;display:block;}
.kk-title{font-family:var(--font-display);font-weight:600;font-size:clamp(16px,2.3vw,20px);line-height:1.1;margin-top:.15rem;color:var(--dark);}
.kk-sub{font-family:var(--font-display);font-style:italic;font-size:12px;color:var(--taupe);margin-top:.15rem;}
@media(max-width:560px){ .kk-cover{max-width:300px;} }

/* ═══════ Kora · Kids — identidad juguetona (Grandstander Medium + verde menta) ═══════ */
body.kids-mode .wf-logo{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.wf-logo .wf-lockup{display:flex;align-items:baseline;column-gap:.34em;white-space:nowrap;}
.wf-logo .kk-kora{font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:.12em;color:var(--dark);}
.wf-logo .kk-kids{font-family:'Grandstander',cursive;font-weight:500;letter-spacing:.02em;font-size:24px;color:#4E9A78;line-height:1;white-space:nowrap;}
/* Las tres reglas `.wf-logo span` que había aquí eran para el "Taller de
   Historias" que iba debajo de KORA, y se retiró el 21 de agosto. Una de ellas
   lo escondía en pantallas chicas — y como el logo de Kids está armado
   enteramente de spans, en el celular desaparecía el logo entero. */
.wf-logo .kk-kids span{display:inline;font-size:inherit;letter-spacing:inherit;line-height:inherit;}
.wf-logo .kk-sub{display:block;font-size:9px;font-family:var(--font-body);letter-spacing:.25em;color:var(--taupe);margin-top:-2px;text-transform:uppercase;}
/* el divisor de cruces REEMPLAZA la línea del header en modo Kids */
body.kids-mode .wf-head{border-bottom:none;}
.kids-divider-wrap{width:100%;line-height:0;background:linear-gradient(to bottom,#FDFAF5 50%,#E8E0D4 50%);}
.kids-divider-wrap svg{display:block;width:100%;height:20px;}
/* títulos de portada Kids (catálogo + selector): Grandstander, nombre multicolor por título */
.kk-title{font-family:'Grandstander',cursive!important;letter-spacing:.04em;color:#5d4c3b;font-weight:400;}
.kk-title .nm{color:inherit;}
/* cubierta del libro Kids */
.cover-emboss.kk-cover-title{font-family:'Grandstander',cursive;letter-spacing:.04em;font-weight:400;text-shadow:none;}

/* ═══════ Kora Kids · layout "verso sobre la foto" (acuarela a sangre) ═══════ */
.pg.kids-pg{position:relative;padding:0;overflow:hidden;background:#efe7d8;}
.pg.kids-pg .blob{position:absolute;inset:0;width:100%;height:100%;border:none;border-radius:0;margin:0;background:#efe7d8;}
.pg.kids-pg .blob img{width:100%;height:100%;object-fit:cover;display:block;}
.pg.kids-pg .blob.empty{display:flex;align-items:center;justify-content:center;}
.kids-verse{position:absolute;top:0;bottom:0;width:54%;display:flex;flex-direction:column;justify-content:flex-end;padding:8% 7%;box-sizing:border-box;z-index:3;pointer-events:none;}
.kids-verse.side-right{right:0;left:auto;text-align:right;background:linear-gradient(270deg,rgba(40,30,20,.46) 0%,rgba(40,30,20,.30) 45%,rgba(40,30,20,0) 100%);}
.kids-verse.side-left{left:0;right:auto;text-align:left;background:linear-gradient(90deg,rgba(40,30,20,.46) 0%,rgba(40,30,20,.30) 45%,rgba(40,30,20,0) 100%);}
.kids-verse p{font-family:var(--font-display,'Cormorant Garamond',serif);font-size:clamp(15px,2.1vw,23px);line-height:1.5;color:#fdf7ea;margin:0;text-shadow:0 1px 6px rgba(20,12,6,.45);font-weight:500;}
.kids-verse .hl{color:#f0c873;font-style:italic;}
.kids-pg .ttl{position:absolute;top:6%;left:0;right:0;text-align:center;z-index:3;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(253,247,234,.92);text-shadow:0 1px 5px rgba(20,12,6,.5);pointer-events:none;}
.spread > .pg.kids-pg{grid-column:1 / -1;min-height:520px;}
/* ═══════ Kora · Kids — libro (formato hueso v4): portada catálogo + interiores ═══════ */
.spread.kids .pg{padding:6% 7%;justify-content:center;background:transparent;position:relative;}
.spread.kids .kpg-big{align-items:center;justify-content:center;display:flex;}
.spread.kids .kpg-big .blob,.spread.kids .kpg-big .blob.real,.spread.kids .kpg-big .blob.empty{width:84%;min-height:0;aspect-ratio:auto;padding:0;margin:auto;background:transparent;border:none;box-shadow:none;display:flex;align-items:center;justify-content:center;}
.spread.kids .kpg-big .blob.real img{position:relative;inset:auto;width:auto;height:auto;max-width:100%;max-height:440px;object-fit:contain;margin:auto;}
.spread.kids .kpg-big .blob.empty{min-height:340px;}
/* placeholder de acuarela unificado (mismas reglas que Nuestra Historia): hoja sin título → blob grande */
.spread.kids .kpg-big .blob.empty .ph-shape{width:100%;max-width:430px;max-height:430px;aspect-ratio:1/1;background:var(--ph-blob-kids) center/contain no-repeat;}
.spread.kids .kpg-txt{align-items:center;text-align:center;}
.spread.kids .kttl{font-family:'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;font-size:10px;color:#7c6f5d;position:absolute;top:7%;left:0;right:0;text-align:center;}
.spread.kids .kverse{font-family:var(--font-display);font-size:clamp(14px,1.9vw,18px);line-height:1.5;color:#4a3f33;}
.spread.kids .kverse p{margin:0;}
.spread.kids .kverse .hl{color:var(--clay);font-style:italic;}
.spread.kids .kcomp{width:66%;margin:0 auto 16px;display:flex;align-items:flex-end;justify-content:center;}
.spread.kids .kcomp .blob,.spread.kids .kcomp .blob.real,.spread.kids .kcomp .blob.empty{width:100%;min-height:0;aspect-ratio:auto;padding:0;margin:0;background:transparent;border:none;box-shadow:none;display:flex;align-items:center;justify-content:center;}
.spread.kids .kcomp .blob.real img{position:relative;inset:auto;width:100%;height:auto;max-width:100%;max-height:230px;object-fit:contain;margin:0 auto;}
.spread.kids .kcomp .blob.empty{min-height:0;}
/* hoja con subtítulo del capítulo → blob chico, como en los duo de Nuestra Historia */
.spread.kids .kcomp .blob.empty .ph-shape{width:100%;max-width:220px;max-height:220px;aspect-ratio:1/1;background:var(--ph-blob-kids) center/contain no-repeat;}
.spread.kids .kcomp .blob.empty .cap{max-width:80%;padding:.7rem .9rem;}
.spread.kids .kdeco{margin-bottom:16px;display:flex;align-items:flex-end;justify-content:center;min-height:92px;}
.kdeco-sun{width:92px;height:92px;}
.kdeco-moon{height:84px;display:flex;align-items:flex-end;}
.kdeco-moon svg{height:84px;width:auto;}
.kdeco-stars{display:inline-flex;align-items:flex-start;margin-left:4px;}
/* portada Kids — una sola hoja, igual que las de referencia del catálogo */
.spread.kidscover{background:transparent;border:none;box-shadow:none;grid-template-columns:1fr;min-height:auto;overflow:visible;}
.spread.kidscover::after{display:none;}
.spread.kidscover .pg.kcover-pg{grid-column:1/-1;display:flex;align-items:center;justify-content:center;padding:4% 0 5%;}
.kcover{position:relative;width:60%;max-width:420px;aspect-ratio:3/4;background:#F6F3EC;border:.5px solid #E6DDCB;border-radius:3px;box-shadow:0 32px 60px -34px rgba(44,37,32,.55);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:4% 5% 5%;text-align:center;box-sizing:border-box;}
.kcov-label{font-family:'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase;font-size:11px;color:#7c6f5d;margin-bottom:.15rem;}
.kcov-art{width:96%;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;overflow:visible;margin:.15rem auto .25rem;}
.kcov-art img{width:100%;height:100%;object-fit:contain;display:block;}
.kcov-art.add{flex:1;border:1.5px dashed #cdbfa6;border-radius:4px;color:#9a8b72;font-family:var(--font-body);font-size:13px;align-items:center;width:78%;}
.kcov-art.click{cursor:pointer;}
.kcov-conv{position:absolute;font-family:var(--font-body);font-size:11px;color:var(--clay);}
/* blob animado mientras se genera la acuarela (Kids) — tamaño contenido y estable */
.spread.kids .kpg-big .blob.converting{background:transparent;box-shadow:none;animation:none;width:64%;aspect-ratio:1/1;min-height:0;max-width:300px;}
.spread.kids .kcomp .blob.converting{background:transparent;box-shadow:none;animation:none;width:72%;aspect-ratio:1/1;min-height:0;max-width:180px;}
/* Kids: mientras convierte, se mueve TU acuarela amarilla (no el verde/beige) */
.spread.kids .blob.converting::before{background:var(--ph-blob-kids) center/contain no-repeat;animation:ph-breathe-kids 3s ease-in-out infinite}
.kcov-art.converting{flex:1;width:96%;display:flex;align-items:center;justify-content:center;min-height:120px;background:none;box-shadow:none;animation:none;}
.kcov-art.converting .kcov-blob{height:92%;aspect-ratio:1/1.18;width:auto;max-width:100%;display:flex;align-items:center;justify-content:center;border-radius:46% 54% 57% 43% / 49% 41% 59% 51%;background:radial-gradient(58% 50% at 34% 30%, rgba(138,158,140,.5), transparent 70%),radial-gradient(55% 55% at 72% 38%, rgba(212,181,168,.5), transparent 72%),radial-gradient(70% 70% at 52% 76%, rgba(201,185,154,.42), transparent 75%),var(--linen);box-shadow:0 12px 30px -18px rgba(60,48,34,.3);animation:blobmorph 3.2s ease-in-out infinite;}
.kcov-art.converting .kcov-conv{position:static;text-align:center;color:#7c6f5d;line-height:1.7;letter-spacing:.04em;}
.kcov-title{font-family:'Grandstander',cursive;font-weight:400;letter-spacing:.03em;font-size:clamp(22px,3vw,30px);line-height:1.05;margin:.15rem 0 0;text-shadow:none;color:#5d4c3b;}
.kcov-sub{font-family:var(--font-display);font-style:italic;font-size:clamp(13px,1.7vw,16px);color:#7c6f5d;margin-top:.2rem;}
@media(max-width:760px){ .kcover{width:76%;max-width:360px;padding:8% 8%;} .kcov-art{width:88%;} .spread.kids .kcomp{width:76%;} }
/* dedicatoria Kids — primer spread después de la portada */
.kdedic{max-width:80%;text-align:center;}
.kdedic-eyebrow{font-family:'Jost',sans-serif;letter-spacing:.26em;text-transform:uppercase;font-size:10px;color:#a8997f;margin-bottom:1.4rem;}
.kdedic-text{font-family:var(--font-display);font-style:italic;font-size:clamp(17px,2vw,22px);line-height:1.78;color:#6b5d4c;}
/* input del panel (título/subtítulo Kids) */
.panel-input{width:100%;box-sizing:border-box;font-family:var(--font-display);font-size:15px;color:var(--dark,#3a3225);background:#fff;border:1px solid #e0d6c4;border-radius:6px;padding:.5rem .65rem;}
.panel-input:focus{outline:none;border-color:var(--clay);}
@media(max-width:760px){ .spread > .pg.kids-pg{min-height:62vw;} .kids-verse{width:66%;padding:9% 8%;} .kids-verse p{font-size:clamp(15px,4.6vw,21px);} }
/* en vertical, cada hoja Kids más alta para que se sienta como página de libro */
@media(max-width:760px){ .spread.kids .kpg-big, .spread.kids .kpg-txt{min-height:64vh;} }
/* pantallas chicas: que el header Kids y los títulos no se salgan */
@media(max-width:560px){
  .wf-logo{font-size:18px;}
  .wf-logo .kk-kora{font-size:20px;}
  .wf-logo .kk-kids{font-size:20px;}
  .wf-logo .kk-sub{font-size:8px;letter-spacing:.18em;}
  .kcov-title{font-size:clamp(20px,7vw,28px);}
  .kcov-title,.kk-title,.cover-emboss.kk-cover-title{overflow-wrap:break-word;hyphens:auto;}
  .spread.kids .kverse{font-size:clamp(14px,4.4vw,18px);}
}

/* ═══════ Recorrido (keepsake progresivo) — editor a pantalla, panel con scroll propio ═══════ */
body.recorrido #s2{height:calc(100vh - 54px);display:flex;flex-direction:column;overflow:hidden}
body.recorrido #s2 .editor{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:1rem 1.4rem 0}
body.recorrido #editorWrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.recorrido .editor-grid{flex:1 1 auto;min-height:0;grid-template-columns:1fr 384px;gap:2rem;align-items:stretch}
body.recorrido .editor-grid > div:first-child{min-height:0;overflow-y:auto;padding-right:.4rem}
body.recorrido .panel{position:static;height:100%;max-height:none;overflow-y:auto;background:#E9E0CF;border:1px solid var(--sand-light);border-radius:14px;padding:1.5rem 1.4rem;display:flex;flex-direction:column}
body.recorrido .panel::-webkit-scrollbar{width:7px}
body.recorrido .panel::-webkit-scrollbar-thumb{background:var(--sand);border-radius:4px}
@media(max-width:900px){ body.recorrido #s2{height:auto;overflow:visible} body.recorrido .editor-grid{grid-template-columns:1fr} body.recorrido .panel{height:auto} }

/* preguntas legibles dentro del panel (estilo mockup) */
.panel .p-eye{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--clay);font-weight:500;margin-bottom:.5rem}
.panel .field{margin-top:1.15rem;margin-bottom:0}
.panel .field label{font-size:11.5px;letter-spacing:.04em;text-transform:none;color:var(--dark);display:block;margin-bottom:.5rem;font-weight:400;line-height:1.35}
.panel .field .opt,.panel .opt{text-transform:none;letter-spacing:0;color:var(--sand);font-size:11.5px}
/* Dentro del panel del editor caben menos: solo cambia el aire. La forma, el
   color y el estado marcado los pone la regla base de arriba. */
.panel .pills{gap:.4rem;margin-top:.2rem}
.panel .pill{font-size:12.5px;padding:.34rem .68rem}
.panel textarea,.panel input[type=text],.panel input[type=date]{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--dark);background:var(--white);border:1px solid var(--sand-light);border-radius:10px;padding:.65rem .75rem;outline:none}
.panel textarea:focus,.panel input:focus{border-color:var(--clay)}
.panel .uploader{margin-top:.5rem;border:1.5px dashed var(--sand-light);border-radius:14px;padding:.9rem;display:flex;align-items:center;gap:.85rem;cursor:pointer;background:var(--white);transition:.2s}
.panel .uploader.has{border-style:solid;border-color:var(--clay)}
.panel .up-ic{width:46px;height:58px;border-radius:6px;flex:0 0 auto;background:var(--linen-dark);display:flex;align-items:center;justify-content:center;overflow:hidden}
.panel .up-ic img{width:100%;height:100%;object-fit:cover}
.panel .up-ic svg{width:21px;height:21px;stroke:var(--sand);fill:none}
.panel .up-t{font-size:13.5px;color:var(--dark)}
.panel .up-d{font-size:11.5px;font-weight:300;color:var(--sand);margin-top:2px}

/* ══════════════════════════════════════════════════════════
   FLUJO NUEVO · catálogo → colección → detalle → semilla
   (todo bajo .k2new; tokens locales para no chocar con :root)
   ══════════════════════════════════════════════════════════ */
.k2new{
  --k2-cream:#F4F0E8; --k2-paper:#FCFAF5; --k2-arena:#DED2BB;
  --k2-ink:#403729; --k2-ink-soft:#6B5E4D; --k2-taupe:#7A6652; --k2-sand:#A99882;
  --k2-line:#E6DDCC; --k2-line-soft:#EFE8DA; --k2-sage:#8C9A7B; --k2-ok:#7C9468;
  --k2-mint:#4E9A78;   /* verde kids calmado (antes #4E9A78, muy fosfo) */
  color:var(--k2-ink); font-family:'Jost',system-ui,sans-serif;
}
.k2wrap{max-width:1060px;margin:0 auto;padding:42px 34px 80px;width:100%}
.k2new .k2-eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--k2-sand);margin:0 0 10px;text-align:center}
.k2new h1.k2-q{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(32px,5vw,44px);line-height:1.08;margin:0 0 12px;text-align:center;color:var(--k2-ink)}
.k2new h1.k2-q em{font-style:italic;color:var(--k2-taupe)}
.k2new .k2-lede{font-size:16px;font-weight:300;line-height:1.6;color:var(--k2-ink-soft);margin:0 auto;max-width:58ch;text-align:center}
.k2new .k2-back{background:none;border:none;font-family:'Jost';font-size:13px;color:var(--k2-taupe);cursor:pointer;padding:6px 0;margin-bottom:6px}
.k2new .k2-btn-primary{border:none;cursor:pointer;font-family:'Jost';font-weight:400;font-size:15px;letter-spacing:.02em;padding:15px 28px;border-radius:6px;background:var(--k2-taupe);color:#fff;box-shadow:0 8px 22px -8px rgba(122,102,82,.6);transition:transform .15s,box-shadow .2s}
.k2new .k2-btn-primary:hover{box-shadow:0 12px 28px -8px rgba(122,102,82,.7)}
.k2new .k2-btn-primary:active{transform:scale(.985)}

/* ── S4 · dos colecciones ── */
.k2new .k2-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:46px}
.k2new .k2-col{cursor:pointer;text-align:center;transition:transform .2s}
.k2new .k2-col:hover{transform:translateY(-4px)}
.k2new .k2-col-kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--k2-sand);margin:0 0 6px}
.k2new .k2-col-h{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:500;margin:0;color:var(--k2-ink)}
.k2new .k2-col-sub{font-size:12.5px;font-weight:300;color:var(--k2-taupe);font-style:italic;margin:5px 0 0}
.k2new .k2-col-cover{margin:22px auto 0;width:280px;max-width:78%;aspect-ratio:3/4;border-radius:3px;position:relative;overflow:hidden;box-shadow:0 26px 56px -22px rgba(64,55,41,.5),0 3px 10px -3px rgba(64,55,41,.25)}
.k2new .k2-cover-keep{background:repeating-linear-gradient(0deg,rgba(160,140,110,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(160,140,110,.06) 0 1px,transparent 1px 3px),linear-gradient(150deg,#dfd6c4,#cdbfa6);display:flex;flex-direction:column;align-items:center;padding:30px 18px}
.k2new .k2-ck-title{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:500;line-height:1.05;color:#5a4d3b;text-align:center}
.k2new .k2-ck-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:11px;color:#7a6c57;margin-top:6px;text-align:center}
.k2new .k2-ck-frame{margin:16px auto 0;width:74%;aspect-ratio:1/1;background:#FBF7EF;border:6px solid #EFEAE0;overflow:hidden}
.k2new .k2-ck-frame img{width:100%;height:100%;object-fit:cover;display:block}
.k2new .k2-ck-kora{margin-top:auto;font-family:'Cormorant Garamond';font-size:11px;letter-spacing:.18em;color:#8a7c66}
.k2new .k2-cover-kids{background:#F6F3EE;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:22px 16px}
.k2new .k2-kk-kick{font-family:'Grandstander';font-size:9px;letter-spacing:.16em;color:var(--k2-sand);margin-bottom:4px}
.k2new .k2-kk-art{width:88%;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.k2new .k2-kk-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.k2new .k2-kk-title{font-family:'Grandstander';font-weight:500;font-size:19px;color:var(--k2-ink);margin-top:6px}
.k2new .k2-kk-title b{color:var(--k2-mint);font-weight:500}
.k2new .k2-kk-sub{font-family:'Grandstander';font-size:10px;color:var(--k2-sand);font-style:italic;margin-top:2px}
.k2new .k2-col-desc{font-size:13px;font-weight:300;color:var(--k2-ink-soft);line-height:1.5;margin:20px auto 0;max-width:34ch}
.k2new .k2-col-go{display:inline-block;margin-top:14px;font-size:13px;color:var(--k2-taupe);letter-spacing:.02em}

/* ── S5 · grid de títulos ── */
.k2new .k2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.k2new .k2-gcard{cursor:pointer;transition:transform .2s}
.k2new .k2-gcard:hover{transform:translateY(-4px)}
.k2new .k2-gcard.soon{cursor:default;opacity:.62}
.k2new .k2-gcard.soon:hover{transform:none}
.k2new .k2-gcover{aspect-ratio:3/4;border-radius:3px;overflow:hidden;position:relative;box-shadow:0 20px 44px -20px rgba(64,55,41,.5),0 2px 8px -3px rgba(64,55,41,.22)}
.k2new .k2-gcover.keep{background:repeating-linear-gradient(0deg,rgba(160,140,110,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(160,140,110,.06) 0 1px,transparent 1px 3px),linear-gradient(150deg,#dfd6c4,#cdbfa6);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:26px 14px 16px}
.k2new .k2-gcover.keep .gk-title{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:500;line-height:1.02;color:#5a4d3b;text-align:center}
.k2new .k2-gcover.keep .gk-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13.5px;line-height:1.2;color:#7a6b52;text-align:center;margin-top:5px}
.k2new .k2-gcover.keep .gk-frame{margin:auto auto 11px;width:68%;aspect-ratio:1/1;background:#FBF7EF;border:5px solid #EFEAE0;overflow:hidden}
.k2new .k2-gcover.keep .gk-frame img{width:100%;height:100%;object-fit:cover;display:block}
.k2new .k2-gcover.keep .gk-kora{margin-top:0;font-family:'Cormorant Garamond';font-size:10px;letter-spacing:.18em;color:#8a7c66}
.k2new .k2-gcover.kids{background:#F6F3EE;display:flex;flex-direction:column;align-items:center;padding:18px 12px}
.k2new .k2-gcover.kids .gk-kick{font-family:'Grandstander';font-size:8px;letter-spacing:.16em;color:var(--k2-sand);margin-bottom:3px}
.k2new .k2-gcover.kids .gk-art{width:86%;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.k2new .k2-gcover.kids .gk-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.k2new .k2-gcover.kids .gk-ktitle{font-family:'Grandstander';font-weight:500;font-size:15px;color:var(--k2-ink);margin-top:5px;text-align:center;line-height:1.1}
.k2new .k2-gcover.kids .gk-ktitle b{color:var(--k2-mint);font-weight:500}
.k2new .k2-gsub{font-size:12px;font-weight:300;color:var(--k2-ink-soft);font-style:italic}

/* ── S6 · detalle ── */
.k2new .k2-detail{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;margin-top:30px;align-items:start}
.k2new .k2-gallery{position:sticky;top:90px}
.k2new .k2-gmain{aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--k2-paper);border:1px solid var(--k2-line-soft);box-shadow:0 24px 54px -24px rgba(64,55,41,.45);display:flex;align-items:center;justify-content:center;padding:26px}
.k2new .k2-gmain img{max-width:100%;max-height:100%;object-fit:contain}
.k2new .k2-dinfo{padding-top:6px}
.k2new .k2-dkick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--k2-sand);margin:0 0 8px}
.k2new .k2-dtitle{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:500;line-height:1.04;margin:0;color:var(--k2-ink)}
.k2new .k2-dsub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:var(--k2-taupe);margin:8px 0 0}
.k2new .k2-ddesc{font-size:14.5px;font-weight:300;line-height:1.6;color:var(--k2-ink-soft);margin:16px 0 0}
.k2new .k2-dfeat{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--k2-line-soft)}
.k2new .k2-dfeat li{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--k2-line-soft);font-size:14px;font-weight:300;color:var(--k2-ink)}
.k2new .k2-dfeat li b{font-weight:500}
.k2new .k2-fic{width:34px;height:34px;border-radius:10px;background:var(--k2-paper);border:1px solid var(--k2-line);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.k2new .k2-fic svg{width:17px;height:17px;stroke:var(--k2-taupe);fill:none;stroke-width:1.5}
.k2new .k2-dcta{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.k2new .k2-dnow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--k2-ok);display:flex;align-items:center;gap:7px}
.k2new .k2-dnow .d{width:7px;height:7px;border-radius:50%;background:var(--k2-ok)}
.k2new .k2-dnote{font-size:12px;font-weight:300;color:var(--k2-sand);margin-top:14px}

/* ── S7 · semilla ── */
.k2new .k2-form{max-width:560px;margin:32px auto 0}
.k2new .k2-field{margin-top:20px}
/* Una pregunta se lee, no se rotula. Iban en versalitas de 11.5 px con .16em de
   espaciado y en arena (#A99882) sobre fondo crema — de lejos parecían el
   membrete de una sección, no algo que alguien te está preguntando, y de cerca
   costaban trabajo. Ahora usan la misma forma que las preguntas del editor
   (.pq-label): tamaño de lectura, tinta oscura y frase normal. Lo que sí es
   rótulo —el "KORA KEEPSAKE" de arriba— sigue en versalitas. */
.k2new .k2-field label{font-size:15px;font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none;color:#4A3F33;display:block;margin-bottom:9px}
.k2new .k2-field label b{font-weight:500}
.k2new .k2-field input,.k2new .k2-field textarea{width:100%;font-family:'Jost';font-size:15px;font-weight:300;color:var(--k2-ink);padding:14px;border:1px solid var(--k2-line);border-radius:12px;background:var(--k2-paper);outline:none;transition:border-color .2s}
.k2new .k2-field textarea{resize:vertical;min-height:64px;line-height:1.5}
/* ── hijos repetibles (semilla) ── */
.k2new .k2-kidrow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.k2new .k2-kidrow .k2-kidname{flex:1;min-width:0}
.k2new .k2-kidseg{display:inline-flex;border:1px solid var(--k2-line);border-radius:10px;overflow:hidden;background:var(--k2-paper);flex:0 0 auto}
.k2new .k2-kidseg button{border:none;background:transparent;font-family:'Jost';font-size:13px;color:var(--k2-taupe);padding:11px 13px;cursor:pointer;transition:background .15s,color .15s}
.k2new .k2-kidseg button.on{background:var(--k2-ink);color:#fff}
.k2new .k2-kidrm{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--k2-line);border-radius:9px;background:var(--k2-paper);color:var(--k2-sand);font-size:18px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s}
.k2new .k2-kidrm:hover{color:#b5654d;border-color:#d8b2a4}
.k2new .k2-addkid{margin-top:4px;background:none;border:none;color:var(--k2-taupe);font-family:'Jost';font-size:13.5px;letter-spacing:.02em;cursor:pointer;padding:6px 0;transition:color .15s}
.k2new .k2-addkid:hover{color:var(--k2-ink)}
@media(max-width:460px){.k2new .k2-kidseg button{padding:11px 11px}}
.k2new .k2-field input:focus,.k2new .k2-field textarea:focus{border-color:var(--k2-taupe)}
.k2new .k2-field .opt{text-transform:none;letter-spacing:0;color:var(--k2-sand)}
/* 12 sep 2026 · "Toca los que apliquen" — la única fila de la semilla que es de
   varias. Sin decirlo, nadie toca la segunda: todas las demás son de escoger
   una. Va del tamaño de una nota al pie, no de una instrucción. */
.k2new .k2-field .k2-nota{font-size:13px;font-weight:300;color:var(--k2-sand);margin:-4px 0 9px}
.k2new .k2-seg{display:flex;gap:9px;flex-wrap:wrap}
.k2new .k2-seg button{flex:1 0 auto;font-family:'Jost';font-size:13.5px;font-weight:300;color:var(--k2-ink-soft);padding:12px;border:1px solid var(--k2-line);border-radius:11px;background:var(--k2-paper);cursor:pointer;transition:.2s}
.k2new .k2-seg button.on{border-color:var(--k2-taupe);background:#fff;color:var(--k2-ink);box-shadow:0 5px 12px -7px rgba(122,102,82,.5)}
.k2new .k2-uploader{margin-top:8px;border:1.5px dashed var(--k2-line);border-radius:14px;padding:18px;display:flex;align-items:center;gap:15px;cursor:pointer;background:var(--k2-paper);transition:.2s}
.k2new .k2-uploader.has{border-style:solid;border-color:var(--k2-taupe);background:#fff}
.k2new .k2-up-ic{width:46px;height:58px;border-radius:6px;flex:0 0 auto;background:var(--k2-arena);display:flex;align-items:center;justify-content:center;overflow:hidden}
.k2new .k2-up-ic img{width:100%;height:100%;object-fit:cover}
.k2new .k2-up-ic svg{width:21px;height:21px;stroke:var(--k2-sand);fill:none;stroke-width:1.4}
.k2new .k2-up-t{font-size:14px} .k2new .k2-up-d{font-size:12px;font-weight:300;color:var(--k2-sand);margin-top:2px}
/* Esta nota no es letra chica de contrato: es la que quita el miedo a que la
   semilla sea un cuestionario largo. Estaba en 12.5 px sobre arena (#A99882),
   que sobre el fondo crema casi no se ve. Sube al cuerpo legible del resto de
   la pantalla, con el mismo tono que el lede. */
.k2new .k2-tinynote{font-size:14.5px;font-weight:300;line-height:1.5;color:var(--k2-ink-soft);margin-top:18px;display:flex;align-items:flex-start;gap:9px}
.k2new .k2-tinynote svg{width:16px;height:16px;margin-top:2px;stroke:var(--k2-sage);fill:none;stroke-width:1.6;flex:0 0 auto}
.k2new .k2-form-cta{margin-top:30px;text-align:center}

/* ── reel de fotos del detalle ── */
.k2new .k2-gthumbs{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.k2new .k2-gthumb{flex:0 0 auto;width:60px;height:60px;padding:0;border:1.5px solid var(--k2-line);border-radius:9px;background:var(--k2-paper);overflow:hidden;cursor:pointer;opacity:.78;transition:opacity .15s,border-color .15s,transform .12s}
.k2new .k2-gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.k2new .k2-gthumb:hover{opacity:1;transform:translateY(-2px)}
.k2new .k2-gthumb.on{opacity:1;border-color:var(--k2-taupe);box-shadow:0 0 0 1px var(--k2-taupe)}
.k2new .k2-gnote{font-size:12px;font-style:italic;font-weight:300;color:var(--k2-sand);margin:12px 0 0;line-height:1.45}

@media(max-width:780px){
  .k2wrap{padding:30px 18px 64px}
  .k2new .k2-cols{grid-template-columns:1fr;gap:38px}
  .k2new .k2-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .k2new .k2-detail{grid-template-columns:1fr;gap:18px}
  .k2new .k2-gallery{position:static}
  .k2new .k2-gmain{aspect-ratio:1/1;max-height:42vh;padding:14px}
  .k2new .k2-dtitle{font-size:30px}
  .k2new .k2-dsub{font-size:17px}
  .k2new .k2-ddesc{margin-top:12px}
}
@media(max-width:460px){
  .k2new .k2-grid{grid-template-columns:repeat(2,1fr);gap:13px}
  .k2new .k2-gcover.keep{padding:18px 9px 12px}
  .k2new .k2-gcover.keep .gk-title{font-size:19px}
  .k2new .k2-gcover.keep .gk-sub{font-size:11px}
  .k2new .k2-gcover.keep .gk-frame{width:74%}
  .k2new .k2-gtitle{font-size:17px}
  .k2new .k2-gsub{font-size:12px}
  .k2new .k2-gmeta{margin-top:10px}
}

/* ════════ modal de recorte de foto ════════ */
.crop-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(44,37,32,.55);backdrop-filter:blur(3px)}
.crop-modal.on{display:flex}
.crop-card{background:var(--cream,#FAF7F0);border-radius:18px;padding:22px 20px 18px;width:100%;max-width:380px;box-shadow:0 30px 70px -24px rgba(44,37,32,.6);text-align:center}
.crop-title{font-family:var(--font-display);font-size:22px;color:var(--dark);margin:0 0 4px}
.crop-sub{font-size:12px;color:var(--taupe);margin:0 0 16px}
.crop-stage{position:relative;width:100%;max-width:320px;margin:0 auto;aspect-ratio:var(--ar,1/1);overflow:hidden;border-radius:10px;background:#e9e2d4;cursor:grab;touch-action:none;box-shadow:inset 0 0 0 1px rgba(122,102,82,.18)}
.crop-stage:active{cursor:grabbing}
.crop-stage img{position:absolute;top:0;left:0;max-width:none;user-select:none;-webkit-user-drag:none;will-change:transform}
.crop-zoom{display:flex;align-items:center;gap:.6rem;max-width:320px;margin:14px auto 0}
.crop-zlabel{color:var(--clay);font-size:16px;width:14px}
.crop-zoom input[type=range]{flex:1;accent-color:var(--clay)}
.crop-actions{display:flex;gap:.7rem;margin-top:18px}
.crop-cancel,.crop-ok{flex:1;padding:.85rem;border-radius:11px;font-family:var(--font-body);font-size:13px;cursor:pointer;transition:.2s;border:1px solid var(--sand-light)}
.crop-cancel{background:transparent;color:var(--taupe)}
.crop-cancel:hover{color:var(--dark);background:var(--linen)}
.crop-ok{background:#5A4B39;color:#fff;border-color:#5A4B39}
.crop-ok:hover{background:#46392b}

/* ═══ Ajustes: dedicatoria Kids a dos páginas + editor en landscape ═══ */
.spread.kids.kdedic-duo .kdedic{max-width:86%;}
.spread.kids.kdedic-duo .kdedic-text{font-size:clamp(12px,1.35vw,15px);line-height:1.6;}
.spread.kids.kdedic-duo .kdedic-eyebrow{margin-bottom:1rem;}
/* portada interior (página derecha): acuarela centrada, sin recuadro "pegado" */
.kcover.kcover-interior{border:none;box-shadow:none;background:transparent;width:100%;max-width:none;aspect-ratio:auto;padding:4% 6%;justify-content:center;}
.kcover-interior .kcov-art{width:78%;flex:0 0 auto;max-height:52%;margin:.2rem auto .6rem;}
.kcover-interior .kcov-art img{max-height:100%;}
@media(max-width:760px){ }
/* subtítulo del capítulo (Kids) un poco más grande + renglones placeholder mientras no hay verso */
.spread.kids .kttl{font-size:13px;}
.spread.kids .kverse.kverse-ph{width:82%;}
.kverse .kv-ph{display:block;height:9px;margin:11px auto;width:76%;background:#ddd0b8;border-radius:5px;}
.kverse .kv-ph:nth-child(2){width:88%;}
.kverse .kv-ph:nth-child(3){width:64%;}
.spread.kids .kdeco.kdeco-empty{min-height:92px;}
/* Editor en horizontal (landscape) en el teléfono: dimensiona el spread por ANCHO, no por alto */
@media (orientation:landscape) and (max-height:540px){
  #s2{height:auto;overflow:visible;}
  #s2 .editor{height:auto;}
  .editor-grid{grid-template-columns:1fr;}
  .panel{height:auto;}
  #s2 .ed-left{height:auto;overflow:visible;padding-top:.5rem;}
  #s2 .ed-left::after{display:none;}
  .spread{max-width:min(94vw, calc((100dvh - 88px) * var(--k-spread)));min-height:auto;aspect-ratio:var(--k-spread-ar);}
}


/* ── Kids · imagen centrada arriba, título + verso juntos anclados abajo (todos los libros) ── */
.spread.kids .kpg-txt{justify-content:space-between;}
/* el título deja de ir absoluto arriba: ahora va pegado encima del verso, con aire y un poco más grande */
.spread.kids .ktext .kttl{position:static;top:auto;left:auto;right:auto;margin:1.5rem 0 .9rem;
  font-weight:500;text-transform:none;
  font-size:23px;letter-spacing:.005em;line-height:1.2;color:#5c5142;}
/* la tipografía del título de capítulo sigue a la elegida en la portada */
.spread.kids .ktext .kttl.kf-grandstander{font-family:'Grandstander',cursive;font-weight:500;font-size:23px;letter-spacing:.005em;}
.spread.kids .ktext .kttl.kf-jost{font-family:'Jost',sans-serif;font-weight:500;font-size:20px;letter-spacing:.05em;}
.kcov-title.kf-grandstander{font-family:'Grandstander',cursive;}
.kcov-title.kf-jost{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:.02em;}
/* selector de tipografía en el panel */
.kfont-pick{display:flex;gap:.5rem;flex-wrap:wrap;}
.kfont-op{padding:.5rem .9rem;border:1px solid var(--sand-light,#e3d9c6);border-radius:20px;background:var(--white,#fff);
  color:#6f6252;font-size:14px;cursor:pointer;transition:.18s;}
.kfont-op:hover{border-color:#c9bda6;}
.kfont-op.on{border-color:#5c5142;color:#3f372c;box-shadow:0 0 0 1px #5c5142 inset;}
.spread.kids .ktext{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:8%;width:100%;}
/* la imagen se centra en el espacio libre de arriba (no pegada al borde) */
.spread.kids .kpg-txt > .kcomp,
.spread.kids .kpg-txt > .kdeco{flex:1;margin:0 auto;display:flex;align-items:center;justify-content:center;min-height:0;}

/* acuarela decorativa (paloma/estrellas): pequeña; la foto que la reemplace también */
.spread.kids .kdeco.kdeco-swap{width:52%;}
.spread.kids .kdeco.kdeco-swap img{max-height:190px;}
.spread.kids .kdeco.kdeco-swap .blob.real img{max-height:190px;}
/* baja la acuarela decorativa (paloma) para que no quede tan arriba */
.spread.kids .kpg-txt > .kdeco.kdeco-swap{margin-top:14%;flex-direction:column;overflow:visible;}

/* foto principal del spread (lado sin deco): grande, del tamaño final, cuadrada */
.spread.kids .kcomp.kcomp-photo{width:82%;}
.spread.kids .kcomp.kcomp-photo .blob.real img{max-height:320px;}
.spread.kids .kcomp.kcomp-photo .blob.empty{min-height:250px;}
.spread.kids .kcomp.kcomp-photo .blob.empty .ph-shape{max-width:320px;max-height:320px;}

/* ── hint "personaliza esta imagen": círculo degradado con el texto adentro, esquina exterior ── */
.spread.kids .kdeco-swap{position:relative;}
.spread.kids .kdeco-swap .deco-hint{
  position:absolute;top:2px;z-index:4;
  display:flex;justify-content:center;text-align:center;
  pointer-events:none;
}
.spread.kids .kdeco-swap .deco-hint-txt{
  font-family:'Jost',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  font-size:8.5px;line-height:1.45;color:#8a7657;text-shadow:0 1px 3px rgba(253,250,243,.95),0 0 7px rgba(253,250,243,.85);
}
.spread.kids .kdeco-swap.hint-l .deco-hint{left:4px;}
.spread.kids .kdeco-swap.hint-r .deco-hint{right:4px;}
/* toggle foto <-> ilustración: vive en la misma esquina que "personaliza" y es clickeable */
.spread.kids .kdeco-swap.has-photo{position:relative;}
.spread.kids .deco-hint.deco-switch{pointer-events:auto;cursor:pointer;}
.spread.kids .deco-hint.deco-switch:hover .deco-hint-txt{color:#5d4c3b;text-decoration:underline;}
/* firma del cierre (línea que empieza con —): separada del bloque */
.spread.kids .kv-sign{display:block;margin-top:.95rem;}
/* corazón del cierre un poco más chico que las demás ilustraciones */
.spread.kids .kdeco.kdeco-swap .kdeco-heart img{max-height:150px;}
/* selector de ilustración (varias opciones para el capítulo) */
.spread.kids .deco-picker{
  position:static;transform:none;margin-top:10px;z-index:5;width:max-content;max-width:none;
  display:flex;gap:5px;pointer-events:auto;flex-wrap:nowrap;justify-content:center;align-items:center;
}
.spread.kids .deco-opt{
  flex:0 0 auto;width:26px;height:26px;border-radius:7px;border:1px solid #e6dcc6;background:#fdfaf3;
  padding:2px;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-family:'Jost',sans-serif;font-size:5.5px;line-height:1;text-align:center;text-transform:uppercase;color:#8a7657;
}
.spread.kids .deco-opt.on{border-color:#4E9A78;box-shadow:0 0 0 1px #4E9A78;}
.spread.kids .deco-opt img{width:100%;height:100%;object-fit:contain;}

/* ── título del libro en el editor: Jost, más ligero y menos oscuro ── */
@media(max-width:760px){ .spread.kids .ktext .kttl{font-size:17px;margin:1rem 0 .6rem;} }

/* ═══════════════════════════════════════════════════════════════════════
   PORTADAS · rediseño (jul 2026) — chrome tipo Artifact Uprising en el editor:
   bisagra izquierda + canto perimetral (pasta dura), marco sin "ventana",
   tipografía serif/Jost independiente, y acabados lino-hueso vs mate en moderna.
   NO toca el acabado de lino actual (.cover-pg) que ya te gusta.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- chrome del "libro": bisagra + canto perimetral --- */
.cover-sheet{position:relative}
.cover-sheet::before, .kcover:not(.kcover-interior)::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5%;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(52,42,26,.28) 0%, rgba(52,42,26,.11) 14%, rgba(255,252,244,.20) 34%,
    rgba(120,100,70,.05) 52%, rgba(40,32,20,.28) 74%, rgba(40,32,20,.09) 89%, rgba(40,32,20,0) 100%);
}
.cover-sheet::after, .kcover:not(.kcover-interior)::after{
  content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;
  box-shadow:
    inset -1.5px 0 0 rgba(0,0,0,.05),
    inset 0 -1.5px 0 rgba(0,0,0,.05),
    inset 1px 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(120,95,60,.09);
}

/* --- Keepsake · marco SIN ventana: marco blanco plano + acuarela PNG centrada --- */
.cover-sheet .cover-ph{border:none}
.cover-sheet .cover-ph img{object-fit:contain;object-position:center;transform:none}
.cover-sheet .cover-ph::after{content:none;box-shadow:none}

/* --- Keepsake · moderna: acabado lino-hueso vs mate (grande) --- */
.cover-modern.cover-sheet[data-finish="hueso"]{
  --linen-base:#F1ECDF;
  background-color:var(--linen-base);
  background-image:
    linear-gradient(118deg, rgba(255,255,255,.06), rgba(0,0,0,.03) 62%),
    var(--lino);
  background-size:auto, 200px 200px;
  background-blend-mode:soft-light, overlay;
}
.cover-modern.cover-sheet[data-finish="mate"]{background:#FAF6EF}

/* --- Keepsake · tipografía del título (independiente del diseño) --- */
.cover-emboss.cf-jost{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:.02em;text-shadow:none}
.cover-emboss.cf-serif{font-family:var(--font-display)}
.cover-sheet .cm-title.cf-jost{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:.01em}
.cover-sheet .cm-title.cf-serif{font-family:var(--font-cover-modern)}

/* --- panel · swatches de las 3 opciones de portada --- */
.cstyle-sw.beige{background:#E9E2D1}   /* va con COVER_LINEN en app.js */
.cstyle-sw.hueso{background:#F1ECDF}
.cstyle-sw.mate{background:linear-gradient(135deg,#FAF6EF 40%,#efe7d6 140%)}

/* ── correcciones portada Kids (jul 2026) ── */

/* (2) edición inline IGUAL que el texto interior: borde punteado + fondo claro (mismo lenguaje que VEDIT_STYLE) */
.kcov-title[contenteditable], .kcov-sub[contenteditable], .kdedic-text[contenteditable]{
  border:1px dashed transparent; border-radius:10px; padding:.3rem .6rem;
  transition:border-color .15s, background .15s; cursor:text;
}
.kcov-title[contenteditable]:hover, .kcov-sub[contenteditable]:hover, .kdedic-text[contenteditable]:hover{
  border-color:rgba(122,102,82,.30); background:rgba(255,255,255,.4);
}
.kcov-title[contenteditable]:focus, .kcov-sub[contenteditable]:focus, .kdedic-text[contenteditable]:focus{
  outline:none; border-color:rgba(122,102,82,.5); background:rgba(255,255,255,.55);
}

/* opciones de impresión (panel) — dos tarjetas con nombre y precio opcional */
.kprint-pick{display:flex;flex-direction:column;gap:.5rem}
.kprint-op{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;text-align:left;
  padding:.7rem .85rem;border:1px solid var(--sand-light);border-radius:10px;background:var(--white);
  color:var(--taupe);font-family:var(--font-body);font-size:13.5px;cursor:pointer;transition:.18s}
.kprint-op:hover{border-color:#c9bda6}
.kprint-op.on{border-color:var(--clay);color:var(--dark);box-shadow:0 4px 12px -7px rgba(122,102,82,.5)}
.kprint-op .kp-price{font-size:12px;color:var(--clay);white-space:nowrap}

/* (4) subtítulo de portada Kids en Jost */

/* (5) impresión Kids · pasta blanda mate: bisagra de dos líneas + canto fino + esquina con doblez */
.kcover.kp-softcover{box-shadow:0 14px 28px -22px rgba(44,37,32,.42)}
.kcover.kp-softcover:not(.kcover-interior)::before{
  width:8%;
  background:linear-gradient(90deg,
    rgba(45,36,22,.20) 0 1px, transparent 1px 62%,
    rgba(45,36,22,.24) 62% calc(62% + 1px),
    rgba(255,255,255,.55) calc(62% + 1px) calc(62% + 2px),
    transparent calc(62% + 2px) 100%);
}
.kcover.kp-softcover:not(.kcover-interior)::after{
  box-shadow:inset -1px 0 0 rgba(0,0,0,.04), inset 0 -1px 0 rgba(0,0,0,.04),
             inset 1px 1px 0 rgba(255,255,255,.18);
}

/* (7) portada interior · versión más chica y contenida (no una copia de la portada) */
@media(max-width:760px){ .kcover-interior .kcov-art{width:48%} }

/* (1) portada Kids del tamaño de una página del editor (+ bisagra) */
.kcover:not(.kcover-interior){width:auto;max-width:94%;height:calc(100dvh - 350px);max-height:none;aspect-ratio:3/4}
@media(max-width:760px){ .kcover:not(.kcover-interior){height:auto;width:80%;max-width:360px} }

/* ── catálogo: mismo chrome de libro (bisagra + perímetro) en cubiertas de S4 y S5 ── */
.k2new .k2-col-cover::before, .k2new .k2-gcover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5%;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(52,42,26,.28) 0%, rgba(52,42,26,.11) 14%, rgba(255,252,244,.20) 34%,
    rgba(120,100,70,.05) 52%, rgba(40,32,20,.28) 74%, rgba(40,32,20,.09) 89%, rgba(40,32,20,0) 100%);
}
.k2new .k2-col-cover::after, .k2new .k2-gcover::after{
  content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;
  box-shadow:
    inset -1.5px 0 0 rgba(0,0,0,.05),
    inset 0 -1.5px 0 rgba(0,0,0,.05),
    inset 1px 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(120,95,60,.09);
}




/* ═══════════════════════════════════════════════════════════════════════
   REVISIÓN JUL 2026 · consolidación
   1) Estilos del landing que faltaban (manifiesto, bandas, idea, cómo-se-crea)
   2) Header: nav con formato + menús desplegables (Colecciones/Keepsake/Kids)
   3) Portadas del catálogo: marco blanco + lino real (como Nuestra Historia),
      conservando la bisagra/canto ya trabajados.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Landing · bandas ── */
.lp-band{border-radius:24px;padding:3.6rem 2.2rem;margin:1.8rem 0;border-top:none !important}
.lp-band--b{background:#F6F4F1}

/* ── 1 · Landing · manifiesto (Por qué existe) ── */
.lp-manifesto{text-align:center}
.lp-mani-h{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3.4vw,38px);line-height:1.15;color:var(--dark);margin-bottom:1.6rem}
.lp-mani-h em{font-style:italic;color:var(--clay)}
.lp-mani-verse{font-family:var(--font-display);font-size:clamp(17px,2vw,21px);line-height:1.85;color:var(--clay);margin-bottom:1.3rem}
.lp-mani-verse .soft{color:var(--taupe);font-style:italic}
.lp-mani-turn{font-family:var(--font-display);font-size:clamp(17px,2vw,21px);line-height:1.7;color:var(--dark)}
.lp-mani-rule{width:52px;height:1px;background:#4C6657;margin:1.9rem auto}

/* ── 1 · Landing · idea (posicionamiento) ── */
.lp-idea{text-align:center;max-width:760px;margin:0 auto;padding:3rem 0 2.6rem;border-top:.5px solid var(--sand-light)}
.lp-idea h3{font-family:var(--font-display);font-weight:400;font-size:clamp(21px,2.6vw,28px);line-height:1.35;color:var(--dark);margin-bottom:.9rem}
.lp-idea h3 em{font-style:italic;color:var(--clay)}
.lp-idea p{font-size:14.5px;line-height:1.8;color:var(--taupe);max-width:560px;margin:0 auto}

/* ── 1 · Landing · cómo se crea (3 pasos) ── */
@media(max-width:760px){.lp-band{padding:2.4rem 1.3rem;border-radius:18px}}

/* ── 2 · Header · nav + menús desplegables ── */
.wf-nav{display:flex;align-items:center;gap:1.5rem}
.wf-menu-btn{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);padding:.4rem 0;transition:color .15s;white-space:nowrap}
.wf-menu-btn:hover,.wf-menu.open .wf-menu-btn{color:#4C6657}
.wf-menu{position:relative}
.wf-menu-btn .car{font-size:8px;opacity:.55;margin-left:1px}
.wf-drop{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:275px;background:var(--white);border:.5px solid rgba(201,185,154,.45);border-radius:5px;box-shadow:0 24px 48px -20px rgba(44,37,32,.35);padding:.8rem .9rem .9rem;display:none;z-index:140;text-align:left}
.wf-menu.open .wf-drop{display:block}
@media(hover:hover){.wf-menu:hover .wf-drop{display:block}}
.wf-drop-kick{font-family:var(--font-body);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);padding:.3rem .4rem .6rem;border-bottom:.5px solid var(--sand-light);margin-bottom:.4rem}
.wf-drop-item{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;font-family:var(--font-display);font-size:16.5px;font-weight:400;color:var(--dark);padding:.48rem .4rem;border-radius:9px;cursor:pointer;text-transform:none;letter-spacing:0}
a.wf-drop-item:hover{background:#F7F2E9}
.wf-drop-item .tag{font-family:var(--font-body);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);white-space:nowrap}
.wf-drop-item .tag.now{color:#4C6657}
.wf-drop-item.off{color:var(--taupe);cursor:default;opacity:.75}
.wf-drop-item.all{border-top:.5px solid var(--sand-light);margin-top:.45rem;padding-top:.75rem;border-radius:0;font-family:var(--font-body);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#4C6657}
a.wf-drop-item.all:hover{background:none;color:#3a5245}
@media(max-width:960px){.wf-nav{gap:1rem}}
@media(max-width:640px){}

/* ── 3 · Portadas del catálogo · marco blanco + lino real ──
   El mismo lenguaje de las portadas de "Nuestra Historia" (kora-versiones):
   recuadro blanco alrededor y tela de lino con textura real. La bisagra y el
   canto (::before/::after ya definidos) quedan DENTRO del marco. */
.k2new .k2-gcover{border-width:16px}
/* con el marco grueso, el interior respira: menos padding no — más aire alrededor del arte */
.k2new .k2-ck-frame{width:68%}
.k2new .k2-cover-keep,.k2new .k2-gcover.keep{
  background-color:#E4DFD6;
  background-image:
    linear-gradient(118deg, rgba(255,255,255,.06), rgba(0,0,0,.035) 62%),
    var(--lino);
  background-size:auto, 200px 200px;
  background-blend-mode:soft-light, overlay;
}

/* ═══════════════════════════════════════════════════════════════════════
   LANDING v3 · jul 2026 — hero angosto, pasos visuales, prueba v2,
   manifiesto a sangre, colecciones (4 tiles), FAQ, testimonios, footer,
   y la página Nosotros (s9).
   ═══════════════════════════════════════════════════════════════════════ */

/* secciones sin borde superior cuando no lo necesitan */
.lp-nb{border-top:none !important}

/* ── CÓMO FUNCIONA · pasos visuales ── */
.lp-step{text-align:center;position:relative}
.lp-step h4{font-family:var(--font-display);font-weight:500;font-size:21px;color:var(--dark);margin-bottom:.45rem}
.lp-step p{font-size:13.5px;line-height:1.7;color:var(--taupe);max-width:250px;margin:0 auto}

/* ── LA PRUEBA v2 · panel izquierdo + resultado derecho ── */
.lpt{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;margin-top:2.2rem;align-items:start}   /* el panel de preguntas se emparejó con la tarjeta: las pills y la pregunta abierta pedían ancho */
@media(max-width:900px){.lpt{grid-template-columns:1fr}}
.lpt-panel{background:#F7F2E9;border:.5px solid var(--sand-light);border-radius:18px;padding:1.5rem 1.4rem}
.lpt-kick{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--taupe);margin-bottom:.4rem}
.lpt-q{font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.1;color:var(--dark);margin-bottom:.8rem}
.lpt-q em{font-style:italic;color:var(--clay)}
.lpt-input{width:100%;font-family:var(--font-body);font-weight:300;font-size:14.5px;color:var(--dark);background:var(--white);border:.5px solid var(--sand-light);border-radius:12px;padding:.8rem .9rem;outline:none}
.lpt-input:focus{border-color:var(--clay)}
textarea.lpt-input{resize:vertical;min-height:56px;line-height:1.5}
.lpt-field{margin-top:1.15rem}
.lpt-field label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:.55rem}
.lpt-opt{font-size:9px;letter-spacing:.06em;color:#9E8E78;border:1px solid rgba(122,102,82,.3);border-radius:10px;padding:1px 6px;margin-left:6px;vertical-align:middle;text-transform:uppercase}
.lpt-count{font-size:10.5px;color:var(--taupe);margin-top:.4rem}
.lpt-panel .pills{display:flex;flex-wrap:wrap;gap:.4rem}
.lpt-panel .pill{font-family:var(--font-body);font-size:12px;color:var(--clay);background:var(--white);border:.5px solid var(--sand-light);border-radius:999px;padding:.4rem .7rem;cursor:pointer;transition:.15s;line-height:1.15}
.lpt-panel .pill:hover{border-color:var(--clay)}
.lpt-panel .pill.on{background:#4C6657;border-color:#4C6657;color:#FDFAF5}
.lpt-panel .pill.dim{opacity:.45}
.lpt-panel .btn-primary{margin-top:1.3rem}
/* resultado */
.lpt-result{min-height:420px}
.lpt-empty{display:flex;align-items:center;justify-content:center;min-height:420px;border:1.5px dashed var(--sand-light);border-radius:18px;color:var(--taupe);font-family:var(--font-display);font-size:19px;font-style:italic}
.lpt-book{background:var(--white);border:.5px solid var(--sand-light);border-radius:18px;padding:2rem 2.2rem;text-align:center;box-shadow:0 26px 54px -34px rgba(44,37,32,.35)}
.lpt-book-kick{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);margin-bottom:.5rem}
.lpt-book-title{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3vw,34px);color:var(--dark);margin-bottom:1.1rem}
.lpt-art{max-width:420px;margin:0 auto}
.lpt-art-img{width:100%;display:block;border-radius:4px}
.lpt-art-img.foto{border:8px solid #fff;box-shadow:0 14px 30px -18px rgba(44,37,32,.5)}
.lpt-art-ph{display:flex;align-items:center;justify-content:center;min-height:130px;background:none;border-radius:10px;color:var(--taupe);font-size:12.5px;font-style:italic;padding:1rem;flex-direction:column;gap:.4rem;text-align:center}
.lpt-styles{display:flex;justify-content:center;gap:.4rem;margin-top:.8rem}
.lpt-style{font-family:var(--font-body);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);background:none;border:.5px solid var(--sand-light);border-radius:999px;padding:.32rem .8rem;cursor:pointer;transition:.15s}
.lpt-verse{font-family:var(--font-display);font-size:17.5px;line-height:1.75;color:var(--dark);margin-top:1.4rem}
.lpt-verse p{margin-bottom:.9rem}
.lpt-ctrl{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.9rem;padding-top:.9rem;border-top:.5px solid var(--sand-light)}
.lpt-arrow{background:none;border:.5px solid var(--sand-light);border-radius:50%;width:26px;height:26px;color:var(--clay);cursor:pointer;line-height:1}
.lpt-arrow:disabled{opacity:.35;cursor:default}
.lpt-verlbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe)}
.lpt-sep{width:1px;height:14px;background:var(--sand-light)}
.lpt-regen{background:none;border:none;color:#4C6657;font-family:var(--font-body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.lpt-next{margin-top:1.2rem}

/* ── MANIFIESTO a sangre completa (sin esquinas redondeadas) ── */
.lp-mani-full{background:#F6F4F1;padding:4.4rem 1.4rem}   /* neutro, sin amarillo */
@media(max-width:760px){.lp-mani-full{padding:3rem 1.2rem}}

/* ── CTA band ── */
.lp-ctaband{text-align:center;padding:3rem 0 2.6rem;border-bottom:.5px solid var(--sand-light)}
.lp-ctaband .btn-primary{margin-top:1.2rem}

/* ── NUESTRAS COLECCIONES · 4 tiles ── */
.lp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.2rem}
@media(max-width:900px){.lp-tiles{grid-template-columns:1fr 1fr;gap:1.1rem}}
.lp-tile{display:block;cursor:pointer;text-decoration:none}
.lp-tile.off{cursor:default}
.lp-tile-img{aspect-ratio:1/1;background:#EFE9DD;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .2s}
.lp-tile:hover .lp-tile-img{transform:translateY(-3px)}
.lp-tile.off:hover .lp-tile-img{transform:none}
.lp-tile-img>img{width:100%;height:100%;object-fit:cover;display:block}
.lp-tile-kids{background:#F7F2E9;padding:14%}
.lp-tile-kids img{object-fit:contain;mix-blend-mode:multiply}
.lp-tile-link{display:inline-block;margin-top:.8rem;font-family:var(--font-body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dark);border-bottom:1px solid var(--dark);padding-bottom:2px}
.lp-tile-link em{font-style:normal;color:var(--sand);border:none;text-transform:none;letter-spacing:.04em}
.lp-tile.off .lp-tile-link{border-color:var(--sand-light);color:var(--clay)}
/* tile de extras: composición print + invitación */
.lp-tile-extras{background:#EDE6D6}
.lpx-print{position:absolute;left:12%;top:10%;width:52%;background:#fff;padding:7px 7px 20px;box-shadow:0 12px 26px -14px rgba(44,37,32,.45);transform:rotate(-3deg)}
.lpx-print img{width:100%;display:block}
.lpx-invite{position:absolute;right:10%;bottom:12%;width:44%;aspect-ratio:5/7;background:#FDFAF5;border:.5px solid var(--sand-light);box-shadow:0 12px 26px -14px rgba(44,37,32,.4);transform:rotate(4deg);display:flex;align-items:center;justify-content:center}
.lpx-invite span{font-family:var(--font-display);font-style:italic;font-size:clamp(13px,1.4vw,17px);color:var(--clay);text-align:center;line-height:1.3}

/* ── FAQ ── */
.lp-faq{max-width:680px;margin:2rem auto 0}
.lp-faq-item{border-bottom:.5px solid var(--sand-light)}
.lp-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:none;text-align:left;font-family:var(--font-display);font-weight:500;font-size:19px;color:var(--dark);padding:1.05rem 0;cursor:pointer}
.lp-faq-q span{font-family:var(--font-body);font-weight:300;font-size:18px;color:#4C6657;transition:transform .2s}
.lp-faq-item.open .lp-faq-q span{transform:rotate(45deg)}
.lp-faq-a{display:none;font-size:14px;line-height:1.8;color:var(--taupe);padding:0 1.6rem 1.2rem 0}
.lp-faq-item.open .lp-faq-a{display:block}

/* ── TESTIMONIOS ── */
.lp-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:980px;margin:2.2rem auto 0}
@media(max-width:760px){.lp-quotes{grid-template-columns:1fr}}
.lp-quote{background:var(--white);border:.5px solid var(--sand-light);border-radius:16px;padding:1.6rem 1.5rem;margin:0}
.lp-quote blockquote{font-family:var(--font-display);font-size:18px;line-height:1.55;color:var(--dark);margin:0 0 .9rem}
.lp-quote figcaption{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}

/* ── FOOTER ── */
.lp-footer{background:#EDE6D6;margin-top:3.4rem;padding:3.4rem 1.4rem 0}
.lp-footer-in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.6rem}
@media(max-width:820px){.lp-footer-in{grid-template-columns:1fr 1fr}}
.lpf-logo{font-family:var(--font-display);font-size:22px;font-weight:300;letter-spacing:.26em;color:var(--dark)}
.lpf-logo span{display:block;font-size:8px;font-family:var(--font-body);letter-spacing:.42em;color:var(--sand);margin-top:3px;text-transform:uppercase}
.lpf-brand p{font-family:var(--font-display);font-style:italic;font-size:15.5px;line-height:1.6;color:var(--clay);margin-top:1rem;max-width:280px}
.lpf-col h5{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);margin-bottom:.9rem;font-weight:400}
.lpf-col a{display:block;font-family:var(--font-body);font-weight:300;font-size:13.5px;color:var(--dark);margin-bottom:.55rem;cursor:pointer;text-decoration:none}
.lpf-col a:hover{color:#4C6657}
.lpf-legal{max-width:1160px;margin:0 auto;border-top:.5px solid rgba(122,102,82,.25);padding:1.1rem 0 1.4rem;font-size:11px;letter-spacing:.06em;color:var(--taupe)}

/* ── S9 · NOSOTROS ── */
#s9{background:var(--white);padding:3.4rem 0 4.4rem}
.nos-h1{font-family:var(--font-display);font-weight:300;font-size:clamp(32px,4.6vw,48px);text-align:center;color:var(--dark);margin:.4rem 0 1.6rem}
.nos-h1 em{font-style:italic;color:var(--clay)}
.nos-body{margin-top:1.8rem}
.nos-body p{font-family:var(--font-display);font-size:18.5px;line-height:1.8;color:var(--dark);margin-bottom:1.3rem}

/* ── DE UNAS PALABRAS, UN SPREAD · lo que ingresas → lo que recibes ── */
.lp-io{display:grid;grid-template-columns:.6fr auto 1.75fr;gap:1.5rem;align-items:center;max-width:1150px;margin:2.4rem auto 0}
@media(max-width:900px){.lp-io{grid-template-columns:1fr;gap:1.2rem}.lp-io-arrow{transform:rotate(90deg);justify-self:center}}
.lp-io-kick{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);margin-bottom:.7rem;text-align:center}
/* tarjeta de lo que ingresas (eco del panel de la prueba) */
.lp-io-card{background:#F7F2E9;border:.5px solid var(--sand-light);border-radius:16px;padding:1.2rem 1.1rem}
.lp-io-q{font-family:var(--font-display);font-weight:500;font-size:21px;color:var(--dark);margin-bottom:.7rem}
.lp-io-q em{font-style:italic;color:var(--clay)}
.lp-io-pills{display:flex;flex-wrap:wrap;gap:.35rem}
.lp-io-pills .pill{font-family:var(--font-body);font-size:11px;color:var(--clay);background:var(--white);border:.5px solid var(--sand-light);border-radius:999px;padding:.32rem .6rem;line-height:1.1}
.lp-io-pills .pill.on{background:#4C6657;border-color:#4C6657;color:#FDFAF5}
.lp-io-ans{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--clay);margin:.8rem 0 .8rem}
.lp-io-photo{position:relative;width:112px;transform:rotate(-2.5deg)}
.lp-io-photo img{width:100%;display:block;border:5px solid #fff;box-shadow:0 10px 22px -12px rgba(44,37,32,.5)}
.lp-io-photo span{display:block;text-align:center;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-top:.35rem}
/* flecha del motor */
.lp-io-arrow{text-align:center;color:var(--taupe)}
.lp-io-arrow .a{display:block;font-size:26px;color:#4C6657;line-height:1}
.lp-io-arrow .t{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin-top:.4rem;line-height:1.5}
/* el spread: dos páginas con lomo al centro */
.lp-spreadmock{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:3px;box-shadow:0 30px 60px -30px rgba(44,37,32,.55),0 4px 12px -6px rgba(44,37,32,.2);position:relative;aspect-ratio:2/1.24;overflow:hidden}
.lp-spreadmock::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:34px;transform:translateX(-50%);z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(44,37,32,0) 0%,rgba(44,37,32,.09) 42%,rgba(44,37,32,.16) 50%,rgba(44,37,32,.09) 58%,rgba(44,37,32,0) 100%)}
.lp-page{position:relative;background:#FDFAF5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7% 8% 10%}
.lp-page-head{font-family:var(--font-body);font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin-bottom:.8rem}
.lp-page-verse{font-family:var(--font-display);font-size:clamp(10px,1.06vw,13.5px);line-height:1.95;color:var(--dark);text-align:center;white-space:nowrap}
.lp-page-n{position:absolute;bottom:5%;left:0;right:0;text-align:center;font-family:var(--font-body);font-size:9px;color:var(--sand);letter-spacing:.1em}
.lp-page-art{padding:7%}
.lp-page-art img{max-width:100%;max-height:82%;display:block}

/* ═══ ajustes jul 2026 (ronda 4): pasos x4, bandas de tono, manifiesto-CTA, prueba ═══ */

/* pasos · 4 columnas, directo a lo visual */
.lp-step h4 .who{color:#4C6657;font-style:italic}

/* bandas de tono a sangre completa (para dividir secciones y que luzca el contenido) */
.lp-fullband{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-top:3.4rem;padding-bottom:3.6rem}   /* taupe/elefante (ref. MILK Books) — acento neutro en muestra y prueba */
.lp-tone1 .lp-io-card{background:var(--white)}
.lp-tone2 .lpt-panel{background:#fff}
.lp-tone1 .lp-sec-lead,.lp-tone2 .lp-sec-lead{color:#6E655C}
.lp-tone1 .lp-io-kick,.lp-tone2 .lp-io-kick{color:#6E655C}

/* manifiesto: el CTA sustituye a la palabra KORA */
.lp-mani-cta{margin-top:2.1rem}
.lpt-more{background:none;border:none;color:#4C6657;font-family:var(--font-body);font-size:11px;letter-spacing:.06em;text-decoration:underline;cursor:pointer;padding:.35rem .2rem;align-self:center}

/* ═══ ronda 5 · sage para detalles, prueba pulida, editor con más contraste ═══ */

/* tercer verde: sage (detalles que no deben competir con el texto) + sage claro (líneas/fondos) */
:root{--sage-light:#C7D3C5}
.lp-step h4 .who{color:var(--sage)}
.lp-io-arrow .a{color:var(--sage)}
.lp-faq-q span{color:var(--sage)}
.lpt-more{color:var(--sage)}
.lpt-regen{color:var(--sage)}
.lp-mani-rule{background:var(--sage)}

/* prueba: input del nombre con las mismas esquinas que el textarea */
.lpt-input,input.lpt-input,textarea.lpt-input{appearance:none;-webkit-appearance:none;border-radius:12px}
#lpTry .lp-drop{border-radius:12px}
/* la foto original del usuario, visible en el panel */
.lpt-thumb{width:170px;height:170px;object-fit:cover;border-radius:12px;display:block;margin:0 auto .65rem;border:5px solid #fff;box-shadow:0 12px 26px -14px rgba(44,37,32,.5)}

/* editores (todos): fondo gris cálido más oscuro · libro más blanco, para que resalte */
.spread{background:#FDFCF8;border-color:#E9E2D4}
.spread.kids{background:#FDFCF8;border-color:#E9E2D4}

/* prueba: verso editable, con la misma línea punteada del editor */
.lpt-verse-edit{border:1px dashed transparent;border-radius:10px;padding:.4rem .7rem;transition:border-color .15s,background .15s;cursor:text}
.lpt-verse-edit:hover{border-color:rgba(122,102,82,.30);background:rgba(255,255,255,.5)}
.lpt-verse-edit:focus{outline:none;border-color:rgba(122,102,82,.5);background:rgba(255,255,255,.7)}

/* ═══ header en celular: el texto se hace más chico para que todo quepa ═══ */
@media(max-width:640px){
  .wf-head-in{padding:.55rem .8rem;gap:.5rem}
  .wf-steps{display:none}   /* aunque esté invisible, reservaba espacio y empujaba el header */
  .wf-logo{font-size:16px;letter-spacing:.2em}
  body.kids-mode .wf-logo .kk-kora,body.kids-mode .wf-logo .kk-kids{font-size:16px}
  .wf-nav{gap:.55rem}
  .wf-menu-btn{font-size:9px;letter-spacing:.09em;padding:.3rem 0}
  .wf-menu-btn .car{font-size:7px}
  .wf-session{font-size:11px;gap:.4rem}
  .wf-login{padding:.22rem .55rem;font-size:9.5px}
  /* en celular el menú se ancla al ancho de la pantalla (no al botón) */
  .wf-drop{position:fixed;left:12px;right:12px;top:52px;transform:none;min-width:0}
  .wf-drop-item{font-size:15px}
}
@media(max-width:400px){
  .wf-logo{font-size:14px;letter-spacing:.16em}
  .wf-nav{gap:.45rem}
  .wf-menu-btn{font-size:8.5px;letter-spacing:.07em}
}

/* ═══ ronda móvil · legibilidad del hero, muestra y spread apilado ═══ */

/* hero en celular: velo de crema fuerte arriba (donde vive el texto) y foto hacia abajo */
@media(max-width:820px){
  .lp-h1{font-size:clamp(29px,8.4vw,40px)}
  .lp-sub{max-width:21rem}
}

/* muestra: la foto recta, aprovechando el ancho */
.lp-io-photo{transform:none;width:100%;max-width:250px}
.lp-io-photo span{text-align:left;padding-left:2px}

/* flecha del motor en móvil: solo gira la flecha, el texto queda derecho */
@media(max-width:900px){
  .lp-io-arrow{transform:none;display:flex;align-items:center;justify-content:center;gap:.6rem}
  .lp-io-arrow .a{transform:rotate(90deg);display:inline-block}
  .lp-io-arrow .t{margin-top:0}
  .lp-io-arrow .t br{display:none}
}

/* spread en celular: las dos páginas se apilan y el verso respira */
@media(max-width:700px){
  .lp-spreadmock{grid-template-columns:1fr;aspect-ratio:auto}
  .lp-spreadmock::before{display:none}
  .lp-page{padding:1.9rem 1.5rem 2.5rem}
  .lp-page+.lp-page{border-top:.5px solid var(--sand-light)}
  .lp-page-art{padding:1.4rem 1.4rem 2.4rem}
  .lp-page-art img{max-height:none;max-width:86%}
  .lp-page-n{bottom:.7rem}
}

/* muestra: la tarjeta de entrada compacta (el spread es el protagonista) */
.lp-io-card{padding:1rem .95rem}
.lp-io-q{font-size:18px}
.lp-io-pills .pill{font-size:10.5px;padding:.28rem .55rem}
.lp-io-ans{font-size:13.5px}
.lp-io-photo{max-width:210px}
@media(max-width:700px){.lp-page-verse{white-space:normal;font-size:15px;line-height:1.9}}

/* prueba: título editable + botón de compartir */
.lpt-book-title[contenteditable]{border:1px dashed transparent;border-radius:10px;padding:.15rem .6rem;transition:border-color .15s,background .15s;cursor:text;display:inline-block}
.lpt-book-title[contenteditable]:hover{border-color:rgba(122,102,82,.30);background:rgba(255,255,255,.4)}
.lpt-book-title[contenteditable]:focus{outline:none;border-color:rgba(122,102,82,.5);background:rgba(255,255,255,.6)}
.lpt-share{margin-top:1rem}
.lpt-sharebtn{background:none;border:1px solid var(--sage);color:#4C6657;font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:.55rem 1.2rem;cursor:pointer;transition:.15s}
.lpt-sharebtn:hover{background:#4C6657;border-color:#4C6657;color:#FDFAF5}

/* ═══ colecciones · limpieza y jerarquía (ago 2026) ═══ */

/* portadas SIN bisagra/canto: recuadro blanco limpio, como las trabajadas de Nuestra Historia */
/* bisagra y canto REACTIVADOS (petición de Vivi, 16 ago) */

/* hero de colección: banda LINO a todo lo ancho (más oscura que el resto de la
   página, para que se lea el cambio de sección) — compacta, para que en iPad
   alcancen a verse los títulos de abajo. Sin ficha técnica: esa vive en el detalle. */
.k2new .k2-hero{margin:.4rem calc(50% - 50vw) 0;background:var(--linen-dark,#EDE6D6);padding:2rem calc(50vw - 50%) 1.9rem}
.k2new .k2-hero-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.4rem;align-items:center;max-width:920px;margin:0 auto}
@media(max-width:780px){.k2new .k2-hero{padding-top:1.8rem;padding-bottom:2rem}.k2new .k2-hero-in{grid-template-columns:1fr;gap:1.3rem;max-width:400px}}
.k2new .k2-hero .k2-gcover{cursor:pointer;max-width:250px;margin:0 auto;width:100%}
.k2new .k2-hero-r .k2-dtitle{font-size:clamp(26px,2.6vw,33px)}
.k2new .k2-hero-r .k2-dsub{font-size:17px;margin-top:6px}
.k2new .k2-hero-r .k2-ddesc{margin-top:12px;font-size:14px;line-height:1.6;max-width:52ch}
.k2new .k2-hero-r .k2-dcta{margin-top:18px}
/* debajo de la banda: el resto respira en el fondo claro de la página */
.k2new .k2-grid-head{margin-top:2.6rem}
.k2new .k2-grid-head{margin:3.2rem 0 -1.2rem;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--k2-sand);text-align:center}

/* s8: las portadas usan EXACTAMENTE el patrón .nhv-scope de kora-versiones.css
   (reglas #s8 viejas eliminadas — hacían que s8 se viera distinto del landing) */

/* páginas de colección: encabezado compacto para que el hero y los títulos quepan a la vista */
#s5 .k2-lede{font-size:14.5px}

/* hero de colección v2: la banda ES el encabezado de la página */
#s5 .k2-back{margin-bottom:4px}
.k2new .k2-hero-cap{text-align:center;margin-top:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--k2-taupe);cursor:pointer}
.k2new .k2-hero-cap span{color:var(--k2-ok)}
.k2new .k2-hero-r .k2-dtitle{font-family:'Cormorant Garamond',serif;font-weight:500}
.k2new .k2-hero-r .k2-dtitle em{font-style:italic;color:var(--k2-taupe)}

/* ═══ colecciones · frescura: banda lino continua arriba, títulos sobre blanco ═══ */
#s5{background:var(--white,#FDFAF5)}   /* la página respira en blanco cálido */
/* la tira del "‹ El catálogo": chaparra y del MISMO lino que la banda (un solo bloque) */
#s5.k2-has-hero .k2wrap{padding-top:0}
#s5.k2-has-hero .k2-back{display:block;width:100vw;box-sizing:border-box;text-align:left;margin:0 calc(50% - 50vw) 0;padding:22px calc(50vw - 50%) 4px;background:var(--linen-dark,#EDE6D6);font-size:13.5px}
#s5.k2-has-hero .k2-hero{margin-top:0;padding-top:1.5rem}
/* la portada-ejemplo: recuadro blanco CUADRADO y más grande, para lucirse */
.k2new .k2-hero-in{grid-template-columns:1fr 1.05fr;gap:2.6rem}
.k2new .k2-hero .k2-gcover{aspect-ratio:1/1;max-width:390px}
/* "Todos los títulos": más presente */
.k2new .k2-grid-head{font-size:14.5px;font-weight:500;letter-spacing:.3em;color:var(--k2-ink)}

/* ═══ portadas Keepsake pulidas (Kids se queda en su vertical original:
   las acuarelas trabajadas lucen más así — formato cuadrado en evaluación) ═══ */
/* keepsake: "Nuestra Historia" en UN renglón y la acuarela interior más grande */
.k2new .k2-gcover.keep .gk-title{font-size:21px;white-space:nowrap}

/* ═══ colecciones en CELULAR: nada de dos columnas — se apila con jerarquía:
   kicker y título primero, la portada al centro, la explicación y el botón después ═══ */
@media(max-width:780px){
  .k2new .k2-hero-in{display:flex;flex-direction:column;gap:.4rem;max-width:420px;margin:0 auto}
  .k2new .k2-hero-l,.k2new .k2-hero-r{display:contents}
  .k2new .k2-hero-r .k2-dkick{order:1;text-align:center}
  .k2new .k2-hero-r .k2-dtitle{order:2;text-align:center;margin-bottom:.5rem}
  .k2new .k2-hero-cap{order:4;margin-top:10px}
  .k2new .k2-hero-r .k2-ddesc{order:5;margin-top:14px;text-align:left;font-size:13.5px}
  .k2new .k2-hero-r .k2-dcta{order:6;margin-top:16px;justify-content:center}
  .k2new .k2-hero-r .k2-dcta .k2-btn-primary{width:100%;max-width:340px}
}

/* ═════════ Prueba · estados de carga: "escribiendo…" y blob "pintando…" ═════════ */
.lpt-writing{display:flex;align-items:center;justify-content:center;gap:.15rem;
  padding:1.4rem .5rem;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.08rem;color:var(--taupe,#9E8E78)}
.lpt-writing.sm{display:inline-flex;padding:0;font-family:'Jost',sans-serif;
  font-style:normal;font-size:12.5px;letter-spacing:.02em;color:var(--taupe,#9E8E78)}
.lpt-dots{font-style:normal}
.lpt-dots::after{content:'…';display:inline-block;overflow:hidden;vertical-align:bottom;
  width:0;animation:lptDots 1.3s steps(4,end) infinite}
@keyframes lptDots{to{width:1.15em}}
.lpt-verse-edit.busy{opacity:.35;pointer-events:none;transition:opacity .3s ease}
.lpt-paint{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:2.2rem 1rem}
.lpt-blob{width:58px;height:58px;flex:0 0 auto;
  background:radial-gradient(circle at 32% 30%,var(--sage-light,#C7D3C5),var(--sage,#8A9E8C) 68%,#7A9080);
  border-radius:52% 48% 55% 45%/48% 55% 45% 52%;opacity:.85;
  animation:lptBlob 3.4s ease-in-out infinite}
@keyframes lptBlob{
  0%,100%{border-radius:52% 48% 55% 45%/48% 55% 45% 52%;transform:scale(1) rotate(0deg)}
  33%{border-radius:44% 56% 47% 53%/56% 44% 53% 47%;transform:scale(1.07) rotate(4deg)}
  66%{border-radius:56% 44% 53% 47%/44% 56% 47% 53%;transform:scale(.95) rotate(-4deg)}}

/* ═════════ Prueba · retoques: texto DENTRO del blob + recuadro del retrato con color propio ═════════ */
/* El estado vacío ("Aquí aparecerá su historia") ya no es un marco punteado invisible:
   es una tarjeta blanca — el mismo papel del retrato — que se distingue de la banda. */
.lpt-empty{flex-direction:column;gap:.7rem;background:#F7F2E9;
  border:.5px solid var(--sand-light,#EDE6D6);border-radius:18px;
  box-shadow:0 20px 44px -34px rgba(44,37,32,.25);color:var(--taupe,#9E8E78)}
.lp-tone2 .lpt-empty{background:#fff;border-color:#DDD8D2;color:var(--taupe,#9E8E78)}
.lpt-empty .lpt-book-kick{margin-bottom:0}
.lpt-empty-msg{font-family:var(--font-display,'Cormorant Garamond',serif);font-style:italic;font-size:19px}
/* El "Pintando la acuarela…" vive DENTRO del blob */
.lpt-blob{width:158px;height:158px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1.1rem;box-sizing:border-box}
.lpt-blob-txt{font-family:'Jost',sans-serif;font-style:normal;font-size:12px;letter-spacing:.05em;
  line-height:1.45;color:#FDFAF5;text-shadow:0 1px 6px rgba(44,37,32,.18)}
.lpt-nw{white-space:nowrap}

/* ═════════ Pills con "otras opciones" (quiz de semilla y panel del editor) ═════════ */
.pill-more{background:none;border:none;color:#4C6657;font-family:var(--font-body,'Jost',sans-serif);
  font-size:11px;letter-spacing:.06em;text-decoration:underline;cursor:pointer;
  padding:.35rem .2rem;align-self:center}
.pill-more:hover{color:var(--dark,#2C2520)}

/* ═════════ Cuenta · ojito de contraseña + errores con causa ═════════ */
.auth-pass-wrap{position:relative}
.auth-pass-wrap .auth-input{width:100%;padding-right:46px;box-sizing:border-box}
.auth-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--taupe,#9E8E78);
  padding:6px;display:flex;align-items:center;justify-content:center}
.auth-eye svg{width:20px;height:20px}
.auth-eye:hover{color:var(--dark,#2C2520)}
.auth-err a{color:inherit;text-decoration:underline;cursor:pointer;font-weight:500}
.auth-err-det{display:block;margin-top:.3rem;font-size:11px;opacity:.75;font-style:italic}

/* ═════════ Portada del editor Kids · afinación (ago 2026) ═════════ */
/* 1) Sin rectángulo de spread detrás de la portada (gana a #s2 .spread) */
#s2 .spread.kidscover, .spread.kidscover{background:transparent;border:none;box-shadow:none}
.spread.kidscover .pg{background:transparent;box-shadow:none}
/* 2) Aire arriba y abajo: la portada no topa con la línea de capítulos */
.spread.kidscover .pg.kcover-pg{padding:2.6rem 0 2.8rem}
/* 3) Proporción ligeramente MENOS vertical (antes 3/4) */
.kcover{aspect-ratio:10/12.2;max-width:452px}
/* 4) Título más grande */
/* 5) Bisagra del hardcover: la segunda línea oscura, mucho más ligera */
.kcover:not(.kcover-interior)::before{
  background:linear-gradient(90deg,
    rgba(52,42,26,.20) 0%, rgba(52,42,26,.08) 14%, rgba(255,252,244,.16) 34%,
    rgba(120,100,70,.04) 52%, rgba(40,32,20,.10) 74%, rgba(40,32,20,.03) 89%, rgba(40,32,20,0) 100%);
}

/* ═════════ Portadilla interior Kids: un paso más grande + KORA·KIDS con aire ═════════ */
.kcover-interior .kcov-label{font-size:10px;letter-spacing:.24em;margin-bottom:1.8rem}
.kcover-interior .kcov-art{width:62%;max-height:46%;margin:.2rem auto .7rem}
.kcover-interior .kcov-sub{font-size:clamp(12px,1.35vw,14.5px);margin-top:.3rem}

/* ═════════ Texto agrandado del sistema (iPad/iPhone): proporciones a salvo ═════════
   Safari "infla" textos sueltos cuando el usuario tiene letra grande en su sistema,
   y eso desproporciona el layout (unos textos crecen y sus cajas no). Con esto la
   página se ve igual de proporcionada en todos los equipos; quien necesite letra
   más grande puede usar el zoom de página completo (menú aA), que escala TODO parejo. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ═════════ Precio "desde" en el detalle del título (s6) ═════════ */
.k2-detail-price{font-family:var(--font-body,'Jost',sans-serif);font-size:13px;color:var(--clay,#7A6652);
  line-height:1.55;margin:.9rem 0 0}
.k2-detail-price b{color:var(--dark,#2C2520);font-weight:600}
.k2-detail-price span{display:block;font-size:11.5px;color:var(--taupe,#9E8E78);margin-top:.15rem}

/* ═════════ Landing · sección "Precios claros" ═════════ */
#lpPrecios .lp-price-row, #lpLibros .lp-price-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:820px;margin:2rem auto 0}
@media(max-width:700px){#lpPrecios .lp-price-row, #lpLibros .lp-price-row{grid-template-columns:1fr;max-width:420px}}
.lp-price-card{background:var(--white,#FDFAF5);border:.5px solid var(--sand-light,#EDE6D6);border-radius:18px;
  padding:1.6rem 1.7rem 1.4rem;box-shadow:0 22px 46px -34px rgba(44,37,32,.3);text-align:left}
.lpp-kick{font-family:var(--font-body,'Jost',sans-serif);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--taupe,#9E8E78);margin-bottom:.25rem}
.lpp-name{font-family:var(--font-display,'Cormorant Garamond',serif);font-weight:500;
  font-size:22px;color:var(--dark,#2C2520);margin-bottom:1rem}
.lpp-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.55rem 0;border-top:.5px solid var(--sand-light,#EDE6D6);
  font-family:var(--font-body,'Jost',sans-serif);font-size:13.5px;color:var(--clay,#7A6652)}
.lpp-line b{font-size:14.5px;color:var(--dark,#2C2520);font-weight:600;white-space:nowrap}
.lpp-line.lpp-pdf{color:var(--taupe,#9E8E78)}
.lpp-line.lpp-pdf b{color:var(--clay,#7A6652);font-weight:500}
.lp-price-notes{max-width:640px;margin:1.8rem auto 0;text-align:left}
.lp-price-notes p{font-family:var(--font-display,'Cormorant Garamond',serif);font-size:16px;
  color:var(--clay,#7A6652);line-height:1.55;margin:.45rem 0}
.lp-price-notes b{color:var(--dark,#2C2520);font-weight:600}
/* "Dos maneras de contarla": descripción y CTA en las tarjetas Kids/Keepsake */
.lpp-desc{font-family:var(--font-display,'Cormorant Garamond',serif);font-size:15.5px;line-height:1.55;
  color:var(--clay,#7A6652);margin:0 0 1.1rem}
.lpp-desc b{color:var(--dark,#2C2520);font-weight:600}
.lpp-cta{display:inline-block;margin-top:1rem;font-family:var(--font-body,'Jost',sans-serif);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#4C6657;
  text-decoration:underline;cursor:pointer}
.lpp-cta:hover{color:var(--dark,#2C2520)}
/* tarjetas Kids/Keepsake: portada tipo + mini-ficha de especificaciones */
.lpp-cover{display:flex;justify-content:center;margin:.3rem 0 1.15rem}
.lpp-cover>img{height:158px;width:auto;border-radius:3px;
  box-shadow:0 16px 30px -18px rgba(44,37,32,.55)}
.lpp-specs{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;margin:0 0 1.15rem}
.lpp-specs i{display:block;font-style:normal;font-family:var(--font-body,'Jost',sans-serif);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe,#9E8E78);margin-bottom:.1rem}
.lpp-specs b{font-family:var(--font-display,'Cormorant Garamond',serif);font-size:15.5px;
  color:var(--dark,#2C2520);font-weight:500}
/* portadas TIPO con formato real de portada (título · subtítulo · arte · Kora) */
.lpp-gcov{width:152px;aspect-ratio:3/4;border-radius:2px;display:flex;flex-direction:column;
  align-items:center;padding:10px 10px 8px;box-sizing:border-box;text-align:center;
  box-shadow:0 16px 30px -18px rgba(44,37,32,.55)}
/* Kids: hueso de cuento — kick arriba, arte grande, título Grandstander, subtítulo */
.lpp-gcov.kids{background:#F6F3EE}
.lpp-gcov.kids .k{font-family:var(--font-body,'Jost',sans-serif);font-size:7.5px;letter-spacing:.24em;color:#9E8E78;margin:2px 0 5px}
.lpp-gcov.kids .art{flex:1;width:88%;display:flex;align-items:center;justify-content:center;min-height:0}
.lpp-gcov.kids .art img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lpp-gcov.kids .t{font-family:'Grandstander','Jost',sans-serif;font-weight:700;font-size:13.5px;line-height:1.05;color:#6b5a45;margin-top:5px}
.lpp-gcov.kids .t b{font-weight:700}
.lpp-gcov.kids .s{font-family:var(--font-body,'Jost',sans-serif);font-size:8px;color:#4C6657;margin:3px 0 2px;letter-spacing:.02em}
/* Keepsake: lino — título arriba, subtítulo, acuarela enmarcada, Kora abajo */
.lpp-gcov.keep{background:linear-gradient(118deg,rgba(255,255,255,.07),rgba(0,0,0,.04) 62%),#E4DFD6}
.lpp-gcov.keep .t{font-family:var(--font-display,'Cormorant Garamond',serif);font-weight:600;font-size:14.5px;color:#5d4c3b;margin-top:4px}
.lpp-gcov.keep .s{font-family:var(--font-body,'Jost',sans-serif);font-size:8px;color:#7A6652;margin:3px 0 0;letter-spacing:.02em}
.lpp-gcov.keep .fr{width:62%;aspect-ratio:1/1;background:#fff;padding:4px;box-sizing:border-box;display:flex;margin:auto 0;box-shadow:0 5px 12px -9px rgba(44,37,32,.4)}
.lpp-gcov.keep .fr img{width:100%;height:100%;object-fit:contain;display:block}
.lpp-gcov.keep .k{font-family:var(--font-display,'Cormorant Garamond',serif);font-size:9px;letter-spacing:.14em;color:#8d7c65;margin-top:auto}

/* ═════════ Detalle · "El recorrido" (capítulos de Nuestra Historia) ═════════ */
.k2-arc{margin-top:1.6rem;padding-top:1.3rem;border-top:.5px solid var(--sand-light,#EDE6D6);text-align:left}
.k2-arc-kick{font-family:var(--font-body,'Jost',sans-serif);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--taupe,#9E8E78);margin-bottom:.75rem}
/* Kids: lista numerada sencilla */
.k2-arc-list{list-style:none;counter-reset:arc;margin:0;padding:0}
.k2-arc-list li{counter-increment:arc;font-family:var(--font-display,'Cormorant Garamond',serif);
  font-size:16px;color:var(--dark,#2C2520);line-height:1.45;padding:.28rem 0 .28rem 1.9rem;position:relative}
.k2-arc-list li::before{content:counter(arc);position:absolute;left:0;top:.36rem;width:1.25rem;height:1.25rem;
  border:1px solid var(--sand,#C9B99A);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body,'Jost',sans-serif);font-size:9.5px;color:var(--clay,#7A6652)}
.k2-arc-list li span{font-family:var(--font-body,'Jost',sans-serif);font-size:11.5px;color:var(--taupe,#9E8E78)}
.k2-arc-list li.k2-arc-kid{color:#4C6657}
/* Keepsake: actos con sus capítulos */
.k2-arc-acts div{padding:.45rem 0;border-bottom:.5px dashed var(--sand-light,#EDE6D6)}
.k2-arc-acts div:last-child{border-bottom:none}
.k2-arc-acts i{display:block;font-family:var(--font-display,'Cormorant Garamond',serif);font-style:italic;
  font-size:15px;color:var(--clay,#7A6652);margin-bottom:.15rem}
.k2-arc-acts span{font-family:var(--font-body,'Jost',sans-serif);font-size:12.5px;line-height:1.6;color:var(--dark,#2C2520)}

/* ── s10 · Cómo funciona: pasos editoriales (referencia Artifact Uprising) ── */
.howto-step{text-align:center;padding:2.8rem 0 1.4rem}
.howto-kick{font-family:var(--font-body);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin:0}
.howto-title{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,38px);color:var(--dark);margin:.4rem 0 .7rem}
.howto-text{font-family:var(--font-display);font-size:17.5px;line-height:1.6;color:var(--clay);max-width:600px;margin:0 auto 1.9rem}
.howto-visual{margin:0 auto}
.howto-visual>img{width:100%;display:block;box-shadow:0 0 0 1px rgba(44,37,32,.08)}
.lp-more{text-align:center;margin-top:1.6rem}
.lp-more-link{font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#4C6657;cursor:pointer;border-bottom:1px solid rgba(76,102,87,.35);padding-bottom:2px}
.lp-more-link:hover{color:#3a5245;border-color:#3a5245}

/* ── s5 Kids · banda con fondo de hojas en acuarela + tarjeta blanca ── */
.k2new .k2-hero.k2-hero-kids{background:url('/img/fondos/kids-fondo-hojas.jpg') center/cover no-repeat}
.k2new .k2-hero-kids .k2-hero-in{background:#fff;box-shadow:0 0 0 1px rgba(44,37,32,.08);padding:2rem 2.4rem;border-radius:2px}
@media(max-width:780px){.k2new .k2-hero-kids .k2-hero-in{padding:1.4rem 1.2rem}}
#s5.k2-s5-kids{background:#EAE0CC}

/* ── trial · navegación entre tandas de recuerdos ── */
.lpt-setnav{display:inline-flex;align-items:center;gap:7px;margin-left:8px;vertical-align:middle;font-family:var(--font-body);font-size:10.5px;letter-spacing:.06em;color:var(--taupe)}
.lpt-setnav .sn{border:.5px solid var(--sand-light);background:#fff;border-radius:5px;width:22px;height:22px;line-height:1;cursor:pointer;color:var(--clay);font-size:13px;padding:0}
.lpt-setnav .sn:hover:not(:disabled){background:#F7F2E9}
.lpt-setnav .sn:disabled{opacity:.35;cursor:default}

/* ── s6 · breadcrumb editorial (referencia AU) + detalle más compacto ── */
.k2new .k2-crumbs{font-family:var(--font-body);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--k2-taupe);padding:2px 0 14px}
.k2new .k2-crumbs a{color:var(--k2-taupe);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(158,142,120,.45)}
.k2new .k2-crumbs a:hover{color:var(--clay,#7A6652)}
.k2new .k2-crumbs .sep{margin:0 8px;color:var(--sand-light,#DDD0B8)}
.k2new .k2-crumbs b{font-weight:500;color:var(--k2-ink,#2C2520)}
#s6 .k2wrap{padding-top:12px}
/* ficha compacta: los 4 datos en 2 columnas y respiros más cortos */
.k2new .k2-dfeat{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:16px 0 0}
/* 11 sep 2026 · Vivi, desde el iPhone: "la descripción se siente muy pegada a
   lo que sigue; necesita aire".
   Es el único párrafo en prosa de toda la ficha —lo que este libro ES— y abajo
   tenía dieciséis píxeles y en seguida una línea divisoria con la lista de
   datos. Una raya tan cerca lo empuja hacia arriba y lo convierte en el pie del
   título en vez de en su propio párrafo. Se le da el aire por los dos lados y
   un renglón un poco más suelto: en un teléfono ese párrafo se lee entero de
   una vez, y necesita poder respirar. */
.k2new .k2-ddesc{ line-height:1.72; margin-top:20px }
.k2new .k2-dfeat{ margin-top:34px }
@media(max-width:900px){
  .k2new .k2-ddesc{ margin-top:16px }
  .k2new .k2-dfeat{ margin-top:30px }
}
.k2new .k2-dfeat li{padding:10px 0;font-size:13px;gap:11px}
@media(max-width:640px){.k2new .k2-dfeat{grid-template-columns:1fr}}
.k2-detail-price{margin-top:.7rem}
.k2-arc{margin-top:1.2rem;padding-top:1.1rem}

/* ── ronda 15 ago: semilla en arena, íconos de estilo, opcionales, kids cuadrado ── */
#s7{background:#F5F0E8}
/* Vacía no se dibuja. El contador de las tres palabras («2 de 3») usa esta
   misma etiqueta, y mientras no hayas tocado ninguna se veía como un anillito
   suelto al lado de la pregunta. */
.pq-opt:empty{display:none}
.pq-opt{font-family:var(--font-body);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe,#9E8E78);border:.5px solid var(--sand-light,#DDD0B8);border-radius:5px;padding:1px 6px;vertical-align:1px;white-space:nowrap}
.pq-photos-note{font-family:var(--font-body);font-size:11.5px;color:var(--taupe,#9E8E78);margin:.2rem 0 .55rem;line-height:1.45}
/* La regla vieja del formato cuadrado de Kids. Se queda solo por si alguien
   revierte el cambio de formato; en celular NO aplica: ahí las páginas se
   apilan igual que en Keepsake. */
@media(min-width:761px){ }

/* ── colecciones (s5): banda pegada al header, portada libre, arena menos cálida ── */
#s5 .k2-back{display:none}
#s5 .k2wrap{padding-top:0}
.k2new .k2-hero{margin-top:0}
.k2new .k2-hero-keep{background:url('/img/fondos/keepsake-fondo-nubes.jpg') center/cover no-repeat}
.k2new .k2-hero-keep .k2-hero-in{background:#fff;box-shadow:0 0 0 1px rgba(44,37,32,.08);padding:2rem 2.4rem;border-radius:2px}
.k2new .k2-hero .k2-gcover,.k2new .k2-hero .kk-cover{max-width:300px}
.k2new .k2-hero-cap-r{text-align:left;margin:16px 0 0}
.k2new .k2-grid-head{font-size:19px;letter-spacing:.24em;color:var(--k2-ink,#2C2520)}
.kk-title{font-size:clamp(19px,2.6vw,24px)}
#s5.k2-has-hero .k2-back{display:none}

/* ── colecciones v3: héroe más alto y portada insignia protagonista ── */
.k2new .k2-hero{padding-top:3.2rem;padding-bottom:3.4rem}
/* Kids: la portada del héroe SIN recuadro — solo el arte y su título, más grande */
.k2new .k2-hero .k2-gcover.kids .gk-ktitle{font-size:34px;color:var(--k2-ink,#2C2520);margin-top:12px}
.k2new .k2-hero .k2-gcover.kids .gk-ktitle b{color:var(--k2-ink,#2C2520)}
/* Keepsake: mantiene su formato vertical con lino, solo más grande */
/* grid: títulos EN portada más grandes; abajo, detalle crecido sin título repetido */
.k2new .k2-gcover.kids .gk-ktitle{font-size:19px}
.k2new .k2-gcover.keep .gk-title{font-size:31px}
.k2new .k2-gsub{font-size:15px;font-style:italic;margin-top:4px}
/* móvil: 1 portada por renglón, mismas proporciones; héroe apilado */
@media(max-width:640px){
  .k2new .k2-grid{grid-template-columns:1fr;gap:30px;max-width:340px;margin-left:auto;margin-right:auto}
  .k2new .k2-hero .k2-gcover.kids,.k2new .k2-hero .k2-gcover.keep{max-width:300px}
  .k2new .k2-hero{padding-top:2rem;padding-bottom:2.2rem}
  .k2new .k2-hero .k2-gcover.kids .gk-ktitle{font-size:26px}
}

/* ── colecciones v4 ── */
/* héroe: sin mat blanco (la portada directa sobre la tarjeta) */
.k2new .k2-hero .k2-gcover{border:0}
/* kids héroe: la portada recupera su "libro" (fondo + sombra) */
.k2new .k2-hero .k2-gcover.kids{background:#F6F3EE;box-shadow:0 24px 50px -26px rgba(44,37,32,.45);padding:24px 16px 20px;max-width:360px;border-radius:3px}
.k2new .k2-hero .k2-gcover.kids .gk-kick{display:block;font-size:9.5px}
.k2new .k2-hero .k2-gcover.kids .gk-ktitle{font-size:29px}
/* keepsake héroe: vertical, título en 2 renglones, todo más cargado abajo, imagen mayor */
.k2new .k2-hero .k2-gcover.keep{max-width:340px;padding:11% 8% 6%}
.k2new .k2-hero .k2-gcover.keep .gk-title{font-size:33px;max-width:7ch;margin:0 auto}
.k2new .k2-hero .k2-gcover.keep .gk-sub{font-size:16px;margin-top:9px}
.k2new .k2-hero .k2-gcover.keep .gk-frame{width:74%;margin:9% auto 5%}
.k2new .k2-hero .k2-gcover.keep .gk-kora{margin-top:auto;font-size:11px}
/* grid kids: imagen un poco más chica, título más grande */
#k2Grid .k2-gcover.kids .gk-art{width:72%}
#k2Grid .k2-gcover.kids .gk-ktitle{font-size:22px;margin-top:12px}
/* meta bajo la portada: solo el detalle, legible y sin itálica */
.k2new .k2-gsub{font-style:normal;font-size:15px;color:var(--k2-ink,#2C2520);line-height:1.45;max-width:34ch}
.k2new .k2-gcard{cursor:pointer}
/* keepsake héroe: SIEMPRE vertical (anula el 1/1 heredado del diseño viejo) */
.k2new .k2-hero .k2-gcover.keep{aspect-ratio:680/822}
/* kids = formato CUADRADO en todas sus portadas; keepsake héroe con más aire */
/* kids vuelve al 3/4 del resto (grids mezclados se ven parejos) */
.k2new .k2-hero .k2-gcover.keep{max-width:310px}
.k2new .k2-hero .k2-gcover.keep .gk-title{font-size:30px}
.k2new .k2-hero .k2-gcover.keep .gk-sub{font-size:15px}
.k2new .k2-hero .k2-gcover.keep .gk-frame{width:70%}


/* ── PATRÓN NH replicado en todas las portadas (aprobado por Vivi, 17 ago) ── */
/* kids: título+sub arriba, arte centro, KORA·KIDS abajo */
.k2new .k2-gcover.kids{padding:16px 12px 12px}
.k2new .k2-gcover.kids .gk-subk{font-family:var(--font-body,'Jost',sans-serif);font-size:clamp(9px,1vw,11.5px);color:#4C6657;margin-top:4px;text-align:center;line-height:1.25;padding:0 6px}
.k2new .k2-gcover.kids .gk-art{margin:8px 0 6px}
.k2new .k2-hero .k2-gcover.kids .gk-subk{font-size:13px}
/* keepsake (mantiene el recuadro con acuarela interior; formato al patrón) */
.k2new .k2-gcover.keep{padding-top:9%}
.k2new .k2-gcover.keep .gk-title{margin-top:4px}
.k2new .k2-gcover.keep .gk-frame{margin:9% auto 0;width:70%}
.k2new .k2-gcover.keep .gk-kora{margin-top:auto;padding:8px 0 10px}
/* tarjetas de precio (s11): misma composición */
.lpp-gcov.kids .t{margin-top:10px}
.lpp-gcov.kids .s{margin:3px 0 0}
.lpp-gcov.kids .k{margin:auto 0 5px;order:99}
.lpp-gcov.keep .fr{margin:10% 0 0}
.lpp-gcov.keep .k{margin-top:auto;margin-bottom:6px}


/* ── grids Wonderbly-style (17 ago): fondo blanco, portadas a sangre tamaño patrón, meta con título ── */
#s5.k2-s5-band{background:#fff}
.k2new .k2-gcover,.k2new .k2-col-cover{border:0;border-radius:0;box-shadow:0 0 0 1px rgba(44,37,32,.08)}
.k2new .k2-gcover{aspect-ratio:680/822}   /* proporción EXACTA del patrón NH */
.k2new .k2-gmeta{text-align:left;width:100%;margin-top:14px}
.k2new .k2-gtitle{font-family:var(--font-body,'Jost',sans-serif);font-size:15.5px;font-weight:500;color:var(--k2-ink,#2C2520);margin:0 0 3px;line-height:1.3}
.k2new .k2-gsub{font-family:var(--font-body,'Jost',sans-serif);font-size:13.5px;color:#5d564d;line-height:1.45;max-width:none}
/* NH kids del grid: mismas posiciones que las keepsake */
.k2new .k2-gcover.kids{padding-top:9%}
/* más aire entre portadas en los grids */
.k2new .k2-grid{gap:44px 38px}
@media(max-width:900px){.k2new .k2-grid{gap:34px 24px}}

/* ── ronda 16 ago: selectores de estilo con imagen de muestra (hoja de roble) + filtro foto ── */
/* semilla: "¿cómo quieres ilustrar su historia?" — tarjetas con muestra */
.k2new .k2-seg.k2-style-cards button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 10px 11px;flex:1 1 0;min-width:0}
.k2-st-img{display:block;width:100%;max-width:118px;aspect-ratio:1/1;object-fit:contain;border-radius:9px}
/* Cuando la muestra trae PERSONAS (Keepsake) la tarjeta cambia de forma: vertical
   como una página, recortada a sangre y más grande. Una foto de familia dentro de
   un cuadrado con "contain" queda con dos franjas vacías y se ve del tamaño de un
   timbre — justo en la pantalla donde se decide cómo va a verse el libro. */
/* 11 sep 2026 · Vivi: "se ven muy bien las dos opciones de ilustración pero me
   gustarían un poquito más grandes, un poco más anchas, y que tengan el margen
   alrededor del mismo tamaño a los lados y arriba".
   La causa del margen disparejo: la muestra estaba topada en 164px mientras la
   tarjeta se estiraba a la mitad del renglón (~273px), así que a los lados
   sobraban ~55px de aire y arriba solo 9px de padding. Se invierte quién manda:
   ahora se topa LA TARJETA y la muestra la llena completa, así el aire de los
   lados y el de arriba son el mismo padding por construcción. Y de paso la
   muestra crece de 164 a ~212px sin que la fila se desborde. */
.k2new .k2-seg.k2-style-cards.k2-style-fotos{justify-content:center}
.k2new .k2-seg.k2-style-cards.k2-style-fotos button{padding:11px 11px 14px;gap:9px;max-width:234px}
.k2new .k2-seg.k2-style-cards.k2-style-fotos .k2-st-img{max-width:none;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:11px}
/* panel de portada: mismo recurso en chico */
.kfont-pick.k-style-pick{display:flex;gap:8px}
.kfont-pick.k-style-pick .kfont-op{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1 0;min-width:0;padding:.55rem .5rem .6rem;border-radius:12px}
.kfont-pick.k-style-pick .k2-st-img{max-width:88px;border-radius:8px}
/* la prueba (landing): botones de estilo con muestra */
.lpt-styles{align-items:stretch}
.lpt-style{display:flex;flex-direction:column;align-items:center;gap:5px;border-radius:13px;padding:.45rem .55rem .5rem;min-width:74px}
.lpt-style-img{display:block;width:62px;height:62px;object-fit:contain;border-radius:9px}

/* ── s12 · Estilos de ilustración (#estilos) ── */
#s12{background:#fff}
.est-kick{font-family:var(--font-body,'Jost');font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--taupe,#9E8E78);margin-bottom:12px}
.est-trio-band{padding-top:38px;padding-bottom:30px}
.est-trio{display:flex;justify-content:center;gap:clamp(14px,4vw,54px);max-width:860px;margin:0 auto}
.est-trio figure{margin:0;flex:1 1 0;min-width:0;text-align:center}
.est-trio img{width:100%;max-width:220px;aspect-ratio:1/1;object-fit:contain}
.est-trio figcaption{font-family:var(--font-body,'Jost');font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay,#7A6652);margin-top:8px}
.est-trio-cap{text-align:center;font-family:var(--font-display,'Cormorant Garamond');font-style:italic;font-size:19px;color:var(--clay,#7A6652);margin-top:22px}
.est-row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;max-width:1020px;margin-left:auto;margin-right:auto}
.est-row.est-flip .est-media{order:2}
.est-row.est-flip .est-copy{order:1}
.est-pair{display:flex;gap:12px}
.est-pair figure{margin:0;flex:1 1 0;min-width:0}
.est-pair img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;box-shadow:0 10px 26px -16px rgba(62,58,51,.4)}
.est-pair-alta img{aspect-ratio:4/5}   /* muestras verticales: el recorte de los libros */
.est-pair figcaption{font-family:var(--font-body,'Jost');font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe,#9E8E78);margin-top:7px;text-align:center}
.est-num{font-family:var(--font-display,'Cormorant Garamond');font-size:15px;letter-spacing:.14em;color:var(--taupe,#9E8E78);margin-bottom:6px}
.est-copy h3{font-family:var(--font-display,'Cormorant Garamond');font-weight:500;font-size:clamp(24px,3vw,31px);color:var(--ink,#3E3A33);margin:0 0 12px}
.est-copy p{font-family:var(--font-body,'Jost');font-weight:300;font-size:15px;line-height:1.65;color:var(--ink-soft,#5c554b);margin:0 0 12px}
.est-ideal{font-size:12.5px !important;color:var(--taupe,#9E8E78) !important;border-top:1px solid rgba(62,58,51,.12);padding-top:11px;margin-top:4px}
.est-link{font-family:var(--font-body,'Jost');font-size:13.5px;letter-spacing:.04em;color:var(--clay,#7A6652);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:760px){
  .est-row{grid-template-columns:1fr;gap:20px}
  .est-row.est-flip .est-media{order:0}
  .est-trio{gap:10px}
  .est-trio img{max-width:150px}
}

/* ══════════════════════════════════════════════════════════════════════════
   RONDA 20 AGO 2026 · legibilidad del editor
   Origen: prueba de usabilidad con una usuaria de 65 años. Se perdía porque
   la salida al repaso de respuestas pesaba más que el camino de avance
   ("Capítulo siguiente" era 10.5px con contraste 2.38:1).
   Regla de aquí en adelante: avanzar siempre pesa más que cualquier salida.
   ══════════════════════════════════════════════════════════════════════════ */

/* 2 · avanzar de capítulo = botón primario de verdad (blanco sobre #5A4B39 = 7.4:1) */
.spread-nav{ margin-top:1rem }
/* ── ANCLA DE TAMAÑO ──────────────────────────────────────────────
   Lo que se lee y se toca dentro del editor se mide en em, relativo a este
   ancla. En iPhone/iPad el ancla toma el "Tamaño de texto" del sistema; en
   los demás navegadores, el tamaño base que el usuario tenga configurado.
   El @media (pointer:coarse) deja fuera a macOS, donde -apple-system-body
   son 13px y encogería el panel. Los max() son el piso: nunca más chico que
   eso, por legible que sea la pantalla. */
#s2 .panel, #s2 .spread-nav{ font-size:1rem }
@supports (font:-apple-system-body){
  @media (pointer:coarse){
    #s2 .panel, #s2 .spread-nav{
      font:-apple-system-body; font-family:var(--font-body); font-weight:300; line-height:1.5 }
  }
}
.sn-next{
  font-family:var(--font-body); font-size:max(14px,.88em); letter-spacing:.01em;
  color:#fff; background:#5A4B39; border:none; border-radius:.75em;
  padding:.62em 1.15em; min-height:max(44px,2.9em); cursor:pointer; white-space:nowrap;
  box-shadow:0 7px 18px -9px rgba(44,37,32,.55); transition:background .2s
}
.sn-next b{ font-weight:500 }
.sn-next:disabled,.sn-next:empty{ opacity:0; pointer-events:none }
.sn-prev{ font-size:max(12.5px,.8em); letter-spacing:.04em; text-transform:none; color:#5A4B39 }
.sn-prev:hover{ color:var(--dark) }
.sn-page{ font-size:max(13px,.85em); font-style:normal; color:#5A4B39; letter-spacing:.02em }

/* 3 · pestañas: que se lea dónde va, no 17 opciones iguales */
.chtab{ font-size:14px; color:#6B5B47; padding:.4rem .78rem }
.chtab::before{ content:'○ '; color:#C9BCA6; font-size:11px }
.chtab.written::before,.chtab.locked::before,.chtab.approved::before{ content:'✓ '; color:var(--sage); font-weight:700 }
.chtab.on::before{ color:var(--clay) }

/* 4 · pills: 26px de alto era imposible de atinar; 44px es el mínimo cómodo */
.panel .pill{ font-size:max(12.5px,.82em); padding:.62em .85em; min-height:max(38px,3.1em);
  display:inline-flex; align-items:center; color:#5A4B39 }

/* 5 · el botón del panel, al tamaño de lo que pide */
.pq-next{ font-size:max(14.5px,.92em); padding:.95em 1em; min-height:max(46px,3em) }

/* ── OPCIÓN A · el panel es el foco, luego se pasa a un lado ────────────────
   Solo desktop/iPad: en ≤900px el editor ya es de una columna y el CSS móvil
   (css/kora-mobile.css) pone la pregunta arriba, que es lo que queremos ahí. */
@media(min-width:901px){
  .editor-grid{ transition:grid-template-columns .5s cubic-bezier(.4,0,.2,1) }
  #editorWrap.panel-wide .editor-grid{ grid-template-columns:1fr clamp(320px,42%,600px) }
  #editorWrap.panel-wide .spread{ min-height:0 }
}

/* ══════════════════════════════════════════════════════════════════════════
   RONDA 21 AGO 2026 · fondo neutro, blob limpio, placeholders en su sitio
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · el fondo del editor pierde calor sin dejar de ser papel.
   Antes: #ECE3D3 / #E6DED0 (saturación 30%). Ahora: la misma luz, la mitad de calor. */
/* LA MESA DEL EDITOR — 11 sep 2026 (tarde).
   Vivi: "el color de fondo tiende más a los rojos y el de la portada más a
   cremas, siento que chocan un poquito". Medido: esta mesa estaba en matiz 35°
   —anaranjado— y el lino de la tapa en 43° —crema—. Ocho grados entre dos
   superficies que se tocan es exactamente lo que se siente como un choque sin
   poder señalar dónde.
   Ahora las dos viven en la misma familia (41° aquí, 44° la tela) y se separan
   por LUZ, no por color: la mesa baja de 87 % a 81 % y la tela sube a 93 %.
   Así se separan de verdad un mueble y un libro encima. */
#s2{ background:#DAD3C4 }

/* ═══════════ LA TINTA DEL MARCO ═══════════ 13 sep 2026
   La mesa del editor bajó de 87 % a 81 % de luz el 11 de septiembre. Eso hizo
   lo que se buscaba —el libro se despega— y de paso rompió algo que nadie
   estaba mirando: TODO EL TEXTO DEL MARCO se apoya directamente en esa mesa. El
   panel no tiene fondo propio; las preguntas, las notas y la barra de avance
   están escritas sobre el mueble.

   Medido, el daño no es parejo. Con la mesa en #DAD3C4:

     «LLEVAS 6 CAPÍTULOS ESCRITOS» (--sand)   2.2 : 1   ← lo que Vivi vio
     las notas al pie y los rótulos (--taupe) 2.3 : 1
     las pestañas de capítulo      (--taupe)  2.3 : 1
     la pregunta                   (#4A3F33)  6.9 : 1   ← esta sí estaba bien

   El mínimo legible para texto chico es 4.5 : 1. Los grises de arriba nunca lo
   cumplieron —con la mesa clara andaban en 2.7— pero ahí quedaban debajo del
   umbral de "se nota"; seis puntos de luz los cruzaron.

   Por qué no se corrigen --taupe y --sand: esos dos tonos también viven DENTRO
   del libro, sobre papel, donde su trabajo es ser discretos y donde el contraste
   sí les alcanza. Oscurecerlos allá arruinaría las páginas para arreglar el
   marco. Así que el marco tiene su propia tinta, con nombre, y se queda en el
   marco: --ed-tinta para lo que se lee (8.4 : 1) y --ed-nota para lo que
   acompaña (4.8 : 1).

   Y la ventana de preguntas se resuelve sola: su fondo es papel casi blanco, así
   que la misma tinta le da 12 : 1 y 6 : 1. No hizo falta aclararle el fondo. */
#s2{ --ed-tinta:#3B322A; --ed-nota:#625749 }

/* Lo que se lee */
#s2 .pq-label{ color:var(--ed-tinta) }
/* Lo que acompaña. Van nombrados uno por uno a propósito: una regla que pintara
   todo #s2 alcanzaría también las hojas del libro, que están sobre papel. */
#s2 .kvida-t,
#s2 .kvida-n,
#s2 .chtab,
#s2 .sn-corner,
#s2 .sn-page,
#s2 .panel-label,
#s2 .pq-hint,
#s2 .upbox-cap,
#s2 .upbox-action{ color:var(--ed-nota) }
/* Los estados no se pierden: la pestaña activa y la aprobada siguen mandando. */
#s2 .chtab.on{ color:#3a3026 }
#s2 .chtab.written{ color:#4A4034 }
#s2 .chtab.approved{ color:var(--sage) }
#s2 .upbox.filled .upbox-action{ color:var(--sage) }
#s2 .sn-corner:hover,
#s2 .chtab:hover{ color:var(--ed-tinta) }
/* La barra de avance con la mesa detrás: el riel gris claro casi no se veía. */
#s2 .kvida-barra{ background:rgba(90,75,57,.22) }

/* 2 · el hueco de la foto: la forma limpia del blob en vez de la acuarela, y
   ocupando la caja real que tomará la imagen (antes era un cuadrado de 430px
   tope, así que la foto nunca caía donde estaba la mancha).
   --ph-ar es la proporción de la foto que se pide en ese hueco; hoy la manda el
   layout, y cualquier capítulo puede sobreescribirla. */
.blob.empty .ph-shape{
  width:78%; max-width:none; max-height:82%;
  aspect-ratio:var(--ph-ar, 1/1.14);
  /* la forma orgánica de Kora recorta el degradado: limpia, sin la textura de
     acuarela, y con color suficiente para leerse como "aquí va una foto". */
  border-radius:46% 54% 57% 43% / 49% 41% 59% 51%;
  background:radial-gradient(ellipse at 38% 30%,
    rgba(193,204,182,.95) 0%,
    rgba(152,169,142,.86) 46%,
    rgba(176,188,164,.74) 100%);
}
.duo .blob.empty .ph-shape{ --ph-ar:1/1; width:84%; max-height:84% }
.blob.converting::before{ background:none }

/* 3 · el verso en obra ocupa el sitio exacto del verso terminado:
   una línea del placeholder = una línea real (1.55em), y la separación entre
   estrofas es la misma .7rem de .verse p. */
.verse-ph{ display:block; gap:0; margin-top:0; width:100% }
.verse-ph p{ margin-bottom:.7rem }
.verse-ph p:last-child{ margin-bottom:0 }
.verse-ph span{
  display:block; position:relative; height:1.55em;
  width:auto; background:none; border-radius:0; opacity:1;
}
.verse-ph span::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:var(--w,70%); height:.55em; border-radius:.28em;
  background:var(--sand-light); opacity:.42;
}
.verse-ph p span:nth-child(1)::before{ --w:78% }
.verse-ph p span:nth-child(2)::before{ --w:63% }
.verse-ph p span:nth-child(3)::before{ --w:74% }
.verse-ph p span:nth-child(4)::before{ --w:57% }
.verse-ph p span:nth-child(5)::before{ --w:68% }

/* ══════════════════════════════════════════════════════════════════════════
   RONDA 21 AGO 2026 (b) · aire, jerarquía y los avisos que faltaban
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · el control de plegar vive arriba del panel, uno solo, con más presencia */
.panel-hide{ font-size:max(13px,.82em); color:#5A4B39; padding:.4em .1em }
.panel-hide.is-answers{ display:flex; align-items:center; gap:.45em; width:100%;
  justify-content:space-between; border:1px solid var(--sand-light); border-radius:10px;
  background:var(--white); padding:.75em .85em; margin-bottom:1.2rem }
.panel-hide.is-answers:hover{ border-color:var(--sand) }   /* el botón duplicado ya no se usa */

/* 2 · aire. El panel estaba apretado y por eso costaba leerlo. */
#s2 .panel{ padding-top:1.6rem }
.pq-title{ line-height:1.18; margin-bottom:.15em }
.pq-lede{ font-size:max(13px,.84em) !important; line-height:1.65; margin-top:.45em; color:#6E6152 }
.pq-lede em{ font-style:italic; color:var(--clay) }
/* 16 sep 2026 · Vivi: "hay mucho espacio después del cuadro blanco donde
   respondes y la siguiente pregunta". Eran ~42 px y ninguno era margen de
   diseño: 1.9em de separación MÁS el renglón de 1.2em que `.pq-tope` reserva
   siempre para el "te quedan N caracteres", aunque esté vacío. Ese renglón se
   queda —si apareciera de golpe, el formulario daría un brinco mientras
   escribes— y lo que baja es la separación, que estaba contándose dos veces. */
.pq-field{ margin-top:1.3em }
.pq-label{ line-height:1.55; margin-bottom:.75em; color:#4A3F33 }   /* el tamaño lo pone la escala */
.pills{ gap:.4em }
.pq-input,.pq-area{ font-size:max(13.5px,.85em); padding:.75em .8em; line-height:1.6 }
.pq-area{ min-height:0 }
.pq-v2{ margin-top:1.7em; padding-top:1.2em }
.pq-v2-more{ margin-top:.8em; font-size:max(12.5px,.74em) }
.pq-photos-note{ font-size:max(12.5px,.76em); line-height:1.6 }
.pq-next{ margin-top:1.9em }
.pq-hint{ font-size:max(12.5px,.76em); line-height:1.65; color:var(--taupe);
  margin:.7em .2em 0; text-align:center }

/* 3 · avanzar deja de gritar: verde Kora en vez del café del CTA del panel */
/* avanzar: claro con contorno verde. Sigue siendo lo único enmarcado de ese
   renglón, así que pesa más que "← Anterior", pero ya no compite con el café
   sólido del panel ni pelea con el verde del blob. */
/* verde lleno, pero más claro que el primero (#5F7361). Blanco sobre #647A66
   da 4.7:1, así que se lee bien y ya no pesa como el café del panel. */
.sn-next{ background:#647A66; color:#fff; border:none;
  box-shadow:0 5px 15px -10px rgba(44,48,40,.5) }
.sn-next:hover{ background:#576B59 }
.sn-next b{ color:#fff }

/* 4 · el aviso de guardado: más grande, más aire, y ya no habla solo de fotos */
.panel-vault{ margin-top:2.2rem; padding-top:1.3rem; padding-bottom:1.6rem;
  border-top:1px solid rgba(122,102,82,.16); gap:.7rem }
.panel-vault svg{ flex:0 0 auto; margin-top:.25em }

/* 5 · la nota de versiones, bajo la barra de la hoja */
.ctrl-note{ display:block; text-align:center; font-size:12.5px; line-height:1.65;
  color:var(--taupe); margin:.55rem auto 0; max-width:min(52ch,100%) }
/* los hijos de la rejilla no deben poder ensanchar su columna (rompía el móvil) */
#s2 .ed-left,#s2 .panel{ min-width:0 }
.ctrlbar,.spread-nav,.pq-hint{ max-width:100% }

/* 6 · los dos avisos de escritura, iguales y centrados */
.pending-note{ width:100%; text-align:center; font-family:var(--font-display);
  font-style:italic; font-size:15px; letter-spacing:0; text-transform:none; color:var(--taupe) }
.spread.regenerating .pg:has(.verse):not(.pg-fijo)::after{ content:"Escribiendo otra versión…";
  font-family:var(--font-display); font-style:italic; font-size:15px; letter-spacing:0;
  text-transform:none; color:var(--taupe) }

/* 7 · el placeholder del verso, centrado en la página como el verso real */
.verse-ph{ text-align:center }

/* 8 · el hueco de foto: sin el óvalo blanco, texto blanco y la mancha más oscura */
.blob.empty .ph-shape{
  background:radial-gradient(ellipse at 36% 28%,
    rgba(163,180,154,.96) 0%,
    rgba(126,147,120,.94) 40%,
    rgba(101,122,98,.90) 72%,
    rgba(92,112,90,.76) 92%,
    rgba(92,112,90,.62) 100%);
}
.blob.empty .cap{ background:none; padding:.6rem 1rem; color:#fff; max-width:72%;
  text-shadow:0 1px 6px rgba(48,58,46,.35) }
.blob .cap{ color:#fff; font-weight:500; font-size:max(12.5px,.8em) }
.blob .cap b{ color:rgba(255,255,255,.82); font-weight:600 }
.blob.converting .conv-label{ background:none; color:#fff; text-shadow:0 1px 6px rgba(48,58,46,.35) }

/* 9 · el título del libro, en serif */
.editor-head h2{ font-family:var(--font-display); font-weight:500; letter-spacing:0 }
.editor-head h2 em{ font-style:normal; color:var(--dark); font-weight:500 }

/* 10 · "editar esta página" del libro completo — estaba sin estilo fuera de móvil */
.km-edit-btn{
  position:absolute; top:12px; right:12px; z-index:5;
  background:rgba(255,253,249,.94); border:1px solid var(--sand-light);
  color:var(--clay); font-family:var(--font-body); font-weight:300; font-size:12.5px;
  letter-spacing:.02em; padding:.5rem .85rem; border-radius:999px; cursor:pointer;
  box-shadow:0 6px 16px -10px rgba(60,48,34,.55); transition:.15s;
}
.km-edit-btn:hover{ border-color:var(--sand); color:var(--dark) }
#fullWrap .full-spread{ position:relative }

/* la nota bajo "Otra versión" es texto de apoyo, no verso: sans y sin itálica */
#panelSlots .pq-hint{ font-family:var(--font-body); font-style:normal }

/* ── RONDA 21 AGO (c) · el café pierde saturación ──────────────────────────
   Los cuatro tokens de esta ronda subieron al :root de arriba (8 sep 2026);
   estaban definidos en dos lugares con valores distintos. Aquí se queda lo que
   no son tokens: el cromo del editor. */
.pq-next{ background:#534A40 }
.pq-next:hover{ background:#443B33 }
.btn-buy{ background:#534A40 }
.btn-buy:hover{ background:#443B33 }
.sn-prev,.sn-page,.panel-hide{ color:#534A40 }
.panel .pill,#panelSlots .pills .pill{ color:#534A40 }
.chtab{ color:#655C50 }
.chtab.on{ color:#2C2520 }
.chtabs{ border-bottom-color:rgba(83,74,64,.40) }
.chtabs::-webkit-scrollbar-thumb{ background:#9B9186 }
.editor-head h2{ color:#4A423A }
.panel-hide.is-answers{ color:#534A40 }

/* la nota bajo la etiqueta de las pills contextuales */
.pq-sub{ font-size:max(12.5px,.76em); line-height:1.6; color:var(--taupe);
  margin:-.2em 0 .7em }
.ctrl-note{ max-width:min(68ch,100%) }

/* ── Estilo de ilustración ── */
.est-try{
  width:100%; border:1px solid var(--sand-light); border-radius:10px;
  background:var(--white); color:#534A40; font-family:var(--font-body); font-weight:300;
  font-size:max(13px,.82em); padding:.75em .8em; min-height:44px; cursor:pointer; transition:.15s;
}
.est-try:hover{ border-color:var(--sand) }
.est-hint{ text-align:left !important; margin:.5em .1em 0 !important }

/* ── El color de la tela, en el panel · 13 sep 2026 ──
   Cinco pastillas con su muestra y su nombre. La muestra es el color REAL de la
   tela (viene de KEEP_TELA en app.js, en línea): si el color cambia allá,
   cambia aquí, y no hay una segunda lista de hexadecimales que se desfase —que
   es justo lo que le pasó a .cstyle-sw.beige con COVER_LINEN. */
.tela-pick{ display:flex; flex-wrap:wrap; gap:.5rem }
.tela-op{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  border:1px solid var(--sand-light); border-radius:999px;
  background:var(--white); padding:.34rem .74rem .34rem .36rem;
  font-family:var(--font-body); font-weight:300; font-size:max(12px,.78em);
  color:#534A40; min-height:38px; transition:border-color .15s, box-shadow .15s;
}
.tela-op:hover{ border-color:var(--sand) }
.tela-op.on{ border-color:var(--clay); box-shadow:0 0 0 1px var(--clay) inset }
.tela-sw{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(44,37,32,.22);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.18);
}
.tela-n{ white-space:nowrap }

/* ── EL COLOR, DENTRO DE SU ENCUADERNACIÓN · 15 sep 2026 ─────────────────
   Los tonos ya no son un bloque suelto debajo del selector: cuelgan del
   renglón de lino que está elegido. Por eso la fila comparte el borde del
   renglón —una sola pieza que se abre— y los tonos entran con una sangría:
   se lee "esta encuadernación, en este color", no "dos preguntas seguidas". */
.kprint-fila{ display:flex; flex-direction:column }
.kprint-fila.kp-abierta .kprint-op{ border-bottom-left-radius:0; border-bottom-right-radius:0 }
.kprint-fila.kp-abierta .tela-pick{
  border:1px solid var(--clay); border-top:0;
  border-radius:0 0 10px 10px; background:var(--white);
  padding:.7rem .85rem .75rem; margin-top:-1px;
}
/* El color elegido, dicho en la propia tarjeta: "Lino hueso · Verde bosque".
   Antes la tarjeta decía la mitad y el color vivía en otro renglón. */
.kp-n{ min-width:0 }
.kp-tela{ font-style:normal; color:var(--clay); white-space:nowrap }

/* el botón para abrir la sábana solo existe en móvil (kora-mobile.css lo enciende) */
.km-open{ display:none }



/* ── EL SCROLL QUE SE SALÍA DEL EDITOR · 13 sep 2026 ──
   Vivi: "cuando estás en el editor y le das scroll para abajo, si le das mucho
   como que te saca de la página y te manda a tu biblioteca. Eso está incómodo".

   En esta hoja no había una sola línea de `overscroll-behavior`, y ese es el
   comportamiento por defecto del navegador: cuando una caja con scroll propio
   llega a su tope, el impulso que sobra NO se detiene — se lo pasa a su padre, y
   ese al suyo, hasta la página entera. Con el dedo eso es un solo gesto: un
   empujón largo dentro de las preguntas termina de leer las preguntas y sigue
   moviendo todo lo que hay detrás, y lo que se siente es que el libro se fue.

   `contain` corta la herencia: el impulso muere donde acaba la caja que lo
   recibió. No cambia nada mientras haya a dónde bajar; solo deja de contagiar. */
#s2 .panel,
#s2 .chtabs,
#editorWrap.pq-pop .panel,
#s2 #editorWrap.pq-pop .panel{ overscroll-behavior:contain }

/* ── Aviso de versión nueva (pestaña que se quedó atrás) ── */
.kora-nueva-version{
  position:fixed; left:50%; bottom:1.1rem; transform:translateX(-50%);
  z-index:400; display:flex; align-items:center; gap:1rem;
  max-width:calc(100vw - 2rem);
  padding:.8rem 1rem .8rem 1.15rem; border-radius:14px;
  background:#534A40; color:#F8F6F2;
  font-family:var(--font-body); font-weight:300; font-size:max(13.5px,.85em);
  box-shadow:0 14px 34px -18px rgba(40,32,22,.8);
  animation:kora-nv .3s cubic-bezier(.4,0,.2,1);
}
@keyframes kora-nv{ from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)} }
.kora-nueva-version button{
  flex:none; border:0; border-radius:9px; cursor:pointer;
  padding:.5em 1em; min-height:36px;
  background:#F8F6F2; color:#534A40;
  font-family:var(--font-body); font-weight:400; font-size:inherit;
}
.kora-nueva-version button:disabled{ opacity:.6; cursor:default }
.kora-nueva-version .nv-no{
  background:transparent; color:#C8BFB2; padding:.5em .3em; min-height:0;
  font-size:1em; line-height:1;
}
.kora-nueva-version .nv-no:hover{ color:#F8F6F2 }


/* ══════════════════════════════════════════════════════════════════════
   RONDA 21 AGO 2026 (d) · EL EDITOR A PANTALLA COMPLETA
   Tres cosas que iban juntas:
   1 · el encabezado del sitio se retira mientras editas — vuelve al acercar
       el cursor a la orilla de arriba, al tocar la manija, o con Esc;
   2 · la hoja reservaba 380px de aire que el marco no usaba: ahora reserva
       lo que de verdad ocupa (--ed-chrome) y crece con la pantalla;
   3 · lo que sobra se reparte arriba y abajo, no se amontona bajo el libro.
   Revertible: pon EDITOR_INMERSIVO=false en app.js y sube --ed-chrome a 288.
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:901px){

  /* 1 · el encabezado que se retira */
  body.ed-inmersivo .wf-head{
    position:fixed; left:0; right:0; top:0;
    transform:translateY(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  body.ed-inmersivo.ed-cabeza .wf-head{
    transform:none; box-shadow:0 12px 28px -22px rgba(60,48,34,.75);
  }
  

  /* El riel: una franja delgada con KORA al centro. Es la puerta de vuelta al
     encabezado — al tocarla o pasar el cursor, el menú completo baja. */
  body.ed-inmersivo .ed-riel{
    display:flex; position:fixed; top:0; left:0; right:0; height:var(--ed-riel);
    z-index:101; align-items:center; justify-content:center;
    padding:0 0 0 .28em;              /* compensa el letter-spacing de la última letra */
    margin:0; border:0; border-bottom:1px solid rgba(122,102,82,.14);
    background:#FFFFFF; cursor:pointer;
    font-family:var(--font-display); font-size:13px; font-weight:500;
    letter-spacing:.3em; color:var(--taupe);
    transition:color .2s;
  }
  body.ed-inmersivo .ed-riel:hover{ color:var(--dark) }
  body.ed-inmersivo.ed-cabeza .ed-riel{ display:none }
  body.ed-inmersivo #s2{ margin-top:var(--ed-riel); height:calc(100dvh - var(--ed-riel)) }

  /* 2 y 3 · la hoja usa el alto que hay */
  /* Valor de arranque, nada más: medirCromo() lo sustituye por el real en
     cuanto el editor se dibuja. Nunca se vuelve a afinar a mano. */
  #s2{ --ed-chrome:230px }
  #s2 .spread,
  #s2 .spread-nav{ max-width:calc((100dvh - var(--ed-chrome)) * var(--k-spread)) }
  #editorWrap.panel-hidden .spread,
  #editorWrap.panel-hidden .spread-nav{ max-width:calc((100dvh - var(--ed-chrome) + 90px) * var(--k-spread)) }
  #s2 .spread{ min-height:0 }
  #s2 .spread.single .pg{ height:calc(100dvh - var(--ed-chrome) - 34px) }
  #s2 .ed-left{ padding-bottom:.7rem }

  /* el aire sobrante, repartido */
  #s2 .ed-left,
  #s2 .ed-left:has(.spread.single){
    display:flex; flex-direction:column; justify-content:center;
  }
}

/* En tabletas el panel plegado se hace más angosto: cada píxel es libro. */
@media(min-width:901px) and (max-width:1180px){
  .editor-grid{ grid-template-columns:1fr 244px }
  #s2 .ed-left{ padding-left:14px; padding-right:1rem }
  #s2 .panel{ padding-left:1.15rem; padding-right:.7rem }
}


/* ── El botón pegado abajo del panel ya no se come lo que hay debajo ──
   Es sticky para tenerlo siempre a mano, pero el "Estilo de ilustración"
   quedaba escondido detrás. Dos arreglos: el panel deja aire suficiente
   para que todo alcance a subir por encima, y el botón lleva su propia
   placa del color del fondo, así lo que pasa por detrás no se asoma. */
@media(min-width:901px){
  #panelSlots.pqv2 .pq-next{
    bottom:.75rem;
    box-shadow:0 6px 18px rgba(44,37,32,.14), 0 0 0 11px #E4DFD8;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   RONDA 21 AGO 2026 (e) · QUE TODO CREZCA JUNTO
   En el iPad con "Texto más grande" el panel y la navegación crecían (están
   ancladas al tamaño del sistema) pero las pestañas, el encabezado y el verso
   no: unos textos gigantes y otros en miniatura. Aquí se ancla TAMBIÉN el
   cromo del editor, y el verso pasa a medirse contra la hoja (cqw) en vez de
   contra la ventana — así el libro se lee igual de grande sea cual sea la
   pantalla, que es lo que uno espera de una vista previa de impresión.
   ══════════════════════════════════════════════════════════════════════ */

/* 1 · el cromo del editor entra al mismo ancla que el panel */
#s2 .chtabs, #s2 .editor-head{ font-size:1rem }
@supports (font:-apple-system-body){
  @media (pointer:coarse){
    #s2 .chtabs, #s2 .editor-head{
      font:-apple-system-body; font-family:var(--font-body); font-weight:300; line-height:1.5 }
  }
}
#s2 .chtab{ font-size:max(13px,.82em); padding:.32em .72em }
#s2 .eh-link{ font-size:max(12.5px,.8em); padding:.42em .2em }
#s2 .btn-buy{ font-size:max(12.5px,.8em); padding:.66em 1.35em }

/* 2 · el verso se mide contra la hoja, no contra la ventana.
   1.69cqw sale de la proporción que ya nos gustaba (14.5px en una hoja de
   859px). Ahora que la hoja crece, el verso crece con ella. */
/* OJO: solo los spreads de interior. La portada (.spread.single) se mide a
   partir de su propio contenido, y la contención de container-type se lo
   impediría. */
#s2 .spread:not(.single){ container-type:inline-size }
#s2 .spread:not(.single) .verse{ font-size:clamp(12.5px, 1.69cqw, 22px) }
#s2 .spread:not(.single) .cap{ font-size:clamp(11px, 1.5cqw, 19px) }


/* ══════════════════════════════════════════════════════════════════════
   VER LIBRO COMPLETO, A TAMAÑO CASI REAL · 15 sep 2026
   ──────────────────────────────────────────────────────────────────────
   EL CLAMP DE ARRIBA ES EL QUE MIENTE, y hay que decirlo con nombre porque la
   regla de al lado es correcta y se queda: el verso se mide contra la HOJA
   (`cqw`) desde el 21 ago, y eso es justo lo que hace posible esta vista. Lo
   que no es proporcional es el `clamp`: en una laptop la hoja del editor mide
   ~740 px o menos y se activa el piso de 12.5 px, así que el verso queda
   proporcionalmente MÁS GRANDE de lo que se imprime y se parte antes en
   pantalla que en el libro. Con el techo de 22 px pasa lo contrario en una
   pantalla muy ancha.
   En el editor el clamp está bien —ahí el texto se infla A PROPÓSITO para que
   se lea, y eso no se toca. Aquí se quita, porque aquí es donde se viene a ver
   la verdad. Es lo único que estaba "por encima" del cqw.
   Y como todo se mide contra la hoja, AJUSTAR Y 100 % PARTEN IGUAL: el ajustado
   es la misma página más chica, con los renglones en el mismo sitio. El 100 %
   es para ver el tamaño físico; el ajustado, para leerlo de corrido.
   ══════════════════════════════════════════════════════════════════════ */
#s2 #fullWrap .spread:not(.single) .verse{ font-size:1.69cqw }
#s2 #fullWrap .spread:not(.single) .cap{ font-size:1.5cqw }
/* El título del capítulo también se medía contra la VENTANA (2.4vw): en la
   vista del libro eso es una hoja que cambia de tamaño con el navegador. Pasa
   a medirse contra la hoja, con la misma proporción que ya tenía (26 px en la
   hoja de 859 px del editor, que es de donde salió el 1.69 de arriba). */
#s2 #fullWrap .spread:not(.single) .ttl{ font-size:3.03cqw; margin-bottom:4.2cqw }
#s2 #fullWrap .spread:not(.single) .divider{ width:8.6cqw; margin-top:4.9cqw }
/* Y lo mismo para las hojas de la casa: sin clamp, la proporción de imprenta. */
#s2 #fullWrap .pro-epi p{ font-size:2.68cqw }
#s2 #fullWrap .pro-eyebrow{ font-size:1.51cqw }
#s2 #fullWrap .pro-text p{ font-size:1.68cqw }
#s2 #fullWrap .idx-parte{ font-size:1.63cqw }
#s2 #fullWrap .idx-hoja{ font-size:2.04cqw }

/* LA HOJA. `--fw-hoja` y `--k-pagina` se las pone `renderFull()` desde
   `KORA_TRIM`, porque la medida es del LIBRO —216 × 270 el keepsake, 180 × 225
   Kids, 150 × 187.5 el board book— y el CSS no sabe cuál está abierto.
   16 sep 2026 · UNA SOLA VISTA. Había dos y un control de Ajustar / 100 %, y la
   de 100 % no enseñaba nada distinto: como todo se mide contra la hoja (`cqw`),
   las dos parten los renglones en el mismo sitio. Solo era más grande que
   cualquier pantalla — un spread de keepsake son ~1632 px a 96 ppp.
   Queda la hoja ajustada, con la proporción y la escala de imprenta. Los
   milímetros se quedan como TOPE: nunca se enseña más grande que el papel. */
#fullWrap{ --fw-hoja:216mm }
#fullWrap .fw-hojas{ margin:0 auto; max-width:min(100%, calc(var(--fw-hoja) * 2)) }
#fullWrap .spread{ max-width:100%; min-height:0; aspect-ratio:var(--k-spread-ar) }
#fullWrap .spread.single{ max-width:100% }
#fullWrap .spread.single .pg{ height:auto; width:50%; max-width:none; aspect-ratio:var(--k-pagina) }

/* LA BARRA: qué estoy viendo. Ya no hay nada que elegir, así que es una línea
   que dice la verdad y se quita de en medio. */
.fw-barra{
  position:sticky; top:0; z-index:12;
  padding:.7rem .2rem .75rem; margin-bottom:1.1rem;
  background:var(--linen); border-bottom:.5px solid var(--sand-light);
}
.fw-rotulo{
  margin:0; font-family:var(--font-body); font-size:13.5px; color:var(--dark);
  display:flex; flex-direction:column; gap:.15rem; min-width:0;
}
.fw-t{ display:block }
.fw-nota{ font-size:12px; font-weight:300; line-height:1.45; color:var(--taupe); margin:0 }
.fw-barra-movil .fw-rotulo{ font-size:14px }

/* EL AVISO DE IMPRENTA (kora-imprenta.js).
   Va en la hoja donde pasa, no en una barra arriba: lo que hay que mirar es ese
   renglón. Y se ve como una nota al margen, no como un error — no está mal, va
   a quedar distinto de como se ve aquí, y quien decide si importa es quien lo
   escribió. Por eso no lleva rojo ni signo de admiración. */
.kimp-aviso{
  flex:0 0 auto; margin:.55rem 0 0; padding:0 4%;
  font-family:var(--font-body); font-weight:300; font-style:italic;
  font-size:clamp(9.5px,1.15cqw,12.5px); line-height:1.4;
  color:var(--sand); text-align:center;
}
/* En el libro completo no se avisa: ahí YA se ve partido, que es el punto. */
#fullWrap .kimp-aviso{ display:none }


/* ══════════════════════════════════════════════════════════════════════
   RONDA 21 AGO 2026 (f) · LA ESCALA DEL EDITOR
   Diagnóstico: el editor creció por capas y acabó con NUEVE tamaños distintos
   entre 10 y 14.7 px haciendo cinco trabajos. El ojo lo lee como ruido, y los
   dos botones oscuros —que están en el tope de ese rango y además pesan por
   fondo y padding— se veían enormes junto a etiquetas del piso del rango.

     antes                                       ahora
     Siguiente capítulo   14.1px / 44px alto     14px / 44px
     Otra versión (panel) 14.7px / 61px alto     14px / 48px
     ← Anterior           11.5px                 12.8px
     Capítulo 3 de 20     12.2px peso 300        12.8px peso 400
     versión 1 de 1       12px                   12.8px
     ↺ Otra versión       12px                   12.8px
     nota de regeneración 12.5px                 13.4px

   La distancia entre el botón más grande y el texto más chico pasa de 1.28x
   a 1.09x: sigue habiendo jerarquía, pero ya no hay saltos.

   CINCO PASOS, uno por oficio. Cambiar el editor de aquí en adelante es elegir
   uno de estos cinco — no inventar un px nuevo.
   ══════════════════════════════════════════════════════════════════════ */

/* El ancla ahora cubre la COLUMNA IZQUIERDA completa, no solo .spread-nav.
   La barra de versiones y sus notas viven fuera de .spread-nav, así que en el
   iPad con "Texto más grande" se quedaban chiquitas mientras el resto crecía —
   exactamente el desajuste que se veía. */
/* Sin @property, una variable CSS se sustituye como TEXTO: el `em` se
   resolvería en cada elemento que la usa, contra el tamaño de SU contenedor,
   y un `.pq-photo` o un `.panel-vault` con font-size propio volvería a
   multiplicarla. Registrarlas como <length> hace que se calculen una sola vez,
   ahí donde se declaran —sobre el ancla— y que baje ya el píxel resuelto.
   En un navegador viejo que no soporte @property, cada paso cae en su piso de
   max(): sigue siendo legible, solo pierde un pelo de precisión. */
@property --ed-titulo   { syntax:'<length>'; inherits:true; initial-value:22px }
@property --ed-accion   { syntax:'<length>'; inherits:true; initial-value:14px }
@property --ed-texto    { syntax:'<length>'; inherits:true; initial-value:13px }
@property --ed-dato     { syntax:'<length>'; inherits:true; initial-value:12.5px }
@property --ed-etiqueta { syntax:'<length>'; inherits:true; initial-value:10.5px }

#s2 #editorWrap, #s2 .editor-head{
  font-size:1rem;
  /* Los cinco pasos, declarados sobre el ancla. Cambiar el editor de aquí en
     adelante es elegir uno de estos cinco — no inventar un px nuevo. */
  --ed-titulo:   max(22px,   1.62em);
  --ed-accion:   max(14px,   .88em);
  --ed-texto:    max(13px,   .84em);
  --ed-dato:     max(12.5px, .8em);
  --ed-etiqueta: max(10.5px, .68em);
}
@supports (font:-apple-system-body){
  @media (pointer:coarse){
    #s2 #editorWrap, #s2 .editor-head{
      font:-apple-system-body; font-family:var(--font-body); font-weight:300; line-height:1.5 }
  }
}

/* ── los dos encabezados ── */
#s2 .editor-head h2{ font-size:var(--ed-titulo) }
#s2 .panel .pq-title{ font-size:var(--ed-titulo) }

/* ── acción: avanzar. Mismo tamaño los dos, y el del panel deja de ser un
      bloque de 61px de alto. ── */
#s2 .sn-next{
  font-size:var(--ed-accion); font-weight:500;
  min-height:max(44px,2.85em); padding:.7em 1.15em;
}
#s2 .pq-next, #panelSlots.pqv2 .pq-next{
  font-size:var(--ed-accion); font-weight:500;
  min-height:max(46px,2.95em); padding:.8em 1em;
}

/* ── lo que se lee ── */
#s2 .chtab{ font-size:var(--ed-texto) }
#s2 .panel-hide{ font-size:var(--ed-texto) }
#s2 .panel .pq-lede{ font-size:var(--ed-texto) }
#s2 .ctrl-note, #s2 .ctrl-hint{ font-size:var(--ed-texto) }
#s2 .panel-vault{ font-size:var(--ed-texto) }

/* ── estado y acciones de apoyo: aquí estaba la miniatura ── */
#s2 .sn-corner{
  font-size:var(--ed-dato); font-weight:400;
  letter-spacing:.02em; text-transform:none;
}
#s2 .sn-page{ font-size:var(--ed-dato); font-weight:400; letter-spacing:.02em }
#s2 .ctrl-verlbl, #s2 .ctrl-regen{ font-size:var(--ed-dato); letter-spacing:.02em }
#s2 .ctrl-arrow{ font-size:var(--ed-texto) }
#s2 .eh-link, #s2 .btn-buy{ font-size:var(--ed-dato) }
#s2 .btn-buy{ padding:.66em 1.35em }

/* ── versalitas ── */
#s2 .eh-save{ font-size:var(--ed-etiqueta) }
#s2 .panel .p-eyebrow, #s2 .panel .pq-eyebrow{ font-size:var(--ed-etiqueta) }

/* Los últimos sueltos, uno por uno. Después de esto el editor tiene CINCO
   tamaños y nada más (más el ✓ del círculo, que es un ícono, no texto):
     25.9 título · 14.1 acción · 13.4 texto · 12.8 dato · 10.9 etiqueta
   "FIJAR CAPÍTULO" venía en 8px — era el texto más chico de todo el editor. */
#s2 .pq-check-lbl, #s2 .pqv2 .pq-check-lbl{
  font-size:var(--ed-etiqueta); max-width:5.4em; line-height:1.3; letter-spacing:.08em;
}
#s2 .pq-photo-act,                       /* SUBIR */
#s2 .pq-opt{ font-size:var(--ed-etiqueta) }   /* OPCIONAL POR AHORA */
#s2 .pq-photos-label span{ font-size:var(--ed-dato) }   /* "· una foto" */
#s2 .pq-photos-label,                    /* "Estilo de ilustración" */
#s2 .pq-photos-note,                     /* "Puedes escribir el capítulo primero…" */
#s2 .pq-photo-lbl,                       /* "Foto del capítulo" */
#s2 .pq-hint,                            /* las notas al pie del panel */
#s2 .panel-vault p{ font-size:var(--ed-texto) }
#s2 .pq-photo-lbl{ font-size:var(--ed-texto) }
#s2 .pq-label{ font-size:var(--ed-texto) }
#s2 .upbox-action{ font-size:var(--ed-etiqueta) }
#s2 .panel .opt, #s2 .panel .field .opt{ font-size:var(--ed-dato) }
/* Nota al pie dentro del panel. Existe para que ningún texto vuelva a nacer
   con su font-size escrito a mano dentro del HTML de app.js. */
#s2 .panel-nota{ font-size:var(--ed-texto); color:var(--taupe); line-height:1.6 }
#s2 .pq-sub{ font-size:var(--ed-dato) }
#s2 .panel .field label{ font-size:var(--ed-texto) }

/* El panel de la PORTADA tenía su propia familia de tamaños (10 / 13 / 14).
   Entra a la misma escala que el resto del editor. */
#s2 .panel-label{ font-size:var(--ed-etiqueta) }
#s2 .cstyle, #s2 .cstyle span{ font-size:var(--ed-texto) }
#s2 .kfont-op{ font-size:var(--ed-dato) }
#s2 .upbox-cap{ font-size:var(--ed-texto) }
#s2 .pq-head{ gap:.75rem }   /* con más que esto, el eyebrow se parte en dos renglones */
#s2 .ctrl-verlbl{ font-weight:400 }


/* ── El riel del editor: alto en un solo lugar ── */
:root{ --ed-riel:30px }
.ed-riel{ display:none }


/* ══════════════════════════════════════════════════════════════════════
   RONDA 22 AGO 2026 · LA PORTADA KIDS SE MIDE CONTRA SÍ MISMA
   Vivi veía la misma portada "muy cargada arriba" en el iPad y bien en
   escritorio. Medido, el porqué:

                     portada    título (% del ancho)   arte (% del alto)
     escritorio 1673  450x600          8.0 %                51.8 %
     escritorio 1440  413x550          8.7 %                49.6 %
     iPad     1024    314x418         11.4 %                41.4 %   ← aquí

   El título estaba en `vw` (la VENTANA) y la etiqueta en píxeles fijos, así
   que en el iPad la portada encoge un 30% pero el título sigue en 36px: pasa
   a ocupar 11.4% de su ancho en lugar de 8%, empuja al subtítulo, y el arte
   —que es lo único elástico— se comprime de 50% a 41% del alto. Eso es lo
   que se lee como "todo apretado arriba".

   Con unidades de contenedor (cqw) todo se mide contra LA PORTADA, no contra
   la ventana: mismo formato, mismas proporciones y el mismo aire en cualquier
   pantalla. Las proporciones salen de la versión de escritorio, que es la que
   nos gusta. Los clamp() son solo topes de seguridad.
   ══════════════════════════════════════════════════════════════════════ */
.kcover{ container-type:inline-size }

/* OJO con la unidad: cqw se mide contra la caja de CONTENIDO del contenedor,
   no contra su caja exterior. La portada lleva padding, así que su contenido
   es ~68% de su ancho visible — por eso los números de abajo son mayores que
   los porcentajes de la tabla. Ratio de conversión: % exterior ÷ 0.685. */
.kcov-art.add{ font-size:clamp(10px, 4.4cqw, 16px) }
.kcov-title{ font-size:clamp(17px, 11.7cqw, 44px); margin:.9cqw 0 0 }
.kcov-name{
  font-family:'Grandstander',cursive; font-weight:600; line-height:1.02;
  font-size:clamp(20px, 12.4cqw, 50px); margin-top:1.9cqw;
}
.kcover-interior .kcov-label{ margin-bottom:6.1cqw }
.kcover-interior .kcov-title{ font-size:clamp(15px, 8.5cqw, 34px) }


/* ── Y la portada Kids usa todo el alto, como la Keepsake ──
   Vivía dentro de un marco apaisado de 38:23 (el de un spread interior), así
   que solo aprovechaba una tercera parte del ancho; encima el marco reservaba
   2.6rem fijos arriba y abajo, que en el iPad son el 14% del alto y en
   escritorio el 8%. Resultado: una portada chica, y más chica todavía en
   tableta — donde además los pisos en píxeles de la tipografía empezaban a
   morder y la apretaban. Ahora toma el alto disponible completo y el aire se
   mide en %. Solo en el editor: la vista de "libro completo" no se toca. */
@media(min-width:901px){
  #s2 #editorWrap .spread.kidscover{
    aspect-ratio:auto; width:100%; max-width:none;
    height:calc(100dvh - var(--ed-chrome) - 24px); min-height:0;
  }
  #s2 #editorWrap .spread.kidscover .pg.kcover-pg{ height:100%; padding:1.6% 0 2.6% }
}


/* ══════════════════════════════════════════════════════════════════════
   RONDA 22 AGO 2026 (b)
   ══════════════════════════════════════════════════════════════════════ */

/* 4 · El libro Kids vuelve al formato Keepsake.
   Estaba en 2:1 — o sea, dos páginas CUADRADAS. En cuadrado el verso se
   apretaba a lo ancho y la foto no tenía dónde crecer, y el spread dejaba
   franjas muertas arriba y abajo del editor. Con 38:23 las páginas son
   verticales, igual que en Keepsake: cabe mejor el texto, la ilustración
   respira y la hoja aprovecha el espacio del editor. */
/* OJO: solo de 761px para arriba. En celular las páginas se apilan en una
   columna (regla de arriba, .spread a 760px) y forzar el 38:23 apaisado dejaba
   las hojas de Kids aplastadas — que es justo lo que se veía distinto del
   editor de Keepsake en el teléfono. */
@media(min-width:761px){
  body.kids-mode .spread{ aspect-ratio:var(--k-spread-ar); max-width:calc((100dvh - var(--ed-chrome)) * var(--k-spread)) }
}

/* 5 · El botón del panel deja de ir pegado abajo.
   Era sticky para tenerlo siempre a mano, pero tapaba lo que venía debajo y,
   ya contado el capítulo, competía con "Siguiente capítulo". Va al final, en
   el flujo, donde termina de leerse la pregunta. */
@media(min-width:901px){
  #panelSlots.pqv2 .pq-next, #s2 .pq-next{
    position:static; bottom:auto; box-shadow:0 7px 18px -10px rgba(44,37,32,.45);
  }
  #s2 .panel{ padding-bottom:2.4rem }
}

/* El motivo real de un fallo al pintar, no solo "reintentar". */
.est-fallo{ color:#8C5A46 }


/* ── La ventana de "lo que nos contaste al empezar" ── */
.semilla-fondo{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:1.2rem; background:rgba(50,42,34,.34); backdrop-filter:blur(2px);
  animation:sem-in .2s ease;
}
@keyframes sem-in{ from{opacity:0} to{opacity:1} }
.semilla-caja{
  width:min(420px,100%); max-height:min(80vh,660px); display:flex; flex-direction:column;
  background:#F8F6F2; border-radius:16px; overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(40,32,22,.65);
  font-size:1rem;
  --ed-titulo:max(22px,1.62em); --ed-accion:max(14px,.88em);
  --ed-texto:max(13px,.84em); --ed-dato:max(12.5px,.8em); --ed-etiqueta:max(10.5px,.68em);
}
@supports (font:-apple-system-body){ @media (pointer:coarse){
  .semilla-caja{ font:-apple-system-body; font-family:var(--font-body); font-weight:300; line-height:1.5 } } }
.semilla-top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.15rem; border-bottom:1px solid rgba(122,102,82,.14);
  font-family:var(--font-body); font-weight:400; font-size:var(--ed-texto); color:#534A40;
}
.semilla-x{
  flex:none; background:transparent; border:0; cursor:pointer;
  font-size:var(--ed-texto); color:var(--taupe); padding:.3em .4em; line-height:1;
}
.semilla-x:hover{ color:var(--dark) }
.semilla-cuerpo{ overflow-y:auto; padding:.2rem 1.15rem 1.5rem }
.semilla-cuerpo .panel-label{ font-size:var(--ed-etiqueta) }
.semilla-cuerpo .panel-input{ width:100% }
.semilla-cuerpo .panel-nota{ font-size:var(--ed-texto); color:var(--taupe); line-height:1.6 }
.semilla-abrir{ width:100% }


/* ── El estado del estilo del libro, siempre a la vista ──
   Un libro parchado (media acuarela, media foto) antes solo se notaba hojeando.
   Ahora el panel lo dice en un renglón, y el botón lo arregla. */
.est-estado{ margin:.2rem 0 1rem; font-size:var(--ed-texto); line-height:1.55 }
.est-estado.est-trabajando{ color:var(--clay); font-style:italic }
.est-estado.est-pend{
  background:#EFEBE4; border:1px solid var(--sand-light); border-radius:12px;
  padding:.9rem 1rem 1rem; color:#534A40;
}
.est-estado.est-pend p{ margin:0 0 .8rem }
.est-estado.est-pend .pq-next{ margin-top:0 }
.est-estado .est-fallo{ margin:.7rem 0 0 }


/* ── El encabezado de Kids, a la altura del de Keepsake en celular ──
   El sub-brand traía dos renglones ("KORA KIDS" + "CUENTOS PARA LOS MÁS
   PEQUEÑOS") y la tira de estrellas de colores: unos 120px que en el teléfono
   se comen el libro y hacen que el editor de Kids no se sienta el mismo que el
   de Keepsake. La marca se queda; lo que se retira es el adorno, y solo dentro
   del editor. */
@media (max-width:900px){
  body.kids-mode #s2.active ~ * .kids-divider-wrap,
  body.kids-mode .kids-divider-wrap{ display:none !important }
  body.kids-mode .wf-logo .kk-sub{ display:none }
}

@media(max-width:760px){
  body.kids-mode .spread{ aspect-ratio:auto; max-width:none }
}


/* ── El "pasar todo el libro a…" baja el tono ──
   Era el mismo negro sólido y en semibold que "Contar este capítulo", y ahí
   abajo, junto a las muestras, gritaba de más: no es el avance del capítulo,
   es un arreglo que se ofrece. Queda como acción, pero clara y tranquila. */
#s2 .pq-next-suave, #panelSlots .pq-next-suave{
  background:#EDE9E2; color:#534A40; font-weight:400;
  border:1px solid var(--sand-light); box-shadow:none;
}
#s2 .pq-next-suave:hover, #panelSlots .pq-next-suave:hover{
  background:var(--white); border-color:var(--sand); color:#3a3026;
}

/* "Dejarlo solo en este spread" no necesita ser un botón: es la salida discreta
   al lado de la acción. Dos bloques oscuros apilados pesaban de más. */
#s2 .est-dejar{
  display:block; width:100%; margin:.55em 0 0; padding:.5em;
  background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:var(--ed-dato); color:var(--taupe);
  text-decoration:underline; text-underline-offset:3px;
}
#s2 .est-dejar:hover{ color:var(--dark) }

/* ═════════ 23 ago · el blob de la prueba deja de arrastrar su texto ═════════
   El "Pintando la acuarela…" era hijo del blob, así que heredaba el
   rotate(±4deg) y el scale de la animación: el texto se mecía de lado a lado.
   Ahora la pintura (gradiente + morfología + giro) vive en un ::before y el
   texto se queda quieto encima. El blob conserva su movimiento tal cual. */
.lpt-blob{
  position:relative; background:none; opacity:1;
  border-radius:0; animation:none;
}
.lpt-blob::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 32% 30%,var(--sage-light,#C7D3C5),var(--sage,#8A9E8C) 68%,#7A9080);
  border-radius:52% 48% 55% 45%/48% 55% 45% 52%; opacity:.85;
  animation:lptBlob 3.4s ease-in-out infinite;
}
.lpt-blob-txt{ position:relative; z-index:1 }
/* La otra mitad del vaivén: los puntitos suspensivos crecen de 0 a 1.15em, así
   que el renglón se ensanchaba y el centrado empujaba las palabras a la
   izquierda cuatro veces por segundo (y a veces las partía en dos renglones).
   Ahora su lugar está reservado y no entra en el centrado. */
.lpt-blob-txt .lpt-dots{ display:inline-block; width:1.15em; margin-right:-1.15em;
  text-align:left }   /* el margen negativo los deja fuera del centrado: el renglón
                         se centra en la palabra y los puntos salen hacia el aire */
@media (prefers-reduced-motion:reduce){
  .lpt-blob::before{ animation:none }
}


/* ═════════ 23 ago · empezar sin cuenta ═════════
   Mientras el libro vive solo en el dispositivo, el encabezado del editor lo
   dice y ofrece mudarlo. Discreto: es una salida, no una alarma. */
#s2 .eh-guardar{
  margin-left:.6em; padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:var(--ed-dato); color:#4C6657;
  text-decoration:underline; text-underline-offset:3px; white-space:nowrap;
}
#s2 .eh-guardar:hover{ color:var(--dark) }
@media (max-width:600px){
  #s2 .eh-guardar{ display:block; margin:.2em 0 0 }
}


/* ═════════ 23 ago · la prueba, sin recuadros de otro color ═════════
   Los huecos de la acuarela y del verso se pintaban de crema (#FBF7EF) sobre la
   tarjeta, y se leían como dos cajas de distinto tono en vez de como espacio que
   todavía no se llena. Ahora el hueco es solo aire con su texto. */
.lpt-result .lpt-art-ph{ background:none; box-shadow:none }

/* La acuarela de la prueba llega recortada (sin papel): puede lucir más grande
   y posarse directo sobre la tarjeta, sin marco ni caja. */
.lpt-result .lpt-art-img{ background:none }

/* ═════════ 23 ago · la muestra, vestida ═════════
   Dos gestos que la emparentan con el producto:

   · MARCO ARENA POR DENTRO. Una línea delgadita a unos milímetros de la orilla,
     el mismo detalle editorial del retrato Kora que se comparte. No sustituye
     al filo del panel: lo acompaña por dentro, que es lo que le da el aire de
     página impresa.

   · LINO. El mismo tejido de las portadas Keepsake (.cover-pg), a un tercio de
     su fuerza y en soft-light: se siente el grano, no se ve la textura. Va
     sobre TODA la banda de la prueba, no sobre las tarjetas — así el papel
     queda limpio y lo que tiene tela es la mesa donde está puesto. */
.lpt-panel, .lpt-book{ position:relative }
/* isolation: para que la capa de lino se mezcle SOLO con la tarjeta y no con
   la banda que hay detrás. */
.lpt-book{ isolation:isolate }
.lpt-panel::after, .lpt-book::after{
  content:''; position:absolute; inset:9px; pointer-events:none;
  border:.5px solid var(--sand-light); border-radius:12px;
}

/* La pregunta abierta pedía más lugar: más alto de arranque y que se pueda
   estirar. El ancho ya era del panel completo; lo que faltaba era aire. */
.lpt-abierta{ min-height:104px }

/* El recuerdo escrito a mano ("✎ Otro…") ocupa su propio renglón debajo de las
   pills, no se mete en la fila. */
.lpt-otro{ flex:1 0 100%; margin-top:.5rem }
.lpt-panel .pill-otro{ font-style:italic }

/* El texto de ayuda de los recuerdos: en versalitas verdes, como las etiquetas
   de la casa, y a un tamaño que de verdad se lea (quedaba en 11px gris claro). */
.lpt-sub{
  font-family:var(--font-body); font-size:11px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:#4C6657;
  margin:.15rem 0 .75rem; line-height:1.6;
}
/* Cada idea en su propio renglón: son frases largas y en fila se parten a la
   mitad, que es justo lo que las volvía ilegibles. La de "Otro" cierra abajo. */
#lptScenes{ flex-direction:column; align-items:stretch; gap:.45rem }
#lptScenes > .pill{ align-self:flex-start; max-width:100%; text-align:left; line-height:1.45 }
.lpt-scenes-fin{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-top:.15rem }
#lptScenes .lpt-otro{ width:100%; margin-top:.2rem }

/* ═════════ 23 ago (2) · el retrato, sobre papel de lino ═════════
   El lino ya no viste la banda: viste EL RETRATO, y va por ENCIMA de todo —
   acuarela incluida— para que la tarjeta se sienta impresa sobre tela, como
   las portadas Keepsake. En pantalla se logra con una capa en soft-light; en
   la imagen que se exporta, tejiendo la trama sobre el lienzo (ver tejerLino
   en kora-landing.js), para que lo que se comparte se vea igual. */
.lpt-book::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:18px;
  /* EL MISMO LINO DE LAS PORTADAS KEEPSAKE (.k2-cover-keep): dos turbulencias
     cruzadas —una tendida a lo ancho, otra a lo largo— que dan hilo irregular.
     Antes eran tres repeating-linear-gradient a 3px y se veía lo que era: una
     cuadrícula. La tela de verdad no tiene el hilo perfectamente alineado. */
  background-image:
    var(--lino);
  background-size:200px 200px;
  /* MULTIPLY, no soft-light: en soft-light la trama solo aparecía sobre la
     acuarela y desaparecía sobre el papel —que es casi blanco—, o sea al revés
     de lo que se busca, porque el papel es el que tiene tela. Multiply oscurece
     un pelo TODO por igual. A .14 se lee en los dos sin ensuciar ninguno. */
  mix-blend-mode:multiply;
  opacity:.14;
}
.lpt-book::after{ z-index:3 }   /* el marco arena queda por encima de la tela */

/* ═════════ El blob de "pintando", a la escala de lo que va a entregar ═════════
   Se quedó en 158 px cuando la acuarela creció a 420: parecía una moneda en un
   hueco grande. Ahora ocupa lo que va a ocupar la pintura. */
.lpt-blob{ width:250px; height:250px; padding:1.6rem }
.lpt-blob-txt{ font-size:13px }
@media (max-width:600px){ .lpt-blob{ width:200px; height:200px } }

/* ═════════ Los estilos de ilustración, en voz baja ═════════
   Mientras editas tienen que estar a la mano, pero eran tres tarjetas grandes
   que competían con la acuarela. Ahora son una fila discreta que se enciende
   al acercarte; el estilo activo siempre se ve, aunque no la toques. */
.lpt-styles{ gap:.3rem; margin-top:.6rem; opacity:.62; transition:opacity .18s }
.lpt-styles:hover, .lpt-styles:focus-within{ opacity:1 }
.lpt-style{ min-width:0; padding:.28rem .45rem .32rem; gap:3px;
  border-color:transparent; font-size:9px; letter-spacing:.1em }
.lpt-style-img{ width:32px; height:32px; border-radius:7px }
.lpt-style:hover{ border-color:var(--sand-light) }
.lpt-style.on{ opacity:1; background:none; border-color:var(--sage); color:#4C6657 }
.lpt-style.on .lpt-style-img{ outline:1.5px solid var(--sage); outline-offset:1px }

/* Guardar y compartir, uno junto al otro */
.lpt-share{ display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap }

/* La crucecita: existe sin pesar. Discreta y en el margen, para que quien no la
   necesita casi no la vea, y quien sí, la encuentre sin tener que buscarla. */
/* Era texto pelón y nadie sabía que se podía elegir. Ahora es una pill con la
   misma forma que las demás de la prueba: si se ve como las que se seleccionan,
   se entiende que se selecciona. */
.lpt-memoria{
  display:inline-flex; align-items:center; gap:.42em;
  margin:.65rem 0 0; padding:.5rem 1rem;
  background:var(--white,#fff); border:.5px solid var(--sand-light); border-radius:2px;
  cursor:pointer; font-family:var(--font-body); font-size:12px; letter-spacing:.06em;
  color:var(--taupe); transition:all .2s;
}
.lpt-memoria:hover{ border-color:var(--clay); color:var(--clay) }
.lpt-memoria.on{ background:#4C6657; border-color:#4C6657; color:var(--white,#fff) }


/* El botón grande va POR ENCIMA del lino: es un control, no algo impreso en el
   papel. Lo mismo los controles de versión y las dos salidas. */
.lpt-book .lpt-next, .lpt-book .lpt-share, .lpt-book .lpt-ctrl{ position:relative; z-index:4 }

/* La foto real se muestra al 85%: es una fotografía enmarcada, no una pintura
   a sangre, y a tamaño completo pesaba de más. */
.lpt-art-img.foto{ width:85%; margin:0 auto }

/* ═════════ La vista previa antes de guardar o compartir ═════════ */
.lpt-prev-ov{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:center; justify-content:center; padding:1.2rem;
  background:rgba(50,42,34,.42); backdrop-filter:blur(3px);
}
.lpt-prev-ov.on{ display:flex }
.lpt-prev{
  position:relative; background:var(--white); border-radius:16px;
  padding:.9rem .9rem 1rem; max-width:min(420px, 92vw);
  box-shadow:0 34px 70px -30px rgba(40,32,22,.72);
  display:flex; flex-direction:column; gap:.8rem; align-items:center;
}
.lpt-prev img{ display:block; width:100%; max-height:min(66vh,720px); object-fit:contain; border-radius:8px }
.lpt-prev-btns{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center }
.lpt-prev-x{
  position:absolute; top:-12px; right:-12px; width:30px; height:30px; border-radius:50%;
  background:var(--white); border:.5px solid var(--sand-light); color:var(--clay);
  font-size:14px; line-height:1; cursor:pointer; box-shadow:0 6px 16px -8px rgba(40,32,22,.5);
}
.lpt-prev-x:hover{ color:var(--dark) }

/* ── KORA · 26 ago 2026 · EL REVELADO ──────────────────────────────────────
   La primera vez que su historia se ve como libro. Pantalla completa, sin nada
   de interfaz encima. La penumbra es un pardo cálido —no negro y no café— y
   sube a claro cuando llega la acuarela: la luz y la pintura entran juntas. */
/* La penumbra: un pardo cálido, no negro y no café. Se neutralizó un punto y se
   subió de luz — #463E37 pesaba demasiado y tiraba a chocolate; este deja
   respirar el libro sin dejar de ser un cuarto en penumbra. */
/* El lino de la casa: dos turbulencias cruzadas, una tendida a lo ancho y otra
   a lo largo. Está en las portadas, en el retrato de la prueba y sobre las
   ilustraciones — vive aquí para que sea LA MISMA tela en todas. */
:root{ --penumbra:#514C48;
  --lino:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='0.6 0.04' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.7'/></feComponentTransfer></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.04 0.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.7'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)' opacity='0.65'/></svg>") }
.rev-ov{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,5vw,64px);
  background:var(--penumbra);
  opacity:0; pointer-events:none;
  transition:opacity .6s ease, background-color 1.15s ease;
}
.rev-ov.on{ opacity:1; pointer-events:auto }
.rev-ov.rev-claro{ background:var(--linen) }
body.rev-abierto{ overflow:hidden }

/* El color del texto cambia con la luz, no con cada elemento. */
.rev-ov{ color:var(--linen); transition:opacity .6s ease, background-color 1.15s ease, color 1.15s ease }
.rev-ov.rev-claro{ color:var(--dark) }

.rev-escena{ width:100%; max-width:1080px; display:flex; align-items:center; justify-content:center }
.rev-entra{ animation:revEntra 1.1s cubic-bezier(.22,.61,.36,1) both }
@keyframes revEntra{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .rev-entra{ animation:revFade .5s both }
  @keyframes revFade{ from{opacity:0} to{opacity:1} }
}

/* Lo que se dice: entrada y salida. */
.rev-dicho{ text-align:center; font-family:var(--font-display); font-weight:300;
  font-size:clamp(28px,4.6vw,52px); line-height:1.28; letter-spacing:.005em }
.rev-dicho p{ margin:0 }
.rev-dicho .rev-dicho-2{ font-size:.62em; opacity:.82; margin-top:.7em }

/* ── LA ANTESALA · «Nadie cabe entero…» ───────────────────────────────────────
   11 sep 2026 · Vivi, desde el iPhone: "que empiece con «Nadie cabe entero…» y
   que luego se revele la segunda frase, tal vez con unas estrellas de acuarela
   pintándose arriba".
   Las dos frases llegaban juntas y juntas se leen como una sola cosa larga.
   Separadas se leen como lo que son: una afirmación, y después lo que se hace
   con ella. La segunda entra a los cuatro segundos, no a los quinientos
   milisegundos.
   Las estrellas son las de la casa (/img/acuarelas-kids/stars.png) usadas como MÁSCARA, no como
   imagen: así toman el color de la lámina —tinta clara sobre la penumbra— en
   vez del amarillo de Kids, que en el libro de alguien que acaba de morir
   diría otra cosa. Se pintan de abajo hacia arriba, desenfocadas al principio,
   como una aguada que se asienta: eso es lo que hace que algo esté PASANDO
   mientras la acuarela de verdad se pinta en otro lado. */
.rev-antesala{ position:relative }
.rev-estrellas{
  display:block; width:clamp(120px,20vw,210px); aspect-ratio:1/1;
  margin:0 auto clamp(18px,3.5vh,40px);
  background:currentColor; opacity:.5;
  -webkit-mask-image:url(/img/acuarelas-kids/stars.png); mask-image:url(/img/acuarelas-kids/stars.png);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  animation:revPinta 2.8s cubic-bezier(.3,.7,.3,1) .2s both;
}
@keyframes revPinta{
  from{ clip-path:inset(100% 0 0 0); filter:blur(9px); opacity:0 }
  60% { opacity:.5 }
  to  { clip-path:inset(0 0 0 0);   filter:blur(0);   opacity:.5 }
}
.rev-antesala .rev-ant-1{ animation:revSube 1.1s cubic-bezier(.22,.61,.36,1) 1.5s both }
.rev-antesala .rev-ant-2{ animation:revSube 1.2s cubic-bezier(.22,.61,.36,1) 4.4s both }
/* La lámina ya trae su propia entrada escalonada: la del contenedor la duplica. */
.rev-entra:has(.rev-antesala){ animation:none }
@media (prefers-reduced-motion:reduce){
  .rev-estrellas{ animation:none; clip-path:none; filter:none; opacity:.45 }
  .rev-antesala .rev-ant-1, .rev-antesala .rev-ant-2{ animation:none }
}

/* ── EL FINAL · su portada, vestida de tomo ───────────────────────────────────
   Hasta hoy el último tiempo era la FOTO de un libro de verdad con la acuarela
   encajada por homografía — y esa foto trae impreso «Nuestra Historia», su
   subtítulo y «Kora», sobre un fondo blanco de estudio. En el homenaje, la
   lámina que cierra la ceremonia enseñaba la portada de otro libro.
   11 sep · Vivi: "el libro final tiene que ser un libro de lino liso sin nada
   de texto, para poderle poner el título y el nombre real, y quitarle el fondo
   blanco". Un libro de lino liso con el título real ya existe y lo hicimos
   nosotros: es SU portada, la que se va a imprimir. Aquí solo se le pone
   cuerpo — canto de hojas a la derecha, lomo a la izquierda— para que se lea
   como objeto y no como página. El fondo blanco se va solo: no había fondo,
   había estudio. */
.rev-libro.rev-tomo .spread > *{
  position:relative;
  box-shadow:
    2px 0 0 rgba(255,255,255,.55),        /* el canto de las hojas */
    5px 0 0 rgba(232,224,210,.5),
    8px 0 0 rgba(206,195,176,.42),
    -3px 0 0 rgba(0,0,0,.16),             /* el lomo, en sombra */
    0 42px 90px -40px rgba(0,0,0,.72);
}
@media (max-width:600px){
  .rev-libro.rev-tomo .spread > *{
    box-shadow:
      2px 0 0 rgba(255,255,255,.55),
      4px 0 0 rgba(232,224,210,.5),
      -2px 0 0 rgba(0,0,0,.16),
      0 30px 60px -30px rgba(0,0,0,.72);
  }
}

/* Tiempo 1 · la portadilla. Su nombre, y nada más. */
.rev-portadilla{ text-align:center }
.rev-kicker{ font-family:var(--font-body); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; opacity:.6; margin:0 0 1.1rem }
.rev-titulo{ font-family:var(--font-display); font-weight:300;
  font-size:clamp(34px,6vw,72px); line-height:1.12; margin:0; text-wrap:balance }
.rev-sub{ font-family:var(--font-body); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; opacity:.55; margin:1.3rem 0 0 }

/* Tiempo 2 · la acuarela. Sin marco: la pintura sola sobre la luz. */
.rev-acuarela{ margin:0; display:flex; align-items:center; justify-content:center }
.rev-acuarela img{
  max-width:min(560px,78vw); max-height:70vh; width:auto; height:auto;
  display:block; border-radius:2px;
  box-shadow:0 30px 70px -34px rgba(40,32,22,.5);
}

/* Tiempo 3 · la dedicatoria, en papel y en Cormorant. */
.rev-papel{
  background:var(--white,#fff); color:var(--dark);
  padding:clamp(38px,6vw,74px) clamp(30px,7vw,86px);
  max-width:660px; width:100%;
  box-shadow:0 34px 80px -40px rgba(40,32,22,.55);
}
/* 11 sep 2026 · Vivi, desde el iPhone: "la primera tarjeta que sea vertical,
   3:4, de lino y con más texto".
   Era una hoja apaisada y blanca, o sea una pantalla — y una dedicatoria no se
   lee en una pantalla, se lee en la primera página de un libro, que es alta.
   El 3:4 de pie es la proporción del libro; el lino es la tela de la casa (la
   misma textura de la tapa, en su tono); y el texto crece porque en una tarjeta
   alta hay sitio para que crezca. En un teléfono la tarjeta ocupa casi todo el
   alto disponible, que es exactamente lo que se quería. */
.rev-papel-dedic{
  position:relative; background:var(--linen,#F7F3EA);
  aspect-ratio:3/4; width:min(560px,88vw); max-height:84dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(30px,5vh,62px) clamp(26px,5vw,58px);
  border-radius:2px; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(40,32,22,.66);
}
/* La tela va ENCIMA, en multiply, como en las tapas: es la misma textura de la
   casa y así toma el tono del papel en vez de pintarse sobre él. */
.rev-papel-dedic::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--lino); background-size:150px 150px;
  mix-blend-mode:multiply; opacity:.15;
}
.rev-papel-dedic > *{ position:relative; z-index:1 }
/* La medida corta a propósito: una dedicatoria se lee en renglones que caben
   de un vistazo, y con el ancho del papel entero se partían a media frase. */
.rev-dedic{ font-family:var(--font-display); font-weight:300;
  font-size:clamp(17px,1.95vw,23px); line-height:1.78; text-align:center;
  max-width:46ch; margin:0 auto; text-wrap:pretty }
.rev-papel-dedic .rev-dedic{ font-size:clamp(20px,2.5vh,28px); line-height:1.82; max-width:34ch }
.rev-papel-dedic .rev-dedic.rev-cierre{ font-size:clamp(23px,3vh,33px); margin-top:1.5rem }
.rev-papel-dedic .rev-firma{ margin-top:2.2rem }
.rev-firma{ font-family:var(--font-body); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sand); text-align:center; margin-top:1.8rem }

/* Tiempo 5 · el verso. Lo único que demuestra que Kora escribe. */
.rev-verso{ text-align:center; font-family:var(--font-display); font-weight:300;
  font-size:clamp(20px,2.7vw,32px); line-height:1.62; max-width:760px }
.rev-verso p{ margin:0 }
.rev-verso p+p{ margin-top:.12em }

/* La portada y el spread, con el mismo HTML del editor. */
.rev-libro{ width:100%; display:flex; align-items:center; justify-content:center }
/* CONSERVA las hojas de atrás: esta regla las estaba borrando, y por eso el
   spread se veía plano —una imagen, no un libro abierto—. Solo se le cambia la
   sombra ambiental, que sobre la penumbra tiene que ser más honda. */
.rev-libro .spread{ transform-origin:center; box-shadow:var(--hojas), 0 46px 100px -38px rgba(0,0,0,.75) }
/* La PORTADA va sola sobre la penumbra: una portada es un objeto, no una
   página, y la hoja blanca de atrás la volvía un recuadro recortado. La sombra
   se la queda la tapa misma, para que se sienta apoyada y no pegada. */
.rev-libro.rev-portada .spread{ background:transparent; box-shadow:none; padding:0 }
.rev-libro.rev-portada .spread > *{ box-shadow:0 42px 90px -40px rgba(0,0,0,.72) }
/* …salvo cuando va vestida de tomo, que es el último tiempo de la ceremonia:
   ahí la sombra la lleva el cuerpo del libro (ver .rev-tomo, más arriba). Esta
   regla vive DESPUÉS en el archivo, así que había que devolverle el turno. */
.rev-libro.rev-portada.rev-tomo .spread > *{ box-shadow:
  2px 0 0 rgba(255,255,255,.55),
  5px 0 0 rgba(232,224,210,.5),
  8px 0 0 rgba(206,195,176,.42),
  -3px 0 0 rgba(0,0,0,.16),
  0 42px 90px -40px rgba(0,0,0,.72) }
@media (max-width:600px){
  .rev-libro.rev-portada.rev-tomo .spread > *{ box-shadow:
    2px 0 0 rgba(255,255,255,.55),
    4px 0 0 rgba(232,224,210,.5),
    -2px 0 0 rgba(0,0,0,.16),
    0 30px 60px -30px rgba(0,0,0,.72) }
}

/* Los tres puntos de "preparando": el cuarto no se abre de golpe. */
.rev-pensando{ display:flex; gap:11px; align-items:center; justify-content:center }
.rev-pensando span{
  width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.28;
  animation:revLatir 2s ease-in-out infinite;
}
.rev-pensando span:nth-child(2){ animation-delay:.28s }
.rev-pensando span:nth-child(3){ animation-delay:.56s }
@keyframes revLatir{ 0%,100%{opacity:.2;transform:translateY(0)} 45%{opacity:.75;transform:translateY(-4px)} }
@media (prefers-reduced-motion:reduce){ .rev-pensando span{ animation:none; opacity:.4 } }
@media (max-width:900px){ .rev-libro .spread{ transform:scale(.62) } }
@media (max-width:600px){ .rev-libro .spread{ transform:scale(.42) } }

/* La salida siempre disponible, discreta, en una esquina. */
.rev-salir{
  position:absolute; right:clamp(14px,3vw,30px); bottom:clamp(14px,3vw,30px);
  background:none; border:none; color:currentColor; opacity:.42;
  font-family:var(--font-body); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; padding:.6rem .2rem; transition:opacity .3s;
}
.rev-salir:hover{ opacity:.85 }

.rev-salida{ display:flex; flex-direction:column; align-items:center; gap:2.6rem }
/* Claro sobre la penumbra: el barro sobre el pardo se apagaba y el único botón
   de toda la secuencia tiene que leerse sin esfuerzo. */
.rev-seguir{
  font-family:var(--font-body); font-size:12px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--dark); background:var(--linen);
  padding:1rem 2.8rem; border:none; font-weight:400;
  transition:background .3s, color .3s;
}
.rev-seguir:hover{ background:var(--white,#fff) }
/* En la salida, "Volver al libro" diría lo mismo que el botón grande. */
.rev-ov.rev-fin .rev-salir{ opacity:0; pointer-events:none }

/* ── KORA · 26 ago 2026 · Los retratos en la biblioteca ────────────────────
   Un retrato no es un libro: no se edita ni se compra, así que tiene su propio
   chip y su propia etiqueta, y al tocarlo se abre para verse, no en el editor. */
.lib-pill.ret{ background:#4C6657; color:var(--linen) }

.ret-ov{
  position:fixed; inset:0; z-index:9200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(18px,4vw,52px);
  background:color-mix(in srgb, var(--penumbra) 94%, transparent);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.ret-ov.on{ opacity:1; pointer-events:auto }
.ret-caja{ position:relative; max-width:min(560px,92vw); max-height:88vh; display:flex }
.ret-caja img{
  max-width:100%; max-height:88vh; width:auto; height:auto; display:block;
  box-shadow:0 34px 80px -40px rgba(0,0,0,.7);
}
.ret-x{
  position:absolute; top:-42px; right:0;
  background:none; border:0; color:var(--linen); opacity:.6;
  font-size:15px; line-height:1; padding:.5rem; transition:opacity .2s;
}
.ret-x:hover{ opacity:1 }

/* El tercer botón de la previa no cabía en una fila de dos en el celular. */
@media (max-width:520px){
  .lpt-prev-btns{ flex-wrap:wrap }
  .lpt-prev-btns .lpt-sharebtn{ flex:1 1 46%; min-width:0 }
  .lpt-prev-btns #lptPrevCuenta{ flex:1 1 100% }
}

/* ── KORA · 26 ago 2026 · La puerta de la semilla ──────────────────────────
   El momento de menos confianza que tiene Kora es el primero: alguien que
   todavía no sabe si esto vale su tiempo. Abrir con un formulario es pedir
   antes de dar. Así que la primera pantalla no pregunta nada. */
.k2new .k2-antes{
  min-height:min(62vh,560px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.2rem; padding:2rem 0 1rem;
  transition:opacity .5s ease, transform .5s ease;
}
/* 11 sep 2026 · Vivi, desde el iPhone: "la frase de apertura debería verse
   impresa en una tarjeta de lino, con el fondo arena y el texto sobre la
   tarjeta".
   Suelta sobre el papel se leía como el encabezado de la pantalla que sigue —
   y no lo es: es lo único que hay antes de que empiece nada, y por eso tiene
   que ser un OBJETO. Sobre una tarjeta de lino pasa a ser algo impreso que
   alguien dejó ahí, que es exactamente el tono con el que abre Kora.
   El fondo de la puerta se va a arena para que la tarjeta tenga de dónde
   despegarse: sin eso, papel sobre papel, no hay tarjeta que valga. */
.k2new .k2-antes{ background:var(--k2-arena); border-radius:16px; padding:clamp(2rem,6vw,3.4rem) 1.2rem }
.k2new .k2-antes-card{
  position:relative; background:var(--linen,#F5F0E8);
  border-radius:3px; padding:clamp(2.2rem,6vw,3.6rem) clamp(1.6rem,5vw,3.2rem);
  max-width:min(560px,100%);
  box-shadow:0 18px 40px -26px rgba(56,46,32,.55), 0 1px 0 rgba(255,255,255,.5) inset;
}
/* La tela de la casa, encima y en multiply: la misma de las tapas. */
.k2new .k2-antes-card::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:3px;
  background-image:var(--lino); background-size:150px 150px;
  mix-blend-mode:multiply; opacity:.17;
}
.k2new .k2-antes p{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(23px,3.2vw,38px); line-height:1.3; color:var(--dark);
  margin:0; max-width:22ch; text-wrap:balance;
}
.k2new .k2-antes .k2-antes-2{ color:var(--taupe); margin-top:.45em }
.k2new .k2-antes .k2-btn-primary{ margin-top:2.4rem }
/* Al abrirse, la puerta se va y aparece la forma. */
.k2new .k2-antes.fuera{ opacity:0; transform:translateY(-10px); pointer-events:none;
  min-height:0; height:0; padding:0; overflow:hidden }
.k2new #k2SeedKick, .k2new #k2SeedTitle, .k2new .k2-lede, .k2new .k2-form{
  opacity:0; pointer-events:none; max-height:0; overflow:hidden;
  transition:opacity .55s ease .15s;
}
.k2new.k2-abierta #k2SeedKick, .k2new.k2-abierta #k2SeedTitle,
.k2new.k2-abierta .k2-lede, .k2new.k2-abierta .k2-form{
  opacity:1; pointer-events:auto; max-height:none; overflow:visible;
}

/* ── KORA · 26 ago 2026 · "Tu libro está cobrando vida" ────────────────────
   No dice cuánto falta —eso pesa y empuja a "lo haré después"— sino cuánto ya
   existe. Portada y dedicatoria cuentan desde el primer segundo: nadie empieza
   en cero, porque el libro ya arrancó antes de contestar nada. */
/* 16 sep 2026 · SE MUDÓ AL ENCABEZADO. Era un renglón entero encima del libro
   —barra, frase y número, centrados, con su propio margen— y en un editor donde
   lo que importa es la hoja, cada fila horizontal se paga en alto de spread.
   Ahora va pegada al título, en pequeño: dice lo mismo y no cuesta una fila.
   `medirCromo()` lo recoge solo, porque el encabezado sí se mide. */
.kvida{ display:none }
.kvida.on{
  display:flex; align-items:center; gap:.55rem;
  width:min(150px,22vw); margin:0; padding:0;
}
.kvida-barra{ flex:1; height:3px; background:var(--sand-light); border-radius:2px; overflow:hidden }
.kvida-barra i{ display:block; height:100%; background:var(--clay); border-radius:2px;
  transition:width .8s cubic-bezier(.22,.61,.36,1) }
.kvida-n{ font-family:var(--font-body); font-size:9.5px; letter-spacing:.08em;
  color:var(--taupe); font-variant-numeric:tabular-nums; white-space:nowrap }
@media (prefers-reduced-motion:reduce){ .kvida-barra i{ transition:none } }

/* La misma idea en cada tarjeta de la biblioteca: de un vistazo se ve cuál
   está cerca de terminarse, que es justo el empujón que hace falta. */
.lib-vida{ height:3px; background:var(--sand-light); border-radius:2px; overflow:hidden; margin-top:.6rem }
.lib-vida span{ display:block; height:100%; background:var(--clay); border-radius:2px }
.lib-vida-n{ font-family:var(--font-body); font-size:10px; letter-spacing:.1em;
  color:var(--sand); margin-top:.35rem; font-variant-numeric:tabular-nums }

/* ── KORA · 26 ago 2026 · Ronda de afinación del editor ────────────────────

   1 · LA PORTADA INTERIOR. "Kora" iba pegado al canto —parecía que no cabía— y
   el título era lo único negro de la hoja, así que brincaba sobre una página
   que en todo lo demás es de tinta suave. */
.cover-pg.cover-sheet .cover-emboss{ color:#4A4038 }
.cover-pg.cover-sheet .ckora{ margin-top:auto; padding-bottom:1.6cqw }

/* 3 · El aviso de guardado del panel se leía muy chico para lo que dice. */
/* Cormorant es ópticamente chica: 14.5px se leían como 12. Sube a 16 sin
   cambiar la familia, que es la que le da el tono de nota al margen. */
.panel-vault p{ font-size:16px; line-height:1.62 }

/* 4 · Menos altura, mismo texto. Los controles del editor tenían aire de sobra
   alrededor de letras que no crecieron; ese aire se le pasa a la caja de la
   pregunta abierta, que es donde de verdad hace falta espacio para escribir. */
.sn-next, .sn-corner{ padding-top:.72rem; padding-bottom:.72rem }
/* OJO: los 38px de alto de las pills venían de la ronda de usabilidad 65+ —
   26px era imposible de atinar. Esto las baja a 34, que sigue siendo un blanco
   cómodo, sin tocar el tamaño de la letra: lo que sobraba era aire, no texto.
   Si en pruebas con gente cuesta atinarles, este es el número que subir.
   El valor vive en el \3c style> de index.html, que es donde la escala del editor
   fija las pills del panel; cambiarlo aquí no serviría porque el estilo en
   línea gana siempre. Ahí está cambiado. */
.panel .pills{ gap:.34rem }
#s2 .pq-next{ padding:.72em 1em; min-height:max(42px,2.7em) }
/* El aviso de guardado crece CON la escala, no contra ella: si algún día se
   sube --ed-texto, este sigue proporcional en vez de quedarse fijo. */
#s2 .panel-vault p{ font-size:calc(var(--ed-texto) * 1.2) }
.pq-field{ margin-bottom:.4rem }
/* 13 sep 2026 · la caja arranca en tres renglones y crece con lo que se
   escribe (pqAlto, en app.js). Los 132 px fijos eran de cuando los topes eran de
   200 caracteres; con topes de 500 a 900 ese hueco vacío se lee como una tarea.
   El alto real lo pone el navegador con `rows`, así que aquí solo se quita el
   piso — dejarlo ganaría siempre y la caja no podría ser chica. */
.panel .pq-input.pq-area, .panel textarea.pq-input{ min-height:0; line-height:1.6 }

/* 5 · Las cinco ideas, una por renglón; el sexto lo comparten "Otro…" y
   "otras opciones". Mismo criterio que en la prueba del landing: son frases
   largas y en fila se parten a la mitad. */
.pq-v2 .pills{ flex-direction:column; align-items:stretch; gap:.4rem }
.pq-v2 .pills > .pill{ align-self:flex-start; max-width:100%; text-align:left; line-height:1.45 }
.pq-ctx-fin{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.15rem }
.pq-ctx-fin .pill{ align-self:auto }
/* El "otras opciones" traía un margin-top propio de cuando iba en su renglón;
   dentro de la fila final lo empujaba hacia abajo y la partía en dos. */
.pq-ctx-fin .pq-v2-more{ margin-top:0 }

/* 7 · "Pintando…" sobre la pill del estilo que se está aplicando. La foto real
   es inmediata; la acuarela tarda, y sin señal parece que no registró el toque. */
.kfont-op.pintando{ color:var(--clay); pointer-events:none }
.kfont-op.pintando .k2-st-img{ opacity:.45; animation:estLatir 1.6s ease-in-out infinite }
@keyframes estLatir{ 0%,100%{opacity:.35} 50%{opacity:.7} }
.est-dots{ display:inline-block; width:1.1em; text-align:left; font-style:normal }
.est-dots::after{ content:"·"; animation:estPuntos 1.4s steps(3,end) infinite }
@keyframes estPuntos{ 0%{content:"·"} 33%{content:"··"} 66%{content:"···"} }
@media (prefers-reduced-motion:reduce){
  .kfont-op.pintando .k2-st-img{ animation:none }
  .est-dots::after{ animation:none; content:"···" }
}

/* ── KORA · 26 ago 2026 · lo que va DETRÁS de la acuarela ─────────────────────
   Vivi: «en la portada que lleva acuarela sí debe llevar un fondo blanco dentro
   del marco color arena.. pero no es un marco más, es todo el fondo que va
   detrás de la acuarela».
   La distinción es la que importa: NO es otro recuadro concéntrico —eso ya se
   quitó y por buenas razones— sino la lámina de papel que llena el marco de
   punta a punta. La acuarela es un PNG con fondo transparente y va con
   object-fit:contain, así que lo que se veía alrededor era el lino crudo de la
   tapa y la pintura parecía flotar. Ahora se imprime sobre papel. */
.cover-sheet .cover-ph.cover-ph-papel{ background:var(--white) }
/* El lino sigue pasando POR ENCIMA (el ::before de arriba, multiply .16): el
   papel es de la casa, no una calcomanía blanca pegada en la tela. */

/* ── EL REVELADO · la acuarela y el verso, los dos en papel ───────────────────
   1) La acuarela iba suelta sobre la luz. Con la hoja debajo respira por los
      cuatro lados y se ve lo que es: una lámina impresa, no un archivo.
   2) El verso ocupaba la lámina entera —renglones de pared a pared— y así no se
      lee: se recorre. Va en la MISMA hoja que la dedicatoria (.rev-papel), con
      la medida corta que ya estaba probada ahí. */
.rev-acuarela{
  background:var(--white); padding:clamp(26px,4.4vw,52px);
  box-shadow:0 34px 80px -40px rgba(40,32,22,.55);
}
.rev-acuarela img{ box-shadow:none; max-height:58vh; border-radius:0 }
/* La hoja del verso NO es la misma medida que la de la dedicatoria, aunque sea
   el mismo papel. Una dedicatoria es prosa y quiere renglones cortos; un verso
   Kora es una línea entera —"Y entonces, un día cualquiera, sus caminos se
   volvieron a cruzar:", 65 caracteres— y partirla por la mitad lo convierte en
   prosa mal maquetada. Así que aquí la hoja es más ancha, el margen lateral más
   angosto y el cuerpo más chico: lo justo para que el renglón más largo que
   escribe Kora (~78 caracteres) quepa de una sola pieza en pantalla de escritorio.
   Abajo de eso sí se parte, y por eso va balance: se reparte en dos mitades
   parejas en vez de dejar una palabra huérfana colgando. */
.rev-papel-verso{
  max-width:880px;
  padding-left:clamp(24px,4vw,54px); padding-right:clamp(24px,4vw,54px);
  /* Más aire arriba y abajo que la dedicatoria: con el margen lateral angosto y
     cuatro renglones, la hoja quedaba de banner. Una hoja tiene que parecer
     hoja. */
  padding-top:clamp(52px,7.5vw,96px); padding-bottom:clamp(52px,7.5vw,96px);
}
.rev-papel-verso .rev-verso{
  max-width:none; margin:0 auto;
  font-size:clamp(15px,1.6vw,23px); line-height:1.72; text-wrap:balance;
}
.rev-papel-verso .rev-verso p+p{ margin-top:.2em }

/* ── KORA · 26 ago 2026 · el umbral («Antes de empezar») ──────────────────────
   Vivi lo reescribió a mano y el resultado NO es verso: son frases enteras
   cortadas donde la voz respira. Eso cambia dos cosas en la hoja.

   1) LOS RENGLONES SON MÁS LARGOS que un verso Kora, y el último —el pivote—
      lleva los nombres de los hijos. Con la medida y el cuerpo de siempre no
      cabía, y el navegador partía por el último espacio: "…convertirse en
      Sienna, / Alina y Lia.". Partir a una familia entre dos renglones es el
      único desperfecto que de verdad se nota en esta página.
   2) LA MEDIDA: 3% de caja y un cuerpo un punto más chico. Con eso el renglón
      del pivote entra completo hasta en familias de tres hijos, que es donde
      estábamos partiendo.
   El resto del libro no se toca: todo vive detrás de .sp-cero.

   DOS COSAS QUE NO FUNCIONARON, para no volver a intentarlas:
   · Una regla de CLASE no le gana al cuerpo del verso: lo pone
     `#s2 .spread:not(.single) .verse` y un ID gana siempre (probado — el verso
     seguía en 18.3px como si nada). Por eso estas dos van con #s2.
   · `text-wrap:balance` tampoco: con <br> duros adentro del <p>, Chrome se
     rinde y parte igual de mal ("…Sienna, Alina / y Lia.", peor todavía).
   Lo que sí resuelve el corte en familias grandes son los espacios duros que
   pone unirHijos() en app.js; esto solo le da medida. */
#s2 .spread.sp-cero .pg{ padding-left:3%; padding-right:3% }

/* ── Y LA HOJA NO SE LEE COMO EL CAPÍTULO UNO ─────────────────────────────
   Vivi: «ahorita tiene formato idéntico al de cualquier otro capítulo del
   libro, entonces sí se lee como el primer capítulo».
   Tenía razón y el diagnóstico es exacto: quitarle el título no alcanzaba,
   porque TODO lo demás seguía siendo el lenguaje de un capítulo — la redonda
   del verso, el color del texto, la flechita del final.
   La solución no es inventarle un estilo nuevo: es MUDARLO al lenguaje que este
   libro ya usa para lo que va antes de la historia, que es el de la dedicatoria
   —cursiva, taupe, medida corta, mucho aire—. Así se entiende sin explicar
   nada: quien lo ve sabe que todavía está en las primeras páginas.
   · CURSIVA: es la marca de epígrafe de toda la vida. Un lector la reconoce
     antes de leer una palabra.
   · TAUPE en vez del oscuro del verso: el texto de la historia pesa más que el
     de la puerta, y tiene que notarse.
   · MÁS AIRE y medida más corta: una página de umbral respira; una de capítulo
     está llena.
   · SIN FLECHA al pie (se quita en app.js): esa flecha dice "sigue", y aquí no
     sigue nada todavía. */
#s2 .spread.sp-cero .verse{
  font-style:italic;
  color:var(--taupe);
  line-height:1.92;
  max-width:84%;
  margin-inline:auto;
}
/* La cursiva de Cormorant camina más angosta que la redonda, así que aquí sí
   cabe un cuerpo un poco mayor sin volver a partir el renglón del pivote. */
#s2 .spread.sp-cero .verse{ font-size:clamp(12px,1.62cqw,21px) }
#s2 .spread.sp-cero .pg{ padding-top:9%; padding-bottom:9% }
/* Entre bloques, el doble de aire que en un capítulo: son tres respiros, no
   tres estrofas. */
#s2 .spread.sp-cero .verse p{ margin-bottom:1.5rem }
#s2 .spread.sp-cero .verse p:last-child{ margin-bottom:0 }

/* ═══ RONDA 26 AGO 2026 · selector de forma (solo pruebas) ═══
   Verso rimado ↔ prosa rítmica dentro de la barra de control del editor.
   Discreto a propósito: es un control de laboratorio, no de producto, y no
   puede competir con "Otra versión" ni con el botón de avanzar capítulo. */
.ctrl-lab{display:flex;align-items:center;gap:.3rem}
.ctrl-lab-tag{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);opacity:.65;padding-right:.15rem}
.ctrl-lab-op{font-size:11.5px;letter-spacing:.02em;color:var(--taupe);background:transparent;border:1px solid transparent;border-radius:999px;cursor:pointer;padding:.22rem .55rem;white-space:nowrap;transition:.2s}
.ctrl-lab-op:hover{color:var(--dark)}
.ctrl-lab-op.on{color:var(--dark);border-color:var(--sand-light);background:var(--cream,#faf7f2)}
@media (max-width:640px){ .ctrl-lab-tag{display:none} .ctrl-lab-op{font-size:11px;padding:.2rem .45rem} }

/* El año junto al nombre, en el mismo renglón: la semilla no puede crecer a lo
   alto — cada renglón de más es una razón más para cerrarla. Mismo patrón que
   el renglón de los hijos (.k2-kidrow). */
.k2new .k2-namerow{display:flex;align-items:center;gap:8px}
.k2new .k2-namerow input[type="text"]{flex:1;min-width:0}
/* OJO: tiene que ir con `input.k2-yr`, no con `.k2-yr` a secas. El renglón de
   arriba es `input[type="text"]` —tres clases MÁS un atributo— y le ganaba a la
   clase sola, así que el año salía del mismo ancho que el nombre. */
.k2new .k2-namerow input.k2-yr{flex:0 0 84px;min-width:0;text-align:center;letter-spacing:.04em}

/* ── KORA · 27 ago · EL UMBRAL: su ceja y su foto real ────────────────────────
   LA CEJA. Vivi la pidió después de ver la hoja sin nada: no es el título que
   quitamos —ese iba en cursiva grande y anunciaba un capítulo— sino la etiqueta
   de páginas preliminares, calcada del «DEDICATORIA» de la dedicatoria. Dice
   dónde estás parado, no qué viene. */
#s2 .spread.sp-cero .cero-eyebrow{
  font-family:var(--font-body); font-size:clamp(8.5px,1.05cqw,11px);
  letter-spacing:.3em; text-transform:uppercase; color:var(--sand);
  text-align:center; margin-bottom:clamp(1.4rem,3cqw,2.6rem);
}
/* LA FOTO REAL. Misma caja que el blob de acuarela para que la hoja no salte al
   cambiar de capítulo, pero rectangular y con esquinas apenas suavizadas: una
   foto impresa, no una mancha de pintura.
   El lino va ENCIMA, en multiply — es la regla de la casa desde la portada: lo
   que se imprime sobre tela lleva la tela encima, siempre. Sin eso la foto se
   ve pegada sobre el papel en vez de impresa en él. */
.blob.blob-real{ width:84%; aspect-ratio:4/5; margin:auto; position:relative;
  overflow:hidden; border-radius:2px; padding:0; background:transparent;
  box-shadow:0 18px 44px -26px rgba(44,37,32,.55), 0 0 0 1px rgba(120,96,60,.14); }
/* A paño, como la portada: la foto llega al canto y no hay marco blanco
   adentro. El `position:absolute` es para ganarle al `.blob img` de arriba. */
.blob.blob-real img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; max-width:none; max-height:none; margin:0; display:block }
.blob.blob-real .lino-encima{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--lino); background-size:150px 150px;
  mix-blend-mode:multiply; opacity:.16;
}
.blob.blob-real.empty{ display:flex; align-items:center; justify-content:center; background:none }
.blob.blob-real.clickable{ cursor:pointer }

/* ── KORA · 27 ago · EL REVELADO, segunda vuelta ──────────────────────────────
   LA PORTADILLA, más grande y con movimiento. Era un título quieto que se leía
   en dos segundos y dejaba cuatro de nada. Ahora entra en tres tiempos —el
   kicker, el nombre, el subtítulo— y el nombre se abre con un rastro de
   letter-spacing que se cierra: la sensación es que se está imprimiendo.
   Aguanta los 6.5 s que necesitamos porque hay algo pasando todo el rato. */
/* 11 sep 2026 · Vivi, desde el iPhone: "que el título sea más grande, y que su
   movimiento se extienda en el resto del revelado para darnos tiempo mientras
   se genera la primera ilustración".
   Lo segundo es lo importante: una lámina con movimiento propio puede durar
   más sin sentirse detenida, y cada segundo que dura aquí es un segundo que la
   acuarela lleva pintándose. Por eso, después de imprimirse, el nombre NO se
   queda quieto: respira —una escala de menos de un uno por ciento, que no se
   ve pero se siente— mientras la lámina siga en pantalla. */
.rev-titulo{ font-size:clamp(50px,10.5vw,132px); line-height:1.04 }
.rev-entra .rev-kicker{ animation:revSube .9s cubic-bezier(.22,.61,.36,1) both }
.rev-entra .rev-titulo{
  animation:revImprime 2.4s cubic-bezier(.16,.84,.28,1) .35s both,
            revRespira 11s ease-in-out 2.9s infinite;
}
.rev-entra .rev-sub{ animation:revSube 1.1s cubic-bezier(.22,.61,.36,1) 1.5s both }
@keyframes revRespira{
  0%,100%{ transform:scale(1) }
  50%    { transform:scale(1.008) }
}
@media (prefers-reduced-motion:reduce){
  .rev-entra .rev-titulo{ animation:revImprime .01s both }
}
@keyframes revSube{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@keyframes revImprime{
  from{ opacity:0; letter-spacing:.34em; filter:blur(5px) }
  60% { opacity:1 }
  to  { opacity:1; letter-spacing:normal; filter:none }
}
/* La portadilla ya trae su propia entrada escalonada: la del contenedor la
   duplicaba y se veía un doble arranque. */
.rev-entra:has(.rev-portadilla){ animation:none }

/* LA FOTO REAL, impresa en tela. Misma hoja blanca que la acuarela —son las dos
   láminas del mismo libro— pero con el lino ENCIMA de la imagen, que es lo que
   la vuelve impresa y no pegada. Y un pelo más chica que la acuarela: una foto
   dentro de un libro nunca ocupa lo mismo que la ilustración de portada. */
.rev-foto{
  margin:0; position:relative; background:var(--white);
  padding:clamp(22px,3.6vw,44px);
  box-shadow:0 34px 80px -40px rgba(40,32,22,.55);
}
/* La hoja crece hacia abajo para dejarle su renglón a la letra de mano: una
   foto de álbum tiene más margen abajo que arriba, justo por eso. */
.rev-foto{ padding-bottom:clamp(30px,4.6vw,58px) }
.rev-foto img{
  display:block; max-width:min(460px,66vw); max-height:56vh;
  width:auto; height:auto; border-radius:1px;
}
.rev-foto .rev-foto-lino{
  position:absolute; inset:0; pointer-events:none;
  background-image:var(--lino); background-size:150px 150px;
  mix-blend-mode:multiply; opacity:.2;
}

/* La aguada de respaldo, para cuando la familia todavía no sube foto. No es un
   error ni un hueco gris: es una mancha de acuarela de la casa, en los verdes y
   arenas de Kora, con el mismo lino encima que llevaría una foto impresa. */
.rev-aguada{
  width:min(420px,60vw); aspect-ratio:4/5;
  background:
    radial-gradient(58% 46% at 38% 34%, rgba(124,138,106,.42), rgba(124,138,106,0) 70%),
    radial-gradient(48% 40% at 68% 58%, rgba(162,141,95,.34), rgba(162,141,95,0) 72%),
    radial-gradient(70% 60% at 52% 78%, rgba(139,150,118,.26), rgba(139,150,118,0) 76%),
    var(--linen);
}
.rev-foto-vacia .rev-foto-nota{ color:#8B7E6C }

/* ── KORA · 27 ago · LA FOTO CON SU LÍNEA A MANO ──────────────────────────────
   Vivi: «me gustaría agregarle algo de texto ahí para acompañar… en un font más
   natural / cursivo para que se sienta escrito por mamá/papá, como la firma de
   la dedicatoria».
   La letra es Caveat: una mano de todos los días, no una caligrafía de
   invitación. Se sostiene en `--font-mano`, así que cambiarla es una línea —y
   si algún día no te convence, `var(--font-display)` en cursiva devuelve
   exactamente la firma de la dedicatoria, que era la referencia. */
:root{ --font-mano:'Caveat', 'Cormorant Garamond', cursive }
.rev-foto{ display:flex; flex-direction:column; align-items:center; gap:0 }
.rev-foto-nota{
  font-family:var(--font-mano); font-size:clamp(21px,2.7vw,35px);
  line-height:1.25; color:#6B5D4C; text-align:center;
  margin-top:clamp(14px,2vw,24px);
  /* La medida es la de la foto, no una más corta: los nombres de una familia
     grande se partían dejando el último solo en su renglón. */
  max-width:100%; text-wrap:balance;
  transform:rotate(-.7deg);              /* nadie escribe perfectamente recto */
}

/* ── LA PORTADA SOBRE UN LIBRO DE VERDAD (solo en el Revelado) ────────────────
   Tres capas: el mockup con el hueco de la acuarela limpio · la acuarela de la
   familia deformada sobre ese hueco · el mapa de luz de la zona en multiply,
   para que el dibujo reciba la misma luz que el papel.
   El mockup es el FRONTAL: el primero iba en escorzo y la acuarela deformada
   delataba la perspectiva. Con este el hueco es casi un rectángulo. */
.rev-mock{ position:relative; width:min(78vh,92%); aspect-ratio:1/1; margin:auto }
.rev-mock-fondo{ width:100%; height:100%; display:block; border-radius:2px }
/* Solo el hueco de la acuarela: el título y el subtítulo del mockup son los
   mismos que imprime el libro, así que montarlos otra vez era trabajo de más.
   La acuarela va `contain` porque en la portada de verdad también respira
   dentro de su caja en vez de llenarla a la fuerza. */
/* EL MULTIPLY VA AQUÍ, EN LA CAJA, NO EN LA IMAGEN DE ADENTRO. La caja lleva
   `transform`, y todo elemento transformado abre su propio contexto de apilado:
   un mix-blend-mode puesto en la <img> de adentro se mezcla SOLO contra esa
   caja —contra nada— y el blanco de la acuarela seguía saliendo como un
   recuadro claro sobre el papel. Puesto en la caja, la mezcla ocurre al
   componerla sobre el mockup, que es donde tiene que ocurrir. */
.rev-mock-arte{
  position:absolute; left:0; top:0; transform-origin:0 0;
  backface-visibility:hidden; mix-blend-mode:multiply;
}
/* Multiplicar no es un efecto: es lo que borra el blanco. Las acuarelas llegan
   sobre fondo blanco opaco, y puestas tal cual salía un recuadro pegado sobre el
   papel crema. Multiplicando, el blanco desaparece y queda solo la pintura —
   que es literalmente lo que pasa al imprimir sobre papel. */
.rev-mock-arte > img{ width:100%; height:100%; object-fit:contain; display:block }
.rev-mock-luz{
  position:absolute; inset:0; pointer-events:none;
  background-size:100% 100%; mix-blend-mode:multiply; opacity:.9;
}
@media (max-width:700px){ .rev-mock{ width:96% } }

/* ── KORA · EL TEXTO LLEGA POR RENGLONES ──────────────────────────────────────
   27 ago: el texto se tecleaba palabra por palabra, para que se sintiera que
   estaba pasando ahora y no que ya existía.
   11 sep · Vivi, desde el iPhone: "quitar el efecto de máquina de escribir, no
   es legible ni elegante". Cierto las dos veces: el renglón crecía hacia la
   derecha y el ojo perseguía el final mientras la línea se reacomodaba (se
   leía cuatro veces), y teclear es gesto de terminal, no de tinta.
   Lo que se conserva es el TIEMPO, que era lo que de verdad hacía el trabajo:
   ahora cada renglón entra entero, subiendo un poco y encendiéndose, uno tras
   otro. Se lee de un vistazo y ya no se mueve. Cada renglón sigue siendo un
   <span class="rl"> en bloque para que la caja no salte de alto. */
.rev-dedic .rl, .rev-verso .rl{
  display:block; min-height:1em;
  opacity:0; transform:translateY(9px);
  transition:opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1);
}
.rev-dedic .rl.on, .rev-verso .rl.on{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .rev-dedic .rl, .rev-verso .rl{ opacity:1; transform:none; transition:none }
}
/* EL REMATE. Ni la dedicatoria ni el prólogo necesitan que adivinemos qué
   enfatizar: los dos traen su cierre marcado por la forma —la VOZ pide que la
   última frase baje y cierre, y el prólogo termina en el pivote de dos
   renglones—. Ese bloque entra aparte, tras un silencio, y con más cuerpo. */
.rev-cierre{ opacity:0; transition:opacity .9s ease }
.rev-cierre.on{ opacity:1 }
/* OJO con el `em`: .rev-cierre también es .rev-dedic, así que gana en
   especificidad y el clamp del cuerpo deja de aplicar — un `1.22em` se calcula
   entonces contra la HOJA, no contra el texto, y el remate salía más CHICO que
   el cuerpo. Cada uno lleva su propia medida, en claro. */
.rev-dedic.rev-cierre{ font-size:clamp(21px,2.45vw,29px); margin-top:1.6rem; color:var(--dark) }
.rev-verso.rev-cierre{ font-size:clamp(19px,2.05vw,29px); margin-top:1.7rem; color:var(--dark) }
@media (prefers-reduced-motion:reduce){ .rev-cierre{ opacity:1; transition:none } }

/* ── LA MUDANZA: su foto se vuelve su acuarela ────────────────────────────────
   Las dos imágenes ocupan EXACTAMENTE el mismo lugar y la misma escala. Si la
   imagen salta al cambiar, se leen como dos fotos distintas —que era justo la
   repetición que había que quitar—; quietas, se lee como una transformándose.
   El cruce es lento a propósito: no es un efecto, es el momento en que su foto
   se vuelve el dibujo de su libro. */
.rev-foto-marco{ position:relative; line-height:0 }
.rev-muda .rev-foto-marco{ display:grid }
.rev-muda .rev-cap-a, .rev-muda .rev-cap-b{ grid-area:1/1; display:block;
  max-width:min(460px,66vw); max-height:56vh; width:auto; height:auto; border-radius:1px }
.rev-muda .rev-cap-b{ opacity:0; transition:opacity 2.6s ease }
.rev-muda .rev-cap-a{ opacity:1; transition:opacity 2.6s ease }
.rev-muda.rev-muda-va .rev-cap-b{ opacity:1 }
.rev-muda.rev-muda-va .rev-cap-a{ opacity:0 }
@media (prefers-reduced-motion:reduce){
  .rev-muda .rev-cap-a, .rev-muda .rev-cap-b{ transition:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RONDA DEL 11 SEP 2026 (tarde) — portada, dedicatoria y portadillas
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El nombre del protagonista manda en la portada ─────────────────────────
   "Me gustaría que llevara el nombre del protagonista en grande justo arriba
   de «Una vida entera»". En la repisa, un homenaje se busca por el nombre; el
   título es la colección. Por eso el nombre crece y el título baja de rango
   —mismo serif, color más suave— en vez de competir con él. */
.cov-nombre{
  font-family:var(--font-display); font-weight:500; line-height:1.02;
  letter-spacing:.02em; color:#3b3326; font-size:clamp(34px,5.6vw,58px);
}
.cover-sheet .cov-nombre{ font-family:var(--font-cover-modern); letter-spacing:-.01em;
  font-size:clamp(34px,12.4cqw,58px); margin-top:5cqw }
.cov-conNombre .cm-title{
  font-size:clamp(15px,4.4cqw,22px); margin-top:2.2cqw; color:var(--taupe);
  letter-spacing:.05em; font-weight:400;
}
.cov-conNombre .cover-emboss{ font-size:clamp(14px,4.2cqw,21px); color:var(--taupe); letter-spacing:.05em }

/* ── LA PORTADA, AFINADA · 11 sep 2026 (tarde) ──────────────────────────────
   Vivi, mirando el homenaje de Sigvard en pantalla: el nombre y el título muy
   juntos y en negro; la acuarela a paño con el recuadro; el marco grueso y
   oscuro; y el libro sin bastante profundidad. Todo esto es lo mismo: la tapa
   se estaba comportando como una pantalla y tiene que comportarse como tela
   impresa. En tela nada es negro, nada llega al canto y todo tiene grosor. */

/* EL NOMBRE Y EL TÍTULO SE SEPARAN, Y SE HUNDEN EN LA TELA.
   Iban pegados —el nombre no dejaba aire debajo— y en un negro que en una
   tapa de lino no existe: una tipografía impresa en tela nunca es negra,
   porque no es tinta puesta encima sino la tela hundida. De ahí el color, que
   se mezcla con el propio lino y se mueve con él si mañana cambia de tono, y
   de ahí el relieve: luz en el canto de abajo, sombra en el de arriba, que es
   por donde le entra la luz a una letra prensada. */
.cover-sheet .cov-nombre{
  color:color-mix(in srgb, var(--linen-base) 14%, #4B3D2C 86%);
  text-shadow:0 1px 0 rgba(255,255,255,.62), 0 -1px 1px rgba(40,30,18,.30);
}
.cov-conNombre .cover-emboss{
  margin-top:2.2cqw;                                   /* el aire que faltaba */
  color:color-mix(in srgb, var(--linen-base) 40%, #5a4632 60%);   /* cálido, no gris */
}
/* SOBRE TELA OSCURA, EL NOMBRE Y SU TÍTULO VAN EN CLARO. 14 sep 2026
   Vivi: «me sigue apareciendo el texto de la portada en oscuro aun cuando
   selecciono colores oscuros». Las dos reglas de arriba escriben su café a mano
   y le ganaban a la tinta por tono: el título suelto sí cambiaba, pero en cuanto
   el libro lleva nombre (todo homenaje) el nombre y «Una vida entera» se
   quedaban en café sobre azul noche. Aquí vuelven a la tinta de la tela, que el
   tono oscuro ya pone en claro — con el relieve invertido.
   Lo mismo el título de la tapa de lino, que desde el 26 ago lleva #4A4038 a
   mano (.cover-pg.cover-sheet .cover-emboss) aunque no lleve nombre. */
.cover-sheet[data-tono="oscuro"] .cover-emboss{ color:var(--emboss) }
.cover-sheet[data-tono="oscuro"] .cov-nombre{
  color:var(--emboss);
  text-shadow:0 1px 0 var(--emboss-hi), 0 -1px 1px var(--emboss-lo);
}
.cover-sheet[data-tono="oscuro"].cov-conNombre .cover-emboss,
.cover-sheet[data-tono="oscuro"].cov-conNombre .cm-title{ color:var(--emboss-sub) }

/* LA ACUARELA RESPIRA DENTRO DEL RECUADRO.
   Estaba al 110 % y anclada arriba, a propósito: así se comía el margen de
   papel blanco que trae el PNG. Vivi, ahora: "que esté al 90 % para que respire
   un poco más el espacio blanco alrededor". Es la decisión contraria y es la
   correcta — una lámina impresa SIEMPRE tiene papel alrededor; sin él parece
   una pantalla dentro del libro. El margen queda parejo por los cuatro lados
   (por eso el origen vuelve al centro); el encuadre sigue mirando un poco
   arriba, que es donde están las caras. */
.cover-sheet .cover-ph img{ transform:scale(.9); transform-origin:50% 50% }

/* EL MARCO, MÁS DELGADO Y MÁS CLARO.
   "Es solo para que se sienta que la imagen está embebida" — y eso lo hace la
   sombra, no el grosor ni lo oscuro. El canto se adelgaza de 6 a 4, la línea
   interior pasa de 1 px al 40 % a medio píxel al 20 %, y las sombras de
   ventana bajan a la mitad: lo justo para que la lámina se lea hundida en la
   tela y no enmarcada con un paspartú. */
.cover-sheet .cover-mat{ border-width:4px; border-color:#F2ECE0 }
.cover-sheet .cover-mat::before{
  inset:-4px;
  box-shadow:inset 0 2px 5px rgba(96,76,48,.20),
             inset 0 0 9px 1px rgba(96,76,48,.10),
             inset 0 -1px 2px rgba(255,255,255,.50);
}
.cover-sheet .cover-ph{ border:.5px solid rgba(108,88,60,.20) }
.cover-sheet .cover-ph::after{
  box-shadow:inset 0 2px 6px rgba(48,36,20,.24),
             inset 0 0 16px 3px rgba(58,44,26,.18),
             inset 0 -1px 3px rgba(58,44,26,.12);
}

/* LA TELA, POR ENCIMA DE TODO.
   "La textura debe ir por encima de todo, incluso las acuarelas; menos sobre el
   marco en la de lino beige con marco, y obvio menos en la mate."
   Es la diferencia entre una tapa DE tela y una tapa impresa: en una tapa de
   verdad el hilo está arriba de la tinta, así que la trama pasa por encima de
   lo que sea que esté impreso — el nombre, el título, la acuarela. Mientras la
   trama vivió solo en el fondo, todo lo demás flotaba SOBRE la tela en vez de
   estar impreso EN ella, y por eso la tapa se leía como papel.
   Va por debajo de la bisagra y del canto de la pasta (z-index 6 y 7): esos
   dos son el volumen del libro, no su superficie, y una trama encima los
   aplanaría. Y va al 32 %, no al 16 %: a la mitad no se ve en pantalla — que
   es justo lo que Vivi acaba de decir. */
.cover-tela{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background-image:var(--lino); background-size:200px 200px;
  mix-blend-mode:multiply; opacity:.32;
}
/* ── EL HILO NO SE OSCURECE: SE ILUMINA · 13 sep 2026 ──
   La trama va en `multiply`, y en una tela clara eso es exactamente lo que se
   ve — el hilo hace sombra sobre un fondo que tiene luz de sobra. En una tela
   oscura no hay luz que quitar: multiplicar sobre azul noche o sobre chocolate
   solo ensucia, y la tapa se ve plana, como cartulina teñida.
   En una tela oscura de verdad la trama se ve al revés: el hilo levantado ATRAPA
   la luz y brilla, y lo que se hunde entre hilo e hilo es lo que se pierde.
   `overlay` hace las dos cosas a la vez —aclara donde la trama es clara, oscurece
   donde es oscura— y por eso es la mezcla de una tela oscura. Va por tono, como
   todo lo demás: ninguna regla pregunta de qué color es. */
.cover-sheet[data-tono="oscuro"] .cover-tela{
  /* .4 era la fuerza de una tela clara en `multiply`, copiada tal cual a una
     mezcla que hace lo contrario. En `overlay` esa misma fuerza no solo enseña
     el hilo: le sube la luz a TODA la tapa, y el color se lee destiñido — que
     es lo que Vivi vio en el verde, el azul y el ladrillo. A .3 el hilo sigue
     atrapando la luz y el tinte se queda donde se eligió. */
  mix-blend-mode:overlay; opacity:.3;
}
/* La mate no es tela: es un acabado liso. */
.cover-modern.cover-sheet[data-finish="mate"] .cover-tela{ display:none }

/* EL MARCO SE QUEDA FUERA DE LA TRAMA.
   Es un paspartú de papel montado sobre la tela, no tela — por eso se levanta
   por encima de la capa. Se lleva consigo la acuarela de adentro, que sí tiene
   que ir entramada; ésa lleva la suya propia, a la misma fuerza, sobre su
   propio papel (la regla de .cover-ph::before, más arriba). */
.cover-sheet .cover-mat{ position:relative; z-index:6 }
.cover-sheet .cover-ph::before{ background-size:200px 200px; opacity:.32 }

/* EL LIBRO, CON MÁS FONDO.
   Dos sombras, no una: la de contacto —corta y cerrada, la que dice que está
   APOYADO— y la ambiental, más abierta y más honda. Una sola sombra grande
   flota; las dos juntas pesan. Las hojas de atrás (--hojas) no se tocan. */
.spread{
  box-shadow:var(--hojas),
             0 9px 20px -13px rgba(44,37,32,.34),
             0 46px 94px -40px rgba(44,37,32,.60);
}
/* La portadilla interior repite la jerarquía, más chica. */
.ci-nombre{ font-size:clamp(21px,2.9vw,33px); margin-bottom:.15rem }
.ci-nombre + .ci-title{ font-size:clamp(13px,1.7vw,17px); color:var(--taupe); font-weight:400; letter-spacing:.05em }

/* ── El costo de cada encuadernación, como en Kids ──────────────────────────
   El panel de la portada de Keepsake enseñaba tres opciones sin precio: se
   elegía a ciegas. Ahora usa la misma fila de Kids (kprint-op) y le cabe la
   muestra de color a la izquierda. */
.kprint-op .kp-name{ display:flex; align-items:center; gap:.55rem; min-width:0 }
.kprint-op .kp-name .cstyle-sw{ flex:0 0 auto }
.kprint-op .kp-price i{ font-style:italic; opacity:.72 }
.kprint-op .kp-sinprecio{ color:var(--taupe) }
.cover-style.kprint-pick{ display:flex; flex-direction:column; gap:.5rem }

/* ── Las portadillas se leen como sección ───────────────────────────────────
   "No se entienden como portadillas; les podemos agregar un número romano
   arriba para que se lea como sección". El número va antes del título, con su
   propia línea debajo: sin eso, una portadilla parece un capítulo al que no le
   salió el texto. */
.acto-num{
  font-family:var(--font-body); font-size:clamp(10px,1.4vw,13px); font-weight:400;
  text-transform:uppercase; letter-spacing:.26em; color:var(--sand); line-height:1;
  margin-bottom:.7rem; text-align:center;
}
.acto-num::after{
  content:''; display:block; width:2.6em; height:.5px; margin:.6rem auto 0;
  background:var(--sand-light);
}
/* 12 sep 2026 · Vivi: "las portadillas llevan el mismo font y el mismo tamaño
   que los títulos por capítulo, entonces no se distinguen lo suficiente".
   El «Parte II» de arriba ya DECÍA qué era esa hoja; lo que faltaba es que se
   VIERA antes de leerla. Un título de capítulo es una cursiva chica en arcilla
   —una voz que sigue contando—. Una portadilla no cuenta: anuncia. Por eso va
   en redonda, grande, en la tinta del libro y con aire alrededor, que es la
   misma diferencia que hay en un libro de verdad entre el nombre de un capítulo
   y la hoja que abre una parte. La línea que va debajo se queda chica y en
   cursiva a propósito: el contraste es lo que hace que la hoja se lea como
   sección y no como un capítulo que se quedó corto. */
.sp-portadilla .ttl{
  font-style:normal; font-weight:400;
  font-size:clamp(27px,3.5vw,42px);
  letter-spacing:.045em; line-height:1.14;
  color:#3b3326;
  max-width:11em; margin-left:auto; margin-right:auto; margin-bottom:2.1rem;
}
.sp-portadilla .acto-num{ color:var(--clay); margin-bottom:1.1rem }
.sp-portadilla .acto-num::after{ width:3.4em; margin-top:.9rem; background:var(--sand) }
.sp-portadilla .verse{ font-style:italic; color:var(--taupe); max-width:22em; margin:0 auto }

/* ── "Se escribe sola" ahora se pica ────────────────────────────────────── */
.pq-nada-btn{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--k2-paper,#F7F3EA); border:.5px solid var(--sand-light); border-radius:9px;
  padding:12px 13px; font-family:var(--font-body); font-size:13.5px; font-weight:300;
  color:var(--taupe); line-height:1.45; transition:border-color .2s;
}
.pq-nada-btn:hover{ border-color:var(--taupe) }

/* El aviso de tope. Vive debajo de su caja, aparece solo cuando ya queda poco y
   no ocupa sitio mientras no diga nada: si empujara el panel al aparecer, sería
   un susto en vez de un aviso. */
/* 16 sep 2026 · EL CONTADOR YA NO RESERVA RENGLÓN. Guardaba 1.2em de alto bajo
   CADA caja de respuesta para el aviso de «hasta aquí cabe», aunque estuviera
   vacío — y con el margen eran 21 px por pregunta que nunca se usaban. En un
   editor donde cada fila horizontal se paga en alto de hoja, eso es caro.
   Se reservaba para que el formulario no diera un brinco al aparecer el aviso.
   Pero el aviso aparece al 85 % del límite, o sea después de escribir bastante,
   y ahí un renglón que se abre no es un brinco: es la respuesta a lo que estás
   haciendo. El margen también va con él, para que vacío no ocupe NADA.
   (Y no se puede sacar del flujo con `position:absolute`: el mensaje lleno es
   una frase entera que se parte en dos renglones y se encimaría con la
   pregunta siguiente.) */
.pq-tope{
  font-family:var(--font-body); font-size:12.5px; font-weight:300; line-height:1.4;
  color:var(--sand); margin:0; min-height:0;
  opacity:0; transition:opacity .25s, color .25s;
}
.pq-tope.cerca,.pq-tope.lleno{ margin-top:.4rem }
.pq-tope.cerca{ opacity:1 }
.pq-tope.lleno{ opacity:1; color:var(--clay) }
.pq-nada-btn span{ display:block; margin-top:.3rem; color:var(--clay); font-size:13px }

/* ── La ventana de "Lo que ya contaste" (reusa la caja de la semilla) ───── */
.resp-cap{
  font-family:var(--font-display); font-style:italic; font-size:17px; color:var(--clay);
  margin:1.4rem 0 .5rem;
}
.resp-cap:first-child{ margin-top:0 }
.resp-lbl{ font-size:12.5px; color:var(--taupe); margin:.7rem 0 .3rem; line-height:1.4 }
.resp-in{ min-height:74px; resize:vertical; line-height:1.5 }
.resp-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:.2rem }

/* ── Cuando el motor no pudo, se dice qué contestó el servidor ──────────── */
.motor-mal{
  background:#FBF3EF; border:.5px solid #E2CFC4; border-radius:9px;
  padding:11px 13px; margin:.9rem 0 .2rem; font-size:13px; line-height:1.45; color:var(--dark);
}
.motor-mal b{ display:block; font-weight:500; margin-bottom:.3rem }
.motor-mal span{ display:block; color:#9A6A55; font-size:12px; word-break:break-word }

/* El letrero de guardado cuando el trabajo NO llegó a la cuenta. */
.save-mal{ color:#9A6A55 !important }

/* ── RECUERDOS CONTIGO ──────────────────────────────────────────────────────
   Cuatro por hoja, dos por página: la foto que mandó alguien, lo que contó de
   ese día y su nombre. Las fotos van reales, no en acuarela: su valor es
   justamente que son de verdad. */
.rec-pg{ display:flex; flex-direction:column; gap:4%; padding:7% 7.5% }
.rec-ttl{ margin-bottom:.2rem }
.rec-intro{
  font-family:var(--font-display); font-style:italic; font-size:clamp(11px,1.5vw,15px);
  line-height:1.45; color:var(--taupe); margin-bottom:.2rem;
}
.rec-uno{ display:flex; flex-direction:column; min-height:0; flex:1 1 0 }
.rec-foto{ flex:1 1 auto; min-height:0; overflow:hidden; border-radius:3px; background:var(--linen-dark) }
.rec-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.rec-sin{ border:.5px dashed var(--sand-light); background:transparent }
.rec-txt{
  font-family:var(--font-display); font-size:clamp(10px,1.35vw,14px); line-height:1.4;
  color:var(--dark); margin-top:.5em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.rec-quien{
  font-family:var(--font-body); font-size:clamp(8px,1vw,11px); letter-spacing:.06em;
  color:var(--taupe); margin-top:.3em;
}
/* En el panel, cada recuerdo con su miniatura. */
.rec-fila{ display:flex; gap:11px; padding:.8rem 0; border-bottom:.5px solid var(--sand-light) }
.rec-mini{ flex:0 0 auto; width:64px; height:64px; border-radius:6px; overflow:hidden; background:var(--linen) }
.rec-mini img{ width:100%; height:100%; object-fit:cover; display:block }
.rec-fila-tx{ flex:1 1 auto; min-width:0 }


/* ── LAS PREGUNTAS DE FRENTE, LA PRIMERA VEZ · 12 sep 2026 ───────────────────
   Solo en pantalla grande: en el celular la sábana ya hacía esto. El libro se
   queda entero debajo —no se encoge la columna— y las preguntas se ponen en el
   centro, con el fondo apagado. Cuando se cierra, todo vuelve a su sitio sin
   que se haya movido nada de lugar.
   El fondo oscuro es el ::before del wrap: así un clic afuera llega con el wrap
   como destino y no hace falta inventar una capa que tapar y destapar. */
@media(min-width:901px){
  #editorWrap.pq-pop .editor-grid,
  #editorWrap.pq-pop.panel-wide .editor-grid{ grid-template-columns:1fr }
  #editorWrap.pq-pop::before{
    content:''; position:fixed; inset:0; z-index:58;
    background:rgba(44,37,32,.36);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    animation:pqpopfade .22s ease both;
  }
  /* 15 sep 2026 · SE LE HABÍA CAÍDO EL PAPEL. La ventana salía blanca y plana
     —`--white`, que es el papel de un input, no el de una hoja— y encima el
     "Ver mi libro" y la ✕ flotaban sueltos arriba, sin nada que los amarrara.
     Dos cosas, y las dos se arreglan con el crema de la casa:
     · La ventana va en `--linen`, el arenita de siempre. Los inputs de adentro
       siguen en `--white` y por eso ahora SE VEN: papel claro sobre papel.
     · La primera franja va un tono más oscura (`--linen-dark`, la misma tela un
       poco más sombreada — no un hex suelto inventado aquí), de canto a canto y
       pegada arriba al hacer scroll. Eso es lo que la vuelve una BARRA y no dos
       palabras al aire. */
  #editorWrap.pq-pop .panel,
  #s2 #editorWrap.pq-pop .panel{
    position:fixed; z-index:60;
    left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(580px, calc(100vw - 72px));
    height:auto; max-height:min(80dvh, 780px);
    background:var(--linen);
    border:1px solid var(--sand-light); border-radius:16px;
    box-shadow:0 40px 90px -38px rgba(44,37,32,.62);
    padding:0 1.7rem 1.6rem;
    overflow-y:auto;
    animation:pqpopin .26s cubic-bezier(.2,.8,.3,1) both;
  }
  /* Dentro de la ventana, el botón de arriba es la salida y va a la derecha,
     como en toda ventana de esta casa. Y es una franja: se estira hasta los dos
     cantos con márgenes negativos y se queda arriba mientras se baja. */
  /* 16 sep 2026 · LA FRANJA SE QUEDABA CORTA POR LA DERECHA. Llevaba
     `width:100%` —el 100 % de la caja de contenido— y encima un margen negativo
     de 1.7rem a cada lado: eso la corre hacia la izquierda pero no la alarga, así
     que le faltaba justo ese 1.7rem del lado de la ✕ y se veía una barra que no
     llegaba a su propio botón. Sin `width`, el bloque se estira solo hasta los
     dos cantos.
     Y no basta con quitarle el `width`: esto es un `<button>`, y un control de
     formulario calcula `width:auto` como "lo que mida su contenido" aunque sea
     `display:flex` — medido, 136 px dentro de un panel de 580. Así que el ancho
     se dice a mano, y se dice completo: el contenido MÁS los dos márgenes
     negativos. */
  #editorWrap.pq-pop .panel-hide{
    display:flex; align-items:center; justify-content:space-between;
    width:calc(100% + 3.4rem);
    position:sticky; top:0; z-index:2;
    margin:0 -1.7rem 1rem; padding:.78rem 1.7rem;
    background:var(--linen-dark);
    border-bottom:.5px solid var(--sand-light);
    border-radius:15px 15px 0 0;
  }
  /* "Todo se guarda solo" sobra aquí: la ventana es para contestar, y el pie
     empuja el botón de contar fuera de la vista en pantallas bajas. */
  #editorWrap.pq-pop .panel-vault{ display:none }
  /* Y FIJAR CAPÍTULO tampoco va aquí. Vivi: "no hace sentido el círculo de fijar
     capítulo, pues apenas lo vas a responder". Exacto: esta ventana sale cuando
     el capítulo está SIN contestar, y fijar es lo que se hace cuando ya te gusta
     como quedó. Ofrecerlo antes de la primera respuesta es ofrecer el final
     antes del principio. Vive en el panel lateral, que es donde se vuelve
     después. */
  #editorWrap.pq-pop .pq-check-wrap{ display:none }
  /* El libro de atrás no se toca, pero tampoco se deja clickear por error. */
  #editorWrap.pq-pop .ed-left{ pointer-events:none }
}
@keyframes pqpopfade{ from{opacity:0} to{opacity:1} }
@keyframes pqpopin{
  from{ opacity:0; transform:translate(-50%,-46%) scale(.985) }
  to  { opacity:1; transform:translate(-50%,-50%) scale(1) }
}