@font-face{
  font-family:'Nunito';
  src:url('nunito.woff2') format('woff2-variations');
  font-weight:400 900;
  font-display:swap;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --ink:#0f172a;
  --soft:#55617a;
  --line:#e5eaf1;
  --bg:#ffffff;
  --tint:#f4f7fb;
  --acc:#2563eb;          /* blue-600, el de la app */
  --teal:#14b8a6;
  --acc-soft:#eff6ff;
  --grad:linear-gradient(135deg,#3b82f6 0%,#2dd4bf 100%);   /* from-blue-500 to-teal-400 */
  --grad-hover:linear-gradient(135deg,#2563eb 0%,#14b8a6 100%);
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --shadow-lg:0 30px 70px rgba(15,23,42,.16);
  --r:16px;               /* rounded-2xl de la app */
  --r-sm:12px;            /* rounded-xl de la app */
}

body{
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:200;font-weight:800}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}

h1,h2,h3{letter-spacing:-.02em;line-height:1.14}
.eyebrow{font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font-size:clamp(1.75rem,3.2vw,2.4rem);font-weight:800;margin:10px 0 10px;text-wrap:balance}
.sub{color:var(--soft);max-width:58ch;margin-bottom:44px;text-wrap:pretty}

/* ---------- BOTONES ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--grad);color:#fff;font-weight:800;
  font-size:.95rem;padding:14px 24px;border-radius:var(--r-sm);text-decoration:none;
  box-shadow:0 8px 22px rgba(37,99,235,.24);transition:transform .18s,box-shadow .18s,filter .18s}
.btn:hover{transform:translateY(-2px);background:var(--grad-hover);box-shadow:0 14px 30px rgba(37,99,235,.32)}
.btn:active{transform:translateY(0);box-shadow:0 6px 16px rgba(37,99,235,.22)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 8px rgba(15,23,42,.05)}
.btn.ghost:hover{background:var(--tint);box-shadow:0 8px 20px rgba(15,23,42,.08)}
.plain{font-weight:800;font-size:.94rem;color:var(--acc);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .18s}
.plain:hover{border-color:var(--acc)}
.btn .play{width:20px;height:20px;flex:0 0 auto}
/* chapa oficial de Google Play */
.chapa{display:inline-block;transition:transform .18s,filter .18s}
.chapa img{height:58px;width:auto;display:block}
.chapa:hover{transform:translateY(-2px);filter:brightness(1.07)}

/* ---------- NAV ---------- */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--grad)}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.1rem;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:11px}
.navlinks{display:flex;gap:26px}
.navlinks a{font-weight:700;font-size:.92rem;color:var(--soft);text-decoration:none;transition:color .18s}
.navlinks a:hover{color:var(--ink)}

/* ---------- HERO ---------- */
.hero{padding:76px 0 60px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-260px;right:-180px;width:620px;height:620px;border-radius:50%;
  background:var(--grad);opacity:.09;filter:blur(10px);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.35rem,5vw,3.75rem);font-weight:800;margin-top:16px;text-wrap:balance}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:1.1rem;color:var(--soft);max-width:46ch;margin:20px 0 30px}
.acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.stats{display:flex;gap:36px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.stat b{display:block;font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.83rem;color:var(--soft);font-weight:600}
.shots{position:relative;justify-self:center}
.shots .main{width:248px;border-radius:32px;border:7px solid #dfe5ee;box-shadow:var(--shadow-lg);
  animation:entra .8s cubic-bezier(.2,.7,.3,1) both, flota 7s ease-in-out .8s infinite alternate}
.shots .back{position:absolute;width:188px;left:-98px;top:56px;border-radius:26px;border:6px solid #e8edf4;
  box-shadow:0 22px 46px rgba(15,23,42,.13);z-index:-1;
  animation:entra-lado .9s cubic-bezier(.2,.7,.3,1) .15s both, flota-lado 9s ease-in-out 1.05s infinite alternate}
@keyframes entra{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}
@keyframes flota{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes entra-lado{from{opacity:0;transform:translate(30px,26px) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes flota-lado{from{transform:translateY(0)}to{transform:translateY(-16px)}}
.prueba{display:inline-block;margin-top:6px;font-weight:800;font-size:.8rem;color:var(--acc)}

/* ---------- TIRA DE CONFIANZA ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--tint)}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;padding-top:20px;padding-bottom:20px}
.trust span{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.9rem;color:var(--soft)}
.trust svg{color:#fff;flex:0 0 auto;background:var(--grad);border-radius:50%;padding:4px;width:22px;height:22px}

/* ---------- SECCIONES ---------- */
section{padding:76px 0}
.tinted{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- FUNCIONES (cuatro bloques: montar, enviar, recibir, controlar) ---------- */
.bloques{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bloque{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 28px;
  position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
/* filete de marca a la izquierda, como el borde degradado de los planes */
.bloque::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.bloque:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfe0f7}
/* icono en cajita redondeada, igual que en la app */
.bloque .ico{color:#fff;box-sizing:content-box;width:24px;height:24px;padding:11px;background:var(--grad);
  border-radius:var(--r-sm);display:block;margin-bottom:15px;box-shadow:0 8px 20px rgba(37,99,235,.22)}
.bloque h3{font-size:1.14rem;font-weight:800;margin-bottom:6px}
.bloque>p{font-size:.95rem;color:var(--soft);line-height:1.55}
.bloque ul{list-style:none;margin-top:15px;display:grid;gap:9px}
.bloque li{font-size:.9rem;color:var(--soft);display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.bloque li svg{color:var(--teal);flex:0 0 auto;margin-top:4px}
.ademas{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:30px}
.ademas b{font-size:.78rem;font-weight:800;color:var(--soft);text-transform:uppercase;letter-spacing:.12em}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--tint);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;font-size:.87rem;font-weight:700}
.pill svg{color:var(--teal);flex:0 0 auto}

/* ---------- CAPTURAS ---------- */
.strip{display:flex;gap:20px;overflow-x:auto;padding:6px 0 24px;scrollbar-width:none;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip:active{cursor:grabbing}
.shotcard{flex:0 0 auto;width:196px}
.shotcard img{border-radius:26px;border:6px solid #dfe5ee;box-shadow:0 16px 36px rgba(15,23,42,.12);transition:transform .25s}
.shotcard img:hover{transform:translateY(-6px)}
.shotcard p{font-size:.86rem;color:var(--soft);font-weight:700;margin-top:12px;text-align:center}
.hint{font-weight:700;color:var(--soft);font-size:.85rem}

/* ---------- PASOS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{position:relative;padding-top:18px;border-top:3px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:0;background:var(--grad);color:#fff;
  width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;
  box-shadow:0 6px 16px rgba(37,99,235,.25)}
.step h3{font-size:1rem;font-weight:800;margin:16px 0 5px}
.step p{font-size:.92rem;color:var(--soft)}

/* ---------- PRECIOS ---------- */
.planes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:820px;margin:0 auto}
.plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;display:flex;flex-direction:column}
.plan.destacado{border:2px solid transparent;border-radius:20px;position:relative;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;
  box-shadow:0 20px 44px rgba(37,99,235,.16)}
.plan .tag{position:absolute;top:-13px;left:30px;background:var(--grad);color:#fff;font-weight:800;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px;
  box-shadow:0 6px 16px rgba(37,99,235,.28)}
.plan .nombre{font-weight:800;font-size:.95rem;color:var(--soft)}
.plan .precio{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;margin-top:6px;font-variant-numeric:tabular-nums}
.plan.destacado .precio{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .periodo{font-size:.86rem;color:var(--soft);font-weight:600;min-height:42px}
.plan ul{list-style:none;margin:20px 0 26px;display:grid;gap:11px}
.plan li{display:flex;gap:10px;font-size:.94rem}
.plan li svg{color:var(--teal);flex:0 0 auto;margin-top:4px}
.plan .btn{justify-content:center;margin-top:auto}
.anual{text-align:center;color:var(--soft);font-weight:700;font-size:.92rem;margin-top:26px}
.anual strong{color:var(--ink)}

/* ---------- PREGUNTAS ---------- */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 44px}
.faq h3{font-size:1.02rem;font-weight:800;margin-bottom:6px}
.faq p{font-size:.94rem;color:var(--soft)}
.faq div{padding:18px 0;border-top:1px solid var(--line)}

/* ---------- CIERRE ---------- */
.cierre{background:linear-gradient(135deg,#1d4ed8 0%,#0f766e 100%);color:#fff;text-align:center;border:0}
.cierre h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800;margin-bottom:12px;text-wrap:balance}
.cierre p{color:#dbeafe;max-width:52ch;margin:0 auto 30px}
.cierre .btn{background:#fff;color:#0f172a;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.cierre .btn:hover{background:#eef3ff}

/* ---------- PIE ---------- */
footer{padding:44px 0;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.flinks{display:flex;flex-wrap:wrap;gap:22px}
.flinks a{font-size:.9rem;font-weight:700;color:var(--soft);text-decoration:none}
.flinks a:hover{color:var(--ink)}
.copy{font-size:.85rem;color:var(--soft);width:100%;padding-top:18px;border-top:1px solid var(--line)}

@media(max-width:1080px){
  .bloques{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .shots .back{display:none}
  .bloques{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .planes,.faq{grid-template-columns:1fr}
  .navlinks{display:none}
  section{padding:56px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* Preview: deep blue brand canvas, turquoise actions; 16px panels, pill actions. */
:root{--ink:#102d3b;--soft:#516773;--bg:#f9fbfa;--tint:#edf3f3;--line:#d9e4e5;--acc:#145bc5;--teal:#087d72;--grad:linear-gradient(120deg,#2563eb,#119a94)}
body{background:var(--bg)}
.wrap{max-width:1280px;padding-inline:44px}
header{background:#f9fbfaf5;border:0}header::after{display:none}header .wrap{height:78px;padding-block:0}.brand{font-size:23px;letter-spacing:-1px}.brand img{width:40px;height:40px}.navlinks a{font-size:14px}.btn{border-radius:999px;background:#174fce;box-shadow:none;padding:13px 23px;white-space:nowrap}.btn:hover{background:#123fa8;box-shadow:none}.btn .play{width:17px;height:17px}
.hero{background:#103747;color:#f7fbfa;padding:54px 0 60px;overflow:hidden}.hero::before{display:none}.hero .wrap{grid-template-columns:1.25fr 1fr;gap:60px;min-height:510px}.hero h1{font-size:clamp(44px,5.2vw,68px);line-height:1.03;letter-spacing:-3px;max-width:640px;margin-top:20px;font-weight:800;text-wrap:initial}.hero h1 em{color:#64dbc8;background:none}.hero .lead{color:#c9dbdf;font-size:18px;max-width:40ch;margin:26px 0 32px}.hero .eyebrow{background:none;color:#90d9cf;font-size:12px;letter-spacing:2px}.hero .plain{color:#f6fbfa;border-bottom:1px solid #9bbfc6;padding-block:9px}.hero .chapa img{height:64px}.hero .shots{isolation:isolate;width:100%;height:500px;display:flex;align-items:center;justify-content:center}.hero .shots::before{content:'';position:absolute;width:370px;height:370px;background:#1a5967;border-radius:50%;z-index:-2}.shots .main{width:220px;border:6px solid #243e48;border-radius:30px;transform:rotate(7deg);animation:none;box-shadow:18px 24px 50px #061d2b55;margin-left:100px}.shots .back{display:block;width:190px;left:0;top:28px;border:6px solid #44626a;border-radius:28px;transform:rotate(-9deg);animation:none;box-shadow:0 20px 40px #061d2b44}.stats{display:none}
.trust{background:#e0efeb;border:0}.trust .wrap{justify-content:space-between;padding-block:22px;gap:18px}.trust span{font-size:13px;color:#214c4b}.trust svg{background:none;color:#087568;padding:2px}
section{padding-block:100px;scroll-margin-top:92px}.h2{font-size:clamp(31px,4vw,48px);letter-spacing:-1.7px;max-width:780px;font-weight:800;line-height:1.08;margin:0 0 20px}.sub{font-size:17px;max-width:65ch;margin-bottom:46px}section:not(.hero) .eyebrow{display:none}
.bloques{grid-template-columns:1.15fr 1fr;gap:20px}.bloque{padding:32px;border:0;border-radius:16px;background:#e8efef}.bloque::before{display:none}.bloque:nth-child(2){background:#e2eee7}.bloque:nth-child(3){background:#103747;color:#f5faf9}.bloque:nth-child(3)>p,.bloque:nth-child(3) li{color:#d0e1e4}.bloque:nth-child(4){background:#e9ecf7}.bloque .ico{background:none;box-shadow:none;padding:0;width:30px;height:30px;color:var(--teal);border-radius:0;margin-bottom:26px}.bloque:nth-child(3) .ico,.bloque:nth-child(3) li svg{color:#70dcc8}.bloque h3{font-size:27px;letter-spacing:-.7px;margin-bottom:10px}.bloque ul{gap:9px;margin-top:22px}.bloque:hover{transform:translateY(-4px);box-shadow:none}.ademas{gap:12px}.pill{border:0;background:#eaf0f0;border-radius:8px;font-size:13px;padding:10px 12px}
#capturas{background:#103747;color:#f4faf8;border:0}#capturas .sub,#capturas .hint,#capturas .shotcard p{color:#c3d9dd}.strip{gap:32px;padding:12px 4px 30px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#69b6ad #214b58;cursor:auto}.shotcard{width:222px;scroll-snap-align:start}.shotcard img{border:5px solid #54727b;border-radius:28px;box-shadow:none}.shotcard p{font-size:14px;text-align:left;padding-inline:6px;max-width:200px}.gallery-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.gallery-controls button{font:700 15px Nunito, sans-serif;padding:11px 18px;border-radius:999px;border:1px solid #78999f;background:transparent;color:#f5faf9;cursor:pointer;min-height:44px}.gallery-controls button:hover{background:#285767}
.steps{gap:30px}.step{border:0;padding-top:0;background:none}.step::before{position:static;background:#dcece8;color:#16665d;box-shadow:none;width:46px;height:46px;border-radius:50%;font-size:18px}.step h3{font-size:19px;margin-top:22px}.step p{font-size:15px}
#precios{background:#eaf0ef;border:0}.planes{max-width:none;grid-template-columns:1fr 1fr;gap:24px}.plan{border:1px solid #cbdad8;border-radius:16px;background:#f9fbfa;padding:38px}.plan.destacado{background:#103747;border:1px solid #103747;color:#f7fbfa;box-shadow:none;border-radius:16px}.plan.destacado .precio{color:#76e2cb;background:none}.plan.destacado .nombre,.plan.destacado .periodo{color:#d0e3e6}.plan .precio{font-size:62px;line-height:1.2;margin-block:12px}.plan .nombre{font-size:18px}.plan .tag{top:28px;right:28px;left:auto;background:#c5f0e5;color:#174a42;box-shadow:none;font-size:11px}.plan .prueba{color:#84e3d0}.plan li svg{color:#16877b}.plan.destacado li svg{color:#76e2cb}.plan.destacado .btn{background:#a8eddc;color:#123f3c}.plan.destacado .btn:hover{background:#ccf8ed}.plan ul{gap:14px}.plan .btn.ghost{background:#e1ebe8;border:0;color:#193f42;box-shadow:none}.anual{max-width:780px;margin:28px auto 0;font-size:14px;line-height:1.7}
.faq{grid-template-columns:1fr;gap:0;max-width:900px}.faq details{border-bottom:1px solid var(--line);padding:22px 0}.faq summary{font-size:19px;font-weight:800;cursor:pointer;padding-right:20px}.faq details p{padding-top:14px;max-width:78ch;font-size:16px}.faq details[open] summary{color:var(--teal)}
.cierre{background:#c6eee1;color:#143f42;text-align:left}.cierre .wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px 70px}.cierre h2{font-size:clamp(34px,4vw,50px);max-width:700px;letter-spacing:-1.5px;margin:0}.cierre p{margin:0;color:#365c5e;max-width:55ch;grid-column:1}.cierre .chapa{grid-column:2;grid-row:1/3}.cierre .chapa img{height:70px}footer{background:var(--bg);padding-block:42px}.flinks{gap:16px}.flinks a{font-size:13px}.copy{font-size:12px}
@media(prefers-reduced-motion:no-preference){.hero h1,.hero .lead,.hero .acts{animation:appear .85s both}.hero .lead{animation-delay:.1s}.hero .acts{animation-delay:.2s}.shots .main{animation:phone-main 1.1s both}.shots .back{animation:phone-back 1.1s .1s both}.reveal-visible{animation:appear .75s both}@keyframes appear{from{opacity:.1;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes phone-main{from{opacity:0;transform:translateY(40px) rotate(13deg)}to{opacity:1;transform:rotate(7deg)}}@keyframes phone-back{from{opacity:0;transform:translateY(35px) rotate(-15deg)}to{opacity:1;transform:rotate(-9deg)}}}
@media(prefers-color-scheme:dark){:root{--ink:#edf7f4;--soft:#b6ccce;--bg:#10272e;--tint:#19333b;--line:#345058;--teal:#89dbc9}header{background:#10272ef5}.trust{background:#23453f}.trust span{color:#cce7df}.trust svg{color:#94d8c7}.bloque{background:#23424a}.bloque:nth-child(2){background:#284a43}.bloque:nth-child(4){background:#303c55}.pill{background:#28454b}.plan{background:#19343c;border-color:#426067}#precios{background:#142e34}.plan.destacado{border-color:#45656d}.plan .btn.ghost{color:#e5f5ef;background:#345750}.step::before{background:#31594f;color:#c1f0dc}}
@media(max-width:1050px){.wrap{padding-inline:28px}.hero .wrap{gap:25px;grid-template-columns:1.2fr 1fr}.hero h1{font-size:53px}.hero .shots{height:470px}.shots .main{width:192px;margin-left:74px}.shots .back{width:165px;left:0;top:48px}.hero .shots::before{width:280px;height:280px}.navlinks{gap:16px}.hero .lead{font-size:17px}.bloques{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.flinks{max-width:550px}}
@media(max-width:760px){.wrap{padding-inline:22px}header .wrap{height:70px}.brand{font-size:21px;gap:7px}.brand img{width:33px;height:33px}header .btn{font-size:13px;padding:11px 15px}.navlinks{display:none}.hero{padding:42px 0 32px}.hero .wrap{grid-template-columns:1fr;gap:26px;min-height:0}.hero h1{font-size:clamp(43px,9vw,60px);letter-spacing:-2px;max-width:620px}.hero .lead{margin:22px 0 25px;font-size:17px;max-width:43ch}.acts{gap:18px}.hero .chapa img{height:54px}.plain{font-size:13px}.hero .shots{height:420px;max-width:340px;margin:auto}.shots .main{width:185px;margin-left:105px}.shots .back{width:159px;left:4px;top:35px}.hero .shots::before{width:295px;height:295px}.trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:17px 10px}.trust span{font-size:11px;gap:4px}.trust svg{width:18px;height:18px}section{padding-block:65px}.h2{font-size:35px;letter-spacing:-1.2px}.sub{font-size:16px;margin-bottom:30px}.bloques,.planes{grid-template-columns:1fr}.bloque{padding:27px}.bloque h3{font-size:25px}.bloque .ico{margin-bottom:20px}.shotcard{width:195px}.strip{gap:24px}.gallery-controls{justify-content:flex-start}.steps{gap:28px 20px}.step h3{font-size:17px}.step p{font-size:14px}.plan{padding:28px}.plan .precio{font-size:54px}.plan .tag{right:22px;top:24px}.faq summary{font-size:17px}.faq details p{font-size:15px}.cierre .wrap{display:block}.cierre h2{font-size:36px}.cierre p{margin:20px 0 26px}.cierre .chapa img{height:60px}footer .wrap{display:block}.flinks{margin-block:25px;gap:16px 24px}.copy{padding-top:22px}}



/* Second direction: cobalt stage, mint typography, product-led scrolling scenes. */
header{background:#123fcf;color:#f5f9ff}header .navlinks a{color:#dce7ff}header .btn{background:#bcf6db;color:#123c3a}.hero{background:#123fcf;padding:50px 0 65px}.hero .wrap{grid-template-columns:1.1fr 1fr;gap:20px;min-height:610px}.hero h1{font-size:clamp(65px,7.7vw,108px);line-height:.96;letter-spacing:-5px;max-width:650px}.hero h1 em{color:#bcf6db}.hero .eyebrow{color:#dce7ff}.hero .lead{color:#e3eaff;max-width:37ch}.hero .shots{height:600px;perspective:1100px}.hero .shots::before{width:480px;height:480px;border:64px solid #7ea4ff;background:transparent;border-radius:50%;opacity:.5}.hero .shots .main{width:253px;transform:rotate(10deg);border:7px solid #152a56;margin-left:130px;box-shadow:25px 35px 55px #071b6655;animation:none}.hero .shots .back{width:218px;top:10px;left:5px;transform:rotate(-13deg);border:6px solid #314e86;animation:none}.trust{background:#bcf6db}.trust .wrap{padding-block:24px}.h2{font-size:clamp(38px,5.1vw,65px);letter-spacing:-2.5px;max-width:900px}.bloques{display:block}.bloque{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 9%;align-content:center;min-height:620px;padding:65px;margin-bottom:30px;overflow:hidden;border-radius:28px;background:#e6eeee;isolation:isolate}.bloque:nth-child(2){background:#bcf6db}.bloque:nth-child(3){background:#0d2935}.bloque:nth-child(4){background:#dce5ff}.bloque h3{font-size:44px;line-height:1.06;letter-spacing:-1.8px}.bloque>p,.bloque ul,.bloque h3,.bloque .ico{grid-column:1;position:relative;z-index:1}.bloque>p{font-size:18px}.bloque ul{margin-top:25px}.bloque .ico{width:36px;height:36px;margin-bottom:35px}.product-visual{grid-column:2;grid-row:1/5;width:245px;justify-self:center;align-self:center;border-radius:29px;border:6px solid #183842;box-shadow:22px 28px 35px #173c4022;transform:rotate(7deg);max-height:none}.bloque:nth-child(even) .product-visual{transform:rotate(-7deg)}.bloque::after{content:'';position:absolute;width:370px;height:370px;border-radius:50%;right:15px;top:120px;background:#ffffff55;z-index:-1}.bloque:nth-child(3)::after{background:#225662}.bloque:hover{transform:none}.ademas{margin-top:42px}.pill{font-size:14px;padding:13px 16px}.strip{gap:40px}.shotcard{width:265px}#capturas{background:#091e2a}.shotcard img{border-color:#365766}.planes{gap:30px}.plan{padding:45px;border-radius:25px}.plan.destacado{background:#123fcf;border-color:#123fcf}.plan.destacado .precio{color:#bcf6db}.plan.destacado .prueba{color:#bcf6db}.plan.destacado .btn{background:#bcf6db}.cierre{background:#bcf6db;position:relative;overflow:hidden;padding-block:115px}.cierre h2{font-size:clamp(45px,6vw,78px);line-height:1;letter-spacing:-3px}.cierre .wrap{position:relative}.cierre::before{content:'ProveeGo';position:absolute;font-weight:900;font-size:clamp(100px,20vw,300px);color:#a5e7cd;letter-spacing:-12px;bottom:-85px;right:-10px;pointer-events:none}.gallery-controls button{transition:background .2s,transform .2s}.gallery-controls button:active{transform:scale(.94)}.shotcard img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}.shotcard img:hover{transform:translateY(-12px) rotate(2deg)}
@media(prefers-reduced-motion:no-preference){
.hero .shots .main{animation:arrive-front 1.3s cubic-bezier(.16,1,.3,1) both}.hero .shots .back{animation:arrive-back 1.4s cubic-bezier(.16,1,.3,1) both}.hero .shots::before{animation:ring-arrive 1.8s cubic-bezier(.16,1,.3,1) both}
@keyframes arrive-front{from{opacity:0;transform:translate(120px,90px) rotate(30deg)}to{opacity:1;transform:rotate(10deg)}}@keyframes arrive-back{from{opacity:0;transform:translate(-80px,110px) rotate(-30deg)}to{opacity:1;transform:rotate(-13deg)}}@keyframes ring-arrive{from{opacity:0;transform:scale(.5)}to{opacity:.5;transform:scale(1)}}
@supports(animation-timeline:view()){
.bloque .product-visual{animation:product-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}.bloque:nth-child(even) .product-visual{animation-name:product-drift-reverse}
@keyframes product-drift{from{transform:translateY(55px) rotate(-5deg) scale(.93)}to{transform:translateY(-45px) rotate(10deg) scale(1.03)}}@keyframes product-drift-reverse{from{transform:translateY(55px) rotate(5deg) scale(.93)}to{transform:translateY(-45px) rotate(-10deg) scale(1.03)}}
}
}
@media(prefers-color-scheme:dark){.bloque{background:#24434b}.bloque:nth-child(2){background:#245648}.bloque:nth-child(4){background:#2c3e66}.bloque::after{background:#ffffff0c}.trust span{color:#214c4b}.trust svg{color:#087568}}
@media(min-width:1000px) and (prefers-reduced-motion:no-preference){.bloque{position:sticky;top:100px}.bloque:nth-child(2){top:112px}.bloque:nth-child(3){top:124px}.bloque:nth-child(4){top:136px}}
@media(max-width:1050px){.hero h1{font-size:76px;letter-spacing:-4px}.hero .shots .main{width:215px;margin-left:85px}.hero .shots .back{width:180px;left:-5px;top:58px}.hero .shots::before{width:350px;height:350px;border-width:45px}.bloque{padding:45px;gap:0 6%;min-height:590px}.bloque h3{font-size:36px}.product-visual{width:225px}.hero .shots{height:520px}.hero .wrap{min-height:520px}}
@media(max-width:760px){.hero{padding-top:40px;padding-bottom:35px}.hero .wrap{grid-template-columns:1fr;min-height:0;gap:22px}.hero h1{font-size:clamp(60px,14vw,86px);letter-spacing:-3.5px;max-width:500px}.hero .shots{height:440px;max-width:350px}.hero .shots .main{width:185px;margin-left:108px}.hero .shots .back{width:160px;left:0;top:20px}.hero .shots::before{width:320px;height:320px;border-width:42px}.hero .lead{font-size:17px}.hero .eyebrow{font-size:10px;letter-spacing:1.7px}.bloque{display:flex;flex-direction:column;align-items:flex-start;padding:30px 25px 38px;min-height:0;border-radius:22px;gap:0;margin-bottom:22px}.bloque .ico{margin-bottom:23px}.bloque h3{font-size:34px}.bloque>p{font-size:17px}.bloque ul{margin-bottom:35px}.product-visual{width:200px;align-self:center;margin:15px 0}.bloque::after{width:280px;height:280px;top:auto;bottom:105px;right:calc(50% - 140px)}.h2{font-size:40px;letter-spacing:-1.5px}.shotcard{width:220px}.strip{gap:28px}.plan{padding:30px}.cierre{padding-block:75px}.cierre h2{font-size:49px;letter-spacing:-2px}.cierre::before{font-size:130px;bottom:-30px;letter-spacing:-7px}.steps{grid-template-columns:1fr 1fr}.trust .wrap{padding-block:20px}.trust span{font-size:11px}}

@media (min-width:1000px) and (max-height:849px){.bloque{position:relative;top:auto!important}}

footer .brand{color:var(--ink)}
header .navlinks a:hover{color:#f7fbff;text-decoration:underline;text-underline-offset:5px}
header :focus-visible,.hero :focus-visible,#capturas :focus-visible,.plan.destacado :focus-visible{outline-color:#bcf6db}
.strip.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
/* Keep both product screens inside narrow viewports after the entrance animation. */
@media(max-width:760px){
 .hero .shots .back{left:10px;transform:rotate(-7deg);animation-name:mobile-back}
 .hero .shots .main{transform:rotate(7deg);animation-name:mobile-front}
 @keyframes mobile-back{from{opacity:0;transform:translateY(35px) rotate(-14deg)}to{opacity:1;transform:rotate(-7deg)}}
 @keyframes mobile-front{from{opacity:0;transform:translateY(45px) rotate(14deg)}to{opacity:1;transform:rotate(7deg)}}
}