/* ============================================================================
   Embrio — Design system (pastel · glass · 3D futurista)
   Mobile-first. Acentos por género via html[data-accent].
   Respeta prefers-reduced-motion en todas las animaciones.
   ============================================================================ */

/* ---------- Fuente redondeada (local, offline) ---------- */
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/nunito-400.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/nunito-700.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/nunito-800.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  /* Paleta pastel (brief) */
  --menta:#C9EDE4; --lavanda:#E4DBF5; --durazno:#FCE0D6; --cielo:#D6ECFB; --crema:#FBF7F2;

  /* Tinta / texto */
  --ink:#413B57; --ink-soft:#6C6684; --ink-faint:#9A93AD;

  /* Vidrio */
  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.78);
  --glass-brd:rgba(255,255,255,.85);
  --glass-shadow:0 18px 44px -20px rgba(84,74,120,.55);
  --glass-blur:16px;

  /* Radios y espaciado */
  --r-lg:30px; --r-md:24px; --r-sm:16px; --r-pill:999px;
  --gap:16px;
  --safe-b:env(safe-area-inset-bottom, 0px);

  /* Acento por defecto: neutro (lavanda/menta) */
  --accent:#9A8BE0; --accent-2:#79D2BF; --accent-ink:#4A3F79;
  --accent-soft:#EDE7FB; --glow:rgba(154,139,224,.45);

  --ok:#63b98a;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-accent="nino"]{
  --accent:#6FA8EC; --accent-2:#A8CCF6; --accent-ink:#2F5C93;
  --accent-soft:#E4EFFC; --glow:rgba(111,168,236,.45);
}
html[data-accent="nina"]{
  --accent:#EC91BC; --accent-2:#F6C2D8; --accent-ink:#9A3E68;
  --accent-soft:#FCE6EF; --glow:rgba(236,145,188,.45);
}
html[data-accent="neutro"]{
  --accent:#9A8BE0; --accent-2:#79D2BF; --accent-ink:#4A3F79;
  --accent-soft:#EDE7FB; --glow:rgba(154,139,224,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Nunito', ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  color:var(--ink);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}

/* Fondo ambiental pastel (blobs suaves) */
.fondo{position:fixed; inset:0; z-index:-2; overflow:hidden; background:
  linear-gradient(160deg, var(--cielo) 0%, var(--crema) 42%, var(--lavanda) 100%);}
.fondo::before,.fondo::after{
  content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.7;
  transition:background .8s var(--ease);
}
.fondo::before{
  width:60vmax; height:60vmax; top:-18vmax; left:-14vmax;
  background:radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 68%);
  animation:flotar1 26s ease-in-out infinite;
}
.fondo::after{
  width:52vmax; height:52vmax; bottom:-20vmax; right:-16vmax;
  background:radial-gradient(circle at 50% 50%, var(--menta), transparent 66%);
  animation:flotar2 32s ease-in-out infinite;
}
@keyframes flotar1{50%{transform:translate(6vmax,4vmax) scale(1.08)}}
@keyframes flotar2{50%{transform:translate(-5vmax,-3vmax) scale(1.1)}}

/* ---------- Contenedor tipo app ---------- */
#app{
  position:relative; min-height:100dvh; width:100%;
  max-width:520px; margin:0 auto;
  display:flex; flex-direction:column;
}
.pantalla{display:none; flex-direction:column; min-height:100dvh}
.pantalla.activa{display:flex}

/* ============================================================================
   INTRO cinematográfica
   ============================================================================ */
