/* NETSO · sitio interino (oct 2026). Colores y tipografías del manual de identidad. */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: mockup de una sola página, bandas a lo ancho alternando claro/oscuro; una sola apariencia clara a propósito (es la web real) */
:root{
  --naranja:#FF6900;      /* Pantone 1505C, solo acentos y botones */
  --naranja-txt:#B24C0A;  /* naranja oscuro para texto chico sobre claro */
  --naranja-claro:#FF8A3D;/* naranja para texto sobre oscuro */
  --carbon:#1E1B19;
  --tinta:#2A2623;
  --gris:#4A433E;
  --gris-suave:#6E655E;
  --hueso:#F6F2EE;
  --linea:#E5DDD5;
  --blanco:#FFFFFF;
  --f-display:'Archivo',Arial,sans-serif;
  --f-texto:'Inter',Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--hueso);color:var(--tinta);font-family:var(--f-texto);font-size:16px;line-height:1.5}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Nota de propuesta */
.nota{background:var(--carbon);color:var(--hueso)}
.nota .wrap{padding-block:14px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:14px}
.nota b{color:var(--naranja-claro);letter-spacing:.08em;text-transform:uppercase;font-size:12px}

/* Header */
header{background:var(--blanco);border-bottom:1px solid var(--linea);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
header img{height:56px;width:auto}
nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
nav a{font-weight:600;font-size:15px;color:var(--tinta);text-decoration:none;padding:9px 14px;border-radius:6px;border:1px solid transparent}
nav a:hover,nav a:focus-visible{border-color:var(--tinta);outline:none}
nav a.cta{background:var(--naranja);color:var(--carbon);font-weight:700}
nav a.cta:hover,nav a.cta:focus-visible{background:var(--carbon);color:var(--blanco)}

.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--naranja-txt);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:32px;height:3px;background:var(--naranja)}
.oscuro .eyebrow{color:var(--naranja-claro)}
section{scroll-margin-top:80px}

/* Sobre NETSO */
.hero{position:relative;color:var(--blanco);background:var(--carbon)}
.hero .velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,17,.92) 0%,rgba(20,18,17,.82) 55%,rgba(20,18,17,.55) 100%)}
.hero .wrap{position:relative;padding-block:64px;display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;line-height:1.08;max-width:none}
.hero .bajada{font-size:18px;color:#EDE6DF;max-width:62ch}
.numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:18px;border-top:1px solid rgba(255,255,255,.25)}
.numeros div{padding:18px 18px 0 0}
.numeros strong{display:block;font-family:var(--f-display);font-size:clamp(34px,4vw,48px);font-weight:900;color:var(--naranja-claro);line-height:1}
.numeros span{font-size:15px;color:#EDE6DF}

.unidades{background:var(--blanco);border-bottom:1px solid var(--linea)}
.unidades .wrap{padding-block:40px;display:flex;flex-direction:column;gap:22px}
.u-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.u{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--linea);border-radius:10px;background:var(--hueso)}
.u img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block}
.u{padding:12px 12px 20px}
.u h3,.u p{padding:0 8px}
.u h3{font-size:20px;font-weight:800}
.u p{font-size:15px;color:var(--gris)}

/* Pilares */
.pilares{background:var(--hueso)}
.pilares .wrap{padding-block:64px;display:flex;flex-direction:column;gap:30px}
h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;line-height:1.1}
.p-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.p{display:flex;flex-direction:column;gap:12px;background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:22px 18px}
.p svg{width:56px;height:56px}
.p h3{font-family:var(--f-texto);font-size:17px;font-weight:700;line-height:1.3}
.p p{font-size:14.5px;color:var(--gris)}

