/* ============================================================ Pelatech — sistema 2026 Un mismo sistema, dos temas que elige la persona que visita: [data-theme="light"] Registro — claro, documento institucional [data-theme="dark"] Consola — oscuro sobrio, producto/técnico El tema por defecto es oscuro y se fija en el del HTML. ============================================================ */ :root{ --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --max:1280px; --pad:clamp(20px,4vw,56px); --r:5px; --ease:cubic-bezier(.2,.7,.2,1); } /* ---- Tema claro · Registro ---- */ :root, [data-theme="light"]{ color-scheme:light; --bg:#f7f7f5; --surface:#ffffff; --surface-2:#f1f1ed; --ink:#0f1211; --ink-2:#414a46; --muted:#656d68; /* subido de #79817c: AA 4.5:1 en 10-12px */ --line:#e2e2dc; --line-2:#cfcfc7; --accent:#14503f; --accent-ink:#ffffff; --accent-soft:#e6efea; --warn:#a8571d; --hw:600; /* headline weight */ --hs:1; /* headline scale */ --shadow:0 1px 2px rgba(15,18,17,.04),0 8px 24px -16px rgba(15,18,17,.12); } /* ---- Tema oscuro · Consola ---- */ [data-theme="dark"]{ color-scheme:dark; --bg:#0d100f; --surface:#141817; --surface-2:#1a1f1d; --ink:#e9ebe9; --ink-2:#a3aca7; --muted:#7f8884; /* subido de #6d7671: AA 4.5:1 en 10-12px */ --line:#232826; --line-2:#2f3633; --accent:#4fa87f; --accent-ink:#07100c; --accent-soft:#152420; --warn:#d99a4e; --hw:700; --hs:1.1; --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -20px rgba(0,0,0,.7); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"ss02","cv05"} a{color:var(--accent);text-decoration:none} a:hover{color:var(--ink)} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} img,svg{display:block;max-width:100%} ::selection{background:var(--accent);color:var(--accent-ink)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .mono{font-family:var(--mono)} .nums{font-variant-numeric:tabular-nums} .eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .rule{height:1px;background:var(--line);border:0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ============ NAV ============ */ .nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:64px;display:flex;align-items:center;gap:32px} .logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink)} .logo:hover{color:var(--ink)} .logo .mk{width:22px;height:22px;border-radius:4px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600} .nav-links{display:flex;gap:26px;margin-left:auto;font-size:14px} .nav-links a{color:var(--ink-2);position:relative;padding:4px 0} .nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .3s var(--ease)} .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{right:0} .nav-actions{display:flex;align-items:center;gap:10px} .nav-cta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:9px 15px;border-radius:var(--r);background:var(--accent);color:var(--accent-ink);transition:opacity .2s} .nav-cta:hover{opacity:.88;color:var(--accent-ink)} @media(max-width:820px){.nav-links{display:none}.nav-actions{margin-left:auto}} /* ---- toggle de tema ---- */ .theme-toggle{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink-2);transition:border-color .2s,color .2s} .theme-toggle:hover{border-color:var(--ink-2);color:var(--ink)} .theme-toggle svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round} .theme-toggle .i-sun{display:none} [data-theme="dark"] .theme-toggle .i-sun{display:block} [data-theme="dark"] .theme-toggle .i-moon{display:none} /* ============ BUTTONS ============ */ .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:var(--r);font-size:14.5px;font-weight:500;transition:opacity .2s,background .2s,border-color .2s,transform .2s} .btn .ar{transition:transform .25s var(--ease)} .btn:hover .ar{transform:translateX(3px)} .btn-pri{background:var(--accent);color:var(--accent-ink)} .btn-pri:hover{opacity:.88;color:var(--accent-ink)} .btn-sec{border:1px solid var(--line-2);color:var(--ink);background:var(--surface)} .btn-sec:hover{border-color:var(--ink-2);color:var(--ink)} .btn-ghost{color:var(--ink-2);padding:13px 0} .btn-ghost:hover{color:var(--accent)} /* ============ HERO ============ */ .hero{border-bottom:1px solid var(--line);position:relative} .h-claim{font-weight:var(--hw);letter-spacing:-.03em;line-height:1.02;text-wrap:balance} .h-claim em{font-style:normal;color:var(--accent)} #hero-1 .h1-in{padding:clamp(64px,9vw,116px) 0 0;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,6vw,80px);align-items:start} #hero-1 .h-claim{font-size:calc(clamp(38px,5.6vw,74px) * var(--hs))} #hero-1 .lede{margin-top:22px;font-size:17.5px;line-height:1.6;color:var(--ink-2);max-width:52ch} #hero-1 .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;align-items:center} #hero-1 .idx{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden} #hero-1 .idx-h{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:var(--surface-2)} #hero-1 .idx-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink)} #hero-1 .idx-row:last-child{border-bottom:0} #hero-1 .idx-row:hover{background:var(--surface-2);color:var(--ink)} #hero-1 .idx-row .n{font-family:var(--mono);font-size:11px;color:var(--muted)} #hero-1 .idx-row .nm{font-size:14.5px;font-weight:500;letter-spacing:-.01em} #hero-1 .idx-row .sub{font-size:12.5px;color:var(--muted);margin-top:1px} #hero-1 .idx-row .go{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.1em} @media(max-width:940px){#hero-1 .h1-in{grid-template-columns:1fr;gap:40px}} /* ============ FACTS strip ============ */ .facts{border-top:1px solid var(--line);margin-top:clamp(48px,7vw,80px)} .facts-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,1fr)} .fact{padding:22px 24px 24px;border-right:1px solid var(--line)} .fact:first-child{padding-left:0} .fact:last-child{border-right:0} .fact .v{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1} .fact .v em{font-style:normal;color:var(--accent)} .fact .l{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.45;max-width:24ch} @media(max-width:820px){.facts-in{grid-template-columns:1fr 1fr}.fact{border-bottom:1px solid var(--line)}.fact:nth-child(2n){border-right:0}.fact:nth-child(3){padding-left:0}.fact:nth-last-child(-n+2){border-bottom:0}} /* ============ SECTION scaffolding ============ */ .sec{padding:clamp(72px,10vw,128px) 0;border-bottom:1px solid var(--line)} .sec.alt{background:var(--surface-2)} .sec-h{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:clamp(36px,5vw,56px)} .sec-h .t{font-size:clamp(28px,3.6vw,44px);font-weight:var(--hw);letter-spacing:-.025em;line-height:1.08;max-width:26ch;margin-top:14px;text-wrap:balance} .sec-h .t em{font-style:normal;color:var(--accent)} .sec-h .s{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:40ch} @media(max-width:820px){.sec-h{grid-template-columns:1fr;align-items:start;gap:18px}} /* ============ PRODUCT CARDS · destacados ============ */ .prods{display:flex;flex-direction:column;gap:20px} .prod{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .3s;color:var(--ink)} .prod:hover{border-color:var(--line-2);color:var(--ink)} .prod:nth-child(even) .p-vis{order:-1;border-right:1px solid var(--line);border-left:0} .p-body{padding:clamp(24px,3.2vw,40px);display:flex;flex-direction:column;gap:14px} .p-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .p-top .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)} .badge{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-2)} .badge.live{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)} .prod h3{font-size:clamp(23px,2.6vw,32px);font-weight:var(--hw);letter-spacing:-.025em;line-height:1.12} .prod h3 em{font-style:normal;color:var(--accent)} .prod p{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:52ch} .p-specs{display:grid;grid-template-columns:1fr;gap:0;margin-top:6px;border-top:1px solid var(--line)} .p-specs .sp{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:baseline} .p-specs .sp:last-child{border-bottom:0} .p-specs .sp .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .p-specs .sp .v{color:var(--ink-2)} .p-cta{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--accent)} .prod:hover .p-cta .ar{transform:translateX(3px)} .p-cta .ar{transition:transform .25s var(--ease)} .p-vis{border-left:1px solid var(--line);background:var(--surface-2);position:relative;min-height:300px;overflow:hidden} @media(max-width:900px){.prod,.prod:nth-child(even){grid-template-columns:1fr}.prod:nth-child(even) .p-vis{order:0;border-left:0;border-right:0}.p-vis{border-left:0;border-top:1px solid var(--line);min-height:230px}} /* ============ PRODUCT TILES · el resto ============ Grilla secundaria de #productos. Sumar un proyecto = un más. */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px} .tile{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:10px;min-height:172px;transition:border-color .25s,transform .25s var(--ease);color:var(--ink)} .tile:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--ink)} .tile .tt{display:flex;justify-content:space-between;align-items:center;gap:10px} .tile h3{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.2} .tile p{font-size:13.5px;color:var(--ink-2);line-height:1.5} .tile .go{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent)} @media(max-width:880px){.tiles{grid-template-columns:1fr 1fr}} @media(max-width:600px){.tiles{grid-template-columns:1fr}} /* --- visual: plano de parcelas (AgroConnect) --- */ .v-plot{position:absolute;inset:0;padding:26px} .v-plot .gridlines{position:absolute;inset:0;background:linear-gradient(color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px) 0 0/28px 100%;opacity:.7} .v-plot .boundary{position:absolute;left:9%;top:12%;right:9%;bottom:16%;border:1.5px solid var(--accent);border-radius:2px;background:color-mix(in srgb,var(--accent) 5%,transparent)} .v-plot .lot{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)} .v-plot .lot.ex{border-color:var(--warn);border-style:dashed;background:color-mix(in srgb,var(--warn) 10%,transparent)} .v-plot .mk{position:absolute;width:19px;height:19px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:600;transform:translate(-50%,-50%)} .v-plot .mk.w{background:var(--warn);color:#fff} .v-plot .legend{position:absolute;left:26px;bottom:22px;display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .v-plot .legend span{display:inline-flex;align-items:center;gap:5px} .v-plot .legend i{width:9px;height:9px;border-radius:2px;background:var(--accent);display:inline-block} .v-plot .legend i.w{background:var(--warn)} .v-plot .tag{position:absolute;top:22px;right:26px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} /* --- visual: elevación técnica (durlock / rejas) --- */ .v-elev{position:absolute;inset:0;padding:30px 30px 44px} .v-elev .frame{position:absolute;left:12%;top:16%;right:12%;bottom:26%;border:1.5px solid var(--accent)} .v-elev .stud{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--accent) 50%,transparent)} .v-elev .rail{position:absolute;left:0;right:0;height:1px;background:color-mix(in srgb,var(--accent) 50%,transparent)} .v-elev .bar{position:absolute;top:0;bottom:0;width:2.5px;background:color-mix(in srgb,var(--accent) 70%,transparent);border-radius:1px} .v-elev .dim{position:absolute;left:12%;right:12%;bottom:17%;height:1px;background:var(--line-2)} .v-elev .dim::before,.v-elev .dim::after{content:'';position:absolute;top:-3px;width:1px;height:7px;background:var(--line-2)} .v-elev .dim::before{left:0}.v-elev .dim::after{right:0} .v-elev .dim-l{position:absolute;left:50%;bottom:calc(17% - 18px);transform:translateX(-50%);font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--surface-2);padding:0 6px;font-variant-numeric:tabular-nums} .v-elev .cote{position:absolute;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .v-elev .cote.tl{top:24px;left:30px} .v-elev .cote.tr{top:24px;right:30px} .v-elev .cote.bl{bottom:16px;left:30px} .v-elev .cote.br{bottom:16px;right:30px} .v-elev .hatch{position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 7px,color-mix(in srgb,var(--accent) 7%,transparent) 7px 8px)} /* ============ ESTUDIO ============ */ .about{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,64px);align-items:start} @media(max-width:900px){.about{grid-template-columns:1fr;gap:32px}} .manifesto{font-size:clamp(24px,3.2vw,38px);font-weight:var(--hw);letter-spacing:-.025em;line-height:1.22;max-width:24ch;text-wrap:balance} .manifesto em{font-style:normal;color:var(--accent)} .manifesto s{text-decoration:none;color:var(--muted)} .founder{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:24px} .founder .row1{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px} .founder .av{position:relative;width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;overflow:hidden} .founder .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .founder h4{font-size:17px;font-weight:600;letter-spacing:-.015em} .founder .rl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px} .founder p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:12px} .founder .meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .founder .meta .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .founder .meta .v{font-size:13px;margin-top:3px;color:var(--ink-2);font-variant-numeric:tabular-nums} .values{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--line)} .val{padding:26px 24px 0;border-right:1px solid var(--line)} .val:first-child{padding-left:0} .val:last-child{border-right:0} .val .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--accent)} .val .ic{width:32px;height:32px;margin:16px 0 14px;color:var(--accent)} .val .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round} .val h5{font-size:16px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px} .val p{font-size:13.5px;color:var(--ink-2);line-height:1.6} @media(max-width:900px){.values{grid-template-columns:1fr 1fr}.val{border-bottom:1px solid var(--line);padding-bottom:26px}.val:nth-child(2n){border-right:0}.val:nth-child(3){padding-left:0}.val:nth-last-child(-n+2){border-bottom:0}} @media(max-width:560px){.values{grid-template-columns:1fr}.val{border-right:0;padding-left:0}} /* ============ PROCESO ============ */ .steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)} .step{padding:0 20px;border-right:1px solid var(--line);position:relative} .step:first-child{padding-left:0} .step:last-child{border-right:0} .step .bar{height:2px;background:var(--line-2);margin-bottom:22px} .step:nth-child(1) .bar,.step:nth-child(2) .bar,.step:nth-child(3) .bar{background:var(--accent)} .step .ix{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .step .ix b{color:var(--accent);font-weight:500} .step h5{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:9px} .step p{font-size:13.5px;color:var(--ink-2);line-height:1.6} .step .dur{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 9px} @media(max-width:1000px){.steps{grid-template-columns:1fr 1fr}.step{border-bottom:1px solid var(--line);padding-bottom:26px}.step:nth-child(2n){border-right:0}.step:nth-child(3),.step:nth-child(5){padding-left:0}.step:last-child{border-bottom:0}} @media(max-width:560px){.steps{grid-template-columns:1fr}.step{border-right:0;padding-left:0}} /* ============ CONTACTO ============ */ .contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start} @media(max-width:900px){.contact{grid-template-columns:1fr;gap:36px}} .contact .lead .t{font-size:clamp(28px,3.6vw,46px);font-weight:var(--hw);letter-spacing:-.03em;line-height:1.06;margin-top:14px;text-wrap:balance} .contact .lead .t em{font-style:normal;color:var(--accent)} .contact .lead p{font-size:15px;color:var(--ink-2);line-height:1.65;margin-top:18px;max-width:38ch} .contact .direct{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px} .contact .direct a{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink)} .contact .direct a:hover{color:var(--accent)} .contact .direct a .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:64px;flex-shrink:0} form.cf{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:clamp(22px,3vw,32px);display:grid;gap:16px} form.cf .two{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:560px){form.cf .two{grid-template-columns:1fr}} .fld{display:grid;gap:7px} .fld label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} .fld input,.fld textarea,.fld select{font-family:var(--sans);font-size:14.5px;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:4px;padding:11px 12px;transition:border-color .2s;width:100%} .fld textarea{resize:vertical;min-height:104px;line-height:1.55} .fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--accent)} .fld input::placeholder,.fld textarea::placeholder{color:var(--muted)} .fld .err{font-size:12px;color:var(--warn);display:none} .fld.bad input,.fld.bad textarea{border-color:var(--warn)} .fld.bad .err{display:block} .chips{display:flex;flex-wrap:wrap;gap:7px} .chips input{position:absolute;opacity:0;width:0;height:0} .chips label{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-2);border:1px solid var(--line-2);border-radius:99px;padding:7px 13px;cursor:pointer;transition:all .18s} .chips input:checked+label{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .chips input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px} form.cf .foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px} form.cf .note{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1;min-width:180px} .cf-ok{border:1px solid var(--accent);background:var(--accent-soft);border-radius:var(--r);padding:26px;display:none} .cf-ok.on{display:block} .cf-ok h4{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px} .cf-ok p{font-size:14px;color:var(--ink-2);line-height:1.6} /* ============ FOOTER ============ */ .ft{padding:clamp(56px,7vw,88px) 0 32px;background:var(--surface-2)} .ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} @media(max-width:880px){.ft-grid{grid-template-columns:1fr 1fr;gap:32px}} .ft-brand p{font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:34ch;margin-top:14px} .ft h6{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:500} .ft ul{list-style:none;display:flex;flex-direction:column;gap:9px} .ft ul a{font-size:13.5px;color:var(--ink-2)} .ft ul a:hover{color:var(--accent)} .ft-btm{margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .ft-btm .st{display:inline-flex;align-items:center;gap:7px} .ft-btm .st i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block} /* ============ REVEAL ============ */ .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}