#intro{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:#0e1020; cursor:pointer; overflow:hidden;
  animation:introBg 2.6s var(--ease) forwards;
}
#intro .marca{
  position:relative; text-align:center; transform:scale(.86); opacity:0;
  animation:introMarca 2.6s var(--ease) forwards;
}
#intro .logo-orbe{
  width:96px; height:96px; margin:0 auto 18px; border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%, #fff, #dce7f7 26%, #b8c2ee 66%, #9aa3e0 100%);
  box-shadow:0 0 0 10px rgba(255,255,255,.06), 0 24px 60px -12px rgba(120,120,220,.7);
  animation:introGlow 2.6s var(--ease) forwards;
}
#intro .wordmark{
  font-weight:800; font-size:clamp(40px,13vw,64px); letter-spacing:.5px;
  color:#fff; margin:0; line-height:1;
  text-shadow:0 4px 30px rgba(180,200,255,.5);
}
#intro .tagline{
  margin:12px 0 0; font-size:15px; font-weight:600; letter-spacing:.4px;
  color:rgba(255,255,255,.72);
}
#intro .saltar{
  position:absolute; bottom:calc(26px + var(--safe-b)); left:0; right:0;
  text-align:center; font-size:13px; color:rgba(255,255,255,.5); font-weight:600;
  animation:aparecerTarde 2.6s ease forwards;
}
#intro .destello{
  position:absolute; top:50%; left:50%; width:2px; height:2px; border-radius:50%;
  background:#fff; box-shadow:0 0 12px 4px rgba(255,255,255,.9);
  opacity:0; animation:destello 2.6s ease forwards;
}
@keyframes introBg{
  0%{background:#0e1020}
  55%{background:#2a2547}
  100%{background:linear-gradient(160deg,var(--cielo),var(--lavanda))}
}
@keyframes introMarca{
  0%{opacity:0; transform:scale(.86)}
  40%{opacity:1; transform:scale(1.02)}
  70%{opacity:1; transform:scale(1)}
  100%{opacity:1; transform:scale(1)}
}
@keyframes introGlow{
  0%{filter:brightness(.6) blur(6px); transform:scale(.7)}
  45%{filter:brightness(1.15) blur(0); transform:scale(1.06)}
  100%{filter:brightness(1) blur(0); transform:scale(1)}
}
@keyframes introOut{to{opacity:0; visibility:hidden}}
@keyframes aparecerTarde{0%,70%{opacity:0}100%{opacity:1}}
@keyframes destello{0%,30%{opacity:0; transform:translate(-50%,-50%) scale(.4)}
  46%{opacity:1; transform:translate(-50%,-140px) scale(1)}100%{opacity:0}}
#intro.ocultando{animation:introOut .5s var(--ease) forwards}

/* Aperturas posteriores: flash corto pastel (sin la revelación oscura larga) */
#intro.rapida{animation:none; background:linear-gradient(160deg,var(--cielo),var(--lavanda))}
#intro.rapida .marca{animation:subir .6s var(--ease) forwards}
#intro.rapida .logo-orbe{animation:none; filter:none; box-shadow:0 18px 44px -14px rgba(120,120,220,.5)}
#intro.rapida .wordmark{color:#4a4470; text-shadow:none}
#intro.rapida .tagline{color:var(--ink-soft)}
#intro.rapida .saltar{color:var(--ink-faint); animation:none; opacity:1}
#intro.rapida .destello{display:none}

/* ============================================================================
   Chrome / cabecera
   ============================================================================ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top,0px)) 18px 6px;
}
.topbar .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--ink)}
.topbar .brand .punto{
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff, var(--accent) 78%);
  box-shadow:0 4px 12px -3px var(--glow);
}
.icon-btn{
  appearance:none; border:1px solid var(--glass-brd); background:var(--glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink); cursor:pointer; transition:transform .18s var(--ease), background .2s;
  box-shadow:var(--glass-shadow);
}
.icon-btn:hover{background:var(--glass-strong)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:22px; height:22px}

/* ============================================================================
   Hero 3D
   ============================================================================ */
.hero{
  position:relative; width:100%;
  aspect-ratio:1/1; max-height:46dvh; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
}
#escena{width:100%; height:100%; display:block; touch-action:none; cursor:grab}
#escena:active{cursor:grabbing}
.hero .cargando{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  color:var(--ink-faint); font-weight:700; font-size:14px; opacity:0; transition:opacity .3s;
}
.hero.cargando-on .cargando{opacity:1}

/* Flechas de navegación */
.nav-flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; z-index:3;
  border:1px solid var(--glass-brd); background:var(--glass-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  border-radius:50%; display:grid; place-items:center; color:var(--accent-ink);
  cursor:pointer; box-shadow:var(--glass-shadow); transition:transform .18s var(--ease), opacity .2s;
}
.nav-flecha:hover{transform:translateY(-50%) scale(1.06)}
.nav-flecha:active{transform:translateY(-50%) scale(.9)}
.nav-flecha.izq{left:6px} .nav-flecha.der{right:6px}
.nav-flecha[disabled]{opacity:.32; pointer-events:none}
.nav-flecha svg{width:24px; height:24px}

/* ============================================================================
   Contenido principal (tarjetas)
   ============================================================================ */
.contenido{
  flex:1; padding:6px 16px calc(22px + var(--safe-b));
  display:flex; flex-direction:column; gap:var(--gap);
}
.tarjeta{
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-md);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--glass-shadow);
  padding:18px 20px; position:relative;
}
.tarjeta::before{ /* brillo especular limpio (sin refracción) */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%);
  opacity:.7;
}

/* Encabezado semana */
.cab{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.cab .semana{display:flex; flex-direction:column; line-height:1}
.cab .semana .k{font-size:13px; font-weight:700; color:var(--ink-soft); letter-spacing:.4px; text-transform:uppercase}
.cab .semana .n{font-size:clamp(38px,12vw,50px); font-weight:800; color:var(--ink); letter-spacing:-1px}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent-ink); font-weight:800; font-size:13px;
  border:1px solid rgba(255,255,255,.6); white-space:nowrap;
}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* Métricas (días restantes) + progreso */
.metricas{display:flex; gap:10px; margin-top:16px}
.mini{
  flex:1; background:var(--glass-strong); border:1px solid var(--glass-brd); border-radius:var(--r-sm);
  padding:12px 14px; text-align:center;
}
.mini .v{font-size:22px; font-weight:800; color:var(--accent-ink); line-height:1}
.mini .l{font-size:12px; font-weight:700; color:var(--ink-soft); margin-top:4px}

.progreso-wrap{margin-top:16px}
.progreso-top{display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:7px}
.barra{height:14px; border-radius:var(--r-pill); background:rgba(120,110,150,.14); overflow:hidden; position:relative}
.barra .fill{
  height:100%; border-radius:var(--r-pill); width:0;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 0 16px -2px var(--glow);
  transition:width .7s var(--ease);
}

/* Tarjeta tamaño */
.tamano{display:flex; align-items:center; gap:16px}
.tamano .fruta-ic{
  width:58px; height:58px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff, var(--accent-2) 62%, var(--accent) 100%);
  box-shadow:0 8px 20px -8px var(--glow); display:grid; place-items:center; color:#fff;
}
.tamano .fruta-ic svg{width:30px; height:30px}
.tamano .datos{flex:1; min-width:0}
.tamano .comparado{font-size:13px; font-weight:700; color:var(--ink-soft)}
.tamano .fruta-nom{font-size:20px; font-weight:800; color:var(--ink); margin:1px 0 8px; text-transform:capitalize}
.tamano .medidas{display:flex; gap:10px}
.tamano .medida{
  background:var(--glass-strong); border:1px solid var(--glass-brd); border-radius:12px;
  padding:6px 12px; font-weight:800; color:var(--accent-ink); font-size:15px;
}
.tamano .medida span{font-size:11px; font-weight:700; color:var(--ink-soft); display:block; text-transform:uppercase; letter-spacing:.3px}

