:root{--teal:#3D8A84;--act:#2A726C}
html{scroll-behavior:smooth}
section[id],#top{scroll-margin-top:52px}
.cs-root{width:100%;background:#FFFFFF;color:#1D1D1F;overflow-x:clip}
/* Tokens: CuentaSimples design system (tema claro) */
body{margin:0;background:#FFFFFF;font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#2A726C;text-decoration:none}a:hover{color:#1F5651}
img{display:block;max-width:100%}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* Device frame */
/* iPhone: marco de titanio, bisel negro, Dynamic Island y botón lateral */
.dev{position:relative;padding:3px;border-radius:50px;background:linear-gradient(145deg,#5B5B60 0%,#2C2C2E 22%,#48484A 50%,#2C2C2E 78%,#5B5B60 100%);box-shadow:0 50px 80px -40px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.18);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.dev::before{content:"";position:absolute;left:50%;top:calc(12px + 1.1%);width:31%;aspect-ratio:3.4/1;transform:translateX(-50%);background:#000000;border-radius:999px;z-index:2}
.dev::after{content:"";position:absolute;right:-2.5px;top:25%;width:3px;height:10%;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#2C2C2E,#5B5B60)}
.dev img,.dev video{display:block;width:100%;height:auto;aspect-ratio:540/1046;object-fit:cover;border:9px solid #050505;border-radius:47px;background:#F5F5F7}
.dev-sm{border-radius:44px}.dev-sm img,.dev-sm video{border-width:8px;border-radius:41px}
.dev-sm::before{top:calc(11px + 1.1%)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:700;transition:background-color .2s}
.btn-act{background:var(--act);color:#FFFFFF}
.btn-act:hover{background:#1F5651;color:#FFFFFF}
.btn-white{background:#FFFFFF;color:#2A726C}
.btn-white:hover{background:#EAF4F3;color:#1F5651}
.lnk{display:inline-flex;align-items:center;gap:4px;color:var(--act);font-weight:500}
.lnk:hover{text-decoration:underline}
.navlink{color:#1D1D1F;font-size:13px;font-weight:500;opacity:.8}
.navlink:hover{color:#1D1D1F;opacity:1}

/* Section label (estilo `section` del sistema) */
.sec{font-size:13px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:#6E6E73}

/* Icon tile (cs-tile) */
.tile-ic{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#3D8A84,#2A726C);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
.s3 .t-row .t-text{width:44%}
.t{position:relative;overflow:hidden;border-radius:26px;min-height:600px;padding:44px 44px 0;display:flex;flex-direction:column;gap:10px;background:#FFFFFF}
.t-row{flex-direction:row;gap:40px;padding:44px}
.t-row .t-text{width:38%;flex-shrink:0;justify-content:flex-end}
.t-text{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.t-media{position:relative;flex:1;min-height:340px;margin:20px -44px 0;overflow:hidden}
.t-row .t-media{margin:-44px -44px -44px 0}
.t:hover .dev{transform:translateY(-10px)}

/* Motion */
@keyframes csUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes csRise{from{opacity:0;transform:translateY(140px)}to{opacity:1;transform:none}}
@keyframes csSpreadL{from{opacity:0;transform:translate(150px,140px)}to{opacity:1;transform:none}}
@keyframes csSpreadR{from{opacity:0;transform:translate(-150px,140px)}to{opacity:1;transform:none}}
@keyframes csReveal{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes csTile{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1;transform:none}}
.anim .a-up{animation:csUp 1.1s cubic-bezier(.16,1,.3,1) both}
.anim .a-rise{animation:csRise 1.6s cubic-bezier(.16,1,.3,1) .35s both}
.anim .a-spl{animation:csSpreadL 1.8s cubic-bezier(.16,1,.3,1) .55s both}
.anim .a-spr{animation:csSpreadR 1.8s cubic-bezier(.16,1,.3,1) .55s both}
.anim .d1{animation-delay:.08s}.anim .d2{animation-delay:.16s}.anim .d3{animation-delay:.24s}
@supports (animation-timeline: view()){
  .anim .rv{animation:csReveal linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .anim .tile{animation:csTile linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
@media (prefers-reduced-motion:reduce){.anim *{animation:none!important;transition:none!important}}

/* Hero phones */
.hp-wrap{position:relative;height:540px;overflow:hidden}
.hp{position:absolute;left:50%;top:0;width:900px;margin-left:-450px;height:700px}
.hp-c{position:absolute;left:50%;top:0;width:310px;margin-left:-155px;z-index:3}
.hp-l{position:absolute;left:50%;top:90px;width:260px;margin-left:-395px;z-index:1}
.hp-r{position:absolute;left:50%;top:90px;width:260px;margin-left:135px;z-index:2}

@media(max-width:900px){
  .cs-nav-links{display:none!important}
  .s2,.s3,.s4,.s6{grid-column:span 6}
  .s3 .t-row .t-text{width:auto}
  .t-row{flex-direction:column;padding:44px 44px 0}
  .t-row .t-text{width:auto}
  .t-row .t-media{margin:20px -44px 0}
  .cs-split{grid-template-columns:1fr!important}
  .cs-split-r{border-left:none!important;padding-left:0!important;border-top:1px solid #E5E5EA;padding-top:32px!important;margin-top:24px}
  .cs-split-l{padding-right:0!important}
}
@media(max-width:640px){
  .hp-wrap{height:340px}
  .hp{transform:scale(.6);transform-origin:top center}
  .t{padding:32px 28px 0;min-height:520px}
  .t-media{margin:20px -28px 0}
  .t-row .t-media{margin:20px -28px 0}
  .cs-pad{padding-left:16px!important;padding-right:16px!important}
}

/* Accesibilidad */
:focus-visible{outline:3px solid #2A726C;outline-offset:2px}
.btn-white:focus-visible{outline-color:#FFFFFF}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:10px 18px;border-radius:999px;background:#2A726C;color:#FFFFFF;font-size:14px;font-weight:700}
.skip:focus{top:12px;color:#FFFFFF}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Reveal por scroll para navegadores sin animation-timeline (lo activa main.js) */
.io .rv,.io .tile{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.io .tile{transform:translateY(60px) scale(.96)}
.io .rv.in,.io .tile.in{opacity:1;transform:none}

/* Páginas legales */
.legal{max-width:720px;margin:0 auto;padding:48px 24px 96px}
.legal-top{display:flex;align-items:center;gap:10px;margin-bottom:56px}
.legal h1{margin:0 0 8px;font-size:clamp(32px,5vw,48px);line-height:1.04;font-weight:800;letter-spacing:-0.04em}
.legal h2{margin:40px 0 8px;font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-0.01em}
.legal p,.legal li{margin:0 0 12px;font-size:17px;line-height:1.6;font-weight:500;color:#6E6E73}
.legal ul{margin:0 0 12px;padding-left:22px}
.legal strong{color:#1D1D1F;font-weight:700}
.legal .upd{font-size:14px}
.legal a{text-decoration:underline}
@media(max-width:640px){.legal{padding:32px 16px 72px}}