/* Página «Conoce la app» (index.html, la portada del sitio) — versión 2.
   Colores: SOLO variables de tokens.css. Las secciones oscuras (portada y cierre) usan los tokens --marca-*,
   que son iguales en todos los temas; el resto sigue el tema claro/oscuro/estilo que la persona eligió.
   Movimiento (criterios de Emil Kowalski): ease-out fuerte para entrar, solo transform y opacity,
   respuesta al toque con scale(.97), hover solo con mouse. «Reducir animaciones» y prefers-reduced-motion
   dejan solo fundidos (sin desplazamientos) y apagan lo automático (pestañas y cinta). */
:root{
  --display:"Bricolage Grotesque",var(--fuente);
  --salida:cubic-bezier(0.23,1,0.32,1);
  --cajon:cubic-bezier(0.32,0.72,0,1);
  --oscuro-1:var(--marca-fondo-3);
  --oscuro-2:var(--marca-fondo-2);
  --oscuro-3:var(--marca-fondo-1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--fuente);background:var(--fondo);color:var(--texto);line-height:1.55;overflow-x:clip}
a{color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;text-wrap:balance}
button{font:inherit;color:inherit}
::selection{background:var(--acento-suave);color:var(--texto)}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:8px}
.oculto{position:absolute;width:0;height:0;overflow:hidden}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;z-index:50;background:var(--tarjeta);color:var(--texto);padding:10px 14px;border-radius:10px}
.saltar:focus{left:16px}
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ancho{width:100%;max-width:1160px;margin:0 auto;padding:0 16px}
@media (min-width:600px){.ancho{padding:0 28px}}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;
  font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform 160ms var(--salida),background-color 200ms ease,border-color 200ms ease}
.btn:active{transform:scale(0.97)}
.btn .ico{transition:transform 200ms var(--salida)}
.btn-luz{background:var(--marca-titulo);color:var(--oscuro-2)}
.btn-vidrio{background:var(--marca-velo);color:var(--marca-titulo);border-color:color-mix(in srgb,var(--marca-titulo) 22%,transparent)}
.btn-nav{min-height:44px;padding:0 18px;background:var(--marca-titulo);color:var(--oscuro-2)}
.btn-sec{background:var(--control);color:var(--texto);border-color:var(--borde-control)}
@media (hover:hover) and (pointer:fine){
  .btn-luz:hover,.btn-nav:hover{background:var(--marca-acento)}
  .btn-luz:hover .ico{transform:translateX(3px)}
  .btn-vidrio:hover{border-color:var(--marca-texto-2)}
  .btn-sec:hover{background:var(--hundido)}
}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.acciones.centro{justify-content:center}

/* ---------- Marca ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600}
.marca{display:block;flex:none;width:34px;height:34px;background:url(../img/icono.svg) center/contain no-repeat}
.marca-palabra{display:block;flex:none}.marca-i{fill:var(--logo-i)}.logo{--logo-i:var(--logo-punto-claro)}

/* ---------- Menú flotante ---------- */
.nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:20;width:min(calc(100% - 24px),1000px);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--oscuro-1) 78%,transparent);color:var(--marca-titulo);
  border:1px solid color-mix(in srgb,var(--marca-titulo) 12%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  transition:box-shadow 300ms ease}
.nav.con-sombra{box-shadow:var(--sombra-flotante)}
.logo-t{font-size:.95rem}
.nav-enlaces{display:none;gap:4px}
.nav-enlaces a{color:var(--marca-texto-2);text-decoration:none;font-size:.92rem;font-weight:500;padding:10px 12px;border-radius:999px;transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){.nav-enlaces a:hover{color:var(--marca-titulo)}}
@media (min-width:820px){.nav-enlaces{display:flex}}
@media (max-width:380px){.nav .logo-t{display:none}}

/* ---------- Portada ---------- */
.portada{position:relative;isolation:isolate;color:var(--marca-texto);padding:128px 16px 0;text-align:center;
  background:linear-gradient(180deg,var(--oscuro-1) 0%,var(--oscuro-2) 45%,var(--oscuro-3) 100%)}
.portada::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(34vw,260px);background:var(--fondo);z-index:-1}
.brillo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.brillo::before{content:"";position:absolute;left:50%;top:38%;width:1100px;height:700px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--marca-brillo),transparent);animation:respirar 9s ease-in-out infinite alternate}
.brillo.abajo::before{top:auto;bottom:-380px}
@keyframes respirar{from{opacity:.75}to{opacity:1}}
.portada-in{max-width:880px;margin:0 auto}
.pastilla{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;font-size:.88rem;text-decoration:none;
  background:var(--marca-velo);color:var(--marca-texto-2);border:1px solid color-mix(in srgb,var(--marca-titulo) 12%,transparent)}
.pastilla b{background:var(--marca-acento);color:var(--oscuro-1);padding:3px 10px;border-radius:999px;font-weight:600}
.pastilla .ico{width:1em;height:1em;transition:transform 200ms var(--salida)}
@media (hover:hover) and (pointer:fine){a.pastilla:hover .ico{transform:translateX(3px)}}
.titular{font-family:var(--display);font-weight:800;font-size:clamp(2.75rem,9vw,6rem);line-height:.98;letter-spacing:-0.035em;
  color:var(--marca-titulo);margin-top:28px}
.titular .linea{display:inline-block;animation:subir 900ms var(--salida) both}
.titular .linea+.linea{animation-delay:90ms;color:var(--marca-acento)}
.titular.chico{font-size:clamp(2.3rem,7vw,4.5rem);margin-top:20px}
.bajada{font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--marca-texto-2);max-width:36em;margin:24px auto 0;animation:fundir 900ms ease 200ms both}
.portada .acciones{justify-content:center;animation:fundir 900ms ease 300ms both}
@keyframes subir{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fundir{from{opacity:0}to{opacity:1}}

/* ---------- Vitrina ---------- */
.vitrina{max-width:1080px;margin:64px auto 0;animation:subir 1100ms var(--salida) 250ms both;scroll-margin-top:90px}
.pestanas{display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:999px;margin-bottom:18px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:var(--marca-velo);border:1px solid color-mix(in srgb,var(--marca-titulo) 12%,transparent)}
.pestanas::-webkit-scrollbar{display:none}
.pestanas [role=tab]{position:relative;overflow:hidden;min-height:44px;padding:0 16px;border-radius:999px;border:0;background:transparent;
  color:var(--marca-texto-2);font-weight:600;font-size:.92rem;cursor:pointer;transition:background-color 250ms ease,color 250ms ease,transform 160ms var(--salida)}
.pestanas [role=tab]:active{transform:scale(0.97)}
.pestanas [role=tab][aria-selected=true]{background:var(--marca-titulo);color:var(--oscuro-2)}
.pestanas [role=tab] i{position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:var(--logo-fondo);transform:scaleX(0);transform-origin:left}
.pestanas.corriendo [role=tab][aria-selected=true] i{animation:progreso var(--intervalo,6s) linear both}
@keyframes progreso{to{transform:scaleX(1)}}
.pausa{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--marca-texto-2);display:grid;place-items:center;cursor:pointer;flex:none}
@media (hover:hover) and (pointer:fine){.pausa:hover,.pestanas [role=tab]:hover{color:var(--marca-titulo)}.pestanas [role=tab][aria-selected=true]:hover{color:var(--oscuro-2)}}

.ventana{position:relative;text-align:left;border-radius:22px;overflow:hidden;background:var(--fondo);color:var(--texto);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--marca-titulo) 14%,transparent),0 40px 80px -20px color-mix(in srgb,var(--oscuro-1) 70%,transparent),0 0 120px -30px var(--marca-brillo)}
.ventana-barra{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--tarjeta);border-bottom:1px solid var(--borde);font-size:.78rem;color:var(--texto-2)}
.ventana-barra i{width:11px;height:11px;border-radius:50%;background:var(--borde-fuerte)}
.ventana-barra span{margin-left:10px;padding:3px 12px;border-radius:999px;background:var(--hundido)}
.ventana-barra em{margin-left:auto;font-style:normal;font-weight:600;color:var(--info);background:var(--info-suave);padding:3px 10px;border-radius:999px}
@media (max-width:520px){.ventana-barra span{display:none}}

/* La maqueta de la app se adapta al ancho de la ventana (consultas de contenedor) */
.ventana{container-type:inline-size}
.app-mock{position:relative;display:grid;grid-template-columns:1fr;min-height:520px;font-variant-numeric:tabular-nums;font-size:.9rem}
.mk-menu{display:none}
.mk-pantallas{position:relative;padding:18px 16px 84px}
.mk-abajo{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-around;align-items:center;padding:8px;border-radius:18px;
  background:var(--nav-fondo);border:1px solid var(--nav-borde);color:var(--nav-texto);box-shadow:var(--sombra)}
.mk-abajo span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;transition:background-color 300ms ease,color 300ms ease}
.mk-abajo span.on{background:var(--nav-activo-fondo);color:var(--nav-activo-texto)}
.mk-abajo .mk-mas{background:var(--primario);color:var(--sobre-primario)}
.mk-abajo .mk-mas.on{background:var(--primario-hover);color:var(--sobre-primario)}
.mk-solo-ancho{display:none}
@container (min-width:720px){
  .app-mock{grid-template-columns:200px 1fr;min-height:540px}
  .mk-menu{display:flex;flex-direction:column;gap:4px;padding:18px 12px;background:var(--nav-fondo);border-right:1px solid var(--nav-borde);color:var(--nav-texto)}
  .mk-pantallas{padding:24px 28px}
  .mk-abajo{display:none}
  .mk-solo-ancho{display:block}
}
.mk-marca{display:flex;align-items:center;gap:9px;padding:4px 8px 16px;color:var(--nav-activo-texto)}
.mk-marca .marca{width:28px;height:28px}
.mk-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-weight:500;transition:background-color 300ms ease,color 300ms ease}
.mk-item.on{background:var(--nav-activo-fondo);color:var(--nav-activo-texto)}

.mk-pant{animation:fundir 300ms ease both}
.mk-pant[hidden]{display:none}
.mk-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.mk-cab b{display:block;font-size:1.15rem}
.mk-cab span{color:var(--texto-2);font-size:.82rem}
.mk-seg{display:inline-flex;background:var(--hundido);border-radius:12px;padding:3px;font-size:.8rem;font-weight:600}
.mk-seg i{font-style:normal;padding:6px 12px;border-radius:9px;color:var(--texto-2)}
.mk-seg i.on{background:var(--tarjeta);color:var(--texto);box-shadow:var(--sombra-pastilla)}
.mk-seg.ancho{display:flex}.mk-seg.ancho i{flex:1;text-align:center;padding:9px}
.mk-grid{display:grid;gap:16px}
@container (min-width:720px){.mk-grid{grid-template-columns:1.05fr 1fr}}
.mk-resumen{background:var(--azul);color:var(--sobre-azul);border-radius:var(--radio);padding:18px 20px;position:relative;overflow:hidden}
.mk-resumen::after{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:var(--resumen-brillo);opacity:.55}
.mk-resumen>*{position:relative;z-index:1}
.mk-resumen span{font-size:.8rem;color:var(--sobre-azul-2)}
.mk-resumen strong{display:block;font-size:1.75rem;letter-spacing:-0.02em;margin:2px 0 12px}
.mk-io{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.78rem;color:var(--sobre-azul-2)}
.mk-io em{font-style:normal;font-weight:600}
.mk-io span:first-child b,.mk-io span:first-child em{color:var(--ingreso-claro)}
.mk-io span:last-child b,.mk-io span:last-child em{color:var(--gasto-claro)}
.mk-lista{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.mk-lista li{display:flex;align-items:center;gap:10px;background:var(--tarjeta);border-radius:12px;padding:10px 12px;box-shadow:var(--sombra)}
.mk-lista.plana li{box-shadow:none;background:var(--fondo)}
.mk-lista li>span:nth-child(2){flex:1;min-width:0;font-weight:500;line-height:1.3}
.mk-lista small{display:block;font-weight:400;font-size:.75rem;color:var(--texto-2)}
.mk-lista b{font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.mk-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:700;flex:none}
.mk-ic.g{background:var(--hundido);color:var(--terracota)}
.mk-ic.i{background:var(--verde-suave);color:var(--verde)}
.mk-ic.p{background:var(--info-suave);color:var(--info)}
b.g{color:var(--terracota)} b.i{color:var(--verde)} b.p{color:var(--info)}
.mk-tarj{background:var(--tarjeta);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra)}
.mk-barras{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.mk-barras li{display:grid;grid-template-columns:6.2em 1fr auto;gap:10px;align-items:center;font-size:.82rem}
.mk-barras i{height:9px;border-radius:9px;background:var(--hundido);position:relative;overflow:hidden}
.mk-barras i::after{content:"";position:absolute;inset:0;background:var(--terracota);border-radius:inherit;transform-origin:left;transform:scaleX(var(--p))}
.mk-barras em{font-style:normal;font-weight:600;color:var(--texto-2)}
/* Entrada escalonada de lo que hay en la pantalla elegida */
.mk-pant.activa .ap{animation:subir-chico 500ms var(--salida) both}
.mk-pant.activa .ap:nth-child(2){animation-delay:60ms}.mk-pant.activa .ap:nth-child(3){animation-delay:120ms}.mk-pant.activa .ap:nth-child(4){animation-delay:180ms}
.mk-pant.activa .mk-barras i::after{animation:crecer 900ms var(--salida) 150ms both}
@keyframes subir-chico{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes crecer{from{transform:scaleX(0)}to{transform:scaleX(var(--p))}}

/* Registrar */
.mk-form{display:grid;gap:14px;max-width:460px}
.mk-campo span{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px}
.mk-input{display:flex;align-items:baseline;gap:8px;padding:12px 14px;border-radius:12px;background:var(--control);border:2px solid var(--acento)}
.mk-input small{color:var(--texto-2);font-weight:600}
.mk-input b{font-size:1.6rem;letter-spacing:-0.01em;min-width:1ch}
.cursor{width:2px;height:1.4em;background:var(--acento);align-self:center;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.mk-chips{display:flex;flex-wrap:wrap;gap:8px}
.mk-chip{padding:8px 12px;border-radius:10px;border:1px solid var(--borde-control);background:var(--control);font-weight:500;font-size:.85rem;transition:background-color 250ms ease,border-color 250ms ease,transform 160ms var(--salida)}
.mk-chip.on{background:var(--acento-suave);border-color:var(--acento);transform:scale(1.04)}
.mk-atajos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.8rem}
.mk-atajos small{color:var(--texto-2);font-weight:600;margin-right:4px}
.mk-atajos span{padding:5px 10px;border-radius:999px;background:var(--hundido)}
.mk-guardar{display:flex;justify-content:center;align-items:center;min-height:46px;border-radius:12px;background:var(--primario);color:var(--sobre-primario);font-weight:600;transition:transform 160ms var(--salida),background-color 200ms ease}
.mk-guardar.press{transform:scale(0.97);background:var(--primario-hover)}
.mk-toast{position:absolute;left:50%;bottom:96px;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;font-weight:600;font-size:.85rem;
  background:var(--azul);color:var(--sobre-azul);box-shadow:var(--sombra-flotante);opacity:0;transform:translate(-50%,12px) scale(.96);
  transition:opacity 250ms ease,transform 350ms var(--salida);pointer-events:none}
.mk-toast .ico{color:var(--ingreso-claro)}
.mk-toast.ver{opacity:1;transform:translate(-50%,0) scale(1)}
@container (min-width:720px){.mk-toast{bottom:28px}}

/* Calendario */
.mk-cal-wrap{display:grid;gap:16px}
@container (min-width:720px){.mk-cal-wrap{grid-template-columns:1.4fr 1fr;align-items:start}}
.mk-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:var(--tarjeta);border-radius:var(--radio);padding:12px;box-shadow:var(--sombra)}
.mk-cal .dsem{font-size:.7rem;font-weight:600;color:var(--texto-2);text-align:center;padding:4px 0}
.mk-cal .d{position:relative;height:clamp(34px,7cqi,46px);display:grid;place-items:center;border-radius:10px;font-size:.82rem;font-weight:500}
.mk-cal .d.hoy{background:var(--primario);color:var(--sobre-primario)}
.mk-cal .d i{position:absolute;bottom:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--terracota)}
.mk-cal .d i.in{background:var(--verde)} .mk-cal .d i.pr{background:var(--info)}
.mk-cal .d.hoy i{background:var(--sobre-primario)}
.mk-pant.activa .mk-cal .d{animation:fundir 400ms ease both;animation-delay:calc(var(--n) * 12ms)}
.mk-dia b{font-size:1rem}

/* Recurrentes */
.mk-confirmar{padding:7px 12px;border-radius:10px;background:var(--primario);color:var(--sobre-primario);font-weight:600;font-size:.8rem;transition:transform 160ms var(--salida)}
.mk-confirmar.press{transform:scale(0.95)}
.mk-lista li.prev{background:var(--tarjeta);outline:1px dashed var(--info);outline-offset:-1px}
.mk-lista li.hecho{outline-color:transparent;transition:outline-color 300ms ease}

/* ---------- Cinta ---------- */
.cinta{position:relative;overflow:hidden;padding:22px 0;border-block:1px solid var(--borde);background:var(--tarjeta);
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--texto) 10%,var(--texto) 90%,transparent);mask-image:linear-gradient(90deg,transparent,var(--texto) 10%,var(--texto) 90%,transparent)}
.cinta-pista{display:flex;width:max-content}
.cinta-grupo{display:flex;gap:12px;list-style:none;margin:0;padding:0 6px;animation:cinta 48s linear infinite}
.cinta:hover .cinta-grupo,.cinta.pausada .cinta-grupo{animation-play-state:paused}
.cinta-grupo li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 16px;border-radius:999px;background:var(--fondo);border:1px solid var(--borde);font-weight:500;font-variant-numeric:tabular-nums}
.cinta-grupo b{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;font-size:.85rem}
.cinta-grupo b.g{background:var(--hundido)} .cinta-grupo b.i{background:var(--verde-suave)} .cinta-grupo b.p{background:var(--info-suave)}
.cinta-grupo em{font-style:normal;color:var(--texto-2)}
@keyframes cinta{to{transform:translateX(-100%)}}
.cinta-pausa{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--borde-control);background:var(--control);display:grid;place-items:center;cursor:pointer}

/* ---------- Tambor ---------- */
.tambor-sec{position:relative;height:340vh}
.tambor-fijo{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 16px 40px;text-align:center;overflow:hidden}
.t-sec{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.02;letter-spacing:-0.03em}
.t-sec.centro{text-align:center}
.tenue{color:var(--texto-2)}
.tambor{--lh:1.18em;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,6.4vw,4.6rem);letter-spacing:-0.035em;
  height:calc(var(--lh) * 5);overflow:hidden;width:100%;margin-top:clamp(20px,5vh,48px);position:relative;
  -webkit-mask-image:linear-gradient(transparent,var(--texto) 30%,var(--texto) 70%,transparent);mask-image:linear-gradient(transparent,var(--texto) 30%,var(--texto) 70%,transparent)}
.tambor::before{content:"";position:absolute;left:0;right:0;top:calc(var(--lh) * 2);height:var(--lh);border-block:1px solid var(--borde);
  background:linear-gradient(90deg,transparent,var(--acento-suave),transparent);pointer-events:none}
.tambor-rueda{padding-top:calc(var(--lh) * 2);transform:translateY(calc(var(--i,0) * var(--lh) * -1));transition:transform 650ms var(--cajon)}
.tambor-rueda span{display:block;height:var(--lh);line-height:var(--lh);white-space:nowrap;color:var(--texto-2);opacity:.28;transform:scale(.86);
  transition:opacity 450ms ease,transform 650ms var(--cajon),color 450ms ease}
.tambor-rueda span[data-d="1"]{opacity:.5;transform:scale(.93)}
.tambor-rueda span[data-d="0"]{opacity:1;transform:none;color:var(--acento)}
.tambor-desc{max-width:32em;color:var(--texto-2);font-size:1.1rem;margin-top:clamp(16px,4vh,36px);min-height:3.4em;transition:opacity 250ms ease}
.tambor-desc.cambiando{opacity:0}
.tambor-pie{margin-top:16px;font-size:.85rem;color:var(--texto-2);font-variant-numeric:tabular-nums}
.tambor-pie span{color:var(--acento);font-weight:700}
@media (max-width:600px){.antes-grid .comparar{aspect-ratio:4/5}}

/* ---------- Bloques ---------- */
.bloque{padding:clamp(80px,12vw,140px) 0}
.bloque.hundido{background:var(--hundido)}
.bajada-c{color:var(--texto-2);font-size:1.12rem;max-width:34em;margin-top:18px}

/* Antes / ahora */
.antes-grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.antes-grid{grid-template-columns:.8fr 1.2fr;gap:64px}}
.corte-etq{display:block;margin-top:32px;font-weight:600;font-size:.9rem}
#corte{width:100%;max-width:320px;margin-top:10px;accent-color:var(--acento);height:44px;cursor:pointer}
.comparar{--x:50;position:relative;border-radius:22px;overflow:hidden;background:var(--tarjeta);box-shadow:var(--sombra-alta);aspect-ratio:4/3.1;touch-action:pan-y;cursor:ew-resize;user-select:none}
.planilla{position:absolute;inset:0;padding:18px;font-family:ui-monospace,Consolas,monospace;font-size:clamp(.62rem,1.5vw,.82rem);color:var(--texto-2);background:var(--tarjeta)}
.pl-fila{display:grid;grid-template-columns:1fr 1.7fr 1.2fr 1.2fr;border-bottom:1px solid var(--borde)}
.pl-fila span{padding:8px 6px;border-right:1px solid var(--borde);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pl-cab{background:var(--hundido);font-weight:700;color:var(--texto)}
.pl-err{color:var(--terracota);font-weight:700}
.ahora{position:absolute;inset:0;padding:clamp(16px,3vw,28px);background:var(--fondo);display:flex;flex-direction:column;justify-content:center;gap:8px;
  clip-path:inset(0 0 0 calc(var(--x) * 1%))}
.mk-resumen.grande strong{font-size:clamp(1.6rem,4vw,2.4rem)}
.ahora .mk-barras{background:var(--tarjeta);padding:16px;border-radius:var(--radio);box-shadow:var(--sombra)}
.divisor{position:absolute;top:0;bottom:0;left:calc(var(--x) * 1%);width:2px;margin-left:-1px;background:var(--acento)}
.divisor span{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--acento);box-shadow:var(--sombra-flotante)}
.divisor span::before,.divisor span::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border:solid var(--sobre-primario);border-width:0 0 2px 2px}
.divisor span::before{left:9px;transform:rotate(45deg)} .divisor span::after{right:9px;transform:rotate(-135deg)}
.etq{position:absolute;top:14px;padding:4px 12px;border-radius:999px;font-size:.78rem;font-weight:700;background:var(--azul);color:var(--sobre-azul)}
.etq-izq{left:14px}.etq-der{right:14px}

/* Bento de privacidad */
.bento{display:grid;gap:14px;margin-top:48px}
@media (min-width:760px){.bento{grid-template-columns:repeat(2,1fr)}.b-grande{grid-row:span 2}.b-ancha{grid-column:1/-1}}
@media (min-width:1040px){.bento{grid-template-columns:1.25fr 1fr 1fr}.b-grande{grid-row:span 2}.b-ancha{grid-column:2/4}}
.b-card{background:var(--tarjeta);border-radius:22px;padding:28px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.b-card h3{font-family:var(--display);font-weight:600;font-size:1.4rem;line-height:1.15;letter-spacing:-0.02em}
.b-card p{color:var(--texto-2);margin-top:10px}
.b-ico{width:28px;height:28px;color:var(--acento);margin-bottom:28px}
.b-grande{display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;background:var(--azul);color:var(--sobre-azul)}
.b-grande p{color:var(--sobre-azul-2)}
.b-grande h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.b-candado{position:absolute;top:28px;right:28px;width:120px;height:120px;border-radius:32px;display:grid;place-items:center;
  background:var(--velo-claro);color:var(--ingreso-claro)}
.b-candado .ico{width:56px;height:56px;stroke-width:1.6}
.b-candado::after{content:"";position:absolute;inset:-14px;border-radius:40px;border:1px solid var(--velo-claro)}
.b-ancha{display:grid;gap:24px;align-items:center}
@media (min-width:600px){.b-ancha{grid-template-columns:1fr 1fr}}
.b-ancha .btn{margin-top:18px}
.mini-resumen{background:var(--azul);color:var(--sobre-azul);border-radius:var(--radio);padding:18px 20px;font-variant-numeric:tabular-nums}
.mini-resumen span{font-size:.8rem;color:var(--sobre-azul-2)}
.mini-resumen strong{display:block;font-size:1.6rem;margin:2px 0 8px}
.mini-resumen div{display:flex;gap:16px;font-size:.85rem}
.mini-resumen em{font-style:normal;font-weight:600}
.mini-resumen em:first-child{color:var(--ingreso-claro)} .mini-resumen em:last-child{color:var(--gasto-claro)}
.borrable{display:inline-block;transition:filter 300ms ease,opacity 300ms ease}
.ocultos .borrable{filter:blur(9px);opacity:.7}

/* ---------- Cierre (Google Play) ---------- */
.final{position:relative;isolation:isolate;overflow:hidden;color:var(--marca-texto);text-align:center;
  background:linear-gradient(180deg,var(--oscuro-3) 0%,var(--oscuro-2) 40%,var(--oscuro-1) 100%);padding:clamp(96px,14vw,160px) 16px 0;scroll-margin-top:0}
.final-in{max-width:760px;margin:0 auto}
.app-icono{width:104px;height:104px;margin:0 auto 28px;border-radius:23px;display:grid;place-items:center;
  box-shadow:0 20px 60px -10px var(--marca-brillo),inset 0 0 0 1px var(--velo-claro)}
.app-icono .marca{width:104px;height:104px}
.pastilla.quieta{cursor:default}
.final .bajada{animation:none}

/* Pie */
.pie{max-width:1160px;margin:clamp(96px,12vw,140px) auto 0;padding:40px 0 48px;border-top:1px solid var(--marca-velo);display:grid;gap:32px;text-align:left}
@media (min-width:760px){.pie{grid-template-columns:1.2fr 2fr}}
.pie-marca p{color:var(--marca-texto-2);margin-top:12px;font-size:.92rem}
.pie .logo{color:var(--marca-titulo)}
.pie nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:24px}
.pie nav div{display:flex;flex-direction:column;gap:2px}
.pie nav b{color:var(--marca-titulo);font-size:.9rem;margin-bottom:6px}
.pie nav a{color:var(--marca-texto-2);text-decoration:none;font-size:.92rem;min-height:40px;display:flex;align-items:center;transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){.pie nav a:hover{color:var(--marca-titulo)}}

/* ---------- Aparición al hacer scroll (solo si hay JavaScript) ---------- */
.js .revelar{opacity:0;transform:translateY(24px);transition:opacity 700ms ease,transform 900ms var(--salida)}
.js .revelar.visto{opacity:1;transform:none}
.js .bento .revelar:nth-child(2){transition-delay:60ms}.js .bento .revelar:nth-child(3){transition-delay:120ms}.js .bento .revelar:nth-child(4){transition-delay:180ms}

/* =====================================================================
   PORTADA ANIMADA (noviembre 2026)
   La maqueta cuenta una historia de causa y efecto: se anota un gasto y el Inicio lo refleja.
   Solo se animan transform y opacity.
   ===================================================================== */
/* 1) Entrada: la pastilla aparece, la «sonrisa» se dibuja bajo «calma» y la ventana se asienta */
.portada .pastilla{animation:fundir 700ms ease both}
.calma{position:relative;display:inline-block}
.sonrisa{position:absolute;left:2%;bottom:-.13em;width:96%;height:.2em;overflow:visible;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;
  transform-origin:left center;animation:trazar 800ms var(--salida) 650ms both}
@keyframes trazar{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}
.vitrina{transform-origin:50% 0;animation:asentar 1200ms var(--salida) 250ms both}
@keyframes asentar{from{opacity:0;transform:perspective(1400px) translateY(36px) rotateX(9deg) scale(.96)}to{opacity:1;transform:none}}
/* 2) Un segundo brillo que se pasea muy despacio detrás del titular */
.portada .brillo::after{content:"";position:absolute;left:50%;top:6%;width:640px;height:440px;margin-left:-320px;border-radius:50%;opacity:.55;
  background:radial-gradient(closest-side,var(--marca-brillo),transparent);animation:pasear 26s ease-in-out infinite alternate}
@keyframes pasear{from{transform:translate(-38%,0)}to{transform:translate(38%,10%)}}
/* 3) Números que se animan: el texto real queda para los lectores de pantalla */
.mk-resumen .num{font-size:inherit;color:inherit}
.mk-lista li[hidden]{display:none}
.mk-resumen .mk-delta{position:absolute;right:18px;top:16px;z-index:2;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:700;
  background:var(--velo-claro);color:var(--gasto-claro);opacity:0}
.mk-resumen .mk-delta.ver{animation:delta 2400ms var(--salida) both}
@keyframes delta{0%{opacity:0;transform:translateY(8px)}14%{opacity:1;transform:none}75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
/* 4) El movimiento recién anotado cae arriba de la lista, con un destello suave */
.mk-lista li.nuevo{position:relative}
.mk-lista li.nuevo>*{position:relative}
.mk-lista li.nuevo::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--acento-suave);pointer-events:none;animation:destello 2000ms ease 500ms both}
.mk-pant.activa .ap.nuevo{animation:caer 650ms var(--salida) 250ms both}
@keyframes destello{from{opacity:1}to{opacity:0}}
@keyframes caer{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
/* 5) En el calendario, «hoy» late dos veces cuando hay un gasto recién anotado */
.app-mock.guardado .mk-pant.activa .mk-cal .d.hoy::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--acento);opacity:0;
  animation:onda 1100ms var(--salida) 600ms 2 both}
@keyframes onda{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
/* 6) El «dedo»: muestra dónde se toca. Se mueve solo con transform */
.mk-dedo{position:absolute;left:0;top:0;z-index:3;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;pointer-events:none;opacity:0;
  background:color-mix(in srgb,var(--acento) 26%,transparent);box-shadow:inset 0 0 0 2px var(--acento);
  transition:transform 520ms var(--cajon),opacity 250ms ease}
.mk-dedo.ver{opacity:1}
.mk-dedo::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--acento);opacity:0}
.mk-dedo.toque::after{animation:onda 520ms var(--salida) both}
/* 7) En pantallas angostas el aviso «Gasto guardado» va arriba, para no tapar el botón «Guardar gasto» */
@container (max-width:719px){.mk-toast{bottom:auto;top:58px}}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;animation-delay:0ms !important}
  .js .revelar{transform:none}
  .tambor-rueda,.tambor-rueda span{transition-property:opacity,color}
  .btn:active,.pestanas [role=tab]:active{transform:none}
}
:root[data-movimiento="reducido"]{scroll-behavior:auto}
:root[data-movimiento="reducido"] *,:root[data-movimiento="reducido"] *::before,:root[data-movimiento="reducido"] *::after{animation-duration:1ms !important;animation-iteration-count:1 !important;animation-delay:0ms !important}
:root[data-movimiento="reducido"] .js .revelar,:root[data-movimiento="reducido"].js .revelar{transform:none}
:root[data-movimiento="reducido"] .tambor-rueda,:root[data-movimiento="reducido"] .tambor-rueda span{transition-property:opacity,color}
:root[data-movimiento="reducido"] .btn:active{transform:none}