:root{
    --navy-950:#0a1626;
    --navy-900:#0d1e33;
    --navy-800:#143a63;
    --copper-500:#b4713a;
    --copper-300:#d99a5c;
    /* Cobre oscuro reservado para TEXTO y fondos de boton sobre fondos claros.
       --copper-500 no alcanza 4.5:1 como color tipografico; este si (ver reporte
       de auditoria de contraste). --copper-500 sigue siendo el cobre "de acento"
       para bordes, filetes y detalles graficos, donde el contraste AA no aplica. */
    --copper-700:#9c6132;
    --paper:#f4f6f9;
    --white:#ffffff;
    --ink:#0c1c2e;
    --ink-soft:#4d5f74;
    --line:#e3e8ef;
    --line-dark:rgba(217,154,92,.22);
    --ok:#7fd1a3;
    --error:#f0906f;

    --display:'Oswald',
      'Helvetica Neue Condensed','Arial Narrow',sans-serif;
    --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

    --pad:clamp(1.25rem,5vw,4rem);
    --gutter:clamp(3.5rem,7vw,6.5rem);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    font-family:var(--body);
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img{max-width:100%;display:block;}

  a{color:inherit;}

  /* Saltar al contenido: invisible salvo con foco de teclado. Permite evitar
     los enlaces de la barra superior y de navegación antes de llegar al
     contenido principal. */
  .skip-link{
    position:absolute;
    left:-9999px;
    top:1rem;
    z-index:100;
    background:var(--copper-700);
    color:#fff;
    font-family:var(--body);
    font-weight:600;
    font-size:.9rem;
    padding:.75rem 1.25rem;
    text-decoration:none;
  }
  .skip-link:focus{left:1rem;}

  :focus-visible{
    outline:2px solid var(--copper-300);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;}
    html{scroll-behavior:auto;}
  }

  /* ---------- barra de contacto ---------- */
  .topbar{
    background:var(--copper-700);
    color:#fff;
    font-family:var(--mono);
    font-size:.7rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:.5rem var(--pad);
  }
  .topbar-wrap{
    max-width:1180px;
    margin-inline:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:.35rem 1.5rem;
  }
  .topbar a,.topbar span{color:#fff;text-decoration:none;}
  .topbar a:hover{text-decoration:underline;}
  .topbar-dir{opacity:.85;}
  @media (max-width:760px){
    .topbar-dir{display:none;}
    .topbar-wrap{justify-content:center;}
  }
  @media (max-width:420px){
    .topbar-mail{display:none;}
  }

  /* ---------- tipografía compartida ---------- */
  .eyebrow{
    font-family:var(--display);
    font-weight:500;
    font-size:.8rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--copper-700);
  }
  .eyebrow--onDark{color:var(--copper-300);}

  h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(1.9rem,4vw,3rem);
    line-height:1.08;
    letter-spacing:-.005em;
    text-wrap:balance;
    margin-top:.7rem;
  }

  h3{
    font-family:var(--display);
    font-weight:600;
    font-size:1.15rem;
    letter-spacing:.01em;
    line-height:1.25;
  }

  .lede{
    max-width:62ch;
    color:var(--ink-soft);
    margin-top:1.1rem;
    font-size:1.05rem;
  }
  .lede--onDark{color:rgba(244,246,249,.72);}

  section{
    padding:var(--gutter) var(--pad);
    scroll-margin-top:80px;
  }

  .wrap{max-width:1180px;margin-inline:auto;}

  .sec-head{margin-bottom:clamp(2.2rem,4vw,3.4rem);}

  /* ---------- navbar ---------- */
  .nav{
    position:sticky;
    top:0;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding:.85rem var(--pad);
    background:rgba(10,22,38,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-dark);
    overflow:visible;
  }

  /* El logo desborda la navbar hacia abajo para ganar presencia. Su z-index
     queda por encima del panel móvil (.nav-mobile, z-index:55) para que ese
     panel no le tape la porción que sobresale mientras el menú está abierto. */
  .logo{
    display:flex;
    align-items:center;
    gap:.7rem;
    font-family:var(--display);
    font-weight:600;
    font-size:1.5rem;
    letter-spacing:.03em;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    background:var(--navy-950);
    padding:.85rem 1.3rem;
    margin:-.85rem 0 -2.1rem;
    border-bottom:3px solid var(--copper-500);
    box-shadow:0 12px 28px rgba(0,0,0,.4);
    position:relative;
    z-index:56;
    flex:none;
  }
  .logo svg{width:36px;height:36px;flex:none;}
  /* El texto va envuelto en .logo-word (un único hijo del flex .logo) para que
     el gap:.7rem de arriba se aplique una sola vez, entre el ícono y la
     palabra. Sin este envoltorio, "METAL", <b>Y</b> y "COM" son tres hijos
     flex distintos (el texto plano y el <b> generan ítems flex propios) y el
     gap se cuela también DENTRO de la palabra, separándola en "METAL Y COM". */
  .logo b{font-weight:600;color:var(--copper-300);}

  @media (max-width:900px){
    .logo{
      font-size:1.15rem;
      padding:.7rem 1rem;
      margin:-.85rem 0 -1.5rem;
    }
    .logo svg{width:28px;height:28px;}
  }

  .nav-links{
    display:flex;
    gap:1.6rem;
    list-style:none;
    font-size:.85rem;
    font-weight:500;
  }
  .nav-links a{
    color:rgba(255,255,255,.78);
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:1px solid transparent;
    transition:color .18s,border-color .18s;
  }
  .nav-links a:hover{color:#fff;border-bottom-color:var(--copper-500);}

  @media (max-width:900px){.nav-links{display:none;}}

  .nav-toggle{
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
    border:0;
    padding:.5rem;
    cursor:pointer;
  }
  .nav-toggle span{
    display:block;
    width:22px;
    height:2px;
    background:#fff;
  }
  @media (max-width:900px){.nav-toggle{display:flex;}}

  .nav--solid{
    background:var(--navy-950);
    box-shadow:0 2px 18px rgba(0,0,0,.35);
  }

  /* El panel móvil cuelga de la navbar, que ya es position:sticky (ver arriba)
     y por lo tanto sirve de contenedor posicionado. Así no depende de ninguna
     altura fija. */
  .nav-mobile{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:55;
    background:var(--navy-900);
    border-bottom:1px solid var(--line-dark);
    display:flex;
    flex-direction:column;
  }
  /* El atributo hidden se implementa como [hidden]{display:none} en la hoja de
     estilos del navegador (origen "user agent"), con especificidad (0,1,0) —
     igual que la clase .nav-mobile de arriba. En un empate de especificidad, la
     hoja de autor (esta) gana sobre la del navegador, así que display:flex
     anulaba al atributo hidden y el panel nunca se ocultaba. Esta regla sube la
     especificidad a (0,2,0) para que hidden vuelva a mandar. */
  .nav-mobile[hidden]{display:none;}
  .nav-mobile a{
    padding:.9rem var(--pad);
    color:rgba(255,255,255,.85);
    text-decoration:none;
    border-top:1px solid rgba(255,255,255,.07);
    font-size:.95rem;
  }
  .nav-mobile a:hover{color:var(--copper-300);}

  /* Si el panel quedó abierto (hidden retirado por JS) y el viewport cruza los
     900px -por ejemplo al rotar una tablet o redimensionar la ventana-, esta
     regla lo oculta igual, sin depender de un listener de resize en JS. */
  @media (min-width:901px){
    .nav-mobile{display:none;}
  }

  .reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .5s ease,transform .5s ease;
  }
  .reveal--in{opacity:1;transform:none;}

  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }

  /* ---------- botones ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-family:var(--display);
    font-weight:500;
    font-size:.9rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    padding:.8rem 1.5rem;
    border:1px solid transparent;
    transition:background .18s,color .18s,border-color .18s;
  }
  .btn--solid{background:var(--copper-700);color:#fff;}
  .btn--solid:hover{background:var(--copper-300);color:var(--navy-950);}
  .btn--ghost{
    border-color:rgba(255,255,255,.4);
    color:#fff;
  }
  .btn--ghost:hover{border-color:var(--copper-300);color:var(--copper-300);}
  .btn--sm{padding:.6rem 1.1rem;font-size:.8rem;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:clamp(560px,88vh,860px);
    display:flex;
    align-items:flex-end;
    padding:var(--gutter) var(--pad) clamp(3rem,6vw,5rem);
    background:var(--navy-950);
    overflow:hidden;
  }

  .hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  @media (prefers-reduced-motion:reduce){
    .hero-video{display:none;}
    .hero{
      background:
        linear-gradient(197deg,#12283f 0%,#0a1626 55%,#070f1c 100%),
        url('../images/hero-poster.jpg') center/cover;
    }
  }

  .hero-scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(7,15,28,.94) 8%,rgba(7,15,28,.55) 46%,rgba(7,15,28,.2) 100%);
  }

  .hero-content{position:relative;max-width:1180px;margin-inline:auto;width:100%;}

  .hero h1{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(2.6rem,7vw,5.4rem);
    line-height:.98;
    letter-spacing:-.015em;
    color:#fff;
    text-wrap:balance;
    margin:.9rem 0 0;
    max-width:16ch;
  }
  .hero h1 em{font-style:normal;color:var(--copper-300);}

  .hero p{
    max-width:52ch;
    color:rgba(244,246,249,.8);
    margin-top:1.3rem;
    font-size:clamp(1rem,1.6vw,1.15rem);
  }

  .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem;}

  /* ---------- franja de capacidad ---------- */
  .capacity{
    background:var(--navy-800);
    padding:clamp(2.4rem,4vw,3.2rem) var(--pad);
  }
  .capacity-grid{
    max-width:1180px;
    margin-inline:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:1px;
    background:rgba(255,255,255,.14);
  }
  .cap{
    background:var(--navy-800);
    padding:1.4rem 1.5rem;
  }
  .cap-num{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(2rem,3.4vw,2.7rem);
    line-height:1;
    color:var(--copper-300);
    font-variant-numeric:tabular-nums;
  }
  .cap-num span{font-size:.5em;margin-left:.15em;}
  .cap-label{
    margin-top:.5rem;
    font-size:.83rem;
    line-height:1.45;
    color:rgba(255,255,255,.76);
  }
  .cap-src{
    margin-top:.35rem;
    font-family:var(--mono);
    font-size:.68rem;
    color:rgba(255,255,255,.6);
  }

  /* ---------- empresa ---------- */
  .two-col{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:1.5rem;
  }
  .card-vm{
    background:var(--white);
    border:1px solid var(--line);
    border-left:3px solid var(--navy-800);
    padding:1.8rem;
  }
  .card-vm--mision{border-left-color:var(--copper-500);}
  .card-vm p{margin-top:.8rem;color:var(--ink-soft);font-size:.95rem;}

  /* ---------- servicios ---------- */
  .servicios{background:var(--navy-950);color:#fff;}
  .serv-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1px;
    background:var(--line-dark);
    border:1px solid var(--line-dark);
  }
  .serv{
    background:var(--navy-950);
    padding:1.9rem 1.6rem;
    transition:background .2s;
  }
  .serv:hover{background:#0e1f36;}
  .serv-n{
    font-family:var(--mono);
    font-size:.7rem;
    color:var(--copper-500);
    letter-spacing:.08em;
  }
  .serv h3{color:#fff;margin:.7rem 0 .6rem;}
  .serv p{font-size:.9rem;color:rgba(244,246,249,.66);}

  /* ---------- trabajos ---------- */
  .job-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
    gap:1.5rem;
  }
  .job{
    background:var(--white);
    border:1px solid var(--line);
    display:flex;
    flex-direction:column;
  }
  .job-ph{
    aspect-ratio:4/3;
    background:
      repeating-linear-gradient(135deg,#e7ebf1 0 10px,#eef1f6 10px 20px);
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid var(--line);
  }
  .job-ph span{
    font-family:var(--mono);
    font-size:.66rem;
    letter-spacing:.05em;
    color:var(--ink-soft);
    border:1px dashed #b9c5d3;
    padding:.35rem .6rem;
    background:rgba(255,255,255,.7);
  }
  .job-body{padding:1.15rem 1.2rem 1.4rem;flex:1;}
  .job h3{font-size:1.02rem;}
  .job p{font-size:.87rem;color:var(--ink-soft);margin-top:.45rem;}
  .tag{
    display:inline-block;
    margin-top:.9rem;
    font-family:var(--mono);
    font-size:.66rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--copper-700);
    border:1px solid rgba(180,113,58,.35);
    padding:.22rem .55rem;
  }

  /* ---------- equipamiento ---------- */
  .equipos{background:var(--navy-950);color:#fff;}
  .eq-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
    gap:1.5rem;
  }
  .eq{
    border:1px solid var(--line-dark);
    background:linear-gradient(180deg,#0e1f36 0%,#0a1626 100%);
    padding:1.5rem 1.5rem 1.6rem;
  }
  .eq-top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    border-bottom:1px solid var(--line-dark);
    padding-bottom:.85rem;
  }
  .eq h3{color:#fff;}
  .eq-model{
    font-family:var(--mono);
    font-size:.72rem;
    color:var(--copper-300);
    text-align:right;
    flex:none;
  }
  .specs{
    list-style:none;
    margin-top:1rem;
    font-family:var(--mono);
    font-size:.76rem;
    color:rgba(244,246,249,.82);
  }
  .specs li{
    display:flex;
    align-items:baseline;
    gap:.5rem;
    padding:.28rem 0;
  }
  .specs .k{color:rgba(244,246,249,.5);white-space:nowrap;}
  .specs .dots{
    flex:1;
    border-bottom:1px dotted rgba(255,255,255,.2);
    transform:translateY(-3px);
  }
  .specs .v{
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    color:#fff;
  }
  .eq-pending{
    margin-top:1rem;
    font-family:var(--mono);
    font-size:.72rem;
    color:rgba(255,255,255,.45);
    border:1px dashed rgba(255,255,255,.22);
    padding:.55rem .7rem;
    line-height:1.5;
  }

  /* ---------- clientes ---------- */
  .clientes{background:var(--white);}
  .cli-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:clamp(2.5rem,6vw,5rem);
    padding:1.5rem 0;
  }
  .cli{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
  }
  /* Los logos van en gris para que no compitan entre si ni con el cobre del sitio;
     recuperan su color al pasar el mouse. El tamano se calibra por peso optico y no
     por altura: un logo ancho con la misma altura que uno compacto se ve el doble
     de grande. */
  .cli img{
    width:auto;
    height:auto;
    filter:grayscale(1);
    opacity:.7;
    transition:filter .25s,opacity .25s;
  }
  .cli:hover img{filter:none;opacity:1;}

  /* Marca de trazo fino: necesita mas presencia para no desaparecer en gris. */
  .cli-inppamet{max-width:150px;max-height:46px;opacity:.85;}
  /* Muy apaisado: se limita por ancho. */
  .cli-recimat{max-width:168px;max-height:42px;}
  /* Vertical: se limita por alto, si no queda diminuto junto a los demas. */
  .cli-socoal{max-width:60px;max-height:64px;}
  .cli-tratacal{max-width:158px;max-height:44px;}

  @media (max-width:600px){
    .cli-inppamet{max-width:130px;}
    .cli-recimat{max-width:145px;}
    .cli-socoal{max-height:56px;}
    .cli-tratacal{max-width:136px;}
  }

  @media (prefers-reduced-motion:reduce){
    .cli img{transition:none;}
  }

  /* ---------- calidad ---------- */
  .calidad{background:var(--paper);}
  .principios{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:1.4rem;
    margin-top:.5rem;
  }
  .principios li{
    border-top:2px solid var(--copper-500);
    padding-top:.9rem;
    font-size:.92rem;
    color:var(--ink-soft);
  }
  .principios strong{
    display:block;
    font-family:var(--display);
    font-weight:600;
    font-size:1rem;
    color:var(--ink);
    margin-bottom:.35rem;
    letter-spacing:.01em;
  }
  .firmas{
    display:flex;
    flex-wrap:wrap;
    gap:2.5rem;
    margin-top:2.8rem;
    padding-top:1.5rem;
    border-top:1px solid var(--line);
  }
  .firma b{
    display:block;
    font-family:var(--display);
    font-weight:600;
    font-size:1.05rem;
  }
  .firma span{
    font-family:var(--mono);
    font-size:.7rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* ---------- empleo ---------- */
  .empleo{background:var(--white);}

  .oficios{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
    margin-bottom:2.2rem;
  }
  .oficios li{
    font-family:var(--mono);
    font-size:.78rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--ink-soft);
    border:1px solid var(--line);
    border-left:3px solid var(--copper-500);
    padding:.5rem .9rem;
  }

  .empleo-acciones{display:flex;flex-wrap:wrap;gap:.9rem;}

  /* Variante del boton fantasma para fondos claros. */
  .btn--dark{border-color:var(--ink-soft);color:var(--ink);}
  .btn--dark:hover{border-color:var(--copper-500);color:var(--ink);}

  /* ---------- contacto ---------- */
  .contacto{background:var(--navy-950);color:#fff;}
  .cont-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(2rem,5vw,4rem);
  }
  @media (max-width:860px){.cont-grid{grid-template-columns:1fr;}}

  .field{margin-bottom:1rem;}
  .field label{
    display:block;
    font-family:var(--mono);
    font-size:.7rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
    margin-bottom:.4rem;
  }
  .field label .req{color:var(--copper-300);margin-left:.15rem;}
  .form-req-note{
    font-size:.8rem;
    color:rgba(255,255,255,.6);
    margin-bottom:1rem;
  }
  .form-req-note .req{color:var(--copper-300);}
  .field input,.field textarea{
    width:100%;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line-dark);
    color:#fff;
    font-family:var(--body);
    font-size:.95rem;
    padding:.7rem .85rem;
  }
  .field input:focus,.field textarea:focus{
    border-color:var(--copper-300);
    outline:none;
    background:rgba(255,255,255,.08);
  }
  .field textarea{min-height:120px;resize:vertical;}
  .row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
  @media (max-width:520px){.row-2{grid-template-columns:1fr;}}

  .datos{
    border-left:2px solid var(--copper-500);
    padding-left:1.4rem;
  }
  .datos dt{
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
    margin-top:1.2rem;
  }
  .datos dt:first-child{margin-top:0;}
  .datos dd{font-size:1rem;color:#fff;margin-top:.2rem;}
  .datos dd small{
    display:block;
    color:rgba(255,255,255,.55);
    font-size:.82rem;
  }

  /* ---------- footer ---------- */
  footer{
    background:#070f1c;
    color:rgba(255,255,255,.6);
    padding:2.5rem var(--pad);
    font-size:.83rem;
  }
  .foot-grid{
    max-width:1180px;
    margin-inline:auto;
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem 3rem;
    justify-content:space-between;
    align-items:flex-start;
  }
  footer b{color:#fff;font-weight:600;}

  /* ---------- whatsapp ---------- */
  .wa{
    position:fixed;
    right:1.2rem;
    bottom:1.2rem;
    z-index:70;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#25d366;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 22px rgba(0,0,0,.3);
    text-decoration:none;
  }
  .wa svg{width:27px;height:27px;fill:#fff;}

  /* ---------- formulario de contacto ---------- */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

  .form-estado{
    margin:1rem 0 0;
    font-size:.9rem;
    min-height:1.4em;
  }
  .form-estado--ok{color:var(--ok);}
  .form-estado--error{color:var(--error);}

  .field--error input,
  .field--error textarea,
  .field--error input:focus,
  .field--error textarea:focus{
    border-color:var(--error);
  }
  .field-error{
    display:block;
    margin-top:.3rem;
    font-size:.78rem;
    color:var(--error);
  }