/* MAQPROD — sistema claro.
   Modulo u = 12. Ver la seccion Color de CLAUDE.md antes de tocar tokens. */

:root{
  color-scheme:light dark;

  --paper:#FFFFFF;
  --paper-2:#F4F5F7;

  --ink:#141A20;
  --ink-2:#5B646E;
  --ink-3:#646E78;
  --steel:#8A94A0;

  --rule:#E2E5E9;
  --rule-2:#CFD5DB;

  --senal:#E8541F;
  --fill:#C8410F;
  --fill-ink:#FFFFFF;
  --fill-hover:#B03A0D;
  --nav-bg:rgba(255,255,255,.82);

  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* módulo u = 12 */
  --u1:12px; --u2:24px; --u3:36px; --u4:48px;
  --u6:72px; --u8:96px; --u10:120px; --u12:144px;

  --ease:cubic-bezier(.23,1,.32,1);
}

/* ─── Tema oscuro automático ─────────────────────────────────────────
   Reaparece la paleta original de la marca: Grafito como fondo y Acero
   como texto secundario, que es el papel que el manual siempre les dio.
   Solo se redefinen tokens; ninguna regla de componente cambia. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141A20;      /* Grafito, el fondo de marca */
    --paper-2:#0E1318;    /* sección alterna, más honda que las tarjetas */

    --ink:#F2F4F6;
    --ink-2:#A9B2BC;      /* 8.2:1 sobre grafito */
    --ink-3:#8A94A0;      /* Acero, en su papel documentado — 5.7:1 */
    --steel:#5C6874;

    --rule:#2A333D;
    --rule-2:#3A434E;

    --senal:#E8541F;      /* 4.8:1 sobre grafito */
    --fill:#E8541F;       /* con tinta grafito encima — 4.8:1 */
    --fill-ink:#141A20;
    --fill-hover:#F26A38;
    --nav-bg:rgba(20,26,32,.82);
  }
  /* las fotos pierden un punto de brillo para no deslumbrar sobre grafito */
  .placa .im img,.minis img,.shot img,.cap-top .foto img,.ing-top img{
    filter:brightness(.92);
  }
}

*{box-sizing:border-box}
a,button,input,label,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(200,65,15,.15)}
html{scroll-behavior:smooth}
:target,[id]{scroll-margin-top:calc(66px + var(--u3))}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* reduced motion: se quita el desplazamiento, se conserva el color */
:focus-visible{outline:2px solid var(--fill);outline-offset:3px}
::selection{background:var(--senal);color:#FFFFFF}
::-moz-selection{background:var(--senal);color:#FFFFFF}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--u3)}
@media (max-width:640px){.wrap{padding:0 var(--u2)}}

p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
img{display:block;max-width:100%;height:auto}

h1{font-size:clamp(42px,7.4vw,88px);font-variation-settings:"wdth" 108;font-weight:800;letter-spacing:-.038em;line-height:1.01}
h2{font-size:clamp(30px,4.4vw,50px);font-variation-settings:"wdth" 106;font-weight:700;letter-spacing:-.03em;line-height:1.06}
h3{font-size:20px;font-variation-settings:"wdth" 104;font-weight:700;letter-spacing:-.016em;line-height:1.3}

.lab{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}

.head{max-width:56ch}
.head h2{margin-top:var(--u3)}
.head p{margin-top:var(--u2);color:var(--ink-2);font-size:19px}

/* ---------------- nav ---------------- */
nav{
  position:sticky;top:0;z-index:60;
  background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--rule);
}
nav .in{display:flex;align-items:center;gap:var(--u3);height:66px}
nav .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none}
nav .brand svg{width:44px;height:auto;display:block}
nav .brand .wm{font-weight:800;font-variation-settings:"wdth" 125;font-size:15px;letter-spacing:.15em;line-height:1}
nav .links{display:flex;gap:var(--u2);margin-left:auto;font-size:15px;align-items:center}
nav .links a{text-decoration:none;color:var(--ink-2);transition:color 160ms var(--ease);white-space:nowrap}
nav .links a:hover{color:var(--ink)}
nav .links a.secundario{color:var(--ink-3);font-size:14px;padding-left:var(--u2);border-left:1px solid var(--rule)}
nav .cta{
  flex:none;background:var(--fill);color:var(--fill-ink);text-decoration:none;
  font-size:14px;font-weight:700;padding:11px 18px;border-radius:2px;
  transition:transform 140ms var(--ease),background 160ms var(--ease);
}
nav .cta:hover{background:var(--fill-hover)}
nav .cta:active{transform:scale(.97)}
.burger{
  display:none;flex:none;margin-left:auto;width:44px;height:44px;
  border:1px solid var(--rule);background:var(--paper);border-radius:2px;
  cursor:pointer;align-items:center;justify-content:center;
  transition:transform 140ms var(--ease);
}
.burger:active{transform:scale(.97)}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink)}
.burger i::before{top:-6px} .burger i::after{top:6px}