/* Tarjeta descripción */
.desc-card .lead{font-size:14px; font-weight:700; color:var(--accent-ink); margin:0 0 6px}
.desc-card .cuerpo{font-size:16px; line-height:1.5; color:var(--ink); margin:0; font-weight:600}
.nota-medida{
  margin-top:12px; font-size:12.5px; line-height:1.45; color:var(--ink-soft);
  background:rgba(255,255,255,.4); border-radius:12px; padding:9px 12px;
  border:1px dashed var(--glass-brd); display:flex; gap:8px;
}
.nota-medida svg{width:16px; height:16px; flex:none; margin-top:1px; color:var(--accent)}

/* Botón Hoy + acciones bajo tarjetas */
.acciones{display:flex; gap:10px}
.btn{
  appearance:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:15px;
  border-radius:var(--r-pill); padding:14px 20px; border:1px solid var(--glass-brd);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .16s var(--ease), box-shadow .2s, background .2s; color:var(--ink);
  background:var(--glass-strong); box-shadow:var(--glass-shadow);
}
.btn:active{transform:scale(.96)}
.btn.acento{
  background:linear-gradient(120deg, var(--accent), var(--accent-2)); color:#fff; border-color:transparent;
  box-shadow:0 14px 30px -12px var(--glow);
}
.btn.bloque{width:100%}
.btn svg{width:19px; height:19px}
.btn.oculto{display:none}

/* Aviso médico */
.aviso{
  text-align:center; font-size:12px; color:var(--ink-faint); font-weight:600;
  padding:2px 14px; margin-top:2px;
}
.sello{ text-align:center; font-size:11px; color:var(--ink-faint); font-weight:700; letter-spacing:.3px; opacity:.72; margin-top:4px}

/* ============================================================================
   Onboarding
   ============================================================================ */
.ob-wrap{flex:1; display:flex; flex-direction:column; padding:0 22px calc(22px + var(--safe-b))}
.ob-head{padding:calc(20px + env(safe-area-inset-top,0px)) 0 6px; text-align:center}
.ob-head .logo-orbe{
  width:64px; height:64px; margin:0 auto 12px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff, var(--accent) 82%);
  box-shadow:0 14px 30px -10px var(--glow);
}
.ob-head h1{font-size:26px; font-weight:800; margin:0; color:var(--ink)}
.ob-head p{font-size:14px; color:var(--ink-soft); margin:6px 0 0; font-weight:600}

.pasos{display:flex; gap:7px; justify-content:center; margin:18px 0 6px}
.pasos .p{width:34px; height:6px; border-radius:999px; background:rgba(120,110,150,.2); transition:background .3s, width .3s}
.pasos .p.on{background:var(--accent); width:44px}

.paso{display:none; flex:1; flex-direction:column; animation:subir .45s var(--ease)}
.paso.activo{display:flex}
.paso h2{font-size:21px; font-weight:800; margin:22px 0 6px; color:var(--ink)}
.paso .sub{font-size:14px; color:var(--ink-soft); margin:0 0 18px; font-weight:600}
.paso .rellena{flex:1}

