:root{--bg:#000;--panel:#0b120d;--g1:#0c8040;--g2:#2b9c49;--g3:#54b947;--g4:#79c142;--tx:#f2f6f3;--mut:#a9b8ad;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--g3)}
:focus-visible{outline:3px solid var(--g4);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:5;background:#000e;backdrop-filter:blur(8px);border-bottom:1px solid #1b2a20}
nav{display:flex;align-items:center;justify-content:space-between;height:64px}
nav b{font-weight:800;font-size:20px;letter-spacing:.2px}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav ul a{color:var(--tx);text-decoration:none;font-weight:600;font-size:15px}
nav ul a:hover{color:var(--g4)}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;padding:56px 0 72px}
.hero img{width:100%;max-width:440px;justify-self:center;display:block}
h1{font-size:clamp(34px,5vw,56px);line-height:1.08;font-weight:800;margin:0 0 18px}
.hero p{color:var(--mut);font-size:19px;max-width:46ch;margin:0 0 28px}
.btn{display:inline-block;background:var(--g1);color:#fff;padding:13px 26px;border-radius:999px 14px 999px 14px;font-weight:600;text-decoration:none}
.btn:hover{background:var(--g2)}
.btn.o{background:none;border:2px solid var(--g1);margin-left:10px}
.bar{height:14px;background:linear-gradient(90deg,var(--g1) 0 25%,var(--g2) 25% 50%,var(--g3) 50% 75%,var(--g4) 75%)}
section{padding:72px 0}
h2{font-size:clamp(28px,4vw,40px);margin:0 0 12px;font-weight:800}
.lead{color:var(--mut);max-width:60ch;margin:0 0 36px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{background:var(--panel);border:1px solid #1b2a20;border-left:6px solid var(--g1);border-radius:6px 28px 6px 28px;padding:26px}
.card:nth-child(2){border-left-color:var(--g2)}.card:nth-child(3){border-left-color:var(--g3)}.card:nth-child(4){border-left-color:var(--g4)}
.card h3{margin:0 0 8px;font-size:20px}
.card p{margin:0;color:var(--mut);font-size:16px}
#contacto{background:var(--panel)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact dl{margin:0}.contact dt{font-weight:600;color:var(--g4);margin-top:16px}.contact dd{margin:0}
form{display:grid;gap:14px}
label{font-weight:600;font-size:15px;display:grid;gap:6px}
input,textarea{font:inherit;color:var(--tx);background:#000;border:1px solid #2a3d30;border-radius:10px;padding:12px}
button{font:inherit;font-weight:600;border:0;cursor:pointer}
.legal{max-width:760px}
.legal h3{margin:28px 0 6px;color:var(--g4);font-size:19px}
.legal p,.legal li{color:var(--mut);font-size:16px}
footer{border-top:1px solid #1b2a20;padding:28px 0;color:var(--mut);font-size:15px;text-align:center}
input,textarea{width:100%;font-size:16px}
html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}img{max-width:100%;height:auto}
.contact dd{overflow-wrap:anywhere}
@media(min-width:1400px){.wrap{max-width:1200px}body{font-size:18px}}
@media(max-width:1024px){.wrap{padding:0 28px}.hero{gap:24px;padding:44px 0 56px}section{padding:56px 0}.contact{gap:28px}}
@media(max-width:760px){body{font-size:16px}.wrap{padding:0 18px}.hero,.contact{grid-template-columns:1fr}.hero{text-align:center;padding:28px 0 44px}.hero p{margin-left:auto;margin-right:auto}.hero img{max-width:260px;order:-1}nav{justify-content:center}nav b{display:none}nav ul{gap:20px}section{padding:44px 0}.btn{display:block;text-align:center}.btn.o{margin:12px 0 0}}
@media(max-width:380px){nav ul{gap:12px}nav ul a{font-size:14px}h1{font-size:30px}}

.hero picture{display:block;justify-self:center;width:100%;max-width:440px}
.hero img{aspect-ratio:460/480}
@media(max-width:760px){.hero picture{order:-1;max-width:260px}}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.estado{margin:0;min-height:1.4em;font-weight:600}
.estado.ok{color:var(--g4)}.estado.error{color:#ff8a80}
button:disabled{opacity:.6;cursor:wait}