/* ---------------- hero ---------------- */
.hero{padding:var(--u10) 0 var(--u6)}
.titular{display:grid;grid-template-columns:4px 1fr;gap:var(--u3);align-items:start}
.titular .eje{
  display:block;align-self:stretch;background:var(--senal);
  transform-origin:top center;animation:draw 700ms var(--ease) both;
}
@media (max-width:520px){.titular{grid-template-columns:3px 1fr;gap:var(--u2)}}
@keyframes draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hero .sub{margin-top:var(--u3);font-size:clamp(18px,1.9vw,22px);color:var(--ink-2);max-width:52ch;line-height:1.55}
.hero .btns{display:flex;gap:var(--u2);margin-top:var(--u4);flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;font-size:16px;font-weight:700;
  padding:16px 28px;border-radius:2px;
  transition:transform 140ms var(--ease),background 160ms var(--ease),border-color 160ms var(--ease);
}
.btn:active{transform:scale(.97)}
.btn.p{background:var(--fill);color:var(--fill-ink)}
.btn.p:hover{background:var(--fill-hover)}
.btn.s{border:1px solid var(--rule-2);color:var(--ink);background:var(--paper)}
.btn.s:hover{border-color:var(--ink);background:var(--paper-2)}

.shot{margin-top:var(--u8)}
.shot figure{margin:0}
.shot img{width:100%}
.shot figcaption{
  margin-top:var(--u2);padding-top:var(--u2);border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:var(--u2);flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
}
.shot figcaption b{color:var(--ink);font-weight:500}

/* ---------------- clientes: nombres, nunca logotipos ajenos ---------------- */
.clientes{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.clientes .in{
  display:flex;align-items:center;gap:var(--u4);flex-wrap:wrap;
  padding:var(--u4) var(--u3);
}
.clientes .k{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);flex:none;
}
.clientes ul{
  display:flex;gap:var(--u3);flex-wrap:wrap;list-style:none;margin:0;padding:0;
  flex:1;justify-content:space-between;
}
.clientes li{
  font-size:17px;font-weight:700;font-variation-settings:"wdth" 108;
  letter-spacing:.02em;color:var(--ink-2);
}
@media (max-width:860px){
  /* Repartir de borde a borde solo sirve mientras caben en un renglon. */
  .clientes ul{justify-content:flex-start;flex:0 1 auto}
}
@media (max-width:640px){
  .clientes .in{gap:var(--u2);padding:var(--u3) var(--u2)}
  .clientes ul{gap:var(--u2)}
  .clientes li{font-size:15.5px}
}

