:root{
  --acero:#303337;      /* gris carbón del logo */
  --acero-2:#3D4146;
  --zinc:#CDD1D5;       /* galvanizado */
  --papel:#F1F2F3;      /* hoja de plano */
  --tinta:#24272B;
  --gris:#5B6B76;
  --seguridad:#D34A01;  /* naranjo del logo */
  --naranjo-btn:#C24400;
  --linea:#C3C7CB;
  --inox: repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, rgba(0,0,0,.025) 1px 2px, transparent 2px 4px), linear-gradient(160deg,#F4F6F7 0%,#DDE1E4 45%,#EEF0F2 60%,#CFD4D8 100%);
  --medida: 68ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Barlow",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--tinta);background:var(--papel)}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--seguridad);outline-offset:3px}
.envoltura{max-width:1160px;margin:0 auto;padding:0 20px}

/* ---------- cabecera ---------- */
.cab{background:#fff;color:var(--acero);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--linea)}
.cab .envoltura{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca img{width:auto;height:38px}
.marca span{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:125%;font-size:1.25rem;letter-spacing:.01em;color:var(--acero)}
.marca b{color:var(--seguridad);font-weight:800}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{display:flex;align-items:center;gap:8px;text-decoration:none;padding:6px 10px;border-radius:4px;font-weight:500}
.nav a:hover{background:var(--papel)}
.burbuja{display:inline-grid;place-items:center;width:24px;height:24px;border:1.5px solid currentColor;border-radius:50%;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:.85rem;line-height:1}
.nav .burbuja{color:var(--seguridad)}
@media (max-width:720px){.nav .txt{display:none}.nav a{padding:6px}}

/* ---------- portada ---------- */
.portada{background:var(--inox);color:var(--acero);position:relative;overflow:hidden;border-bottom:1px solid var(--linea)}
.portada .envoltura{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center;padding-top:64px;padding-bottom:72px}
.portada h1{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;margin:0 0 20px;letter-spacing:-.005em;max-width:14ch}
.portada p{font-size:1.2rem;color:#4A4F55;max-width:46ch;margin:0 0 28px}
.btn{display:inline-block;background:var(--naranjo-btn);color:#fff;font-weight:600;text-decoration:none;padding:12px 22px;border-radius:4px}
.btn:hover{background:#A93B00}
.btn-sec{display:inline-block;margin-left:14px;color:var(--acero);font-weight:500;text-underline-offset:4px}
.portico{width:100%;height:auto}
.portico .p{fill:none;stroke:var(--acero);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.portico .s{stroke:var(--seguridad);stroke-width:2.6}
.portico .d{stroke-width:1.3;opacity:.55}
.portico .eje{stroke:#9AA0A6;stroke-width:1;stroke-dasharray:14 4 2 4}
.portico .b{fill:#F4F6F7;stroke:#6B7178;stroke-width:1.2}
.portico text{fill:#3D4146;font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;text-anchor:middle;dominant-baseline:central}
.portico .dib{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:dibuja 2.2s cubic-bezier(.6,.1,.2,1) forwards;animation-delay:var(--t,0s)}
@keyframes dibuja{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.portico .dib{animation:none;stroke-dashoffset:0}}
@media (max-width:860px){.portada .envoltura{grid-template-columns:1fr;padding-top:40px}.portico{max-width:520px}}

/* ---------- secciones con eje ---------- */
.seccion{position:relative;padding:84px 0;border-top:1px solid var(--linea)}
.seccion::before{content:"";position:absolute;left:max(20px,calc((100% - 1160px)/2 + 20px));top:0;bottom:0;border-left:1px dashed var(--linea)}
.cabeza{display:flex;align-items:center;gap:16px;margin:0 0 36px;position:relative}
.cabeza .burbuja{width:44px;height:44px;font-size:1.25rem;background:var(--papel);color:var(--acero);border-width:2px;margin-left:-22px;flex:none}
.cabeza h2{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1;margin:0}
.intro{max-width:var(--medida);color:var(--gris);margin:-20px 0 40px 44px;font-size:1.12rem}
.cuerpo{padding-left:44px}
@media (max-width:620px){.intro,.cuerpo{padding-left:22px;margin-left:0}.intro{margin-left:22px}}

/* servicios: tabla tipo listado de piezas */
.listado{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--acero)}
.listado > div{padding:22px 24px 24px 0;border-bottom:1px solid var(--linea)}
.listado > div:nth-child(odd){padding-right:32px;border-right:1px solid var(--linea)}
.listado > div:nth-child(even){padding-left:32px}
.listado h3{font-size:1.2rem;margin:0 0 6px;font-weight:600}
.listado p{margin:0;color:var(--gris);max-width:52ch}
@media (max-width:760px){.listado{grid-template-columns:1fr}.listado > div:nth-child(n){padding:20px 0;border-right:0}}

/* metodología: secuencia real */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:paso}
.pasos li{counter-increment:paso;padding:0 24px 0 0;position:relative}
.pasos li::before{content:counter(paso);display:block;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:3rem;line-height:1;color:var(--acero);margin-bottom:10px}
.pasos li::after{content:"";position:absolute;top:24px;left:44px;right:12px;border-top:2px solid var(--seguridad)}
.pasos li:last-child::after{display:none}
.pasos h3{margin:0 0 6px;font-size:1.15rem}
.pasos p{margin:0;color:var(--gris);font-size:1rem}
@media (max-width:860px){.pasos{grid-template-columns:1fr 1fr;row-gap:32px}.pasos li::after{display:none}}
@media (max-width:520px){.pasos{grid-template-columns:1fr}}

.herramientas{margin-top:48px;padding:20px 24px;background:#fff;border:1px solid var(--linea);border-left:4px solid var(--seguridad);max-width:var(--medida)}
.herramientas p{margin:0}

/* contacto: rótulo de plano */
.rotulo{display:grid;grid-template-columns:2fr 1fr 1fr;border:2px solid var(--acero);background:#fff;max-width:900px}
.rotulo > div{padding:16px 20px;border-right:1px solid var(--acero)}
.rotulo > div:last-child{border-right:0}
.rotulo small{display:block;color:var(--gris);font-size:.85rem;margin-bottom:4px}
.rotulo strong{font-size:1.15rem;font-weight:600}
.rotulo a{text-underline-offset:3px}
@media (max-width:720px){.rotulo{grid-template-columns:1fr}.rotulo > div{border-right:0;border-bottom:1px solid var(--acero)}.rotulo > div:last-child{border-bottom:0}}

/* pie */
.pie{background:var(--inox);color:#4A4F55;border-top:1px solid var(--linea);padding:32px 0;font-size:.95rem}
.pie img{height:72px;width:auto}
.pie .envoltura{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pie a{color:var(--acero);text-underline-offset:3px}

/* página de texto (privacidad) */
.texto{max-width:var(--medida);padding:56px 0 80px}
.texto h1{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:2.6rem;line-height:1.1;margin:0 0 8px}
.texto h2{font-size:1.2rem;margin:2em 0 .4em}
.texto .fecha{color:var(--gris);margin:0 0 28px}