/* Escuela de Libreras y Libreros de Bukz — identidad POP (maqueta aprobada en docs/maqueta/escuela.html). */
:root{
  --amarillo:#FFE000; --limon:#FFF27A; --tinta:#1A1A17; --crema:#FFF9EC; --crema2:#FFFCF4; --gris:#6B6658; --linea:#C9C3B3;
  --azul:#2E50FF; --verde:#1FB36B; --rojo:#E5484D; --morado:#7B5CFF; --naranja:#FF8A3D;
  --sombra:4px 4px 0 var(--tinta);
  --display:"Bricolage Grotesque",system-ui,sans-serif; --cuerpo:"Hanken Grotesk",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --alto:100vh;
}
@supports (height:100dvh){:root{--alto:100dvh}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--crema);-webkit-text-size-adjust:100%}
body{background:var(--crema);font-family:var(--cuerpo);color:var(--tinta);min-height:var(--alto)}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.oculto{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* La app ocupa todo el celular; en escritorio, columna centrada a 430px. */
.app{position:relative;width:100%;max-width:430px;margin:0 auto;min-height:var(--alto);background:var(--crema)}
@media (min-width:600px){
  html,body{background:#2E2D28}
  .app{border-left:2px solid var(--tinta);border-right:2px solid var(--tinta);box-shadow:8px 0 0 var(--tinta)}
}

.pantalla{position:relative;display:flex;flex-direction:column;min-height:var(--alto);padding:22px 22px 26px;padding-top:max(22px,env(safe-area-inset-top));padding-bottom:max(26px,env(safe-area-inset-bottom))}
.pantalla:focus{outline:none}
.pantalla--fija{height:var(--alto);overflow:hidden}

.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.marca{display:flex;justify-content:space-between;align-items:center;gap:12px}
.logo{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo b{background:var(--amarillo);padding:0 5px;border:2px solid var(--tinta)}
.boton{display:block;width:100%;min-height:56px;background:var(--amarillo);border:2px solid var(--tinta);box-shadow:var(--sombra);padding:16px;font-family:var(--display);font-weight:800;font-size:19px;border-radius:14px;transition:transform .12s;text-align:center;text-decoration:none}
.boton:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 var(--tinta)}
.boton:disabled{opacity:.55}
.boton--sec{background:var(--crema2)}
.boton + .boton{margin-top:12px}
.enlace{background:none;border:0;min-height:44px;padding:10px 0;font-family:var(--mono);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.texto{font-size:17px;line-height:1.5}

/* Cargando */
.cargando{margin:auto;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.cargando::after{content:"";display:inline-block;width:10px;height:10px;margin-left:10px;background:var(--amarillo);border:2px solid var(--tinta);animation:late .8s steps(2) infinite}
@keyframes late{50%{transform:translateY(-4px)}}

/* Portada */
.portada-titulo{font-family:var(--display);font-weight:800;font-size:clamp(44px,14vw,56px);line-height:.92;letter-spacing:-.03em;margin-top:auto;overflow-wrap:anywhere}
.portada-titulo em{font-style:normal;background:var(--amarillo);box-shadow:var(--sombra);border:2px solid var(--tinta);padding:0 8px;display:inline-block;transform:rotate(-2deg);margin-top:6px}
.portada-sub{margin:22px 0 26px;font-size:17px;line-height:1.5;max-width:30ch}
.puntos{display:flex;gap:8px;margin:18px 0 0}
.puntos i{width:34px;height:10px;border:2px solid var(--tinta);border-radius:3px;background:var(--crema2)}
.puntos i.ok{background:var(--tinta)} .puntos i.hoy{background:var(--amarillo)}
.puntos + .kicker{margin-top:10px}

/* Tarjetas tipo historias */
.barras{display:flex;gap:5px}
.barras span{flex:1;height:4px;background:var(--linea);border-radius:2px;overflow:hidden}
.barras span.ok{background:var(--tinta)}
.tarjetas{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;margin:16px -22px 0;scrollbar-width:none;overscroll-behavior-x:contain}
.tarjetas::-webkit-scrollbar{display:none}
.tarjeta{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;padding:8px 22px 0;display:flex;flex-direction:column;overflow-y:auto}
.tarjeta .num{font-family:var(--display);font-weight:800;font-size:88px;line-height:.8;letter-spacing:-.04em;color:var(--amarillo);-webkit-text-stroke:2px var(--tinta)}
.tarjeta h2{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;letter-spacing:-.02em;margin:18px 0 16px}
.tarjeta p{font-size:18px;line-height:1.55}
.tarjeta .sello{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:12px;border:2px solid var(--tinta);padding:8px 10px;transform:rotate(-3deg);background:var(--crema2)}
.tarjeta--piso{background:var(--amarillo);margin:0 14px;border:2px solid var(--tinta);border-radius:18px;box-shadow:var(--sombra);flex-basis:calc(100% - 28px);padding:22px}
.tarjeta--piso p{margin-top:12px}
.tarjeta--piso blockquote{font-family:var(--display);font-weight:800;font-size:27px;line-height:1.12;margin-top:auto;border-top:2px solid var(--tinta);padding-top:16px}
.tarjeta--piso .sello{margin-top:16px;background:var(--crema2)}
.tarjeta--piso p.grande{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.15;margin-top:auto;border-top:2px solid var(--tinta);padding-top:16px}
.pie-tarjetas{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.pie-tarjetas small{font-family:var(--mono);font-size:11px;color:var(--gris)}
.flecha{width:56px;height:56px;border-radius:50%;border:2px solid var(--tinta);background:var(--amarillo);box-shadow:var(--sombra);font-size:24px;font-weight:800;flex:0 0 auto}
.flecha:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--tinta)}

/* Pregunta */
.pregunta{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.02em;margin:22px 0 22px}
.opcion{display:flex;gap:12px;align-items:center;width:100%;min-height:56px;text-align:left;background:var(--crema2);border:2px solid var(--tinta);border-radius:14px;padding:15px 14px;margin-bottom:12px;font-size:17px;line-height:1.3;box-shadow:var(--sombra)}
.opcion b{font-family:var(--mono);flex:0 0 30px;height:30px;border:2px solid var(--tinta);border-radius:8px;display:grid;place-items:center;font-size:14px;text-transform:uppercase}
.opcion.bien{background:var(--verde);color:#fff}.opcion.bien b{border-color:#fff}
.opcion.casi{background:var(--crema);border-style:dashed;box-shadow:none;opacity:.75}
.opcion.esperando{opacity:.6}
.respuesta-zona{margin-top:auto}
.respuesta{border:2px solid var(--tinta);border-radius:16px;padding:16px;background:var(--crema2);animation:sube .35s ease-out}
.respuesta h3{font-family:var(--display);font-weight:800;font-size:24px;margin-bottom:6px}
.respuesta p{font-size:16px;line-height:1.5;margin-bottom:14px}
@keyframes sube{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.aviso-linea{font-size:15px;line-height:1.4;border:2px dashed var(--tinta);border-radius:12px;padding:10px 12px;margin-bottom:12px}

/* Celebración en píxeles */
.confeti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confeti i{position:absolute;width:10px;height:10px;top:45%;left:50%;animation:estalla .9s ease-out forwards}
@keyframes estalla{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

/* Repisa */
.repisa-caja{margin:22px 0 18px;background:var(--crema2);border:2px solid var(--tinta);border-radius:18px;box-shadow:var(--sombra);padding:18px 14px 12px}
canvas.repisa{width:100%;height:auto;aspect-ratio:128/72;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.leyenda{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:11px;margin-top:10px;color:var(--gris)}
.leyenda .encendida{color:var(--tinta);font-weight:700}
.manana{border-top:2px solid var(--tinta);padding-top:14px;margin-top:auto}
.manana strong{font-family:var(--display);font-size:22px;display:block;margin-top:4px;line-height:1.15}
.manana .boton{margin-top:16px}
.repaso{margin-top:18px}
.repaso ul{list-style:none;margin-top:8px}
.repaso li + li{border-top:1px solid var(--linea)}
.repaso button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:48px;background:none;border:0;text-align:left;font-size:16px;padding:8px 0}
.repaso button span:last-child{font-family:var(--mono);font-size:11px;color:var(--gris);flex:0 0 auto}
.titulo-grande{font-family:var(--display);font-weight:800;font-size:clamp(36px,11vw,44px);line-height:.95;letter-spacing:-.03em;margin-top:22px}

/* Reto: pantalla oscura, momento especial */
.pantalla--reto{background:var(--tinta);color:var(--crema)}
.pantalla--reto .kicker{color:var(--amarillo)}
.pantalla--reto :focus-visible{outline-color:var(--amarillo)}
.reto-titulo{font-family:var(--display);font-weight:800;font-size:clamp(36px,11vw,44px);line-height:.95;letter-spacing:-.03em;margin:26px 0 14px}
.reto-titulo span{color:var(--amarillo)}
textarea{width:100%;flex:1;min-height:150px;border:2px solid var(--crema);background:#2E2D28;color:var(--crema);border-radius:14px;padding:14px;font:17px/1.5 var(--cuerpo);resize:none;margin-top:16px}
textarea::placeholder{color:#9C978A}
.aviso{font-size:14px;line-height:1.4;background:var(--amarillo);color:var(--tinta);border-radius:10px;padding:10px 12px;margin-top:12px}
.contador{font-family:var(--mono);font-size:11px;text-align:right;margin:8px 0 14px;color:#C9C3B3}
.contador.lleno{color:var(--amarillo)}
.pantalla--reto .boton{color:var(--tinta);box-shadow:4px 4px 0 var(--crema)}
.pantalla--reto .boton--sec{background:transparent;color:var(--crema);border-color:var(--crema)}
.acciones-reto{margin-top:14px}
.confirmar{border:2px solid var(--amarillo);border-radius:16px;padding:16px;animation:sube .35s ease-out}
.confirmar h3{font-family:var(--display);font-weight:800;font-size:22px;color:var(--amarillo);margin-bottom:6px}
.confirmar p{font-size:15px;line-height:1.45;margin-bottom:14px}
.error-linea{font-size:15px;line-height:1.4;margin-top:12px;border-left:4px solid var(--rojo);padding-left:10px}

/* Valoración */
.escala{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0 6px}
.escala button{min-height:56px;border:2px solid var(--tinta);border-radius:12px;background:var(--crema2);box-shadow:var(--sombra);font-family:var(--display);font-weight:800;font-size:22px}
.escala button[aria-pressed="true"]{background:var(--amarillo);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinta)}
.escala-pie{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--gris)}
.pantalla--valoracion textarea{background:var(--crema2);color:var(--tinta);border-color:var(--tinta);flex:0 0 auto;min-height:110px}
.pantalla--valoracion textarea::placeholder{color:var(--gris)}
.pantalla--valoracion .contador{color:var(--gris)}

/* Enlace que no sirve y fallas de red */
.error-grande{font-family:var(--display);font-weight:800;font-size:clamp(38px,12vw,46px);line-height:.95;letter-spacing:-.03em;margin-top:auto}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}