/* ---------------- ingeniería: el marco, no una línea más ---------------- */
.ingenieria{padding:var(--u10) 0;border-top:1px solid var(--rule)}
.ing-top{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--u8);align-items:center}
.ing-top .head{max-width:none}
.ing-top .head p + p{margin-top:var(--u2)}
.ing-top figure{margin:0}
.ing-top img{width:100%;border-radius:3px}
.ing-top figcaption{margin-top:var(--u2);font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* prueba en movimiento: la máquina del encabezado, corriendo */
.corriendo{padding:var(--u6) 0 var(--u5);background:var(--paper-2);border-block:1px solid var(--rule)}
.corriendo figure{margin:0;display:grid;grid-template-columns:1.45fr 1fr;gap:var(--u4);align-items:end}
.corriendo .marco{border-radius:3px;overflow:hidden;background:#141A20;line-height:0}
.corriendo video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.corriendo figcaption{font-size:16px;color:var(--ink-2);line-height:1.6;padding-bottom:4px}
.corriendo figcaption b{display:block;color:var(--ink);font-size:17px;margin-bottom:8px}
@media (max-width:860px){
  .corriendo figure{grid-template-columns:1fr;gap:var(--u2);align-items:stretch}
}

/* antes y después: dos fotos comparables, misma escala */
.comparacion{display:grid;grid-template-columns:1fr 1fr;gap:var(--u2);margin-top:var(--u6)}
.comparacion figure{margin:0}
.comparacion .marco{position:relative;border-radius:3px;overflow:hidden}
.comparacion img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.comparacion .etq{
  position:absolute;top:0;left:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;padding:8px 14px;
}
.comparacion .previa .etq{background:#141A20}   /* blanco encima: 17.5:1 */
.comparacion .nueva .etq{background:#C8410F}    /* blanco encima: 5.0:1  */
.comparacion figcaption{margin-top:var(--u2);font-size:15.5px;color:var(--ink-2);line-height:1.55}
.comparacion figcaption b{display:block;color:var(--ink);margin-bottom:5px}
@media (max-width:900px){.comparacion{grid-template-columns:1fr;gap:var(--u3)}}

/* secuencia de un mismo proyecto: prueba visual del alcance */
.secuencia{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--u2);margin-top:var(--u8)}
.secuencia figure{margin:0}
.secuencia img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block}
.secuencia figcaption{
  margin-top:var(--u2);padding-top:var(--u2);border-top:1px solid var(--rule-2);
}
.secuencia .n{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--senal);
  display:block;margin-bottom:6px;
}
.secuencia b{display:block;font-size:16.5px;letter-spacing:-.012em;margin-bottom:5px}
.secuencia p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
@media (max-width:760px){.secuencia{grid-template-columns:1fr;gap:var(--u3)}}

.pasos{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-2);margin-top:var(--u8)}
.paso{padding:var(--u3) var(--u2) var(--u3) 0;border-bottom:1px solid var(--rule-2)}
.paso .n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--senal);display:block;margin-bottom:var(--u1)}
.paso b{display:block;font-size:17px;font-weight:700;letter-spacing:-.012em;margin-bottom:6px}
.paso p{font-size:14.5px;color:var(--ink-2);line-height:1.5;max-width:26ch}

/* ---------------- lo que entregamos: las placas ---------------- */
.entregamos{background:var(--paper-2);padding:var(--u10) 0;border-top:1px solid var(--rule)}
.grupo{margin-top:var(--u10)}
.grupo:first-of-type{margin-top:var(--u8)}
.gh{display:flex;align-items:flex-start;gap:var(--u2);border-bottom:1px solid var(--ink);padding-bottom:var(--u2);margin-bottom:var(--u4)}
.gh i{width:3px;height:40px;background:var(--senal);display:block;flex:none;margin-top:2px}
.gh h3{font-size:26px;font-variation-settings:"wdth" 106;letter-spacing:-.022em}
.gh p{margin-top:5px;color:var(--ink-2);font-size:15.5px;max-width:56ch}
.gh .cnt{margin-left:auto;white-space:nowrap;padding-top:5px}

.placas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--u2)}
.placa{
  border:1px solid var(--rule);border-radius:3px;background:var(--paper);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color 220ms var(--ease),transform 220ms var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .placa:hover{border-color:var(--rule-2);transform:translateY(-2px)}
}
.placa .im{position:relative;background:var(--paper-2);aspect-ratio:4/3;overflow:hidden}
.placa .im img{width:100%;height:100%;object-fit:cover}
.placa .c{position:absolute;width:22px;height:22px;border:2px solid var(--senal);z-index:2;pointer-events:none}
.placa .c1{top:10px;left:10px;border-right:0;border-bottom:0}
.placa .c2{bottom:10px;right:10px;border-left:0;border-top:0}
.placa .tx{padding:var(--u2);display:flex;flex-direction:column;flex:1}
.placa h4{margin:0 0 7px;font-size:17px;font-weight:700;letter-spacing:-.014em;line-height:1.3}
.placa p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.placa .meta{margin-top:auto;padding-top:var(--u2);font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.04em}

