/* ============================================================
   CHATARRA SIERRA — hoja de estilo

   REGISTRO: industrial serio y legal. Lo eligio Rober, y manda sobre todo lo
   demas: aqui no se decora, se acredita. Una chatarreria compite contra la
   sospecha de que "eso es un desguace ilegal", asi que la pagina tiene que
   parecer una empresa con papeles, no un anuncio.

   COLOR: el dominante es ACERO (#22272c), no casi-negro. Y el acento es
   COBRE (#c06a2c) por una razon que no es estetica: el cobre es el metal que
   mejor pagan de los diez que compran. El acento de la web es su mercancia
   mas cara. Las secciones claras van en NIEBLA (#ebe8e2), un blanco de yeso
   frio — no el crema calido de manual, que es topico catalogado.

   TIPOGRAFIA: Barlow Condensed (rotulo de senaletica de transporte, que es de
   donde viene el mundo del cliente: camiones, basculas, matriculas) y Barlow
   para el texto. Nada de Inter ni Roboto.
   ============================================================ */

@font-face { font-family: 'Barlow Cond'; src: url('fonts/barlowcond.woff2') format('woff2');
  font-weight: 500 800; font-display: swap; font-style: normal; }
@font-face { font-family: 'Barlow'; src: url('fonts/barlow.woff2') format('woff2');
  font-weight: 400 700; font-display: swap; font-style: normal; }

:root{
  --hierro:#16191c; --acero:#22272c; --acero-alto:#2c3238; --acero-borde:#3a4148;
  --niebla:#ebe8e2; --niebla-alt:#dfdbd3; --niebla-borde:#c8c3b9;
  --cobre:#c06a2c; --cobre-luz:#e2a061;
  --texto:#d7dbdf; --texto-apag:#9aa1a8; --tinta:#1b1f23; --tinta-apag:#5b6167;
  --display:'Barlow Cond',Impact,'Arial Narrow',sans-serif;
  --cuerpo:'Barlow',system-ui,sans-serif;
  --marco:clamp(1.1rem,4vw,3.4rem);
  --cab:5.2rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--acero);color:var(--texto);
  font:400 clamp(1rem,.55vw + .88rem,1.14rem)/1.62 var(--cuerpo);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:.94;
  letter-spacing:-.005em;margin:0;text-transform:uppercase}
p{margin:0}
:focus-visible{outline:3px solid var(--cobre-luz);outline-offset:3px;border-radius:2px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:0;z-index:99;background:var(--cobre);color:#fff;
  padding:.8rem 1.2rem;font-weight:600}
.saltar:focus{left:.5rem;top:.5rem}

/* ---------- entradas: solo se esconden SI hay JS ---------- */
.js .sube{opacity:0;transform:translate3d(0,26px,0)}
.js .sube.dentro{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.25,1)}

/* ---------- cabecera ---------- */
.cab{position:fixed;inset:0 0 auto;z-index:40;height:var(--cab);display:flex;align-items:center;
  gap:1.4rem;padding:0 var(--marco);transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent}
.cab--fija{background:rgba(22,25,28,.94);backdrop-filter:blur(12px);border-bottom-color:var(--acero-borde)}
.cab__marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.cab__marca svg{width:2.1rem;height:2.1rem;flex:none}
.cab__nom{font-family:var(--display);font-weight:700;font-size:1.42rem;line-height:.9;
  text-transform:uppercase;letter-spacing:.01em}
.cab__nom span{display:block;font-family:var(--cuerpo);font-weight:500;font-size:.8rem;
  letter-spacing:.2em;color:var(--cobre-luz);text-transform:uppercase;margin-top:.22rem}
.nav{display:flex;flex:none;gap:1.5rem;font-family:var(--display);font-weight:600;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.04em}
.nav a{text-decoration:none;color:var(--texto-apag);padding:.55rem 0;transition:color .2s}
.nav a:hover{color:#fff}
.cab__tel{display:inline-flex;align-items:center;gap:.5rem;flex:none;white-space:nowrap;background:var(--cobre);color:#fff;
  text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.1rem;
  letter-spacing:.02em;padding:.66rem 1.1rem;min-height:44px;transition:background .2s}
.cab__tel:hover{background:var(--cobre-luz)}
@media (max-width:960px){.nav{display:none}}

/* ---------- portada: foto a la izquierda, ficha a la derecha ---------- */
.portada{display:grid;grid-template-columns:1.05fr .95fr;min-height:calc(100dvh - var(--cab));
  margin-top:var(--cab);background:var(--hierro)}
.portada__foto{position:relative;overflow:hidden;background:var(--hierro)}
.portada__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 56%}
.portada__foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(22,25,28,.42),rgba(22,25,28,0) 45%,rgba(22,25,28,.55))}
.portada__cara{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.2rem,2.6vh,3.4rem) clamp(1.4rem,3.2vw,3.8rem);gap:clamp(.7rem,1.5vh,1.4rem)}
.sello{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  border:1px solid var(--cobre);color:var(--cobre-luz);font-family:var(--display);font-weight:600;
  font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;padding:.42rem .8rem}
