/* =============================================================
   1. TOKENS
   ============================================================= */
:root{
  --bg:            #F3F6F6;
  --surface:       #FFFFFF;
  --surface-tint:  #EAF0F1;
  --ink:           #0F1D3A;
  --ink-soft:      #3B4A66;
  --ink-mute:      #6B7A90;
  --line:          #C1D1E0;
  --line-strong:   #9FB4C9;
  --accent:        #00629B;
  --accent-2:      #3AAAD6;
  --accent-ink:    #FFFFFF;
  --urgent:        #C23B2E;
  --urgent-ink:    #FFFFFF;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:            #0A1420;
    --surface:       #101E30;
    --surface-tint:  #0D1826;
    --ink:           #E8EEF4;
    --ink-soft:      #AEBED2;
    --ink-mute:      #7C8CA3;
    --line:          #22344A;
    --line-strong:   #33496A;
    --accent:        #3AAAD6;
    --accent-2:      #6FC6E8;
    --accent-ink:    #06121F;
    --urgent:        #E2685A;
    --urgent-ink:    #200705;
  }
}
:root[data-theme="dark"]{
  --bg:            #0A1420;
  --surface:       #101E30;
  --surface-tint:  #0D1826;
  --ink:           #E8EEF4;
  --ink-soft:      #AEBED2;
  --ink-mute:      #7C8CA3;
  --line:          #22344A;
  --line-strong:   #33496A;
  --accent:        #3AAAD6;
  --accent-2:      #6FC6E8;
  --accent-ink:    #06121F;
  --urgent:        #E2685A;
  --urgent-ink:    #200705;
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*,*::before,*::after{box-sizing:border-box; margin:0;}
html{-webkit-text-size-adjust:100%; tab-size:2; scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip; overscroll-behavior-y:none;
}
img,svg,video{display:block; max-width:100%;}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none;}
a{color:inherit; text-decoration:none;}
p{text-wrap:pretty;}
h1,h2,h3,h4{font-family:var(--font-display); text-wrap:balance; line-height:1.02; letter-spacing:0.01em;}
ul{list-style:none; padding:0;}
::selection{background:var(--accent); color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  padding:.7rem 1.1rem; background:var(--ink); color:var(--bg);
  font-family:var(--font-mono); font-size:.85rem; border-radius:2px;
}
.skip-link:focus{top:1rem;}

/* =============================================================
   3. UTILITIES
   ============================================================= */
.container{max-width:1180px; margin-inline:auto; padding-inline:1.25rem;}
.ic{width:1.15em; height:1.15em; flex:none;}
.ic-inline{width:1em; height:1em; vertical-align:-0.15em; margin-left:.25em;}

/* =============================================================
   4. TYPOGRAPHY
   ============================================================= */
.eyebrow{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
}
.section-lede{font-size:1.08rem; color:var(--ink-soft); max-width:56ch; margin-top:.75rem;}
.inline-link{color:var(--accent); font-weight:600; border-bottom:1px solid currentColor;}
.inline-link:hover{color:var(--accent-2);}

/* =============================================================
   5. COMPONENTS
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-weight:700; font-size:.92rem;
  padding:.75rem 1.25rem; border-radius:3px; white-space:nowrap;
  transition:transform .25s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn-lg{padding:.95rem 1.5rem; font-size:1rem;}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-2); transform:translateY(-2px);}
.btn-outline{border:1.5px solid var(--urgent); color:var(--urgent);}
.btn-outline:hover{background:var(--urgent); color:var(--urgent-ink); transform:translateY(-2px);}
.btn-ghost{border:1.5px solid var(--line-strong); color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}

/* =============================================================
   6. NAV
   ============================================================= */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.nav.is-scrolled{border-bottom-color:var(--line); background:color-mix(in srgb, var(--bg) 96%, transparent);}
.nav-inner{display:flex; align-items:center; gap:1.5rem; height:70px;}
.brand{display:flex; align-items:center; gap:.6rem; margin-right:auto;}
.brand-mark{width:22px; height:40px; object-fit:contain;}
.brand-word{font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:.02em; color:var(--ink);}
.brand-word-sa{font-weight:600; color:var(--ink-mute);}
.brand-mark-full{height:96px; width:auto; object-fit:contain;}
.nav-links{display:none; align-items:center; gap:1.75rem; font-size:.92rem; font-weight:600;}
.nav-links a{position:relative; padding:.3rem 0;}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--accent); transition:right .25s var(--ease-out);}
.nav-links a:hover::after{right:0;}
.nav-cta{display:none; align-items:center; gap:.75rem;}
.nav-burger{padding:.4rem;}
.nav-burger .ic{width:1.5em; height:1.5em;}

