/* ═══════════════════════════════════════════════════════════════════════════
   KORA · «Y así te queremos» — la maqueta del board book (Opción B del tomo 1)

   Una sola maqueta, las doce veces: a la izquierda todo centrado —viñeta,
   cuarteta, estribillo—; a la derecha una acuarela grande, casi al margen.
   Carga DESPUÉS de kora-esencial.css para ganar sobre ella.
   Sólo actúa dentro de las páginas que marca kora-crecer-bb.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Página derecha · la acuarela, casi al margen ────────────────────────── */
.spread.kids .pg.bb-img .blob,
.spread.kids .pg.bb-img .blob.real,
.spread.kids .pg.bb-img .blob.empty      { width:94%; }
.spread.kids .pg.bb-img .blob.real img   { max-height:min(560px,70vh); }
/* 11 sep · Vivi: "el blob está grandísimo, se siente invasivo". El hueco vacío
   no es la ilustración: es un aviso de que ahí va una. La acuarela de verdad
   sigue saliendo al 94% del ancho; lo que se achica es el marcador. */
.spread.kids .pg.bb-img .blob.empty      { min-height:0; }
.spread.kids .pg.bb-img .blob.empty .ph-shape { max-width:210px; max-height:210px; aspect-ratio:1/1; opacity:.75; }

/* La excepción: el primer spread. Recién llegado, chiquito y solo, con mucho
   hueso alrededor. Es el vacío que se va llenando durante el resto del libro.

   11 sep · Vivi: "el blob del primer spread vamos a dejarlo del mismo tamaño al
   de todos los spreads.. sólo la acuarela es la que va más pequeña". Y es la
   distinción correcta: el hueco vacío es un AVISO —"aquí va una ilustración"— y
   un aviso mide lo mismo en todas las hojas o se lee como un error de maqueta.
   Lo que cuenta la historia del bebé recién llegado es la ACUARELA de verdad,
   chiquita en medio de la hoja. Así que el `bb-chica` sólo toca `.blob.real`. */
.spread.kids .pg.bb-img.bb-chica .blob.real       { width:46%; }
.spread.kids .pg.bb-img.bb-chica .blob.real img   { max-height:min(250px,32vh); }

/* ── Página izquierda · viñeta arriba, verso al centro, estribillo abajo ─── */
/* 11 sep · Vivi: "el blob que va en el lugar de la viñeta va más abajo, más
   pegado al texto". Antes la columna era `flex-start` con el verso empujado al
   centro por `margin:auto`, así que la viñeta se quedaba arriba del todo y el
   texto muy lejos: dos bloques sueltos en la misma hoja en vez de uno.
   Ahora el grupo entero —viñeta, cuarteta, estribillo— se centra junto, con un
   pelo de sesgo hacia arriba para que no quede plantado a media hoja. */
.spread.kids .pg.bb-txt{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding-block:7% 10%; padding-inline:5%;
}
/* La caja del verso más ancha: cada línea tiene que caber de un renglón o la
   rima deja de oírse. (Vivi, 11 sep.) */
.spread.kids .pg.bb-txt .ktext{
  display:flex; flex-direction:column; align-items:center;
  width:100%; margin:0; gap:1.15em;
}
/* 11 sep · Vivi: "en los board books creo que el texto interior debe ir más
   grande". Y va con la forma del libro: son cuatro renglones cortos por hoja,
   para leerse en voz alta a alguien de un año, con la mano del adulto sosteniendo
   el cartón. El cuerpo de un cuento Kids normal (14–18 px) se ve chiquito cuando
   la hoja tiene sólo eso encima.
   El `min(…, 100%)` es la red: `ch` crece con la letra, así que a 24 px un tope
   de 38ch se saldría de la hoja y partiría los renglones — que es justo lo que
   ella pidió evitar para que la rima se oiga. */
.spread.kids .pg.bb-txt .kverse{
  max-width:min(38ch, 100%); margin:0 auto;
  font-size:clamp(17px, 2.5vw, 24px);
  line-height:1.5;
}
@media (max-width:760px){
  .spread.kids .pg.bb-txt .kverse{ font-size:clamp(16px, 4.9vw, 22px) }
}

/* El hueco de la viñeta. Queda reservado aunque el dibujo todavía no exista:
   así el verso ya se compone en su sitio definitivo. */
.spread.kids .pg.bb-txt .kdeco{ min-height:0; margin:0 0 1.5em; }
/* El hueco de la viñeta. Mientras no existan los dibujos se marca con una
   mancha muy tenue, para que el espacio se lea reservado y no vacío. */
.spread.kids .pg.bb-txt .bb-vig{
  width:clamp(52px,11%,92px); aspect-ratio:1/1; flex:0 0 auto;
  min-height:clamp(52px,11%,92px);
  border-radius:52% 48% 44% 56% / 48% 52% 56% 44%;
  /* 11 sep · Vivi: "un poco más oscuro, ahorita se pierde mucho". Sube de .14 a
     .30 en el centro y se alarga la caída: sigue siendo una mancha de aire, no
     un círculo, pero ya se lee como un sitio reservado y no como una mancha de
     la pantalla. */
  background:radial-gradient(ellipse at 42% 40%, rgba(122,102,82,.30), rgba(122,102,82,.10) 62%, rgba(122,102,82,0) 80%);
  box-shadow:0 8px 18px -12px rgba(60,48,34,.62);
}

/* El estribillo. Mismo lugar, mismo tamaño y mismo color las doce veces —
   esa constancia es lo que permite que el niño lo diga antes que tú. */
.spread.kids .pg.bb-txt .bb-coro{
  font-family:var(--font-display);
  /* Sube con el verso: el estribillo es su último renglón, no un pie de página.
     Se queda un punto por debajo para que no compita. */
  font-size:clamp(15px,2.05vw,20px);
  line-height:1.3;
  color:var(--clay,#7A6652);
  flex:0 0 auto;
  /* Va dentro del bloque de texto (el aire base lo pone el `gap`), pero con un
     respiro extra: Vivi, 11 sep — "el estribillo va un poquito más separado
     hacia abajo". Es el último renglón del verso, no el quinto. */
  margin-top:.7em;
}

@media(max-width:760px){
  .spread.kids .pg.bb-txt{ padding-block:9% 7%; }
  .spread.kids .pg.bb-img .blob.empty{ min-height:0; }
}


/* ── El aviso de «escribiendo otra versión» ───────────────────────────────
   11 sep · Vivi: "ni siquiera me aparece en el spread el texto que dice
   'volviendo a escribir' para que sepa que está pensando".

   El aviso de la casa cuelga de `.pg:has(.verse)` — y esta maqueta no usa
   `.verse`: su cuarteta va en `.kverse`, dentro de `.ktext`. Así que la hoja se
   quedaba muda mientras Kora escribía. Se le da el mismo aviso, con las mismas
   palabras y la misma pulsación, colgado de lo que esta hoja sí tiene. */
.spread.kids.regenerating .pg.bb-txt .ktext{ opacity:0; transition:opacity .25s ease }
.spread.kids.regenerating .pg.bb-txt::after{
  content:"Escribiendo otra versión…";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-style:italic; font-size:15px;
  letter-spacing:0; text-transform:none; color:var(--taupe);
  white-space:nowrap; animation:regpulse 1.4s ease-in-out infinite;
  z-index:6; pointer-events:none;
}