/* Marcas */
.marcas{background:var(--blanco)}
.marcas .wrap{padding-block:64px;display:flex;flex-direction:column;gap:30px}
.bloque{display:flex;flex-direction:column;gap:14px}
.bloque-t{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.bloque-t h3{font-size:19px;font-weight:800}
.bloque-t span{font-size:14px;color:var(--gris-suave)}
.m-grid{display:grid;grid-template-columns:repeat(8,1fr);border:1px solid var(--linea);border-radius:10px;overflow:hidden}
.m{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:10px;padding:18px 10px 14px;border-right:1px solid var(--linea);min-width:0}
.m:last-child{border-right:none}
.m img{height:44px;width:100%;object-fit:contain}
.m span{font-size:12.5px;color:var(--gris);text-align:center;line-height:1.3}
.proceso{font-size:13px;color:var(--gris-suave)}
.proceso b{color:var(--tinta)}

.carrusel{display:flex;overflow:hidden;gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pista{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-shrink:0;animation:gira 60s linear infinite}
.carrusel:hover .pista,.carrusel:focus-within .pista{animation-play-state:paused}
@keyframes gira{to{transform:translateX(calc(-100% - 16px))}}
.mc{width:190px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 14px 16px;border:1px solid var(--linea);border-radius:10px;background:var(--blanco)}
.mc img{height:48px;width:100%;object-fit:contain}
.pais{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gris)}
.cat{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--naranja-txt);text-align:center;line-height:1.3}
.flag{display:inline-block;width:24px;height:16px;border:1px solid #D9D0C7;flex-shrink:0}
.f-de{background:linear-gradient(#1A1A1A 33.3%,#DD0000 33.3% 66.6%,#FFCE00 66.6%)}
.f-fr{background:linear-gradient(90deg,#0055A4 33.3%,#FFFFFF 33.3% 66.6%,#EF4135 66.6%)}
.f-jp{background:radial-gradient(circle,#BC002D 0 26%,#FFFFFF 28%)}
.f-us{background:linear-gradient(#3C3B6E,#3C3B6E) 0 0/45% 54% no-repeat,repeating-linear-gradient(#B22234 0 15.4%,#FFFFFF 15.4% 30.8%)}
.f-cl{background:linear-gradient(#0039A6,#0039A6) 0 0/34% 50% no-repeat,linear-gradient(#FFFFFF 50%,#D52B1E 50%)}
@media (prefers-reduced-motion:reduce){.pista{animation:none}.carrusel{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}.pista{flex-wrap:wrap}.pista[aria-hidden]{display:none}}


/* Vistas */
.vista[hidden],.slide[hidden]{display:none!important}
.pag-t{background:var(--carbon)}.pag-t .wrap{padding-block:16px 0}
.logo-link{display:flex}
nav a[aria-current="page"]{border-color:var(--naranja)}
/* Banner novedades */
.banner{background:var(--carbon);color:var(--blanco)}
.banner .wrap{padding-block:28px 32px;display:flex;flex-direction:column;gap:18px}
.slide{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;min-height:340px}
.s-txt{display:flex;flex-direction:column;gap:16px}
.s-txt h2{font-size:clamp(34px,4.6vw,56px);color:var(--blanco)}
.s-bajada{font-size:18px;color:#EDE6DF;max-width:46ch}
.s-txt .boton{width:fit-content;margin-top:4px}
.s-img{background:var(--blanco);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:16px;height:100%;min-height:300px}
.s-logo{height:40px;width:auto;max-width:200px;object-fit:contain;align-self:flex-start}
.s-foto{flex:1;border:2px dashed #C9C0B8;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--gris-suave);font-weight:600;font-size:15px;background:var(--hueso)}
.s-foto small{font-weight:400;font-size:13px}
.s-ctrl{display:flex;align-items:center;gap:14px}
.s-ctrl button{font:inherit;cursor:pointer}
.s-prev,.s-next{width:40px;height:40px;border-radius:20px;border:1px solid #6E655E;background:transparent;color:var(--blanco);font-size:22px;line-height:1}
.s-prev:hover,.s-next:hover,.s-prev:focus-visible,.s-next:focus-visible{border-color:var(--naranja-claro);outline:none}
.dots{display:flex;gap:8px}
.dots button{width:28px;height:6px;border-radius:3px;border:none;background:#6E655E;padding:0}
.dots button[aria-current="true"]{background:var(--naranja);width:44px}
/* Carrusel industrias */
.industrias{background:var(--blanco)}
.industrias .wrap{padding-block:48px;display:flex;flex-direction:column;gap:20px}
.pista.lenta{animation-duration:40s}
.ic{width:300px;flex-shrink:0}
.ic a{display:block;position:relative;border-radius:10px;overflow:hidden;text-decoration:none}
.ic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ic span{position:absolute;left:12px;bottom:12px;background:var(--carbon);color:var(--blanco);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:4px}
.ic a:hover span,.ic a:focus-visible span{background:var(--naranja);color:var(--carbon)}
/* Carrusel clientes */
.cc{width:180px;height:96px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:16px 20px}
.cc img{max-height:60px;max-width:100%;object-fit:contain}
@media (max-width:760px){.slide{grid-template-columns:1fr}.s-img{min-height:220px}}

/* Clientes */
.clientes{background:var(--hueso)}
.clientes .wrap{padding-block:64px;display:flex;flex-direction:column;gap:26px}
.c-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:28px}
.c-caja img{width:100%;height:auto;display:block}

/* Contacto + footer */
.contacto{background:var(--carbon);color:var(--hueso)}
.contacto .wrap{padding-block:48px 36px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;align-items:start}
.contacto img.logo{height:52px;width:auto}
.contacto h2{color:var(--blanco);font-size:26px;margin-top:18px}
.boton{display:inline-block;margin-top:16px;background:var(--naranja);color:var(--carbon);font-weight:700;padding:12px 22px;border-radius:6px;text-decoration:none}
.contacto h3{font-family:var(--f-texto);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--naranja-claro);margin-bottom:8px}
.contacto p{font-size:15px;color:#E5DDD5}
.redes{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.contacto h3{display:flex;align-items:center;gap:8px}
.contacto .ico{width:20px;height:20px;flex-shrink:0}
.redes a{display:flex;align-items:center;gap:8px;color:#E5DDD5;text-decoration:none;font-size:14px}
.redes img{width:30px;height:30px}
.legal{border-top:1px solid #3A3431}
.legal .wrap{padding-block:14px;font-size:13px;color:#A89F97}

/* Marcas de cambio para el diseñador */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-texto);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#FFE6D3;color:#7A3306;border:1px dashed #B24C0A;border-radius:4px;padding:3px 8px;width:fit-content}
.oscuro .tag,.hero .tag{background:#3A2A1E;color:#FFC9A3;border-color:#FF8A3D}

@media (max-width:900px){
  .u-grid{grid-template-columns:repeat(2,1fr)}
  .p-grid{grid-template-columns:repeat(2,1fr)}
  .m-grid{grid-template-columns:repeat(4,1fr)}
  .m:nth-child(4n){border-right:none}
  .m:nth-child(-n+4){border-bottom:1px solid var(--linea)}
  .contacto .wrap{grid-template-columns:1fr}
  .numeros{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .u-grid,.p-grid{grid-template-columns:1fr}
  .m-grid{grid-template-columns:repeat(2,1fr)}
  .m:nth-child(2n){border-right:none}
  .m:nth-child(-n+6){border-bottom:1px solid var(--linea)}
  nav{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:2px}
  nav a{padding:7px clamp(3px,1.1vw,9px);font-size:clamp(10.5px,2.95vw,14px);white-space:nowrap;letter-spacing:-.01em}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
html{scroll-behavior:smooth}


/* v3: vistas, banner de marca, grillas, formulario */
.vista[hidden],.slide[hidden]{display:none!important}
.pag{background:var(--carbon);color:var(--blanco)}
.pag .wrap{padding-block:44px;display:flex;flex-direction:column;gap:16px}
.pag h1{font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1.08}
.pag .bajada{font-size:17px;color:#EDE6DF;max-width:60ch}
.pag .eyebrow{color:var(--naranja-claro)}
.pag .tag{background:#3A2A1E;color:#FFC9A3;border-color:#FF8A3D}
/* Banner de marca */
.banner{position:relative;background:#141213;color:#FFFFFF}
.tag-flota{position:absolute;z-index:3;left:max(16px,env(safe-area-inset-left,0px));top:12px;background:#3A2A1E!important;color:#FFC9A3!important;border-color:#FF8A3D!important}
.bn{--acento:#AF1D1F;--acento-btn:#AF1D1F;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:440px;overflow:hidden;padding-left:max(16px,calc((100vw - 1180px)/2 + 16px));background:radial-gradient(ellipse at 85% 10%,color-mix(in srgb,var(--acento) 55%,transparent),transparent 60%),linear-gradient(180deg,#2A2627,#141213)}
.b-sata{--acento:#E30613;--acento-btn:#C70510}
.b-kovax{--acento:#0098D8;--acento-btn:#00669A}
.bn-txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;padding-block:72px 64px;padding-right:24px}
.bn-badge{width:fit-content;background:var(--acento-btn);color:#FFFFFF;font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;transform:skewX(-10deg)}
.bn h2{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,6vw,76px);line-height:.95;text-transform:uppercase;color:#FFFFFF}
.bn-sub{font-size:20px;color:#F1ECE8;max-width:30ch}
.bn-claim{font-size:16px;font-weight:700;color:#FFFFFF;opacity:.85}
/* SATA: tipografía de la marca (Source Sans), minúsculas y peso regular como en sus banners */
.b-sata .bn-txt{font-family:"Source Sans 3","Source Sans Pro",Arial,sans-serif}
.b-sata .bn-badge{font-family:inherit;font-weight:600;letter-spacing:.04em;text-transform:none;transform:none}
.b-sata h2{font-family:inherit;font-weight:400;text-transform:none;line-height:1.05;letter-spacing:-.01em;font-size:clamp(40px,5.4vw,68px)}
.b-sata .bn-sub{font-size:22px;color:#FFFFFF;max-width:none}
.b-sata .bn-btn{font-family:inherit;font-weight:600}
/* Kovax: tipografía tipo Avenir de su web (Nunito Sans como equivalente libre), título en caja normal y bajada en celeste */
.b-kovax .bn-txt{font-family:"Avenir Next","Nunito Sans",Arial,sans-serif}
.b-kovax .bn-badge{font-family:inherit;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transform:none}
.b-kovax h2{font-family:inherit;font-weight:700;text-transform:none;line-height:1;font-size:clamp(44px,6vw,80px)}
.b-kovax .bn-sub{font-weight:300;font-size:30px;color:#2BA8E8;max-width:none;line-height:1.2}
.b-kovax .bn-claim{font-weight:400;font-size:19px;opacity:1;max-width:42ch;line-height:1.6}
.b-kovax .bn-btn{font-family:inherit;font-weight:700}
/* Menzerna: tipografía DIN de su manual (Barlow como equivalente libre), títulos en Light y destacados en Bold */
.b-menzerna .bn-txt{font-family:"DIN","DIN Pro","Barlow",Arial,sans-serif}
.b-menzerna .bn-badge{font-family:inherit;font-weight:700;letter-spacing:.06em;transform:none}
.b-menzerna h2{font-family:inherit;font-weight:300;text-transform:none;line-height:1;letter-spacing:-.01em;font-size:clamp(44px,6vw,80px)}
.b-menzerna .bn-sub{font-weight:400;font-size:22px;max-width:38ch}
.b-menzerna .bn-claim{font-weight:700;color:#FFFFFF;opacity:1;font-size:18px}
.b-menzerna .bn-btn{font-family:inherit;font-weight:700}
/* Producto recortado sobre la foto, del lado oscuro y sin tapar la patente */
.bn-extra{position:absolute;z-index:2;left:-120px;bottom:22px;width:260px;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
@media (max-width:900px){.bn-extra{left:12px;bottom:12px;width:150px}}

.bn-btn{width:fit-content;margin-top:6px;background:var(--acento-btn);color:#FFFFFF;font-weight:700;padding:12px 22px;border-radius:4px;text-decoration:none}
.bn-btn:hover,.bn-btn:focus-visible{background:#FFFFFF;color:#141213;outline:none}
.bn-media{position:relative;height:100%;min-height:440px}
.bn-prod{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.bn-ph{position:absolute;inset:40px 40px 40px 0;border:2px dashed rgba(255,255,255,.4);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#EDE6DF;font-weight:600}
.bn-ph small{font-weight:400;opacity:.85}
.bn-logo{position:absolute;top:0;right:0;z-index:2;background:#FFFFFF;padding:16px 22px;border-bottom-left-radius:4px}
.bn-logo img{height:34px;width:auto;display:block}
.banner .s-ctrl{position:absolute;z-index:3;left:max(16px,calc((100vw - 1180px)/2 + 16px));bottom:18px}
/* Grilla de industrias */
.u-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.uc{display:flex;flex-direction:column;position:relative;border-radius:10px;overflow:hidden;text-decoration:none;color:var(--tinta);background:var(--hueso);border:1px solid var(--linea)}
.uc img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.uc-n{position:absolute;left:12px;top:12px;background:var(--carbon);color:#FFFFFF;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:4px}
.u-grid:not(.con-texto) .uc-n{top:auto;bottom:12px}
.uc:hover .uc-n,.uc:focus-visible .uc-n{background:var(--naranja);color:var(--carbon)}
.uc-t{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px}
.uc-t p{font-size:15px;color:var(--gris)}
.ver{font-weight:700;font-size:14px;color:var(--naranja-txt)}
/* Grilla de marcas 4x4 */
.b-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.b-grid .mc{width:auto}
/* Formulario */
.form-sec{background:var(--hueso)}
.form-wrap{padding-block:48px;display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start}
form{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0;border:none;padding:0;margin:0}
.campo.ancho{grid-column:1/-1}
.campo label,.campo legend{font-weight:600;font-size:14px;color:var(--tinta)}
.campo label span,.campo legend span{color:var(--naranja-txt)}
input,select,textarea{font:inherit;font-size:15px;color:var(--tinta);background:var(--blanco);border:1.5px solid #B9AFA6;border-radius:6px;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--naranja);outline-offset:1px;border-color:var(--tinta)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#B3261E;border-width:2px}
.radios{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:6px}
.radios label{display:flex;align-items:center;gap:8px;font-weight:500}
.radios input{width:auto;accent-color:var(--naranja)}
.req{font-size:13px;color:var(--gris-suave)}
form .boton{border:none;cursor:pointer;font:inherit;font-weight:700;margin-top:0}
.estado{font-size:14px;margin-top:10px;font-weight:600}
.cambios{background:var(--blanco);border:1px dashed #B24C0A;border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:12px}
.cambios ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--gris)}
.cambios b{color:var(--tinta)}
@media (max-width:900px){.b-grid{grid-template-columns:repeat(2,1fr)}.form-wrap{grid-template-columns:1fr}.bn{grid-template-columns:1fr}.bn-media{min-height:260px}.bn-txt{padding-bottom:16px}}
@media (max-width:760px){.u-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.u-grid,.b-grid,form{grid-template-columns:1fr}}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contacto a{color:#E5DDD5;text-decoration:none}
.contacto a:hover,.contacto a:focus-visible{text-decoration:underline}
.form-wrap{grid-template-columns:minmax(0,760px)}