:root{
  --tinta:#12234A; --papel:#F2F5F8; --blanco:#fff; --linea:#DCE3EC; --tenue:#566079;
  --verde:#4BD67B; --turquesa:#1399AC; --morado:#5A40A5; --lila:#B072DF;
  --gasto:#A8431F; --ingreso:#1F6B55; --compartido:#2B5C8A;
  --marca:linear-gradient(120deg,var(--verde),var(--turquesa) 55%,var(--morado));
  --titulo:'Bricolage Grotesque',system-ui,sans-serif; --texto:'Figtree',system-ui,sans-serif;
}
*{box-sizing:border-box}
img,svg{max-width:100%}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.0625rem/1.6 var(--texto);font-variant-numeric:tabular-nums}
a{color:inherit}
h1,h2{font-family:var(--titulo);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0 0 .6em}
h1{font-size:clamp(2.6rem,7vw,4.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}
p{margin:0 0 1em;max-width:62ch}
b{font-weight:600}
:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px;border-radius:6px}

.cabecera{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem max(16px,4vw);background:color-mix(in srgb,var(--papel) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;font:700 1.4rem var(--titulo);letter-spacing:-.03em}
.cabecera nav{display:flex;align-items:center;gap:1.2rem;font-size:.95rem}
.cabecera nav a{text-decoration:none;color:var(--tenue)}
.cabecera nav a:hover{color:var(--tinta)}
@media(max-width:720px){.cabecera nav a:not(.boton){display:none}}

.boton{display:inline-block;padding:.8rem 1.4rem;border-radius:999px;background:var(--tinta);color:#fff!important;text-decoration:none;font-weight:600;border:0;cursor:pointer;font-family:inherit;font-size:1rem;transition:transform .15s,box-shadow .15s}
.boton:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(18,35,74,.25)}
.boton.chico{padding:.4rem 1rem;font-size:.9rem}
.boton.suave{background:#fff;color:var(--tinta)!important;border:1.5px solid var(--tinta)}
.boton.claro{background:#fff;color:var(--tinta)!important}
.enlace{font-weight:600;margin-left:1.2rem;text-underline-offset:4px}
.enlace.claro{color:#fff}
.acciones{margin:1.6rem 0 .8rem}
.nota{font-size:.92rem;color:var(--tenue)}

.hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(2.5rem,7vw,6rem) max(16px,5vw) clamp(5.5rem,9vw,7.5rem);overflow:hidden}
.hero-texto{position:relative;z-index:1}
.lead{font-size:1.2rem;color:var(--tenue)}
.onda{position:absolute;left:0;right:0;bottom:-14px;width:100%;height:90px;opacity:.9;pointer-events:none}
.onda path{fill:none;stroke:url(#ondaGrad);stroke:var(--turquesa);stroke-width:5;stroke-linecap:round;stroke-dasharray:2600;stroke-dashoffset:2600;animation:trazo 2.6s .3s ease-out forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}}

.demo{position:relative;z-index:1;background:var(--blanco);border:1px solid var(--linea);border-radius:20px;padding:1.2rem 1.2rem 1rem;box-shadow:0 20px 50px -24px rgba(18,35,74,.35)}
.demo-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6rem}
.demo-cab h2{font:600 1rem var(--texto);margin:0;letter-spacing:0}
.mes{font-size:.85rem;color:var(--tenue)}
.arbol,.arbol ul{list-style:none;margin:0;padding:0}
.arbol ul{margin-left:1.1rem;border-left:2px solid var(--linea);padding-left:.4rem}
.nodo>button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.55rem;width:100%;padding:.5rem .5rem;border-radius:10px;cursor:pointer}
.nodo>button:hover{background:var(--papel)}
.nodo>button:focus-visible{outline:3px solid var(--turquesa)}
.caret{width:.7rem;transition:transform .18s;color:var(--tenue);font-size:.8rem}
.nodo.abierto>button .caret{transform:rotate(90deg)}
.nodo.hoja .caret{visibility:hidden}
.nom{flex:1}
.monto{font-weight:600;transition:color .3s,background .3s;padding:0 .3rem;border-radius:6px}
.gasto .monto{color:var(--gasto)} .ingreso .monto{color:var(--ingreso)}
.monto.sube{background:color-mix(in srgb,var(--verde) 35%,transparent)}
.nodo:not(.abierto)>ul{display:none}
.demo .boton{margin-top:.8rem;width:100%}
.demo-pie{font-size:.85rem;color:var(--tenue);margin:.6rem 0 0}

.seccion{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center;padding:clamp(3rem,7vw,6rem) max(16px,5vw);border-top:1px solid var(--linea)}
.seccion.invertida{background:var(--blanco)}
.seccion.invertida .col-texto{order:2}
@media(max-width:860px){.seccion{grid-template-columns:minmax(0,1fr)}.seccion.invertida .col-texto{order:0}}
.col-texto p{color:var(--tenue)} .col-texto p b{color:var(--tinta)}

.ventajas{display:block}
.vs{margin:1.6rem 0 1rem;border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:var(--blanco)}
.vs-fila{display:grid;grid-template-columns:.9fr 1.3fr 1fr;gap:1rem;padding:.9rem 1.2rem;border-top:1px solid var(--linea)}
.vs-fila:first-child{border-top:0}
.vs-fila span:nth-child(2){font-weight:500}
.vs-fila span:nth-child(3){color:var(--tenue)}
.vs-fila span:first-child{color:var(--tenue);font-size:.92rem}
.vs-cab{font:600 .9rem var(--texto)}
.vs-cab span:nth-child(2){color:var(--tinta);font-weight:700;border-bottom:3px solid transparent;border-image:var(--marca) 1;width:max-content}
.vs-fila:not(.vs-cab) span:nth-child(2){border-left:4px solid var(--turquesa);padding-left:.8rem}
@media(max-width:700px){.vs-cab{display:none}.vs-fila{grid-template-columns:1fr;gap:.2rem}.vs-fila span:nth-child(3)::before{content:"Lo habitual: "}}

.mock{max-width:380px;justify-self:center;width:100%;background:var(--blanco);border:1px solid var(--linea);border-radius:26px;padding:1.2rem;box-shadow:0 20px 50px -26px rgba(18,35,74,.4)}
.mock-fila{display:flex;justify-content:space-between;padding:.75rem .9rem;border:1px solid var(--linea);border-radius:12px;margin-bottom:.5rem}
.mock-fila.tenue{border-style:dashed;color:var(--tenue)}
.mock-eti{color:var(--tenue);font-size:.9rem}.mock-val{font-weight:600}
.mock-monto{font:700 2.4rem var(--titulo);text-align:center;margin:1rem 0;color:var(--gasto)}
.mock-monto span{font-size:1.4rem;margin-right:.2rem}
.mock-boton{background:var(--tinta);color:#fff;text-align:center;border-radius:999px;padding:.8rem;font-weight:600}

.rama-comp{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:460px;justify-self:center;width:100%}
.n{padding:.7rem .8rem;border:1.5px solid var(--linea);border-radius:12px;background:var(--papel);font-weight:500;text-align:center}
.n0{grid-column:1/-1;background:var(--tinta);color:#fff;border-color:var(--tinta)}
.n small{display:block;font-size:.72rem;font-weight:500;opacity:.85}
.n.comp{background:color-mix(in srgb,var(--compartido) 12%,#fff);border-color:var(--compartido);color:var(--compartido)}
.n.yo{opacity:.6}
.grupo{display:grid;gap:.5rem;align-content:start}
.grupo .sub{margin-left:.9rem;text-align:left;font-size:.92rem}
.rama-comp{align-items:start}
.roles{margin:1.2rem 0;padding:0}
.roles div{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.6rem 0;border-top:1px solid var(--linea)}
.roles dt{font-weight:600}.roles dd{margin:0;color:var(--tenue)}
@media(max-width:520px){.roles div{grid-template-columns:1fr;gap:0}}

.graf{margin:0;background:var(--blanco);border:1px solid var(--linea);border-radius:20px;padding:1.4rem;max-width:520px;justify-self:center;width:100%}
.migas{font-size:.9rem;color:var(--tenue)}
.barra{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.8rem;align-items:center;margin:.8rem 0;font-size:.92rem}
.barra i{display:block;height:14px;border-radius:99px;width:calc(var(--v) * 1%);min-width:12px;background:var(--marca)}
.barra b{font-weight:600}
@media(max-width:480px){.barra{grid-template-columns:1fr auto}.barra i{grid-column:1/-1;order:3}}
figcaption{font-size:.82rem;color:var(--tenue);margin-top:1rem}

.atajo{max-width:460px;justify-self:center;width:100%}
.dialogo{margin:0 0 .7rem;padding:.7rem 1rem;border-radius:16px;font-size:.95rem}
.dialogo .tu{display:block}
.dialogo:not(.resp){background:var(--papel);border:1px solid var(--linea);border-bottom-left-radius:4px;color:var(--tenue)}
.dialogo.resp{background:var(--tinta);color:#fff;border-bottom-right-radius:4px;margin-left:2rem}
.proximo{border-left:4px solid var(--lila);padding-left:1rem;color:var(--tinta)!important}

.datos{display:block;background:var(--tinta);color:#fff;border-top:0}
.datos ul{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem 2rem}
.datos li{border-top:3px solid var(--turquesa);padding-top:.8rem;color:#d4dcef}
.datos li:nth-child(2){border-color:var(--verde)} .datos li:nth-child(3){border-color:var(--lila)} .datos li:nth-child(4){border-color:var(--morado)}
.datos b{color:#fff;display:block}

.cierre{text-align:left;padding:clamp(3.5rem,8vw,6.5rem) max(16px,5vw);background:var(--marca);color:#fff}
.cierre p{color:#ffffffd9}
.pie{display:flex;justify-content:space-between;padding:1.2rem max(16px,5vw);font-size:.9rem;color:var(--tenue)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.onda path{animation:none;stroke-dashoffset:0}.boton,.caret,.monto{transition:none}}

/* Tutorial de instalación */
.instalar{background:var(--blanco)}
.tel{justify-self:center;width:100%;max-width:300px}
.tel-marco{background:var(--tinta);border-radius:34px;padding:10px;box-shadow:0 24px 50px -22px rgba(18,35,74,.55)}
.tel-pantalla{position:relative;aspect-ratio:9/17;border-radius:25px;background:var(--papel);overflow:hidden;font-size:.78rem}
.escena{position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none}
.tel[data-paso="0"] .e1,.tel[data-paso="1"] .e2,.tel[data-paso="2"] .e3,.tel[data-paso="3"] .e4{opacity:1}
.nav{display:flex;align-items:center;gap:.4rem;margin:.7rem .6rem;padding:.35rem .6rem;border-radius:999px;background:#fff;border:1px solid var(--linea)}
.candado{width:8px;height:8px;border-radius:2px;background:var(--turquesa)}
.url{flex:1;overflow:hidden;white-space:nowrap}
.puntos{font-size:1.1rem;line-height:1;padding:0 .3rem;border-radius:6px}
.puntos.on{background:var(--linea)}
.pag{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:2.4rem 1.4rem}
.pag b{font:700 1.1rem var(--titulo)}
.pag i{display:block;width:100%;height:30px;border-radius:10px;background:#fff;border:1px solid var(--linea)}
.pag i.boton-falso{background:var(--tinta);border-color:var(--tinta)}
.menu-chrome{position:absolute;right:.6rem;top:3.2rem;margin:0;padding:.4rem 0;list-style:none;width:70%;background:#fff;border-radius:12px;box-shadow:0 10px 26px -8px rgba(18,35,74,.45)}
.menu-chrome li{padding:.55rem .9rem}
.menu-chrome .marca-fila{font-weight:600;background:color-mix(in srgb,var(--turquesa) 14%,#fff);animation:late 1.1s ease-in-out infinite}
.dialogo-inst{position:absolute;left:8%;right:8%;top:32%;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.1rem .9rem .8rem;background:#fff;border-radius:18px;box-shadow:0 14px 34px -10px rgba(18,35,74,.5)}
.fila-bot{display:flex;gap:.5rem;width:100%;margin-top:.5rem}
.fila-bot span{flex:1;text-align:center;padding:.5rem;border-radius:999px;border:1px solid var(--linea)}
.fila-bot .si{background:var(--tinta);color:#fff;border-color:var(--tinta);animation:late 1.1s ease-in-out infinite}
.rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem .5rem;padding:2.2rem 1rem 1rem}
.rejilla i{display:block;aspect-ratio:1;border-radius:12px;background:#dde5ee}
.app-nueva{grid-column:1;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.app-nueva img{border-radius:12px;background:#fff}
.app-nueva small{font-size:.62rem}
.tel[data-paso="3"] .app-nueva{animation:aparece .6s cubic-bezier(.2,1.4,.4,1) both}
.accesos{position:absolute;left:1rem;bottom:3.4rem;margin:0;padding:.35rem 0;list-style:none;background:#fff;border-radius:12px;box-shadow:0 10px 26px -8px rgba(18,35,74,.45);opacity:0}
.accesos li{padding:.45rem .9rem}
.tel[data-paso="3"] .accesos{animation:menu-sube .5s 1.3s ease-out both}
@keyframes late{50%{transform:scale(1.04)}}
@keyframes aparece{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes menu-sube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.pestanas{display:inline-flex;margin:.4rem 0 1rem;padding:3px;border-radius:999px;background:var(--papel);border:1px solid var(--linea)}
.pestanas button{all:unset;cursor:pointer;padding:.45rem 1.1rem;border-radius:999px;font-weight:600;font-size:.95rem;color:var(--tenue)}
.pestanas button[aria-selected="true"]{background:var(--tinta);color:#fff}
.pestanas button:focus-visible{outline:3px solid var(--turquesa)}
.pasos{margin:0 0 1rem;padding:0;list-style:none;counter-reset:paso}
.pasos[hidden]{display:none}
.pasos li{counter-increment:paso;position:relative;padding-left:2.6rem;margin-bottom:.4rem}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:.55rem;width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;font:600 .9rem var(--texto);background:var(--papel);border:1.5px solid var(--linea);color:var(--tenue)}
.pasos button,.pasos li>div{all:unset;box-sizing:border-box;display:block;width:100%;padding:.5rem .7rem;border-radius:12px;cursor:default}
.pasos button{cursor:pointer}
.pasos button:hover{background:var(--papel)}
.pasos button:focus-visible{outline:3px solid var(--turquesa)}
.pasos b{display:block;color:var(--tinta)}
.pasos span{display:block;color:var(--tenue);font-size:.95rem}
.pasos li.activo::before{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.pasos li.activo button{background:var(--papel)}
.direccion{font-weight:600;color:var(--tinta)!important;display:inline!important}
@media(prefers-reduced-motion:reduce){.escena{transition:none}.menu-chrome .marca-fila,.fila-bot .si{animation:none}.tel[data-paso="3"] .app-nueva,.tel[data-paso="3"] .accesos{animation:none;opacity:1}}

.billu-hero{position:absolute;right:14px;top:-98px;width:120px;height:auto;pointer-events:none}
@media(max-width:900px){.billu-hero{width:96px;top:-78px}}

/* Escenas del iPhone */
.pag--ios{padding-top:3rem}
.safari{position:absolute;left:0;right:0;bottom:0;padding:.5rem .6rem .8rem;background:rgba(255,255,255,.92);border-top:1px solid var(--linea)}
.pildora{margin:0 auto .5rem;width:88%;text-align:center;padding:.4rem;border-radius:12px;background:var(--papel);font-size:.72rem}
.iconos-sf{display:flex;justify-content:space-around;align-items:center;color:var(--tenue);font-size:1.05rem}
.iconos-sf .compartir{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--turquesa)}
.iconos-sf .compartir.on{animation:late 1.1s ease-in-out infinite;background:color-mix(in srgb,var(--turquesa) 14%,#fff)}
.hoja-ios{position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem 1rem;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px -10px rgba(18,35,74,.45)}
.tel[data-paso="1"] .hoja-ios{animation:hoja-sube .5s ease-out both}
.hoja-cab{display:flex;align-items:center;gap:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--linea)}
.hoja-cab small{font-weight:400;color:var(--tenue)}
.hoja-ios ul{margin:.3rem 0 0;padding:0;list-style:none}
.hoja-ios li{padding:.55rem .3rem;border-bottom:1px solid var(--separador,#eef1f5)}
.hoja-ios .marca-fila{font-weight:600;background:color-mix(in srgb,var(--turquesa) 14%,#fff);border-radius:8px;animation:late 1.1s ease-in-out infinite}
.dialogo-ios{position:absolute;left:0;right:0;top:12%;bottom:0;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px -10px rgba(18,35,74,.45)}
.tel[data-paso="2"] .dialogo-ios{animation:hoja-sube .5s ease-out both}
.barra-ios{display:flex;justify-content:space-between;align-items:center;padding:.8rem .8rem;border-bottom:1px solid var(--linea);font-size:.74rem}
.barra-ios .si{font-weight:700;color:var(--turquesa);animation:late 1.1s ease-in-out infinite}
.cuerpo-ios{display:flex;align-items:center;gap:.7rem;margin:.9rem .8rem;padding:.6rem;border-radius:12px;background:var(--papel)}
.cuerpo-ios img{border-radius:10px;background:#fff}
@keyframes hoja-sube{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.iconos-sf .compartir.on,.hoja-ios .marca-fila,.barra-ios .si{animation:none}.tel[data-paso="1"] .hoja-ios,.tel[data-paso="2"] .dialogo-ios{animation:none}}

/* Redes sociales */
.redes-lista{list-style:none;margin:0;padding:0;display:grid;gap:1rem;width:100%;max-width:420px;justify-self:center}
.red{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;border-radius:18px;background:var(--blanco);border:1.5px solid var(--linea);text-decoration:none;color:var(--tinta);transition:transform .15s,border-color .15s,box-shadow .15s}
.red:hover{transform:translateY(-2px);border-color:var(--turquesa);box-shadow:0 14px 30px -18px rgba(18,35,74,.45)}
.red svg{flex:none;color:var(--turquesa)}
.red b{display:block;font:700 1.15rem var(--titulo)}
.red small{color:var(--tenue);font-size:.92rem}
.pie-redes{display:flex;gap:1.2rem}
.pie a{color:var(--tenue)} .pie a:hover{color:var(--tinta)}
@media(prefers-reduced-motion:reduce){.red{transition:none}}
@media(max-width:560px){.pie{flex-wrap:wrap;gap:.6rem 1.2rem}}