/* Toggle segmentado FPP/semana */
.segmento{display:flex; background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-pill); padding:5px; gap:5px; box-shadow:var(--glass-shadow)}
.segmento button{
  flex:1; appearance:none; border:0; background:transparent; font-family:inherit; font-weight:800;
  font-size:14px; color:var(--ink-soft); padding:11px; border-radius:var(--r-pill); cursor:pointer;
  transition:background .2s, color .2s;
}
.segmento button.on{background:#fff; color:var(--accent-ink); box-shadow:0 6px 14px -8px var(--glow)}

.campo{margin-top:18px}
.campo label{display:block; font-size:13px; font-weight:800; color:var(--ink-soft); margin-bottom:8px; letter-spacing:.2px}
.input, input[type="date"], input[type="text"]{
  width:100%; font-family:inherit; font-weight:700; font-size:17px; color:var(--ink);
  background:var(--glass-strong); border:1px solid var(--glass-brd); border-radius:var(--r-sm);
  padding:15px 16px; box-shadow:var(--glass-shadow); -webkit-appearance:none;
}
.input:focus, input:focus{outline:none; border-color:var(--accent)}

/* Stepper de semana */
.stepper{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:6px}
.stepper button{
  width:56px; height:56px; border-radius:50%; border:1px solid var(--glass-brd);
  background:var(--glass-strong); color:var(--accent-ink); font-size:28px; font-weight:800;
  cursor:pointer; box-shadow:var(--glass-shadow); display:grid; place-items:center;
  transition:transform .15s var(--ease);
}
.stepper button:active{transform:scale(.9)}
.stepper .valor{text-align:center; min-width:120px}
.stepper .valor .num{font-size:52px; font-weight:800; color:var(--ink); line-height:1}
.stepper .valor .et{font-size:13px; font-weight:700; color:var(--ink-soft)}

.oculto{display:none !important}

/* Opciones de género */
.generos{display:flex; flex-direction:column; gap:12px; margin-top:4px}
.gen-op{
  display:flex; align-items:center; gap:16px; padding:16px 18px; cursor:pointer;
  background:var(--glass); border:2px solid var(--glass-brd); border-radius:var(--r-md);
  box-shadow:var(--glass-shadow); transition:border-color .2s, transform .15s var(--ease), background .2s;
}
.gen-op:active{transform:scale(.98)}
.gen-op.sel{border-color:var(--accent); background:var(--glass-strong)}
.gen-op .bola{width:44px; height:44px; border-radius:50%; flex:none; box-shadow:0 8px 18px -8px rgba(84,74,120,.5)}
.gen-op[data-g="nino"] .bola{background:radial-gradient(circle at 38% 32%, #fff, #6FA8EC 82%)}
.gen-op[data-g="nina"] .bola{background:radial-gradient(circle at 38% 32%, #fff, #EC91BC 82%)}
.gen-op[data-g="neutro"] .bola{background:radial-gradient(circle at 38% 32%, #fff, #9A8BE0 55%, #79D2BF 100%)}
.gen-op .txt{flex:1}
.gen-op .txt b{display:block; font-size:17px; color:var(--ink)}
.gen-op .txt small{font-size:13px; color:var(--ink-soft); font-weight:600}
.gen-op .check{width:24px; height:24px; border-radius:50%; border:2px solid var(--glass-brd); flex:none; display:grid; place-items:center; color:#fff; transition:background .2s, border-color .2s}
.gen-op.sel .check{background:var(--accent); border-color:var(--accent)}
.gen-op .check svg{width:14px; height:14px; opacity:0; transition:opacity .2s}
.gen-op.sel .check svg{opacity:1}

.ob-footer{padding-top:18px}

/* ============================================================================
   Ajustes (hoja deslizante)
   ============================================================================ */
#ajustes{
  position:fixed; inset:0; z-index:40; display:none;
  background:rgba(40,34,64,.28); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  align-items:flex-end; justify-content:center;
}
#ajustes.abierto{display:flex; animation:fadeIn .25s ease}
#ajustes .hoja{
  width:100%; max-width:520px; max-height:92dvh; overflow-y:auto;
  background:linear-gradient(180deg, #fff, var(--crema));
  border-radius:26px 26px 0 0; padding:10px 20px calc(26px + var(--safe-b));
  box-shadow:0 -20px 50px -20px rgba(60,50,90,.5); animation:subirHoja .35s var(--ease);
}
#ajustes .agarre{width:44px; height:5px; border-radius:999px; background:rgba(120,110,150,.3); margin:6px auto 14px}
#ajustes h2{font-size:22px; font-weight:800; margin:0 0 4px; display:flex; align-items:center; justify-content:space-between}
.a-grupo{margin-top:20px}
.a-grupo .a-tit{font-size:12px; font-weight:800; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px}
.a-fila{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-sm); margin-bottom:10px;
}
.a-fila .a-lbl{font-weight:700; font-size:15px; color:var(--ink)}
.a-fila .a-val{font-weight:800; font-size:14px; color:var(--accent-ink)}
.a-mini-generos{display:flex; gap:8px}
.a-mini-generos button{
  flex:1; padding:11px 6px; border-radius:14px; border:2px solid var(--glass-brd); background:var(--glass);
  font-family:inherit; font-weight:800; font-size:13px; color:var(--ink-soft); cursor:pointer; transition:.2s;
}
.a-mini-generos button.on{border-color:var(--accent); color:var(--accent-ink); background:var(--glass-strong)}
#ajustes .version{text-align:center; font-size:12px; color:var(--ink-faint); font-weight:700; margin-top:18px}
.link-peligro{color:#c9738c}

/* ============================================================================
   Modal propio + toast (sin alert/confirm nativos)
   ============================================================================ */
#modal{position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(40,34,64,.4); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)}
#modal.abierto{display:flex; animation:fadeIn .2s ease}
#modal .caja{
  width:100%; max-width:360px; background:linear-gradient(180deg,#fff,var(--crema));
  border-radius:24px; padding:24px; text-align:center; box-shadow:0 30px 60px -20px rgba(60,50,90,.6);
  animation:subir .3s var(--ease);
}
#modal h3{margin:0 0 8px; font-size:20px; font-weight:800; color:var(--ink)}
#modal p{margin:0 0 20px; font-size:15px; color:var(--ink-soft); font-weight:600; line-height:1.45}
#modal .m-acciones{display:flex; gap:10px}
#modal .m-acciones .btn{flex:1}

#toast{
  position:fixed; left:50%; bottom:calc(28px + var(--safe-b)); transform:translateX(-50%) translateY(20px);
  z-index:80; background:rgba(50,42,74,.94); color:#fff; font-weight:700; font-size:14px;
  padding:13px 22px; border-radius:var(--r-pill); box-shadow:0 16px 34px -14px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--ease); max-width:88vw; text-align:center;
}
#toast.ver{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- Animaciones utilitarias ---------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes subir{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:translateY(0)}}
@keyframes subirHoja{from{transform:translateY(100%)}to{transform:translateY(0)}}
.entra{animation:subir .5s var(--ease) both}
.entra.d1{animation-delay:.06s} .entra.d2{animation-delay:.12s} .entra.d3{animation-delay:.18s} .entra.d4{animation-delay:.24s}

/* ---------- Foco visible (accesibilidad) ---------- */
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
.gen-op:focus-visible, .btn:focus-visible, .segmento button:focus-visible{outline-offset:2px}

/* ---------- Scrollbars con estilo ---------- */
*{scrollbar-width:thin; scrollbar-color:var(--accent) transparent}
*::-webkit-scrollbar{width:9px; height:9px}
*::-webkit-scrollbar-thumb{background:var(--accent); border-radius:999px; border:2px solid transparent; background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- Escritorio: se ve como app centrada, no como página ---------- */
@media (min-width:560px){
  #app{max-width:460px; min-height:auto; margin:24px auto; border-radius:34px; overflow:hidden;
    box-shadow:0 40px 90px -30px rgba(70,60,110,.6), 0 0 0 1px rgba(255,255,255,.5);
    background:rgba(255,255,255,.25); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
  .pantalla{min-height:760px}
  body{padding:0}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  #intro{animation:none; background:linear-gradient(160deg,var(--cielo),var(--lavanda))}
  #intro .marca{opacity:1; transform:none}
  #intro .logo-orbe{filter:none; box-shadow:0 20px 50px -12px rgba(120,120,220,.5)}
  #intro .wordmark{color:#4a4470; text-shadow:none}
  #intro .tagline{color:var(--ink-soft)}
  #intro .saltar{color:var(--ink-faint); opacity:1}
  #intro .destello{display:none}
  .fondo::before,.fondo::after{animation:none}
}