.mobile-menu{
  max-height:0; overflow:hidden; border-top:0 solid var(--line);
  transition:max-height .35s var(--ease-out);
}
.mobile-menu.is-open{max-height:400px; border-top-width:1px;}
.mobile-menu nav{display:flex; flex-direction:column; padding:1rem 1.25rem 0; gap:.15rem;}
.mobile-menu nav a{padding:.65rem .25rem; font-weight:600; border-bottom:1px solid var(--line);}
.mobile-menu-cta{display:flex; gap:.75rem; padding:1rem 1.25rem 1.25rem;}
.mobile-menu-cta .btn{flex:1; justify-content:center;}

@media (min-width:960px){
  .nav-links{display:flex;}
  .nav-cta{display:flex;}
  .nav-burger{display:none;}
  .mobile-menu{display:none;}
}

/* =============================================================
   7. HERO
   ============================================================= */
.hero{position:relative; padding-block:4rem 4.5rem; overflow:clip;}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 140% at 88% -10%, color-mix(in srgb, var(--accent-2) 22%, transparent) 0%, transparent 55%),
    radial-gradient(90% 120% at -10% 110%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 50%);
}
.hero-logo{height:56px; width:auto; object-fit:contain; margin-bottom:1.5rem;}
.hero-copy{max-width:56ch;}
.hero-title{font-size:clamp(2.1rem, 5.2vw, 3.4rem); max-width:16ch; margin-bottom:1.1rem;}
.hero-sub{font-size:1.08rem; color:var(--ink-soft); max-width:52ch; margin-bottom:1.75rem;}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem;}

.stats-band{background:var(--accent); padding-block:2.25rem;}
.hero-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem 1.5rem;}
.stat dt{font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--accent-ink); line-height:1;}
.stat-num{font-variant-numeric:tabular-nums;}
.stat dd{font-size:.82rem; color:color-mix(in srgb, var(--accent-ink) 78%, transparent); margin-top:.3rem;}

@media (min-width:960px){
  .hero{padding-block:6rem 6.5rem;}
  .hero-logo{height:72px; margin-bottom:2rem;}
  .hero-stats{grid-template-columns:repeat(4,1fr);}
}

/* =============================================================
   8. SECTIONS (shared)
   ============================================================= */
section[id]{scroll-margin-top:86px;}
.section{padding-block:4.5rem;}
.section-tint{background:var(--surface-tint);}
.section-head{max-width:62ch; margin-bottom:2.75rem; position:relative;}
.section-head-left{margin-bottom:2.25rem;}
.section-num{
  display:block; font-family:var(--font-mono); font-size:.85rem; font-weight:500;
  color:var(--accent); letter-spacing:.08em; margin-bottom:.6rem;
}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem);}
.sub-heading{
  font-family:var(--font-mono); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-mute); margin:2.25rem 0 1.1rem; padding-top:1.5rem; border-top:1px solid var(--line);
}
.section > .container > .sub-heading:first-of-type{border-top:0; padding-top:0;}

/* reveal-on-scroll */
[data-reveal]{opacity:1; transform:none;}
[data-reveal].js-armed{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
[data-reveal].js-armed.is-visible{opacity:1; transform:none;}

/* =============================================================
   9. NOSOTROS
   ============================================================= */
.mv-grid{display:grid; gap:1.25rem; margin-bottom:2.5rem;}
.mv-card{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1.5rem;}
.mv-label{display:block; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:.65rem;}
.mv-card p{color:var(--ink-soft); font-size:.98rem;}

.diff-grid{display:grid; gap:1.25rem;}
.diff-card{border-top:2px solid var(--accent); padding-top:1rem;}
.diff-card h3{font-family:var(--font-body); font-size:1.05rem; font-weight:700; margin-bottom:.5rem;}
.diff-card p{color:var(--ink-soft); font-size:.94rem;}

@media (min-width:720px){
  .mv-grid{grid-template-columns:1fr 1fr;}
  .diff-grid{grid-template-columns:repeat(3,1fr);}
}

/* =============================================================
   10. SERVICIOS
   ============================================================= */
.services-grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
.service-card{background:var(--surface); padding:1.75rem; display:flex; flex-direction:column; gap:.8rem; transition:background-color .25s var(--ease-out);}
.service-card:hover{background:var(--surface-tint);}
.service-top{display:flex; align-items:center; justify-content:space-between; gap:.75rem;}
.service-code{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-mute);}
.service-tag{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:2px; padding:.2rem .5rem; white-space:nowrap;}
.service-card h3{font-family:var(--font-body); font-size:1.12rem; font-weight:700;}
.service-card p{color:var(--ink-soft); font-size:.92rem;}
.service-detail{font-size:.86rem; color:var(--ink-mute); border-top:1px solid var(--line); padding-top:.7rem; margin-top:.2rem;}

