@font-face{font-family:Archivo;src:url(../fuentes/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap} @font-face{font-family:Inter;src:url(../fuentes/inter-400.woff2) format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Inter;src:url(../fuentes/inter-500.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:Inter;src:url(../fuentes/inter-600.woff2) format("woff2");font-weight:600;font-display:swap} @font-face{font-family:Mono;src:url(../fuentes/mono-500.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:Playfair;src:url(../fuentes/playfair-400i.woff2) format("woff2");font-style:italic;font-display:swap} :root{ --noche:#0B0D0C;--carbon:#121412;--panel:#171A18;--linea:rgba(245,241,232,.1);--linea-f:rgba(245,241,232,.2); --crema:#F5F1E8;--gris:#B7B7B0;--gris-tono:#8A8A82;--apagado:#52544E;--senal:#22C55E;--bosque:#0F5132; --max:1280px;--m:48px;--sec:140px;--r:4px;--ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;overflow-x:clip} html:not(.lenis){scroll-behavior:smooth} body{background:var(--noche);color:var(--crema);font:400 18px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip} img{display:block;max-width:100%} a{color:inherit} ::selection{background:var(--senal);color:var(--carbon)} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--m)} section[id],form[id]{scroll-margin-top:90px} .sec{padding:var(--sec) 0;position:relative} h1,h2,h3{font-family:Archivo,Arial Black,sans-serif;font-stretch:100%;color:var(--crema);font-weight:800} h1{font-size:clamp(46px,6.4vw,96px);line-height:.98;letter-spacing:-.04em} h2{font-size:clamp(34px,4.2vw,62px);line-height:1.02;letter-spacing:-.032em} h3{font-weight:700;font-size:clamp(21px,1.9vw,26px);line-height:1.2;letter-spacing:-.018em} .tono{color:var(--gris-tono)} .etq{font:500 12px/1.5 Mono,ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);display:inline-flex;align-items:center;gap:12px} .etq::before{content:"";width:24px;height:2px;background:var(--senal);flex:none} .micro{font:500 11.5px/1.6 Mono,monospace;letter-spacing:.16em;color:var(--gris);text-transform:uppercase} .btn{position:relative;display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 30px;border-radius:var(--r);background:var(--senal);color:var(--carbon);font:600 16px/1 Inter,sans-serif;text-decoration:none;border:0;cursor:pointer;overflow:hidden;isolation:isolate} .btn::before{content:"";position:absolute;inset:0;background:var(--crema);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1} .btn:hover::before{transform:none} .btn:not(.btn-ghost):hover{box-shadow:0 0 0 1px rgba(34,197,94,.5),0 10px 40px -8px rgba(34,197,94,.55)} .btn .fl{display:inline-block;transition:transform .45s var(--ease)} .btn:hover .fl{transform:translateX(5px)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--crema);outline-offset:3px} .btn-ghost{background:transparent;color:var(--crema);box-shadow:inset 0 0 0 1px rgba(245,241,232,.3)} .btn-ghost::before{background:rgba(245,241,232,.08)} .btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(245,241,232,.6)} .btn-ghost:hover .fl{transform:translateY(3px)} .link{font:500 16px/1.3 Inter,sans-serif;color:var(--crema);text-decoration:none;background:linear-gradient(var(--crema),var(--crema)) 0 100%/100% 1px no-repeat;padding-bottom:4px;transition:background-size .4s var(--ease)} .link:hover{background-size:0 1px;background-position:100% 100%} .pend{font:500 10px/1 Mono;letter-spacing:.08em;color:#ffd84d;border:1px dashed rgba(255,216,77,.45);padding:3px 6px;border-radius:3px;vertical-align:middle;white-space:nowrap} .prov{position:fixed;right:12px;bottom:12px;z-index:60;font:500 10px/1 Mono;letter-spacing:.1em;background:#3a2f00;color:#ffd84d;padding:7px 9px;border-radius:3px;opacity:.8} /* grano de película, muy sutil */ .grano{position:fixed;inset:-50%;z-index:55;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grano 1.2s steps(4) infinite} @keyframes grano{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}} /* Cabecera */ .cab{position:fixed;inset:0 0 auto;z-index:40;transition:background .4s,border-color .4s,transform .5s var(--ease);border-bottom:1px solid transparent} .cab.solida{background:rgba(11,13,12,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--linea)} .cab.oculta{transform:translateY(-100%)} .cab:focus-within{transform:none} .cab .wrap{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px} .marca{display:flex;align-items:center;gap:18px;text-decoration:none} .iso-cab{height:32px;width:auto;display:block} .logo-img{height:32px;width:auto;display:block} .marca{gap:14px!important} .marca .firma-cab{margin-left:6px} .logo{display:flex;flex-direction:column;line-height:.84;font-family:Archivo;font-weight:900;font-stretch:125%;font-size:17px;letter-spacing:.01em} .logo span{letter-spacing:.2em;margin-right:-.2em} .logo i{display:block;width:27%;height:3px;background:var(--senal);margin-top:6px} .firma-cab{font:500 10.5px/1.45 Mono;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);padding-left:18px;border-left:1px solid var(--linea-f)} .nav{display:flex;align-items:center;gap:34px} .nav a{font:500 15px/1 Inter;text-decoration:none;color:var(--gris);transition:color .25s}.nav a:hover{color:var(--crema)} .nav .mini{height:44px;padding:0 20px;border:1px solid rgba(245,241,232,.28);border-radius:var(--r);display:inline-flex;align-items:center;color:var(--crema);transition:all .3s} .nav .mini:hover{border-color:var(--crema)} .cab.solida .mini{background:var(--senal);border-color:var(--senal);color:var(--carbon)} /* 1 · Hero */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:130px 0 120px} .hero .foto{position:absolute;top:0;right:0;width:56%;height:100%} .hero .foto .marco{position:absolute;inset:0;overflow:hidden} .hero .foto img{width:100%;height:110%;object-fit:cover;object-position:55% 28%;filter:saturate(.92) contrast(1.06)} .hero .foto::after{content:"";position:absolute;inset:0;pointer-events:none;background: linear-gradient(90deg,var(--noche) 0%,rgba(11,13,12,.8) 18%,rgba(11,13,12,0) 52%), linear-gradient(0deg,var(--noche) 0%,rgba(11,13,12,0) 34%), linear-gradient(180deg,rgba(11,13,12,.55) 0%,rgba(11,13,12,0) 20%)} .hero .pie-foto{position:absolute;right:var(--m);bottom:120px;z-index:3;text-align:right;color:var(--crema)} .hero .pie-foto b{display:block;font:500 11px/1.6 Mono;letter-spacing:.2em;text-transform:uppercase} .hero .pie-foto span{display:block;font:500 11px/1.6 Mono;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)} .hero .txt{position:relative;z-index:3;max-width:690px} .hero h1{margin:30px 0 30px} .hero .sub{font-size:21px;line-height:1.55;color:var(--gris);max-width:540px} .hero .sub b{color:var(--crema);font-weight:600} .hero .entrada{margin:36px 0 18px;font-weight:600;font-size:17px} .hero .entrada u{text-decoration:none;background:linear-gradient(var(--senal),var(--senal)) 0 100%/100% 2px no-repeat;padding-bottom:2px} .acciones{display:flex;align-items:center;gap:30px;flex-wrap:wrap} .hero .micro{margin-top:24px} .baja{position:absolute;left:max(var(--m),calc((100vw - var(--max))/2 + var(--m)));bottom:36px;z-index:3;display:flex;align-items:center;gap:14px} .baja i{display:block;width:1px;height:46px;background:linear-gradient(var(--crema),transparent);transform-origin:top;animation:baja 2.2s var(--ease) infinite} @keyframes baja{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}} /* Logos */ .logos{padding:52px 0 60px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)} .logos .rot{text-align:center;margin-bottom:30px} .cinta{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)} .pista{display:flex;width:max-content;animation:pasa 42s linear infinite} .cinta:hover .pista{animation-play-state:paused} .pista{mix-blend-mode:screen} .pista ul{list-style:none;display:flex;align-items:center;gap:56px;padding-right:56px} .pista img{width:var(--w);height:auto;max-height:64px;object-fit:contain;filter:grayscale(1) invert(1) contrast(2);opacity:.7;transition:opacity .3s} .cinta:hover .pista img{opacity:1} .slot{flex:none;width:190px;height:60px;margin:0 22px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(245,241,232,.14);border-radius:var(--r);font:500 11px/1 Mono;letter-spacing:.16em;color:var(--gris-tono)} .slot img{max-width:140px;max-height:38px;filter:grayscale(1) brightness(1.7);opacity:.55;transition:opacity .3s} .slot:hover img{opacity:1} @keyframes pasa{to{transform:translateX(-50%)}} /* 2 · Problema (columna fija + gráfica que cambia) */ .prob{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:start} .prob .fijo{position:sticky;top:110px} .prob .fijo p{color:var(--gris);font-size:19px;margin-top:22px;max-width:420px} .grafica{margin-top:56px;aspect-ratio:16/10;border:1px solid var(--linea);border-radius:var(--r);position:relative;background:linear-gradient(180deg,rgba(245,241,232,.02),rgba(245,241,232,0));overflow:hidden} .grafica .rejilla-g{display:none} .grafica svg{position:absolute;inset:0;width:100%;height:100%} .grafica .estado{opacity:0;transition:opacity .6s var(--ease)} .grafica .estado.on{opacity:1} .grafica .ln{fill:none;stroke:rgba(245,241,232,.75);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} .grafica .lv{fill:none;stroke:var(--senal);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round} .grafica .pt{fill:rgba(245,241,232,.7)} .grafica .br{fill:rgba(245,241,232,.14)} .grafica .pico{fill:var(--senal)} .grafica .eje{stroke:rgba(245,241,232,.18);stroke-width:1} .grafica .tx.v{fill:var(--senal)} .grafica .cel rect{fill:rgba(245,241,232,.14)} .grafica .interroga{font:800 150px/1 Archivo,sans-serif;fill:var(--senal)} .grafica .lista-c rect{fill:rgba(245,241,232,.05);stroke:rgba(245,241,232,.12)} .grafica .lista-c text{font:500 15px Inter,sans-serif;fill:var(--gris)} .grafica .tucaso{fill:rgba(34,197,94,.08);stroke:var(--senal);stroke-width:1.5} .grafica .tucaso-t{font:600 16px Inter,sans-serif;fill:var(--crema)} .grafica .tx{font:500 11px Mono,monospace;letter-spacing:.12em;fill:var(--gris);text-transform:uppercase} .grafica .ley{position:absolute;right:18px;top:16px;font:500 10.5px/1 Mono;letter-spacing:.16em;color:var(--gris-tono);text-transform:uppercase} .grafica .ley b{color:var(--crema);font-weight:500} .items{list-style:none} .item{min-height:36vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;border-top:1px solid var(--linea);transition:opacity .5s} .item:last-child{border-bottom:1px solid var(--linea)} .js .item{opacity:.55}.js .item.on{opacity:1} .item .n{font:500 14px/1 Mono;letter-spacing:.16em;color:var(--senal);margin-bottom:22px} .item h3{font-size:clamp(26px,2.8vw,40px);line-height:1.12;letter-spacing:-.025em;max-width:560px} .item p{color:var(--gris);font-size:18px;margin-top:16px;max-width:500px} /* 3 · Puente: el reel frente a todo lo demás */ .puente{position:relative;overflow:hidden;padding:150px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:radial-gradient(60% 70% at 22% 55%,rgba(34,197,94,.07),transparent 70%)} .puente-in{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:center} .escena{position:relative;display:flex;flex-direction:column;align-items:center} .movil{width:min(300px,78vw);aspect-ratio:9/19;border-radius:44px;padding:10px;background:#1a1d1b;box-shadow:0 0 0 1px rgba(245,241,232,.1),0 50px 120px -30px rgba(0,0,0,.9),0 0 80px -20px rgba(34,197,94,.25);transform:rotate(-4deg)} .pantalla{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#000} .pantalla img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.9)} .pantalla::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 22%,transparent 60%,rgba(0,0,0,.75))} .reel-top{position:absolute;z-index:2;left:16px;right:16px;top:16px;display:flex;flex-direction:column;gap:10px;font:600 15px Inter;color:#fff} .prog{display:block;height:2px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden} .prog b{display:block;height:100%;width:100%;background:#fff;transform-origin:left;animation:prog 6s linear infinite} @keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}} .reel-lado{position:absolute;z-index:2;right:14px;bottom:110px;display:flex;flex-direction:column;gap:20px} .ic{display:block;width:26px;height:26px;background:#fff;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;opacity:.95} .ic.cor{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11Z'/%3E%3C/svg%3E")} .ic.com{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z'/%3E%3C/svg%3E")} .ic.env{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 3 11 14M22 3l-7 19-4-8-8-4 19-7Z'/%3E%3C/svg%3E")} .reel-pie{position:absolute;z-index:2;left:16px;right:56px;bottom:22px;color:#fff;font-size:13px;line-height:1.4} .reel-pie b{display:block;font-weight:600;margin-bottom:4px} .sistema{position:relative;width:100%;max-width:470px} .sistema .movil{position:relative;z-index:2;width:250px} .reel-txt{position:absolute;z-index:2;left:18px;right:58px;top:36%;font:800 22px/1.08 Archivo,sans-serif;font-stretch:115%;letter-spacing:-.01em;color:#fff} .sistema .pantalla{background:radial-gradient(120% 80% at 30% 20%,#252a26,#0b0d0c 70%)} .capas{position:absolute;z-index:1;right:0;top:9%;bottom:9%;width:240px;list-style:none;display:flex;flex-direction:column;justify-content:space-between} .capas::before{content:"";position:absolute;left:-14px;top:8%;bottom:8%;border-left:1px dashed rgba(245,241,232,.18)} .capa{padding:12px 15px 12px 52px;border:1px solid var(--linea-f);border-radius:10px;background:rgba(18,20,18,.94);font:500 14px/1.3 Inter;color:var(--crema);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)} .capa small{display:block;margin-bottom:4px;font:500 10.5px JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-tono)} .capa.venta{border-color:rgba(34,197,94,.45)} .capa.venta small::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--senal);vertical-align:1px} .rot-movil{display:flex;justify-content:space-between;width:100%;max-width:470px;margin-top:28px;color:var(--gris)} .rot-movil p{width:250px;text-align:center}.rot-movil p+p{width:240px} .texto-puente .micro{margin-bottom:26px} .puente h2{font-size:clamp(38px,5vw,78px);line-height:1;letter-spacing:-.04em;max-width:760px} .lw{transition:color .3s} .js .lit .lw{color:var(--apagado)} .js .lit .lw.on{color:var(--crema)}.js .lit .lw.on.t{color:var(--gris-tono)}.js .lit .lw.on.v{color:var(--senal)} .puente .final{margin-top:40px;color:var(--gris);font-size:20px;max-width:560px} /* 4 · Quién soy */ .quien{display:grid;grid-template-columns:5fr 7fr;gap:88px;align-items:center} .foto2{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)} .foto2 img{width:100%;height:118%;object-fit:cover;object-position:50% 30%} .foto2::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,13,12,.75),rgba(11,13,12,0) 40%)} .foto2 .micro{position:absolute;left:22px;bottom:20px;z-index:2;color:var(--crema)} .quien h2{margin:26px 0 30px} .quien p{color:var(--gris);margin-bottom:18px;max-width:600px} .quien p b{color:var(--crema);font-weight:600} .cifras{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin:40px 0 36px} .cifras div{padding:26px 20px 24px 0} .cifras div+div{padding-left:24px;border-left:1px solid var(--linea)} .cifras strong{display:block;white-space:nowrap;font:500 clamp(30px,3vw,46px)/1 Mono,monospace;letter-spacing:-.03em;color:var(--crema);font-variant-numeric:tabular-nums} .cifras span{display:block;margin-top:12px;font-size:14px;line-height:1.45;color:var(--gris)} .cita{font:italic 400 clamp(24px,2.3vw,32px)/1.35 Playfair,Georgia,serif;color:var(--crema);margin-bottom:26px} /* 5 · Trabajar conmigo */ .cabsec{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px} .cabsec h2{margin-top:24px} .cabsec p{color:var(--gris);max-width:360px} .filas{border-top:1px solid var(--linea)} .fila{position:relative;display:grid;grid-template-columns:4fr 5fr 3fr;gap:48px;padding:48px 0;border-bottom:1px solid var(--linea);align-items:center;transition:padding .5s var(--ease)} .fila::before{content:"";position:absolute;inset:0 -24px;background:rgba(245,241,232,.03);opacity:0;transition:opacity .4s;border-radius:var(--r);z-index:-1} .fila:hover::before{opacity:1} .fila-n{position:absolute;right:30%;top:50%;transform:translateY(-50%);font:900 clamp(110px,12vw,190px)/1 Archivo,sans-serif;font-stretch:125%;color:transparent;-webkit-text-stroke:1px rgba(245,241,232,.07);pointer-events:none;z-index:-1;transition:-webkit-text-stroke-color .4s} .fila:hover .fila-n{-webkit-text-stroke-color:rgba(34,197,94,.35)} .fila .rotulo{font:500 11px/1.5 Mono;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:14px} .fila h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.025em} .fila p{color:var(--gris);font-size:17px} .fila .para{color:var(--crema);font-size:15px;margin-top:10px} .precio{text-align:right} .precio strong{display:block;font:500 clamp(40px,3.8vw,56px)/1 Mono,monospace;letter-spacing:-.03em;color:var(--crema);transition:color .3s} .fila:hover .precio strong{color:var(--senal)} .precio .link{display:inline-block;margin-top:16px;font-size:15px} .precio .dur{font:500 12px/1.5 Mono;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)} .precio span{display:block;margin-top:12px;font:500 12px/1.5 Mono;letter-spacing:.06em;color:var(--gris)} .pie5{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:52px} .pie5 p{font-weight:600;font-size:20px} .pie5 p span{color:var(--gris);font-weight:400} .pie5 small a{color:var(--crema)} .pie5 small{display:block;width:100%;font:500 12px/1.5 Mono;letter-spacing:.08em;color:var(--gris-tono);text-transform:uppercase} /* 6 · Método (horizontal en escritorio) */ .metodo{position:relative;overflow:hidden;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--carbon)} .metodo .fondo{position:absolute;inset:0;z-index:0} .metodo .fondo img{width:115%;max-width:none;height:100%;object-fit:cover;opacity:.55} .metodo .fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--carbon) 0%,rgba(18,20,18,.55) 45%,rgba(18,20,18,.25)),linear-gradient(0deg,var(--carbon),rgba(18,20,18,0) 45%)} .metodo .panel{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0} .metodo h2{margin:24px 0 18px;max-width:640px} .metodo .formula{font:500 clamp(12px,1.25vw,16px)/1.6 Mono;letter-spacing:.24em;color:var(--gris)} .metodo .formula em{font-style:normal;color:var(--gris-tono);margin:0 .5em} .carril{margin-top:72px;overflow:visible} .fases{display:flex;gap:24px;width:max-content} .fase{width:min(400px,30vw);flex:none;padding:34px 32px 38px;border:1px solid var(--linea-f);border-radius:var(--r);background:rgba(11,13,12,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .fase .num{font:500 64px/1 Mono;letter-spacing:-.04em;color:var(--gris-tono)} .fase h3{margin:26px 0 10px;font-size:28px} .fase p{color:var(--gris);font-size:16px} .fase .meta{display:block;margin-top:22px;padding-top:18px;border-top:1px solid var(--linea);font:500 11px/1.5 Mono;letter-spacing:.14em;text-transform:uppercase;color:var(--crema)} .fase:last-child{border-color:rgba(34,197,94,.45)} .fase:last-child .num{color:var(--senal)} .progreso{margin-top:48px;height:2px;background:var(--linea);position:relative;max-width:600px} .progreso i{position:absolute;inset:0;background:var(--senal);transform-origin:left;transform:scaleX(0)} .metodo .palanca{margin-top:28px;color:var(--gris);font-size:18px} .metodo .palanca b{color:var(--crema);font-weight:600} /* Indómitos */ .indo{border-top:1px solid var(--linea);overflow:hidden;background:radial-gradient(50% 60% at 78% 45%,rgba(34,197,94,.08),transparent 70%)} .indo-in{display:grid;grid-template-columns:6fr 5fr;gap:88px;align-items:center} .indo-h{font-family:Archivo;font-weight:900;font-stretch:125%;font-size:clamp(52px,7vw,108px);line-height:.9;letter-spacing:-.02em;margin:22px 0 18px} .indo-sub{font-size:23px;line-height:1.4;color:var(--crema);font-weight:500;margin-bottom:34px;max-width:540px} .para-t{font:500 12px/1 Mono;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:12px} .para{list-style:none;border-top:1px solid var(--linea);margin-bottom:26px;max-width:600px} .para li{display:grid;grid-template-columns:44px 1fr;padding:16px 0;border-bottom:1px solid var(--linea);color:var(--crema);font-size:17px} .para li b{font:500 12px/1.9 Mono;color:var(--senal);font-weight:500} .dentro{color:var(--gris);font-size:16px;max-width:560px} .nopara{margin-top:12px;color:var(--gris-tono);font-size:15px} .indo-der{display:flex;flex-direction:column;gap:28px;perspective:1200px} .pase{position:relative;aspect-ratio:1.58;border-radius:20px;padding:30px 32px;overflow:hidden;background:linear-gradient(135deg,#17201b 0%,#0e1210 55%,#0b0d0c 100%);box-shadow:0 0 0 1px rgba(245,241,232,.12),0 40px 90px -30px rgba(0,0,0,.9),0 0 70px -25px rgba(34,197,94,.45);display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d;transition:transform .5s var(--ease)} .pase-brillo{position:absolute;inset:0;background:radial-gradient(60% 50% at var(--bx,30%) var(--by,20%),rgba(255,255,255,.09),transparent 60%);pointer-events:none} .pase-top{display:flex;justify-content:space-between;align-items:center} .pase-top img{height:30px;width:auto} .pase-top span,.pase-pie span{font:500 10.5px/1 Mono;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)} .pase-nom{font-family:Archivo;font-weight:900;font-stretch:125%;font-size:clamp(30px,3.2vw,46px);letter-spacing:.02em;color:var(--crema)} .pase-pie{display:flex;justify-content:space-between} .pase-barra{position:absolute;left:32px;bottom:62px;width:27%;height:4px;background:var(--senal)} .indo-form{padding:0} .indo-form .micro{margin-bottom:16px;line-height:1.7} .indo-row{display:flex;gap:10px;margin-bottom:12px} .indo-row input{flex:1;min-width:0;height:58px;padding:0 16px;background:var(--panel);border:1px solid var(--linea-f);border-radius:var(--r);color:var(--crema);font:400 16px Inter} .indo-row input:focus{outline:2px solid var(--crema);outline-offset:2px} .indo-form .check{color:var(--gris);font-size:13px}.indo-form .check a{color:var(--crema)} .indo-ok{font:600 18px/1.5 Inter;color:var(--crema)} /* 7 · Preguntas */ .faq{display:grid;grid-template-columns:4fr 7fr;gap:80px;align-items:start} .faq .izq{position:sticky;top:120px} .faq .izq p{color:var(--gris);margin-top:22px;max-width:340px} .acc{border-top:1px solid var(--linea)} .pq{border-bottom:1px solid var(--linea)} .pq button{width:100%;background:none;border:0;color:var(--crema);text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font:600 19px/1.4 Inter} .pq button .mas{flex:none;width:28px;height:28px;border:1px solid var(--linea-f);border-radius:50%;position:relative;transition:transform .45s var(--ease),border-color .3s} .pq button .mas::before,.pq button .mas::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--crema);transform:translate(-50%,-50%)} .pq button .mas::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease)} .pq.abierta button .mas{transform:rotate(180deg);border-color:var(--senal)} .pq.abierta button .mas::after{transform:translate(-50%,-50%) rotate(0)} .pq .resp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)} .pq.abierta .resp{grid-template-rows:1fr} .pq .resp>div{visibility:hidden;transition:visibility 0s .5s} .pq.abierta .resp>div{visibility:visible;transition:none} .pq .resp>div{overflow:hidden} .pq .resp p{color:var(--gris);padding:0 56px 28px 0;font-size:17px} /* 8 · Cierre + solicitud */ .fondo-escena{position:absolute;inset:-8% 0;z-index:0} .fondo-escena img{width:100%;height:100%;object-fit:cover;object-position:70% 60%;opacity:.55} .fondo-escena::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,13,12,.9) 0%,rgba(11,13,12,.55) 45%,rgba(11,13,12,.35) 100%),linear-gradient(0deg,var(--noche) 0%,rgba(11,13,12,0) 30%,rgba(11,13,12,0) 75%,var(--noche) 100%)} .cierre{position:relative;overflow:hidden;padding:var(--sec) 0 calc(var(--sec) + 20px);border-top:1px solid var(--linea)} .cierre .fondo{position:absolute;top:0;right:0;width:48%;height:100%} .cierre .fondo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:.32;filter:grayscale(.2)} .cierre .fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--noche) 0%,rgba(11,13,12,.35) 60%,rgba(11,13,12,.6)),linear-gradient(0deg,var(--noche),rgba(11,13,12,0) 45%)} .cierre .wrap{position:relative;z-index:2;display:grid;grid-template-columns:6fr 5fr;gap:80px;align-items:center} .gigante{font-family:Archivo;font-weight:900;font-stretch:125%;font-size:clamp(58px,8.6vw,128px);line-height:.88;letter-spacing:-.025em;color:var(--crema)} .cierre .lema{font-size:22px;color:var(--gris);margin:26px 0 44px} .pasos{list-style:none;border-top:1px solid var(--linea)} .pasos li{display:grid;grid-template-columns:48px 1fr;padding:20px 0;border-bottom:1px solid var(--linea);color:var(--crema);font-size:17px} .pasos li b{font:500 12px/1.9 Mono;letter-spacing:.12em;color:var(--senal);font-weight:500} .caja-precio{margin-top:30px;padding:22px 24px;border:1px solid var(--linea);border-radius:var(--r);color:var(--gris);font-size:16px;background:rgba(11,13,12,.5)} .caja-precio b{color:var(--crema);font-weight:600} .cierre .micro{margin-top:24px} .form{background:var(--crema);color:var(--carbon);border-radius:6px;padding:42px;box-shadow:0 40px 100px rgba(0,0,0,.55)} .form .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} .form h3{color:var(--carbon);font-size:30px;letter-spacing:-.025em} .form .paso{white-space:nowrap;font:500 12px/1 Mono;letter-spacing:.14em;color:#6B6B68} .barra-paso{height:2px;background:#DDD8CE;margin:14px 0 22px;position:relative;overflow:hidden} .barra-paso i{position:absolute;inset:0;background:var(--bosque);transform-origin:left;transform:scaleX(.5);transition:transform .6s var(--ease)} .form.en2 .barra-paso i{transform:scaleX(1)} .form .desc{font-size:15px;color:#4a4a46;margin-bottom:22px} .campo{margin-bottom:16px} .campo label{display:block;font:600 14px/1.4 Inter;color:var(--carbon);margin-bottom:7px} .form a:focus-visible,.form button:focus-visible{outline:2px solid var(--bosque);outline-offset:3px} .campo input,.campo select{width:100%;height:52px;padding:0 15px;border:1px solid #857F72;border-radius:var(--r);background:#fff;font:400 16px Inter;color:var(--carbon);transition:border-color .2s,box-shadow .2s} .campo input:focus,.campo select:focus{outline:0;border-color:var(--bosque);box-shadow:0 0 0 3px rgba(15,81,50,.18)} .tel{display:grid;grid-template-columns:96px 1fr;gap:8px} .check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3a3a37;margin:10px 0} .check input{width:18px;height:18px;margin-top:2px;accent-color:var(--bosque);flex:none} .check a{color:var(--bosque)} .form .btn{width:100%;justify-content:center;margin-top:10px} .form .btn::before{background:var(--carbon)} .form .btn:hover{color:var(--crema)} .form .nota{text-align:center;margin-top:16px;font:500 11px/1.5 Mono;letter-spacing:.1em;color:#6B6B68;text-transform:uppercase} .form .aun{margin-top:14px;text-align:center;font-size:14px;color:#4a4a46} .form .aun a{color:var(--bosque)} .form .err{color:#9b1c1c;font-size:13px;margin-top:6px;display:none} .form .p2{display:none} .form.en2 .p1{display:none}.form.en2 .p2{display:block} .volver{background:none;border:0;font:500 14px Inter;color:var(--bosque);text-decoration:underline;cursor:pointer;margin-top:12px} /* Pie */ .pie{border-top:1px solid var(--linea);padding:110px 0 36px;overflow:hidden} .pie-top{display:grid;grid-template-columns:6fr 3fr 3fr;gap:56px;padding-bottom:88px} .pie h3.h4,.pie .mail h3.h4{margin-bottom:20px;font:500 11px/1 Mono;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:20px} .pie .mail h3{font-size:clamp(26px,2.6vw,36px);margin-bottom:12px} .pie .mail p{color:var(--gris);font-size:16px;margin-bottom:22px;max-width:460px} .mailrow{display:flex;gap:8px;max-width:480px} .mailrow input{flex:1;min-width:0;height:54px;padding:0 16px;background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);color:var(--crema);font:400 15px Inter} .mailrow button{height:54px;padding:0 22px;background:var(--crema);border:0;border-radius:var(--r);color:var(--carbon);font:600 14px Inter;cursor:pointer;white-space:nowrap;transition:background .3s} .mailrow button:hover{background:var(--senal)} .pie .check{color:var(--gris)}.pie .check a{color:var(--crema)} .pie ul{list-style:none}.pie li{margin-bottom:14px} .pie li a{color:var(--crema);text-decoration:none;font-size:16px;background:linear-gradient(var(--senal),var(--senal)) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease);padding-bottom:2px} .pie li a:hover{background-size:100% 1px} .marca-gig{font-family:Archivo;font-weight:900;font-stretch:125%;font-size:clamp(44px,10.3vw,152px);line-height:.82;letter-spacing:-.02em;white-space:nowrap;color:var(--crema)} .marca-gig .barra-v{display:block;height:clamp(6px,.9vw,14px);width:27%;background:var(--senal);margin-top:clamp(16px,1.8vw,28px)} .pie-firma{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:0;padding-top:44px;border-top:1px solid var(--linea);padding-bottom:44px;border-bottom:1px solid var(--linea)} .pie-marca{display:flex;align-items:center;gap:28px} .pie-marca .iso{height:56px;width:auto;padding-right:28px;border-right:1px solid var(--linea-f)} .pie-marca .logo-pie{height:50px;width:auto;margin-bottom:14px} .pie-firma p{font:500 12px/1.5 Mono;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)} .pie-firma span{font:500 11px/1.6 Mono;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)} .legal{padding-top:24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--gris-tono)} .legal a{color:var(--gris-tono);margin-right:18px;text-decoration:none}.legal a:hover{color:var(--crema)} .arriba{background:none;border:0;color:var(--gris);font:500 11px/1 Mono;letter-spacing:.16em;text-transform:uppercase;cursor:pointer} .arriba:hover{color:var(--crema)} .sr{position:absolute;left:-9999px} .saltar{position:fixed;left:16px;top:-60px;z-index:80;background:var(--crema);color:var(--carbon);padding:10px 14px;border-radius:var(--r);font:600 14px Inter;text-decoration:none;transition:top .2s} .saltar:focus{top:12px} .barra-movil{display:none} /* Estado inicial de lo que se anima (solo con JS) */ .js .rv{opacity:0;transform:translateY(28px)} @media (max-width:1080px){.firma-cab{display:none}} @media (max-width:900px){ :root{--m:20px;--sec:88px} .nav a:not(.mini){display:none} .hero{display:flex;flex-direction:column;min-height:0;padding:110px 0 0} .hero>.wrap{order:1}.hero .foto{order:2;position:relative;width:100%;height:auto;aspect-ratio:4/4.6;margin-top:48px} .hero .foto::after{background:linear-gradient(180deg,var(--noche) 0%,rgba(11,13,12,0) 28%),linear-gradient(0deg,var(--noche) 0%,rgba(11,13,12,0) 35%)} .hero .pie-foto{bottom:22px;left:20px;right:auto;text-align:left} .hero .sub{font-size:18px} .hero h1{margin:20px 0 22px} .acciones .btn{width:100%;justify-content:center} .acciones{gap:12px} .hero .micro{letter-spacing:.08em} .baja{display:none} .slot{width:140px;margin:0 12px} .pista img{width:calc(var(--w)*.75)} .pista ul{gap:36px;padding-right:36px} .prob{grid-template-columns:1fr;gap:24px} .prob .fijo{position:static} .grafica{display:none} .item{min-height:0;padding:30px 0} .js .item{opacity:1} .puente{padding:96px 0} .puente-in{grid-template-columns:1fr;gap:56px} .movil{width:240px} .sistema{max-width:350px}.sistema .movil{width:192px} .reel-txt{font-size:16px;left:14px;right:46px} .capas{width:178px;top:6%;bottom:6%}.capas::before{left:-10px} .capa{padding:9px 10px 9px 40px;font-size:12.5px}.capa small{font-size:9.5px} .rot-movil{max-width:350px}.rot-movil p{width:192px}.rot-movil p+p{width:178px} .escena{order:2} .piezas{grid-template-columns:1fr 1fr;margin-top:56px;gap:0 16px} .pieza{padding:20px 0;border-bottom:1px solid var(--linea)} .quien{grid-template-columns:1fr;gap:40px} .cifras{grid-template-columns:1fr 1fr 1fr} .cifras div,.cifras div+div{padding:18px 8px 16px 0} .cifras div+div{padding-left:10px} .cifras span{font-size:12.5px} .cabsec{display:block;margin-bottom:36px}.cabsec p{margin-top:16px} .fila{grid-template-columns:1fr;gap:16px;padding:36px 0} .fila-n{right:0;top:30px;transform:none;font-size:96px} .precio{text-align:left} .pie5 .btn{width:100%;justify-content:center} .metodo .panel{min-height:0;padding:96px 0} .carril{margin-top:44px} .fases{flex-direction:column;width:auto} .fase{width:auto} .progreso{display:none} .faq{grid-template-columns:1fr;gap:28px} .indo-in{grid-template-columns:1fr;gap:36px} .indo-row{flex-direction:column}.indo-row input{flex:none;width:100%;height:56px}.indo-row .btn{width:100%;justify-content:center} .pase{padding:22px 22px}.pase-barra{left:22px;bottom:50px} .faq .izq{position:static} .pq .resp p{padding-right:0} .cierre .wrap{grid-template-columns:1fr;gap:48px} .cierre .fondo{width:100%;height:520px} .form{padding:30px 22px} .pie-top{grid-template-columns:1fr;gap:40px;padding-bottom:56px} .pie-top>*{min-width:0} .mailrow{flex-direction:column}.mailrow input{flex:none;width:100%;height:54px}.mailrow button{width:100%} .form h3{font-size:24px} .hero .etq{font-size:11px;letter-spacing:.12em} .cifras{grid-template-columns:1fr} .cifras div,.cifras div+div{padding:16px 0;border-left:0;border-top:1px solid var(--linea)} .cifras div:first-child{border-top:0} .grano{display:none} .arriba,.legal a{display:inline-block;padding:6px 0} .pie .pend{white-space:normal} .pie{padding-top:80px} .legal{flex-direction:column} .barra-movil{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(11,13,12,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--linea);transform:translateY(110%);transition:transform .4s var(--ease)} .barra-movil:not(.ver){visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s} .barra-movil.ver{transform:none;visibility:visible} .barra-movil .btn{width:100%;justify-content:center} .prov{bottom:auto;top:86px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} *{animation:none!important;transition:none!important} .js .rv{opacity:1;transform:none} .js #h1{visibility:visible}.js .hero .h-in,.js .hero .pie-foto{opacity:1}.js .hero .marco{opacity:1} .js .item{opacity:1} .js .lit .lw{color:inherit} .pista{flex-wrap:wrap;width:auto;justify-content:center}.pista .dup{display:none!important} .grano{display:none} } /* ================= Ronda 3 · piezas comunes (la home lleva una copia en su