/* =========================================================
   Lameno · Prototipo de entrada — movimiento, escritorio, móvil y captura
   ========================================================= */

/* ---------- Movimiento entre pantallas (solo transform y opacidad) ---------- */
.entra .r { animation: sube .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 140ms); }
@keyframes sube { from { opacity: 0; transform: translateY(16px); } }
@keyframes aparece { from { opacity: 0; } }
/* Formularios: desplazamiento corto + fundido (no marea a quien no es nativa digital) */
.avanza-llega { animation: avanza-llega .48s var(--ease) both; }
.avanza-sale { animation: avanza-sale .48s var(--ease) both; pointer-events: none; }
.vuelve-llega { animation: vuelve-llega .48s var(--ease) both; }
.vuelve-sale { animation: vuelve-sale .48s var(--ease) both; pointer-events: none; }
@keyframes avanza-llega { from { opacity: 0; transform: translateX(48px); } }
@keyframes avanza-sale { to { opacity: 0; transform: translateX(-32px); } }
@keyframes vuelve-llega { from { opacity: 0; transform: translateX(-48px); } }
@keyframes vuelve-sale { to { opacity: 0; transform: translateX(32px); } }
/* Bienvenida: deslizamiento horizontal completo, como pasar páginas */
.desliza-llega { animation: desliza-llega .62s var(--ease) both; }
.desliza-sale { animation: desliza-sale .62s var(--ease) both; pointer-events: none; }
.desliza-atras-llega { animation: desliza-atras-llega .62s var(--ease) both; }
.desliza-atras-sale { animation: desliza-atras-sale .62s var(--ease) both; pointer-events: none; }
@keyframes desliza-llega { from { transform: translateX(100%); } }
@keyframes desliza-sale { to { transform: translateX(-30%); filter: brightness(.85); } }
@keyframes desliza-atras-llega { from { transform: translateX(-30%); } }
@keyframes desliza-atras-sale { to { transform: translateX(100%); } }
.desliza-atras-sale { z-index: 2; }
/* Fundido de marca */
.funde-llega { animation: aparece .7s ease both; }
.funde-sale { animation: aparece .7s ease reverse both; pointer-events: none; }

.aparece { animation: aparece .45s var(--ease) both; }
.velo.aparece .hoja { animation: hoja .55s var(--ease) both; }
@keyframes hoja { from { transform: translateY(100%); } }
.aviso.aparece { animation: baja .6s var(--ease) both; }
@keyframes baja { from { opacity: 0; transform: translateY(-120%); } }

@media (prefers-reduced-motion: reduce) {
  .entra .r, .aparece, .velo.aparece .hoja, .aviso.aparece, .entra .pastilla, .entra .sobre > * { animation: aparece .2s ease both !important; animation-delay: 0ms !important; }
  .avanza-llega, .vuelve-llega, .desliza-llega, .desliza-atras-llega, .funde-llega { animation: aparece .2s ease both !important; }
  .avanza-sale, .vuelve-sale, .desliza-sale, .desliza-atras-sale, .funde-sale, .splash--sale { animation: aparece .2s ease reverse both !important; }
  .entra .splash__sol, .entra .splash__logo .logo__la, .entra .splash__logo .logo__meno { animation: aparece .4s ease both !important; }
  .orbe, .splash__sol .orbe, .cierre__orbe { animation: none !important; }
  .marca-llega .portada__foto, .marca-llega .portada__foto img, .entra .cierre__foto, .bienv__marco img { animation: none !important; }
  .marca-llega .portada__logo { opacity: 1; }
  * { transition-duration: .01ms !important; }
}