@media (min-width:720px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1280px){ .services-grid{grid-template-columns:repeat(3,1fr);} }

/* =============================================================
   11. CATÁLOGO
   ============================================================= */
.cat-grid{display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:.5rem;}
.cat-chip{
  font-size:.88rem; font-weight:600; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:3px; padding:.55rem .95rem;
  transition:border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.cat-chip:hover{border-color:var(--accent); color:var(--accent);}

.brand-list{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.75rem;}
.brand-chip{
  font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft);
  border:1px solid var(--line-strong); border-radius:2px; padding:.4rem .75rem;
}
.catalog-note{font-size:.95rem; color:var(--ink-soft); margin-top:1rem;}

/* =============================================================
   12. CLIENTES
   ============================================================= */
.clients-list{columns:1; column-gap:2.5rem;}
.clients-list li{
  font-size:.94rem; color:var(--ink-soft); padding:.85rem 0 .85rem 1.1rem;
  border-bottom:1px solid var(--line); position:relative; break-inside:avoid;
}
.clients-list li::before{content:""; position:absolute; left:0; top:1.35rem; width:6px; height:6px; background:var(--accent-2);}
@media (min-width:720px){ .clients-list{columns:2;} }

/* =============================================================
   13. CERTIFICACIONES
   ============================================================= */
.certs-grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
.cert-card{background:var(--surface); padding:1.5rem; display:flex; gap:1rem; align-items:flex-start;}
.cert-card .ic{width:1.6em; height:1.6em; color:var(--accent); margin-top:.1rem;}
.cert-card h3{font-family:var(--font-body); font-size:1rem; font-weight:700; margin-bottom:.25rem;}
.cert-card p{font-family:var(--font-mono); font-size:.85rem; color:var(--ink-mute);}
@media (min-width:720px){ .certs-grid{grid-template-columns:repeat(2,1fr);} }

/* =============================================================
   14. CONTACTO
   ============================================================= */
.contact-grid{display:grid; gap:2.5rem;}
.contact-actions{display:flex; flex-direction:column; gap:.75rem;}
.contact-row{
  display:flex; align-items:flex-start; gap:1rem; padding:1rem 1.1rem;
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  font-size:.94rem; transition:border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.contact-row .ic{color:var(--accent); margin-top:.1rem;}
a.contact-row:hover{border-color:var(--accent); transform:translateX(4px);}
.contact-row-featured{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.contact-row-featured .ic{color:var(--accent-2);}
.contact-row-static{cursor:default;}
.contact-row-static:hover{transform:none;}
.contact-row strong{display:block; margin-bottom:.15rem;}

.contact-map{border:1px solid var(--line); border-radius:4px; overflow:hidden; min-height:280px;}
.contact-map iframe{width:100%; height:100%; min-height:280px; border:0;}

@media (min-width:960px){ .contact-grid{grid-template-columns:1.1fr .9fr;} }

/* =============================================================
   15. FOOTER + FAB
   ============================================================= */
.footer{padding-block:2.5rem; border-top:1px solid var(--line);}
.footer-grid{display:flex; flex-direction:column; gap:1.25rem;}
.footer-legal{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-mute);}
.footer-links{display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.88rem; font-weight:600;}
.footer-links a:hover{color:var(--accent);}
@media (min-width:720px){
  .footer-grid{flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap;}
}

.fab-whatsapp{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -10px rgba(0,98,155,0.55);
  transition:transform .25s var(--ease-out), background-color .2s var(--ease-out);
}
.fab-whatsapp:hover{background:var(--accent-2); transform:scale(1.06);}
.fab-whatsapp .ic{width:1.7em; height:1.7em;}

/* =============================================================
   16. REDUCED MOTION — only truly intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}