/* ---------------- servicios: peso menor a propósito ---------------- */
.servicios{padding:var(--u10) 0;border-top:1px solid var(--rule);background:var(--paper-2)}
.sv{display:grid;grid-template-columns:1fr 1fr;gap:var(--u8);align-items:start}
.sv .head h2{font-size:clamp(26px,3.2vw,36px)}
.sv .head p{font-size:17px}
.sv .head p + p{margin-top:var(--u2)}
.sv .go{
  display:inline-flex;align-items:center;gap:7px;margin-top:var(--u3);
  font-size:16px;font-weight:700;text-decoration:none;color:var(--ink);
}
/* encabezado de seccion a ancho completo con su enlace a la derecha, igual
   que los encabezados de grupo. Media columna no daba: el enlace no cabia. */
.servicios .cabeza{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--u3);flex-wrap:wrap;margin-bottom:var(--u6);
}
.servicios .cabeza h2{font-size:clamp(26px,3.2vw,36px);max-width:22ch}
.servicios .cabeza .lab{white-space:nowrap;padding-top:10px;text-decoration:none}
@media (hover:hover) and (pointer:fine){.servicios .cabeza .lab:hover{color:var(--ink)}}

.sv .go span{color:var(--senal);transition:transform 200ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .sv .go:hover span{transform:translateX(3px)}
}

.sv .listado{margin-top:var(--u3);border-top:1px solid var(--rule-2)}
.sv .listado div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--u2);
  padding:13px 0;border-bottom:1px solid var(--rule-2);
}
.sv .listado b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.sv .listado span{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);text-align:right}

.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--u1)}
.minis figure{margin:0}
.minis img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.minis figcaption{margin-top:9px;font-family:var(--mono);font-size:12px;color:var(--ink-3);line-height:1.35}

/* ---------------- planta ---------------- */
.capacidad{padding:var(--u10) 0;border-top:1px solid var(--rule)}
.cap-top{display:grid;grid-template-columns:1fr 1fr;gap:var(--u8);align-items:end}
.cap-top .foto img{width:100%;border-radius:3px}
.cap-top .foto figcaption{margin-top:var(--u2);font-family:var(--mono);font-size:12px;color:var(--ink-3)}

.equipos{display:grid;grid-template-columns:1fr 1fr;gap:var(--u8);margin-top:var(--u8)}
.equipos .col > .lab{display:block;padding-bottom:var(--u2);border-bottom:1px solid var(--ink)}
.equipos ul{list-style:none;margin:0;padding:0}
.equipos li{display:grid;grid-template-columns:38px 1fr;gap:var(--u1);align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule-2)}
.equipos .q{font-family:var(--mono);font-size:14px;color:var(--senal);font-variant-numeric:tabular-nums}
.equipos .m{font-size:16px;font-weight:700;letter-spacing:-.012em}
.equipos .m em{display:block;font-style:normal;font-weight:400;font-size:14px;color:var(--ink-2);margin-top:2px}

/* ---------------- cierre ---------------- */
.cierre{padding:var(--u12) 0;border-top:1px solid var(--rule);text-align:center;background:var(--paper-2)}
.cierre h2{max-width:18ch;margin:var(--u3) auto 0}
.cierre p{margin:var(--u3) auto 0;color:var(--ink-2);font-size:19px;max-width:54ch}
.cierre .btns{display:flex;gap:var(--u2);justify-content:center;margin-top:var(--u4);flex-wrap:wrap}

