:root { --navy:#032a59; --orange:#fd7a05; --white:#fff; --ink:#082544; --muted:#56708a; --line:#cbd6df; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font-family:"Archivo Narrow", Arial, sans-serif; font-size:18px; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; z-index:20; top:12px; left:12px; padding:12px 18px; background:var(--orange); color:#fff; font-family:Rajdhani,sans-serif; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transform:translateY(-180%); transition:transform .2s; }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
.topbar { height:84px; padding:0 5.5vw; display:flex; justify-content:space-between; align-items:center; background:#fff; position:relative; z-index:3; }
.brand img { width:160px; display:block; }
nav { display:flex; gap:33px; font-size:16px; text-transform:uppercase; font-weight:600; letter-spacing:.06em; }
nav a { transition:color .2s; } nav a:hover { color:var(--orange); }
.menu-toggle { display:none; }
.button { display:inline-flex; align-items:center; gap:16px; min-height:52px; padding:14px 22px; border:1px solid rgba(3,42,89,.2); border-radius:12px; background:#fff; font-family:Rajdhani,sans-serif; font-weight:700; font-size:16px; line-height:1; text-transform:uppercase; letter-spacing:.06em; box-shadow:-8px 11px 21px rgba(1,25,52,.24); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform:translateY(-3px); box-shadow:-11px 16px 27px rgba(1,25,52,.28); }.button:active { transform:translateY(1px); box-shadow:-4px 6px 13px rgba(1,25,52,.24); }.button-arrow { color:var(--orange); font-size:21px; line-height:10px; }.button-brand { display:block; width:auto; height:16px; margin-left:-8px; }
.button-small { min-height:44px; padding:10px 17px; border-radius:10px; color:var(--navy); border-color:#b6c5d0; box-shadow:-5px 7px 15px rgba(3,42,89,.18); }
.hero { min-height:calc(100vh - 84px); position:relative; color:#fff; display:flex; align-items:center; overflow:hidden; }
.hero-image, .hero-overlay { position:absolute; inset:0; }.hero-image { background:url("assets/hero-naval-ingenieria.png") center center / cover no-repeat; }.hero-overlay { background:linear-gradient(90deg,rgba(2,24,52,.96) 0%,rgba(2,29,61,.89) 52%,rgba(2,29,61,.38) 78%,rgba(2,29,61,.12) 100%),linear-gradient(0deg,rgba(1,22,47,.62),transparent 45%); }
.hero-content { position:relative; z-index:1; width:min(690px,90vw); margin-left:11.5vw; padding:78px 0 92px; }.eyebrow { color:var(--orange); font-family:Rajdhani,sans-serif; font-size:15px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 22px; }.eyebrow.dark { color:var(--orange); }
h1,h2,h3 { font-family:Rajdhani,sans-serif; text-transform:uppercase; margin:0; font-weight:700; line-height:.91; letter-spacing:.01em; } h1 { font-size:clamp(58px,6.9vw,112px); letter-spacing:.018em; text-shadow:0 4px 18px rgba(1,18,38,.22); } .hero-title span,.hero-title em { display:block; } h1 em,h2 em,.statement em { font-style:normal; color:var(--orange); }.hero-copy { font-size:23px; line-height:1.25; max-width:470px; margin:29px 0 34px; color:#e9eff4; }.button-primary { min-height:46px; padding:11px 18px; font-size:15px; color:#fff; border-color:rgba(255,255,255,.58); background:var(--orange); box-shadow:-9px 12px 24px rgba(0,12,29,.42); }.button-primary:hover { background:#ff8b25; box-shadow:-12px 17px 31px rgba(0,12,29,.47); }.button-primary .button-arrow { color:#fff; }
.hero-foot { position:absolute; z-index:1; bottom:28px; left:5.5vw; right:5.5vw; display:flex; justify-content:space-between; font-family:Rajdhani,sans-serif; font-size:14px; font-weight:600; letter-spacing:.12em; }
.section { padding:135px 11.5vw; }.section-intro { max-width:880px; }.section h2 { font-size:clamp(43px,4.8vw,76px); }.specialty-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:80px; border-top:1px solid var(--line); }.specialty-grid article { min-height:370px; padding:30px 35px 24px 0; border-right:1px solid var(--line); margin-right:30px; }.specialty-grid article:last-child { border:none; }.number { font-family:Rajdhani,sans-serif; color:var(--orange); font-weight:700; font-size:18px; }.specialty-grid h3 { font-size:34px; margin:43px 0 18px; }.specialty-grid p { font-size:18px; line-height:1.32; color:var(--muted); max-width:310px; }.specialty-grid ul { list-style:none; margin:28px 0 0; padding:0; font-size:16px; line-height:1.55; }.specialty-grid li::before { content:"—"; color:var(--orange); margin-right:8px; }
.method { display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; background:var(--navy); color:#fff; }.method h2 { font-size:clamp(40px,4.4vw,69px); }.method-copy>p:last-child { max-width:425px; color:#c8d7e6; line-height:1.35; margin-top:28px; }.steps { margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.35); }.steps li { display:grid; grid-template-columns:70px 1fr; gap:18px; padding:21px 0 25px; border-bottom:1px solid rgba(255,255,255,.35); }.steps span { font-family:Rajdhani,sans-serif; color:var(--orange); font-size:19px; font-weight:700; }.steps h3 { font-size:29px; }.steps p { margin:8px 0 0; color:#c8d7e6; line-height:1.25; }
.engineering-tools { background:#f5f8fa; }.tools-heading { display:grid; grid-template-columns:1fr 1.25fr; column-gap:7vw; align-items:end; }.tools-heading .eyebrow { grid-column:1 / -1; }.tools-heading h2 { font-size:clamp(42px,4.7vw,74px); }.tools-heading>p:last-child { max-width:470px; margin:0 0 4px; color:var(--muted); line-height:1.35; }.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:72px; border-top:1px solid var(--line); }.tool-grid article { min-height:334px; padding:30px 30px 26px 0; margin-right:30px; border-right:1px solid var(--line); }.tool-grid article:last-child { margin-right:0; border-right:0; }.tool-grid h3 { margin:35px 0 17px; font-size:32px; }.tool-grid p { margin:0; max-width:335px; color:var(--muted); line-height:1.32; }.tool-grid small { display:block; max-width:320px; margin-top:22px; padding-left:13px; border-left:2px solid var(--orange); color:#496680; font-size:14px; line-height:1.28; }.tools-note { max-width:840px; margin:37px 0 0; color:#5a7084; font-size:15px; line-height:1.35; }
.statement { padding:116px 11.5vw; background:#edf3f6; }.statement p { margin:0; font-family:Rajdhani,sans-serif; text-transform:uppercase; font-size:clamp(49px,6vw,94px); line-height:.9; font-weight:700; }
.contact { position:relative; overflow:hidden; background:var(--navy); color:#fff; text-align:center; padding-top:115px; padding-bottom:76px; }.contact:before { content:""; position:absolute; width:70vw; height:70vw; border:1px solid rgba(255,255,255,.10); border-radius:50%; left:-12vw; top:-44vw; }.contact>* { position:relative; }.contact-logo { width:187px; margin-bottom:78px; }.contact h2 { font-size:clamp(48px,5.5vw,86px); }.contact-copy { max-width:530px; margin:27px auto 35px; color:#cfdae4; line-height:1.32; }.button-contact { justify-content:center; align-items:center; min-height:58px; padding-top:16px; padding-bottom:16px; color:var(--navy); border-color:#fff; background:#fff; box-shadow:-9px 13px 26px rgba(0,0,0,.34); }.contact-lockup { display:inline-flex; align-items:flex-end; gap:9px; min-height:18px; padding-bottom:1px; }.button-contact .button-label { display:block; line-height:1; }.button-contact .button-brand { display:block; width:auto; height:15px; margin:0; transform:translateY(-3px); }.button-contact .button-arrow { flex:0 0 auto; align-self:center; margin-left:4px; }.button-contact:hover { background:#f7fafc; box-shadow:-12px 18px 32px rgba(0,0,0,.39); }
.whatsapp-float { position:fixed; z-index:10; right:28px; bottom:27px; display:grid; place-items:center; width:58px; height:58px; border:2px solid #fff; border-radius:50%; background:#25d366; color:#fff; font-size:31px; box-shadow:-8px 12px 24px rgba(0,22,47,.42); transition:transform .2s, box-shadow .2s; }.whatsapp-float:hover { color:#fff; transform:translateY(-3px) scale(1.04); box-shadow:-11px 17px 31px rgba(0,22,47,.48); }.whatsapp-float:active { transform:translateY(1px) scale(1); box-shadow:-4px 6px 13px rgba(0,22,47,.38); }
.motion-ready .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }.motion-ready .reveal.is-visible { opacity:1; transform:none; }
.site-footer { background:#082544; color:#e5edf3; }.footer-main { display:grid; grid-template-columns:1.35fr .75fr 1fr; gap:7vw; padding:72px 11.5vw 60px; }.footer-brand img { display:block; width:162px; height:auto; }.footer-brand p { max-width:310px; margin:23px 0 0; color:#b8cad9; line-height:1.35; }.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:11px; font-size:16px; }.footer-title { margin:0 0 10px; color:var(--orange); font-family:Rajdhani,sans-serif; font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }.footer-column a { transition:color .2s, transform .2s; }.footer-column a:hover { color:var(--orange); transform:translateX(3px); }.footer-column span { color:#b8cad9; }.footer-contact a { color:#fff; }.footer-legal { display:flex; justify-content:space-between; gap:24px; padding:19px 5.5vw; border-top:1px solid rgba(255,255,255,.17); background:#061e3e; color:#bccbd7; font-family:Rajdhani,sans-serif; font-size:12px; font-weight:700; letter-spacing:.075em; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
@media (max-width:800px) { .topbar { padding:0 6vw; height:68px; }.brand img { width:126px; }.button-small { display:none; }.menu-toggle { width:44px; height:44px; padding:10px 8px; display:flex; flex-direction:column; justify-content:center; gap:5px; border:1px solid #b6c5d0; background:#fff; color:var(--navy); cursor:pointer; }.menu-toggle span { display:block; width:100%; height:2px; background:currentColor; transition:transform .2s, opacity .2s; }.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } nav { position:absolute; z-index:2; top:68px; left:0; right:0; display:none; flex-direction:column; gap:0; padding:8px 6vw 16px; border-top:1px solid #d9e2e9; border-bottom:1px solid #b6c5d0; background:#fff; box-shadow:0 12px 20px rgba(3,42,89,.12); } nav.is-open { display:flex; } nav a { padding:15px 0; border-bottom:1px solid #e5ebef; } nav a:last-child { border-bottom:0; }.hero { min-height:calc(100svh - 68px); }.hero-content { width:86vw; margin-left:7vw; padding:54px 0 82px; }.hero .eyebrow { font-size:14px; }.hero-title { font-size:clamp(44px,12.2vw,60px); }.hero-copy { font-size:19px; margin:24px 0 30px; }.hero .button { min-height:44px; gap:12px; padding:10px 16px; font-size:14px; }.hero-foot { left:7vw; right:7vw; font-size:10px; }.section { padding:85px 7vw; }.specialty-grid { grid-template-columns:1fr; margin-top:50px; }.specialty-grid article { min-height:0; padding:26px 0 35px; margin:0; border-right:0; border-bottom:1px solid var(--line); }.specialty-grid h3 { margin-top:25px; }.method { grid-template-columns:1fr; gap:55px; }.engineering-tools { padding-top:82px; padding-bottom:78px; }.tools-heading { display:block; }.tools-heading>p:last-child { margin:24px 0 0; }.tool-grid { grid-template-columns:1fr; margin-top:48px; }.tool-grid article { min-height:0; padding:26px 0 33px; margin:0; border-right:0; border-bottom:1px solid var(--line); }.tool-grid h3 { margin-top:24px; }.tool-grid small { margin-top:18px; }.tools-note { margin-top:28px; font-size:14px; }.statement { padding:84px 7vw; }.contact { padding:80px 7vw 44px; }.contact-logo { margin-bottom:55px; }.whatsapp-float { width:54px; height:54px; right:18px; bottom:72px; font-size:29px; }.footer-main { grid-template-columns:.8fr 1.2fr; column-gap:24px; row-gap:38px; padding:56px 7vw 43px; }.footer-brand { grid-column:1 / -1; }.footer-brand p { margin-top:19px; }.footer-column { gap:9px; }.footer-legal { flex-direction:column; gap:7px; padding:17px 7vw; font-size:11px; line-height:1.3; } }