/* Reto flash · la base: la letra Outfit (sin pedirla a otros sitios), los colores de Tidú, el marco de cada pantalla,
   la cabecera con la barra de avance, el pie con sus botones y la hoja que sube desde abajo. Diseño: el prototipo
   aprobado en docs/reto-flash/prototipo/. */
@font-face{font-family:"Outfit";src:url("../letra/outfit-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --tinta:#12213D; --gris:#56657C; --morado:#066DB3; --hondo:#0B2A5B; --lila:#0995D8; --lila2:#D6E9FA; --suave:#E8F3FC;
  --fondo:#F3F6FA; --riel:#DFE6EE; --verde:#8DC63F; --verde-sombra:#548F18; --verde-fondo:#EDF6E0; --verde-texto:#3B6A0E;
  --sobre-verde:#1E3409; --marca:#BFE2F8; --blanco:#FFFFFF;
  --letra:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--fondo);color:var(--tinta);font-family:var(--letra);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--morado)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-within{outline:3px solid var(--lila);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,p{margin:0}
.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* el marco: una pantalla a la vez, del alto del celular; en la computadora va al centro */
#app{min-height:100%;display:flex;justify-content:center}
.pantalla{position:relative;width:100%;max-width:480px;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--fondo);overflow:hidden}
.pantalla>main{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:8px 20px 12px;overflow-y:auto}
@media (min-width:768px){.pantalla{max-height:900px;margin-block:auto;border-radius:28px;box-shadow:0 24px 60px rgba(11,42,91,.14)}}

/* las cabeceras: con la barra de avance, con un título o con el sello del reto */
.cabecera{display:flex;align-items:center;gap:8px;padding:16px 16px 8px}
.cabecera h1{font-size:24px;line-height:1.15;font-weight:800}
.riel{flex:1;height:12px;border-radius:999px;background:var(--riel);overflow:hidden}
.riel>i{display:block;height:100%;border-radius:999px;background:var(--verde);transition:width .3s ease-out}
.puesto{flex:none;font-size:14px;font-weight:600;color:var(--gris)}
.sello{padding:8px 14px;border-radius:999px;background:var(--verde-fondo);color:var(--verde-texto);font-size:14px;font-weight:700}
.cabecera.centrada{justify-content:center}
.cabecera.repartida{justify-content:space-between;padding-bottom:0}
.hueco{width:44px}

/* los botones */
.ico{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:none;border-radius:12px;background:transparent;color:var(--hondo);padding:0}
.ico.gris{color:var(--gris)}
.ico.blanco{background:var(--blanco);color:var(--morado);box-shadow:0 3px 0 var(--lila2)}
.pie{display:flex;gap:12px;padding:12px 16px 24px;border-top:1.5px solid var(--riel)}
.pie.sin-linea{border-top:none}
.pie.columna{flex-direction:column;gap:10px}
.pie .nota{flex:1;align-self:center;font-size:15px;color:var(--gris);text-align:center}
.atras{width:56px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--blanco);border:2px solid var(--lila2);box-shadow:0 3px 0 var(--lila2);color:var(--hondo);padding:0}
.btn{flex:1;min-width:0;min-height:52px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:16px;font-weight:700;font-size:18px;line-height:1.15;text-align:center;text-decoration:none}
.btn.morado{background:var(--morado);box-shadow:0 4px 0 var(--hondo);color:var(--blanco)}
.btn.verde{background:var(--verde);box-shadow:0 4px 0 var(--verde-sombra);color:var(--sobre-verde)}
.btn.blanco{background:var(--blanco);border:2px solid var(--lila2);box-shadow:0 3px 0 var(--lila2);color:var(--hondo);font-size:16px}
.btn.chico{min-height:48px;font-size:16px;border-radius:14px}
.btn:disabled{background:var(--riel);box-shadow:none;color:#8A95A6;cursor:default}
.btn.grande{min-height:56px;font-size:19px;font-weight:800}
.dos{display:flex;gap:10px}
.dos>.btn{flex:1}
.pie .dos{flex:1}
.enlace{align-self:flex-start;display:flex;align-items:center;gap:4px;min-height:44px;padding:0;border:none;background:none;color:var(--morado);font-size:15px;font-weight:600;text-decoration:none}
.enlace .i{width:18px;height:18px}
.subrayado{min-height:44px;border:none;background:none;color:var(--morado);font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:3px}

/* textos comunes */
.antetitulo{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--morado)}
.titulo{font-size:28px;line-height:1.12;font-weight:800;text-wrap:balance}
.bajada{font-size:16px;line-height:1.4;color:var(--gris)}
.chica{font-size:14px;line-height:1.4;color:var(--gris)}
.pastilla{align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--verde-fondo);color:var(--verde-texto);font-size:14px;font-weight:700}

/* la hoja que sube desde abajo: los pasos escritos, el pedido completo y «¿Dónde lo creo?» */
.velo{position:absolute;inset:0;z-index:20;background:rgba(18,33,61,.45);display:flex;align-items:flex-end;animation:aparecer .2s ease-out both}
.hoja{width:100%;max-height:88%;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:18px 20px 24px;border-radius:24px 24px 0 0;background:var(--blanco)}
.hoja h2{font-size:22px;font-weight:800}
.hoja .cerrar{align-self:flex-end;margin:-8px -8px -6px 0}
@keyframes aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* dentro de una pantalla los botones toman su alto; en el pie se reparten el ancho */
.pantalla main>.btn,.pantalla main>.dos{flex:none}
.pie .dos .btn{font-size:16px;padding:0 6px;gap:6px}
.pie .dos .btn .i{width:20px;height:20px}