/* ---------- Escenario de escritorio ---------- */
.escenario {
  position: relative; min-height: 100vh;
  display: grid; grid-template-columns: 414px minmax(300px, 400px);
  justify-content: center; gap: 32px clamp(32px, 4vw, 72px); align-items: center;
  padding: 28px clamp(24px, 3.4vw, 56px); background: var(--bosque); color: var(--crema);
}
.marco { width: 414px; height: 868px; padding: 12px; border-radius: 58px; background: var(--tinta); box-shadow: inset 0 0 0 1.5px #2C332C; }
.marco .app { border-radius: 46px; }

.lateral { align-self: center; max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(249 203 227 / .3) transparent; }
.lateral--izq { display: grid; gap: 16px; justify-items: start; padding-right: 10px; }
.lateral__logo { font-size: 40px; color: var(--fucsia); }
.lateral__folio { color: var(--lima); }
.lateral__titulo { font: 400 clamp(36px, 3vw, 46px)/.95 var(--f-serif); letter-spacing: -.015em; text-wrap: balance; }
.lateral__titulo em { color: var(--fucsia); }
.lateral__texto { color: var(--rosa); font-size: 17px; }
.bloque-lat { width: 100%; padding-top: 16px; border-top: 1px solid rgb(249 203 227 / .22); }
.bloque-lat > .etiqueta { color: var(--lima); margin-bottom: 10px; }
.probar li { font-size: 16px; line-height: 1.45; color: var(--rosa); padding: 3px 0; }
.probar b { color: var(--crema); font-weight: 600; font-variant-numeric: tabular-nums; }
.controles { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.control { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--fucsia); color: var(--tinta); font-weight: 600; font-size: 16px; }
.interruptor { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-size: 16px; color: var(--rosa); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor__pista { position: relative; width: 48px; height: 28px; border-radius: 14px; background: rgb(249 203 227 / .28); transition: background-color .2s; }
.interruptor__pista::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--crema); transition: transform .3s var(--ease); }
.interruptor input:checked + .interruptor__pista { background: var(--lima); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(20px); background: var(--tinta); }
.interruptor input:focus-visible + .interruptor__pista { outline: 3px solid var(--lima); outline-offset: 3px; }
.indice__grupo { display: grid; grid-template-columns: 112px 1fr; gap: 0 8px; align-items: baseline; padding: 3px 0; }
.indice__titulo { font: 400 20px/1.1 var(--f-serif); color: var(--crema); padding-top: 6px; }
.indice__lista { display: flex; flex-wrap: wrap; gap: 0 2px; margin-left: -10px; }
.ir { min-height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--rosa); font-size: 15px; }
.ir:hover { background: rgb(249 203 227 / .12); }
.ir--actual { background: var(--lima); color: var(--tinta); font-weight: 600; }
.ir--actual:hover { background: var(--lima); }

.notas { display: flex; flex-direction: column; }
.notas__lista { overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgb(249 203 227 / .3) transparent; }
.lateral--der { overflow: hidden; height: calc(100vh - 56px); }
.notas__cab { color: var(--lima); padding-bottom: 12px; }
.notas__lista { counter-reset: nota; }
.nota { display: grid; grid-template-columns: 30px 1fr; gap: 0 8px; padding: 8px 0; border-top: 1px solid rgb(249 203 227 / .16); font-size: 15px; line-height: 1.4; color: var(--rosa); }
.nota__id { font: 500 12px/1.7 var(--f-sans); letter-spacing: .08em; color: rgb(249 203 227 / .7); font-variant-numeric: tabular-nums; }
.nota b { color: var(--crema); font-weight: 600; }
.nota--actual { border-top-color: var(--lima); color: var(--crema); }
.nota--actual b, .nota--actual .nota__id { color: var(--lima); }
.creditos { margin-top: 16px; font-size: 14px; line-height: 1.45; color: rgb(249 203 227 / .85); }

@media (max-width: 1240px) {
  .escenario { grid-template-columns: 414px; justify-items: center; }
  .notas { width: min(100%, 560px); max-height: none; }
  .lateral--der { height: auto; overflow: visible; }
  .notas__lista { overflow: visible; }
}
@media (max-width: 860px) and (min-width: 501px) {
  .escenario { grid-template-columns: 1fr; justify-items: center; }
  .lateral { max-height: none; }
}

/* ---------- Móvil: el HTML ES la app, sin marco ---------- */
@media (max-width: 500px) {
  :root {
    --arriba: max(env(safe-area-inset-top), 12px);
    --abajo: max(env(safe-area-inset-bottom), 14px);
    --lado: 20px;
  }
  body { background: var(--crema); }
  .solo-escritorio { display: none !important; }
  .escenario { display: block; min-height: 0; padding: 0; background: none; }
  .marco { position: fixed; inset: 0; width: auto; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .marco .app { width: 100%; height: 100%; border-radius: 0; }
  .marco .barra-estado, .marco .indicador { display: none; }
}
@media (max-width: 370px) {
  :root { --t-xl: 44px; --t-titulo: 38px; }
  .bienv__texto .titulo, .portada__bloque .titulo { font-size: 40px; }
  .casillas { gap: 4px; }
  .edad__num { font-size: 112px; }
}
@media (max-height: 700px) and (max-width: 500px) {
  .bienv__texto .titulo { font-size: 38px; }
  .portada__foto { height: 48%; }
}

/* ---------- Modo captura (?captura=ID): solo la pantalla, 390×844, sin marco ---------- */
.captura body, body.captura { background: var(--crema); }
body.captura .solo-escritorio { display: none !important; }
body.captura .escenario { display: block; padding: 0; min-height: 0; background: none; }
body.captura .marco { width: 390px; height: 844px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
body.captura .marco .app { border-radius: 0; }
body.captura *, body.captura *::before, body.captura *::after { animation: none !important; transition: none !important; }
body.captura .marca-llega .portada__logo { opacity: 1; }
body.captura { --arriba: 50px; --abajo: 30px; --lado: 24px; }
body.captura .marco { position: relative; inset: auto; }
body.captura .marco .barra-estado { display: flex; }
body.captura .marco .indicador { display: block; }