footer{border-top:1px solid var(--rule);padding:var(--u6) 0 var(--u4)}
footer .in{display:flex;justify-content:space-between;gap:var(--u6);flex-wrap:wrap}
footer .brand{display:flex;align-items:center;gap:11px;margin-bottom:var(--u2)}
footer .brand svg{width:46px;height:auto;display:block}
footer .brand .wm{font-weight:800;font-variation-settings:"wdth" 125;font-size:14px;letter-spacing:.15em}
footer .about{color:var(--ink-2);font-size:15px;max-width:34ch}
footer .cols{display:flex;gap:var(--u6);flex-wrap:wrap}
footer .col b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:var(--u2)}
footer .col a,footer .col span{display:block;text-decoration:none;color:var(--ink-2);font-size:15px;margin-bottom:9px}
footer .col a:hover{color:var(--ink)}
footer .legal{
  margin-top:var(--u6);padding-top:var(--u3);border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:var(--u2);flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-3);
}


/* ---------------- lead: el eslogan ---------------- */
.hero .lead,.hero .sub,.hero .btns{margin-left:calc(4px + var(--u3))}
@media (max-width:520px){.hero .lead,.hero .sub,.hero .btns{margin-left:calc(3px + var(--u2))}}
.hero .lead{
  margin-top:var(--u3);
  font-size:clamp(20px,2.3vw,27px);
  font-weight:700;
  font-variation-settings:"wdth" 104;
  letter-spacing:-.022em;
  line-height:1.3;
  max-width:26ch;
}

/* ---------------- menú móvil ---------------- */
.burger[aria-expanded="true"]{background:var(--paper-2);border-color:var(--rule-2)}
#menu{
  display:none;
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;top:66px;z-index:59;
  padding-bottom:var(--u2);
}
#menu[data-open="true"]{display:block}
#menu ul{list-style:none;margin:0;padding:var(--u1) 0 var(--u2)}
#menu a{
  display:block;padding:14px 0;text-decoration:none;color:var(--ink);
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  border-bottom:1px solid var(--rule);
}
#menu a.secundario{font-weight:400;color:var(--ink-2);font-size:16px}
#menu .cta{
  display:block;margin-top:var(--u2);text-align:center;
  background:var(--fill);color:var(--fill-ink);text-decoration:none;
  font-size:16px;font-weight:700;padding:15px 20px;border-radius:2px;border-bottom:0;
}
@media (min-width:901px){#menu{display:none!important}}

/* ---------------- bloque de contacto ---------------- */
.cierre{text-align:left}
.cierre .head{max-width:none}
.cta-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--u8);margin-top:var(--u6);align-items:start}

.canales{margin-top:var(--u4);border-top:1px solid var(--rule-2)}
.canal{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--u2);
  padding:16px 0;border-bottom:1px solid var(--rule-2);text-decoration:none;color:inherit;
}
a.canal:hover .v{color:var(--fill)}
.canal .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);flex:none}
.canal .v{
  font-size:17px;font-weight:700;letter-spacing:-.012em;text-align:right;
  min-width:0;overflow-wrap:anywhere;
  transition:color 160ms var(--ease);
}

/* en pantalla angosta la etiqueta va arriba: un correo largo no cabe al lado */
@media (max-width:520px){
  .canal{flex-direction:column;align-items:stretch;gap:5px}
  .canal .v{text-align:left}
}
.canal .v em{display:block;font-style:normal;font-weight:400;font-size:14px;color:var(--ink-3);margin-top:2px}

.despues{
  margin-top:var(--u3);padding:var(--u2);background:var(--paper);
  border:1px solid var(--rule);border-radius:3px;
}
.despues b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:9px}
.despues p{font-size:15.5px;color:var(--ink-2);line-height:1.55}


/* ---------------- movimiento ----------------
   Tres piezas, cada una con un motivo:
   1. Las ocho etapas y los tres pasos del proyecto SON una secuencia, y
      entrar escalonados lo demuestra. Es explicación, no adorno.
   2. Las etapas no respondían al cursor y se leían como un bloque: el
      número y el título acusan recibo sin mover la caja, porque moverla
      rompería la línea continua de la retícula.
   3. La foto de cada placa acerca apenas al pasar el cursor.
   El escalonado lo enciende el JS, así que sin JS todo se ve completo. */

