/* CaminoMigrante · app mobile-first. Línea gráfica: turquesa (mochila), lila de fondo, verde acierto,
   coral error, oro gemas. Tarjetas redondeadas con sombra sólida (botones 3D táctiles). Nunito ≥16px. */
:root {
  --turq: #00A8CC; --turq-d: #00809C; --azul: #1CB0F6; --azul-d: #1899D6;
  --lila: #F3EEFF; --lila-2: #EBE2FE; --lila-3: #D9CBFB; --morado: #2B2340;
  --verde: #58CC02; --verde-d: #58A700; --verde-l: #D7FFB8;
  --rojo: #FF4B4B; --rojo-d: #EA2B2B; --rojo-l: #FFDFE0;
  --oro: #FFC800; --oro-d: #E5A500; --gris: #7A6F96; --gris-l: #E5E0F0; --bloq: #C9C3D6;
  --radio: 20px; --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--lila); }
body { font: 500 17px/1.45 Nunito, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--morado); }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 900; line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; }
p { margin: 0 0 12px; }
a { color: var(--turq-d); }
.muted { color: var(--gris); } .small { font-size: .9rem; } .center { text-align: center; }
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; }
.splash { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.splash img { animation: bob 1.4s ease-in-out infinite; }

/* ---------- botones 3D */
.btn { display: block; width: 100%; border: 0; cursor: pointer; text-align: center; text-decoration: none; font-weight: 900; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase;
  padding: 15px 20px; border-radius: 18px; background: var(--turq); color: #fff; box-shadow: 0 5px 0 var(--turq-d); transition: transform .06s, box-shadow .06s; margin-top: 8px; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--turq-d); }
.btn:disabled { background: var(--gris-l); color: #A79FBD; box-shadow: 0 5px 0 #D2CBE3; cursor: default; transform: none; }
.btn--verde { background: var(--verde); box-shadow: 0 5px 0 var(--verde-d); } .btn--verde:active { box-shadow: 0 1px 0 var(--verde-d); }
.btn--rojo { background: var(--rojo); box-shadow: 0 5px 0 var(--rojo-d); }
.btn--oro { background: var(--oro); color: #4A3800; box-shadow: 0 5px 0 var(--oro-d); }
.btn--ghost { background: #fff; color: var(--turq-d); box-shadow: 0 4px 0 var(--lila-3), inset 0 0 0 2px var(--lila-3); }
.btn--link { background: none; box-shadow: none; color: var(--turq-d); text-transform: none; letter-spacing: 0; font-weight: 800; }
.btn--sm { padding: 10px 14px; font-size: .9rem; border-radius: 14px; }
.row { display: flex; gap: 10px; } .row > * { flex: 1; }

/* ---------- barra superior y navegación */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(243, 238, 255, .92); backdrop-filter: blur(8px); }
.top__me { width: 42px; height: 42px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--lila-3); padding: 3px; border: 0; cursor: pointer; }
.top__me img { width: 100%; height: 100%; object-fit: contain; }
.top__stats { display: flex; gap: 6px; margin-left: auto; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; border-radius: 99px; padding: 6px 11px; background: #fff; box-shadow: 0 3px 0 var(--lila-3); border: 0; cursor: pointer; font-size: 1rem; }
.chip--fuego { color: #FF9600; } .chip--fuego.off { color: var(--bloq); filter: grayscale(1); }
.chip--gema { color: var(--azul-d); } .chip--vida { color: var(--rojo); }
.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 560px; z-index: 20; display: flex; justify-content: space-around;
  background: #fff; border-top: 2px solid var(--lila-2); padding: 6px 4px calc(6px + var(--safe-b)); }
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; text-decoration: none; color: var(--gris); font-size: .72rem; font-weight: 800; padding: 6px 2px; border-radius: 14px; }
.nav a span { font-size: 1.5rem; line-height: 1; }
.nav a.on { color: var(--turq-d); background: #E0F6FB; box-shadow: inset 0 0 0 2px #9BE0F0; }
.nav a.sos span { filter: drop-shadow(0 0 0 transparent); }
.page { padding: 8px 16px calc(96px + var(--safe-b)); }

/* ---------- tarjetas */
.card { background: #fff; border-radius: var(--radio); box-shadow: 0 4px 0 rgba(0, 0, 0, .1); padding: 18px; margin-bottom: 16px; }
.card--azul { background: var(--azul); color: #fff; box-shadow: 0 5px 0 var(--azul-d); }
.card--rojo { background: var(--rojo); color: #fff; box-shadow: 0 5px 0 var(--rojo-d); }
.card--verde { background: var(--verde-l); }
.card h2, .card h3 { margin-bottom: 8px; }
.mascot { display: block; margin: 0 auto; width: 120px; filter: drop-shadow(0 6px 0 rgba(43, 35, 64, .08)); animation: bob 2.4s ease-in-out infinite; }
.mascot--sm { width: 72px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bubble { position: relative; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 4px 0 rgba(0, 0, 0, .08); font-weight: 800; font-size: 1.12rem; }
.bubble::before { content: ""; position: absolute; left: 28px; top: -10px; border: 10px solid transparent; border-top: 0; border-bottom-color: #fff; }

/* ---------- ruta */
.promo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.promo img { width: 56px; } .promo b { display: block; }
.unit { margin: 22px 0 8px; border-radius: var(--radio); padding: 14px 16px; color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); display: flex; align-items: center; gap: 10px; }
.unit__txt { flex: 1; } .unit__txt small { display: block; opacity: .9; font-weight: 700; } .unit__txt b { font-size: 1.1rem; font-weight: 900; }
.unit__pct { font-weight: 900; background: rgba(255, 255, 255, .25); border-radius: 12px; padding: 6px 10px; }
.path { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 0 8px; }
.node { position: relative; width: 74px; height: 70px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.7rem; color: #fff; background: var(--c, var(--turq));
  box-shadow: 0 7px 0 rgba(0, 0, 0, .22), inset 0 -4px 0 rgba(0, 0, 0, .08); transition: transform .06s; }
.node:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0, 0, 0, .22); }
.node--completada { background: var(--oro); box-shadow: 0 7px 0 var(--oro-d); }
.node--bloqueada { background: var(--bloq); box-shadow: 0 7px 0 #A9A2BA; cursor: default; }
.node--actual { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 7px 0 rgba(0, 0, 0, .22), 0 0 0 0 rgba(0, 168, 204, .45); } 50% { box-shadow: 0 7px 0 rgba(0, 0, 0, .22), 0 0 0 14px rgba(0, 168, 204, 0); } }
.node__stars { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: .8rem; white-space: nowrap; letter-spacing: -2px; }
.node__guide { position: absolute; width: 58px; left: 86px; top: -12px; animation: bob 2s ease-in-out infinite; pointer-events: none; }
.node__tip { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--turq-d); font-weight: 900; font-size: .8rem; border-radius: 12px; padding: 4px 10px; box-shadow: 0 3px 0 var(--lila-3); white-space: nowrap; animation: bob 1.6s ease-in-out infinite; }
.pop { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(43, 35, 64, .35); }
.pop__card { width: 100%; max-width: 560px; background: #fff; border-radius: 24px 24px 0 0; padding: 20px 18px calc(20px + var(--safe-b)); animation: up .2s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.pop__card h3 { margin-bottom: 4px; }

/* ---------- lección */
.lesson { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 12px 16px calc(16px + var(--safe-b)); }
.lesson__top { display: flex; align-items: center; gap: 12px; }
.x { border: 0; background: none; font-size: 1.6rem; color: var(--gris); cursor: pointer; padding: 4px 8px; }
.progress { flex: 1; height: 16px; background: var(--gris-l); border-radius: 99px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--verde); border-radius: 99px; transition: width .3s; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08), inset 0 4px 0 rgba(255, 255, 255, .3); }
.lesson__body { flex: 1; padding: 18px 0 8px; }
.lesson__ask { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.lesson__ask img.guide { width: 78px; flex-shrink: 0; animation: bob 2.4s ease-in-out infinite; }
.lesson__ask .bubble { flex: 1; } .lesson__ask .bubble::before { left: -10px; top: 22px; border: 10px solid transparent; border-left: 0; border-right-color: #fff; }
.speak { border: 0; background: #E0F6FB; color: var(--turq-d); border-radius: 12px; padding: 4px 10px; font-weight: 900; cursor: pointer; margin-top: 8px; font-size: .9rem; }
.q-img { width: 100%; border-radius: 18px; margin-bottom: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, .08); }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opts--vm { flex-direction: row; } .opts--vm .opt { flex: 1; text-align: center; font-size: 1.15rem; padding: 22px 10px; }
.opt { display: block; width: 100%; text-align: left; border: 2px solid var(--lila-3); background: #fff; border-radius: 16px; padding: 14px 16px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 var(--lila-3); }
.opt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lila-3); }
.opt.sel { border-color: var(--azul); background: #DDF4FF; box-shadow: 0 4px 0 var(--azul); color: var(--azul-d); }
.opt.ok { border-color: var(--verde); background: var(--verde-l); box-shadow: 0 4px 0 var(--verde-d); color: var(--verde-d); }
.opt.bad { border-color: var(--rojo); background: var(--rojo-l); box-shadow: 0 4px 0 var(--rojo-d); color: var(--rojo-d); }
.opt:disabled { cursor: default; }
.slots { min-height: 64px; border-bottom: 2px dashed var(--lila-3); display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 12px; margin-bottom: 14px; }
.bank { display: flex; flex-wrap: wrap; gap: 8px; }
.tile { border: 2px solid var(--lila-3); background: #fff; border-radius: 14px; padding: 10px 12px; font-weight: 800; box-shadow: 0 3px 0 var(--lila-3); cursor: pointer; }
.tile.used { visibility: hidden; }
.tile--step { width: 100%; text-align: left; }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match .opt { text-align: center; padding: 12px 8px; font-size: .95rem; }
.match .opt.done { opacity: .35; pointer-events: none; }
.match .opt.p0 { border-color: #1CB0F6; } .match .opt.p1 { border-color: #CE82FF; } .match .opt.p2 { border-color: #FF9600; } .match .opt.p3 { border-color: #58CC02; } .match .opt.p4 { border-color: #FF86C8; } .match .opt.p5 { border-color: #00A8CC; }
.lesson__foot { padding-top: 8px; }
.sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 560px; z-index: 50; padding: 18px 16px calc(18px + var(--safe-b)); border-radius: 24px 24px 0 0; animation: up .2s ease-out; max-height: 75vh; overflow-y: auto; }
.sheet--ok { background: var(--verde-l); color: var(--verde-d); } .sheet--bad { background: var(--rojo-l); color: var(--rojo-d); }
.sheet h2 { display: flex; align-items: center; gap: 8px; }
.nota { background: #fff; color: var(--morado); border-radius: 18px; padding: 14px 16px; margin: 10px 0 4px; box-shadow: 0 3px 0 rgba(0, 0, 0, .06); font-weight: 500; }
.nota strong { display: block; color: var(--turq-d); margin-bottom: 4px; }
.nota small { display: block; color: var(--gris); margin-top: 6px; }
.nota .firma { font-style: italic; color: var(--gris); margin-top: 6px; font-size: .9rem; }

/* ---------- resultados */
.result { text-align: center; padding: 30px 16px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.result .stars { font-size: 2.6rem; letter-spacing: 4px; margin: 6px 0 14px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.tilebox { border-radius: 18px; border: 2px solid; overflow: hidden; background: #fff; }
.tilebox small { display: block; color: #fff; font-weight: 900; font-size: .75rem; padding: 4px; text-transform: uppercase; }
.tilebox b { display: block; padding: 10px 4px; font-size: 1.3rem; }
.tilebox--xp { border-color: var(--oro); } .tilebox--xp small { background: var(--oro); color: #4A3800; }
.tilebox--gema { border-color: var(--azul); } .tilebox--gema small { background: var(--azul); }
.tilebox--fuego { border-color: #FF9600; } .tilebox--fuego small { background: #FF9600; }
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.confetti i { position: absolute; top: -10px; width: 10px; height: 14px; border-radius: 3px; animation: fall 1.8s ease-in forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: .8; } }

/* ---------- formularios */
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; }
input, select, textarea { font: inherit; font-size: 17px; font-weight: 600; color: var(--morado); border: 2px solid var(--lila-3); border-radius: 16px; padding: 13px 14px; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(28, 176, 246, .2); }
.check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 600 !important; }
.check input { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--turq); margin-top: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 2px solid var(--lila-3); background: #fff; border-radius: 16px; padding: 12px 14px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--lila-3); text-align: left; }
.chips button.sel { border-color: var(--azul); background: #DDF4FF; color: var(--azul-d); box-shadow: 0 3px 0 var(--azul); }
.chips--col { flex-direction: column; } .chips--col button { width: 100%; }
.guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.guides button { border: 2px solid var(--lila-3); background: #fff; border-radius: 18px; padding: 8px 4px; cursor: pointer; box-shadow: 0 3px 0 var(--lila-3); font-weight: 900; font-size: .85rem; }
.guides button img { width: 100%; max-width: 84px; display: block; margin: 0 auto 2px; }
.guides button.sel { border-color: var(--azul); background: #DDF4FF; box-shadow: 0 3px 0 var(--azul); }
.err { color: var(--rojo-d); font-weight: 800; font-size: .9rem; }
.toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 90; background: var(--morado); color: #fff; border-radius: 16px; padding: 12px 18px; font-weight: 800; max-width: 92%; animation: up .2s ease-out; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.toast--bad { background: var(--rojo-d); }
.steps { display: flex; gap: 6px; justify-content: center; margin: 4px 0 16px; } .steps i { width: 28px; height: 8px; border-radius: 99px; background: var(--gris-l); } .steps i.on { background: var(--turq); }

/* ---------- perfil, liga, tienda */
.hero { text-align: center; padding-top: 6px; }
.hero h1 { margin: 6px 0 2px; }
.lvl { height: 14px; background: var(--gris-l); border-radius: 99px; overflow: hidden; margin: 8px 0 2px; } .lvl span { display: block; height: 100%; background: var(--oro); }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { border: 2px solid var(--lila-2); border-radius: 16px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.stat span { font-size: 1.5rem; } .stat b { display: block; font-size: 1.15rem; font-weight: 900; } .stat small { color: var(--gris); font-weight: 700; }
.medals { list-style: none; padding: 0; margin: 0; } .medals li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--lila-2); font-weight: 800; } .medals li span { font-size: 1.5rem; }
.league-badge { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
.lg-bronce { background: #E7A26B; } .lg-plata { background: #C9D1DB; } .lg-oro { background: var(--oro); } .lg-diamante { background: #7FE3F6; }
.rank { list-style: none; padding: 0; margin: 0; }
.rank li { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--lila-2); font-weight: 800; }
.rank li.me { background: #E0F6FB; border-radius: 14px; } .rank li img { width: 38px; }
.rank li .pos { width: 26px; text-align: center; font-weight: 900; } .rank li .xp { margin-left: auto; color: var(--gris); }
.rank li.up .pos { color: var(--verde-d); } .rank li.down .pos { color: var(--rojo-d); }
.rank .zone { font-size: .8rem; font-weight: 900; text-align: center; padding: 4px; border-bottom: 0; justify-content: center; }
.rank .zone--up { color: var(--verde-d); } .rank .zone--down { color: var(--rojo-d); }
.gold { box-shadow: 0 0 0 3px var(--oro), 0 0 14px rgba(255, 200, 0, .7) !important; border-radius: 50%; }
.shop-item { display: flex; align-items: center; gap: 14px; }
.shop-item span.ic { font-size: 2.4rem; } .shop-item div { flex: 1; } .shop-item .btn { width: auto; margin: 0; }

/* ---------- SOS */
.sos { background: var(--rojo); color: #fff; border-radius: var(--radio); padding: 20px; box-shadow: 0 5px 0 var(--rojo-d); }
.sos h1 { color: #fff; }
.sos__card { background: #fff; color: var(--morado); border-radius: 18px; padding: 16px; margin-top: 12px; }
.sos__card h3 { color: var(--rojo-d); margin: 14px 0 4px; } .sos__card h3:first-child { margin-top: 0; }
.sos--grande .sos__card { font-size: 1.3rem; line-height: 1.5; }
.sos-btn { display: flex; align-items: center; gap: 10px; text-decoration: none; }

/* ---------- Migrante Amigo */
.flower { display: block; width: 220px; height: 220px; margin: 0 auto; }
.flower .petal { transition: opacity .4s, transform .4s; transform-origin: 110px 110px; }
.flower .petal.off { opacity: .18; }
.goal { text-align: center; font-weight: 900; font-size: 1.15rem; }
.bar { height: 16px; background: var(--lila-2); border-radius: 99px; overflow: hidden; margin: 8px 0; } .bar span { display: block; height: 100%; background: linear-gradient(90deg, #FF86C8, #CE82FF); }
.donate-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.donate-opts button { border: 2px solid var(--lila-3); background: #fff; border-radius: 18px; padding: 12px 8px; cursor: pointer; box-shadow: 0 3px 0 var(--lila-3); font-weight: 800; }
.donate-opts button b { display: block; font-size: 1.15rem; } .donate-opts button small { color: var(--gris); }
.donate-opts button.sel { border-color: #FF86C8; background: #FFF0F8; box-shadow: 0 3px 0 #FF86C8; }
.wall { list-style: none; padding: 0; margin: 0; } .wall li { padding: 8px 0; border-bottom: 1px dashed var(--lila-2); }

@media (min-width: 600px) { body { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }