:root{--navy:#0F2747;--teal:#1B8A78;--teal-dk:#146B5D;--ink:#14233B;--mute:#51607A;--line:#DCE3EA;--bg:#F3F6F8;--w:#fff}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font:17px/1.65 Figtree,system-ui,sans-serif;color:var(--ink);background:var(--w)}
h1,h2,h3{font-family:Sora,system-ui,sans-serif;line-height:1.15;color:var(--navy)}
a{color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:18px;max-width:20ch}
p.lead{color:var(--mute);max-width:60ch}

/* Cabecera */
header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
header img{height:46px;display:block}
nav ul{display:flex;gap:28px;list-style:none;padding:0}
nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--mute);padding:6px 0;border-bottom:2px solid transparent}
nav a:hover,nav a.on{color:var(--navy);border-color:var(--teal)}
nav a.cta{background:var(--teal);color:var(--w);padding:9px 18px;border-radius:6px;border:0}
nav a.cta:hover{background:var(--teal-dk);color:var(--w)}
#menu{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:8px 12px;font:inherit;color:var(--navy);cursor:pointer}

/* Inicio */
#inicio{padding:72px 0 0;background:linear-gradient(180deg,var(--bg),var(--w))}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.hero h1{font-size:clamp(2.1rem,5vw,3.5rem);letter-spacing:-.02em;margin-bottom:22px}
.hero p{font-size:1.15rem;color:var(--mute);max-width:46ch;margin-bottom:32px}
.btns{display:flex;gap:14px;flex-wrap:wrap;padding-bottom:72px}
.btn{display:inline-block;padding:14px 26px;border-radius:6px;font-weight:600;text-decoration:none;border:2px solid var(--navy);color:var(--navy)}
.btn.main{background:var(--navy);color:var(--w)}
.btn.main:hover{background:var(--teal);border-color:var(--teal)}
.btn:not(.main):hover{background:var(--navy);color:var(--w)}
.sky{display:flex;align-items:flex-end;gap:10px;height:360px}
.sky i{flex:1;background:var(--navy);border-radius:3px 3px 0 0;height:var(--h);transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i)*90ms)}
.sky i:nth-child(odd){background:#1c3d6b}
.sky i.t{background:var(--teal)}
@keyframes grow{from{transform:scaleY(0)}}

/* Nosotros */
.about{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.vals{display:grid;gap:22px}
.vals div{border-left:4px solid var(--teal);padding-left:18px}
.vals h3{font-size:1.1rem;margin-bottom:4px}
.vals p{color:var(--mute);font-size:.98rem}

/* Servicios */
#servicios{background:var(--bg)}
.svc{margin-top:40px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;padding:36px 0;border-bottom:1px solid var(--line)}
.row h3{font-size:1.4rem;padding-left:18px;border-left:6px solid var(--navy)}
.row:nth-child(2) h3{border-color:var(--teal)}
.row:nth-child(3) h3{border-color:#1c3d6b}
.row:nth-child(4) h3{border-color:#7BC3B6}
.row p{color:var(--mute);margin-bottom:12px}
.row ul{padding-left:20px;columns:2;column-gap:28px;color:var(--ink);font-size:.96rem}
.row li{margin-bottom:6px;break-inside:avoid}

/* Clientes */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.seg div{padding:26px;border:1px solid var(--line);border-top:5px solid var(--teal);border-radius:4px}
.seg h3{font-size:1.1rem;margin-bottom:8px}
.seg p{color:var(--mute);font-size:.97rem}
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:36px;align-items:center}
.logos img{max-width:100%;max-height:60px;margin:auto;display:block;filter:grayscale(1);opacity:.8}

/* Contacto */
#contacto{background:var(--navy);color:var(--w)}
#contacto h2{color:var(--w)}
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
#contacto p.lead{color:#B8C6DA}
.info{margin-top:28px;display:grid;gap:10px}
.info a{color:#7BE0CB;font-weight:600}
form{display:grid;gap:16px}
label{font-size:.92rem;font-weight:500;display:grid;gap:6px}
input,select,textarea{font:inherit;padding:12px 14px;border-radius:6px;border:1px solid #38527A;background:#0B1F3A;color:var(--w);width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--teal);border-color:var(--teal)}
textarea{min-height:130px;resize:vertical}
button.send{background:var(--teal);color:var(--w);border:0;border-radius:6px;padding:14px 26px;font:600 1rem Figtree,sans-serif;cursor:pointer;justify-self:start}
button.send:hover{background:var(--teal-dk)}
footer{background:#0A1B33;color:#8EA0BA;font-size:.9rem;padding:26px 0}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:860px){
 section{padding:64px 0}
 #menu{display:block}
 nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--w);border-bottom:1px solid var(--line);padding:12px 24px 20px}
 nav.open{display:block}
 nav ul{flex-direction:column;gap:6px}
 nav a.cta{display:inline-block;margin-top:8px}
 .hero,.about,.row,.contact{grid-template-columns:1fr}
 .sky{height:220px}
 .seg{grid-template-columns:1fr}
 .row ul{columns:1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sky i{animation:none}}

body{min-height:100vh;display:flex;flex-direction:column}main{flex:1}
section h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:18px;max-width:20ch}
#contacto h1{color:var(--w)}
.seg a{display:inline-block;margin-top:12px;color:var(--teal-dk);font-weight:600}
.wa{position:fixed;right:18px;bottom:18px;z-index:20;background:#128C4A;color:var(--w);text-decoration:none;font-weight:600;padding:12px 20px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.wa:hover{background:#0E6E3A}
footer a{color:#7BE0CB}
.hp{position:absolute;left:-9999px}
#msg:empty{display:none}
#msg{padding:14px 18px;border-radius:6px;font-weight:500}
#msg.ok{background:rgba(27,138,120,.2);border:1px solid var(--teal);color:#9FF0DC}
#msg.err{background:rgba(255,120,100,.15);border:1px solid #FF8A78;color:#FFC2B8}
#msg a{color:#fff}
/*v2*/
#inicio{position:relative;padding:0;min-height:calc(100vh - 68px);display:flex;align-items:center;color:#fff;background:linear-gradient(105deg,rgba(15,39,71,.95) 35%,rgba(15,39,71,.55)),url(img/hero.jpg) center/cover,linear-gradient(135deg,#0F2747,#1c3d6b)}
#inicio .wrap{width:100%}
.hero{align-items:center;padding-top:72px;padding-bottom:72px}
.hero h1{color:#fff}
.hero p{color:#D5DEEB}
.btns{padding-bottom:0}
#inicio .btn{border-color:#fff;color:#fff;transition:background .25s,color .25s,transform .25s}
#inicio .btn:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}
#inicio .btn.main{background:var(--teal);border-color:var(--teal)}
#inicio .btn.main:hover{background:#fff;border-color:#fff;color:var(--navy)}
.sky{height:400px}
.sky i,.sky i:nth-child(odd){background:rgba(255,255,255,.14)}
.sky i.t{background:var(--teal)}
.hero>div:first-child{animation:up .9s .1s both}
@keyframes up{from{opacity:0;transform:translateY(22px)}}
.pw{overflow:hidden}
.ph{height:220px;background:linear-gradient(rgba(15,39,71,.12),rgba(15,39,71,.12)),var(--img) center/cover,linear-gradient(135deg,#0F2747,#1c3d6b);transition:transform .7s}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.card{display:block;text-decoration:none;color:inherit;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,39,71,.15)}
.card:hover .ph,.svc2:hover .ph{transform:scale(1.06)}
.card .tx{padding:22px}
.card h3{font-size:1.1rem;margin-bottom:6px}
.card p{color:var(--mute);font-size:.97rem}
.card .tx span{display:inline-block;margin-top:10px;color:var(--teal-dk);font-weight:600}
.svc{border-top:0}
.svc2{display:grid;grid-template-columns:1fr 1fr;margin-bottom:28px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 24px rgba(15,39,71,.08);transition:transform .3s,box-shadow .3s}
.svc2:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,39,71,.14)}
.svc2:nth-child(even) .pw{order:2}
.svc2 .ph{height:100%;min-height:320px}
.svc2 .tx{padding:36px}
.svc2 h3{font-size:1.4rem;margin:6px 0 10px}
.svc2 p{color:var(--mute);margin-bottom:12px}
.svc2 ul{padding-left:20px;font-size:.96rem}
.svc2 li{margin-bottom:6px}
.num{font:700 3rem/1 Sora,sans-serif;color:rgba(27,138,120,.28)}
.seg>div,.vals>div{transition:transform .3s,box-shadow .3s}
.seg>div:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(15,39,71,.12)}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media(max-width:860px){.sky{display:none}#inicio{min-height:auto}.cards,.svc2{grid-template-columns:1fr}.svc2 .pw{order:0!important}.svc2 .ph{min-height:220px}.svc2 .tx{padding:26px}}
@media(prefers-reduced-motion:reduce){.hero>div:first-child{animation:none}.js .reveal{opacity:1;transform:none;transition:none}.card,.svc2,.ph{transition:none}}
/*v3*/
.wa{width:58px;height:58px;padding:0;display:grid;place-items:center;border-radius:50%;background:#25D366;transition:transform .25s,background .25s}
.wa:hover{background:#1EBE5A;transform:scale(1.08)}
.wa svg{width:32px;height:32px;fill:#fff}
.msg:empty{display:none}
.msg{padding:12px 16px;border-radius:6px;font-weight:500;font-size:.95rem}
.quick{background:#fff;color:var(--ink);padding:28px;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.35);display:grid;gap:14px}
.quick h2{font-size:1.35rem;margin:0;max-width:none}
.quick p{margin:0;max-width:none;font-size:.95rem;color:var(--mute)}
.quick input,.quick select{background:#fff;color:var(--ink);border:1px solid #B9C5D3}
.quick input:focus,.quick select:focus{border-color:var(--teal)}
.quick .send{justify-self:stretch;text-align:center}
.quick .msg.ok{background:#E3F5F0;border:1px solid var(--teal);color:#0E5A4D}
.quick .msg.err{background:#FDECEA;border:1px solid #E58A7E;color:#8A2A1D}
.quick .msg a{color:#8A2A1D}