nativo: funciona sin JavaScript, el buscador lo lee, y el
"atrás" del navegador no se rompe. El renglón que lo abre se ve como los
demás enlaces suaves del sitio, nunca como un botón — no compite con el
CTA que sí queremos que toquen. */
.k-mas{ display:block; margin:1.15rem 0 0 }
.k-mas > summary{
display:flex; align-items:center; gap:.55em;
width:max-content; max-width:100%; margin:0 auto;
cursor:pointer; list-style:none;
font-family:var(--font-body); font-weight:400;
font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
color:var(--clay);
padding:.7rem .1rem; min-height:44px; /* 44px: se toca con el pulgar */
border-bottom:.5px solid var(--sand-light);
transition:color .25s, border-color .25s;
}
.k-mas > summary::-webkit-details-marker{ display:none }
.k-mas > summary::marker{ content:"" }
.k-mas > summary:hover{ color:var(--dark); border-color:var(--clay) }
.k-mas > summary::after{
content:"▾"; font-size:10px; line-height:1; letter-spacing:0;
transition:transform .22s ease;
}
.k-mas[open] > summary::after{ transform:rotate(180deg) }
/* En columnas alineadas a la izquierda el renglón no se centra. */
.k-mas--izq > summary{ margin-left:0; margin-right:auto }
.k-mas-in{ margin-top:1.3rem }
.k-mas[open] .k-mas-in{ animation:kmas-in .26s ease }
@keyframes kmas-in{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
.k-mas[open] .k-mas-in{ animation:none }
.k-mas > summary::after{ transition:none }
}
/* Variante "puerta": cuando lo que se pliega es una herramienta y no un texto
(la prueba del landing, la muestra del regalo), el renglón pesa un poco más
porque ahí sí queremos que lo toquen. */
.k-mas--puerta > summary{
border:.5px solid var(--sand-light); border-radius:999px;
padding:.8rem 1.5rem; background:var(--white,#FFFDF9);
color:var(--clay); letter-spacing:.13em;
}
.k-mas--puerta > summary:hover{ border-color:var(--clay) }
/* ── 2 · LO QUE TODAVÍA NO EXISTE, NO OCUPA PANTALLA ───────────────────────
La repisa de "Una biblioteca para toda la vida" tenía 18 títulos y 14
decían "Próximamente". En el celular era una pantalla entera de cosas que
nadie puede tener todavía. Se muestran los que SÍ están; el resto entra
con el pliegue de la sección. */
.lp-cols .lp-pronto{ display:none }
.lp-cols.vetodo .lp-pronto{ display:list-item }
/* ── 3 · EL AIRE DEL CELULAR ───────────────────────────────────────────────
Nada de esto quita contenido: quita hueco. Con 12 bloques en el landing,
1.1rem de más por bloque son casi dos pantallas de pulgar. */
@media (max-width:760px){
.lp-section{ padding:2.1rem 0 }
.lp-fullband{ padding-top:2.3rem; padding-bottom:2.4rem }
.lp-sec-title{ margin-bottom:.5rem }
.lp-sec-lead{ margin:0 auto 1.5rem; font-size:15px; line-height:1.65 }
.lp-faq{ margin-top:1.4rem }
}
/* ── 5 · LA PRUEBA, PLEGADA EN EL CELULAR ──────────────────────────────────
El formulario de la prueba son seis campos: en el celular ocupaba tres
pantallas y media ANTES de que nadie supiera qué es Kora. Se pliega solo
ahí; en escritorio, donde vive a dos columnas y se ve entero de un vistazo,
sigue abierto de par en par. Lo abre kora-esencial.js. */
@media (min-width:901px){
#lptFold > summary{ display:none }
#lptFold .k-mas-in{ margin-top:0; animation:none }
}
/* ── 6 · LA REPISA DEL CATÁLOGO, DE DOS EN DOS ─────────────────────────────
Hallazgo de la ronda: "Storybooks" (goAllTitles) abre los 17 títulos, y en
el celular styles.css los ponía a UNA columna de 340px. Eran 8,687px:
diez pantallas de pulgar para ver el catálogo. A dos columnas son cuatro, y
además se lee como lo que es — una repisa, no una fila de anuncios.
Las portadas siguen midiendo 3/4, así que ninguna se deforma. */
@media (max-width:640px){
.k2new .k2-grid{ grid-template-columns:1fr 1fr; gap:26px 16px; max-width:none }
.k2new .k2-gcover.keep{ padding:18px 10px 12px }
.k2new .k2-gcover.keep .gk-title{ font-size:21px }
.k2new .k2-gcover.keep .gk-sub{ font-size:11px }
.k2new .k2-gcover.kids .gk-ktitle{ font-size:15px }
.k2new .k2-gmeta{ margin-top:10px }
.k2new .k2-gtitle{ font-size:18px }
.k2new .k2-gsub{ font-size:12.5px }
}
/* ── 7 · UNA COLUMNA SIN TÍTULOS NO ES UNA COLUMNA ─────────────────────────
Al esconder lo que todavía no existe, tres de los seis capítulos quedaban
como un encabezado con nada debajo — y un hueco se lee como un error, no
como una promesa. Se pliega el capítulo entero; el mismo interruptor de
"Ver todo lo que viene" los trae de vuelta con sus títulos. */
.lp-cols:not(.vetodo) .lp-col-pronto{ display:none }
/* ══════════════════════════════════════════════════════════════════════════
SEGUNDA PASADA · 28 ago 2026 — "que brillen las portadas y las fotos"
La primera pasada quitó texto. Esta cambia el ORDEN de las cosas: la
fotografía deja de ilustrar al texto y pasa a ser lo primero.
El diagnóstico que la detonó, medido bloque por bloque a 390px:
el hero es el ÚNICO bloque con 100% de imagen. Todo lo demás va de 0% a
41%. Cinco de los once bloques del landing no tenían una sola fotografía,
y "Tipos de libro" son 2,871px con 3%.
Regla: **primero se enseña, luego se explica.** Si un bloque necesita un
párrafo para que se entienda la imagen, es que falta la imagen buena.
══════════════════════════════════════════════════════════════════════════ */
/* ── 8 · EL HUECO DE FOTO ──────────────────────────────────────────────────
No es un "placeholder roto": es un lugar reservado, con la proporción
EXACTA que va a tener la foto, y con el encargo escrito adentro. Así se
puede salir a tomarla sabiendo qué se necesita, y el día que llegue no
salta nada de lugar.
Se usa así:
![]()
. Nada más. */
.kph{
position:relative; width:100%; aspect-ratio:var(--kph-ar, 4/5);
display:flex; align-items:center; justify-content:center;
padding:1.2rem; text-align:center; overflow:hidden;
background:
radial-gradient(120% 100% at 50% 0%, rgba(255,253,249,.85), rgba(255,253,249,0) 62%),
#E4DFD8;
border:.5px solid var(--sand-light);
}
/* La mancha orgánica de Kora, apenas insinuada: el hueco pertenece a la casa
aunque esté vacío. Va en ::before para no estorbarle al texto. */
.kph::before{
content:""; position:absolute; width:56%; aspect-ratio:1/1;
background:radial-gradient(circle at 42% 38%, rgba(140,154,123,.30), rgba(140,154,123,0) 68%);
border-radius:46% 54% 57% 43% / 49% 41% 59% 51%;
}
.kph > span{
position:relative; z-index:1; max-width:22ch;
font-family:var(--font-body); font-weight:300;
font-size:12.5px; line-height:1.5; color:#7C7263;
}
/* El rótulo. Chiquito y arriba a la izquierda, como una nota de producción —
nunca como un error. */
/* A la DERECHA: el número del paso vive arriba a la izquierda y se
encimaban (se vio en la captura de 1440). */
.kph::after{
content:"Foto pendiente"; position:absolute; top:.7rem; right:.8rem;
font-family:var(--font-body); font-size:8.5px; letter-spacing:.2em;
text-transform:uppercase; color:#A79C8A;
}
.kph.kph-claro{ background:#EFEAE2 }
/* ── 11 · LAS PORTADAS, A TAMAÑO DE LIBRO ──────────────────────────────────
Los recuadros de colecciones eran cuadrados (1/1) y las portadas son 4/5:
cada portada se recortaba por arriba y por abajo para caber en un cuadrado.
Ahora la caja tiene la proporción del libro y la portada entra entera.
El rótulo también sube de tamaño: era un enlace de 12px debajo de una
imagen grande, y se leía como pie de foto en vez de como puerta. */
.lp-tiles{ gap:1.6rem 1.3rem; margin-top:1.8rem }
.lp-tile-img{ aspect-ratio:4/5 }
.lp-tile-link{
margin-top:.75rem; font-size:13px; letter-spacing:.13em;
border-bottom-color:var(--sand-light);
}
@media (max-width:900px){
.lp-tiles{ gap:1.4rem 1rem }
.lp-tile-link{ font-size:12px; letter-spacing:.1em }
}
/* ── 13 · EL SPREAD, MÁS GRANDE QUE LO QUE LO EXPLICA ──────────────────────
Es la demostración más corta de qué hace Kora: unas palabras entran, una
hoja del libro sale. En el celular la tarjeta de "lo que nos cuentas"
pesaba más que el resultado. Ahora la hoja manda. */
@media (max-width:900px){
.lp-io{ gap:.9rem }
.lp-io-arrow{ display:none } /* apilado, la flecha no orienta nada */
.lp-io-in{ max-width:330px; margin:0 auto }
.lp-io-card{ padding:1rem .95rem }
.lp-io-out{
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
width:100vw; max-width:100vw; padding:0 .7rem;
}
.lp-io-out .lp-io-kick{ margin-top:.4rem }
}
/* ── 15 · LA TIRA ──────────────────────────────────────────────────────────
Una franja de fotografía de lado a lado, encima del bloque al que
pertenece. Es el recurso más simple que existe para que una sección de
texto deje de parecer un documento. */
.lp-tira{
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
width:100vw; max-width:100vw; overflow:hidden; line-height:0;
margin-bottom:2.2rem;
}
.lp-tira > img{ display:block; width:100%; height:100%; object-fit:cover }
.lp-tira .kph{ border-left:0; border-right:0 }
/* Dentro de un .lp-fullband el ancho completo ya lo da el padre: sumarle
márgenes negativos otra vez mueve la página de lado. */
.lp-fullband .lp-tira{ margin-left:0; margin-right:0; width:auto; max-width:none }
@media (max-width:760px){ .lp-tira{ margin-bottom:1.6rem } }
/* En pantallas anchas una tira de 2/1 se vuelve un muro: se recorta a franja. */
@media (min-width:901px){
.lp-tira{ max-height:360px }
.lp-tira .kph{ aspect-ratio:auto; height:360px }
}
/* ── 16 · EL BUSCADOR DEL CATÁLOGO ─────────────────────────────────────────
Un catálogo, tres puertas. Copiado del patrón de Artifact Uprising en su
página de photo books (revisada el 28 ago): una fila de "maneras de ver" y
debajo las opciones de la manera activa. Nunca dos filas de opciones al
mismo tiempo — eso es justo lo que vuelve abrumante un filtro.
Los chips llevan su número: saber que "Los abuelos" tiene 4 antes de
tocarlo evita el viaje en falso. */
.kf{ margin:1.6rem 0 1.8rem }
.kf-fila{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .7rem; margin-bottom:1rem }
.kf-lbl{
font-family:var(--font-body); font-size:10.5px; letter-spacing:.24em;
text-transform:uppercase; color:var(--k2-sand,#9B8E74); margin-right:.2rem;
}
.kf-modo{
font-family:var(--font-body); font-weight:300; font-size:13.5px;
color:var(--k2-taupe,#948A7C); background:none; border:none;
padding:.45rem 0; min-height:38px; cursor:pointer;
border-bottom:1.5px solid transparent; transition:color .2s, border-color .2s;
}
.kf-modo + .kf-modo{ margin-left:1.1rem }
.kf-modo:hover{ color:var(--k2-ink,#2C2520) }
.kf-modo.on{ color:var(--k2-ink,#2C2520); border-bottom-color:var(--k2-ink,#2C2520) }
/* Los chips se salen de la pantalla en el celular a propósito: se deslizan.
Partirlos en cuatro renglones ocupa media pantalla antes de ver un libro. */
.kf-chips{
display:flex; gap:.45rem; overflow-x:auto; padding-bottom:.4rem;
scrollbar-width:none; -ms-overflow-style:none;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
}
.kf-chips::-webkit-scrollbar{ display:none }
.kf-chip{
flex:0 0 auto; cursor:pointer;
font-family:var(--font-body); font-weight:300; font-size:13px;
color:var(--k2-ink-soft,#5A5044); background:var(--white,#FFFDF9);
border:.5px solid var(--k2-line,#E6DDCC); border-radius:999px;
padding:.55rem 1rem; min-height:40px;
transition:background .18s, border-color .18s, color .18s;
}
.kf-chip em{ font-style:normal; color:var(--k2-sand,#9B8E74); font-size:11.5px; margin-left:.15em }
.kf-chip:hover{ border-color:var(--k2-taupe,#948A7C) }
.kf-chip.on{ background:var(--k2-ink,#2C2520); border-color:var(--k2-ink,#2C2520); color:#FDFAF5 }
.kf-chip.on em{ color:rgba(253,250,245,.62) }
.kf-pie{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.9rem }
.kf-ahora{
cursor:pointer; background:none; border:none; padding:.4rem 0; min-height:38px;
font-family:var(--font-body); font-weight:300; font-size:12.5px;
color:var(--k2-taupe,#948A7C); border-bottom:.5px solid var(--k2-line,#E6DDCC);
}
.kf-ahora::before{
content:"○"; margin-right:.45em; font-size:11px; vertical-align:.05em;
}
.kf-ahora.on{ color:var(--k2-ok,#7C9468); border-bottom-color:var(--k2-ok,#7C9468) }
.kf-ahora.on::before{ content:"●" }
.kf-cuenta{
font-family:var(--font-body); font-size:11px; letter-spacing:.14em;
text-transform:uppercase; color:var(--k2-sand,#9B8E74); white-space:nowrap;
}
.kf-vacio{
text-align:center; margin:2.4rem 0; font-family:var(--font-display);
font-style:italic; font-size:17px; color:var(--k2-taupe,#948A7C);
}
@media (max-width:640px){
.kf{ margin:1.2rem 0 1.4rem }
.kf-fila{ gap:.4rem }
.kf-modo{ font-size:12.5px }
.kf-modo + .kf-modo{ margin-left:.85rem }
.kf-chip{ font-size:12.5px; padding:.5rem .85rem }
.kf-pie{ flex-direction:column; align-items:flex-start; gap:.5rem }
}
/* ── 17 · LOS TEMAS, CON IMAGEN ────────────────────────────────────────────
Los chips del buscador son un control; esto es la presentación. Van arriba
de todo: primero se ve, luego se filtra. Es el patrón de los cinco
recuadros de sub-colección de Artifact Uprising (imagen + nombre + dato). */
.kt{
display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem;
margin:1.8rem 0 .4rem;
}
.kt-tile{
display:block; width:100%; text-align:left; cursor:pointer;
background:none; border:none; padding:0;
}
.kt-img{
display:block; width:100%; aspect-ratio:1/1; overflow:hidden;
background:#EFEAE2; border:.5px solid var(--k2-line,#E6DDCC); border-radius:3px;
transition:border-color .2s, transform .2s;
}
.kt-img img{ width:100%; height:100%; object-fit:cover; display:block }
.kt-tile:hover .kt-img{ transform:translateY(-3px); border-color:var(--k2-taupe,#948A7C) }
.kt-n{
display:block; margin-top:.6rem;
font-family:var(--font-display); font-weight:500; font-size:16px; line-height:1.15;
color:var(--k2-ink,#2C2520);
}
.kt-c{
display:block; margin-top:.15rem;
font-family:var(--font-body); font-weight:300; font-size:11.5px;
letter-spacing:.04em; color:var(--k2-sand,#9B8E74);
}
.kt-tile.on .kt-img{ border-color:var(--k2-ink,#2C2520); border-width:1.5px }
.kt-tile.on .kt-n{ text-decoration:underline; text-underline-offset:3px }
@media (max-width:900px){ .kt{ grid-template-columns:repeat(3,1fr); gap:.9rem } }
@media (max-width:640px){
.kt{ grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1.2rem 0 .2rem }
.kt-n{ font-size:13.5px; margin-top:.45rem }
.kt-c{ font-size:10.5px }
}
/* ── 18 · LA FOTO DEL LIBRO EN LA TARJETA ──────────────────────────────────
Mecanismo de Artifact Uprising, verificado en su sitio: las fotos van
APILADAS en la misma caja, todas en la misma posición, y solo cambia la
opacidad. Así ninguna salta ni se recarga al cambiar, y la caja mide
siempre lo mismo esté donde esté el ciclo.
La proporción es 3/4, la misma que la portada dibujada (.k2-gcover), para
que la rejilla no se desalinee mientras haya títulos con foto y sin foto. */
.k2-foto{
position:relative; width:100%; aspect-ratio:3/4; overflow:hidden;
border-radius:3px; background:#EFEAE2;
box-shadow:0 20px 44px -20px rgba(64,55,41,.5), 0 2px 8px -3px rgba(64,55,41,.22);
}
.k2-foto img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transition:opacity .55s ease;
}
.k2-foto img.on{ opacity:1 }
/* Los puntos dicen que hay más de una foto ANTES de pasar el cursor — en el
celular no hay hover, y sin ellos nadie sabría que existen las demás. */
.k2-foto-pts{
position:absolute; left:0; right:0; bottom:.6rem;
display:flex; justify-content:center; gap:5px; pointer-events:none;
}
.k2-foto-pts i{
width:5px; height:5px; border-radius:50%;
background:rgba(253,250,245,.55);
box-shadow:0 1px 3px rgba(40,32,22,.4);
transition:background .3s;
}
.k2-foto-pts i.on{ background:#FDFAF5 }
.k2new .k2-gcard:hover .k2-foto{ transform:none } /* el salto lo da la tarjeta */
@media (prefers-reduced-motion:reduce){
.k2-foto img{ transition:none }
}
/* ── 19 · LA PREGUNTA ──────────────────────────────────────────────────────
La pantalla de entrada al catálogo. De wonderbly.com: su "shop all books"
son 11 palabras y cuatro recuadros con imagen bajo una sola pregunta; los
libros aparecen después, cuando ya dijiste para quién.
Los recuadros son grandes a propósito — es la única decisión de la
pantalla, y tiene que verse como una invitación, no como un filtro. */
.kp{ margin:2.4rem 0 1rem }
.kp-q{
font-family:var(--font-display); font-weight:400;
font-size:clamp(26px,3.2vw,38px); line-height:1.1; text-align:center;
color:var(--k2-ink,#2C2520); margin:0 0 2rem;
}
.kp-q em{ font-style:italic; color:var(--clay,#72665A) }
.kp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem }
.kp-tile{
display:block; width:100%; text-align:left; cursor:pointer;
background:none; border:none; padding:0;
}
.kp-img{
display:block; width:100%; aspect-ratio:4/5; overflow:hidden;
background:#EFEAE2; border:.5px solid var(--k2-line,#E6DDCC); border-radius:3px;
transition:transform .2s, border-color .2s, box-shadow .2s;
}
.kp-img img{ width:100%; height:100%; object-fit:cover; display:block }
.kp-tile:hover .kp-img{
transform:translateY(-4px); border-color:var(--k2-taupe,#948A7C);
box-shadow:0 18px 36px -22px rgba(64,55,41,.55);
}
.kp-n{
display:block; margin-top:.7rem;
font-family:var(--font-display); font-weight:500; font-size:19px; line-height:1.15;
color:var(--k2-ink,#2C2520);
}
.kp-c{
display:block; margin-top:.15rem;
font-family:var(--font-body); font-weight:300; font-size:12px;
color:var(--k2-sand,#9B8E74);
}
.kp-todos{ text-align:center; margin:2.2rem 0 0 }
.kp-todos button{
background:none; border:none; cursor:pointer; padding:.7rem .1rem; min-height:44px;
font-family:var(--font-body); font-size:12px; letter-spacing:.15em;
text-transform:uppercase; color:var(--k2-taupe,#948A7C);
border-bottom:.5px solid var(--k2-line,#E6DDCC);
}
.kp-todos button:hover{ color:var(--k2-ink,#2C2520); border-color:var(--k2-ink,#2C2520) }
.kp-volver{
display:block; margin:.2rem 0 1rem; padding:.5rem 0; min-height:40px;
background:none; border:none; cursor:pointer;
font-family:var(--font-body); font-weight:300; font-size:13px;
color:var(--k2-taupe,#948A7C);
}
.kp-volver:hover{ color:var(--k2-ink,#2C2520) }
@media (max-width:900px){ .kp-grid{ grid-template-columns:repeat(3,1fr); gap:1.1rem } }
@media (max-width:640px){
.kp{ margin:1.6rem 0 .6rem }
.kp-q{ margin-bottom:1.4rem }
.kp-grid{ grid-template-columns:1fr 1fr; gap:1rem .8rem }
.kp-n{ font-size:16px; margin-top:.55rem }
.kp-todos{ margin-top:1.6rem }
}
/* ── 20 · LA DISPONIBILIDAD, SOBRE LA PORTADA ──────────────────────────────
Once de diecisiete títulos no existen todavía y se veían idénticos a los
que sí. Patrón de las etiquetas de Artifact Uprising (BESTSELLER / NEW).
"En camino" va discreta a propósito: informa, no desanima. */
.k2-estado{
position:absolute; top:.55rem; left:.55rem; z-index:2;
font-family:var(--font-body); font-weight:400;
font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
padding:.32em .62em; border-radius:2px;
background:rgba(253,250,245,.94);
box-shadow:0 2px 8px -4px rgba(60,48,34,.55);
}
.k2-estado.now{ color:#5F7A4C }
.k2-estado.soon{ color:#9B8E74; background:rgba(253,250,245,.82) }
@media (max-width:640px){
.k2-estado{ font-size:8.5px; top:.45rem; left:.45rem }
}
/* ── 21 · [hidden] TIENE QUE GANAR ─────────────────────────────────────────
Trampa clásica y ya pisada: el atributo `hidden` del navegador es una regla
de baja especificidad, y `.k2new .k2-grid{display:grid}` le gana. La
rejilla seguía midiendo 3,600px debajo de la pregunta aunque el atributo
estuviera puesto — se detectó midiendo el alto de la pantalla, no leyendo
el atributo (leerlo decía que sí estaba escondida). */
/* Una sola regla, para todo y para siempre. Antes eran cuatro listas de ids
—esta, la de la portada dibujada, la de #k2Chips y la de las tarjetas del
§33— y cada una nació el día que un elemento nuevo cayó en la misma trampa.
Con `[hidden]` a secas ya no hay que acordarse de apuntar el siguiente.
(Unificadas el 8 sep 2026.) */
[hidden]{ display:none !important }
/* ── 22 · LA PORTADA DEL HÉROE, EN FOTO ────────────────────────────────────
En Keepsake y Kids el libro insignia va en grande a la izquierda. Era el
mockup dibujado en CSS; ahora es la foto del libro de verdad, y cicla al
pasar el cursor como las tarjetas. La proporción baja a 4/5 (la del libro
fotografiado) en vez de 3/4. */
.k2-hero-foto{
aspect-ratio:4/5; max-width:420px; margin:0 auto; cursor:pointer;
border-radius:4px;
}
.k2-hero .k2-hero-l{ display:flex; align-items:center; justify-content:center }
.k2-hero-foto .k2-foto-pts{ bottom:.8rem }
@media (max-width:760px){
.k2-hero-foto{ max-width:none; aspect-ratio:3/2 }
}
/* La línea corta del héroe respira antes del pliegue. */
.k2-hero .k-mas{ margin-top:.7rem }
.k2-hero .k-mas .k2-ddesc{ margin-top:0 }
/* ── 22 · LA PORTADA DIBUJADA SE QUEDABA DEBAJO DE LA FOTO ─────────────────
Mismo tropiezo que con la rejilla: `cover.hidden = true` no hace nada
porque `.k2new .k2-gcover.keep{display:flex}` le gana al atributo. En las
dos tarjetas con foto real la portada dibujada seguía abajo. */
/* Lo cubre la regla global `[hidden]` del §21. */
/* ── 23 · EL MARCO GRIS · mientras no hay foto del libro ───────────────────
Vivi: "donde aún no tenemos render hay que poner la portada digital dentro
de un encuadre gris para ir simulando más cerca la foto de la portada".
La caja mide 3/4 —igual que .k2-foto— y la portada va DENTRO, más chica y
con sombra, como un libro apoyado en un fondo de estudio. Así la rejilla
se ve pareja aunque unas tengan foto y otras no, y el día que llegue el
render se cambia por .k2-foto sin que nada se mueva. */
.k2-marco{
position:relative; width:100%; aspect-ratio:3/4; overflow:hidden;
border-radius:3px;
background:
radial-gradient(120% 90% at 50% 12%, #F2EFEA 0%, #E7E3DC 55%, #DEDAD2 100%);
display:flex; align-items:center; justify-content:center;
padding:12% 16%;
}
.k2-marco > .k2-gcover{
width:100%; height:auto; aspect-ratio:3/4; flex:0 0 auto;
box-shadow:0 16px 30px -14px rgba(64,55,41,.55), 0 2px 6px -2px rgba(64,55,41,.3);
}
/* La sombra de contacto: sin ella la portada flota y se nota el recorte. */
.k2-marco::after{
content:""; position:absolute; left:18%; right:18%; bottom:9%;
height:14px; border-radius:50%;
background:radial-gradient(ellipse at center, rgba(64,55,41,.22), rgba(64,55,41,0) 70%);
}
@media (max-width:640px){ .k2-marco{ padding:10% 13% } }
/* ── 24 · EL ENCABEZADO EN EL CELULAR ──────────────────────────────────────
Cinco desplegables no caben en 390px: el sitio se iba de lado (481px de
ancho, medido con scrollWidth). Esto no es nuevo — `styles.css:1498` ya
escondía los enlaces sueltos a ≤960px porque el encabezado siempre ha sido
justo de espacio.
16 sep · Ya no hace falta esconder nada. El encabezado pasó de cinco puertas
a TRES —Las colecciones · Navidad · Descubre— y las tres caben en un
celular. Las reglas que escondían Keepsake, Kids y Por ocasión se quitaron:
escondían menús que ya no existen. Keepsake y Kids viven dentro del primero,
bajo "Por tipo de libro"; las ocasiones, dentro de todos los libros. */
/* Apretados solo en la franja angosta, y con las tres visibles siempre. */
@media (max-width:1000px){
#wfNav{ gap:.9rem }
#wfNav .wf-menu-btn{ font-size:9.5px; letter-spacing:.1em }
}
/* Navidad no despliega nada: su botón no lleva el subrayado del que sí abre. */
#wfNav .wf-menu-sola::after{ display:none }
/* ── El desplegable de las colecciones ─────────────────────────────────────
Una columna corta, con el nombre y su renglón de qué es. Sin eso, «Homenaje»
y «Personas que Amamos» se leen como lo mismo. */
#wfColecciones{ min-width:290px }
#wfColecciones .wf-col-item{ display:flex; flex-direction:column; gap:1px; line-height:1.25 }
#wfColecciones .wf-ci-n{ font-size:14px; color:#2C2520 }
#wfColecciones .wf-ci-d{ font-family:'Jost',sans-serif; font-size:11.5px; color:#9E8E78 }
/* El desplegable de "Todos los libros" es largo (ocho puertas + tres
colecciones): en pantallas bajas tiene que poder rodar. */
#wfTodos, #wfKids{ max-height:min(72vh, 620px); overflow-y:auto }
/* ── 25 · EL RENGLÓN DE PERSONAS ───────────────────────────────────────────
Copiado de "Gifts for all your favorite people" de Wonderbly: un renglón
horizontal de fotos de PERSONAS con su etiqueta encima y flechas al lado
del título. Ni una portada de libro — por eso se siente cálido.
Se desliza a propósito: que se asome el siguiente recuadro es lo que dice
"hay más" sin gastar un renglón de texto. */
.kq-sec{ padding-bottom:1.6rem }
.kq-head{
display:flex; align-items:baseline; justify-content:space-between;
gap:1rem; margin-bottom:1.5rem;
}
.kq-h{ text-align:left; margin:0 }
.kq-arrows{ display:flex; gap:.5rem; flex:none }
.kq-arrow{
width:38px; height:38px; border-radius:50%; cursor:pointer;
background:none; border:.5px solid var(--sand-light,#D8D1C4);
color:var(--clay,#72665A); font-size:14px; line-height:1;
transition:border-color .2s, color .2s, opacity .2s;
}
.kq-arrow:hover:not(:disabled){ border-color:var(--clay,#72665A); color:var(--dark,#2C2520) }
.kq-arrow:disabled{ opacity:.3; cursor:default }
.kq-row{
display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity;
padding-bottom:.5rem;
scrollbar-width:none; -ms-overflow-style:none;
}
.kq-row::-webkit-scrollbar{ display:none }
.kq-tile{
flex:0 0 clamp(190px, 21%, 260px); scroll-snap-align:start;
position:relative; padding:0; border:none; background:none; cursor:pointer;
}
.kq-art{
display:block; width:100%; aspect-ratio:4/5; overflow:hidden;
border-radius:3px; background:#EFEAE2; border:.5px solid var(--sand-light,#D8D1C4);
transition:transform .2s, border-color .2s;
}
.kq-art img{ width:100%; height:100%; object-fit:cover; display:block }
.kq-art .kph{ border:none }
.kq-tile:hover .kq-art{ transform:translateY(-3px); border-color:var(--taupe,#948A7C) }
/* La etiqueta va ENCIMA de la foto, abajo al centro — como en Wonderbly. Así
el recuadro es una sola cosa y no una foto con un pie debajo. */
.kq-pill{
position:absolute; left:50%; bottom:.85rem; transform:translateX(-50%);
background:rgba(253,250,245,.95); color:var(--dark,#2C2520);
font-family:var(--font-body); font-weight:400; font-size:12.5px;
letter-spacing:.02em; padding:.45em 1.1em; border-radius:999px;
box-shadow:0 3px 12px -5px rgba(60,48,34,.55); white-space:nowrap;
}
@media (max-width:760px){
.kq-head{ margin-bottom:1.1rem }
.kq-arrows{ display:none } /* en el celular se desliza con el dedo */
.kq-row{
gap:.7rem;
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
padding-left:1.4rem; padding-right:1.4rem; width:100vw; max-width:100vw;
}
.kq-tile{ flex-basis:clamp(150px, 44vw, 200px) }
.kq-pill{ font-size:11.5px; bottom:.6rem }
}
/* ── 25 · LA PORTADA PROVISIONAL ───────────────────────────────────────────
28 ago · Vivi: "para los títulos que no tengamos una portada ya hecha,
vamos a crear una y ya después la afinamos y le ponemos su acuarela — por
lo pronto darle su espacio".
Es tipografía sobre papel, sin arte. **No se le presta la acuarela de otro
libro**: eso es justo el falso que llevamos tres rondas quitando. Se ve
como lo que es — una portada en camino — y cuando llegue su acuarela se
quita `prov` del título y entra sola. */
.k2-gcover.prov .gk-frame,
.k2-gcover.prov .gk-art,
.k2-gcover.prov img{ display:none !important }
.k2-gcover.keep.prov{ justify-content:center; padding:14% 12% }
.k2-gcover.keep.prov .gk-title{ margin-bottom:.45em }
.k2-gcover.keep.prov .gk-sub{ margin-top:0 }
.k2-gcover.keep.prov .gk-kora{ position:absolute; bottom:9%; left:0; right:0; text-align:center }
.k2-gcover.kids.prov{ justify-content:center; padding:14% 12% }
.k2-gcover.kids.prov .gk-ktitle{ margin-top:0 }
.k2-gcover.kids.prov .gk-kick{ position:absolute; bottom:8%; left:0; right:0; text-align:center }
/* Una regla fina arriba y abajo: dice "esto es una portada", no un hueco. */
.k2-gcover.prov::before,
.k2-gcover.prov::after{
content:""; position:absolute; left:16%; right:16%; height:1px;
background:currentColor; opacity:.18;
}
.k2-gcover.prov::before{ top:9% }
.k2-gcover.prov::after{ bottom:18% }
/* ── 26 · EL PUNTO VERDE DEL MENÚ ──────────────────────────────────────────
"Que tengan como un punto verde a un lado o algo así, para nosotros saber."
En los desplegables de Keepsake y Kids, cada capítulo dice cuántos títulos
tiene y cuántos ya se pueden comprar. */
.wf-drop-item .tag .pt{
display:inline-block; width:6px; height:6px; border-radius:50%;
background:#5F7A4C; margin-right:.45em; vertical-align:.05em;
}
/* ── 27 · LOS PILLS SE DESLIZAN, PERO NO EMPUJAN LA PÁGINA ─────────────────
Con los nombres largos de los capítulos ("Celebraciones y Tradiciones") la
fila de pills se salía y arrastraba el sitio de lado: 577px de ancho en una
pantalla de 390.
`overflow-x:auto` NO basta. Un hijo de flex o de grid trae `min-width:auto`
por defecto y se niega a encoger por debajo de su contenido — el scroll
interno nunca llega a activarse. La llave es `min-width:0` en toda la
cadena. Es la misma trampa que el `[hidden]` contra `display:grid`: la
regla existe, pero pierde. */
#k2Facetas, .kf, .kf-chips{ min-width:0; max-width:100% }
.kf-chips{ overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap }
.kf-chip{ white-space:nowrap }
/* ── 28 · `1fr` NO ES `minmax(0,1fr)` ──────────────────────────────────────
Con el catálogo completo entraron títulos largos —"Veintiuno y Ocupando mi
Lugar", "Celebraciones y Tradiciones"— y la rejilla se salió: 577px de
ancho en una pantalla de 390.
La causa NO eran los pills (ésos sí ruedan bien; su rect se sale a
propósito porque están dentro de un scroll horizontal). Era la rejilla:
una columna `1fr` se niega a bajar de su `min-content`, y el título más
largo fija ese piso. `minmax(0,1fr)` es la única forma de decirle a una
columna que puede encoger. Con `min-width:0` en la tarjeta y el corte de
palabra, la portada provisional aguanta cualquier nombre. */
.k2new .k2-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.k2new .k2-gcard{ min-width:0 }
.k2new .k2-gtitle,
.k2new .k2-gsub{ overflow-wrap:anywhere; hyphens:auto }
/* En la PORTADA el corte se hace con guion, no a media palabra.
`anywhere` parte donde sea y deja «Bienvenid / o al Mundo»; `break-word`
deja que la sílaba y el guion de `hyphens:auto` (el ya trae
lang="es") manden, y solo parte en seco si de plano no cabe. La rejilla
no se desborda por esto: quien la deja encoger es `minmax(0,1fr)`. */
.k2new .k2-gcover .gk-title,
.k2new .k2-gcover .gk-ktitle{ overflow-wrap:break-word; hyphens:auto }
@media (max-width:1000px){ .k2new .k2-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:640px){ .k2new .k2-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
/* Los nombres largos de la portada provisional, a una medida que quepa.
Va prefijado con #k2Grid a propósito: styles.css fija el tamaño de la
portada Kids de la rejilla con `#k2Grid .k2-gcover.kids .gk-ktitle`, y un
id le gana a cualquier cadena de clases. Sin el id, esta regla se
escribía y no pasaba nada — que es justo lo que estaba pasando.
Y la portada provisional respira menos por los lados: son nombres largos
(«Veintiuno y Ocupando mi Lugar») en una caja de 95 px. */
#k2Grid .k2-gcover.keep.prov,
#k2Grid .k2-gcover.kids.prov{ padding:12% 8% }
/* Y la portada Keepsake trae `white-space:nowrap` de styles.css: se escribió
para nombres de dos palabras («Nuestra Historia»). Con «Veintiuno y
Ocupando mi Lugar» la línea medía 220 px dentro de una portada de 125 y se
salía por los dos lados, cortada. En la provisional el nombre puede ocupar
los renglones que necesite: es tipografía, no arte. */
#k2Grid .k2-gcover.keep.prov .gk-title,
#k2Grid .k2-gcover.gk-largo .gk-title{ white-space:normal }
/* `.gk-largo` la pone kora-esencial.js a cualquier portada cuyo nombre pase
de 12 caracteres —provisional o no—. Es la que salva a «Mi Primer Año»
Keepsake, que antes se llamaba «Llegaste tú» y cabía. */
@media (max-width:640px){
#k2Grid .k2-gcover.keep.gk-largo .gk-title{ font-size:17px; line-height:1.16 }
}
@media (max-width:640px){
#k2Grid .k2-gcover.keep.prov .gk-title{ font-size:15px; line-height:1.16 }
#k2Grid .k2-gcover.kids.prov .gk-ktitle{ font-size:16px; line-height:1.16 }
#k2Grid .k2-gcover.keep.prov .gk-sub,
#k2Grid .k2-gcover.kids.prov .gk-subk{ font-size:9.5px }
}
@media (min-width:641px) and (max-width:1000px){
#k2Grid .k2-gcover.kids.prov .gk-ktitle{ font-size:20px; line-height:1.16 }
#k2Grid .k2-gcover.keep.prov .gk-title{ font-size:19px; line-height:1.16 }
}
@media (min-width:1001px){
#k2Grid .k2-gcover.keep.prov .gk-title{ font-size:22px; line-height:1.14 }
}
/* ══════════════════════════════════════════════════════════════════════════
29 · EL CATÁLOGO, COMO WONDERBLY — 29 ago 2026 (5ª vuelta)
Migas arriba, texto a la izquierda, un solo renglón de pills, portadas.
══════════════════════════════════════════════════════════════════════════ */
/* ── Las migas de pan ─────────────────────────────────────────────────────
"Me gusta que arriba viene el detalle de cómo llegaste a los títulos que
estás viendo." Es una ruta, no un control: pesa poco y no compite. */
.kr{
display:flex; flex-wrap:wrap; align-items:center; gap:.45em;
margin:0 0 1.6rem; padding:0;
font-family:var(--font-body); font-size:12px; letter-spacing:.06em;
color:var(--clay);
}
.kr-sep{ opacity:.45 }
.kr-i{ color:var(--clay) }
/* ── El encabezado del catálogo, a la izquierda ───────────────────────────
Estaba centrado. Centrado se lee como portada; a la izquierda se lee como
el principio de una lista — que es lo que es. */
#s5 .k2wrap > #k2GridKick,
#s5 .k2wrap > #k2GridTitle,
#s5 .k2wrap > #k2GridLede{ text-align:left; margin-left:0; margin-right:auto }
#s5 .k2wrap > #k2GridTitle{ max-width:22ch }
/* ── Un solo renglón de pills ─────────────────────────────────────────────
El selector de "Ver por" se esconde (no se borra: media docena de atajos lo
aprietan por dentro). En su lugar, una etiqueta que dice qué se está
ofreciendo — y que cambia sola al encadenar el siguiente filtro. */
#k2Facetas .kf-fila{ display:none !important }
.kf-chips-lbl{
margin:0 0 .6rem; font-family:var(--font-body);
font-size:11px; letter-spacing:.14em; text-transform:uppercase;
color:var(--clay); opacity:.75;
}
#k2Facetas{ text-align:left }
/* Lo cubre la regla global `[hidden]` del §21. */
/* ── Kids y Keepsake: el patrón de Artifact Uprising ──────────────────────
La imagen grande primero y más compacta, para que la primera portada entre
en el primer vistazo. Antes empezaba en el pixel 981 de 900 de pantalla. */
.k2-au #k2Hero{ margin-bottom:1.6rem; padding-top:1.2rem; padding-bottom:1.2rem }
.k2-au #k2Hero .k2-hero-l{ max-width:330px }
.k2-au #k2Hero .k2-hero-in{ align-items:center }
.k2-au #k2Facetas{ margin-top:0; margin-bottom:1.4rem }
.k2-au #k2GridHead{ margin-top:.4rem }
@media (max-width:900px){
.k2-au #k2Hero .k2-hero-l{ max-width:none }
}
/* ── El renglón de personas, ya con sus fotos ─────────────────────────────
La caja ya venía con la proporción final (4/5), así que al entrar la foto
no se movió nada. Sólo faltaba decirle a la imagen que llene su caja. */
.kq-art > img{
display:block; width:100%; aspect-ratio:4/5;
object-fit:cover; border-radius:inherit;
}
/* ── El héroe en el celular: la foto PRIMERO ──────────────────────────────
En celular styles.css apila el héroe con `order:` y vuelve las dos columnas
`display:contents`. Ese orden se escribió para el mockup dibujado —el que
se llamaba `.k2-hero-frame`—, y al cambiarlo por la foto de verdad la caja
se quedó sin ancho: en un teléfono el héroe salía SIN imagen. Justo la
página cuyo trabajo es enseñar el libro.
Aquí se le devuelve su caja y se manda hasta arriba, que es lo que hace
Artifact Uprising: primero se ve, después se explica. */
@media (max-width:780px){
.k2new #k2Hero .k2-hero-l{
display:block !important; order:0;
width:100%; max-width:225px; margin:0 auto .7rem;
}
.k2new #k2Hero .k2-hero-l .k2-foto{ width:100%; aspect-ratio:3/4 }
/* El renglón que se abre ("Cómo es un libro Keepsake") se iba hasta arriba
por no tener orden propio. Va al final, con lo demás que explica. */
.k2new #k2Hero .k-mas{ order:7; width:100% }
/* Y el bloque entero respira menos: en el celular cada rem de más empuja
las portadas otra media pantalla hacia abajo. */
.k2-au #k2Hero{ padding-top:.8rem; padding-bottom:.8rem; margin-bottom:1rem }
.k2-au #k2Hero .k2-hero-in{ gap:.25rem }
.k2-au #k2Hero .k2-ddesc{ margin-top:10px }
.k2-au #k2Facetas{ margin-bottom:1rem }
}
/* ══════════════════════════════════════════════════════════════════════════
30 · EL LANDING, SEGUNDO ORDEN — 29 ago 2026 (6ª vuelta)
══════════════════════════════════════════════════════════════════════════ */
/* ── Los renglones que se arrastran ───────────────────────────────────────
El cursor dice que se puede agarrar ANTES de intentarlo. Es la mitad del
arreglo: la otra mitad —cancelar el clic al soltar— vive en el JS. */
.kq-row{ cursor:grab; overscroll-behavior-x:contain }
.kq-row.kq-agarrado{ cursor:grabbing; scroll-snap-type:none; user-select:none }
.kq-row.kq-agarrado img{ pointer-events:none }
/* ── "Los que ya puedes hacer" ────────────────────────────────────────────
Mismo renglón deslizable que las personas, pero con portadas. La portada se
clona de la que el catálogo ya pinta, así que nunca se desincronizan. */
.lp-top-row .lp-top-tile{ text-align:left }
.lp-top-art{
display:block; background:#EFEAE2; border-radius:3px;
padding:11% 11% 0; overflow:hidden;
border:.5px solid var(--sand-light,#D8D1C4);
transition:transform .28s ease, border-color .28s ease;
}
.lp-top-tile:hover .lp-top-art{ transform:translateY(-3px); border-color:var(--taupe,#948A7C) }
.lp-top-cover{ display:block }
/* `.k2new` trae su propio ancho y su propio aire para la pantalla del
catálogo; aquí sólo se quiere el estilo de la portada. */
.lp-top-cover.k2new{ padding:0; margin:0; max-width:none; background:none; width:100% }
.lp-top-cover .k2-gcover{ width:100%; aspect-ratio:3/4 }
/* La portada Keepsake trae `white-space:nowrap` (ver la sección 29). En un
recuadro de 200 px «Nuestra Historia» se salía por los dos lados. */
.lp-top-cover .k2-gcover.keep .gk-title{ white-space:normal; font-size:17px; line-height:1.14 }
.lp-top-cover .k2-gcover.kids .gk-ktitle{ font-size:15px; line-height:1.16 }
.lp-top-cover .k2-gcover .gk-sub,
.lp-top-cover .k2-gcover .gk-subk{ font-size:9.5px }
.lp-top-cover .k2-gcover{ margin:0 }
.lp-top-n{
display:block; margin-top:.85rem;
font-family:var(--font-display,'Cormorant Garamond',serif);
font-size:19px; line-height:1.15; color:var(--dark,#2C2520);
}
@media (max-width:640px){
.lp-top-n{ font-size:17px }
}
/* ── El manifiesto, partido en dos ────────────────────────────────────────
Antes: una tira ancha arriba y el texto debajo, a lo largo de toda la
pantalla — renglones de 90 caracteres que nadie lee. Ahora la foto ocupa la
mitad izquierda y el texto la derecha, con una medida de lectura decente. */
.lp-mani-full{
display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0;
/* A sangre de verdad: traía el respiro lateral de la página y la foto
empezaba en el pixel 22 en vez de pegada a la orilla. AU no deja ese
margen y por eso su bloque partido se siente de lado a lado. */
padding:0; margin-left:0; margin-right:0; max-width:none;
}
.lp-mani-foto{ position:relative; overflow:hidden; min-height:100% }
/* La foto llena su mitad de orilla a orilla: en AU el bloque partido no deja
aire arriba ni abajo de la imagen, y eso es la mitad de por qué se lee como
un bloque y no como una figura suelta. La altura la fija el texto. */
.lp-mani-foto > img,
.lp-mani-foto > .kph{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
border-radius:0; border:none;
}
.lp-mani-full .lp-manifesto{ min-height:min(78vh, 620px) }
.lp-mani-full .lp-manifesto{
display:flex; flex-direction:column; justify-content:center;
padding:clamp(2.2rem, 4vw, 3.4rem) clamp(1.6rem, 4vw, 3.4rem);
max-width:none; margin:0; text-align:left;
}
/* La medida de lectura manda: sin tope, los renglones se iban a 90 caracteres
y de paso estiraban la foto de al lado hasta 872 px de alto. */
.lp-mani-full .lp-manifesto > *{ max-width:34ch }
.lp-mani-full .lp-mani-h,
.lp-mani-full .lp-mani-verse,
.lp-mani-full .lp-mani-turn{ text-align:left; margin-left:0; margin-right:auto }
.lp-mani-full .lp-mani-rule{ margin-left:0 }
.lp-mani-full .lp-mani-cta{ justify-content:flex-start; text-align:left }
@media (max-width:820px){
.lp-mani-full{ grid-template-columns:1fr }
/* Apilado, la mitad de la foto ya no tiene quién le dé altura (el texto está
abajo, no al lado). La proporción se la pone la CAJA, porque la imagen va
posicionada dentro de ella. */
.lp-mani-foto{ aspect-ratio:4/3 }
.lp-mani-full .lp-manifesto{ min-height:0 }
}
/* ── Los cuatro pasos, delgados ───────────────────────────────────────────
De cuatro fotos verticales (612 px de landing) a un renglón de cuatro
dibujos. Explica un procedimiento: no tiene que competir con las portadas. */
.lp-pasos-flaco{ padding-top:1.6rem; padding-bottom:1.6rem }
.lpf-row{
list-style:none; margin:1.6rem 0 0; padding:0;
display:grid; grid-template-columns:repeat(4, 1fr); gap:1.6rem;
}
.lpf{ position:relative; text-align:center }
.lpf-art{ display:block; color:var(--clay,#8A7355) }
.lpf-art svg{ width:42px; height:42px; display:block; margin:0 auto }
.lpf-n{
display:block; margin:.5rem auto .55rem; width:20px; height:20px;
border:.5px solid var(--sand-light,#D8D1C4); border-radius:50%;
font-family:var(--font-body); font-size:10.5px; line-height:19px;
color:var(--clay);
}
.lpf h4{
margin:0 0 .25rem; font-family:var(--font-display,'Cormorant Garamond',serif);
font-size:17px; font-weight:500; line-height:1.2; color:var(--dark,#2C2520);
}
.lpf p{ margin:0; font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--clay) }
@media (max-width:640px){
.lpf-row{ grid-template-columns:1fr 1fr; gap:1.5rem 1rem }
.lpf-art svg{ width:34px; height:34px }
.lpf h4{ font-size:15.5px }
.lpf p{ font-size:12.5px }
}
/* ── El héroe partido en dos ──────────────────────────────────────────────
El patrón de Artifact Uprising, y la solución a dos cosas de un golpe: una
foto casi cuadrada que no aguanta ir a sangre completa, y un texto que se
encimaba con la familia. Ahora cada uno tiene su mitad.
La altura la fija la fotografía (5/6, su proporción casi original), y el
texto se centra en su panel — así nunca hay recorte raro ni hueco. */
.lp-hero-split{
display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
background:var(--cream,#FBF8F2);
}
.lp-hero-split-txt{
display:flex; flex-direction:column; justify-content:center;
padding:clamp(2.4rem, 5vw, 5rem) clamp(1.6rem, 5vw, 4.4rem);
text-align:left;
}
.lp-hero-split-txt .lp-h1{
margin:0 0 1.8rem; text-align:left; max-width:16ch;
color:var(--dark,#2C2520);
}
.lp-hero-split-txt .lp-cta-row{
display:flex; flex-wrap:wrap; gap:.9rem;
justify-content:flex-start; margin:0;
}
.lp-hero-split-img{ position:relative; overflow:hidden; background:#EFEAE2 }
.lp-hero-split-img img{
display:block; width:100%; height:100%; aspect-ratio:5/6;
object-fit:cover; object-position:center 42%;
}
@media (min-width:901px){
}
/* En el celular la foto va arriba y el texto abajo: primero se enseña, luego
se explica — la misma regla que gobierna todo este archivo. */
@media (max-width:900px){
.lp-hero-split{ grid-template-columns:1fr }
.lp-hero-split-img{ order:0 }
.lp-hero-split-txt{ order:1; padding:2rem 1.4rem 2.4rem }
.lp-hero-split-txt .lp-h1{ max-width:19ch; margin-bottom:1.4rem }
.lp-hero-split-txt .lp-cta-row{ flex-direction:column; align-items:stretch }
.lp-hero-split-img img{ aspect-ratio:4/3; max-height:56vh }
}
/* ── El cambio de tono entre un bloque y el siguiente ─────────────────────
29 ago · Vivi: "me gustaría que se vea el cambio de color entre la imagen
—o el texto que acompaña la imagen— y lo que sigue abajo, como lo de AU".
Medido, tenía toda la razón y era peor de lo que parecía: la página va en
#FDFAF5 y el panel del héroe estaba en #FBF8F2. Dos puntos de diferencia:
invisible. El manifiesto iba en #F6F4F1 — siete puntos, casi invisible. Los
bloques partidos flotaban sin orilla y por eso no se leían como bloques.
En AU el panel de "Wedding Collection" es un greige claramente más oscuro
que el blanco de abajo, y esa sola diferencia es la que le da principio y
fin al bloque. Aquí se hace igual, con un tono de la casa: entre el crema
de la página y el arena de los bordes.
Queda un ritmo: panel · página · panel · página. Cada bloque partido tiene
su piso, y el que sigue se despega solo. */
:root{
--kora-panel:#EAE4D9; /* el greige de los bloques partidos */
--kora-hoja:#FDFAF5; /* el crema de la página, para dejarlo explícito */
}
.lp-hero-split{ background:var(--kora-panel) }
/* Lo que va inmediatamente después de cada panel se pinta con el tono de la
página aunque ya lo heredara: si un día cambia el fondo del contenedor, la
orilla no se pierde sola. */
#lpTop, #lpPasos{ background:var(--kora-hoja) }
/* ── Debajo del héroe, blanco ─────────────────────────────────────────────
29 ago · Vivi: "debajo del hero va en blanco; lo de «para quién» es sobre
blanco". Y funciona por una razón concreta: son ocho fotografías seguidas,
varias en blanco y negro. Sobre el crema de la página se veían apagadas —
el fondo les quitaba el blanco. Sobre blanco, cada una aporta su propio
color y la fila entera se despierta.
Queda además la escalera de tonos que pidió: greige del héroe · blanco de
las personas · crema de los libros · greige del manifiesto · crema. */
/* OJO con el selector: "Los que ya puedes hacer" reusa la clase `.kq-sec`
porque es el mismo renglón deslizable. Pintar por clase se llevaba los dos
bloques a blanco. Va por id. */
.lp-blanco{ background:#FFFFFF }
.kq-sec{ padding-top:2.6rem }
/* El botón flotante de momentos, por si alguna copia vieja del CSS lo
enciende: se retiró del sitio el 29 de agosto. */
.mo-fab, .mo-fab.on{ display:none !important }
/* ══════════════════════════════════════════════════════════════════════════
31 · EL ENCABEZADO, COMO ARTIFACT UPRISING — 29 ago 2026
Sin flechita, y el menú se abre solo al pasar el cursor.
══════════════════════════════════════════════════════════════════════════ */
/* Por si alguna copia vieja del HTML todavía la trae. */
.wf-menu-btn .car{ display:none !important }
/* ── El subrayado sustituye a la flechita ─────────────────────────────────
La flechita era fea pero hacía un trabajo: avisar que ese botón esconde
algo. Quitarla sin poner nada en su lugar deja cinco palabras sueltas que
nadie sabe que se pueden tocar. AU lo resuelve con un subrayado fino bajo
el que está activo — es lo mismo, sin ruido. */
.wf-menu-btn{ position:relative }
.wf-menu-btn::after{
content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
background:currentColor; opacity:0;
transform:scaleX(.4); transform-origin:center;
transition:opacity .18s ease, transform .18s ease;
}
.wf-menu:hover .wf-menu-btn::after,
.wf-menu.open .wf-menu-btn::after,
.wf-menu-btn:focus-visible::after{ opacity:.5; transform:scaleX(1) }
@media (prefers-reduced-motion:reduce){
.wf-menu-btn::after{ transition:none }
}
/* ── El puente sobre el hueco ─────────────────────────────────────────────
Aquí estaba el bug de verdad. El CSS ya abría el menú al pasar el cursor
—`@media(hover:hover){.wf-menu:hover .wf-drop{display:block}}`— pero el
panel arranca 12 px abajo del botón, y esos 12 px son tierra de nadie: al
bajar el cursor sale del `.wf-menu`, el menú se cierra, y se siente como
que "no funciona el hover".
El puente es un pseudo-elemento invisible que cubre justo ese hueco, de
modo que el cursor nunca deja de estar adentro. */
.wf-drop::before{
content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
/* Y un margen de tolerancia a los lados: el panel es más ancho que el botón,
así que bajar en diagonal —como baja todo el mundo— sacaba el cursor por
un costado antes de llegar. */
.wf-menu::after{
content:""; position:absolute; left:-14px; right:-14px; top:100%; height:16px;
display:none;
}
.wf-menu:hover::after{ display:block }
/* En pantallas sin cursor no hay hover que valga: ahí manda el clic, y el
panel va anclado al ancho de la pantalla (eso ya lo hace styles.css). */
@media (hover:none){
.wf-drop::before, .wf-menu::after{ display:none }
}
/* ══════════════════════════════════════════════════════════════════════════
32 · LAS PORTADAS DIBUJADAS — 29 ago 2026 (8ª vuelta)
Cuatro correcciones de Vivi sobre el renglón "Los que ya puedes hacer", y
las cuatro aplican a la portada en TODAS partes: una portada que se ve de
un modo en el landing y de otro en el catálogo son dos portadas distintas
para el mismo libro, y eso confunde más de lo que arregla.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · Un poco menos vertical ───────────────────────────────────────────
Estaban en 3/4 (0.75). A 4/5 (0.80) siguen siendo libro —nadie las
confunde con un cuadro— pero la acuarela de adentro respira y el título
deja de amontonarse. */
#k2Grid .k2-gcover,
.lp-top-cover .k2-gcover{ aspect-ratio:4/5 }
/* ── 2 · Centrada en su recuadro ──────────────────────────────────────────
El recuadro traía `padding:11% 11% 0`: 27 px arriba y 1 px abajo. La
portada quedaba pegada al piso y se veía descuadrada. Mismo aire por los
cuatro lados. */
.lp-top-art{ padding:9%; display:flex; align-items:center; justify-content:center }
.lp-top-cover{ width:100% }
/* ── 3 · En Kids, la imagen arriba y el texto abajo ───────────────────────
Vivi: "en las portadas de Kids el título y subtítulo van abajo, la imagen
arriba". Y además de que se ve mejor, resuelve algo concreto: la tarjeta
repite el título justo debajo de la portada, así que con el título arriba
se leía dos veces casi seguido. Con la acuarela arriba, la portada enseña
y la tarjeta nombra.
Se hace con `order`, sin tocar el HTML que escribe app.js. */
/* Va prefijado con `.k2new`: styles.css fija `order:0` al título con esa misma
cadena, y sin el prefijo mi regla perdía — el título se quedaba arriba y
sólo se movía la acuarela. */
.k2new .k2-gcover.kids{ display:flex; flex-direction:column }
.k2new .k2-gcover.kids .gk-ktitle{ order:2; margin-top:0 }
.k2new .k2-gcover.kids .gk-subk{ order:3; margin-top:.15em }
/* ── 4 · En Keepsake, la acuarela más grande ──────────────────────────────
Medía el 59% del ancho de la portada: un timbre postal en medio de mucho
lino. La acuarela es lo único que enseña de qué va el libro. */
/* Y la portada Keepsake respira menos por los lados: el lino es bonito pero
no cuenta nada; la acuarela sí. */
#k2Grid .k2-gcover.keep,
.lp-top-cover .k2-gcover.keep{ padding-left:7%; padding-right:7% }
/* Ensancharlo no bastaba: el marco es cuadrado y en una portada 4/5 el
cuadrado no cabe, así que flex lo aplastaba —154 de ancho por 100 de alto,
una rendija—. Se le quita el cuadrado y se le da lo que sobre: el marco
crece a lo alto en vez de encogerse. */
#k2Grid .k2-gcover.keep .gk-frame,
.lp-top-cover .k2-gcover.keep .gk-frame{
aspect-ratio:auto; flex:1 1 auto; min-height:42%; margin:5% auto 0;
}
#k2Grid .k2-gcover.keep .gk-frame img,
.lp-top-cover .k2-gcover.keep .gk-frame img{ height:100% }
/* Y se le recorta el aire de arriba y de abajo, que era espacio que el marco
no estaba usando. */
#k2Grid .k2-gcover.keep .gk-kora,
.lp-top-cover .k2-gcover.keep .gk-kora{ padding:6px 0 4px }
/* La acuarela manda. Al bajar el título, el título se quedó con el tamaño de
cuando era el encabezado de la portada y le comía el espacio a la imagen:
en el celular la acuarela quedaba en una décima parte de la portada. En un
libro Kids la acuarela es el producto — se le reserva más de la mitad. */
.k2new .k2-gcover.kids .gk-art{ flex:1 1 auto; min-height:52% }
/* El texto de la portada Kids, de grande a chico. Estaba escrito en dos
tandas que se pisaban entre sí (la de abajo ganaba por venir después), así
que quedó en una sola escalera. Y sobre todo: las reglas de celular sólo
decían `#k2Grid`, y la fila «Lo más pedido» del landing —que es
`.lp-top-cover`— se quedaba con los tamaños de escritorio dentro de una
portada de 160 px; a 360 px el sello se salía 13 px. Las dos repisas
enseñan la misma portada: comparten reglas. */
#k2Grid .k2-gcover.kids .gk-ktitle,
.lp-top-cover .k2-gcover.kids .gk-ktitle{ font-size:16px; line-height:1.15 }
#k2Grid .k2-gcover.kids .gk-subk,
.lp-top-cover .k2-gcover.kids .gk-subk{ font-size:9.5px; line-height:1.3 }
@media (min-width:1001px){
#k2Grid .k2-gcover.kids .gk-ktitle{ font-size:18px }
}
/* En el celular la portada mide unos 170 px de alto: con el título a 16 px y
el sello abajo, el 52% no se alcanzaba. Se le baja el aire al texto para
que la acuarela se acerque a su mitad. */
@media (max-width:640px){
#k2Grid .k2-gcover.kids,
.lp-top-cover .k2-gcover.kids{ padding-bottom:6px }
#k2Grid .k2-gcover.kids .gk-art,
.lp-top-cover .k2-gcover.kids .gk-art{ min-height:44%; margin:4px 0 3px }
#k2Grid .k2-gcover.kids .gk-kick,
.lp-top-cover .k2-gcover.kids .gk-kick{ font-size:6.5px; letter-spacing:.12em }
/* Los títulos de tres renglones —«Nuestro viaje a la playa»— empujaban el
sello fuera de la portada. Con la acuarela flexible y el texto acotado,
cabe el más largo del catálogo. */
#k2Grid .k2-gcover.kids .gk-ktitle,
.lp-top-cover .k2-gcover.kids .gk-ktitle{ font-size:13px }
#k2Grid .k2-gcover.kids .gk-subk,
.lp-top-cover .k2-gcover.kids .gk-subk{ font-size:8.5px }
/* Keepsake, el mismo apretón por el otro lado: el pie «KORA» con su respiro
de escritorio no cabía debajo del marco. */
#k2Grid .k2-gcover.keep .gk-kora,
.lp-top-cover .k2-gcover.keep .gk-kora{ font-size:8px; letter-spacing:.14em; padding:4px 0 5px }
}
/* Debajo de 400 px la portada mide unos 145 px y el reparto se pone fino. Se
le deja a la acuarela un piso modesto —un tercio, no la mitad— y se encoge
todo lo demás: sin piso se caía al 19% y el libro dejaba de leerse; con el
piso del 44%, el sello se salía. */
@media (max-width:400px){
#k2Grid .k2-gcover.kids .gk-art,
.lp-top-cover .k2-gcover.kids .gk-art{ min-height:34%; margin:3px 0 2px }
#k2Grid .k2-gcover.kids .gk-ktitle,
.lp-top-cover .k2-gcover.kids .gk-ktitle{ font-size:11.5px; line-height:1.1 }
#k2Grid .k2-gcover.kids .gk-subk,
.lp-top-cover .k2-gcover.kids .gk-subk{ font-size:7.5px; line-height:1.25 }
#k2Grid .k2-gcover.kids .gk-kick,
.lp-top-cover .k2-gcover.kids .gk-kick{ font-size:6px; margin-bottom:1px }
#k2Grid .k2-gcover.keep .gk-kora,
.lp-top-cover .k2-gcover.keep .gk-kora{ font-size:7px; padding:3px 0 4px }
/* El piso del 42% para el marco, que en escritorio le daba altura, aquí lo
empujaba: en una portada de 142 px el pie «KORA» se salía 6 px. */
#k2Grid .k2-gcover.keep .gk-frame,
.lp-top-cover .k2-gcover.keep .gk-frame{ min-height:28%; margin-top:3% }
#k2Grid .k2-gcover.keep .gk-title,
.lp-top-cover .k2-gcover.keep .gk-title{ font-size:12px; line-height:1.12 }
#k2Grid .k2-gcover.keep .gk-sub,
.lp-top-cover .k2-gcover.keep .gk-sub{ font-size:7.5px; line-height:1.25 }
}
/* ══════════════════════════════════════════════════════════════════════════
33 · EL ENCABEZADO DEL CATÁLOGO, EN POCAS PALABRAS — 29 ago 2026
Vivi puso lado a lado el catálogo de Wonderbly y el nuestro: "compara lo
pocas palabras que tiene el de ellos y lo fácil de usar contra el nuestro..
vamos a simplificar!!"
Ellos, antes de la primera portada: migas · un título · una frase · cuatro
pastillas · "227 books". Cinco cosas.
Nosotros teníamos nueve: migas · EL CATÁLOGO · Todos los títulos ·
CAPÍTULO DE VIDA · siete pastillas · Solo los que ya están · 48 títulos.
Tres de ellas eran etiquetas que sólo nombraban a la de abajo.
Se van las dos etiquetas de rótulo y el «solo los que ya están» sube a la
fila de pastillas. Nada se borra del DOM —«El catálogo» sigue escrito
porque `estante()` lee ese texto para armar las migas—; se esconde. */
/* 1 · El sombrerito. Las migas ya dicen dónde estás; repetirlo debajo es
decirlo dos veces. */
#s5 #k2GridKick{ display:none !important }
/* 2 · La etiqueta de las pastillas. Una pastilla que dice «Viajes y
Aventuras» no necesita que arriba diga «capítulo de vida». */
#k2ChipsLbl{ display:none !important }
/* 3 · «Los que ya están» sube al renglón de las pastillas. En escritorio va
a la derecha de ellas; en celular las pastillas ruedan a lo ancho y él
se acomoda debajo, pero solo, sin rótulo ni línea que lo separe. */
/* `nowrap` a proposito: con `wrap`, flex primero PARTE el renglon y solo
despues encoge, asi que el boton se caia solo a un segundo renglon aunque
sobrara espacio. Sin wrap, las pastillas se encogen y ruedan -que es justo
lo que ya saben hacer- y el boton se queda al lado. */
.kf-linea{ display:flex; align-items:center; gap:.55rem .8rem; flex-wrap:nowrap }
.kf-linea > .kf-chips{ flex:1 1 auto; min-width:0; margin-bottom:0 }
.kf-linea > .kf-ahora{ flex:0 0 auto }
@media (max-width:760px){
.kf-linea{ flex-wrap:wrap; gap:.5rem }
.kf-linea > .kf-chips{ flex:1 0 100% }
}
/* 4 · El pie se queda sólo con la cuenta, alineada a la derecha como en
Wonderbly, y sin la rayita que antes lo convertía en otro bloque. */
#k2Facetas .kf-pie{
display:flex; justify-content:flex-end; align-items:center;
border-top:0; padding-top:0; margin-top:.9rem; min-height:0;
}
/* 5 · Por qué no se veía. `css/styles.css` apaga `.k2new .k2-lede` (opacity:0,
max-height:0) y sólo la enciende cuando el bloque trae `.k2-abierta`.
Esa regla se escribió para la pantalla de la semilla, pero `.k2-lede`
es una clase genérica y el catálogo vive dentro del mismo `.k2new`:
llevaba semanas invisible sin que nadie lo notara, porque encima
teníamos el rótulo «EL CATÁLOGO» ocupando su lugar. Con dos ids gana
sin tocar styles.css. El `[hidden]` sigue mandando cuando de verdad
hay que esconderla. */
#s5 #k2GridLede{
opacity:1; pointer-events:auto; max-height:none; overflow:visible;
}
/* 6 · La única frase que queda. Wonderbly tiene una; nosotros la teníamos
escondida. Se enseña, a la izquierda, corta. */
#s5 .k2wrap > #k2GridLede{
margin-top:.5rem; margin-bottom:1.5rem;
font-size:16px; color:var(--clay); max-width:62ch;
}
@media (max-width:760px){
#s5 .k2wrap > #k2GridLede{ font-size:15px; margin-bottom:1.2rem }
}
/* ══════════════════════════════════════════════════════════════════════════
34 · UNA PORTADA EN EL HERO — 29 ago 2026
Vivi: "en el hero creo que vale la pena agregar una foto de alguna de
nuestras portadas sobre el lado que tenemos el texto.. para que se entienda
que vendemos libros".
Es la falla más cara del landing: alguien que llega y no baja ve una frase
preciosa y una familia en el campo. Nada dice libro. Va la portada de
Nuestra Historia · Keepsake debajo de los botones, del lado del texto,
del tamaño de un libro sostenido en la mano — no de un banner. */
.lp-hero-libro{
margin:1.7rem 0 0; width:clamp(160px, 15.5vw, 212px); flex:0 0 auto;
}
/* Hereda lino, marco y tipografía del catálogo, pero las reglas de la repisa
están amarradas a `#k2Grid` y a `.lp-top-cover`, así que aquí se repiten
las tres que importan: la proporción, el marco grande y el aire de menos. */
/* (El apretón del panel de texto se retiró: existía porque la portadita
flotante hacía el panel más alto que la foto. Sin ella, el panel vuelve a
su respiro de siempre.) */
.lp-hero-libro .k2-gcover{ aspect-ratio:4/5 }
.lp-hero-libro .k2-gcover.keep{ padding:6% 7% 16px }
.lp-hero-libro .k2-gcover.keep .gk-frame{
width:94%; aspect-ratio:auto; flex:1 1 auto; min-height:42%; margin:5% auto 0;
}
.lp-hero-libro .k2-gcover.keep .gk-frame img{ height:100% }
.lp-hero-libro .k2-gcover.keep .gk-title{ font-size:15px }
.lp-hero-libro .k2-gcover.keep .gk-sub{ font-size:9px; margin-top:3px }
.lp-hero-libro .k2-gcover.keep .gk-kora{ font-size:7px; padding:5px 0 3px }
/* En el celular el texto va debajo de la foto y el hero ya es alto: la
portada se encoge y se acuesta junto a los botones, no debajo. */
@media (max-width:900px){
.lp-hero-libro{ margin-top:1.6rem; width:118px; align-self:flex-start }
.lp-hero-libro .k2-gcover.keep .gk-title{ font-size:12px }
.lp-hero-libro .k2-gcover.keep .gk-sub{ font-size:7.5px }
}
/* ── 33b · «Los que ya están», con forma de pastilla ──────────────────────
Al subirlo al renglón de los pills se veía lo que siempre había sido: un
enlace subrayado con un circulito, en medio de siete pastillas. Dos formas
distintas para la misma clase de decisión. Toma la forma de las demás y se
distingue por el punto y por el color al encenderse, no por ser otra cosa. */
.kf-linea > .kf-ahora{
border:.5px dashed var(--k2-line,#E6DDCC); border-radius:999px;
background:var(--white,#FFFDF9);
padding:.55rem .95rem; min-height:40px; font-size:12.5px;
color:var(--k2-taupe,#948A7C); white-space:nowrap;
transition:background .18s, border-color .18s, color .18s;
}
.kf-linea > .kf-ahora:hover{ border-color:var(--k2-taupe,#948A7C) }
.kf-linea > .kf-ahora.on{
background:var(--k2-ok,#7C9468); border-style:solid;
border-color:var(--k2-ok,#7C9468); color:#FDFAF5;
}
/* En celular el pie se volvía columna (para separar el botón de la cuenta) y
ahora sólo lleva la cuenta: la columna la dejaba a la izquierda del centro.
Se queda a la derecha en todos lados, como en Wonderbly. */
@media (max-width:640px){
#k2Facetas .kf-pie{ flex-direction:row; align-items:center; justify-content:flex-end }
}
/* ══════════════════════════════════════════════════════════════════════════
35 · EL LIBRO EN BRAZOS — 29 ago 2026
El hero enseñaba una familia en el campo. Precioso, pero podríamos ser una
agencia de viajes: nada decía libro. La primera respuesta fue una portada
chiquita junto al texto, y no alcanzaba — se veía flotando.
Ahora la mitad derecha es el render del libro sostenido en brazos. Enseña
de un golpe lo único que faltaba —el tamaño, el grosor, el lino, unas
manos— y trae una persona adentro, así que no perdimos el calor humano.
El encuadre baja un poco para que la portada quede centrada y no se coma
el borde. */
.lp-hero-split-img img{ object-position:center 46% }
@media (max-width:900px){
/* En el celular el cuadro es 4/3 y el libro es vertical: se sube el
encuadre para que el lomo y las manos entren completos. */
.lp-hero-split-img img{ object-position:center 42% }
}
/* ══════════════════════════════════════════════════════════════════════════
36 · LOS DOS LADOS DEL HERO — 29 ago 2026
Vivi: "vamos a probar tener la familia en el campo del lado izquierdo con
el texto encima (igual si espejamos la imagen de fondo se acomoda mejor el
texto) y dejar solo la imagen del libro en brazos del lado derecho".
La corazonada del espejo era la correcta, aunque no por la razón obvia. Se
midió el contraste del fondo justo debajo del texto, con las letras
apagadas para no contarlas a ellas mismas: espejeada o no, el promedio es
idéntico (5.44:1 las dos). Lo que cambia es DÓNDE cae cada cosa. Sin
espejo, la bruma clara del cielo queda a la derecha y el tagline aterriza
sobre el pasto y los árboles; con espejo, la bruma sube a la izquierda —
justo debajo del texto— y el papá se recorre al lado del libro, donde no
estorba. El botón secundario pasó de ilegible a legible con sólo voltear
la foto.
Aun así, una foto cruda debajo de un texto no aguanta: la mitad del área
quedaba por debajo de 4.5:1. Lleva un velo de crema en degradado radial
desde arriba a la izquierda — fuerte donde está el texto, suelto donde
camina la niña. Con él, el tagline baja a 0.6% del área bajo el mínimo, y
la foto conserva su color (se midió: es el velo que MÁS foto deja viva de
los tres que se probaron). */
@media (min-width:901px){
.lp-hero-split-txt{ position:relative; isolation:isolate; background:transparent }
.lp-hero-fondo{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--kora-panel,#EAE4D9) }
.lp-hero-fondo img{
display:block; width:100%; height:100%; object-fit:cover;
object-position:center 62%;
transform:scaleX(-1);
}
.lp-hero-fondo::after{
content:''; position:absolute; inset:0;
/* 30 ago · Vivi: "bajarle un poquito a la opacidad del filtro para que
luzca un poco más la foto". Baja de .92/.74/.22 a .82/.60/.14 —el
velo se aclara un 11% donde va el texto y casi se disuelve en la
mitad derecha, que es donde camina la familia. Se volvió a medir el
contraste del fondo debajo del tagline con las letras apagadas: el
peor punto sigue arriba del mínimo legible, que es el único techo que
tiene este número. */
background:radial-gradient(120% 105% at 8% 30%,
rgba(250,246,239,.82) 0%, rgba(250,246,239,.60) 42%,
rgba(250,246,239,.14) 78%, rgba(250,246,239,0) 100%);
}
.lp-hero-split-txt > *:not(.lp-hero-fondo){ position:relative; z-index:1 }
/* El botón secundario era texto suelto con una rayita. Sobre lino y arena
se leía; sobre pasto, no —el 20% de su caja quedaba bajo el mínimo—.
Encima de una foto, un botón necesita superficie: se le da una pastilla
de crema, discreta, que además lo empareja con el primario. */
.lp-hero-split-txt .btn-secondary{
background:rgba(253,250,245,.86); color:#3A322A;
border:.5px solid rgba(90,80,68,.22); border-radius:999px;
padding:.9rem 1.4rem; border-bottom-color:rgba(90,80,68,.22);
backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.lp-hero-split-txt .btn-secondary:hover{ background:#FDFAF5; border-color:rgba(90,80,68,.42) }
}
/* En el celular NO. Ahí la foto del libro ya ocupa la primera pantalla y el
texto va debajo; meterle una segunda foto atrás deja dos fotos encimadas y
el botón secundario otra vez ilegible sobre el pasto. Abajo de 900 el
panel se queda de arena, como estaba. */
@media (max-width:900px){
.lp-hero-fondo{ display:none }
}
/* ══════════════════════════════════════════════════════════════════════════
37 · EL HERO, CON EL ACOMODO DEL MOCKUP DE VIVI — 30 ago 2026
Vivi mandó su propio mockup: "me gusta la edición que le diste a la foto
pues se hace más cálida.. pero el acomodo lo quiero más similar a este".
El velo se queda tal cual (es lo que da el calor). Lo que cambia es el
acomodo, y se midió pixel por pixel sobre su imagen de 932×426 para no
copiarlo a ojo:
· la costura entre los dos lados cae en 61.2% (no en la mitad)
· el alto del hero da una proporción de 2.19:1 (el nuestro era 1.95:1)
· el texto arranca en el 14.6% de la altura — no va centrado
· el título mide ~31 px en su lienzo → ~48 px a 1440
· el primer botón: 7.5% desde la izquierda del panel, 61.5% de altura
· el segundo: pegado a la esquina de abajo a la derecha de la foto,
a un 4% de cada borde
Y los dos botones son de crema. El oscuro daba jerarquía sobre arena, pero
sobre una foto pesa como una mancha; en su mockup la jerarquía la hacen la
posición y el cuerpo — el primero es crema sólida, el segundo translúcido. */
@media (min-width:901px){
.lp-hero-split{ grid-template-columns:61.2% 38.8%; align-items:stretch }
/* La proporción de su lienzo, con topes para pantallas muy anchas o muy
bajitas. El alto lo manda el hero, no la foto: así los dos lados miden
lo mismo y no vuelve a quedar la tira de crema debajo de la imagen. */
.lp-hero-split{ height:clamp(520px, 45.6vw, 760px) }
.lp-hero-split-img{ height:100% }
.lp-hero-split-img img{ height:100%; max-height:none }
/* El texto arranca arriba, no al centro. */
/* Ojo con el porcentaje de arriba: un padding en % se mide contra el ANCHO
del contenedor, no contra su alto. Su mockup pide el 14.6% de la ALTURA,
y como la altura del hero es 45.6vw, eso son 6.66vw. */
.lp-hero-split-txt{
justify-content:flex-start;
padding:clamp(1.6rem, 6.66vw, 111px) clamp(1.6rem,4vw,3.4rem)
clamp(1.6rem,4vw,3.4rem) 7.6%;
}
/* El corte del título va donde ella lo puso —«Porque estamos / hechos de
historias»— y no donde caiga. Con `max-width` no se puede: el ancho que
parte esa frase en dos ahí y no antes cabe en unos 40 px, y a la primera
pantalla distinta se rompe. Con dos en bloque, el corte es el
mismo en todos los anchos de escritorio, y abajo de 900 vuelven a ser
texto corrido. */
.lp-hero-split-txt .lp-h1{
font-size:clamp(34px, 3.34vw, 50px); line-height:1.16;
max-width:none; margin:0;
}
.lp-hero-split-txt .lp-h1 span{ display:block }
.lp-hero-split-txt .lp-invita{
font-family:var(--font-display); font-style:italic; font-weight:400;
font-size:clamp(26px, 2.75vw, 41px); line-height:1.18;
color:var(--dark,#2C2520); max-width:none;
margin:.62em 0 0;
}
.lp-hero-split-txt .lp-invita span{ display:block }
/* El aire entre la itálica y el botón también sale medido: 52 px en su
lienzo de 426 de alto = 12.2% de la altura = 5.6vw. */
.lp-hero-split-txt .lp-cta-row{ margin-top:clamp(1.2rem, 5.6vw, 93px) }
/* Los dos botones, en crema. */
.lp-hero-split-txt .btn-primary{
background:#FDFAF5; color:#2C2520; border-radius:5px;
padding:1rem 1.7rem; font-size:11.5px;
box-shadow:0 10px 26px -14px rgba(64,55,41,.55);
}
.lp-hero-split-txt .btn-primary:hover{ background:#fff }
.lp-hero-split-txt .lp-probadita{
position:absolute; z-index:1; right:4.2%; bottom:4.2%;
background:rgba(253,250,245,.72); color:#2C2520;
border:.5px solid rgba(253,250,245,.85); border-radius:5px;
padding:.9rem 1.5rem; font-size:11px;
backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
transition:background .25s, border-color .25s;
}
.lp-hero-split-txt .lp-probadita:hover{ background:rgba(253,250,245,.94) }
}
/* En el celular no hay foto detrás del texto (§36), así que la esquina no
existe: la probadita vuelve a la fila, debajo del botón principal, y el
principal recupera su color de siempre porque ya no está sobre una foto. */
@media (max-width:900px){
/* `.lp-h1` trae `margin-bottom:1.3rem` de styles.css, pensado para cuando
el título era el bloque completo. Ahora la itálica va justo debajo y ese
margen se suma al suyo: quedaba un hueco del tamaño de un renglón. */
.lp-hero-split-txt .lp-h1{ margin-bottom:0 }
.lp-hero-split-txt .lp-invita{
font-family:var(--font-display); font-style:italic; font-weight:400;
font-size:clamp(21px, 5.6vw, 28px); line-height:1.2;
color:var(--dark,#2C2520); margin:.55em 0 0; max-width:16ch;
}
.lp-hero-split-txt .lp-cta-row{ margin-top:1.5rem }
.lp-hero-split-txt .lp-probadita{
display:block; width:100%; margin-top:.9rem;
background:transparent; border:none;
border-bottom:.5px solid var(--sand-light);
padding:.8rem 0;
}
}
/* ══════════════════════════════════════════════════════════════════════════
38 · EL LANDING SE SEPARA CON AIRE, NO CON COLOR — 30 ago 2026
Vivi: "de AU también me gusta que en su landing, después de cada tema dejan
más espacio en blanco y ponen una línea horizontal.. me gusta más esto que
siempre estar cambiando de color de fondo".
Tiene razón y además arregla algo que veníamos arrastrando: la escalera de
tonos (greige → crema → blanco → greige) obligaba a decidir el color de
cada sección nueva en función de su vecina, así que meter una sección en
medio repintaba media página. Con fondo único, una sección nueva no le
debe nada a las de al lado.
El hero se queda con su foto: ahí el corte de color lo hace la imagen. */
.lp-blanco, #lpTop, #lpPasos, #lpColecciones,
.lp-mani-full, .lp-tone1, .lp-tone2{ background:#FFFFFF }
/* Las tarjetas que se pintaban de blanco PARA despegarse de un fondo de color
ahora se quedarían invisibles: pasan a llevar un hilo de contorno. */
.lp-tone1 .lp-io-card, .lp-tone2 .lpt-panel{
background:#FFFFFF; border:.5px solid var(--sand-light,#E6DDCC);
}
/* La línea de AU: corta, centrada, con mucho aire arriba y abajo. No es un
borde de sección —eso reparte el aire mal— sino una marca propia. */
#lpTop, #lpPasos, #lpTry, #lpColecciones, #lpRegalo{
border-top:0; position:relative;
padding-top:clamp(3.4rem, 6vw, 6.2rem);
padding-bottom:clamp(3.4rem, 6vw, 6.2rem);
}
#lpTop::before, #lpPasos::before, #lpTry::before,
#lpColecciones::before, #lpRegalo::before{
content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:54px; height:1px; background:var(--sand-light,#E6DDCC);
}
/* El manifiesto es la foto de lado a lado: no lleva línea ni aire extra,
porque su propio borde ya corta la página. */
.lp-mani-full{ border-top:0 }
#lpQuien{ padding-top:clamp(2.6rem, 4.5vw, 4.6rem) }
/* ══════════════════════════════════════════════════════════════════════════
39 · LAS CINCO PUERTAS, Y LOS PILLS CON ESQUINA — 30 ago 2026
Vivi: "los pills de abajo son muchísimos.. vamos a separar en kids,
keepsake, ocasión, tema.. nuestros pills no los quiero tan redondos de las
esquinas.. quiero más bien el rectángulo redondeado y en algún color".
El verde es el de la casa (--k2-ok, el mismo del «disponible ahora»), no
uno nuevo: si el catálogo estrena color, el sitio empieza a tener dos
verdes que casi son el mismo y ése es el principio del final de una
paleta. */
.kf-puertas{
display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.1rem;
}
.kf-puerta{
cursor:pointer; border-radius:6px;
font-family:var(--font-body); font-weight:400; font-size:13.5px;
letter-spacing:.01em; padding:.72rem 1.15rem; min-height:42px;
color:#3C5142; background:#EEF2EC;
border:.5px solid #D8E2D5;
transition:background .18s, border-color .18s, color .18s;
}
.kf-puerta:hover:not(:disabled){ background:#E3EBE0; border-color:#BFD0BA }
.kf-puerta.on{
background:var(--k2-ok,#7C9468); border-color:var(--k2-ok,#7C9468); color:#FDFAF5;
}
/* 30 ago · Dos puertas en verde sólido al mismo tiempo —la que tiene filtro
puesto y la que está abierta— se leían como dos "estás aquí". Sólido es
sólo la ABIERTA; la que ya dejó un filtro puesto lleva un contorno, y su
registro completo vive en las migas. */
.kf-puerta.puesta:not(.abierta){
background:#EEF2EC; color:#3C5142;
border-color:var(--k2-ok,#7C9468); border-width:1px;
}
.kf-puerta:disabled{ opacity:.4; cursor:default }
/* Los pills de adentro toman la misma esquina, pero se quedan claros: son el
segundo nivel y no deben competir con la puerta que los abrió. */
.kf-linea > .kf-ahora{ border-radius:6px }
@media (max-width:640px){
.kf-puertas{ gap:.4rem; margin-bottom:.9rem }
.kf-puerta{ font-size:12.5px; padding:.6rem .9rem; min-height:38px }
}
/* ══════════════════════════════════════════════════════════════════════════
40 · LA REPISA EN BLANCO — 30 ago 2026
Vivi: "vamos a dejar el fondo todo blanco y hacer los recuadros de cada
libro menos altos.. también quisiera explorar que aquí venga el costo como
lo pone AU (discreto).. de AU también me gusta cómo acomoda la información
de arriba para saber qué libros estás viendo, ellos subrayan el tema y así
puedes navegar desde ahí también muy fácilmente". */
/* 1 · Blanco. El recuadro tenía un degradado de estudio que servía cuando la
página era crema: despegaba la portada del papel. Sobre blanco esa
mancha gris es justo lo que sobra. Se va el degradado y se queda la
sombra de contacto, que es la que hace que el libro se vea apoyado y
no pegado. */
/* 2 · Menos altos. El recuadro era 3/4 —más alto que ancho— y con la portada
adentro cada renglón de la rejilla medía 465 px. A 1/1 la fila baja a
~350 y entran tres libros y medio en una pantalla en vez de dos. */
#k2Grid .k2-marco{ aspect-ratio:1/1; padding:9% 14% }
@media (max-width:640px){ }
/* 3 · El precio, discreto como en AU: debajo del título, del tamaño de la
letra chica, sin gritar. */
.k2new .k2-gprecio{
margin:.45rem 0 0; font-family:var(--font-body);
font-size:12.5px; font-weight:400; letter-spacing:.01em;
color:var(--k2-ink,#2C2520);
}
/* La línea de qué trata el libro deja de ser itálica: la itálica era para el
subtítulo, que es voz del libro. Esto es voz de la casa explicando. */
.k2new .k2-gsub.k2-glinea{
font-style:normal; font-size:12.5px; line-height:1.45; color:var(--k2-ink-soft,#5A5044);
}
/* 4 · Las migas, como AU. Estaban pegadas al encabezado y sin subrayar, así
que no parecían navegación sino un rótulo. Ahora respiran y el tramo
que se puede soltar se ve que se puede tocar. */
#k2Ruta{ margin-top:clamp(1.4rem, 3vw, 2.6rem); margin-bottom:1.1rem }
/* El renglón de arriba ahora lleva las puertas + «Los que ya están»; los
pills bajan a su propia fila, de ancho completo, para que puedan rodar. */
.kf-linea > .kf-puertas{ flex:1 1 auto; min-width:0; margin-bottom:0 }
.kf-linea > .kf-chips{ flex:none }
@media (max-width:760px){
.kf-linea > .kf-puertas{ flex:1 1 auto }
}
/* ══════════════════════════════════════════════════════════════════════════
41 · SEGUNDA VUELTA DEL CATÁLOGO Y DEL LANDING — 30 ago 2026
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · LAS MIGAS, LIMPIAS ──────────────────────────────────────────────
Sin pastilla y sin ×: texto y separadores, y subrayada la última para que
se vea dónde estás parado. */
#k2Ruta{ display:flex; flex-wrap:wrap; align-items:center; gap:.1rem .45rem }
#k2Ruta .kr-i{
background:none; border:0; padding:0; cursor:pointer;
font-family:var(--font-body); font-weight:300; font-size:13px;
color:var(--k2-taupe,#948A7C); text-decoration:none;
transition:color .18s;
}
#k2Ruta .kr-i:hover{ color:var(--k2-ink,#2C2520) }
#k2Ruta .kr-i.aqui{
color:var(--k2-ink,#2C2520);
text-decoration:underline; text-underline-offset:4px;
text-decoration-thickness:.5px; cursor:default;
}
#k2Ruta .kr-sep{ color:var(--k2-sand,#9B8E74); font-size:12px }
/* ── 2 · EL RECUADRO GRIS CÁLIDO, DE VUELTA ─────────────────────────────
Vivi lo pidió de regreso. Sobre página blanca el recuadro hace lo que el
blanco no puede: darle un suelo a la portada. Vuelve el degradado de
estudio; lo que NO vuelve es el fondo crema de la página. */
#s5, #s5 .k2new{ background:#FFFFFF }
#k2Grid .k2-marco{
background:
radial-gradient(120% 90% at 50% 12%, #F2EFEA 0%, #E7E3DC 55%, #DEDAD2 100%);
}
/* ── 3 · EL TEXTO DE ABAJO, SIEMPRE DEL MISMO ALTO ──────────────────────
Vivi: "el espacio para el texto que va abajo debe ser siempre el mismo
independientemente del largo, para que todas las portadas queden siempre
alineadas". Con títulos de uno y de tres renglones, cada tarjeta medía
distinto y la rejilla quedaba en escalera. Se le fija el alto y el precio
se ancla abajo, así que los precios también quedan en línea. */
.k2new .k2-gcard{ display:flex; flex-direction:column }
.k2new .k2-gmeta{
display:flex; flex-direction:column;
min-height:128px; margin-top:14px; position:relative;
}
.k2new .k2-gtitle{ margin-top:0 }
.k2new .k2-gsub{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden;
}
@media (max-width:640px){
.k2new .k2-gmeta{ min-height:112px }
}
/* ── 4 · EL PUNTITO VERDE ────────────────────────────────────────────────
La franja tapaba la esquina de las 48 portadas. El punto va abajo a la
derecha del texto, a la altura del precio, y sólo aparece si el libro se
puede hacer hoy. Su texto sigue ahí para el lector de pantalla. */
/* `top` e `izquierda` hay que APAGARLOS a mano: la regla de la sección 20
sigue viva y ponía el punto arriba a la izquierda, encima del título. Poner
`right/bottom` sin quitar `top/left` estira la caja de esquina a esquina —
que es justo la manchita que salió al lado de cada nombre. */
.k2-estado{
position:absolute; top:auto; left:auto; right:0; bottom:0; z-index:2;
width:7px; height:7px; border-radius:50%; padding:0;
background:var(--k2-ok,#7C9468); box-shadow:none;
overflow:hidden; text-indent:-999em; white-space:nowrap;
}
.k2-estado.soon{ display:none }
/* Y lo que está en camino se ve en camino: la tarjeta baja el tono sin que
nadie tenga que leer una etiqueta. */
.k2new .k2-gcard.k2-apagada .k2-marco{ opacity:.72 }
.k2new .k2-gcard.k2-apagada .k2-gtitle{ color:var(--k2-taupe,#948A7C) }
.k2new .k2-gcard.k2-apagada .k2-gprecio{ color:var(--k2-sand,#9B8E74) }
/* ── 5 · «ALGUNAS HISTORIAS FAVORITAS»: CUATRO, EN DOS RENGLONES ─────────
Deja de ser un carrusel. Con cuatro fijas ya no hay nada que rodar, así
que se van las flechas y el arrastre. */
/* 30 ago (tarde) · Vivi: "que cuando veas las 4 portadas en el celular
abarquen bien el espacio completo en sus dos renglones.. y cuando lo veas
en iPad o computadora se vean los mismos 4 en un solo renglón".
Antes eran dos columnas topadas a 320 px en TODOS los anchos: en el
celular dejaban margen de sobra y en 1440 dejaban media pantalla vacía a
la derecha. La forma correcta es que el número de columnas cambie y el
ancho de cada una no: dos que llenan en el celular, cuatro que llenan de
iPad para arriba. El corte va en 700 px porque el iPad más angosto en
vertical mide 768. */
#lpTopRow{
display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
gap:clamp(1.1rem, 2.4vw, 2.4rem); overflow:visible; cursor:default;
max-width:100%;
}
@media (min-width:701px){
#lpTopRow{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
}
#lpTop .kq-arrows{ display:none }
#lpTopRow .lp-top-tile{ width:auto; flex:none; text-align:left }
#lpTopRow .lp-top-n{ display:block; margin-top:.9rem }
#lpTopRow .lp-top-p{
display:block; margin-top:.25rem;
font-family:var(--font-body); font-size:13px; color:var(--k2-ink-soft,#5A5044);
}
#lpTopRow .lp-top-tile.k2-apagada .lp-top-art{ opacity:.72 }
#lpTopRow .lp-top-tile.k2-apagada .lp-top-n,
#lpTopRow .lp-top-tile.k2-apagada .lp-top-p{ color:var(--k2-taupe,#948A7C) }
@media (max-width:640px){
#lpTopRow{ gap:1.2rem }
}
/* ── 6 · LOS PASOS, CON COLOR ────────────────────────────────────────────
Vivi: "ahora quedó todo muuuy blanco y sin cortes.. vamos a regresarle
fondo de color a los pasos de cómo se hace un libro Kora". Es la sección
que mejor aguanta el color: no lleva portadas ni fotos, sólo cuatro
dibujos de línea que sobre greige se ven mejor que sobre blanco. */
#lpPasos{
background:var(--kora-panel,#EAE4D9);
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
padding-left:calc(50vw - 50%); padding-right:calc(50vw - 50%);
}
/* Su línea de separación sobra: el color ya corta. */
#lpPasos::before{ display:none }
/* ══════════════════════════════════════════════════════════════════════════
42 · LAS PORTADAS, TERCERA VUELTA — 30 ago 2026
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · KIDS, COMO LA REFERENCIA ────────────────────────────────────────
Vivi mandó la lámina de «Los cuentos pequeños»: "me gustaba cómo las
teníamos en esta referencia.. sólo aquí faltaba agregarle el lomo y que
estuvieran dentro de un recuadro".
El lomo y el recuadro ya los tenía la rejilla. Lo que faltaba era el
ORDEN: en la lámina el sellito «KORA · KIDS» va ARRIBA, antes de la
acuarela; en la rejilla estaba hasta abajo, empujado por `margin-top:auto`.
Cuatro líneas de `order` y la portada de la rejilla es la de la lámina. */
.k2new .k2-gcover.kids .gk-kick{ order:0; margin-top:0; margin-bottom:.55em }
.k2new .k2-gcover.kids .gk-art{ order:1; margin-top:0; margin-bottom:.6em }
.k2new .k2-gcover.kids .gk-ktitle{ order:2 }
.k2new .k2-gcover.kids .gk-subk{ order:3; margin-bottom:0 }
/* Sin nada que empuje hacia abajo, la acuarela se queda con lo que sobra —
que es lo que hace que se vea grande, como en la lámina. */
.k2new .k2-gcover.kids .gk-art{ flex:1 1 auto }
/* ── 2 · MENOS CREMA, MÁS HUESO ──────────────────────────────────────────
Vivi: "haría que las portadas estén un poco menos crema y más hueso /
blancas.. las tipo lino también ligeramente más claras y los recuadros un
poco más oscuros para que haya más contraste con cualquier portada".
Es una sola idea con tres movimientos: separar el libro de su fondo. Antes
portada y recuadro compartían familia de crema y el libro se disolvía;
ahora el libro sube hacia el hueso y el recuadro baja hacia el lino sucio.
Medido en luminancia, la diferencia entre portada y fondo pasa de 4% a 13%
en Kids y de 12% a 20% en Keepsake. */
.k2new .k2-gcover.kids{ background:#FBFAF7 }
.k2new .k2-gcover.keep{
background:
repeating-linear-gradient(0deg, rgba(160,140,110,.05) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(160,140,110,.05) 0 1px, transparent 1px 3px),
linear-gradient(150deg, #F4EFE5, #E7DFD0);
}
#k2Grid .k2-marco, .lp-top-art{
background:
radial-gradient(120% 90% at 50% 12%, #E3DDD2 0%, #D4CDC0 55%, #C7BFAF 100%);
}
/* ── 3 · EL LIBRO CABE EN SU RECUADRO ────────────────────────────────────
"Hay que hacer los recuadros un poco más grandes o la portada interior
ligeramente más chica.. ahorita se siente apretado". Era lo segundo, y por
una razón concreta: la portada pedía `width:100%` y con proporción 4/5 eso
la hacía 275 px de alto dentro de una caja de 251 — se salía por arriba y
por abajo del respiro. Ahora manda el ALTO: la portada toma la altura que
deja el respiro y su ancho sale de la proporción. Nunca se sale. */
#k2Grid .k2-marco{ padding:11% 14% }
#k2Grid .k2-marco > .k2-gcover{
width:auto; height:100%; max-width:100%; flex:0 1 auto;
}
@media (max-width:640px){ #k2Grid .k2-marco{ padding:9% 11% } }
/* ── 4 · EL TÍTULO KEEPSAKE, A SU TAMAÑO ─────────────────────────────────
"Revisa bien el tamaño del título de Nuestra Historia keepsake.. sale
enorme". Medía 31 px en una portada de 220: el 14% del ancho por letra, y
«Nuestra Historia» se partía en dos renglones ocupando un cuarto de la
portada. En el render de verdad ese título ocupa la mitad del ancho en un
solo renglón. A 19 px cae en 55%, que es lo que enseña el libro. */
#k2Grid .k2-gcover.keep .gk-title,
.lp-top-cover .k2-gcover.keep .gk-title{ font-size:19px; line-height:1.06 }
@media (max-width:1000px){
#k2Grid .k2-gcover.keep .gk-title{ font-size:17px }
}
@media (max-width:640px){
#k2Grid .k2-gcover.keep .gk-title{ font-size:14px }
#k2Grid .k2-gcover.keep.gk-largo .gk-title{ font-size:13px }
}
/* ── 5 · EL CUADRO INTERIOR, CUADRADO ────────────────────────────────────
"El cuadro interior en los keepsake debe ir cuadrado, no rectangular".
Ayer le quité el cuadrado porque el título de 31 px no dejaba altura y
flex lo aplastaba a 178×123. Con el título a su tamaño, el cuadrado cabe
solo: se le devuelve `aspect-ratio:1/1` y se le quita el `flex:1`, que era
justo lo que lo deformaba. */
/* El cuadrado tiene que caber, no sólo ser cuadrado. Con `width:82%` fijo, el
lado del cuadrado lo mandaba el ANCHO de la portada, y en pantallas chicas
ese lado era más alto que el hueco que quedaba: el pie «Kora» se salía
hasta 31 px. Ahora el lado lo manda el ALTO disponible —`flex` reparte lo
que sobra— y el ancho sale de la proporción, topado para que en pantallas
anchas no se coma los márgenes. Cuadrado siempre, salido nunca. */
#k2Grid .k2-gcover.keep .gk-frame,
.lp-top-cover .k2-gcover.keep .gk-frame,
.lp-hero-libro .k2-gcover.keep .gk-frame{
aspect-ratio:1/1; flex:1 1 auto; min-height:0;
width:auto; height:auto; max-width:84%; align-self:center;
margin:6% auto 0;
}
/* ── 6 · UN SOLO RENGLÓN DE PILLS ────────────────────────────────────────
Vivi: "siguen apareciendo los dos renglones de pills en lugar de esconder
el primero que seleccionas y mostrar en su lugar los nuevos pills para
filtrar, en el mismo formato y mismos colores".
Queda un reparto limpio: los PILLS bajan (abren el siguiente nivel) y las
MIGAS suben (regresan). Dos renglones a la vez repetían el trabajo de las
migas, que ya llevan el registro de dónde estás.
Y los pills de adentro se visten igual que las puertas —mismo verde, misma
esquina, mismo tamaño—: si ocupan el mismo lugar del renglón, ser de otro
color los hacía parecer otra cosa. */
#k2Facetas.kf-abierta .kf-linea{ display:none }
#k2Facetas:not(.kf-abierta) > .kf-chips{ display:none }
#k2Facetas > .kf-chips{ margin-top:0 }
#k2Chips .kf-chip{
border-radius:6px; min-height:42px; padding:.72rem 1.15rem;
font-family:var(--font-body); font-weight:400; font-size:13.5px;
color:#3C5142; background:#EEF2EC; border:.5px solid #D8E2D5;
}
#k2Chips .kf-chip:hover{ background:#E3EBE0; border-color:#BFD0BA }
#k2Chips .kf-chip.on{
background:var(--k2-ok,#7C9468); border-color:var(--k2-ok,#7C9468); color:#FDFAF5;
}
@media (max-width:640px){
#k2Chips .kf-chip{ font-size:12.5px; padding:.6rem .9rem; min-height:38px }
}
/* ── 7 · EL TEXTO DE LA TARJETA, JUNTO ───────────────────────────────────
"El puntito de disponible debe ir justo debajo del recuadro y el costo
justo debajo de la info del libro.. ahorita está todo muy despegado".
El alto fijo del bloque (que sirve para que las portadas queden alineadas)
estaba repartiendo el aire ADENTRO: el precio se iba al fondo con
`margin-top:auto` y el punto a la esquina de abajo. Ahora todo se apila
pegado arriba y el sobrante queda abajo, donde no se ve. El alto fijo
sigue haciendo su trabajo; ya no lo hace a costa del texto. */
.k2new .k2-gprecio{ margin-top:.5rem; padding-top:0 }
.k2-estado{
position:absolute; top:-10px; right:0; left:auto; bottom:auto;
width:7px; height:7px; border-radius:50%;
}
@media (max-width:640px){ .k2-estado{ top:-9px } }
/* ── 8 · EL CELULAR CHICO, OTRA VEZ ──────────────────────────────────────
A 360 px la portada mide unos 100 px de alto. El cuadrado de Keepsake y la
acuarela de Kids se quedaban con el 26% y el 32% de la portada, porque el
texto —que a esa escala ya no es legible de todos modos— se comía el resto.
Aquí el texto se encoge a lo que le toca y la imagen recupera su mitad.
Va DESPUÉS de las reglas de ≤640 a propósito: son la misma cadena de
selectores, y a igualdad de peso gana la última. */
@media (max-width:400px){
#k2Grid .k2-gcover.keep{ padding:5% 6% 10px }
#k2Grid .k2-gcover.keep .gk-title{ font-size:11px; line-height:1.05 }
#k2Grid .k2-gcover.keep.gk-largo .gk-title{ font-size:10px }
#k2Grid .k2-gcover.keep .gk-sub{ font-size:6.5px; line-height:1.2 }
#k2Grid .k2-gcover.keep .gk-kora{ font-size:6px; padding:2px 0 3px }
#k2Grid .k2-gcover.keep .gk-frame{ max-width:88%; margin-top:4% }
#k2Grid .k2-gcover.kids{ padding:5% 7% 6px }
#k2Grid .k2-gcover.kids .gk-kick{ font-size:5.5px; margin-bottom:.3em }
#k2Grid .k2-gcover.kids .gk-ktitle{ font-size:10.5px }
#k2Grid .k2-gcover.kids .gk-subk{ font-size:7px }
#k2Grid .k2-gcover.kids .gk-art{ min-height:40%; margin:2px 0 3px }
}
/* ══════════════════════════════════════════════════════════════════════════
43 · TRES ENCUADERNACIONES, Y LA LÍNEA QUE SOBRABA — 30 ago 2026
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · LA LÍNEA SOMBREADA ──────────────────────────────────────────────
Vivi: "se quedó una línea sombreada en todas las portadas que hay que
quitar". Es el `::before` de styles.css: un degradado de siete paradas que
dibuja la bisagra de una tapa dura, con un segundo golpe oscuro al 74% del
lomo. En un libro grande esa ranura es correcta —es donde dobla la tapa—,
pero en una portada de 190 px cae a siete pixeles del borde y ya no se lee
como bisagra: se lee como una raya que alguien se dejó.
Se queda el lomo (el borde oscuro y su reflejo) y se va la ranura. */
.k2new .k2-gcover::before{
background:linear-gradient(90deg,
rgba(52,42,26,.30) 0%, rgba(52,42,26,.12) 26%,
rgba(255,252,244,.22) 62%, rgba(52,42,26,.05) 88%, rgba(52,42,26,0) 100%);
}
/* ── 2 · PASTA BLANDA ────────────────────────────────────────────────────
«Los días de Sienna» va en pasta blanda. Un libro de pasta blanda no tiene
canto de tapa: el lomo es más delgado, más suave, y el perímetro pierde el
filo que en la tapa dura marca el borde del cartón. */
.k2new .k2-gcover.k2-blanda::before{
width:3.2%;
background:linear-gradient(90deg,
rgba(52,42,26,.19) 0%, rgba(52,42,26,.07) 48%, rgba(52,42,26,0) 100%);
}
.k2new .k2-gcover.k2-blanda::after{
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.16),
inset 0 0 0 1px rgba(120,95,60,.07);
}
/* Y la sombra que proyecta es más corta: pesa menos y se apoya distinto. */
#k2Grid .k2-gcover.k2-blanda,
.lp-top-cover .k2-gcover.k2-blanda{
box-shadow:0 9px 18px -10px rgba(64,55,41,.45), 0 1px 4px -1px rgba(64,55,41,.24);
}
/* ── 3 · BOARD BOOK ──────────────────────────────────────────────────────
«Mi Primer Año» va en board book: cartón grueso y esquinas redondeadas
para que un bebé no se pique. Lleva el lomo suave de la pasta blanda —el
cartón no tiene bisagra— más la esquina, que es lo que de un vistazo dice
"esto es para morderlo". El radio va en porcentaje del ancho para que se
vea igual de redondo en la rejilla que en el renglón del landing. */
.k2new .k2-gcover.k2-board{ border-radius:5%/4% }
.k2new .k2-gcover.k2-board::before{
width:3%;
background:linear-gradient(90deg,
rgba(52,42,26,.16) 0%, rgba(52,42,26,.06) 55%, rgba(52,42,26,0) 100%);
}
.k2new .k2-gcover.k2-board::after{
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.18),
inset 0 0 0 1px rgba(120,95,60,.08);
}
#k2Grid .k2-gcover.k2-board,
.lp-top-cover .k2-gcover.k2-board{
box-shadow:0 12px 22px -11px rgba(64,55,41,.5), 0 1px 5px -1px rgba(64,55,41,.26);
}
/* ── 4 · KIDS, TODO EN GRANDSTANDER ──────────────────────────────────────
Vivi: "para todas las portadas kids va en el grandstander". El sello y el
título ya iban; el subtítulo se había quedado en Jost —la tipografía del
cuerpo del sitio— y en una portada de niños eso hace que la línea de abajo
parezca interfaz y no libro. */
.k2new .k2-gcover.kids .gk-subk,
.lp-top-cover .k2-gcover.kids .gk-subk{
font-family:'Grandstander', var(--font-body, sans-serif);
}
/* El renglón de favoritas hereda `.kq-row`, que en el celular se sale a
sangre completa (`width:100vw` y márgenes negativos) con 1.4 rem de
respiro — porque era un carrusel y tenía que poder rodar de borde a
borde. Como rejilla eso deja las tarjetas 44 px más angostas que el
título de la sección, que es justo lo que se veía como "no abarcan bien
el espacio". Se le quita la herencia del carrusel. */
/* El corte va en 760, no en 700: la regla del carrusel vive en
`@media (max-width:760px)`, y con el mío en 700 quedaba una franja de 60
px —justo la del iPad más angosto en horizontal partido— donde ya había
cuatro columnas pero seguía el respiro del carrusel. */
@media (max-width:760px){
#lpTopRow{
margin-left:0; margin-right:0;
padding-left:0; padding-right:0;
width:auto; max-width:100%;
}
}
/* ── La invitación, en el verde de Kora ──────────────────────────────────
Vivi: "también cambiar de color «guarda las que cuentan la tuya»".
El reflejo era ponerla en `--clay`, que es el color de todas las itálicas
del sitio. Se midió sobre el fondo real del hero y no aguanta: el clay
(#7A6652) deja el 57% del área bajo el mínimo legible, porque es un café
medio encima de una foto clara. Probé siete tonos; el que sí funciona y
además significa algo es el verde profundo de la casa —el mismo de los
pills del catálogo y de la palabra resaltada en las portadas Kids—, que
queda en 7:1 de promedio y 0% bajo el mínimo.
Y es un cambio de verdad: clay al lado de la tinta café del tagline se
habría leído como el mismo color mal impreso. El verde separa. */
.lp-hero-split-txt .lp-invita{ color:#3C5142 }
/* ══════════════════════════════════════════════════════════════════════════
44 · EL ENCABEZADO SE ABRE EN COLUMNAS — 30 ago 2026
Del mockup de catálogo que mandó Vivi se rescató una sola cosa, que es la
que valía: el panel de ancho completo con una columna por grupo y los
títulos de verdad debajo. Antes el desplegable de Keepsake listaba seis
nombres de capítulo y había que abrir cada uno para saber qué había
adentro; ahora el encabezado ES el mapa del catálogo.
Keepsake son 26 títulos en columnas de 2 a 7 · Kids son 22 en columnas de
1 a 9. Caben sin apretarse. */
/* Ojo con el `left:50%`: el panel es hijo de `.wf-menu`, que es el BOTÓN, así
que centrarlo al 50% lo centra sobre el botón y no sobre la página. Con un
panel angosto no se notaba; con uno de 1100 px, «Keepsake» —que está a la
derecha del logo— se salía 114 px de la pantalla en una laptop.
Se ancla a la ventana (`fixed`) y se pega al borde de abajo de la barra:
así queda centrado de verdad, y al no dejar hueco entre la barra y el
panel no hay tierra de nadie donde el menú se cierre solo. */
.wf-menu[data-menu="k-keepsake"] .wf-drop,
.wf-menu[data-menu="k-kids"] .wf-drop{
position:fixed; top:var(--kora-hdr, 66px);
left:50%; right:auto; transform:translateX(-50%);
width:min(1100px, calc(100vw - 48px)); max-width:none; min-width:0;
padding:1.5rem 1.6rem 1.4rem;
}
/* Pegado a la barra, el puente del panel sobra —quedaría flotando dentro del
encabezado, tapándole el clic a los otros botones—. Lo que sí hace falta es
un puente en el BOTÓN: entre su borde de abajo y el de la barra hay unos
milímetros de encabezado que no son suyos, y al bajar el cursor por ahí el
menú se cerraba. */
.wf-menu[data-menu="k-keepsake"] .wf-drop::before,
.wf-menu[data-menu="k-kids"] .wf-drop::before{ display:none }
.wf-menu[data-menu="k-keepsake"]::after,
.wf-menu[data-menu="k-kids"]::after{
content:""; position:absolute; left:-12px; right:-12px; top:100%;
height:26px; display:none;
}
@media (hover:hover){
.wf-menu[data-menu="k-keepsake"]:hover::after,
.wf-menu[data-menu="k-kids"]:hover::after{ display:block }
}
.wf-menu[data-menu="k-keepsake"].open::after,
.wf-menu[data-menu="k-kids"].open::after{ display:block }
.wm{
display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:1.4rem 1.7rem; align-items:start;
}
.wm-col{ min-width:0 }
/* El encabezado de la columna sigue siendo un botón: abre el capítulo
completo, que es lo que antes hacía el único renglón que había. */
.wm-h{
display:flex; align-items:baseline; gap:.5rem; width:100%;
background:none; border:0; padding:0 0 .5rem; cursor:pointer; text-align:left;
border-bottom:.5px solid var(--sand-light,#E6DDCC); margin-bottom:.55rem;
font-family:var(--font-display); font-size:15px; font-weight:400;
color:var(--dark,#2C2520); letter-spacing:0; text-transform:none;
}
.wm-h:hover{ color:#3C5142 }
.wm-n{
margin-left:auto; font-family:var(--font-body); font-size:9px;
letter-spacing:.14em; text-transform:uppercase; color:var(--sand,#9B8E74);
white-space:nowrap;
}
.wm-lista{ display:flex; flex-direction:column; gap:.05rem }
.wm-t{
display:flex; align-items:baseline; gap:.45rem; width:100%;
background:none; border:0; padding:.3rem .35rem; border-radius:6px;
cursor:pointer; text-align:left;
font-family:var(--font-body); font-weight:300; font-size:13px;
color:var(--k2-ink-soft,#5A5044); letter-spacing:0; text-transform:none;
line-height:1.3;
}
.wm-t:hover{ background:#F7F2E9; color:var(--dark,#2C2520) }
/* El punto verde: el mismo código que ya usan las portadas del catálogo. Se
dibuja SÓLO en lo que ya se puede hacer — los otros dejan su hueco para
que las columnas queden alineadas, sin marcar ausencia con un color. */
.wm-pt{
flex:0 0 5px; width:5px; height:5px; border-radius:50%;
background:transparent; transform:translateY(-1px);
}
.wm-t.ya .wm-pt{ background:var(--k2-ok,#7C9468) }
.wm-t.ya{ color:var(--dark,#2C2520) }
@media (max-width:900px){
.wf-menu[data-menu="k-keepsake"] .wf-drop,
.wf-menu[data-menu="k-kids"] .wf-drop{
width:calc(100vw - 28px); padding:1.1rem 1.1rem 1rem;
}
.wm{ grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:1rem 1.1rem }
.wm-h{ font-size:14px }
.wm-t{ font-size:12.5px }
}
/* ══════════════════════════════════════════════════════════════════════════
45 · EL RIEL DEL EDITOR, EN VERSIÓN KIDS — 30 ago 2026
Vivi, haciendo el libro de un año de su bebé: "en el encabezado chiquito hay
que decir KORA · KIDS y agregar las banderitas que teníamos en el encabezado
anterior". El riel ya existía y ya abría el encabezado completo al pasarle
el cursor; sólo decía «KORA» a secas, escrito a mano en el código. */
body.ed-inmersivo .ed-riel-kids{
gap:.7rem; letter-spacing:0;
}
.ed-riel-lockup{
font-family:var(--font-display); font-size:13px; letter-spacing:.18em;
}
.ed-riel-lockup b{
font-family:'Grandstander', var(--font-body, sans-serif);
font-weight:600; letter-spacing:.02em;
/* El verde claro de Kids —el mismo de `kkKidsWord()`—, no el verde hondo
del catálogo: sobre un riel blanco de 30 px el hondo se lee casi negro. */
color:#4E9A78;
}
/* Las banderitas vienen del mismo SVG del encabezado Kids. Aquí van a la
altura del riel y sin robarle el clic: el riel entero es un botón. */
@media (max-width:640px){
.ed-riel-lockup{ font-size:11.5px; letter-spacing:.14em }
}
/* ══════════════════════════════════════════════════════════════════════════
46 · LA ANTESALA DEL REVELADO — 30 ago 2026
La lámina que Vivi pidió antes de la mudanza («se nota que ahí tardamos un
poco»). Comparte forma con la entrada —son las dos la voz del título— pero
entra un punto más callada: la entrada abre la ceremonia y ésta la sostiene
mientras la acuarela termina de pintarse. Si las dos pesaran igual, la
segunda se sentiría como que la ceremonia volvió a empezar. */
.rev-antesala p{ opacity:.92 }
.rev-antesala .rev-dicho-2{ opacity:1 }
/* ══════════════════════════════════════════════════════════════════════════
47 · LA FICHA DEL TÍTULO — 30 ago 2026
Vivi: "falta ponerle el costo más visible.. ahorita queda como muy escondido
abajo.. y podemos dejar tanta especificación más guardada con botones de
despliegue como lo hace AU.. solo dejar a la vista lo muy importante, como
tiempo que requiere el usuario para hacerlo". */
/* 1 · El precio, en el tercer renglón de la ficha, como en AU. Antes iba
debajo del botón y con el mismo cuerpo que la letra chica. */
.k2-detail-price.k2-precio-alto{
margin:1rem 0 1.2rem; padding:0; border:0;
display:flex; flex-direction:column; gap:.2rem;
}
.k2-detail-price.k2-precio-alto b{
font-family:var(--font-display); font-weight:500;
font-size:23px; line-height:1.1; letter-spacing:.01em;
color:var(--dark,#2C2520);
}
.k2-detail-price.k2-precio-alto i{
font-style:normal; font-family:var(--font-body); font-weight:300;
font-size:13px; line-height:1.5; color:var(--k2-ink-soft,#5A5044);
}
@media (max-width:640px){
.k2-detail-price.k2-precio-alto{ margin:.8rem 0 1rem }
.k2-detail-price.k2-precio-alto b{ font-size:20px }
.k2-detail-price.k2-precio-alto i{ font-size:12.5px }
}
/* 2 · Los desplegables. `
Qué foto va aquí
Y se reemplaza cambiando el div por ` del navegador: se abre sin JavaScript, el
buscador lo lee cerrado y el teclado ya sabe manejarlo. */
#s6 .k2-mas{
border-top:.5px solid var(--sand-light,#E6DDCC);
margin:0; padding:0;
}
#s6 .k2-mas:last-of-type{ border-bottom:.5px solid var(--sand-light,#E6DDCC) }
#s6 .k2-mas > summary{
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:1rem 0; font-family:var(--font-body); font-size:14px;
color:var(--k2-ink,#2C2520);
}
#s6 .k2-mas > summary::-webkit-details-marker{ display:none }
#s6 .k2-mas > summary::after{
content:""; width:8px; height:8px; margin-left:1rem; flex:0 0 auto;
border-right:1px solid var(--k2-taupe,#948A7C);
border-bottom:1px solid var(--k2-taupe,#948A7C);
transform:rotate(45deg) translateY(-2px); transition:transform .2s;
}
#s6 .k2-mas[open] > summary::after{ transform:rotate(-135deg) translateY(-2px) }
#s6 .k2-mas > summary:hover{ color:var(--dark,#2C2520) }
#s6 .k2-mas-cuerpo{
padding:0 0 1.1rem; font-family:var(--font-body); font-weight:300;
font-size:13.5px; line-height:1.65; color:var(--k2-ink-soft,#5A5044);
}
#s6 .k2-dfeat-mas{ padding:0 0 1.1rem; margin:0 }
/* 9 sep · Los formatos y sus precios eran un párrafo corrido: los números se
perdían a media oración y no había manera de compararlos de un vistazo.
Un formato por renglón, con su precio al final. */
#s6 .k2-formatos{ list-style:none; margin:0; padding:0 }
#s6 .k2-formatos li{
padding:.42rem 0; border-bottom:.5px dashed var(--sand-light,#EDE6D6);
display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
#s6 .k2-formatos li:last-child{
border-bottom:none; display:block; padding-top:.7rem;
color:var(--taupe,#9E8E78); font-size:12.5px; /* el último renglón es la aclaración, no un formato */
}
#s6 .k2-formatos b{ font-weight:400; color:var(--dark,#2C2520) }
#s6 .k2-formatos i{ font-style:normal; text-align:right; color:var(--clay,#7A6652) }
/* El recorrido, ya adentro del desplegable, no necesita su propia línea de
arriba: la del desplegable ya lo separa. */
#s6 .k2-mas .k2-arc{ margin-top:.2rem; padding-top:1rem }
/* "Regalarlo" deja de ser un enlace escondido en la letra chica de abajo y se
para junto al botón, como la segunda manera de comprar que es. */
.k2new .k2-btn-regalo{
border:1px solid var(--k2-line,#E6DDCC); background:transparent; cursor:pointer;
font-family:'Jost'; font-weight:400; font-size:15px; letter-spacing:.02em;
padding:14px 22px; border-radius:6px; color:var(--k2-taupe,#7A6652);
transition:border-color .2s,color .2s;
}
.k2new .k2-btn-regalo:hover{ border-color:var(--k2-taupe,#7A6652); color:var(--k2-ink,#403729) }
/* 3 · Lo que se queda a la vista —el tiempo— pierde el aire de lista: es un
dato suelto, no un inventario. */
#s6 .k2-dinfo > .k2-dfeat{ margin:0 0 1.4rem }
/* El renglón que se guardó en el desplegable se esconde de la lista de arriba
sin salir del DOM: `poblarDetalle` reescribe esa lista en cada título y
borrarla dejaba al módulo sin de dónde reconstruir. */
#s6 .k2-dfeat li.k2-oculto{ display:none }
/* ══════════════════════════════════════════════════════════════════════════
§48 · EL EDITOR, MÁS CORTO — Y EL BOARD BOOK
1 sep 2026 · Vivi: "eliminar texto que está de más y buscar cómo comprimir
un poco la información para que no sea un panel tan largo.. hay mucho
espacio entre cada cosa.. estas simplificaciones deben aplicar para
toooodo, editor kids y keepsake también".
══════════════════════════════════════════════════════════════════════════ */
/* 1 · Board book. Salió pasta blanda del menú (con 28 páginas no hay lomo que
aguante) y entró el board: esquinas redondeadas y canto grueso. Es el
mismo gesto que ya usan las portadas del catálogo en §43. */
.kcover.kp-board{
border-radius:4%/3%;
box-shadow:0 16px 30px -20px rgba(44,37,32,.46);
}
.kcover.kp-board:not(.kcover-interior)::before{
width:6.5%; border-radius:4% 0 0 3%;
background:linear-gradient(90deg,
rgba(45,36,22,.16) 0 1.5px, rgba(45,36,22,.07) 1.5px 78%,
rgba(255,255,255,.30) 78% 100%);
}
.kcover.kp-board:not(.kcover-interior)::after{
border-radius:4%/3%;
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);
}
/* 2 · El panel respiraba de más: entre cada cosa había casi dos renglones en
blanco. Se aprieta el aire, no el texto — los cuerpos no se tocan. */
#panelSlots .panel-label:first-child{ margin-top:0 }
#panelSlots .panel-nota{ margin-top:.4rem; line-height:1.5 }
#panelSlots .pq-hint{ margin-top:.5rem; line-height:1.5 }
#panelSlots .panel-tools{ margin-bottom:1.15rem }
#panelSlots .pq-photos-label{ margin-top:1.3rem; margin-bottom:.5rem }
/* 3 · Los botones de encuadernado ahora llevan precio: el nombre y el número
se separan para que el precio se lea como precio y no como subtítulo. */
.kprint-pick{ gap:.5rem }
.kprint-op{ flex-direction:column; align-items:flex-start; gap:.15rem; padding:.7rem .85rem }
.kprint-op .kp-name{ font-size:13.5px }
.kprint-op .kp-price{ font-size:12.5px; font-weight:500 }
/* El punto medio del riel: separa sin pesar. La KORA lleva .3em de espaciado y
sin él las dos palabras se leían como una sola. */
.ed-riel-lockup i{ font-style:normal; color:rgba(122,102,82,.5); margin:0 .1em 0 -.12em }
/* 4 · El aviso de guardado subió al principio del panel para que se viera —y
ahí, en cuerpo grande y cuatro renglones, se comía la primera pantalla.
Se queda arriba, que era el punto, pero en el tono de un pie de página:
es una tranquilidad, no un encabezado. */
#s2 .panel-vault p,
#s2 .panel-vault{ font-size:12.5px; line-height:1.4 }
#s2 .panel-vault p{ font-style:normal; font-family:var(--font-body); font-weight:300 }
#s2 .panel-vault svg{ width:13px; height:13px; margin-top:0; opacity:.75 }
/* ══════════════════════════════════════════════════════════════════════════
§49 · EL PANEL, COMPACTO
1 sep 2026 · Vivi: "lo que sí falta es compactar.. que solo sea parte del
título y tenga sus dos renglones.. solo que diga título arriba y con menos
espacio hacia sus renglones de abajo.. lo mismo para el resto del panel".
══════════════════════════════════════════════════════════════════════════ */
/* 1 · El grupo: varios renglones bajo un solo rótulo, cosidos como un campo de
dos o tres pisos. Los bordes se comparten para que se lean como uno. */
/* 2 · El aire entre bloques, de una vez y para todo el panel. Los estilos en
línea de app.js ya bajaron a 1.2rem; esto agarra lo que no los tiene. */
#panelSlots > *{ margin-top:0 }
#panelSlots .panel-label{ margin-top:1.2rem; margin-bottom:.4rem }
#panelSlots > .panel-label:first-child{ margin-top:0 }
#panelSlots .kfont-pick,
#panelSlots .cover-swatches,
#panelSlots .cover-style,
#panelSlots .kprint-pick,
#panelSlots .upbox{ margin-top:0 }
#panelSlots .panel-nota,
#panelSlots .pq-hint{ margin-top:.35rem; margin-bottom:0; line-height:1.45 }
/* 3 · El aviso de guardado volvió al pie. Ahí ya no compite con nada, así que
se separa con una línea en vez de con espacio. */
#s2 .panel-vault{
margin:1.6rem 0 0; padding:.85rem 0 0; align-items:center; gap:.45rem;
border-top:.5px solid rgba(122,102,82,.16);
}
/* ══════════════════════════════════════════════════════════════════════════
§50 · EL FILTRO SÍ ESCONDÍA — LA HOJA DE ESTILOS NO LO DEJABA
1 sep 2026 · Vivi: "no están funcionando bien los filtros para navegar en el
catálogo.. te aparecen todas las opciones (algunas «oscurecidas») pero hay
que mostrar solo las que sí van".
Medido: al filtrar por Kids, `filtra()` ponía `hidden` en 26 de las 48
tarjetas y el contador decía «22 de 48 libros» — correcto. Y las 48 seguían
en pantalla. `[hidden]` es una regla del navegador, de las más débiles que
hay, y `.k2new .k2-gcard{ display:flex }` —dos clases— le gana sin
despeinarse. El filtro llevaba días funcionando a ciegas.
Ya había una sección para esto (§21) con los contenedores; faltaba la
tarjeta, que es justo la que se dibuja con `display` propio.
══════════════════════════════════════════════════════════════════════════ */
/* Lo cubre la regla global `[hidden]` del §21. */
/* ══════════════════════════════════════════════════════════════════════════
§51 · LAS PILLS DE LA BIBLIOTECA, Y EL COLOR DE CADA COLECCIÓN
2 sep 2026 · Vivi: "los pills me gustan más en diseño como los tenemos en
nuestra biblioteca, vamos a hacerlos igual" · "que en los board books usemos
un color más verde menta, luego para los de kids un poco más subido, y los
de keepsake así con el fondo neutro" · "también el puntito verde está ahorita
muy chico y muy pegado al recuadro.. vamos a alinearlo con el título y darle
un tono menos amarilloso".
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · LAS PILLS, IGUAL QUE EN «MI BIBLIOTECA» ─────────────────────────
Es el mismo control haciendo el mismo trabajo en dos pantallas: que se vean
distinto era una decisión que nadie tomó. Se copia `.lib-chip` tal cual —
cápsula, borde de medio punto, arcilla al encenderse— para las puertas y
para sus pills, que en el catálogo ocupan el mismo renglón. */
#k2Puertas .kf-puerta,
#k2Chips .kf-chip{
border:.5px solid var(--sand-light,#E6DDCC);
background:var(--white,#FFFFFF);
color:var(--clay,#7A6652);
border-radius:30px;
padding:.62rem 1.25rem;
min-height:0;
font-family:var(--font-body);
font-weight:400;
font-size:12.5px;
letter-spacing:.04em;
line-height:1.35;
cursor:pointer;
transition:.2s;
box-shadow:none;
}
#k2Puertas .kf-puerta:hover,
#k2Chips .kf-chip:hover{ border-color:var(--clay,#7A6652); background:var(--white,#FFFFFF) }
#k2Puertas .kf-puerta.on,
#k2Chips .kf-chip.on{
background:var(--clay,#7A6652); color:var(--white,#FFFFFF); border-color:var(--clay,#7A6652);
}
/* La cuenta, callada al lado del nombre — como el 19 de «Todos 19». */
#k2Chips .kf-chip em{
font-style:normal; color:var(--sand,#9B8E74); margin-left:.35rem; font-size:11px;
}
#k2Chips .kf-chip.on em{ color:rgba(255,255,255,.7) }
#k2Puertas, #k2Chips{ gap:.5rem }
@media (max-width:640px){
#k2Puertas .kf-puerta, #k2Chips .kf-chip{ padding:.58rem 1.05rem; font-size:12px }
}
/* ── 2 · EL RECUADRO, POR COLECCIÓN ──────────────────────────────────────
Mismo degradado de siempre —claro arriba, más hondo en las orillas— sólo
que teñido. La luz se queda donde estaba para que la portada siga
despegando del fondo; lo que cambia es el color, no la forma. */
/* Los cuatro colores son los de la lámina que pintó Vivi, muestreados del
archivo. Van planos —sin degradado— porque el degradado radial que había
antes hacía un halo alrededor del libro y competía con la textura. */
:root{
--kora-caja-board: #B5CABE; /* menta · board books (0 a 3 años) */
--kora-caja-kids: #8DAF94; /* verde · cuentos Kids */
--kora-caja-claro: #EEEAE1; /* crema · Keepsake de portada moderna blanca */
--kora-caja-lino: #D0C8BD; /* arena · Keepsake de tapa de lino */
}
/* EL LIMEWASH. Su lámina no es color plano: tiene una nube tenue encima, como
la cal pintada a mano. Se hace con dos turbulencias en un SVG de tres
líneas — una de frecuencia baja, que es la nube ancha, y otra fina, que es
el grano del muro— en vez de con una imagen: pesa nada, no se pixela al
ampliar y sirve igual sobre los cuatro colores. Va en `soft-light` para que
aclare y oscurezca el color de abajo sin teñirlo de gris.
Medido contra su lámina: el rango de su textura es de unos ±13 puntos de
luz sobre el promedio, y esto cae en ±12. */
.k2-marco::before,
.lp-top-art::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E\
%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022' numOctaves='3' seed='7'/%3E\
%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E\
%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/%3E\
%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E\
%3Crect width='260' height='260' filter='url(%23a)' opacity='0.55'/%3E\
%3Crect width='260' height='260' filter='url(%23b)' opacity='0.14'/%3E%3C/svg%3E");
background-size:260px 260px;
mix-blend-mode:soft-light;
opacity:.5;
}
/* La portada tiene que quedar ENCIMA de la nube, no debajo. */
.k2-marco > .k2-gcover,
.k2-marco > .k2-estado,
.lp-top-art > *{ position:relative; z-index:1 }
/* Con `#k2Grid` delante a propósito: el recuadro neutro se pinta en §42 con
`#k2Grid .k2-marco`, y un id le gana a cualquier cadena de clases. Es la
misma trampa de siempre en esta hoja; aquí se paga con un id, no con
!important, para que la próxima regla siga pudiendo ganar por especificidad. */
#k2Grid .k2-gcard.k2-fam-board .k2-marco,
.lp-top-tile.k2-fam-board .lp-top-art,
.lp-top-tile.k2-fam-board .k2-marco{ background:var(--kora-caja-board) }
#k2Grid .k2-gcard.k2-fam-kids .k2-marco,
.lp-top-tile.k2-fam-kids .lp-top-art,
.lp-top-tile.k2-fam-kids .k2-marco{ background:var(--kora-caja-kids) }
#k2Grid .k2-gcard.k2-fam-keep-claro .k2-marco,
.lp-top-tile.k2-fam-keep-claro .lp-top-art,
.lp-top-tile.k2-fam-keep-claro .k2-marco{ background:var(--kora-caja-claro) }
#k2Grid .k2-gcard.k2-fam-keep-lino .k2-marco,
.lp-top-tile.k2-fam-keep-lino .lp-top-art,
.lp-top-tile.k2-fam-keep-lino .k2-marco{ background:var(--kora-caja-lino) }
/* La sombra de contacto, del color de su fondo: sobre verde una sombra gris se
ve como una mancha sucia, y sobre la crema clara la de siempre pesaba. */
#k2Grid .k2-gcard.k2-fam-kids .k2-marco > .k2-gcover,
#k2Grid .k2-gcard.k2-fam-board .k2-marco > .k2-gcover,
.lp-top-tile.k2-fam-kids .k2-marco > .k2-gcover,
.lp-top-tile.k2-fam-board .k2-marco > .k2-gcover{
box-shadow:0 16px 30px -14px rgba(28,60,44,.45), 0 2px 6px -2px rgba(28,60,44,.26);
}
#k2Grid .k2-gcard.k2-fam-keep-claro .k2-marco > .k2-gcover{
box-shadow:0 14px 26px -14px rgba(64,55,41,.34), 0 2px 5px -2px rgba(64,55,41,.2);
}
/* ── 3 · EL RÓTULO DE COLECCIÓN ──────────────────────────────────────────
Arriba del título, en el tono de los rótulos de Kora. Dice lo que el color
insinúa: el color se aprende con el uso, la palabra se entiende hoy. */
.k2-gcol{
margin:0 0 .3rem; font-family:var(--font-body); font-weight:400;
font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:var(--k2-sand,#9B8E74);
}
.k2new .k2-gcard.k2-apagada .k2-gcol{ color:var(--k2-line,#C9C1B4) }
/* ── 4 · EL PUNTO VERDE ──────────────────────────────────────────────────
Estaba en 7px, pegado a la esquina del recuadro y en un verde oliva que a
su lado se leía amarillento. Ahora es de 9px, va a la altura del RÓTULO
—que es el primer renglón del texto, o sea alineado con lo que se lee— y
en un verde limpio, el mismo que ya usa el riel de Kids. */
.k2new .k2-gcard .k2-gmeta{ position:relative }
.k2new .k2-gcard .k2-estado{
top:.28rem; right:0; left:auto; bottom:auto;
width:9px; height:9px; background:#4E9A78;
}
/* En la baldosa del landing el rótulo va suelto entre la portada y el nombre:
ahí no hay bloque de texto que lo contenga, es una pila de . */
.lp-top-tile .k2-gcol{ display:block; margin:.85rem 0 .15rem }
.lp-top-tile .lp-top-n{ margin-top:0 }
#lpTopRow .lp-top-tile .lp-top-n{ margin-top:0 }
/* ── 5 · EL RENGLÓN DE PILLS BAJA DE RENGLÓN ─────────────────────────────
Vivi: "no caben todas las opciones". Además de acortar los nombres había
que quitar el `nowrap`: la fila corría de lado con scroll escondido, así
que las últimas opciones existían pero nadie las veía —y en el celular ni
se adivinaba que hubiera más—. Ahora se acomodan en los renglones que
hagan falta, igual que la fila de puertas. */
#k2Facetas > .kf-chips,
#k2Chips{ overflow:visible; flex-wrap:wrap; row-gap:.5rem }
/* ══════════════════════════════════════════════════════════════════════════
§52 · LA LANDING: FONDOS, RITMO Y RESPIRO — 2 sep 2026
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · LAS ORILLAS CREMA ───────────────────────────────────────────────
Vivi: "revisar bien todas las páginas a que no queden con fondo de color
crema.. ejemplo aquí en la landing quedaron las orillas de color crema".
Medido: `#s0` —la hoja de TODA la aplicación— se pinta con `var(--white)`,
y en Kora ese token no es blanco: vale #FDFAF5, un crema. Las secciones que
sí son blancas de verdad miden 1115 px en una ventana de 1321, así que el
crema de la hoja asomaba 103 px por cada lado. Y lo que Vivi vio como un
«oscurecido» encima de «Su legado» era eso mismo: la cuarta baldosa se sale
de la banda blanca y quedaba sobre el crema.
No se toca `--white`: ese token viste botones, tarjetas y campos por todo
el sitio y cambiarlo movería cosas que nadie pidió. Se pinta blanco la
HOJA, que es lo que se ve por las orillas. */
#s0, .screen{ background:#FFFFFF }
/* Y el atenuado de un título que todavía no se puede hacer se queda en su
portada. Vivi: "que el oscurecido no se pase hacia el texto". El nombre y el
precio vuelven a su color: son información, no están apagados. */
#lpTopRow .lp-top-tile.k2-apagada .lp-top-n{ color:var(--dark,#2C2520) }
#lpTopRow .lp-top-tile.k2-apagada .lp-top-p{ color:var(--k2-ink-soft,#5A5044) }
/* ── 2 · «VER TODOS LOS TÍTULOS» Y SU FILETE ─────────────────────────────
Estaba en 11 px con versalitas: al lado de cuatro portadas grandes se
perdía. Sube a 13 y gana aire; debajo, un filete corto al centro cierra la
sección para que las favoritas y el «para quién» dejen de leerse como un
solo bloque. */
#lpTop .lp-more{ margin-top:2.2rem }
#lpTop .lp-more-link{
font-size:13px; letter-spacing:.15em; padding-bottom:4px;
border-bottom-width:1px;
}
.lp-filete{
width:56px; height:0; margin:2.6rem auto 0;
border:0; border-top:1px solid rgba(122,102,82,.3);
}
/* ── 3 · EL RITMO DE COLOR ───────────────────────────────────────────────
Vivi: "después de las fotos de para quién vamos a darle más espacio para que
respire antes de la foto y el manifiesto, que hay que agregarle un fondo
arena, después sigue el «cómo haces tu libro» con fondo blanco, para volver
a ponerle fondo de color debajo de la muestra y cambiar a un color un poco
más subido en la prueba".
Queda: blanco (favoritas · para quién) → arena (manifiesto) → blanco (cómo
haces tu libro) → arena (la muestra) → arena más honda (la prueba). El
blanco no es el fondo, es la pausa entre los bloques que sí tienen color. */
#lpQuien{ padding-bottom:5.5rem }
@media (max-width:760px){ #lpQuien{ padding-bottom:3.4rem } }
.lp-mani-full{ background:#EAE4D9 }
#lpPasos.lp-section{ background:#FFFFFF }
.lp-tone1{ background:#EAE4D9 }
.lp-tone2{ background:#DFD7C9 }
/* Las tarjetas de adentro vuelven a ser el papel claro que eran, o se pierden
contra el arena. */
.lp-tone1 .lp-io-card, .lp-tone2 .lpt-panel{ background:#FFFFFF }
/* ── 4 · LA REPISA Y «UNA BIBLIOTECA» ────────────────────────────────────
La tira usa `margin-bottom` para separarse de lo que sigue, pero de lado a
lado dentro de una banda estrecha se montaba sobre el título. Aquí lleva su
propio respiro y se recorta a franja para que no sea un muro. */
.lp-tira--repisa{
margin-bottom:3rem; max-height:300px; border-radius:2px;
}
@media (max-width:760px){ .lp-tira--repisa{ margin-bottom:2rem; max-height:none } }
.lp-band--b .lp-sec-title{ margin-top:0 }
/* ── 5 · LA PRUEBA: EL NOMBRE Y LA CRUCECITA, EN UN RENGLÓN ──────────────
Mismas esquinas —12 px, las del campo— para que se lean como una pieza. El
campo se queda con lo que sobre y la crucecita pide sólo lo suyo. */
.lpt-nombre{ display:flex; align-items:stretch; gap:.5rem; flex-wrap:wrap }
.lpt-nombre .lpt-input{ flex:1 1 12rem; min-width:0; width:auto }
.lpt-nombre .lpt-memoria{
margin:0; flex:0 0 auto; border-radius:12px; padding:.5rem .9rem;
white-space:nowrap;
}
@media (max-width:520px){
.lpt-nombre .lpt-input{ flex:1 1 100% }
.lpt-nombre .lpt-memoria{ flex:1 1 100%; justify-content:center }
}
/* ── 6 · CAMBIAR DE PANTALLA NO ES UN VIAJE ──────────────────────────────
Vivi: "debajo del apartado de «nuestras colecciones», cuando seleccionas
alguna, en lugar de abrir la página y mostrártela desde arriba, parece que
hace un scroll de abajo a arriba".
Y eso es literalmente lo que pasa. `css/styles.css` pone `scroll-behavior:smooth`
en el , o sea que TODO desplazamiento del navegador se anima — incluido
el «súbete al inicio» que hace `goStep` al cambiar de pantalla. Si venías del
final de la landing, ves la página entera desfilar hacia arriba antes de que
aparezca el catálogo.
Se apaga la regla global. Los desplazamientos que sí deben deslizarse —las
anclas del encabezado, el pill que se centra solo— piden `behavior:'smooth'`
en su propia llamada, y esa opción manda sobre el CSS: siguen igual. Los que
piden `auto` por fin son instantáneos, que es lo que siempre quisieron ser. */
html{ scroll-behavior:auto }
/* ══════════════════════════════════════════════════════════════════════════
§53 · EL EDITOR KIDS, MÁS LIGERO — 2 sep 2026
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · EL CUADRO DE LA PREGUNTA ABIERTA ────────────────────────────────
Vivi: "el cuadro para responder la pregunta abierta es demasiado grande..
sobre todo pensando que es un título de Kids donde necesitamos muy poca
información.. que el usuario entienda que no se ocupa mucho".
Un cuadro grande es una instrucción: pide párrafos. Bajado a tres renglones,
y sigue creciendo solo si alguien escribe más. */
#s2 .panel .pq-input.pq-area,
#s2 .panel textarea.pq-input{ min-height:74px; line-height:1.55 }
body.kids-mode #s2 .panel .pq-input.pq-area,
body.kids-mode #s2 .panel textarea.pq-input{ min-height:62px }
/* ── 2 · EL BOTÓN DE «CAPÍTULO SIGUIENTE» ────────────────────────────────
Vivi: "reducir un poco la altura del botón del siguiente capítulo, creo que
estaría bien que sea de la misma altura al de generar otras versiones.. sólo
se diferencia por su contraste en color verde". Bajan los dos a la misma
caja; lo que los separa es el color, que es como debe ser. */
#s2 .sn-next{
font-size:max(13px,.82em); padding:.5em 1.05em;
min-height:max(36px,2.3em); border-radius:.7em;
box-shadow:0 5px 14px -8px rgba(44,37,32,.5);
}
#s2 .ctrl-regen{ min-height:36px; display:inline-flex; align-items:center }
/* ── 3 · LA COSTURA DE BANDERITAS ────────────────────────────────────────
Vivi, 9 sep 2026: "debe estar justo en la división entre el encabezado
delgado y donde inicia el color arena del editor".
Medido sobre sus capturas: el blanco del riel va de y=0 a y≈26 y el arena
arranca en y≈27. Las banderitas caían en y=20–22 —dentro del blanco— porque
el contenedor SÍ estaba en `bottom:0`, pero el dibujo va centrado dentro de
su caja de 9 px, así que quedaba unos pixeles arriba de la línea.
No era cosa de moverlas de sitio: era de montarlas. El `translateY(50%)` baja
la caja media altura y deja las banderitas centradas EN el borde — mitad
sobre el blanco, mitad sobre el arena. Una costura cose dos telas; no se posa
sobre una.
(Antes de esto se probó ponerlas bajo las pestañas de capítulo: quedaron 147
px más abajo, flotando en el arena. El error fue leer "el encabezado" como
todo el bloque de arriba, cuando el único blanco es el riel.) */
/* `overflow:visible` a propósito: la costura tiene que poder asomar por debajo
del riel. Con `hidden` se le recortaba la mitad de abajo. */
body.ed-inmersivo .ed-riel.ed-riel-kids{ position:fixed; overflow:visible }
.ed-riel-costura{
position:absolute; left:0; right:0; bottom:0;
/* La clave: la caja se baja media altura para quedar CENTRADA en el borde.
Sin esto el contenedor topa con la línea pero el dibujo —que va centrado
dentro de su caja— cae unos pixeles arriba, flotando en el blanco. */
transform:translateY(50%);
/* 10 sep · de 9 a 14 px. La ALTURA es lo que fija el tamaño de la banderita
ahora que el SVG lleva preserveAspectRatio="xMidYMid slice"; antes lo fijaba
el ancho de la pantalla y en celular quedaban en 1.9 px. */
height:14px; line-height:0; pointer-events:none; overflow:visible;
}
.ed-riel-costura svg{
display:block; width:100%; height:14px;
/* Cada banderita guarda su forma y su tamaño: el `slice` va como ATRIBUTO en
el SVG (kora-crecer-semilla.js → chispitas). Aquí no: preserveAspectRatio
no es una propiedad de CSS, y la que vivía en esta línea no hacía nada. */
}
/* El nombre se sube un pelo para no montarse en la costura. */
body.ed-inmersivo .ed-riel.ed-riel-kids .ed-riel-lockup{ transform:translateY(-2px) }
@media (max-width:760px){ .ed-riel-costura, .ed-riel-costura svg{ height:12px } }
/* ── 7 · LA LÍNEA PERIMETRAL DE LA MUESTRA ───────────────────────────────
Vivi: "falta ponerle la línea perimetral interior en la muestra del lado
derecho". La página de verso ya respira dentro de su margen; la de la
acuarela llegaba al canto y por eso las dos no se leían como el mismo libro.
Va como filete por dentro, no como borde de la página: es el margen del
libro impreso, dibujado. */
.lp-spreadmock .lp-page-art{ padding:4.5% }
.lp-spreadmock .lp-page-art::after{
content:''; position:absolute; inset:4.5%; z-index:2; pointer-events:none;
border:.5px solid rgba(122,102,82,.34);
}
.lp-spreadmock .lp-page-art > img{
position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
}
@media (max-width:760px){
.lp-spreadmock .lp-page-art{ padding:1.5rem }
.lp-spreadmock .lp-page-art::after{ inset:1.5rem }
}
/* ══════════════════════════════════════════════════════════════════════════
§54 · LOS CINCO PANELES DEL ENCABEZADO, DE LA MISMA FAMILIA — 2 sep 2026
Vivi: "emparejar y dejar mismo estilo para botones que salen del encabezado..
ahorita kids y keepsake tienen misma altura, mismo formato, pero los otros
tres están ligeramente diferentes".
Medido antes de tocar nada:
Kids · Keepsake fixed, 1100 px, aire 24 px, rótulos 10.5 px
los otros tres absolute, 275 px, aire 12.8 px, renglones 16.5 px
No era «ligeramente»: eran dos familias de menú en la misma barra. Ahora los
cinco usan la rejilla `.wm`, y la única regla que cambia es el ANCHO, que lo
pide el número de columnas — cinco columnas necesitan 1100 px y dos se ven
vacías ahí.
══════════════════════════════════════════════════════════════════════════ */
/* La caja ancha deja de estar amarrada a dos botones por nombre: la pide
cualquier panel que traiga la rejilla. */
.wf-menu .wf-drop:has(.wm){
position:fixed; top:var(--kora-hdr, 66px);
left:50%; right:auto; transform:translateX(-50%);
width:min(1100px, calc(100vw - 48px)); max-width:none; min-width:0;
padding:1.5rem 1.6rem 1.4rem;
}
.wf-menu .wf-drop:has(.wm)::before{ display:none }
.wf-menu:has(.wm)::after{
content:""; position:absolute; left:-12px; right:-12px; top:100%;
height:26px; display:none;
}
@media (hover:hover){ .wf-menu:has(.wm):hover::after{ display:block } }
.wf-menu:has(.wm).open::after{ display:block }
/* El ancho por contenido. Un panel de dos columnas estirado a 1100 px no se ve
«igual» que el de cinco: se ve vacío. La familia se guarda en el aire, la
tipografía y el ritmo, que no cambian. */
.wf-menu .wf-drop:has(.wm[data-cols="2"]){ width:min(560px, calc(100vw - 48px)) }
.wf-menu .wf-drop:has(.wm[data-cols="3"]){ width:min(760px, calc(100vw - 48px)) }
.wf-menu .wf-drop:has(.wm[data-cols="4"]){ width:min(940px, calc(100vw - 48px)) }
/* Un encabezado de columna que no lleva a ningún lado no debe parecer botón. */
.wm-h:disabled{ cursor:default; opacity:1 }
.wm-h:disabled:hover{ color:inherit }
/* El rótulo del panel y el «ver todo» de abajo, con el mismo aire en los cinco. */
.wf-menu .wf-drop:has(.wm) > .wf-drop-kick{ margin:0 0 1.1rem }
.wf-menu .wf-drop:has(.wm) > .wf-drop-item.all{ margin-top:1.2rem }
@media (max-width:900px){
/* En el celular vuelven a ser listas colgadas del botón: una rejilla de
cinco columnas no cabe, y ahí sí conviene el panel angosto de siempre. */
.wm, .wm[data-cols]{ grid-template-columns:1fr; gap:1rem }
}
/* ══════════════════════════════════════════════════════════════════════════
§55 · EL BLOB DE KIDS ES EL DIGITAL, NO UNA ACUARELA — 2 sep 2026
Vivi, dos veces: "no me refería a este blob.. me refiero al que NO es una
imagen.. más bien el que es como un blob digital redondeado.. es el que está
activo en keepsake color verde".
Lo encontré: `styles.css:2508` ya cambia `.blob.empty .ph-shape` por un
degradado en verde salvia, sin archivo — ése es el blob digital. Kids no lo
usaba porque tres reglas suyas, más específicas, seguían pidiendo la imagen
del splash amarillo. Yo estuve dos vueltas retocando archivos que ni siquiera
eran el problema.
Aquí Kids usa la MISMA construcción —una elipse que arranca clara arriba a la
izquierda y se hunde hacia la orilla— con el verde llevado al menta. La rampa
se calculó conservando la luminosidad de cada paso de Keepsake, para que el
texto blanco de encima lea igual de bien: donde cae la leyenda, Keepsake da
entre 3.3 y 4.65:1 y esto da entre 3.1 y 4.35:1. Mismo objeto, mismo trato.
══════════════════════════════════════════════════════════════════════════ */
:root{
--kora-blob-kids:radial-gradient(ellipse at 36% 28%,
rgba(147,187,170,.96) 0%,
rgba(113,154,137,.94) 40%,
rgba(91,129,113,.90) 72%,
rgba(84,118,104,.76) 92%,
rgba(84,118,104,.62) 100%);
}
/* Las tres bocas por las que Kids seguía pidiendo la imagen. Mismos selectores
que `css/styles.css` —misma especificidad— y esta hoja carga después, así que
gana sin inventar cadenas más largas ni usar !important. */
.spread.kids .kpg-big .blob.empty .ph-shape,
.spread.kids .kcomp .blob.empty .ph-shape,
.spread.kids .blob.converting::before{
background:var(--kora-blob-kids);
}
/* ══════════════════════════════════════════════════════════════════════════
§56 · «DOS TIPOS DE HISTORIA»: QUE HABLE LA IMAGEN — 2 sep 2026
Vivi: "creo que es un tema muy VISIBLE, más que explicativo en texto..
imágenes de muestra más grande y que tenga tipo carrusel.. podemos quitar el
«cómo es por fuera», eso ya se ve claramente en las fotos.. igual que hable
más la imagen por sí sola que tanto texto".
La muestra medía 158 px de alto dentro de una tarjeta de ~500: era una
viñeta al lado de un párrafo. Ahora es lo primero y lo más grande de la
tarjeta, y trae varias vistas.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · EL CARRUSEL ─────────────────────────────────────────────────────
El riel se desliza con `scroll-snap`, que es el carrusel del navegador: sabe
de dedo, de rueda, de teclado y de trackpad sin una línea de animación
nuestra. Las flechas y los puntos sólo lo empujan. */
/* El sangrado son exactamente los 1.7rem de aire lateral de la tarjeta, ni uno
más: con un número inventado el riel empujaba la tarjeta a 416 px dentro de
una pantalla de 390 y la página se iba de lado. Y la tarjeta recorta, para
que la foto respete su esquina redondeada. */
.lp-price-card{ min-width:0; overflow:hidden }
.lpp-carrusel{
position:relative; margin:.2rem -1.7rem 1.3rem;
}
.lppc-riel{
display:flex; gap:0; width:100%; min-width:0;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-behavior:smooth;
scrollbar-width:none; -ms-overflow-style:none;
}
.lppc-riel::-webkit-scrollbar{ display:none }
.lppc-d{
flex:0 0 100%; scroll-snap-align:start; margin:0; min-width:0;
display:flex; flex-direction:column; align-items:center;
}
.lppc-d img{
display:block; width:100%; height:clamp(230px, 26vw, 320px);
object-fit:cover; object-position:center;
}
.lppc-d figcaption{
font-family:var(--font-body); font-size:11px; letter-spacing:.06em;
color:var(--taupe,#9E8E78); padding:.6rem 1.7rem 0; text-align:center;
}
/* Las flechas viven encima de la foto y sólo aparecen con cursor: en el
celular sobra, porque ahí se arrastra. */
.lppc-fl{
position:absolute; top:clamp(115px,13vw,160px); transform:translateY(-50%);
width:32px; height:32px; border-radius:50%; z-index:2;
border:.5px solid rgba(122,102,82,.18); background:rgba(255,255,255,.92);
color:var(--clay,#7A6652); font-size:17px; line-height:1; cursor:pointer;
display:none; align-items:center; justify-content:center;
box-shadow:0 4px 12px -6px rgba(44,37,32,.4); transition:opacity .2s;
}
.lppc-ant{ left:.7rem } .lppc-sig{ right:.7rem }
.lppc-fl:disabled{ opacity:.25; cursor:default }
@media (hover:hover){ .lpp-carrusel:hover .lppc-fl{ display:flex } }
.lppc-pts{ display:flex; justify-content:center; gap:.42rem; margin-top:.7rem }
.lppc-pt{
width:6px; height:6px; padding:0; border-radius:50%; cursor:pointer;
border:0; background:rgba(122,102,82,.26); transition:background .2s, transform .2s;
}
.lppc-pt.on{ background:var(--clay,#7A6652); transform:scale(1.25) }
/* ── 2 · EL BLOQUE DE LA EDICIÓN DIGITAL, DENTRO DE LA TARJETA ───────────
Vivi: "la info del precio bundle no se entiende.. debería ir antes de la
línea que separa hacia abajo, para que se entienda que está hablando de la
edición digital". Ahora el renglón del digital y su bundle son UNA pieza,
separada de los impresos por la línea de arriba y por nada más. */
.lpp-digital{
margin-top:.2rem; padding-bottom:.2rem;
}
.lpp-digital .lpp-line{ border-top-color:rgba(122,102,82,.28) }
.lpp-digital .lpp-incl{
margin:.1rem 0 0; padding:0;
font-family:var(--font-display); font-style:italic; font-size:13.5px;
line-height:1.5; color:var(--taupe,#9E8E78);
}
.lpp-digital .lpp-incl b{ font-style:normal; font-weight:600; color:var(--clay,#7A6652) }
.lpp-cta{ border-top:.5px solid var(--sand-light,#EDE6D6); padding-top:1rem; width:100%; margin-top:1.2rem }
/* ── 3 · LA TABLETA, MÁS GRANDE ──────────────────────────────────────────
"En la info de la edición digital pondría la imagen de la tableta más
grande". Pasa de 400 px de ancho máximo a mandar la mitad del bloque. */
.lp-digband--grande{ gap:clamp(1.8rem, 4vw, 3.6rem); align-items:center }
.lp-digband--grande .lp-digband-txt{ flex:1 1 320px; max-width:420px }
.lp-digband--grande .lp-digband-art{ flex:1 1 420px; max-width:620px; min-width:0 }
.lp-digband--grande .lp-dev{ max-width:none; width:100% }
@media (max-width:760px){
.lp-digband--grande .lp-digband-art{ flex:1 1 100%; max-width:none }
}
/* En la tarjeta, el carrusel a sangre pide que el aire lateral lo ponga el
contenido y no la tarjeta. */
@media (max-width:640px){
.lppc-d img{ height:clamp(200px, 52vw, 260px) }
}
/* ══════════════════════════════════════════════════════════════════════════
§57 · EL ANTES / DESPUÉS DE LOS TRES ESTILOS — 2 sep 2026
Vivi: "que luzca más la imagen y el texto acompañe". Antes eran dos fotos de
la mitad del ancho cada una, con su pie debajo: para comparar había que ir y
venir con la mirada. Ahora es UNA sola, del ancho completo de su columna, y
la comparación la hace la mano.
══════════════════════════════════════════════════════════════════════════ */
/* La pareja deja de ser dos columnas y pasa a ser una caja. */
#s12 .est-pair.kab{ display:block; gap:0 }
.kab-caja{
position:relative; width:100%; overflow:hidden;
border-radius:14px; box-shadow:0 14px 34px -18px rgba(62,58,51,.45);
--p:50%;
cursor:ew-resize; isolation:isolate; touch-action:pan-y;
}
.kab-cap{
display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
border-radius:0; box-shadow:none;
}
#s12 .est-pair-alta .kab-cap{ aspect-ratio:4/5 }
/* La foto va encima, recortada hasta donde esté el mango. `clip-path` no
reflowea ni repinta el layout: sólo recorta, así que arrastrar es fluido
aunque la imagen sea grande. */
.kab-recorte{
position:absolute; inset:0; z-index:1;
clip-path:inset(0 calc(100% - var(--p)) 0 0);
}
.kab-recorte .kab-cap{ position:absolute; inset:0; width:100%; height:100% }
/* Los dos rótulos, cada uno en su lado. El de la izquierda se desvanece
cuando el mango lo alcanza: si ya no se ve esa foto, su nombre estorba. */
.kab-et{
position:absolute; bottom:.75rem; z-index:3; pointer-events:none;
font-family:var(--font-body); font-size:9.5px; letter-spacing:.18em;
text-transform:uppercase; color:#FFFFFF;
background:rgba(44,37,32,.42); backdrop-filter:blur(3px);
padding:.32rem .62rem; border-radius:20px;
transition:opacity .18s;
}
.kab-et-a{ left:.75rem }
.kab-et-b{ right:.75rem }
.kab-caja:has(.kab-rango[value]) .kab-et{ opacity:1 }
/* La línea de corte y su mango. Van pegados al valor del rango con la misma
variable que recorta la foto: una sola fuente de verdad. */
.kab-linea{
position:absolute; top:0; bottom:0; left:var(--p); z-index:2;
width:2px; margin-left:-1px; background:rgba(255,255,255,.9);
box-shadow:0 0 0 .5px rgba(44,37,32,.22), 0 0 14px -2px rgba(44,37,32,.35);
pointer-events:none;
}
.kab-mango{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:38px; height:38px; border-radius:50%;
background:rgba(255,255,255,.94); color:var(--clay,#7A6652);
display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 14px -4px rgba(44,37,32,.45);
transition:transform .16s;
}
.kab-caja:hover .kab-mango{ transform:translate(-50%,-50%) scale(1.06) }
/* EL RANGO INVISIBLE. Es el que recibe el dedo, el ratón y el teclado; lo que
se ve es la línea de arriba. Se estira a toda la caja para que se pueda
arrastrar desde cualquier punto de la foto, no sólo desde el mango. */
.kab-rango{
position:absolute; inset:0; z-index:4; width:100%; height:100%;
margin:0; padding:0; opacity:0; cursor:ew-resize;
-webkit-appearance:none; appearance:none; background:transparent;
}
.kab-rango::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:44px; height:100vh; cursor:ew-resize;
}
.kab-rango::-moz-range-thumb{ width:44px; height:100vh; border:0; cursor:ew-resize }
/* El foco del teclado sí se ve: es la única pista de que se puede mover con
las flechas, y sin ella el control no existe para quien no usa ratón. */
.kab-rango:focus-visible + .kab-linea,
.kab-caja:has(.kab-rango:focus-visible) .kab-linea{
box-shadow:0 0 0 2px var(--clay,#7A6652), 0 0 14px -2px rgba(44,37,32,.35);
}
/* En el celular la columna es una sola, así que la foto ya es grande: sólo
se achica el mango para que no tape media cara. */
@media (max-width:760px){
.kab-mango{ width:32px; height:32px }
.kab-et{ font-size:9px; bottom:.6rem }
}
/* ══════════════════════════════════════════════════════════════════════════
§59 · LAS PORTADAS RESPIRAN — 5 sep 2026
Tres arreglos que van juntos porque son el mismo problema: en las portadas,
el texto le estaba ganando espacio a la ilustración.
La jerarquía correcta tiene cuatro niveles, y el más grande es el dibujo:
KORA · KIDS (mini) · Título (grande) · subtítulo (mini) · ACUARELA
El aire para la acuarela sale de encoger el sello y el subtítulo, nunca de
recortar los márgenes de la portada.
OJO — esto revierte a medias la decisión del bloque 32 ("para todas las
portadas kids va en el grandstander"). El sello y el subtítulo vuelven a
Jost, y el motivo es de jerarquía, no de gusto: en el mismo tipo que el
título, el subtítulo compite con él. En Jost y chiquito, acompaña.
El TÍTULO se queda en Grandstander, que es lo que hace que se vea Kids.
Y el subtítulo NO se quita: en el catálogo hay dos tarjetas que se llaman
"Nuestra Historia" —una Keepsake y una Kids— y sin subtítulo son la misma.
══════════════════════════════════════════════════════════════════════════ */
/* ── el sello, mini ── */
.k2new .k2-gcover.kids .gk-kick,
#k2Grid .k2-gcover.kids .gk-kick,
.lp-top-cover .k2-gcover.kids .gk-kick{
font-family:var(--font-body,'Jost',sans-serif);
font-size:clamp(6px, .6vw, 7.5px);
letter-spacing:.22em; margin-bottom:2px;
}
/* ── el subtítulo, mini y en Jost ── */
.k2new .k2-gcover.kids .gk-subk,
#k2Grid .k2-gcover.kids .gk-subk,
.lp-top-cover .k2-gcover.kids .gk-subk{
font-family:var(--font-body,'Jost',sans-serif);
font-size:clamp(7px, .78vw, 9.5px);
line-height:1.22; margin-top:2px;
}
/* ── el título no parte palabras ─────────────────────────────────────────
Se veía "Nuestra Histo-ria" y "Nuestro ahija-do". Un título partido con
guion no es una portada: es un párrafo. Si no cabe, encoge — nunca parte.
`text-wrap:balance` reparte los renglones para que no quede uno huérfano. */
.k2new .k2-gcover.kids .gk-ktitle,
#k2Grid .k2-gcover.kids .gk-ktitle,
.lp-top-cover .k2-gcover.kids .gk-ktitle{
hyphens:none; -webkit-hyphens:none;
overflow-wrap:normal; word-break:keep-all; text-wrap:balance;
font-size:clamp(11px, 1.35vw, 17px); margin-top:3px;
}
.k2new .k2-gcover.keep .gk-title{
hyphens:none; -webkit-hyphens:none;
overflow-wrap:normal; word-break:keep-all; text-wrap:balance;
}
.kcov-title, .kk-title, .cover-emboss.kk-cover-title{
hyphens:none; -webkit-hyphens:none;
overflow-wrap:normal; word-break:keep-all; text-wrap:balance;
}
/* ── y la acuarela se queda con el aire que sobró ── */
.k2new .k2-gcover.kids .gk-art,
#k2Grid .k2-gcover.kids .gk-art,
.lp-top-cover .k2-gcover.kids .gk-art,
.k2-gcover.kids .kk-art{
width:96%; flex:1 1 auto; min-height:0; margin:0 auto;
}
/* ── lo mismo en la portada de adentro del editor ─────────────────────────
Si el mockup del catálogo y el libro real no se parecen, son dos portadas
distintas. Va en cqw como el resto de `.kcover`: las proporciones se miden
contra la portada, no contra la ventana. */
.kcov-sub{
font-family:var(--font-body,'Jost',sans-serif); font-style:normal;
font-size:clamp(8px, 3.4cqw, 14px); margin-top:.7cqw; letter-spacing:.02em;
}
.kcov-art{ width:100%; margin:.5cqw auto .8cqw }
/* ══════════════════════════════════════════════════════════════════════════
§60 · EL RECUADRO DE LAS KEEPSAKE, MÁS GRANDE Y MÁS ABAJO — 5 sep 2026
La foto es el corazón de una portada Keepsake y estaba chica y muy arriba,
pegada al subtítulo. Crece, y baja: el aire nuevo va entre el subtítulo y
el marco, no debajo. El pie "KORA" se queda pegado abajo, donde estaba.
══════════════════════════════════════════════════════════════════════════ */
/* El marco NO se toca con `width`: el bloque 32 ya resolvió que el lado lo
mande el ALTO disponible y el ancho salga topado (`max-width:84%`), para
que el cuadrado nunca se salga en pantallas chicas. Medido: el marco se
queda en 184 px de ancho por 204 de alto — o sea que lo estaba frenando el
tope de ancho, no el alto. Así que se sube el tope, y se baja el marco
dándole más aire arriba. Se respeta el sistema en vez de pelearse con él. */
/* Y aquí está por qué "Nuestra Historia" tenía el marco más chico que los
demás Keepsake, que es lo que se ve en la captura: el marco era `flex:1`,
o sea "quédate con lo que sobre". Su subtítulo es el más largo del
catálogo —"Cómo llegó a ser nuestra familia"— y en el celular cae en dos
renglones. Ese renglón de más se lo quitaba al marco: 101 px contra 114 de
los demás. No era esa portada: era ese subtítulo.
Medido en 14 combinaciones de ancho y de rejilla. Lo que lo empareja es
quitarle al marco la dependencia del texto: alto fijo, 60% de la portada,
y el ancho sale del cuadrado. Un renglón de más ahora se come el aire, no
la acuarela. Los cuatro miden igual en todos los anchos, de 360 a 1280, y
nada se sale. */
#k2Grid .k2-gcover.keep .gk-frame,
.lp-top-cover .k2-gcover.keep .gk-frame{
flex:0 0 auto; height:60%; width:auto; max-width:96%; margin:auto auto 0;
}
/* y un pelo menos de aire arriba, que era el que le faltaba para llegar al
tope nuevo: el marco pasa de 185×205 a 202×202 — cuadrado, más grande y
más abajo, sin salirse nunca. */
#k2Grid .k2-gcover.keep,
.lp-top-cover .k2-gcover.keep{ padding-top:4.2% }
.k2new .k2-gcover.keep .gk-sub{ margin-top:7px }
/* El pie «Kora» ocupaba 25 px para una letra de 10: dos tercios de eso era
interlínea vacía. Recogerla no lo aprieta —abajo siguen sus 16 px de
margen— y le regala al marco los 10 px que le faltaban para crecer. */
.k2new .k2-gcover.keep .gk-kora{ line-height:1.35 }
.cover-modern .cm-art, .cover-sheet .cm-art{ width:92%; max-width:470px; margin-top:.6rem }
/* ══════════════════════════════════════════════════════════════════════════
§61 · EL DESPLEGABLE SE SALÍA DE LA PANTALLA — 5 sep 2026 (2ª vuelta)
La primera vez lo medí con un desplegable de mentira —una lista simple— y
no se salía nunca. Estaba probando el panel equivocado: el que se sale es
el ANCHO, el de la rejilla, y su regla se dispara con `:has(.wm)`. Sin la
rejilla adentro, la regla ni existe.
Con la rejilla de verdad, medido en siete anchos:
390 px → "Todos los libros" se sale 107 px por la IZQUIERDA
768 px → "Keepsake" se sale 328 px
Es exactamente lo de tu captura.
La causa: abajo de 900 px el panel ancho vuelve a `position:absolute` con
`right:0`, o sea anclado al BOTÓN y creciendo hacia la izquierda. En el
primer tab —pegado al logo— crecer hacia la izquierda es salirse.
Donde se toca, el panel se ancla a la PANTALLA. Y como puede quedar largo
—cinco columnas apiladas—, se le deja rodar hacia abajo.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
.wf-menu .wf-drop:has(.wm){
position:fixed; top:var(--kora-hdr, 66px);
left:12px; right:12px; transform:none;
width:auto; max-width:min(420px, calc(100vw - 24px)); margin-inline:auto;
max-height:calc(100dvh - var(--kora-hdr, 66px) - 20px); overflow-y:auto;
padding:.9rem 1rem 1rem;
}
}
/* ══════════════════════════════════════════════════════════════════════════
§62 · LA PROBADITA, A PANTALLA COMPLETA — 6 sep 2026
Va con kora-probadita.js. El formulario es el mismo de siempre —se mueve
aquí adentro y al cerrar se regresa—, así que aquí solo va la caja: el
fondo, el aire y la X. Nada de estilos del formulario, para que no se
despeguen nunca de los del landing.
══════════════════════════════════════════════════════════════════════════ */
.pb-back{
position:fixed; inset:0; z-index:300; display:none;
background:rgba(44,37,32,.42);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
padding:max(2.5vh, 14px) 14px;
overflow:hidden;
}
.pb-back.on{ display:block; animation:pbEntra .22s ease }
@keyframes pbEntra{ from{ opacity:0 } to{ opacity:1 } }
html.pb-abierto, html.pb-abierto body{ overflow:hidden }
.pb-caja{
position:relative; margin:0 auto; max-width:min(1080px, 100%);
height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
background:var(--linen, #FBF8F2); border-radius:18px;
box-shadow:0 40px 90px -40px rgba(44,37,32,.6);
padding:2.2rem clamp(1rem, 4vw, 2.6rem) 2.4rem;
}
.pb-x{
position:sticky; top:0; float:right; margin:-.6rem -.4rem 0 0;
background:var(--white,#fff); border:.5px solid var(--sand-light,#E6DDCB);
width:38px; height:38px; border-radius:50%; cursor:pointer;
font-size:22px; line-height:1; color:var(--taupe,#7c6f5d); z-index:2;
}
.pb-x:hover{ color:var(--clay,#A5745C); border-color:var(--clay,#A5745C) }
.pb-head{ max-width:56ch; margin:0 0 1.6rem }
.pb-kick{
font-family:var(--font-body,'Jost',sans-serif); font-size:10px;
letter-spacing:.26em; text-transform:uppercase; color:var(--taupe,#7c6f5d);
margin:0 0 .5rem;
}
.pb-h{
font-family:var(--font-display,'Cormorant Garamond',serif); font-weight:300;
font-size:clamp(26px, 4.4vw, 40px); line-height:1.08; color:var(--dark,#2C2520); margin:0;
}
.pb-h em{ font-style:italic }
.pb-lede{
font-size:14px; line-height:1.7; color:var(--taupe,#7c6f5d);
margin:.6rem 0 0; max-width:52ch;
}
/* Adentro del panel el formulario ya no compite con nada: se le quita el
ancho de sección y se deja correr. */
.pb-in > .lpt{ margin:0; max-width:none; width:100% }
@media (max-width:640px){
.pb-back{ padding:0 }
.pb-caja{ border-radius:0; padding:1.4rem 1.1rem 2rem }
.pb-h{ font-size:26px }
}
/* ══════════════════════════════════════════════════════════════════════════
§63 · LA PORTADA DEL EDITOR SE PASÓ DE DISCRETA — 6 sep 2026
En el bloque 33 encogí el sello y el subtítulo en los dos lados: la tarjeta
del catálogo y la portada de adentro del editor. En la tarjeta está bien —
ahí compiten cuatro cosas en 120 px. En el editor no: esa portada se ve del
tamaño de un libro, y ahí "KORA · KIDS" y el subtítulo se leen, no se
adivinan.
Se devuelven casi a como estaban, pero sin regalarle de vuelta todo el aire
que ganó la acuarela: quedan entre el tamaño viejo y el que puse ayer.
La tarjeta del catálogo NO se toca — allá el bloque 33 sigue igual.
══════════════════════════════════════════════════════════════════════════ */
.kcov-label{ font-size:clamp(7px, 3.2cqw, 12.5px); margin-bottom:.7cqw }
.kcov-sub{ font-size:clamp(9.5px, 4.7cqw, 18.5px); margin-top:1cqw }
/* ══════════════════════════════════════════════════════════════════════════
§64 · EL BOTÓN DE «SIGUIENTE» EN KIDS, DEL COLOR DE KIDS — 6 sep 2026
El editor de Kids es menta —el blob, el sello, el verde del título— y el
botón seguía en el verde oliva del editor Keepsake. Un botón es lo que más
se toca de una pantalla: si no es del color de la colección, se siente
prestado.
El menta de marca (#4E9A78, el de "KIDS" en el logo) sobre blanco da 3.4:1
y no alcanza para texto. Se baja de tono y se corre hacia el azul: #2B7F76 da 4.8:1 y sí se lee
turquesa, no oliva. (La primera vuelta usó #3E8266 y se seguía viendo
verde de Keepsake al lado del botón café.)
══════════════════════════════════════════════════════════════════════════ */
/* (era #2B7F76 — turquesa; se reemplaza abajo, en la §68, por el verde del blob) */
/* ═══════════════════════════════════════════════════════════════════════════
EL ÁLBUM DEL FINAL (js/kora-mosaico.js) — 9 sep 2026
Vivi mandó de referencia un board book de primeras palabras: las imágenes van
SUELTAS sobre el papel —sin marco, sin recuadro, sin círculo—, escalonadas a
distinta altura, y el nombre debajo en versalitas chiquitas. Eso es lo que se
copia: el acomodo, no el libro. La caja sigue siendo la `.blob` de siempre —
así la acuarela, el "pintando…" y la vista previa se comportan igual que en
cualquier página— pero aquí se le quita todo el mueble.
═══════════════════════════════════════════════════════════════════════════ */
.spread .kmos-pg{ display:flex; flex-direction:column; justify-content:center; gap:.6rem;
padding-left:9%; padding-right:9%; padding-top:6%; padding-bottom:6%; }
.kmos-rejilla{ display:grid; gap:1.4rem 1.2rem; align-content:center }
.kmos-n1{ grid-template-columns:1fr }
.kmos-n1 .kmos-casilla{ max-width:62%; margin:0 auto }
.kmos-n2, .kmos-n3, .kmos-n4{ grid-template-columns:1fr 1fr }
/* Un número impar deja a la última suelta en la esquina. Centrada se lee como
el remate de la rejilla y no como un hueco. */
.kmos-n3 .kmos-casilla:last-child{ grid-column:1 / -1; width:calc(50% - .6rem); justify-self:center }
.kmos-casilla{ display:flex; flex-direction:column; align-items:center; gap:.45rem; min-width:0 }
/* El escalón: cuatro posiciones que se repiten. Nada de aleatorio — el libro
impreso tiene que salir igual al que se vio en pantalla. */
.kmos-p0{ transform:translateY(0) }
.kmos-p1{ transform:translateY(6%) }
.kmos-p2{ transform:translateY(3%) }
.kmos-p3{ transform:translateY(-3%) }
.kmos-p1 .blob, .kmos-p2 .blob{ width:88% }
.kmos-p3 .blob{ width:95% }
/* La imagen, suelta sobre el papel. Hay que pisar tres cosas de la caja normal
del editor, que está pensada para una acuarela con su mueble encima:
· `.blob.real` trae padding y `overflow:visible`;
· su `img` va en `object-fit:contain` con `width:auto`;
· y `.blob` a secas trae fondo y borde.
La máscara redonda desvanece los bordes: una acuarela Kora sale sobre papel
blanco y una foto sale con sus cuatro esquinas — sin el difuminado, las dos
se verían pegadas encima de la hoja en vez de pintadas en ella. */
.spread .kmos-casilla .blob,
.spread .kmos-casilla .blob.real,
.spread .kmos-casilla .blob.empty,
.spread .kmos-casilla .blob.converting{
position:relative; width:100%; height:auto; aspect-ratio:1/1; min-height:0;
padding:0; margin:0; border:none; background:transparent; box-shadow:none;
border-radius:0; overflow:visible;
display:flex; align-items:center; justify-content:center;
}
.spread .kmos-casilla .blob img,
.spread .kmos-casilla .blob.real img{
position:absolute; inset:0; width:100%; height:100%;
max-width:none; max-height:none; object-fit:contain; margin:0;
}
/* Las FOTOS (y sus acuarelas) sí se recortan y se desvanecen; los objetos de la
biblioteca ya vienen recortados y con fondo transparente, así que van tal cual. */
.spread .kmos-casilla .blob.real img{
object-fit:cover;
-webkit-mask-image:radial-gradient(closest-side, #000 78%, rgba(0,0,0,.72) 90%, transparent 100%);
mask-image:radial-gradient(closest-side, #000 78%, rgba(0,0,0,.72) 90%, transparent 100%);
}
.spread .kmos-casilla .blob.kmos-lam img{
object-fit:contain; -webkit-mask-image:none; mask-image:none;
}
/* El hueco vacío es la única cosa con contorno: es la invitación a tocarlo, y
desaparece en cuanto hay algo. */
.spread .kmos-casilla .blob.empty{
border:1.5px dashed var(--sand-light,#D8D1C4); border-radius:50%;
background:#FCFAF5; color:var(--k2-sand,#A99882);
}
.kmos-mas{ font-size:1.6rem; line-height:1; font-weight:300 }
/* El nombre, debajo, en versalitas chiquitas y muy espaciadas — como los pies
de un libro de primeras palabras. Antes iba en la cursiva serif de los
títulos y competía con el título de la página. */
.kmos-nombre{
font-family:var(--font-body,'Jost',sans-serif); font-weight:400;
font-size:clamp(8px,1.05vw,11px); letter-spacing:.2em; text-transform:uppercase;
line-height:1.3; text-align:center; color:var(--clay,#7A6652);
max-width:100%; overflow-wrap:anywhere;
}
.kmos-nombre.vacio{ color:var(--k2-sand,#A99882); letter-spacing:.12em; text-transform:none; font-style:italic }
/* El título de la página, arriba y a la izquierda, como el rótulo de sección de
la referencia — no centrado como un título de capítulo. */
.spread .kmos-pg > .ttl{
text-align:left; align-self:flex-start; font-style:normal;
font-family:var(--font-body,'Jost',sans-serif); font-weight:300;
font-size:clamp(11px,1.5vw,15px); letter-spacing:.26em; text-transform:uppercase;
color:var(--dark,#2C2520); margin-bottom:.4rem;
}
.kmos-pie{
font-family:var(--font-body,'Jost',sans-serif); font-weight:300;
font-size:11px; text-align:left; color:var(--k2-sand,#A99882); margin:1.6rem 0 0;
}
/* El panel: un renglón por casilla, con su ✕ cuando se puede quitar. */
.kmos-fila{ display:flex; gap:.4rem; align-items:center; margin-bottom:.5rem }
.kmos-fila .panel-input{ flex:1; min-width:0 }
.kmos-quitar{
flex:0 0 auto; width:32px; height:32px; border:1px solid var(--sand-light,#D8D1C4);
border-radius:9px; background:transparent; color:var(--k2-sand,#A99882);
font-size:17px; line-height:1; cursor:pointer; transition:color .15s,border-color .15s;
}
.kmos-quitar:hover{ color:#b5654d; border-color:#d8b2a4 }
.kmos-lib{ margin:-.15rem 0 .9rem }
.kmos-lib .pill{ font-size:12px; padding:.34rem .6rem }
.kmos-libbtn{
display:flex; align-items:center; justify-content:space-between; width:100%;
margin:-.15rem 0 .9rem; padding:.42rem .1rem; background:none; border:none;
font-family:var(--font-body,'Jost',sans-serif); font-weight:300; font-size:12.5px;
color:var(--k2-taupe,#7A6652); cursor:pointer; text-align:left;
}
.kmos-libbtn:hover, .kmos-libbtn.on{ color:var(--dark,#2C2520) }
.kmos-flecha{ font-size:11px; opacity:.7 }
/* ── "Otra palabra" · la que le decían en su casa ──────────────────────────
Por la regla de las palabras acuñadas por la familia: si en su casa le decían
"recio" o "apapachador", esa palabra vale más que cualquiera de las nuestras
y entra tal cual, sin corregirla. El chip se distingue de las demás porque no
es una opción: es una puerta. */
.pill.k-otra{ border-style:dashed; color:var(--k2-taupe,#7A6652) }
.pill.k-otra.on{ border-style:solid; border-color:var(--clay,#72665A); box-shadow:none }
/* El campo de "tu palabra" ahora lleva su propia pregunta encima: sin ella se
leía como si fuera otra pregunta del recorrido (Vivi, 11 sep). */
.k-otra-wrap{ display:flex; flex-direction:column; gap:.35rem; margin-top:.7rem }
.k-otra-lbl{
font-family:var(--font-body,'Jost',sans-serif); font-size:12px; font-weight:400;
letter-spacing:.1em; text-transform:uppercase; color:var(--k2-sand,#A99882);
}
.k-otra-row{ display:flex; gap:.45rem }
.k-otra-row input{
flex:1; min-width:0; font-family:var(--font-body,'Jost',sans-serif); font-weight:300;
font-size:14px; padding:.6rem .75rem; border:1px solid var(--sand-light,#D8D1C4);
border-radius:10px; background:#FCFAF5; color:var(--dark,#2C2520); outline:none;
}
.k-otra-row input:focus{ border-color:var(--k2-taupe,#7A6652) }
.k-otra-row button{
flex:0 0 auto; font-family:var(--font-body,'Jost',sans-serif); font-size:13px;
padding:.6rem .9rem; border:1px solid var(--k2-taupe,#7A6652); border-radius:10px;
background:transparent; color:var(--k2-taupe,#7A6652); cursor:pointer;
}
.k-otra-row button:hover{ background:var(--k2-taupe,#7A6652); color:#fff }
/* La nota de guardar/compartir. Antes los dos botones fallaban en silencio;
ahora, cuando el teléfono no deja hacer lo que se pidió, se dice qué hacer.
(Vivi, 10 sep: "no le funcionó ese botón.. tampoco el de compartir".) */
.lpt-prev-nota{
margin:.7rem 0 0; font-family:var(--font-body,'Jost',sans-serif); font-weight:300;
font-size:12.5px; line-height:1.5; text-align:center; color:var(--clay,#7A6652);
}
/* ── Poner al día un libro ya escrito (js/kora-poner-al-dia.js) ──────────────
Hereda la forma de la barra de versión nueva: es el mismo tipo de aviso —al
pie, oscuro, con una salida clara— y conviene que se lean como parientes.
Lo único propio es el detalle desplegado, que necesita renglones. */
.kora-al-dia{ align-items:flex-start; max-width:min(560px, calc(100vw - 2rem)); }
.kora-al-dia > span{ padding-top:.35rem; line-height:1.5 }
.kora-al-dia .ald-det{ flex:1 1 auto; min-width:0 }
.kora-al-dia .ald-l{
margin:0 0 .35rem; line-height:1.5;
overflow-wrap:anywhere; /* encabezados largos no ensanchan la barra */
}
.kora-al-dia .ald-l b{ font-weight:400; color:#C8BFB2 }
.kora-al-dia .ald-n{
margin:.55rem 0 0; font-size:.92em; line-height:1.5; color:#C8BFB2;
}
.kora-al-dia .ald-undo{ background:transparent; color:#F8F6F2; box-shadow:inset 0 0 0 1px #7A6E60 }
@media (max-width:520px){
.kora-al-dia{ flex-wrap:wrap; gap:.6rem }
.kora-al-dia .ald-det{ flex-basis:100% }
}
/* ═══════════════════════════════════════════════════════════════════════════
§65 · EDITOR — panel más compacto, el board book y su precio (10 sep 2026)
Vivi, viendo el editor de Kids: "sigue con mucho espacio entre preguntas y
renglones, la idea era también compactar"; "el botón de ver respuestas de la
semilla puede ser un poco diferente"; "falta la opción de board book y los
costos en cada opción".
El aire de más no venía de un solo lado: entre pregunta y pregunta había
1.9em (styles.css:2081), las etiquetas traían un renglón entero de margen y
las bolsas de pills abrían casi medio centímetro entre fila y fila. Bajarlo
en los tres a la vez es lo que hace que quepa un capítulo sin scrollear.
══════════════════════════════════════════════════════════════════════════ */
#panelSlots .pq-field{ margin-top:1.15em; margin-bottom:.5rem }
#panelSlots .pq-field:first-child{ margin-top:.25em }
#panelSlots .panel-label{ margin-top:.85rem; margin-bottom:.3rem; line-height:1.35 }
#panelSlots label{ line-height:1.4; margin-bottom:.35rem }
#panelSlots .pills{ gap:.34rem; margin-top:.42rem }
#panelSlots .pill{ padding:.3rem .6rem; line-height:1.32 }
#panelSlots textarea{ line-height:1.45 }
#panelSlots .panel-input{ padding:.42rem .6rem }
/* «Ver respuestas de la semilla» no es una llamada a la acción: es una gaveta
que se abre de vez en cuando. Deja de competir con el capítulo. */
.semilla-abrir{
width:100%;
display:flex; align-items:center; justify-content:space-between; gap:.5rem;
min-height:0; padding:.48rem .72rem;
font-family:var(--font-body); font-size:12.5px; font-weight:400;
color:var(--taupe); background:transparent;
border:1px solid var(--sand-light); border-radius:8px;
}
.semilla-abrir::after{ content:'›'; font-size:15px; line-height:1; opacity:.65 }
.semilla-abrir:hover{ color:var(--clay); border-color:#c9bda6; background:rgba(255,255,255,.55) }
/* La nota que acompaña al cartón («para que lo muerdan»): explica sin gritar. */
.kprint-op .kp-nota{
display:block; font-style:normal; font-size:11.5px;
color:var(--taupe); margin-top:.12rem; letter-spacing:0;
}
/* ═══════════════════════════════════════════════════════════════════════════
§66 · LA PORTADA DE CARTÓN (10 sep 2026)
Vivi: "en el editor debemos cambiar el formato a que parezca board book: las
esquinas del lado derecho van redondeadas, las del izquierdo no, y la
bisagra no se marca".
Un board book no tiene bisagra: no hay tapa pegada a un lomo con su ranura,
es una sola pieza de cartón. Y las esquinas se redondean del lado del canto
—donde se muerde— pero no del lado del lomo. Las dos cosas juntas son lo que
hace que se lea como cartón y no como una pasta dura chiquita.
══════════════════════════════════════════════════════════════════════════ */
/* Esquinas: redondeadas solo del lado del canto —donde se muerde—, rectas del
lado del lomo. La bisagra SE QUEDA (Vivi, 11 sep: "regresar bisagra como la
teníamos"): es lo que hace que se lea como un libro y no como una tarjeta. */
.kcover.kp-board:not(.kcover-interior){
border-radius:2px 18px 18px 2px;
/* Más cuerpo: el cartón es grueso y tiene que pesar en la pantalla. Tres
capas — contacto, volumen y la sombra larga que lo despega del fondo. */
box-shadow:
0 2px 5px rgba(44,37,32,.13),
0 16px 30px -14px rgba(44,37,32,.34),
0 48px 88px -38px rgba(44,37,32,.62);
}
/* ── La portada de 0 a 3: nombre · acuarela · título · sello ──────────────
Vivi, 11 sep: el nombre arriba y grande, en el mismo font elegido, propuesto
en mayúsculas; luego la acuarela; luego el título; y «Kora · Kids» hasta
abajo, en su tipografía sobria de siempre. */
.kcover.kcov-bb{ justify-content:flex-start }
.kcover.kcov-bb .kcov-name-top{
order:0; margin:.4cqw 0 1.6cqw;
font-size:clamp(22px, 15.5cqw, 58px); line-height:1; font-weight:600;
letter-spacing:.02em; text-transform:none; /* la propone en mayúsculas el texto, no el CSS: así el usuario puede bajarlas */
}
.kcover.kcov-bb .kcov-name-top.kf-grandstander{ font-family:'Grandstander',cursive }
.kcover.kcov-bb .kcov-name-top.kf-jost{ font-family:'Jost',sans-serif; font-weight:600; letter-spacing:.05em }
.kcover.kcov-bb .kcov-title{ margin:1.4cqw 0 0 }
.kcover.kcov-bb .kcov-label{ margin-top:auto; padding-top:1.6cqw; margin-bottom:0 }
/* ── Acabado de lino ───────────────────────────────────────────────────────
Vivi: "que cuando selecciones la opción en lino se ponga el acabado lino
incluso por encima de la ilustración". Va en el ::after, que ya cubre la
portada entera por encima del arte, en multiply para que se vea la trama
sin apagar el color. */
/* 11 sep · Vivi: "el acabado lino no me gustó nada, es una cuadrícula; ya
teníamos un modelo de lino, usa el mismo". Tenía razón: dos gradientes
cruzados dan una malla, no una tela. El lino de la casa es `--lino` —dos
turbulencias cruzadas, una tendida a lo ancho y otra a lo largo— y es el
mismo que llevan las portadas Keepsake y el retrato de la prueba. */
.kcover.kp-lino:not(.kcover-interior)::after{
background-image:var(--lino);
background-size:170px 170px;
mix-blend-mode:overlay;
opacity:.9;
}
/* Una opción todavía sin precio no se anuncia como si lo tuviera. */
.kprint-op .kp-price.kp-sinprecio{ font-style:italic; opacity:.72 }
/* Hoja sin preguntas (portadilla de acto): la explicación ocupa el sitio donde
irían las preguntas, para que el hueco no se lea como un error. */
#panelSlots .pq-lede.pq-nada{
margin:.7rem 0 1.1rem; padding:.7rem .85rem;
background:rgba(255,255,255,.55); border:1px dashed var(--sand-light);
border-radius:8px; font-size:13.5px; line-height:1.5;
}
/* ═══════════════════════════════════════════════════════════════════════════
§67 · LA PORTADILLA DE ACTO (11 sep 2026)
«Una vida entera» abre cada uno de sus cinco actos con una hoja de una sola
línea. En el editor se veía igual que un capítulo cualquiera —título chico y
ocho renglones grises esperando un texto que nunca iba a tener ese largo—,
así que se leía como una página a medio hacer.
Aquí se le da su propia forma: sin renglones de relleno, el título grande y
centrado en la hoja, y aire alrededor. Que se entienda de un vistazo que es
una portada de sección y no un capítulo sin contestar.
══════════════════════════════════════════════════════════════════════════ */
.spread.sp-portadilla .verse-ph{ display:none }
.spread.sp-portadilla .pg{ justify-content:center }
.spread.sp-portadilla .ttl{
font-family:var(--font-display);
font-size:clamp(20px, 3.1vw, 34px);
line-height:1.16; letter-spacing:.005em;
margin:0 auto; max-width:78%; text-align:center;
}
.spread.sp-portadilla .verse{ text-align:center; margin-top:1.1rem }
.spread.sp-portadilla .divider,
.spread.sp-portadilla .ceja{ display:none }
/* ═══════════════════════════════════════════════════════════════════════════
§68 · Detalles del editor de cartón (11 sep 2026)
══════════════════════════════════════════════════════════════════════════ */
/* Las hojas de adentro también van con las esquinas de fuera redondeadas: es la
misma pieza de cartón que la portada, y si solo se redondea la tapa el
interior se lee como otro libro. */
body.bb-carton .spread{ border-radius:16px }
/* El verde de «Siguiente». OJO: son DOS, y el que estaba mal era el de KIDS
—#2B7F76, un turquesa que no se parecía al verde del blob—. El de Keepsake
(#647A66) está bien y NO se toca: por eso esto va con `body.kids-mode` y no
suelto, que fue el error de la primera vuelta.
11 sep, segunda vuelta · Vivi: "el botón de siguiente en kids ahora quedó muy
verde olivo". Y era cierto, pero la culpa no era del color elegido: ESTE
COMENTARIO ESTABA ROTO. Llevaba un cierre de comentario de más a media explicación, así que
el navegador cerraba el comentario antes de tiempo, leía el resto de la prosa
como si fuera un selector, y al toparse con basura TIRABA LA REGLA ENTERA.
El botón se quedaba con el verde de Keepsake: medido en su captura daba
#556B59, que es el `:hover` de `.sn-next` en styles.css (#576B59) — o sea el
olivo de Keepsake, tal cual.
Es la tercera vez que un cierre de comentario perdido rompe algo en silencio
—y la trampa favorita es escribirlo dentro del comentario que lo explica—.
Si un cambio de CSS "no hace nada", lo primero que hay que revisar es el
comentario de arriba. La prueba de CSS (t_css.js) ahora lo caza sola.
El tono: medido sobre su captura, el blob es #8DAC9F —matiz 155°, verde con
una gota de azul—. Tal cual da 2.5:1 con texto blanco y un botón no se puede
leer así. #4E7E6A es EXACTAMENTE ese matiz, sólo más hondo, y da 4.65:1. */
body.kids-mode .sn-next{ background:#4E7E6A }
body.kids-mode .sn-next:hover{ background:#446E5C }
/* El riel del editor: las banderitas con más aire entre ellas, y KIDS en
mayúsculas, que es como se escribe en todo lo demás de la casa. */
body.ed-inmersivo .ed-riel-kids{ gap:1.15rem }
.ed-riel-lockup b{ text-transform:uppercase; letter-spacing:.1em }
/* El botón de reescribir, cuando no se ha cambiado nada, pesa menos: está
disponible, pero no reclama. */
.pq-next.pq-next-suave{ opacity:.72 }
.pq-next.pq-next-suave:hover{ opacity:1 }
/* ═══════════════════════════════════════════════════════════════════════════
§69 · EL CARTÓN, SEGUNDA VUELTA (11 sep 2026)
Ronda de Vivi sobre las capturas del editor Kids: la bisagra, las esquinas,
el ancho del libro y las banderitas.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · La bisagra: la de pasta dura, sin inventar otra ──────────────────
Vivi: "vamos a ponerla con el mismo diseño que ya teníamos súper
perfeccionado de los libros de pasta dura".
El cartón traía una bisagra propia —tres franjas planas— que se había hecho
pensando que un board book no tiene lomo. Se lee peor: plana, sin el
reflejo. La de la casa lleva siete paradas (sombra de canto, medio tono,
el brillo del pliegue, y la caída larga hacia el papel) y está afinada desde
hace meses. Se borra la del cartón y se hereda esa. */
.kcover.kp-board:not(.kcover-interior)::before{
width:5%;
border-radius:0;
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%);
}
/* ── 2 · Las dos esquinas del lomo, a escuadra ────────────────────────────
Vivi: "quitar cualquier detallito de redondeado que se vea de fondo en las 2
esquinas del lado izquierdo".
Eran dos redondeos, no uno. El de la portada quedó en 2px —pensado como
"casi nada", pero 2px de arena asomando en la esquina SÍ se ven, y ella los
cazó en un zoom—. Y el ::after del canto perimetral seguía en `4%/3%`, o sea
redondeado en las cuatro. Los dos a cero del lado del lomo: ahí el cartón se
dobla, no se corta, y una esquina doblada no tiene radio. */
.kcover.kp-board:not(.kcover-interior){ border-radius:0 18px 18px 0 }
.kcover.kp-board:not(.kcover-interior)::after{ border-radius:0 18px 18px 0 }
/* ── 3 · El libro, un poco menos vertical ─────────────────────────────────
Vivi: "el formato del libro lo sigo sintiendo muy vertical, vamos a hacerlo
un poco más ancho".
Y tenía razón por una razón concreta: la portada NUNCA estuvo en 4:5. La
regla `.kcover:not(.kcover-interior)` de styles.css la dejaba en 3/4 (0.75) y
le ganaba por especificidad a la de 10/12.2 que venía después. O sea que el
interior iba en 4:5 y la portada en 3:4, más vertical todavía.
Kids pasa a 5:6 (0.833) — un paso ancho desde 4:5, que es donde vive un board
book de verdad sin volverse cuadrado. Va como variable para que la portada,
la hoja y las ilustraciones de página entera salgan del mismo número; el
spread lleva su holgura de lomo (el mismo factor 1.0326 del 38/23).
── 16 sep 2026 · KIDS VUELVE A 4:5, Y ESTO REVIERTE LA DECISIÓN DE ARRIBA.
Vivi pidió UNA sola proporción para los tres productos, con tres tamaños:
216 × 270 el keepsake, 180 × 225 Kids, 150 × 187.5 el board book. Así que el
paso ancho de 5:6 se va, y queda escrito aquí lo que se pierde para que se
pueda deshacer sabiendo qué era: un board book en 4:5 es más vertical que
uno en 5:6, que era justo lo que esta ronda quería evitar. Si al tenerlo en
la mano se ve demasiado alto, lo que hay que mover es la proporción de los
tres —vive en `--k-pagina` y en `KORA_TRIM`—, no volver a partir Kids por su
cuenta: eso es lo que nos tenía con dos formas distintas y el recorte de las
fotos coincidiendo con ninguna.
La holgura de lomo del spread también se fue, y de ahí salía el 1.0326 que se
menciona arriba: ver la nota de `:root` en styles.css. */
body.kids-mode .kcover:not(.kcover-interior){ aspect-ratio:var(--k-pagina) }
/* ── 4 · Las banderitas, más chicas y más separadas ───────────────────────
El tamaño y el paso viven en el SVG (kora-crecer-semilla.js → chispitas), no
aquí: con `preserveAspectRatio="slice"` manda la altura de la caja. Lo que sí
es de aquí es el aire del riel. */
body.ed-inmersivo .ed-riel-kids{ gap:1.45rem }
/* ── 5 · El botón de reescribir no se esconde ─────────────────────────────
Vivi: "el botón de 'volverlo a escribir' se pierde mucho". Se le había puesto
opacidad .72 cuando no hay cambios nuevos, para que "no reclamara". Reclamaba
tan poco que no se veía. Se queda entero y lo que cambia es el peso: relleno
sólido cuando hay respuestas nuevas, contorno firme cuando no. */
.pq-next.pq-next-suave{
opacity:1;
background:transparent; color:var(--dark,#2C2520);
border:1.5px solid var(--clay,#7A6652);
}
.pq-next.pq-next-suave:hover{ background:rgba(122,102,82,.09) }
/* ═══════════════════════════════════════════════════════════════════════════
§70 · LA PORTADA EN SU SITIO, Y LOS AVISOS DE QUE ALGO ESTÁ PASANDO
11 de septiembre de 2026
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · La portada, del tamaño y en el lugar de las hojas de adentro ─────
Vivi: "por algún motivo la portada siempre aparece más abajo que el resto de
los spreads.. debe tener la misma ubicación y separación de arriba, y el
tamaño de la portada siempre debe ser de acuerdo al tamaño del spread
interior (y viceversa)".
El motivo: la portada se medía SOLA. Las hojas de adentro salen de
`--k-spread` (ancho máximo) y `--k-spread-ar` (proporción); la portada tenía
su propia cuenta —`height:calc(100dvh - 350px)`— con otro número restado, y
encima su página traía un acolchado disparejo (2.6rem arriba, 2.8rem abajo)
que la empujaba hacia abajo. Dos cuentas distintas para el mismo libro: por
fuerza iban a dejar de coincidir.
La cuenta se borra. El contenedor `.spread` de la portada ya tiene la
proporción y el ancho correctos —es el mismo `.spread` de siempre—, así que
la portada sólo tiene que LLENARLO. A partir de aquí no hay forma de que se
separen: comparten el número, no lo copian.
(Keepsake no tiene este problema: su portada es una `.pg` del spread y ya
ocupaba su celda. El que se medía aparte era el de Kids.) */
.spread.kidscover .pg.kcover-pg{ padding:0; height:100% }
.kcover:not(.kcover-interior){
height:100%;
width:auto;
max-width:100%;
aspect-ratio:var(--k-pagina, 4/5);
}
@media (max-width:760px){
/* En el celular la hoja se deja crecer a lo alto, así que la portada vuelve a
medirse por el ancho — pero con la MISMA proporción, que es lo que importa. */
.kcover:not(.kcover-interior){ height:auto; width:86%; max-width:360px }
.spread.kidscover .pg.kcover-pg{ padding:4% 0 }
}
/* ── 2 · «Escribiendo otra versión», legible ──────────────────────────────
Vivi: "está muy chiquito e ilegible.. creo que va mejor en mayúsculas, en
Jost y un poco menos claro.. también se prende y se apaga muy rápido, más
lento más elegante".
Iba en la serif en cursiva, del color más claro de la casa y con un pulso de
1.4 s — que a ese tamaño se lee como un parpadeo nervioso, no como un libro
trabajando. Pasa a la Jost en versalitas espaciadas (que es como habla la
casa cuando da un aviso, no cuando narra), al tono medio, y a un pulso de
3.2 s que respira en vez de titilar. */
.spread.regenerating .pg:has(.verse):not(.pg-fijo)::after,
.spread.kids.regenerating .pg.bb-txt::after{
font-family:var(--font-body,'Jost',sans-serif) !important;
font-style:normal !important;
font-size:12.5px !important;
font-weight:500;
letter-spacing:.22em !important;
text-transform:uppercase !important;
color:var(--clay,#7A6652) !important;
animation:kora-respira 3.2s ease-in-out infinite !important;
}
@keyframes kora-respira{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
/* ── 3 · Cambiar de estilo se ve en la hoja, no sólo en un renglón ────────
Vivi: "cuando seleccionas otro estilo de ilustración debería aparecer algo
sobre el editor para que veas que está pensando.. quizá hacer la ilustración
actual prenderse y apagarse tenuemente".
La acuarela que se está rehaciendo respira; no desaparece. Ver desvanecerse
la que ya te gustaba da miedo — parece que se está borrando. */
.spread.repintando .blob .kimg,
.spread.repintando .blob img,
.spread.repintando .kcov-art img{
animation:kora-respira-img 2.6s ease-in-out infinite;
}
@keyframes kora-respira-img{ 0%,100%{ opacity:1 } 50%{ opacity:.42 } }
/* ── 4 · La hoja dice que se puede tocar ──────────────────────────────────
Vivi: "me gustaba cuando pasabas el cursor por encima y te decía que lo
podías editar ahí directo". Esto sustituye a la caja que se probó en el panel
—el verso se edita en la hoja, y la señal vive donde está el gesto—. En
pantalla táctil no hay cursor, así que no se muestra: ahí el texto se toca y
ya, sin prometer nada de antemano. */
.v-edit{ cursor:text; position:relative }
@media (hover:hover){
.v-edit::before{
content:"Toca para ajustar";
position:absolute; left:50%; top:-1.55em; transform:translateX(-50%);
font-family:var(--font-body,'Jost',sans-serif);
font-size:10px; letter-spacing:.18em; text-transform:uppercase;
color:var(--taupe,#9E8E78); white-space:nowrap;
opacity:0; transition:opacity .22s ease; pointer-events:none; z-index:5;
}
.v-edit:hover::before{ opacity:1 }
.v-edit:hover{ background:rgba(122,102,82,.045); border-radius:10px }
}
/* Mientras se reescribe o se está editando no hay nada que anunciar. */
.spread.regenerating .v-edit::before,
.v-edit:has(textarea)::before{ display:none }
/* ═══ Pintando: late la hoja, gira el círculo ═══ 14 sep 2026
Vivi: «le piqué volver a pintar y me salió escrito abajo "volviendo a
pintar"… habíamos dicho un circulito pensando sobre el botón seleccionado, que
la imagen actual se prenda y se apague, y un círculo al centro».
La regla de arriba (§3) no alcanzaba la portada de Keepsake: vive en
.cover-mat / .cm-art, no en .kcov-art. `repintando` lo pone spreadClass solo en
la hoja cuya foto se está pintando. */
.spread.repintando .cover-mat img,
.spread.repintando .cm-art img{
animation:kora-respira-img 2.6s ease-in-out infinite;
}
.spread.repintando .kcov-art{ position:relative }
.spread.repintando .cover-mat::after,
.spread.repintando .cm-art.ready::after,
.spread.repintando .kcov-art::after,
.spread.repintando .blob:has(img)::after{
content:""; position:absolute; left:50%; top:50%; z-index:8;
width:44px; height:44px; margin:-22px 0 0 -22px; box-sizing:border-box;
border-radius:50%;
border:3px solid rgba(122,102,82,.22); border-top-color:var(--clay,#7A6652);
background:rgba(251,247,239,.82);
box-shadow:0 2px 16px rgba(40,34,28,.28);
animation:kora-gira .95s linear infinite;
pointer-events:none;
}
/* En el botón del estilo: el nombre se queda, y el círculo va sobre la hoja. */
.kfont-op.pintando{ position:relative }
.est-gira{
position:absolute; left:50%; top:38%; z-index:2;
box-sizing:border-box; border-radius:50%;
width:26px; height:26px; margin:-13px 0 0 -13px;
border:2.5px solid rgba(122,102,82,.22); border-top-color:var(--clay,#7A6652);
background:rgba(255,255,255,.88);
box-shadow:0 1px 8px rgba(40,34,28,.18);
animation:kora-gira .95s linear infinite;
}
@keyframes kora-gira{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){
.spread.repintando .cover-mat img, .spread.repintando .cm-art img{ animation:none; opacity:.6 }
.spread.repintando .cover-mat::after, .spread.repintando .cm-art.ready::after,
.spread.repintando .kcov-art::after, .spread.repintando .blob:has(img)::after,
.est-gira{ animation:none }
}