:root{
    --azul:#00ade1; --turquesa:#00cdc7; --verde:#00f5a6;
    --noche:#21214f; --gris:#4b5160; --papel:#f2f7fa; --blanco:#ffffff;
    --linea:rgba(33,33,79,.10); --linea-noche:rgba(255,255,255,.14);
    --sombra:0 18px 40px -22px rgba(33,33,79,.45);
    --radio:18px; --max:1180px;
    --display:"Archivo",system-ui,sans-serif;
    --texto:"Instrument Sans",system-ui,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,monospace;
    --degradado:linear-gradient(100deg,var(--azul) 0%,var(--turquesa) 52%,var(--verde) 100%);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--papel);color:var(--noche);font-family:var(--texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  ul{margin:0;padding:0;list-style:none}
  .env{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}

  h1,h2,h3{font-family:var(--display);font-variation-settings:"wdth" 118;letter-spacing:-.022em;line-height:1.04;margin:0;text-wrap:balance}
  h1{font-weight:800;font-size:clamp(2.25rem,6vw,4.2rem)}
  h2{font-weight:800;font-size:clamp(1.7rem,4vw,2.8rem)}
  h3{font-weight:700;font-size:1.1rem;font-variation-settings:"wdth" 110;letter-spacing:-.01em}
  p{margin:0}

  .rotulo{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.20em;text-transform:uppercase;color:var(--azul);display:block;margin-bottom:16px}
  .rotulo--claro{color:var(--verde)}
  :focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--texto);font-size:.97rem;font-weight:600;padding:13px 24px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;white-space:nowrap}
  .btn--principal{background:var(--degradado);color:var(--noche);box-shadow:0 12px 26px -14px rgba(0,173,225,.9)}
  .btn--principal:hover{transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(0,205,199,.95)}
  .btn--linea{border-color:var(--linea);color:var(--noche);background:transparent}
  .btn--linea:hover{border-color:var(--azul);color:var(--azul)}
  .btn--fantasma{border-color:var(--linea-noche);color:#fff;background:rgba(255,255,255,.04)}
  .btn--fantasma:hover{background:rgba(255,255,255,.12)}
  .btn--grande{padding:16px 32px;font-size:1.03rem}
  .btn--noche{background:var(--noche);color:#fff}
  .btn--noche:hover{transform:translateY(-2px)}
  .btn--claro{background:rgba(255,255,255,.92);color:var(--noche)}
  .btn--claro:hover{background:#fff;transform:translateY(-2px)}

  .barra{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--linea)}
  .barra__caja{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px}
  .barra__logo img{height:34px;width:auto}
  .barra__acciones{display:flex;align-items:center;gap:10px}
  .barra__menu{display:none;gap:26px;font-size:.93rem;font-weight:500;color:var(--gris)}
  .barra__menu a:hover{color:var(--azul)}
  @media(min-width:1040px){.barra__menu{display:flex}}

  /* Hero */
  .hero{position:relative;overflow:hidden;background:var(--noche);color:#fff;padding:clamp(58px,9vw,100px) 0 clamp(72px,10vw,112px)}
  .hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;pointer-events:none}
  .hero::before{width:520px;height:520px;background:var(--azul);top:-220px;left:-160px}
  .hero::after{width:460px;height:460px;background:var(--verde);bottom:-260px;right:-140px;opacity:.30}
  .hero__caja{position:relative;z-index:2;display:grid;gap:clamp(40px,6vw,66px);align-items:center}
  @media(min-width:1000px){.hero__caja{grid-template-columns:1.05fr .95fr}}
  .hero h1 .destacado{background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero__bajada{margin-top:22px;max-width:32em;font-size:clamp(1rem,2vw,1.16rem);color:rgba(255,255,255,.78)}
  .hero__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
  .hero__nota{margin-top:22px;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:rgba(255,255,255,.5)}

  .extracto{background:rgba(255,255,255,.055);border:1px solid var(--linea-noche);border-radius:22px;padding:24px 22px 20px;backdrop-filter:blur(6px)}
  .extracto__cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px dashed rgba(255,255,255,.20)}
  .extracto__titulo{font-family:var(--display);font-weight:700;font-size:1rem;font-variation-settings:"wdth" 108}
  .extracto__mes{font-family:var(--mono);font-size:.7rem;color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase}
  .extracto__grupo{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:16px 0 2px}
  .extracto__lineas li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem;color:rgba(255,255,255,.78)}
  .extracto__lineas b{font-family:var(--mono);font-weight:500;color:#fff;font-size:.92rem;white-space:nowrap}
  .extracto__total{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.20)}
  .extracto__total span{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--mono);color:rgba(255,255,255,.55)}
  .extracto__total b{font-family:var(--mono);font-size:clamp(1.4rem,3.4vw,1.85rem);font-weight:600;background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent}
  .extracto__pie{margin-top:12px;font-size:.72rem;color:rgba(255,255,255,.45);line-height:1.5}

  .seccion{padding:clamp(58px,8vw,98px) 0}
  .seccion--clara{background:var(--blanco)}
  .seccion--noche{background:var(--noche);color:#fff}
  .seccion__intro{max-width:680px;margin-bottom:clamp(34px,5vw,52px)}
  .seccion__intro p{margin-top:16px;color:var(--gris);font-size:1.05rem}
  .seccion--noche .seccion__intro p{color:rgba(255,255,255,.72)}

  /* Marcador de parte 1 / parte 2 */
  .parte{display:flex;align-items:center;gap:16px;margin-bottom:20px}
  .parte__num{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 120;font-size:2.6rem;line-height:1;letter-spacing:-.04em;color:var(--azul);opacity:.9}
  .seccion--noche .parte__num{color:var(--verde)}
  .parte__txt{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);line-height:1.5}
  .seccion--noche .parte__txt{color:rgba(255,255,255,.6)}
  .parte__txt b{display:block;color:var(--noche);font-weight:600;font-size:.82rem;letter-spacing:.12em}
  .seccion--noche .parte__txt b{color:#fff}

  /* Pasos */
  .pasos{display:grid;gap:2px;background:var(--linea);border:1px solid var(--linea);border-radius:20px;overflow:hidden}
  @media(min-width:760px){.pasos{grid-template-columns:repeat(4,1fr)}}
  .paso{background:var(--blanco);padding:28px 24px 32px}
  .paso__num{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.1em;color:var(--azul);display:block;margin-bottom:18px}
  .paso h3{margin-bottom:10px}
  .paso p{font-size:.94rem;color:var(--gris)}
  .paso--destacado{background:linear-gradient(170deg,rgba(0,173,225,.08),rgba(0,245,166,.05))}

  .subtitulo-bloque{margin:42px 0 20px;display:flex;align-items:center;gap:14px}
  .subtitulo-bloque span{font-family:var(--mono);font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
  .subtitulo-bloque i{flex:1;height:1px;background:var(--linea);display:block}
  .seccion--noche .subtitulo-bloque span{color:rgba(255,255,255,.6)}
  .seccion--noche .subtitulo-bloque i{background:var(--linea-noche)}

  /* Servicios */
  .servicios{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
  .servicio{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:22px 20px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
  .servicio:hover{transform:translateY(-4px);border-color:rgba(0,205,199,.6);box-shadow:var(--sombra)}
  .servicio svg{width:26px;height:26px;stroke:var(--azul);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .servicio h3{margin:15px 0 6px;font-size:.99rem}
  .servicio p{font-size:.87rem;color:var(--gris);line-height:1.5}

  /* Ganar gratis */
  .gratis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .gratis__item{border:1px dashed rgba(0,173,225,.45);background:linear-gradient(160deg,rgba(0,173,225,.06),rgba(0,245,166,.04));border-radius:var(--radio);padding:22px 20px}
  .gratis__item svg{width:26px;height:26px;stroke:var(--azul);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
  .gratis__item h3{margin-bottom:6px;font-size:.99rem}
  .gratis__item p{font-size:.87rem;color:var(--gris);line-height:1.5}
  .aviso{margin-top:26px;padding:18px 22px;border-radius:16px;background:rgba(33,33,79,.05);border-left:3px solid var(--noche);font-size:.93rem;color:var(--gris)}

  /* Premium */
  .premium{display:grid;gap:clamp(26px,5vw,50px)}
  @media(min-width:960px){.premium{grid-template-columns:.88fr 1.12fr;align-items:start}}
  .precio{border:1px solid var(--linea-noche);border-radius:24px;padding:32px 28px;background:linear-gradient(160deg,rgba(0,173,225,.16),rgba(0,245,166,.07))}
  .precio__cifra{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 120;font-size:clamp(2.4rem,7vw,3.4rem);line-height:1;letter-spacing:-.03em}
  .precio__periodo{display:block;margin-top:10px;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:rgba(255,255,255,.62);text-transform:uppercase}
  .precio__req{margin-top:22px;padding-top:20px;border-top:1px dashed rgba(255,255,255,.22);font-size:.93rem;color:rgba(255,255,255,.78)}
  .precio__req b{color:#fff}
  .precio .btn{margin-top:24px;width:100%}
  .beneficios{display:grid;gap:2px;background:var(--linea-noche);border:1px solid var(--linea-noche);border-radius:20px;overflow:hidden}
  @media(min-width:640px){.beneficios{grid-template-columns:1fr 1fr}}
  .beneficio{background:var(--noche);padding:24px 22px}
  .beneficio h3{color:#fff;margin-bottom:8px}
  .beneficio p{font-size:.92rem;color:rgba(255,255,255,.68)}
  .beneficio__marca{display:inline-block;width:26px;height:2px;border-radius:2px;background:var(--degradado);margin-bottom:16px}
  .beneficio__dato{font-family:var(--mono);font-size:.78rem;color:var(--verde);display:block;margin-top:10px}

  /* Simulador */
  .sim{display:grid;gap:clamp(24px,4vw,42px);background:var(--blanco);border:1px solid var(--linea);border-radius:26px;padding:clamp(22px,4vw,40px);box-shadow:var(--sombra)}
  @media(min-width:920px){.sim{grid-template-columns:.95fr 1.05fr}}
  .grupo{border:1px solid var(--linea);border-radius:18px;padding:22px 20px;margin-bottom:18px}
  .grupo--gratis{background:rgba(0,173,225,.04);border-color:rgba(0,173,225,.30)}
  .grupo--premium{background:rgba(33,33,79,.035)}
  .grupo__tit{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:18px}
  .pastilla{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:99px;background:var(--noche);color:#fff}
  .pastilla--gratis{background:var(--azul)}
  .modo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:16px;border:1.5px solid var(--linea);background:var(--blanco);margin-bottom:20px;transition:border-color .2s ease,background .2s ease}
  .modo--on{border-color:rgba(0,205,199,.55);background:linear-gradient(120deg,rgba(0,173,225,.07),rgba(0,245,166,.05))}
  .modo__txt b{display:block;font-size:.98rem;font-weight:600}
  .modo__txt span{font-size:.82rem;color:var(--gris)}
  .switch{position:relative;flex:none;width:56px;height:32px;cursor:pointer}
  .switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
  .switch i{position:absolute;inset:0;border-radius:99px;background:#c9d3da;transition:background .22s ease}
  .switch i::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(33,33,79,.3);transition:transform .22s ease}
  .switch input:checked + i{background:linear-gradient(100deg,var(--azul),var(--verde))}
  .switch input:checked + i::after{transform:translateX(24px)}
  .switch input:focus-visible + i{outline:3px solid var(--azul);outline-offset:3px}
  .oculto{display:none!important}
  .apagado{opacity:.42;pointer-events:none;filter:saturate(.3)}
  .campo{margin-bottom:18px}
  .campo:last-child{margin-bottom:0}
  .campo label{display:block;font-size:.9rem;font-weight:600;margin-bottom:3px}
  .campo small{display:block;color:var(--gris);font-size:.8rem;margin-bottom:9px;line-height:1.45}
  .campo__caja{display:flex;align-items:center;gap:8px;border:1.5px solid var(--linea);border-radius:14px;padding:4px 6px 4px 13px;background:#fff;transition:border-color .18s ease}
  .campo__caja:focus-within{border-color:var(--azul)}
  .campo__pre{font-family:var(--mono);font-size:.93rem;color:var(--gris)}
  .campo__caja input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--mono);font-size:1.02rem;font-weight:600;color:var(--noche);padding:10px 0;outline:none;-moz-appearance:textfield}
  .campo__caja input::-webkit-outer-spin-button,.campo__caja input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .campo__paso{border:none;background:var(--noche);color:#fff;width:32px;height:32px;border-radius:10px;font-size:1.05rem;line-height:1;cursor:pointer;flex:none;transition:background .18s ease}
  .campo__paso:hover{background:var(--azul)}
  input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:99px;background:linear-gradient(90deg,var(--azul),var(--verde));outline:none;cursor:pointer;margin:13px 0 0}
  input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--azul);box-shadow:0 6px 14px -4px rgba(0,173,225,.8);cursor:grab}
  input[type="range"]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--azul);cursor:grab}

  .desglose{background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:24px 22px}
  .desglose__grupo{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gris);margin:22px 0 2px}
  .desglose__grupo:first-child{margin-top:0}
  .desglose ul li{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--linea);font-size:.91rem}
  .desglose ul li em{font-style:normal;color:var(--gris);display:block;font-size:.77rem;margin-top:3px}
  .desglose ul li b{font-family:var(--mono);font-weight:600;white-space:nowrap;font-size:.95rem}
  .desglose li.resta b{color:var(--gris)}
  .subtotal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0 0;font-size:.88rem;color:var(--gris)}
  .subtotal b{font-family:var(--mono);font-size:1.02rem;color:var(--noche)}
  .desglose__total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:20px;padding-top:18px;border-top:2px solid var(--noche)}
  .desglose__total span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
  .desglose__total b{font-family:var(--mono);font-weight:600;font-size:clamp(1.6rem,4.5vw,2.4rem);line-height:1;background:linear-gradient(100deg,var(--azul),var(--turquesa) 55%,var(--verde));-webkit-background-clip:text;background-clip:text;color:transparent}
  .desglose__anual{margin-top:12px;font-size:.86rem;color:var(--gris)}
  .desglose__anual b{font-family:var(--mono);color:var(--noche)}
  .meses{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:20px}
  .mes{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:12px 4px 10px;text-align:center}
  .mes span{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--gris);text-transform:uppercase}
  .mes b{display:block;margin-top:7px;font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--noche)}
  .mes--activo{background:rgba(0,245,166,.10);border-color:rgba(0,205,199,.45)}
  .nota-lateral{margin-top:16px;font-size:.88rem;color:var(--gris);padding-left:14px;border-left:3px solid var(--verde)}

  .duo{display:grid;gap:clamp(26px,4vw,44px)}
  @media(min-width:900px){.duo{grid-template-columns:1fr 1fr;align-items:center}}
  .tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:24px;padding:clamp(24px,4vw,36px);box-shadow:var(--sombra)}
  .lista-check li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--linea);font-size:.97rem}
  .lista-check li:last-child{border-bottom:none}
  .lista-check svg{flex:none;width:20px;height:20px;margin-top:2px;stroke:var(--turquesa);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .lista-check b{display:block;font-weight:600}
  .lista-check span{color:var(--gris);font-size:.89rem}

  .comparar{display:grid;gap:16px}
  @media(min-width:900px){.comparar{grid-template-columns:1fr 1fr;align-items:start}}
  .ref-card{background:var(--blanco);border:1px solid var(--linea);border-radius:24px;padding:clamp(24px,3.5vw,34px);box-shadow:var(--sombra)}
  .ref-card--negocio{background:linear-gradient(165deg,rgba(0,173,225,.06),rgba(0,245,166,.04));border-color:rgba(0,205,199,.4)}
  .ref-card__tipo{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--azul);display:block;margin-bottom:12px}
  .ref-card h3{font-size:1.22rem;margin-bottom:16px;font-variation-settings:"wdth" 114}
  .ref-card .lista-check svg{stroke:var(--turquesa)}
  .banda{border:1px solid var(--linea);border-radius:24px;padding:clamp(26px,5vw,44px);background:linear-gradient(140deg,rgba(0,173,225,.10),rgba(0,245,166,.08));text-align:center}
  .banda h2{max-width:18em;margin:0 auto}
  .banda p{max-width:38em;margin:18px auto 0;color:var(--gris)}

  .cierre{position:relative;overflow:hidden;border-radius:28px;background:var(--degradado);color:var(--noche);padding:clamp(40px,7vw,72px) clamp(24px,5vw,56px);text-align:center}
  .cierre h2{max-width:16em;margin:0 auto}
  .cierre p{max-width:34em;margin:20px auto 0;color:rgba(33,33,79,.78)}
  .cierre__acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}

  .pie{background:var(--noche);color:rgba(255,255,255,.62);padding:52px 0 36px;font-size:.89rem}
  .pie__caja{display:grid;gap:24px;align-items:center}
  @media(min-width:780px){.pie__caja{grid-template-columns:auto 1fr;gap:36px}}
  .pie__logo{background:#fff;border-radius:14px;padding:12px 16px;display:inline-block;justify-self:start}
  .pie__logo img{height:28px;width:auto}
  .pie__legal{margin-top:24px;padding-top:20px;border-top:1px solid var(--linea-noche);font-size:.77rem;color:rgba(255,255,255,.42);line-height:1.6}
  .pie a:hover{color:var(--verde)}

  .revelar{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
  .revelar.visible{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.revelar{opacity:1;transform:none}}

@media(max-width:400px){
  .barra__caja{height:64px;gap:8px}
  .barra__logo img{height:28px}
  .barra__acciones{gap:6px}
  .barra__acciones .btn{padding:9px 12px;font-size:.78rem}
  .barra__acciones .btn--linea{display:none}
}
