/* ============================================================
BINOMA PRO — Identidad "A" (oscuro inmersivo + WebGL)
Landing completa. Tokens + componentes + animaciones.
============================================================ */
:root{
--ink:#08080c; --bg2:#0e0e16; --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.06);
--fg:#f4f3f8; --muted:#9a9ab0; --faint:#70707e; --line:rgba(255,255,255,.10);
--purple:#6C47FF; --purple-2:#b06bff; --pink:#FF4D8D; --orange:#FF8A3D;
--grad:linear-gradient(100deg,#6C47FF 0%,#b06bff 45%,#FF4D8D 100%);
--maxw:1180px; --radius:22px; --ease:cubic-bezier(.16,1,.3,1);
--s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s8:96px; --s10:130px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,sans-serif;background:var(--ink);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--purple);color:#fff}
:focus-visible{outline:2px solid var(--purple-2);outline-offset:3px;border-radius:6px}
.display{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}/* ---- Fondo WebGL persistente ---- */
canvas#bg{position:fixed;inset:0;z-index:0;display:block}
/* Fallback sin WebGL (móvil / equipos modestos): gradiente estático on-brand */
body.no-webgl canvas#bg{display:none}
body.no-webgl::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(60vw 60vw at 80% -5%, rgba(108,71,255,.28), transparent 60%),
radial-gradient(55vw 55vw at 10% 15%, rgba(255,77,141,.18), transparent 60%)}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(120% 70% at 50% -5%,transparent 38%,rgba(8,8,12,.55) 100%),linear-gradient(180deg,transparent 55%,var(--ink) 99%)}
main,header.nav,footer{position:relative;z-index:2}/* ---- Texto gradiente / marcador ---- */
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk{position:relative;display:inline-block;white-space:nowrap}
.mk::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.1em;height:.32em;background:var(--purple);
z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .7s .15s var(--ease);opacity:.85}
.reveal.in .mk::after,.mk.in::after{transform:scaleX(1)}/* ---- Kicker ---- */
.kicker{font-family:"Space Grotesk";font-weight:600;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--purple-2);display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:28px;height:2px;background:var(--purple)}
.kicker.center{justify-content:center}.kicker.center::before{display:none}/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:999px;
font-family:"Space Grotesk";font-weight:600;font-size:1rem;cursor:pointer;border:1px solid transparent;white-space:nowrap;
transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s}
.btn svg{width:20px;height:20px}
.btn-p{background:var(--purple);color:#fff}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(108,71,255,.5)}
.btn-g{background:rgba(255,255,255,.03);color:#fff;border-color:var(--line)}
.btn-g:hover{background:rgba(255,255,255,.09);transform:translateY(-3px);border-color:rgba(255,255,255,.25)}
.btn-wa{background:#25D366;color:#062b16}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,211,102,.4)}/* ---- NAV ---- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.nav.scrolled{background:rgba(8,8,12,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.logo{font-family:"Space Grotesk";font-weight:700;font-size:1.5rem}.logo b{color:var(--purple)}
.logo-img{height:32px;width:auto;display:block}
.nav-links{display:none;gap:var(--s4);align-items:center}
.nav-links a{font-size:.92rem;color:var(--muted);font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--fg)}
.nav-cta{display:none}
.burger{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;cursor:pointer}
@media(min-width:960px){.nav-links,.nav-cta{display:flex}.burger{display:none}}/* drawer */
.drawer{position:fixed;inset:0;z-index:300;background:var(--ink);display:flex;flex-direction:column;padding:24px}
.drawer[hidden]{display:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center}
.drawer nav{display:flex;flex-direction:column;gap:22px;margin-top:48px;font-family:"Space Grotesk";font-size:1.7rem;font-weight:600}/* ---- HERO ---- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 var(--s8)}
.badge{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.84rem;color:var(--muted);margin-bottom:var(--s4);opacity:0;animation:up .8s .15s forwards var(--ease)}
.badge .stars{color:#ffb44c;letter-spacing:2px}
.hero h1{font-size:clamp(3rem,9.5vw,7rem);max-width:15ch;margin-bottom:var(--s4)}
.hero h1 .l{display:inline-block;opacity:0;transform:translateY(38px);animation:up .9s forwards var(--ease)}
.hero-lead{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--muted);max-width:56ch;line-height:1.7;margin-bottom:var(--s5);opacity:0;animation:up 1s .85s forwards var(--ease)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);opacity:0;animation:fade 1s 1.05s forwards}
.hero-micro{margin-top:var(--s4);opacity:0;animation:fade 1s 1.3s forwards}
.rotator .word{display:inline-block;transition:opacity .35s,transform .35s var(--ease)}
.rotator .word.out{opacity:0;transform:translateY(-12px)}
@keyframes up{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}/* ---- Secciones ---- */
section{scroll-margin-top:90px}
.block{padding:var(--s10) 0}
.head{max-width:680px;margin-bottom:var(--s6)}
.head h2{font-size:clamp(2rem,5vw,3.4rem);margin:14px 0 var(--s3);line-height:1.05}
.head p{color:var(--muted);font-size:1.1rem;line-height:1.7}/* ---- Marquee ---- */
.trust{padding:var(--s6) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .lab{text-align:center;margin-bottom:var(--s4)}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-t{display:flex;gap:var(--s8);align-items:center;padding-right:var(--s8);animation:scroll-x 28s linear infinite;flex-shrink:0}
.marquee:hover .marquee-t{animation-play-state:paused}
.marquee-t span{font-family:"Space Grotesk";font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:600;color:var(--faint);white-space:nowrap;transition:color .3s}
.marquee-t span:hover{color:var(--fg)}
@keyframes scroll-x{to{transform:translateX(-50%)}}/* ---- Stats ---- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s3);text-align:center}
@media(min-width:880px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat .n{font-family:"Space Grotesk";font-weight:700;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;letter-spacing:-.03em}
.stat .l{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;margin-top:10px}/* ---- Glass cards ---- */
.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}}
.glass{padding:34px 30px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(12px);position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .4s}
.glass::before{content:"";position:absolute;inset:0;border-radius:var(--radius);opacity:0;transition:.4s;background:radial-gradient(400px at var(--mx,50%) var(--my,0),rgba(108,71,255,.18),transparent 60%)}
.glass:hover{transform:translateY(-8px);border-color:rgba(108,71,255,.5)}
.glass:hover::before{opacity:1}
.glass .ico{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:var(--s3);background:rgba(108,71,255,.14);color:var(--purple-2);border:1px solid rgba(108,71,255,.3)}
.glass .ico svg{width:26px;height:26px}
.glass .n{font-family:"Space Grotesk";color:var(--purple-2);font-weight:700;font-size:.9rem}
.glass .tag{display:block;font-family:"Space Grotesk";font-size:.7rem;color:var(--pink);text-transform:uppercase;letter-spacing:.12em;margin:8px 0 6px}
.glass h3{font-family:"Space Grotesk";font-weight:600;font-size:1.25rem;margin:12px 0 10px}
.glass p{color:var(--muted);font-size:.96rem;line-height:1.6}/* ---- CTA band ---- */
.cta-band{border-radius:28px;padding:var(--s8) var(--s4);text-align:center;position:relative;overflow:hidden;background:var(--grad)}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 50% 0,rgba(255,255,255,.25),transparent)}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(1.8rem,4.5vw,2.8rem);color:#fff;letter-spacing:-.02em;margin-bottom:var(--s3);max-width:20ch;margin-inline:auto}
.cta-band p{color:rgba(255,255,255,.92);font-size:1.1rem;max-width:52ch;margin:0 auto var(--s5)}
.cta-band .btn-dark{background:var(--ink);color:#fff}
.cta-band .btn-dark:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.45)}/* ---- Why ---- */
.why-grid{display:grid;grid-template-columns:1fr;gap:var(--s4) var(--s5)}
@media(min-width:760px){.why-grid{grid-template-columns:1fr 1fr}}
.why{border-top:2px solid var(--line);padding-top:var(--s3)}
.why .num{font-family:"Space Grotesk";font-weight:700;color:var(--pink)}
.why h3{font-family:"Space Grotesk";font-weight:600;font-size:1.2rem;margin:10px 0}
.why p{color:var(--muted);font-size:.96rem;line-height:1.65}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s6)}
.chip{padding:9px 18px;border:1px solid var(--line);border-radius:999px;font-size:.9rem;color:var(--muted);transition:.25s}
.chip:hover{border-color:var(--purple);color:var(--fg)}/* ---- Plans ---- */
.plans{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:960px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{display:flex;flex-direction:column;padding:36px 30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);position:relative;transition:transform .35s var(--ease),border-color .35s}
.plan:hover{transform:translateY(-8px);border-color:rgba(108,71,255,.4)}
.plan.featured{background:linear-gradient(180deg,rgba(108,71,255,.16),var(--surface));border-color:transparent}
.plan.featured::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.plan .pop{position:absolute;top:-12px;left:30px;background:var(--grad);color:#fff;font-family:"Space Grotesk";font-size:.72rem;font-weight:700;padding:6px 14px;border-radius:999px;letter-spacing:.06em}
.plan h3{font-family:"Space Grotesk";font-weight:600;font-size:1.25rem;margin-bottom:6px}
.plan .ideal{color:var(--faint);font-size:.85rem;margin-bottom:var(--s3);min-height:40px}
.plan .price{font-family:"Space Grotesk";font-weight:700;font-size:2.1rem;letter-spacing:-.02em;margin-bottom:var(--s4)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:var(--s5);flex:1}
.plan li{display:flex;gap:10px;font-size:.92rem;color:var(--muted);line-height:1.45}
.plan li b{color:var(--purple-2)}/* ---- Testimonials ---- */
.tcards{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.tcards{grid-template-columns:1fr 1fr}}
.tcard{padding:34px 30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tcard .stars{color:#ffb44c;letter-spacing:2px;margin-bottom:var(--s3)}
.tcard blockquote{font-size:1.02rem;line-height:1.7;color:var(--fg);margin-bottom:var(--s4)}
.tcard .who strong{font-family:"Space Grotesk"}
.tcard .who span{display:block;color:var(--faint);font-size:.85rem}/* ---- FAQ ---- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:var(--s3) 0}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);cursor:pointer;font-family:"Space Grotesk";font-size:1.12rem;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{width:24px;height:24px;flex-shrink:0;position:relative;transition:transform .3s var(--ease)}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;background:var(--purple);border-radius:2px;transition:.3s}
.faq .plus::before{top:11px;left:2px;right:2px;height:2px}
.faq .plus::after{left:11px;top:2px;bottom:2px;width:2px}
.faq details[open] .plus{transform:rotate(90deg)}
.faq details[open] .plus::after{transform:scaleY(0)}
.faq details p{color:var(--muted);font-size:.98rem;line-height:1.7;padding-top:var(--s3);max-width:720px}/* ---- Contact form ---- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media(min-width:960px){.contact-grid{grid-template-columns:1fr 1fr;align-items:center}}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:34px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--s3)}
.field label{font-size:.85rem;font-weight:600;color:#cfcfd8}
.field input,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.03);color:var(--fg);font:inherit;transition:border-color .2s,box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(108,71,255,.16)}/* ---- Footer ---- */
footer{border-top:1px solid var(--line);padding:var(--s8) 0 var(--s5);background:var(--ink)}
.fgrid{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media(min-width:760px){.fgrid{grid-template-columns:2fr 1fr 1fr 1fr}}
.fgrid h4{font-family:"Space Grotesk";font-weight:600;margin-bottom:var(--s3)}
.fgrid a,.fgrid li{color:var(--muted);font-size:.92rem;line-height:2;list-style:none}
.fgrid a:hover{color:var(--fg)}
.fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);color:var(--faint);font-size:.85rem}/* ---- WhatsApp float ---- */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:250;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .25s}
.wa-float:hover{transform:scale(1.1)}/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[style*="--d"]{transition-delay:var(--d)}/* ============================================================
DETALLES PREMIUM (añadidos)
============================================================ *//* ---- Barra de progreso de scroll ---- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:400;background:var(--grad);box-shadow:0 0 12px rgba(108,71,255,.6);transition:width .1s linear}/* ---- Textura grain sutil sobre todo ---- */
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}/* ---- Índice de sección (mono) ---- */
.sidx{font-family:"Space Grotesk";font-weight:600;font-size:.74rem;letter-spacing:.18em;color:var(--faint);display:block;margin-bottom:14px}
.sidx b{color:var(--purple-2)}/* ---- Chips flotantes de prueba en héroe ---- */
.proof{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s5);opacity:0;animation:fade 1s 1.4s forwards}
.proof .pc{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:14px;background:var(--surface);
border:1px solid var(--line);backdrop-filter:blur(10px);font-size:.86rem;color:var(--fg);transition:transform .3s var(--ease),border-color .3s}
.proof .pc:hover{transform:translateY(-3px);border-color:rgba(108,71,255,.5)}
.proof .pc b{font-family:"Space Grotesk";color:var(--purple-2)}
.proof .pc .dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84}/* ---- Sección PROCESO (timeline oscuro) ---- */
.steps{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--s4)}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr);gap:0}}
.step{position:relative;padding:var(--s4) var(--s3) var(--s4) 0}
.step .sn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;
color:#fff;background:var(--purple);position:relative;z-index:1;margin-bottom:var(--s3)}
.step::after{content:"";position:absolute;left:23px;top:23px;width:100%;height:2px;background:var(--line)}
.step:last-child::after{display:none}
@media(max-width:759px){
.step{padding:0 0 var(--s4) 64px}
.step .sn{position:absolute;left:0;top:0;margin:0}
.step::after{left:23px;top:46px;width:2px;height:100%}
}
.step h3{font-family:"Space Grotesk";font-weight:600;font-size:1.18rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.95rem;line-height:1.6}/* ---- Franja de garantía ---- */
.guarantee{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.guarantee div{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.92rem}
.guarantee svg{width:20px;height:20px;color:var(--purple-2);flex-shrink:0}/* ---- Botón: flecha que se desliza ---- */
.btn-p svg,.btn-g svg{transition:transform .25s var(--ease)}
.btn-p:hover svg,.btn-g:hover svg{transform:translateX(4px)}/* ---- Footer social + back-to-top ---- */
.socials{display:flex;gap:12px;margin-top:var(--s3)}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);transition:.25s var(--ease)}
.socials a:hover{color:#fff;border-color:var(--purple);transform:translateY(-3px);background:rgba(108,71,255,.12)}
.socials svg{width:18px;height:18px}
.totop{position:fixed;bottom:90px;right:24px;z-index:250;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:var(--surface-2);border:1px solid var(--line);color:#fff;backdrop-filter:blur(10px);cursor:pointer;
opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:.3s var(--ease)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--purple);background:rgba(108,71,255,.18)}/* ============================================================
BLOQUE DE PAGO / RESERVA
============================================================ */
.pay-card{max-width:560px;margin:0 auto;text-align:center;padding:var(--s6) var(--s5)}
.pay-amount .price{font-size:3rem;margin:6px 0}
.pay-amount>span{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;font-family:"Space Grotesk"}
.pay-amount small{color:var(--faint);font-size:.85rem}
.pay-btns{display:flex;flex-direction:column;gap:12px;margin:var(--s5) 0 var(--s4)}
.btn-pp{background:#ffc439;color:#0a0a0c}
.btn-pp:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(255,196,57,.35)}
.pay-trust{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;color:var(--faint);font-size:.78rem;line-height:1.6}
.pay-note{margin-top:14px;font-size:.75rem;color:var(--pink);display:none}
.pay-note.show{display:block}/* ============================================================
FORMULARIO DINÁMICO (labels flotantes + validación + estados)
============================================================ */
.f2{position:relative;margin-bottom:var(--s4)}
.f2 .ctrl{position:relative}
.f2 input,.f2 textarea,.f2 select{
width:100%;padding:22px 16px 10px;border:1px solid var(--line);border-radius:13px;
background:rgba(255,255,255,.03);color:var(--fg);font:inherit;transition:border-color .2s,box-shadow .2s;
appearance:none;-webkit-appearance:none}
.f2 textarea{min-height:96px;resize:vertical;padding-top:26px}
.f2 select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239a9ab0' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.f2 label{position:absolute;left:16px;top:16px;color:var(--faint);font-size:1rem;pointer-events:none;
transition:.2s var(--ease);transform-origin:left}
.f2 input::placeholder,.f2 textarea::placeholder{color:transparent}
/* flota cuando hay foco o contenido */
.f2 input:focus+label,.f2 input:not(:placeholder-shown)+label,
.f2 textarea:focus+label,.f2 textarea:not(:placeholder-shown)+label,
.f2 select:focus+label,.f2 select.filled+label{
top:8px;font-size:.72rem;letter-spacing:.04em;color:var(--purple-2);font-family:"Space Grotesk";font-weight:600}
.f2 input:focus,.f2 textarea:focus,.f2 select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(108,71,255,.16)}
.f2 .req{color:var(--pink)}
/* error */
.f2.err input,.f2.err textarea,.f2.err select{border-color:#ff5e7a;box-shadow:0 0 0 4px rgba(255,77,141,.14)}
.f2 .msg{display:none;color:#ff8aa0;font-size:.78rem;margin-top:7px;padding-left:4px}
.f2.err .msg{display:block;animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* éxito check inline */
.f2.ok .ctrl::after{content:"";position:absolute;right:16px;top:18px;width:18px;height:18px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%233ddc84' stroke-width='2.4'%3E%3Cpath d='M3 9l4 4 8-9'/%3E%3C/svg%3E") no-repeat center}
.f2.ok select{background-position:right 40px center}
/* honeypot oculto */
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
/* botón con estados */
.btn[aria-busy="true"]{pointer-events:none;opacity:.8}
.btn .spin{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn[aria-busy="true"] .spin{display:inline-block}
.btn[aria-busy="true"] .lbl{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
/* panel de éxito */
.form-done{display:none;text-align:center;padding:var(--s5) var(--s3)}
.form-done.show{display:block;animation:up .5s var(--ease)}
.form-done .ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto var(--s3);
background:rgba(61,220,132,.14);border:1px solid rgba(61,220,132,.4)}
.form-done .ic svg{width:30px;height:30px;color:#3ddc84}
.form-done h3{font-family:"Space Grotesk";font-size:1.4rem;margin-bottom:10px}
.form-done p{color:var(--muted)}
.form-alt{display:flex;align-items:center;gap:14px;margin:var(--s4) 0 0;color:var(--faint);font-size:.82rem}
.form-alt::before,.form-alt::after{content:"";flex:1;height:1px;background:var(--line)}
.form-err-top{display:none;background:rgba(255,77,141,.1);border:1px solid rgba(255,77,141,.3);color:#ff9ab0;
padding:12px 16px;border-radius:12px;font-size:.88rem;margin-bottom:var(--s3)}
.form-err-top.show{display:block}@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.marquee-t{animation:none}
.mk::after{transform:scaleX(1)}
.hero h1 .l,.badge,.hero-lead,.hero-cta,.hero-micro,.proof{opacity:1;animation:none}
.f2.err .msg{animation:none}
}/* ===== Casos: showcase de proyectos reales + avatares ===== */
.showcase{display:grid;grid-template-columns:1fr;gap:var(--s6);margin-bottom:var(--s8)}
@media(min-width:820px){.showcase{grid-template-columns:1fr 1fr}}
.case-devices{position:relative;margin-bottom:var(--s4)}
.browser{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0c0c14;box-shadow:0 30px 70px rgba(0,0,0,.5);transition:transform .45s var(--ease)}
.case:hover .browser{transform:translateY(-6px)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--line)}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#3a3a46}
.browser-bar i:nth-child(1){background:#ff5f57}.browser-bar i:nth-child(2){background:#febc2e}.browser-bar i:nth-child(3){background:#28c840}
.browser-bar .url{margin-left:10px;font-size:.76rem;color:var(--muted);background:rgba(0,0,0,.3);border-radius:999px;padding:4px 14px}
.browser img{display:block;width:100%;height:auto}
.phone{position:absolute;right:-8px;bottom:-26px;width:22%;max-width:118px;border-radius:20px;overflow:hidden;border:3px solid #16161f;background:#000;box-shadow:0 18px 44px rgba(0,0,0,.6)}
.phone img{display:block;width:100%;height:auto}
.case-meta{padding-right:24%}
.case-meta h3{font-family:"Space Grotesk";font-weight:700;font-size:1.35rem;margin:10px 0 6px}
.case-meta p{color:var(--muted);font-size:.98rem;line-height:1.55}
.tcard .who{display:flex;align-items:center;gap:13px}
.tcard .who .avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;font-size:1.02rem;color:#fff;background:var(--grad);letter-spacing:.02em}/* Páginas legales — hereda tokens de pro.css, layout de lectura */
body.legal-page{background:var(--bg2)}
.legal-nav{position:sticky;top:0;z-index:50;background:rgba(8,8,12,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.legal-nav .nav-in{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.legal-nav a.back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;font-weight:500;transition:color .2s}
.legal-nav a.back:hover{color:var(--fg)}
.legal-nav a.back svg{width:18px;height:18px}.legal{max-width:820px;margin:0 auto;padding:var(--s8) var(--s3) var(--s10)}
.legal .eyebrow{font-family:"Space Grotesk";font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-2)}
.legal h1{font-family:"Space Grotesk";font-weight:700;letter-spacing:-.02em;font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:14px 0 10px}
.legal .updated{color:var(--faint);font-size:.85rem;margin-bottom:var(--s6)}
.legal h2{font-family:"Space Grotesk";font-weight:600;font-size:1.4rem;margin:var(--s6) 0 var(--s2);padding-top:var(--s3);border-top:1px solid var(--line)}
.legal h3{font-family:"Space Grotesk";font-weight:600;font-size:1.08rem;margin:var(--s4) 0 8px;color:var(--fg)}
.legal p,.legal li{color:#c8c8d2;line-height:1.8;font-size:1rem}
.legal p{margin-bottom:var(--s2)}
.legal ul,.legal ol{margin:0 0 var(--s2) 1.2em;display:flex;flex-direction:column;gap:8px}
.legal a{color:var(--purple-2);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--pink)}
.legal strong{color:var(--fg)}
.legal .box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s4);margin:var(--s4) 0}
.legal .box.warn{border-color:rgba(255,77,141,.35);background:rgba(255,77,141,.06)}
.legal table{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:.92rem}
.legal th,.legal td{text-align:left;padding:12px 14px;border:1px solid var(--line);vertical-align:top}
.legal th{font-family:"Space Grotesk";color:var(--fg);background:var(--surface)}
.legal .toc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s4);margin-bottom:var(--s6)}
.legal .toc strong{display:block;font-family:"Space Grotesk";margin-bottom:10px}
.legal .toc ol{margin:0 0 0 1.2em}
.legal-foot{border-top:1px solid var(--line);padding:var(--s5) 0;text-align:center;color:var(--faint);font-size:.85rem}
.legal-foot a{color:var(--muted)}.legal-foot a:hover{color:var(--fg)}
Protección de datosPolítica de Privacidad
Última actualización: 18 de agosto de 2026
En Binoma nos tomamos en serio tu privacidad. Esta política explica cómo tratamos tus datos personales conforme al Reglamento (UE) 2016/679 (RGPD) y la Ley Orgánica 3/2018, de 5 de diciembre, de Protección de Datos Personales y garantía de los derechos digitales (LOPDGDD).
Contenido- Responsable del tratamiento
- Datos que recogemos
- Finalidad y base jurídica
- Plazo de conservación
- Destinatarios y encargados
- Transferencias internacionales
- Tus derechos
- Seguridad
1. Responsable del tratamiento
- Responsable: Pedro Augusto de Faria (autónomo) — «Binoma»
- NIE: Z4500084R
- Domicilio: Getafe, Madrid (España)
- Teléfono: +34 633 07 51 06
- Email: info@binoma.es
2. Datos que recogemos
Tratamos únicamente los datos que nos facilitas voluntariamente a través del formulario de contacto o de los canales habilitados:
- Nombre y apellidos
- Correo electrónico
- Teléfono
- El contenido del mensaje y los datos del proyecto que nos comuniques
Si realizas un pago, los datos de la transacción los tratan directamente las pasarelas de pago (Stripe, PayPal); Binoma no almacena datos de tarjetas.
3. Finalidad y base jurídica
| Finalidad | Base jurídica (RGPD art. 6) |
|---|
| Atender tu consulta y elaborar presupuestos | Consentimiento del interesado / medidas precontractuales (art. 6.1.a y 6.1.b) |
| Prestar los servicios contratados y facturar | Ejecución de un contrato (art. 6.1.b) y obligación legal (art. 6.1.c) |
| Comunicaciones sobre tu proyecto | Interés legítimo / ejecución del contrato (art. 6.1.f y 6.1.b) |
No se realizan decisiones automatizadas ni elaboración de perfiles con efectos jurídicos.
4. Plazo de conservación
Conservamos tus datos durante el tiempo necesario para atender tu solicitud y, en su caso, mientras dure la relación contractual. Tras su finalización, los conservaremos debidamente bloqueados durante los plazos legales aplicables (por ejemplo, obligaciones fiscales y mercantiles) y los suprimiremos una vez prescritas las posibles responsabilidades.
5. Destinatarios y encargados del tratamiento
No cedemos tus datos a terceros, salvo obligación legal. Para prestar el servicio trabajamos con proveedores que actúan como encargados del tratamiento:
- Proveedor de alojamiento web: HostGator Brasil (HostGator do Brasil Ltda. — Grupo Newfold Digital, Inc.); servidor VPS OCI NVMe en Brasil
- QUIC.cloud (LiteSpeed Technologies Inc., EE.UU.) — Red CDN/edge para entrega optimizada de contenidos estáticos
- n8n auto-alojado en el VPS — automatización interna de flujos de trabajo
- Stripe / PayPal — procesamiento de pagos
- Google (EE. UU.) — Google Analytics 4 y Google Ads: analítica y medición de campañas del sitio web
- Meta Platforms (EE. UU.) — Meta Pixel para medición y remarketing del sitio, y WhatsApp si nos contactas por ese canal
6. Transferencias internacionales
Algunos proveedores pueden tratar datos fuera del Espacio Económico Europeo. En tales casos, dichas transferencias se amparan en garantías adecuadas (cláusulas contractuales tipo de la Comisión Europea o decisiones de adecuación) conforme a los artículos 44 y siguientes del RGPD.
7. Tus derechos
Puedes ejercer en cualquier momento los siguientes derechos escribiendo a info@binoma.es, indicando el derecho que deseas ejercer y adjuntando copia de un documento identificativo:
- Acceso a tus datos personales
- Rectificación de datos inexactos
- Supresión («derecho al olvido»)
- Oposición al tratamiento
- Limitación del tratamiento
- Portabilidad de tus datos
- Retirar el consentimiento prestado en cualquier momento
Si consideras que tus derechos no han sido atendidos, puedes presentar una reclamación ante la Agencia Española de Protección de Datos (www.aepd.es).
8. Medidas de seguridad
Aplicamos las medidas técnicas y organizativas apropiadas para garantizar un nivel de seguridad adecuado al riesgo, incluido el cifrado de las comunicaciones mediante SSL/TLS.
document.querySelectorAll('[data-year]').forEach(e=>e.textContent=new Date().getFullYear());document.querySelectorAll('[data-today]').forEach(e=>e.textContent=new Date().toLocaleDateString('es-ES',{year:'numeric',month:'long',day:'numeric'}));