.revelar > *{
  opacity:0;transform:translateY(14px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease);
  transition-delay:calc(var(--i,0) * 55ms);
}
.revelar.dentro > *{opacity:1;transform:none}

@media (hover:hover) and (pointer:fine){
  .paso .n{display:inline-block}
  .paso .n,.paso b{transition:transform 220ms var(--ease),color 160ms var(--ease)}
  .paso:hover .n{transform:translateX(5px);color:var(--fill)}
  .paso:hover b{transform:translateX(5px)}

  .placa .im img{transition:transform 500ms var(--ease)}
  .placa:hover .im img{transform:scale(1.03)}
}


/* ---------------- formulario ---------------- */
.form{background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:var(--u4)}
.form .fila{display:grid;grid-template-columns:1fr 1fr;gap:var(--u2)}
.form label{display:block;margin-bottom:var(--u2)}
.form .t{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.form input,.form textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-2);border-radius:2px;
  padding:13px 14px;
  transition:border-color 160ms var(--ease);
}
.form input:hover,.form textarea:hover{border-color:var(--ink-3)}
.form input:focus,.form textarea:focus{border-color:var(--fill);outline:none;box-shadow:0 0 0 3px rgba(200,65,15,.12)}
.form textarea{min-height:104px;resize:vertical;line-height:1.5}
.form input[type=file]{padding:13px;background:var(--paper-2);cursor:pointer}
.form .ayuda{font-size:13.5px;color:var(--ink-3);margin-top:7px}
.form button{
  width:100%;margin-top:var(--u1);
  background:var(--fill);color:var(--fill-ink);border:0;border-radius:2px;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:700;padding:17px 24px;
  transition:transform 140ms var(--ease),background 160ms var(--ease);
}
.form button:hover{background:var(--fill-hover)}
.form button:active{transform:scale(.97)}
.form .err{
  display:none;margin-top:7px;font-size:13.5px;color:var(--fill);font-weight:700;
}
.form .err[data-visible="true"]{display:block}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:var(--fill)}
.resumen{
  border:1px solid var(--fill);
  border-radius:2px;padding:var(--u2);margin-bottom:var(--u3);
}
.resumen b{display:block;font-size:16px;margin-bottom:9px}
.resumen ul{margin:0;padding-left:18px}
.resumen li{font-size:15px;margin-bottom:5px}
.resumen a{color:var(--fill);font-weight:700}
.aviso{
  margin-top:var(--u2);padding:var(--u2);border-radius:2px;
  border:1px solid var(--rule-2);background:var(--paper-2);
  font-size:15.5px;line-height:1.5;
}
.aviso[data-tipo="ok"]{border-color:var(--fill)}
.aviso b{display:block;margin-bottom:5px}
.form button[disabled]{opacity:.6;cursor:progress}
.form .nota{margin-top:var(--u2);font-size:13.5px;color:var(--ink-3);line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:1000px){
  .cta-grid{grid-template-columns:1fr;gap:var(--u6)}
}
@media (max-width:520px){
  .form{padding:var(--u3) var(--u2)}
  .form .fila{grid-template-columns:1fr;gap:0}
}

@media (max-width:1100px){
  nav .links a.secundario{display:none}
}
@media (max-width:1000px){
  .pasos{grid-template-columns:repeat(2,1fr)}
  .placas{grid-template-columns:1fr 1fr}
  .ing-top,.sv,.cap-top,.equipos{grid-template-columns:1fr;gap:var(--u6)}
}
/* La barra completa mide ~900 px. Debajo de eso va el menú de hamburguesa,
   si no el botón se sale de la pantalla en tableta vertical. */
@media (max-width:900px){
  nav .links,nav .cta{display:none}
  .burger{display:flex}
}
@media (max-width:760px){
  .hero{padding:var(--u8) 0 var(--u4)}
  .ingenieria,.entregamos,.servicios,.capacidad,.cierre{padding:var(--u8) 0}
  .placas{grid-template-columns:1fr}
  .gh{flex-wrap:wrap}
  .gh .cnt{margin-left:0}
}
@media (max-width:520px){
  .pasos{grid-template-columns:1fr}
  .paso{padding-right:0}
  .minis{grid-template-columns:1fr 1fr}
}

