/* ===========================================================
   Serproma — hoja base V3
   Tokens del Brandbook V3. No inventar colores ni pesos acá.
   =========================================================== */

/* --- DM Sans (variable). Los .woff2 viven en assets/fonts/ --- */
@font-face{
  font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap;
  src:url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap;
  src:url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* corporativos */
  --negro:#1D1D1B; --gris:#717C7D; --blanco:#F9F9F9; --pure:#FFFFFF;
  --border:#E8E8E6; --hero:#111110;
  /* divisiones */
  --equipos:#CC4125; --soporte:#F3AA20; --proyectos:#0B6E6E;
  --datasuite:#1493F2; --eco:#6BAF73;
  /* medidas */
  --pad:clamp(20px,5vw,76px);
  --maxw:1440px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--hero); color:var(--blanco);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--pure);color:var(--negro);padding:10px 16px;border-radius:2px}

/* --- NAV --- */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:26px var(--pad) 0;
}
.nav .marca{display:flex;align-items:center;gap:18px}
.nav .marca .circulos{display:flex;align-items:center;gap:6px}
.nav .marca .circulos i{width:11px;height:11px;border-radius:50%;display:block}
.nav ul{display:flex;gap:38px;list-style:none;margin:0;padding:0}
.nav a{font-size:16px;font-weight:500;letter-spacing:.02em;color:rgba(249,249,249,.78);transition:color .18s}
.nav a:hover,.nav a:focus-visible{color:var(--pure)}
.nav .linea{position:absolute;left:var(--pad);right:var(--pad);top:92px;height:1px;background:rgba(249,249,249,.14)}

/* --- HERO --- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;top:0;right:0;bottom:0;left:34%;opacity:1}
@media(max-width:900px){
  .hero-bg{left:0;opacity:.35}
  .hero{min-height:82vh}
}
.hero-copy{position:relative;z-index:2;padding:0 var(--pad);max-width:min(680px,52vw)}
@media(max-width:900px){.hero-copy{max-width:none}}
.hero h1{
  font-size:clamp(34px,5.2vw,64px); font-weight:300; line-height:1.06;
  letter-spacing:-.022em; margin:0 0 26px;
}
.hero p{
  font-size:clamp(15px,1.35vw,20px); font-weight:300; line-height:1.65;
  color:rgba(249,249,249,.62); margin:0 0 38px; max-width:30em;
}

/* --- BOTONES --- */
.btn{
  display:inline-block; font-size:15px; font-weight:600; letter-spacing:.02em;
  padding:15px 30px; border:1px solid var(--pure); border-radius:2px;
  transition:background .18s,color .18s;
}
.btn:hover,.btn:focus-visible{background:var(--pure);color:var(--negro)}

/* --- SECCIÓN ECOSISTEMA --- */
.seccion{padding:clamp(64px,9vw,128px) var(--pad);max-width:var(--maxw);margin:0 auto}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin:0}
.seccion h2{font-size:clamp(26px,3.2vw,40px);font-weight:300;letter-spacing:-.018em;margin:14px 0 14px}
.seccion p.lead{font-size:16px;font-weight:300;line-height:1.65;color:rgba(249,249,249,.62);max-width:62ch;margin:0}
.lienzo{margin-top:40px;border-radius:6px;overflow:hidden;background:var(--hero);aspect-ratio:16/9}
@media(max-width:700px){.lienzo{aspect-ratio:4/5}}

/* --- FOOTER --- */
footer{padding:44px var(--pad) 56px;border-top:1px solid rgba(249,249,249,.12);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer small{font-size:12.5px;color:var(--gris)}
#footCirculos{display:flex;gap:6px}
#footCirculos i{width:8px;height:8px;border-radius:50%;display:block}

/* --- Accesibilidad: sin movimiento --- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-bg{opacity:.5}
}