.sello svg{width:.95rem;height:.95rem}
.portada h1{font-size:clamp(2.6rem,min(7.2vw,10.4vh),6.4rem)}
.portada h1 em{font-style:normal;color:var(--cobre-luz);display:block}
.portada__bajo{color:var(--texto-apag);max-width:39ch;font-size:clamp(1rem,.4vw + .92rem,1.16rem)}
.portada__acc{display:flex;flex-wrap:wrap;gap:.7rem}
.bot{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1.14rem;letter-spacing:.03em;
  text-transform:uppercase;padding:.85rem 1.4rem;min-height:48px;transition:.2s}
.bot--fuerte{background:var(--cobre);color:#fff}
.bot--fuerte:hover{background:var(--cobre-luz)}
.bot--linea{border:1px solid var(--acero-borde);color:var(--texto)}
.bot--linea:hover{border-color:var(--cobre-luz);color:#fff}
.bot svg{width:1.15rem;height:1.15rem;flex:none}
.portada__pie{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;padding-top:.4rem;
  border-top:1px solid var(--acero-borde);font-size:.9rem;color:var(--texto-apag)}
.portada__pie b{font-family:var(--display);font-weight:700;font-size:1.28rem;color:#fff;
  display:block;line-height:1}
@media (max-width:900px){
  .portada{grid-template-columns:1fr;min-height:0}
  .portada__foto{aspect-ratio:16/9}
  .portada__foto img{object-position:50% 52%}
  /* los tres ultimos pixeles para que el boton de llamar entre en la
     primera pantalla de un movil de 844 de alto */
  .portada__cara{gap:.8rem;padding-block:1.2rem 1.4rem}
}

/* ---------- secciones ---------- */
.sec{padding:clamp(3.6rem,7vw,7rem) var(--marco)}
.sec--claro{background:var(--niebla);color:var(--tinta)}
.sec--hierro{background:var(--hierro)}
.rot{display:flex;align-items:baseline;gap:.8rem;font-family:var(--display);font-weight:600;
  font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cobre);
  margin-bottom:.7rem}
.rot::before{content:'';width:2.2rem;height:2px;background:var(--cobre);transform:translateY(-.3em)}
.sec h2{font-size:clamp(2.2rem,4.6vw,4rem);max-width:20ch}
.sec--claro h2{color:var(--tinta)}
.entradilla{margin-top:1rem;max-width:60ch;color:var(--texto-apag);
  font-size:clamp(1.02rem,.4vw + .94rem,1.2rem)}
.sec--claro .entradilla{color:var(--tinta-apag)}

/* ---------- FIRMA: las diez muestras de metal ---------- */
.metales{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:.9rem;
  margin-top:clamp(2rem,4vw,3.2rem);list-style:none;padding:0}
.metal{position:relative;overflow:hidden;background:var(--acero-alto);
  border:1px solid var(--acero-borde);padding:0}
.metal__cara{display:block;aspect-ratio:1/1;position:relative;
  background:linear-gradient(var(--g,148deg),var(--m) 0%,color-mix(in srgb,var(--m) 62%,#000) 46%,
    color-mix(in srgb,var(--m) 88%,#fff) 62%,color-mix(in srgb,var(--m) 55%,#000) 100%)}
.metal__cara::after{content:'';position:absolute;inset:0;
  background:linear-gradient(118deg,transparent 34%,rgba(255,255,255,.42) 47%,transparent 58%);
  transform:translate3d(-115%,0,0);transition:transform .85s cubic-bezier(.2,.7,.25,1)}
.metal:hover .metal__cara::after,.metal:focus-within .metal__cara::after{transform:translate3d(115%,0,0)}
.metal__n{display:flex;align-items:center;min-height:3.4rem;padding:.55rem .7rem;
  font-family:var(--display);font-weight:700;font-size:1.16rem;line-height:1.02;
  text-transform:uppercase;letter-spacing:.01em;color:#fff}
.metal__n small{display:block;font-family:var(--cuerpo);font-weight:500;font-size:.78rem;
  letter-spacing:.16em;color:var(--texto-apag);margin-top:.2rem}
@media (max-width:1100px){.metales{gap:.7rem}}
@media (max-width:860px){.metales{grid-template-columns:repeat(2,1fr)}}
.mas-metales{margin-top:1.6rem;color:var(--texto-apag);font-size:1rem}
.mas-metales b{color:#fff;font-weight:600}

/* ---------- el certificado ---------- */
.papel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);
  align-items:center;margin-top:clamp(2rem,4vw,3rem)}
.papel__doc{position:relative;background:#fff;border:1px solid var(--niebla-borde);
  padding:clamp(1.4rem,2.6vw,2.4rem);box-shadow:0 22px 48px -28px rgba(27,31,35,.55)}
.papel__doc::before{content:'';position:absolute;inset:0 auto 0 0;width:5px;background:var(--cobre)}
.papel__doc h3{font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--tinta);max-width:16ch}
.papel__sello{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);
  font-weight:600;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cobre);margin-bottom:.7rem}
.papel__l{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.72rem}
.papel__l li{display:flex;gap:.7rem;color:var(--tinta-apag);font-size:1rem;line-height:1.5}
.papel__l svg{width:1.15rem;height:1.15rem;flex:none;color:var(--cobre);margin-top:.2rem}
.papel__t{color:var(--tinta-apag);max-width:52ch}
.papel__t strong{color:var(--tinta)}
.papel__t p + p{margin-top:1rem}
@media (max-width:860px){.papel{grid-template-columns:1fr}}

/* ---------- servicios ---------- */
.serv{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:1px;
  background:var(--acero-borde);border:1px solid var(--acero-borde);
  margin-top:clamp(2rem,4vw,3.2rem);list-style:none;padding:0}
.serv li{background:var(--acero);padding:clamp(1.3rem,2.2vw,1.9rem);
  display:flex;flex-direction:column;gap:.6rem;transition:background .25s}
.serv li:hover{background:var(--acero-alto)}
.serv__i{width:2.4rem;height:2.4rem;color:var(--cobre-luz)}
.serv h3{font-size:1.44rem;color:#fff}
.serv p{color:var(--texto-apag);font-size:.98rem}
@media (max-width:980px){.serv{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.serv{grid-template-columns:1fr}}

/* ---------- servicios: la foto de la grua junto a las fichas ---------- */
/* La foto se estira hasta la altura EXACTA de las cuatro fichas. Con
   aspect-ratio fijo sobraban 150 px por debajo y la seccion parecia a medio
   maquetar. Y el encuadre se desplaza a la izquierda porque el sujeto es el
   PULPO, no la cabina: con el centro por defecto la grua se salia del cuadro
   justo cuando el pie habla de ella. */
.serv-f{display:grid;grid-template-columns:.82fr 2fr;gap:clamp(1.2rem,2.4vw,2rem);
  align-items:stretch;margin-top:clamp(2rem,4vw,3.2rem)}
.serv-f__foto{margin:0;display:flex;flex-direction:column;min-height:0}
.serv-f__foto picture{flex:1;min-height:0;display:block;border:1px solid var(--acero-borde)}
.serv-f__foto img{width:100%;height:100%;object-fit:cover;object-position:38% 44%}
.serv-f__foto figcaption{margin-top:.6rem;color:var(--texto-apag);font-size:.92rem;
  border-left:2px solid var(--cobre);padding-left:.7rem}
.serv-f .serv{margin-top:0}
@media (max-width:980px){.serv-f{grid-template-columns:1fr}
  .serv-f__foto picture{aspect-ratio:16/9}
  .serv-f__foto img{object-position:38% 40%}}

/* ---------- los tres pasos ---------- */
.pasos{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);
  gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(2.2rem,4vw,3.4rem);list-style:none;padding:0;
  counter-reset:p}
.pasos li{counter-increment:p;border-top:2px solid var(--niebla-borde);padding-top:1.1rem}
.pasos li::before{content:counter(p,decimal-leading-zero);display:block;
  font-family:var(--display);font-weight:700;font-size:clamp(3rem,5vw,4.4rem);line-height:.85;
  color:var(--cobre);margin-bottom:.5rem}
.pasos h3{font-size:1.6rem;color:var(--tinta);max-width:16ch}
.pasos p{margin-top:.5rem;color:var(--tinta-apag);font-size:1rem}
@media (max-width:820px){.pasos{grid-template-columns:1fr}}

/* ---------- foto ancha con desplazamiento ---------- */
/* La foto va LIMPIA y el pie DEBAJO, en una barra solida. Con el pie encima
   pasaban dos cosas malas a la vez: era un velo degradado sobre el texto, y
   tapaba justo el renglon del cartel que dice el horario — o sea, el rotulo
   tapaba lo unico que habia que leer de la foto. */
.banda{margin:0}
.banda__f{position:relative;height:clamp(20rem,46vh,32rem);overflow:hidden;background:var(--hierro)}
.banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;will-change:transform}
.banda__t{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem;align-items:baseline;
  background:var(--hierro);border-top:2px solid var(--cobre);padding:1.1rem var(--marco);
  font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.4vw,2.1rem);
  text-transform:uppercase;color:#fff;line-height:1}
.banda__t span{font-family:var(--cuerpo);font-weight:400;font-size:1rem;line-height:1.5;
  text-transform:none;color:var(--texto-apag);max-width:66ch}
@media (max-width:760px){.banda__t{grid-template-columns:1fr}}

/* ---------- abierto / cerrado ahora mismo ---------- */
.estado{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);
  font-weight:600;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.34rem .7rem;border:1px solid currentColor}
.estado::before{content:'';width:.55rem;height:.55rem;border-radius:50%;background:currentColor}
.estado--si{color:#6fbf73}
.estado--no{color:#c9805a}
.estado:empty{display:none}

/* ---------- horario y sitio ---------- */
.visita{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.6rem,4vw,3.6rem);
  margin-top:clamp(2rem,4vw,3rem);align-items:start}
.horario{list-style:none;margin:0;padding:0;border-top:1px solid var(--acero-borde)}
.horario li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--acero-borde)}
.horario b{font-family:var(--display);font-weight:600;font-size:1.16rem;
  text-transform:uppercase;letter-spacing:.02em;color:#fff}
.horario span{color:var(--texto-apag);font-variant-numeric:tabular-nums;text-align:right}
.horario li.cerrado span{color:#6f767d}
.horario li.hoy{background:rgba(192,106,44,.13);margin:0 -.7rem;padding-left:.7rem;padding-right:.7rem}
.horario li.hoy b{color:var(--cobre-luz)}
.sitio__d{display:grid;gap:1rem;margin-bottom:1.2rem}
.sitio__d p{color:var(--texto-apag)}
.tel-linea{display:inline-flex;align-items:center;min-height:26px;padding:.2rem .1rem;
  color:var(--cobre-luz);text-decoration:none;font-variant-numeric:tabular-nums}
.tel-linea:hover{text-decoration:underline}
.sitio__d b{display:block;font-family:var(--display);font-weight:700;font-size:1.3rem;color:#fff;
  text-transform:uppercase;letter-spacing:.02em}
.mapa{width:100%;aspect-ratio:16/10;border:1px solid var(--acero-borde);background:var(--acero-alto);
  color:var(--texto-apag);font-family:var(--display);font-weight:600;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:.6rem;transition:.2s}
.mapa:hover{border-color:var(--cobre);color:#fff}
iframe.mapa{display:block}
@media (max-width:860px){.visita{grid-template-columns:1fr}}

/* ---------- cierre ---------- */
.cierre{padding:clamp(3.4rem,7vw,6.4rem) var(--marco);background:var(--cobre);color:#fff;
  text-align:center}
.cierre h2{font-size:clamp(2.2rem,5.4vw,4.4rem);margin-inline:auto;max-width:18ch}
.cierre p{margin:1rem auto 0;max-width:46ch;color:rgba(255,255,255,.86)}
.cierre__acc{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.8rem}
.cierre .bot--fuerte{background:#fff;color:var(--cobre)}
.cierre .bot--fuerte:hover{background:var(--hierro);color:#fff}
.cierre .bot--linea{border-color:rgba(255,255,255,.55);color:#fff}
.cierre .bot--linea:hover{border-color:#fff;background:rgba(255,255,255,.12)}

/* ---------- pie ---------- */
.pie{background:var(--hierro);padding:clamp(2.6rem,5vw,4rem) var(--marco) 2rem;
  border-top:1px solid var(--acero-borde)}
.pie__f{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.pie h3{font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cobre);margin-bottom:.8rem}
.pie a{color:var(--texto-apag);text-decoration:none;display:inline-flex;align-items:center;
  min-height:26px;padding:.3rem 0;
  transition:color .2s}
.pie a:hover{color:#fff}
.pie ul{list-style:none;margin:0;padding:0}
.pie__legal{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--acero-borde);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.86rem;color:#6f767d}
@media (max-width:820px){.pie__f{grid-template-columns:1fr}}

/* ---------- paginas legales ---------- */
.legal{max-width:74ch;margin:0 auto;padding:calc(var(--cab) + 3rem) var(--marco) 5rem}
.legal h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.6rem}
.legal h2{font-size:1.5rem;margin:2.4rem 0 .7rem;color:#fff}
.legal p,.legal li{color:var(--texto-apag)}
.legal p{margin-bottom:.9rem}
.legal ul{padding-left:1.2rem}
.legal a{color:var(--cobre-luz)}