/* ═══════ Páginas interiores ═══════════════════════════════════════════ */

/* portada de página interior: el eje estructura, como en el titular */
.phero{padding:var(--u10) 0 var(--u8)}
.phero .in{display:grid;grid-template-columns:4px 1fr;gap:var(--u3);align-items:start}
.phero .eje{
  display:block;align-self:stretch;background:var(--senal);
  transform-origin:top center;animation:draw 700ms var(--ease) both;
}
.phero h1{font-size:clamp(34px,5.4vw,62px)}
.phero p{margin-top:var(--u3);font-size:clamp(18px,1.8vw,21px);color:var(--ink-2);max-width:52ch;line-height:1.55}

.sec{padding:var(--u10) 0;border-top:1px solid var(--rule)}
.sec.alterna{background:var(--paper-2)}
.sec .head{margin-bottom:var(--u6)}

/* las placas de la portada aceptan h3 en interiores */
.placa h3{font-size:17px;font-weight:700;letter-spacing:-.014em;line-height:1.3;margin:0 0 7px}

/* dos columnas de texto y apoyo */
.bloque{display:grid;grid-template-columns:1fr 1fr;gap:var(--u8);align-items:start}
.bloque h2{margin-bottom:var(--u3)}
.bloque > div > p{color:var(--ink-2);font-size:17px;line-height:1.6}
.bloque > div > p + p{margin-top:var(--u2)}

.lista-check{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.lista-check li{
  position:relative;padding:14px 0 14px 22px;
  border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:15.5px;
}
.lista-check li::before{
  content:"";position:absolute;left:0;top:22px;
  width:8px;height:8px;border-radius:50%;background:var(--senal);
}

/* hoja de datos de planta: cada máquina con su sobre de trabajo.
   La unidad doble no es adorno. Aquí se compra en métrico y en
   imperial al mismo tiempo, y obligar al lector a convertir es
   pedirle trabajo justo cuando está decidiendo si su pieza entra. */
.equipos{
  display:grid;grid-template-columns:1fr 1fr;gap:0 var(--u8);
  border-top:1px solid var(--rule-2);
}
.equipos > div{padding:var(--u3) 0;border-bottom:1px solid var(--rule)}
.equipos h3{font-size:16px;font-weight:700;letter-spacing:-.012em;margin:0 0 3px}
.equipos .tipo{
  display:block;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:11px;
}
.equipos dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px var(--u2)}
.equipos dt{font-size:14px;color:var(--ink-3)}
.equipos dd{
  margin:0;font-size:14px;color:var(--ink-2);
  text-align:right;font-variant-numeric:tabular-nums;
}
@media (max-width:900px){.equipos{grid-template-columns:1fr;gap:0}}

/* preguntas frecuentes: dos columnas de pregunta y respuesta.
   Sin acordeón a propósito. Un <details> cerrado esconde el texto, y
   la respuesta visible es justamente lo que los motores citan. */
.faq{
  display:grid;grid-template-columns:1fr 1fr;gap:0 var(--u8);
  border-top:1px solid var(--rule-2);
}
.faq > div{padding:var(--u3) 0;border-bottom:1px solid var(--rule)}
.faq h3{
  font-size:17px;font-weight:700;letter-spacing:-.014em;
  line-height:1.35;margin:0 0 9px;
}
.faq p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.6}
@media (max-width:900px){.faq{grid-template-columns:1fr;gap:0}}

.panel{background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;padding:var(--u3)}
.panel b{display:block;font-size:17px;font-weight:700;letter-spacing:-.012em;margin-bottom:9px}
.panel p{color:var(--ink-2);font-size:15.5px;line-height:1.55}
.panel .pie,.nota .pie{
  margin-top:var(--u2);padding-top:var(--u2);border-top:1px solid var(--rule);
}
.panel .pie b,.nota .pie b{font-size:15px;margin-bottom:6px}
.cap-top .foto{margin:0}

