/* ---------- Portada: el gancho ---------- */
.sol-label{display:inline-flex;align-items:center;gap:10px;font-family:Sora;font-weight:600;font-size:15px;color:var(--cobalt)}
.sol-label::before{content:"";width:28px;height:2px;background:currentColor}

.hook{background:var(--deep);color:#fff;position:relative;overflow:hidden;isolation:isolate;padding:72px 0 100px;margin-top:-74px;padding-top:146px}
.hook::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 70% at 50% 20%,#000 30%,transparent 80%);animation:gridmove 20s linear infinite}
.hook::after{content:"";position:absolute;z-index:-1;width:900px;height:900px;left:50%;top:-420px;transform:translateX(-50%);background:radial-gradient(circle,#3355FF40,transparent 60%)}
.hook .wrap{text-align:center}
.hook .sol-label{color:#7FE3C6}
.hook h1{font-size:82px;line-height:1.02;font-weight:700;letter-spacing:-.045em;margin:26px auto 0;max-width:15ch}
.strike{position:relative;white-space:nowrap;color:#9DA9C9}
.strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:.1em;border-radius:.05em;background:#FF6B5B;transform:scaleX(0) rotate(-2deg);transform-origin:left;transition:transform .7s cubic-bezier(.7,0,.2,1) .9s}
.hook.ready .strike::after{transform:scaleX(1) rotate(-2deg)}
.answer{display:block;margin:22px auto 0;font-family:Sora;font-weight:700;font-size:40px;letter-spacing:-.03em;line-height:1.15;color:#5BE0B3;opacity:0;transform:translateY(14px);transition:opacity .7s ease 1.5s,transform .8s cubic-bezier(.2,.8,.2,1) 1.5s}
.hook.ready .answer{opacity:1;transform:none}
.hook p.lead{max-width:36em;margin:22px auto 34px;color:#B7C0D8;font-size:20px}
.hook .cta{justify-content:center}
.btn.mint{background:#18C29C;color:#06261D;box-shadow:0 14px 34px -14px #18C29Caa}
.btn.ghost{background:transparent;color:#fff;border:1px solid #ffffff38}

/* ---------- Subes. Revisas. Declaras. ---------- */
.three{padding:120px 0 60px}
.three-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.words .wd{min-height:62vh;display:flex;flex-direction:column;justify-content:center}
.words h2{font-size:118px;line-height:.95;font-weight:700;letter-spacing:-.06em;color:#CBD1DF;transition:color .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);transform:translateX(-10px)}
.words p{font-size:20px;color:var(--ink-3);max-width:24em;margin:18px 0 0;transition:color .5s}
.words .wd.on h2{color:var(--ink);transform:none}
.words .wd.on h2 span{color:var(--cobalt)}
.words .wd.on p{color:var(--ink-2)}
.stage3{position:sticky;top:18vh;height:64vh;display:grid;place-items:center}
.panel3{position:absolute;inset:0;margin:auto;width:100%;max-width:480px;height:360px;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 40px 80px -50px #121A3388;padding:26px;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);font-family:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;color:#203b33;overflow:hidden}
.panel3.on{opacity:1;transform:none}
.p-h{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:16px;margin-bottom:16px}
.p-h span{font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5b7168;font-weight:600}
/* 1: subir */
.drop3{height:210px;border:1.5px dashed #B9CCC4;border-radius:16px;background:#f7fbf9;position:relative;overflow:hidden}
.drop3 i{position:absolute;width:62px;height:78px;border-radius:9px;background:#fff;border:1px solid #d9e5df;box-shadow:0 10px 20px -10px #0004;top:-100px;font-style:normal;font-weight:800;font-size:11px;display:grid;place-items:end center;padding-bottom:8px;color:#a94f4f}
.drop3 i:nth-child(even){color:#147d61}
.panel3.on .drop3 i{animation:fall 3.6s cubic-bezier(.5,0,.3,1) infinite}
.drop3 i:nth-child(1){left:12%}.drop3 i:nth-child(2){left:33%;animation-delay:.25s!important}.drop3 i:nth-child(3){left:54%;animation-delay:.5s!important}.drop3 i:nth-child(4){left:75%;animation-delay:.75s!important}
@keyframes fall{0%{top:-100px;transform:rotate(-14deg)}30%,85%{top:66px;transform:rotate(0)}100%{top:66px;opacity:0}}
.lot3{margin-top:14px;display:flex;justify-content:space-between;font-size:13px;font-weight:700}
.lot3 span:last-child{color:#147d61}
/* 2: revisar */
.tbl3{width:100%;border-collapse:collapse;font-size:12px}
.tbl3 th{font-family:"Spline Sans Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#5b7168;text-align:left;font-weight:600;padding:8px;border-bottom:1px solid #d9e5df}
.tbl3 td{padding:0 6px;height:44px;border-bottom:1px solid #e8efeb;white-space:nowrap}
.tbl3 td.fix{position:relative}
.panel3.on .tbl3 td.fix{animation:fixcell 4.5s ease infinite}
.tbl3 td.fix b{opacity:0}
.panel3.on .tbl3 td.fix b{animation:fixtext 4.5s ease infinite}
@keyframes fixcell{0%,35%{background:#fbefef;box-shadow:inset 0 0 0 1px #E8B7B7}45%,70%{background:#fff;box-shadow:inset 0 0 0 2px #147d61}80%,100%{background:#edf7ed;box-shadow:none}}
@keyframes fixtext{0%,42%{opacity:0}55%,100%{opacity:1}}
.pend3{margin-top:16px;display:inline-flex;font-size:12px;font-weight:700;border-radius:8px;padding:6px 10px;background:#fff7e6;color:#855b12}
.pend3 b{margin-left:6px}
.pend3 .zero{display:none}
.panel3.on .pend3 .one{animation:showone 4.5s steps(1) infinite}
.panel3.on .pend3 .zero{display:inline;animation:showzero 4.5s steps(1) infinite}
@keyframes showone{0%{display:inline}80%{display:none}}
@keyframes showzero{0%{display:none}80%{display:inline}}
/* 3: declarar */
.file3{display:flex;align-items:center;gap:14px;border:1px solid #d9e5df;border-radius:16px;padding:16px;margin-top:6px}
.file3 i{width:46px;height:56px;border-radius:8px;background:#147d61;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;flex-shrink:0}
.file3 b{display:block;font-size:14px}
.file3 small{color:#5b7168;font-size:12px}
.bar3{height:10px;border-radius:5px;background:#e8efeb;margin:20px 0 10px;overflow:hidden}
.bar3 i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#147d61,#2FC79A)}
.panel3.on .bar3 i{animation:fill3 3.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes fill3{0%{width:0}60%,100%{width:100%}}
.sent3{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;color:#28733e;opacity:0}
.sent3::before{content:"✓";width:26px;height:26px;border-radius:50%;background:#28733e;color:#fff;display:grid;place-items:center;font-size:13px}
.panel3.on .sent3{animation:sent 3.6s ease infinite}
@keyframes sent{0%,62%{opacity:0;transform:translateY(6px)}70%,100%{opacity:1;transform:none}}

/* ---------- Video ---------- */
.watch{padding:90px 0 40px}

@media (prefers-reduced-motion:reduce){
  .strike::after{transform:scaleX(1) rotate(-2deg)}
  .answer{opacity:1;transform:none}
  .paper.scan .beam{animation:none;opacity:0}
}
@media (max-width:900px){
  .hook{padding:120px 0 64px}
  .hook h1{font-size:44px}
  .answer{font-size:26px}
  .hook p.lead{font-size:17px}
  .try{margin-top:48px}
  .try-head{flex-direction:column;align-items:flex-start}
  .try-head h2{font-size:24px}
  .try-grid{grid-template-columns:1fr}
  .desk{min-height:0;padding:26px 18px}
  .flds{grid-template-columns:1fr 1fr}
  .fl.wide{grid-column:span 2}
  .mini th:nth-child(3),.mini td:nth-child(3){display:none}
  .three{padding:64px 0 24px}
  .three-grid{grid-template-columns:1fr;gap:0}
  .stage3{display:none}
  .words .wd{min-height:0;padding:22px 0}
  .words h2{font-size:64px;color:var(--ink);transform:none}
  .words h2 span{color:var(--cobalt)}
  .words p{color:var(--ink-2)}
  .watch{padding:56px 0 24px}
}

/* Cabecera transparente sobre la portada oscura */
.home header:not(.scrolled){background:transparent;backdrop-filter:none}
.home header:not(.scrolled) .logo{color:#fff}
.home header:not(.scrolled) .logo i::after{background:var(--deep)}
.home header:not(.scrolled) .links a:not(.btn):not([aria-current]){color:#C9D2EA}
.home header:not(.scrolled) .links a:not(.btn):not([aria-current]):hover{background:#ffffff14;color:#fff}
.home header:not(.scrolled) .links .btn{background:#fff;color:var(--ink)}
@media (max-width:900px){.home header:not(.scrolled) .links a:not(.btn):not([aria-current]){color:var(--ink-2)}}

/* ---------- Por qué usar Pangea (contadores) ---------- */
.why3{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px;margin-bottom:28px}
.why{background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px;display:flex;flex-direction:column;position:relative;overflow:hidden;min-height:440px}
.why h3{font-family:Sora;font-size:23px;line-height:1.15;font-weight:700;letter-spacing:-.025em;margin:14px 0 10px}
.why p{margin:0;color:var(--ink-2);font-size:16px}
.why-n{font-family:Sora;font-weight:700;font-size:84px;line-height:.9;letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.why-n small{display:block;font-family:Geist;font-size:15px;font-weight:700;letter-spacing:0;color:var(--ink-3);margin-top:10px}
.why-n.blue{color:var(--cobalt)}
.why.big{background:var(--deep);color:#fff;border:0}
.why.big .why-n{color:#5BE0B3;font-size:110px}
.why.big .why-n small,.why.big p{color:#B7C0D8}
.dots300{display:grid;grid-template-columns:repeat(25,1fr);gap:4px;margin-top:auto;padding-top:24px}
.dots300 i{aspect-ratio:1;border-radius:3px;background:#ffffff1c;transition:background .2s,transform .2s}
.dots300 i.ok{background:#18C29C;transform:scale(.86)}
.cos{margin-top:auto;padding-top:22px;display:grid;gap:8px}
.cos div{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;transition:border-color .35s,background .35s,transform .35s;font-family:"Schibsted Grotesk",Arial,sans-serif}
.cos div.on{border-color:#147d61;background:#eaf6f0;transform:translateX(6px)}
.cos .tag{border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700}
.cos .tag.ok{background:#edf7ed;color:#28733e}.cos .tag.sent{background:#eaf6f0;color:#10674f}.cos .tag.pend{background:#fff7e6;color:#855b12}
.why.accent{background:linear-gradient(160deg,#3355FF,#2440D6);color:#fff;border:0}
.why.accent .why-n{color:#fff}
.why.accent .why-n small,.why.accent p{color:#D3DBFF}
.retype{margin-top:auto;padding-top:24px}
.retype .cell{background:#fff;border-radius:14px;padding:14px 16px;color:var(--ink);min-height:74px;position:relative;font-family:"Schibsted Grotesk",Arial,sans-serif}
.retype small{display:block;font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.08em;color:#5b7168;margin-bottom:6px}
.retype .manual{font-weight:700;font-size:17px;color:#a94f4f}
.retype .manual.typing::after{content:"";display:inline-block;width:2px;height:16px;background:#a94f4f;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
.retype .manual.gone{text-decoration:line-through;opacity:.35;transition:opacity .3s}
.retype .ai{display:none;font-weight:800;font-size:17px;color:#147d61}
.retype .ai em{font-style:normal;font-weight:600;font-size:12.5px;color:#5b7168;margin-left:6px}
.retype .ai.in{display:block;animation:popin .45s cubic-bezier(.3,1.6,.5,1)}
@media (max-width:900px){
  .why3{grid-template-columns:1fr}
  .why{min-height:0;padding:24px}
  .why-n{font-size:64px}
  .why.big .why-n{font-size:84px}
}

/* ---------- Portada: "Lo que te tomaba días, ahora toma segundos" ---------- */
.hook h1.days{max-width:none;font-size:92px;line-height:1;letter-spacing:-.05em}
.days .l1{display:block;color:#E7EBF7}
.days .l2{display:block;color:#5BE0B3;margin-top:.08em;opacity:0;transform:translateY(.25em);filter:blur(10px);transition:opacity .7s ease 1.55s,transform .8s cubic-bezier(.2,.8,.2,1) 1.55s,filter .7s ease 1.55s}
.hook.ready .days .l2{opacity:1;transform:none;filter:none}
.days .strike{color:#FF9A8E}

.machine{margin:64px auto 0;max-width:1080px;display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;gap:10px;height:360px;text-align:left}
.pile{position:relative;height:100%}
.slip{position:absolute;width:118px;height:150px;border-radius:4px;background:linear-gradient(170deg,#fff,#EEEAE0);box-shadow:0 14px 26px -12px #000b;padding:12px 10px;display:grid;gap:5px;align-content:start}
.slip::before{content:"";height:6px;width:70%;margin:0 auto 4px;border-radius:3px;background:#3A3A3A}
.slip i{display:block;height:4px;border-radius:2px;background:#CFC9BC}
.slip i:nth-child(3n){width:70%}.slip i:nth-child(4n){width:85%}
.slip b{position:absolute;left:10px;right:10px;bottom:12px;height:6px;border-radius:3px;background:#3A3A3A;width:45%;margin-left:auto}
.gate{position:relative;height:100%;display:grid;place-items:center}
.gate-beam{position:absolute;top:0;bottom:0;left:50%;width:4px;margin-left:-2px;border-radius:2px;background:linear-gradient(transparent,#5BE0B3 20%,#5BE0B3 80%,transparent);box-shadow:0 0 30px 6px #18C29C88;animation:beamglow 1.2s ease-in-out infinite}
@keyframes beamglow{50%{box-shadow:0 0 46px 12px #18C29Caa}}
.gate-logo{position:relative;z-index:1;width:64px;height:64px;border-radius:18px;background:#2FC79A;color:#0B3B2E;display:grid;place-items:center;font-family:"Schibsted Grotesk",Arial,sans-serif;font-weight:800;font-size:32px;box-shadow:0 0 0 8px #18C29C33,0 20px 40px -10px #000a}
.gate small{position:absolute;bottom:-4px;font-weight:700;font-size:13px;color:#7FE3C6;white-space:nowrap}
.gate.pulse .gate-logo{animation:gatepulse .25s ease}
@keyframes gatepulse{50%{transform:scale(1.12)}}
.out{background:#fff;color:#203b33;border-radius:22px;padding:18px;height:100%;display:flex;flex-direction:column;font-family:"Schibsted Grotesk",Arial,sans-serif;box-shadow:0 40px 80px -40px #000c;overflow:hidden}
.out-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.out-h > span{font-weight:800;font-size:15px}
.out-h b{font-family:Sora;font-size:26px;letter-spacing:-.03em;color:#147d61;font-variant-numeric:tabular-nums}
.out-rows{flex:1;display:grid;gap:6px;align-content:start;overflow:hidden}
.out-row{display:grid;grid-template-columns:1.4fr 1fr .9fr;gap:8px;align-items:center;font-size:12.5px;padding:8px 10px;border-radius:9px;background:#f4f8f6;animation:rowdrop .35s cubic-bezier(.2,.8,.2,1)}
.out-row b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.out-row span{color:#5b7168;white-space:nowrap}
.out-row em{font-style:normal;text-align:right;font-weight:700}
@keyframes rowdrop{from{opacity:0;transform:translateY(-12px);background:#d8f3e8}}
.out-done{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:15px;color:#fff;background:#147d61;border-radius:12px;padding:11px;opacity:0;transform:translateY(8px);transition:all .4s cubic-bezier(.2,.8,.2,1)}
.out-done::before{content:"✓"}
.out-done.in{opacity:1;transform:none}

@media (max-width:900px){
  .hook h1.days{font-size:46px}
  .machine{grid-template-columns:1fr;height:auto;gap:18px;margin-top:44px}
  .pile{height:200px}
  .gate{height:90px}
  .gate-beam{top:50%;bottom:auto;left:0;right:0;width:auto;height:4px;margin:-2px 0 0;background:linear-gradient(90deg,transparent,#5BE0B3 20%,#5BE0B3 80%,transparent)}
  .gate small{bottom:-2px}
  .out{height:330px}
}