/* marcas que se integran: texto, nunca logotipos ajenos */
.marcas{display:flex;gap:var(--u3);flex-wrap:wrap;align-items:center;padding-top:var(--u2)}
.marcas span{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  color:var(--ink-3);border:1px solid var(--rule-2);border-radius:2px;padding:8px 12px;
}

/* capacidad: lista de máquinas a dos columnas */
.cap{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--u8);align-items:start}
.cap .lista{columns:2;column-gap:var(--u4);border-top:1px solid var(--rule-2)}
.cap .lista div{
  break-inside:avoid;padding:12px 0 12px 20px;position:relative;
  border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--ink-2);
}
.cap .lista div::before{content:"";position:absolute;left:0;top:20px;width:7px;height:7px;background:var(--ink-3)}
.cap .nota{margin-top:var(--u3)}

@media (max-width:1000px){
  .bloque,.cap{grid-template-columns:1fr;gap:var(--u6)}
  .cap .lista{columns:1}
}
@media (max-width:520px){
  .phero{padding:var(--u8) 0 var(--u6)}
  .phero .in{grid-template-columns:3px 1fr;gap:var(--u2)}
}

/* mapa de la planta: proporción fija y sin marco propio */
.mapa{
  margin-top:var(--u4);border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;background:var(--paper-2);
}
.mapa iframe{display:block;width:100%;height:380px;border:0}
.mapa figcaption{
  padding:var(--u2);border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
}
@media (max-width:640px){.mapa iframe{height:300px}}

/* landing de captación: respuesta rápida bajo los botones del hero */
.phero .rapido{
  margin-top:var(--u2);font-size:15px;color:var(--ink-3);
}
.phero .rapido a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--rule-2)}
.phero .rapido a:hover{border-bottom-color:var(--fill)}

.bloque.separado{margin-top:var(--u8)}
.link-mas{
  display:inline-flex;align-items:center;gap:7px;margin-top:var(--u3);
  font-size:16px;font-weight:700;text-decoration:none;color:var(--ink);
}
.link-mas span{color:var(--senal);transition:transform 200ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .link-mas:hover span{transform:translateX(3px)}
}

/* prosa legal: medida cómoda de lectura, jerarquía sobria */
.prosa{max-width:68ch}
.prosa .fecha{
  font-family:var(--mono);font-size:13px;
  color:var(--ink-3);padding-bottom:var(--u2);border-bottom:1px solid var(--rule);
}
.prosa h2{
  font-size:22px;font-variation-settings:"wdth" 104;letter-spacing:-.016em;
  line-height:1.3;margin-top:var(--u6);
}
.prosa p{margin-top:var(--u2);color:var(--ink-2);font-size:17px;line-height:1.7}
.prosa b{color:var(--ink)}
.prosa a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.prosa a:hover{border-bottom-color:var(--fill)}
.prosa ul{margin:var(--u2) 0 0;padding:0;list-style:none}
.prosa li{
  position:relative;padding:9px 0 9px 22px;
  color:var(--ink-2);font-size:16.5px;line-height:1.6;
}
.prosa li::before{
  content:"";position:absolute;left:0;top:18px;
  width:7px;height:7px;border-radius:50%;background:var(--rule-2);
}
.prosa .cierre-nota{
  margin-top:var(--u6);padding:var(--u3);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;
  color:var(--ink);font-size:16px;
}

/* ---------------- menos movimiento ----------------
   Va al final del archivo a propósito. Estaba arriba, antes de las reglas
   que anula, y como los media queries no suman especificidad decidía el
   orden: cinco de sus seis declaraciones no hacían nada. Si agregas
   movimiento nuevo, apágalo aquí, y aquí abajo.
   Más suave, no apagado: se conserva la aparición y el cambio de color,
   se quita el recorrido. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .titular .eje,.phero .eje{animation:none}
  .placa:hover{transform:none}
  .placa:hover .im img{transform:none}
  .btn:active,nav .cta:active,.form button:active,.burger:active{transform:none}
  .sv .go:hover span,.link-mas:hover span{transform:none}
  .paso:hover .n,.paso:hover b{transform:none}
  .revelar > *{transform:none;transition-delay:0ms;transition-duration:220ms}
}