/* ── Tipografía ──────────────────────────────────────────
   Oswald condensada para titulares: es la señal visual que más asocia una web
   con lo industrial (Caterpillar, Komatsu y las marcas de acero usan
   condensadas pesadas). Va alojada aquí, no en un CDN: 21 KB y sin depender
   de un servidor ajeno. El cuerpo del texto sigue en fuente de sistema, que
   se lee mejor en párrafos largos y no cuesta nada. */
@font-face{
  font-family:"Oswald";
  src:url("fuentes/oswald-latin.woff2") format("woff2");
  font-weight:400 700;               /* archivo variable: cubre todo el rango */
  font-style:normal;
  font-display:swap;                 /* el texto se ve desde el primer instante */
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212;
}

/* ============================================================
   MARK CT — hoja de estilos
   Sin framework y sin fuentes externas a propósito: la página carga al
   instante y no depende de ningún CDN. En este sector la mayoría de webs
   tardan varios segundos, y eso ya es una ventaja.
   ============================================================ */

:root{
  /* Grafito y acero, con el ROJO DEL LOGO como acento. Se usa con
     cuentagotas —titulillos, sellos, detalles— para que el conjunto siga
     siendo formal y no acabe pareciendo la típica web de obra amarilla. */
  --grafito:#12161b;
  --grafito-2:#1a2029;
  --acero:#5a6470;
  --acero-claro:#8a93a0;
  --hueso:#f5f6f8;
  --linea:#e2e5ea;
  --rojo:#c01c19;      /* para texto sobre blanco: contraste suficiente */
  --rojo-marca:#eb231f;  /* el rojo exacto del logo */
  --wa:#25d366;
  --blanco:#fff;

  --ancho:1140px;
  --radio:3px;          /* casi recto: lo redondeado dice "software", lo recto dice "acero" */
  --sombra:0 1px 2px rgba(18,22,27,.06), 0 8px 24px rgba(18,22,27,.08);
  --titular:"Oswald", "Arial Narrow", Impact, var(--fuente);
  --fuente:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--fuente); color:var(--grafito);
  background:var(--blanco); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
/* Titulares: condensados, en mayúsculas y con las letras algo separadas. Las
   condensadas juntan mucho las letras en mayúsculas y sin ese aire se leen mal. */
h1,h2,h3{font-family:var(--titular); line-height:1.12; margin:0 0 .5em;
  text-transform:uppercase; letter-spacing:.01em; font-weight:600}
h1{letter-spacing:0}
h1{font-size:clamp(2.15rem,5.4vw,3.6rem); font-weight:700}
h2{font-size:clamp(1.75rem,3.8vw,2.6rem); font-weight:600}
h3{font-size:1.15rem; font-weight:600; letter-spacing:.02em}
p{margin:0 0 1rem}
img{max-width:100%; display:block}
a{color:inherit}

.contenedor{width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto}

.saltar{position:absolute; left:-9999px; top:0; background:var(--grafito); color:#fff; padding:.75rem 1rem; z-index:100}
.saltar:focus{left:0}

/* ── Botones ─────────────────────────────────────────── */
.btn{
  font-family:var(--titular); text-transform:uppercase; letter-spacing:.04em;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.15rem; border-radius:var(--radio); font-weight:650;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  font-size:.97rem; transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--grande{padding:.95rem 1.6rem; font-size:1.03rem}
.btn--wa{background:var(--wa); color:#08301a; box-shadow:0 4px 14px rgba(37,211,102,.28)}
.btn--wa:hover{background:#1fbf5c}
.btn--solido{background:var(--grafito); color:#fff}
.btn--solido:hover{background:#000}
.btn--linea{border-color:rgba(255,255,255,.45); color:#fff}
.btn--linea:hover{background:rgba(255,255,255,.1)}
.ico{width:1.15em; height:1.15em; fill:currentColor; flex:none}

/* ── Cabecera ────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid var(--linea);
}
.cabecera__fila{display:flex; align-items:center; gap:1.25rem; min-height:68px}
.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:800; letter-spacing:-.02em}
/* El logo va sobre una placa blanca: la cabecera es semitransparente y, con el
   hero oscuro detrás, la tinta negra del logo perdía contraste al desplazarse.
   La placa lo aísla del fondo y de paso le da presencia de marca.
   Altura pensada para que quepa DENTRO de los 68 px de cabecera: 44 + 2×5 de
   relleno = 54. Al compactarse (58 px) baja a 38 + 10 = 48. La cabecera nunca
   crece por culpa del logo. */
/* El fondo blanco va dentro de la propia imagen (logo-fondo.png), con su margen
   ya calculado. Aquí solo la sombra, que da el efecto de chapa apoyada. */
/* Sin sombra ni redondeo: el blanco del logo y el de la cabecera son el mismo,
   así que el recuadro se funde y no se aprecia ningún borde. */
.logo{line-height:0}
.logo__img{height:52px; width:auto; display:block; transition:height .25s ease}
.cabecera.encogida .logo__img{height:45px}
/* El mismo logo que arriba, sin atenuar: la marca se ve igual en toda la web. */
.pie__logo{height:44px; width:auto; margin-bottom:.9rem; border-radius:3px}

@media (max-width:760px){
  .logo__img{height:44px}
  .cabecera.encogida .logo__img{height:40px}
}

.nav{display:flex; gap:1.4rem; margin-left:auto}
/* Menú en condensada y mayúsculas, como los titulares. En mayúsculas hace falta
   más separación entre letras: pegadas se leen peor y pierden el aire industrial. */
.nav a{
  font-family:var(--titular); text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; font-size:.95rem; font-weight:500; color:var(--acero);
  padding:.35rem 0; border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--grafito); border-bottom-color:var(--rojo)}

.hamburguesa{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.5rem; cursor:pointer; margin-left:auto}
.hamburguesa span{width:24px; height:2px; background:var(--grafito); border-radius:2px; transition:.2s}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Hero ────────────────────────────────────────────── */
.hero{position:relative; color:#fff; background:var(--grafito); overflow:hidden}
.hero__fondo{
  position:absolute; inset:0;
  background:url("imagenes/hero.jpg") center 62% / cover no-repeat;
}
/* Velo oscuro: la foto tiene mucha luz y sin esto el texto blanco no se lee.
   Más denso a la izquierda, que es donde va el titular. */
.hero__fondo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,13,17,.94) 0%, rgba(12,16,21,.86) 45%, rgba(14,18,24,.62) 100%);
}
/* Textura sutil de plancha metálica, hecha con CSS (sin imágenes que cargar) */
.hero__fondo::after{
  content:""; position:absolute; inset:0; opacity:.55;
  background:radial-gradient(900px 380px at 85% 0%, rgba(235,35,31,.14), transparent 62%);
}
.hero__caja{position:relative; padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(3rem,6vw,4.5rem); max-width:820px}
.hero h1{margin-bottom:1rem}
.hero h1 span{
  color:#fff; box-shadow:inset 0 -.16em 0 rgba(235,35,31,.85);
  padding-bottom:.02em;
}
.hero__bajada{font-size:clamp(1.02rem,2vw,1.2rem); color:#c8cfd9; max-width:62ch}
.hero__acciones{display:flex; gap:.85rem; flex-wrap:wrap; margin:1.9rem 0 2.6rem}

.sello{
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 1.4rem;
  background:rgba(235,35,31,.13); border:1px solid rgba(235,35,31,.45);
  color:#fff; padding:.45rem .9rem; border-radius:3px;
  font-size:.87rem; font-weight:650; letter-spacing:.01em;
}

.hero__datos{list-style:none; margin:0; padding:1.6rem 0 0; border-top:1px solid rgba(255,255,255,.13);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.hero__datos b{display:block; font-size:1.12rem; color:#fff}
.hero__datos span{font-size:.87rem; color:var(--acero-claro)}

/* ── Secciones ───────────────────────────────────────── */
.seccion{padding:clamp(3.5rem,7vw,5.5rem) 0}
.seccion--gris{background:var(--hueso)}
.seccion--oscura{background:var(--grafito-2); color:#fff}
.seccion--oscura .seccion__intro{color:#b8c0cc}
.seccion__eti{font-family:var(--titular); text-transform:uppercase; letter-spacing:.14em; font-size:.85rem; font-weight:600;
  color:var(--acero); margin:0 0 .6rem; display:flex; align-items:center; gap:.6rem}
.seccion__eti::before{content:""; width:26px; height:3px; background:var(--rojo-marca); border-radius:2px; flex:none}
.seccion--oscura .seccion__eti{color:#aeb6c2}
.seccion__titulo{margin-bottom:.6rem}
.seccion__intro{color:var(--acero); max-width:65ch; margin-bottom:2.5rem}

.rejilla{display:grid; gap:1.15rem}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.dos-columnas{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start}

/* ── Tarjetas de servicio ────────────────────────────── */
.tarjeta{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.6rem 1.5rem; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.tarjeta:hover{box-shadow:var(--sombra); transform:translateY(-2px); border-color:#cfd5de}
.tarjeta__ico{width:38px; height:38px; margin-bottom:.9rem; fill:none; stroke:var(--rojo); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.tarjeta p{color:var(--acero); margin:0; font-size:.97rem}
.tarjeta--proximo{background:var(--hueso); border-style:dashed}
.etiqueta{display:inline-block; background:var(--grafito); color:#fff; font-size:.78rem;
  font-family:var(--titular); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; padding:.25rem .6rem; border-radius:5px; margin-bottom:.8rem}

/* ── Comparador antes / después ──────────────────────── */
.comparador{max-width:980px; margin:0 auto}
.comparador__marco{
  position:relative; aspect-ratio:1400/645; border-radius:var(--radio);
  overflow:hidden; user-select:none; background:#0d1116; cursor:ew-resize;
}
.comparador__base, .comparador__capa img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
/* La capa se recorta por la derecha; el JS mueve ese recorte */
.comparador__capa{position:absolute; inset:0; clip-path:inset(0 50% 0 0)}
.comparador__eti{
  position:absolute; top:.9rem; z-index:3; color:#fff; padding:.32rem .8rem;
  border-radius:3px; font-size:.85rem; font-weight:500; letter-spacing:.09em;
  font-family:var(--titular);
  text-transform:uppercase; pointer-events:none;
}
.comparador__eti--izq{left:.9rem; background:rgba(18,22,27,.85)}
.comparador__eti--der{right:.9rem; background:rgba(235,35,31,.92)}
.comparador__linea{position:absolute; top:0; bottom:0; left:50%; width:3px;
  background:#fff; z-index:4; pointer-events:none; box-shadow:0 0 12px rgba(0,0,0,.5)}
.comparador__tirador{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.5);
}
.comparador__tirador::before{
  content:"‹ ›"; position:absolute; inset:0; display:grid; place-items:center;
  color:var(--grafito); font-weight:800; font-size:1.2rem; letter-spacing:-2px;
}
.comparador__rango{width:100%; margin-top:1rem; accent-color:var(--rojo-marca)}

/* ── Caso: comparador + ficha del trabajo ────────────── */
/* La imagen manda (columna ancha) y la ficha ocupa la banda de la derecha, que
   antes quedaba en negro: la sección se llenaba con un solo trabajo. */
.caso{display:grid; grid-template-columns:1.45fr .55fr; gap:2.2rem; align-items:start}
.caso .comparador{max-width:none; margin:0}
.caso__titulo{color:#fff; font-size:1.2rem; margin:0 0 1.1rem}
.caso__datos{margin:0; border-top:1px solid rgba(255,255,255,.14)}
.caso__datos dt{
  font-family:var(--titular); text-transform:uppercase; letter-spacing:.08em;
  font-size:.76rem; color:#8f98a5; margin-top:1.05rem;
}
.caso__datos dd{margin:.25rem 0 0; color:#dfe4ea; font-size:.95rem; line-height:1.55}
.caso__cierre{
  border-left:3px solid var(--rojo-marca); padding-left:.9rem;
  margin:1.5rem 0 0; color:#c3cad4; font-size:.94rem;
}

/* Cuadrícula de trabajos: vacía hasta que haya fotos (ver el HTML). */
.trabajos__mas{list-style:none; margin:2.5rem 0 0; padding:0}
.trabajo{
  margin:0; position:relative; aspect-ratio:4/3; display:flex; align-items:flex-end;
  background:#243040; border-radius:var(--radio); overflow:hidden;
}
.trabajo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.trabajo figcaption{
  position:relative; z-index:2; width:100%; padding:.9rem 1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.82)); color:#fff; font-size:.9rem;
}
.trabajo figcaption b{display:block; font-weight:700; margin-bottom:.15rem}

/* ── Capacidades ─────────────────────────────────────── */
.destacado{background:var(--grafito); color:#fff; border-radius:var(--radio); padding:1.8rem; margin-bottom:1.5rem}
.destacado h3{color:#fff; margin-bottom:.7rem}
.destacado p{color:#c8cfd9; margin-bottom:.8rem}
.destacado__nota{border-left:3px solid var(--rojo); padding-left:.9rem; font-size:.95rem; margin:0}
.lista-chequeo{list-style:none; margin:0; padding:0}
.lista-chequeo li{position:relative; padding-left:1.8rem; margin-bottom:.85rem; color:var(--acero); font-size:.97rem}
.lista-chequeo li::before{content:"✓"; position:absolute; left:0; top:-1px; color:var(--rojo); font-weight:800}
.lista-chequeo b{color:var(--grafito)}

.ficha{border:1px solid var(--linea); border-radius:var(--radio); padding:1.6rem; margin-bottom:1.5rem}
.ficha dl{margin:0}
.ficha dt{font-weight:700; font-size:.95rem; margin-top:1rem}
.ficha dt:first-of-type{margin-top:0}
.ficha dd{margin:.15rem 0 0; color:var(--acero); font-size:.94rem}
.sectores h3{margin-bottom:.8rem}
.pastillas{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0}
.pastillas li{background:var(--hueso); border:1px solid var(--linea); border-radius:3px; padding:.4rem .9rem; font-size:.9rem; font-weight:550}

/* ── Proceso ─────────────────────────────────────────── */
.pasos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem; counter-reset:p}
.pasos li{position:relative; padding-top:.5rem}
.pasos__n{display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--grafito); color:#fff; font-family:var(--titular); font-size:1.25rem;
  font-weight:600; margin-bottom:.9rem;
  box-shadow:inset 0 -3px 0 var(--rojo-marca)}
.pasos p{color:var(--acero); font-size:.96rem; margin:0}

/* ── Contacto ────────────────────────────────────────── */
.dos-columnas--contacto{grid-template-columns:1.15fr .85fr}
.formulario{display:grid; gap:1rem}
.formulario label{display:grid; gap:.35rem; font-weight:600; font-size:.94rem}
.formulario input,.formulario textarea{
  font:inherit; font-size:1rem; padding:.75rem .9rem; border:1.5px solid var(--linea);
  border-radius:3px; background:#fff; color:inherit; width:100%; font-weight:400;
}
.formulario input:focus,.formulario textarea:focus{outline:2px solid var(--rojo); outline-offset:1px; border-color:transparent}
.formulario textarea{resize:vertical}
.formulario__nota{font-size:.87rem; color:var(--acero); margin:0}
.formulario .error{border-color:#d13c3c}

.datos{background:var(--hueso); border:1px solid var(--linea); border-radius:var(--radio); padding:1.6rem}
.datos h3{margin-bottom:1rem}
.datos__linea{display:grid; grid-template-columns:92px 1fr; gap:.6rem; margin:0 0 .7rem; font-size:.94rem; align-items:start}
.datos__linea b{color:var(--acero); font-weight:600}
.mapa{margin-top:1.2rem; aspect-ratio:16/10; border-radius:3px; background:#dfe3e9; position:relative; overflow:hidden}
.mapa::before{content:attr(data-foto); position:absolute; inset:.6rem; display:grid; place-items:center;
  border:2px dashed #b9c0ca; border-radius:3px; color:var(--acero); font-size:.85rem; text-align:center; padding:1rem}

/* ── Pie ─────────────────────────────────────────────── */
.pie{background:var(--grafito); color:#9aa3b0; padding:2rem 0; font-size:.9rem}
.pie__fila{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.pie p{margin:0}
.pie__sello{font-family:var(--titular); text-transform:uppercase; letter-spacing:.08em;
  color:#c3cad4; font-weight:500}

/* ── WhatsApp flotante ───────────────────────────────── */
.wa-flotante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:60; width:56px; height:56px;
  border-radius:50%; background:var(--wa); display:grid; place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.28); transition:transform .15s ease;
}
.wa-flotante:hover{transform:scale(1.06)}
.wa-flotante svg{width:30px; height:30px; fill:#fff}

/* ── Móvil ───────────────────────────────────────────── */
@media (max-width:880px){
  .dos-columnas,.dos-columnas--contacto{grid-template-columns:1fr; gap:1.8rem}
  /* La ficha debajo del comparador: en dos columnas se quedaría en una tira
     de texto demasiado estrecha para leerse. */
  .caso{grid-template-columns:1fr; gap:1.5rem}
}
@media (max-width:760px){
  body{font-size:16px}
  .cabecera__cta{display:none}          /* ya está el botón flotante */
  .hamburguesa{display:flex}
  .nav{
    position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column;
    gap:0; padding:.5rem 1.25rem 1.25rem; border-bottom:1px solid var(--linea);
    box-shadow:var(--sombra); display:none;
  }
  .nav.abierto{display:flex}
  .nav a{padding:.9rem 0; font-size:1.02rem; letter-spacing:.1em; border-bottom:1px solid var(--linea)}
  .hero__datos{grid-template-columns:1fr; gap:.9rem; text-align:left}
  .hero__acciones .btn{width:100%}
  /* En columna, el `align-items:stretch` por defecto estiraba el logo a todo el
     ancho del pie manteniendo sus 44px de alto: la marca salía deformada. */
  .pie__fila{flex-direction:column; align-items:center; text-align:center}
}

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

.datos__razon{margin:1.1rem 0 0; padding-top:.9rem; border-top:1px solid var(--linea);
  font-size:.8rem; color:var(--acero-claro); letter-spacing:.02em}

/* ── Clientes ────────────────────────────────────────── */
.clientes{
  list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.clientes__item{
  position:relative; aspect-ratio:5/2; background:#fff; border:1px solid var(--linea);
  border-radius:var(--radio); display:grid; place-items:center; overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.clientes__item:hover{border-color:#cfd5de; box-shadow:var(--sombra)}
/* Hueco visible mientras no haya logo real */
.clientes__item::before{
  content:attr(data-foto); position:absolute; inset:.5rem; display:grid; place-items:center;
  border:2px dashed #cfd5de; border-radius:3px; color:var(--acero-claro);
  font-size:.74rem; font-weight:700; letter-spacing:.06em; text-align:center;
}
/* Cuando metas los logos: <img> dentro del <li> y el hueco desaparece solo.
   En gris y con opacidad para que ninguna marca destaque sobre las demás. */
.clientes__item img{max-width:78%; max-height:64%; object-fit:contain; position:relative; z-index:2;
  filter:grayscale(1); opacity:.75; transition:filter .2s ease, opacity .2s ease}
.clientes__item:has(img)::before{display:none}
.clientes__item:hover img{filter:none; opacity:1}
.clientes__nota{font-size:.87rem; color:var(--acero); max-width:62ch; margin:0 0 2.5rem}

.testimonio{
  margin:0; background:#fff; border:1px solid var(--linea); border-left:4px solid var(--rojo);
  border-radius:var(--radio); padding:1.6rem 1.8rem; max-width:70ch;
}
.testimonio blockquote{margin:0 0 .9rem; font-size:1.06rem; line-height:1.6}
.testimonio blockquote::before{content:"“"; color:#c3c9d2; font-size:2rem; line-height:0;
  vertical-align:-.35em; margin-right:.15em}
.testimonio figcaption{font-size:.9rem; color:var(--acero)}
.testimonio figcaption b{color:var(--grafito)}

/* ── Misión y visión ─────────────────────────────────── */
.proposito{display:grid; grid-template-columns:1fr 1fr; gap:2rem}
.proposito__bloque{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.8rem; border-top:4px solid var(--rojo-marca)}
.proposito__bloque h3{text-transform:uppercase; letter-spacing:.1em; font-size:.8rem;
  color:var(--acero); margin-bottom:.9rem}
/* La frase que resume: grande, para que se lea aunque nadie lea el resto */
.proposito__frase{font-size:1.25rem; font-weight:700; line-height:1.35; letter-spacing:-.01em;
  color:var(--grafito); margin-bottom:.8rem}
.proposito__bloque p:last-child{color:var(--acero); font-size:.97rem; margin:0}
@media (max-width:880px){ .proposito{grid-template-columns:1fr; gap:1.2rem} }

/* ── Bloque de SSOMA ─────────────────────────────────── */
.ssoma{margin-top:1.6rem; padding:1.3rem 1.5rem; background:var(--hueso);
  border:1px solid var(--linea); border-radius:var(--radio)}
.ssoma h3{font-size:1.05rem; margin-bottom:.5rem}
.ssoma p{color:var(--acero); font-size:.95rem; margin:0 0 .7rem}
.ssoma__pendiente{font-size:.86rem; color:var(--acero-claro); border-left:3px solid var(--linea);
  padding-left:.8rem; margin:0}

.datos__mapa{margin-top:1.1rem; width:100%}

/* ── Servicios agrupados ─────────────────────────────────
   Diez servicios sueltos abruman. Agrupados en cuatro bloques que siguen el
   recorrido de un trabajo (cortar → mecanizar → soldar → acabar → mantener) se
   leen de un vistazo y se entiende que está todo bajo el mismo techo. */
.servicios{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.4rem}
.grupo{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.7rem 1.6rem; transition:box-shadow .18s ease, border-color .18s ease;
}
.grupo:hover{box-shadow:var(--sombra); border-color:#cfd5de}
.grupo__cab{display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.3rem;
  padding-bottom:1.1rem; border-bottom:1px solid var(--linea)}
.grupo__ico{width:38px; height:38px; flex:none; fill:none; stroke:var(--rojo-marca);
  stroke-width:3.1; stroke-linecap:round; stroke-linejoin:round; margin-top:2px}
.grupo__cab h3{margin:0 0 .25rem; font-size:1.18rem}
.grupo__intro{color:var(--acero); font-size:.93rem; margin:0; line-height:1.45}

.grupo__lista{list-style:none; margin:0; padding:0; display:grid; gap:1.1rem}
.grupo__lista li{color:var(--acero); font-size:.95rem; line-height:1.55;
  padding-left:1.1rem; border-left:2px solid var(--linea)}
.grupo__lista b{display:block; color:var(--grafito); font-size:1rem; margin-bottom:.2rem}
/* Distintivo para lo que de verdad diferencia: la homologación */
.marca{display:inline-block; margin-top:.5rem; background:var(--hueso);
  border:1px solid var(--linea); border-radius:3px; padding:.22rem .7rem;
  font-size:.8rem; font-weight:650; color:var(--grafito)}
.marca::before{content:"✓ "; color:var(--rojo)}

.proximo{margin-top:1.4rem; background:var(--hueso); border:1px dashed #c6ccd6;
  border-radius:var(--radio); padding:1.5rem 1.6rem}
.proximo h3{margin-bottom:.4rem}
.proximo p{color:var(--acero); margin:0; max-width:70ch; font-size:.96rem}

/* ══════════════ MOVIMIENTO ══════════════
   Regla de oro para que sume seriedad en vez de restarla: recorridos cortos
   (16 px), medio segundo, sin rebotes ni giros. El movimiento se nota sin que
   el visitante sepa que hay animación — que es justo el objetivo.

   La clase js-activo la pone el JavaScript: si no carga, nada se oculta y la
   página se ve entera. Nunca hay que esconder contenido a la espera de un
   script. */
.js-activo .revelar{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.js-activo .revelar.visible{opacity:1; transform:none}

/* Cabecera: al bajar se compacta y gana sombra. Un cambio pequeño que da
   sensación de profundidad sin distraer. */
.cabecera{transition:box-shadow .25s ease, background .25s ease}
.cabecera.encogida{box-shadow:0 1px 16px rgba(18,22,27,.09); background:#fff}
.cabecera.encogida .cabecera__fila{min-height:58px}
.cabecera__fila{transition:min-height .25s ease}

/* Enlace del menú correspondiente a la sección en pantalla */
.nav a.activo{color:var(--grafito); border-bottom-color:var(--rojo-marca)}

/* El fondo del hero se aleja muy despacio al bajar: da profundidad y no marea.
   Sin JS queda quieto y no pasa nada. */
.hero__fondo{will-change:transform}

/* Los botones responden al pulsar, no solo al pasar por encima */
.btn{transition:transform .12s ease, background .15s ease, box-shadow .15s ease, filter .15s ease}
.btn--wa:active, .btn--solido:active{filter:brightness(.94)}

/* Las tarjetas se elevan de forma más contenida */
.grupo, .tarjeta{transition:box-shadow .22s ease, border-color .22s ease, transform .22s ease}
.grupo:hover, .tarjeta:hover{transform:translateY(-3px)}

/* El comparador invita a arrastrarse: el tirador late suavemente hasta que lo tocas */
.comparador__marco:not(.usado) .comparador__tirador{animation:latido 2.6s ease-in-out infinite}
@keyframes latido{
  0%,100%{box-shadow:0 2px 14px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,.5)}
  50%    {box-shadow:0 2px 14px rgba(0,0,0,.5), 0 0 0 12px rgba(255,255,255,0)}
}

/* Quien tenga desactivadas las animaciones en su sistema, no ve ninguna */
@media (prefers-reduced-motion:reduce){
  .js-activo .revelar{opacity:1 !important; transform:none !important; transition:none}
  .comparador__marco .comparador__tirador{animation:none}
  .hero__fondo{transform:none !important}
}

/* ── Índice de servicios ─────────────────────────────────
   Los diez servicios de un vistazo antes del detalle. Cumple lo que buscaría
   un carrusel (que no abrume) sin su defecto: aquí no se esconde nada. */
.indice{
  list-style:none; margin:0 0 2.2rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.indice a{
  display:inline-block; text-decoration:none; background:#fff;
  border:1px solid var(--linea); border-radius:3px; padding:.5rem 1rem;
  font-size:.9rem; font-weight:600; color:var(--acero);
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.indice a:hover{color:var(--grafito); border-color:var(--rojo-marca); transform:translateY(-2px)}

/* Al llegar desde el índice, el bloque destinatario se resalta un momento */
.grupo:target{border-color:var(--rojo-marca); box-shadow:0 0 0 3px rgba(235,35,31,.12)}
/* Margen superior al saltar, para que la cabecera fija no tape el título */
.grupo{scroll-margin-top:90px}

/* ══════════════ CIFRAS ══════════════ */
.cifras{background:var(--grafito); color:#fff; padding:2.6rem 0; position:relative; overflow:hidden}
/* Un destello rojo muy tenue detrás, para que la banda no sea un rectángulo plano */
.cifras::before{content:""; position:absolute; inset:0;
  background:radial-gradient(700px 200px at 20% 120%, rgba(235,35,31,.16), transparent 70%)}
.cifras__fila{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center}
.cifra b{display:block; font-family:var(--titular); font-size:clamp(2.3rem,5.5vw,3.4rem); font-weight:600; letter-spacing:-.03em;
  line-height:1; font-variant-numeric:tabular-nums}
.cifra span{display:block; margin-top:.5rem; font-size:.86rem; color:#a8b1bd; line-height:1.35}
.cifra{position:relative}
.cifra:not(:last-child)::after{content:""; position:absolute; right:calc(-.75rem - 1px); top:15%;
  height:70%; width:1px; background:rgba(255,255,255,.14)}
@media (max-width:700px){
  .cifras__fila{grid-template-columns:repeat(2,1fr); gap:2rem 1rem}
  .cifra:nth-child(2)::after{display:none}
}

/* ══════════════ HERO CON VIDA ══════════════
   Zoom lentísimo (28 s) sobre la foto. No se percibe como animación: se percibe
   como que la imagen "respira". Es de los recursos que más elevan una portada
   sin restarle formalidad. */
@keyframes respirar{from{transform:scale(1)} to{transform:scale(1.09)}}
.hero__fondo{animation:respirar 28s ease-in-out infinite alternate}

/* ══════════════ PROCESO CON LÍNEA ══════════════ */
.pasos--linea{position:relative}
.pasos--linea::before{content:""; position:absolute; left:0; right:0; top:21px; height:2px;
  background:var(--linea); z-index:0}
/* La línea roja se dibuja de izquierda a derecha según bajas */
.pasos--linea::after{content:""; position:absolute; left:0; top:21px; height:2px;
  background:var(--rojo-marca); width:var(--avance,0%); z-index:1;
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.pasos--linea li{position:relative; z-index:2}
.pasos__n{position:relative; box-shadow:0 0 0 6px #f5f6f8}
@media (max-width:760px){ .pasos--linea::before,.pasos--linea::after{display:none} }

/* ══════════════ LUZ QUE SIGUE AL CURSOR ══════════════
   El bloque se ilumina levemente donde está el ratón. Cuesta 20 líneas y es de
   los detalles que hacen que alguien pase el cursor por encima "a ver qué pasa"
   — que es exactamente el objetivo: que quiera tocar la página. */
.grupo{position:relative; overflow:hidden}
.grupo::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--x,50%) var(--y,50%),
              rgba(235,35,31,.07), transparent 65%);
  transition:opacity .3s ease;
}
.grupo:hover::before{opacity:1}
.grupo > *{position:relative}

@media (prefers-reduced-motion:reduce){
  .hero__fondo{animation:none}
  .pasos--linea::after{transition:none}
}

/* ══════════════ CARRUSEL DE SERVICIOS ══════════════
   Desplazamiento NATIVO con anclaje (scroll-snap), no una librería. Así se
   conserva gratis el arrastre con el dedo, la inercia del móvil, la rueda del
   ratón y el teclado — cosas que un carrusel hecho a mano suele romper. */
.carrusel{position:relative; margin:0 -1.25rem 1.2rem}
.servicios{
  display:flex; gap:1.4rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:1.4rem 1.25rem 1.6rem; scroll-behavior:smooth;
  scrollbar-width:none;                       /* la barra sobra: ya hay flechas y puntos */
}
.servicios::-webkit-scrollbar{display:none}
.servicios .grupo{
  flex:0 0 clamp(290px, 74vw, 400px);
  scroll-snap-align:center;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease,
             border-color .35s ease, opacity .35s ease;
  opacity:.62; transform:scale(.95);
}
/* El del centro manda: más grande, nítido y con sombra */
.servicios .grupo.centrado{
  opacity:1; transform:scale(1);
  box-shadow:0 10px 34px rgba(18,22,27,.13); border-color:#cfd5de;
}
.servicios .grupo:hover{transform:scale(1)}
/* Espacio a los lados para que el primero y el último puedan centrarse */
.servicios::before, .servicios::after{content:""; flex:0 0 calc(50% - min(37vw,200px) - .7rem)}

.carrusel__flecha{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--linea);
  background:rgba(255,255,255,.96); color:var(--grafito); font-size:1.5rem;
  line-height:1; cursor:pointer; box-shadow:var(--sombra);
  transition:background .18s ease, transform .18s ease, opacity .18s ease;
}
.carrusel__flecha:hover{background:#fff; transform:translateY(-50%) scale(1.07)}
.carrusel__flecha:disabled{opacity:.3; cursor:default}
.carrusel__flecha--izq{left:.35rem}
.carrusel__flecha--der{right:.35rem}

.carrusel__puntos{display:flex; justify-content:center; gap:.5rem; margin-bottom:1.6rem}
.carrusel__puntos button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:#cfd5de; cursor:pointer; transition:background .2s ease, width .2s ease;
}
.carrusel__puntos button.activo{background:var(--rojo-marca); width:26px; border-radius:5px}

@media (max-width:760px){
  .carrusel__flecha{display:none}          /* en móvil se arrastra con el dedo */
  .servicios .grupo{flex-basis:84vw}
}
@media (prefers-reduced-motion:reduce){
  .servicios{scroll-behavior:auto}
  .servicios .grupo{transition:none}
}

/* El cursor indica que se puede arrastrar, y cambia al hacerlo */
.servicios{cursor:grab}
.servicios.arrastrando{cursor:grabbing; scroll-behavior:auto; user-select:none}
.servicios.arrastrando .grupo{transition:none}   /* sin latencia mientras arrastras */
/* En táctil el arrastre es nativo: no hace falta cursor */
@media (hover:none){ .servicios{cursor:default} }

/* ── Valores ─────────────────────────────────────────────
   Cinco columnas separadas por líneas finas, como una ficha. El nombre en
   condensada y la explicación debajo: se recorre de un vistazo y se lee solo
   lo que interese. */
.valores__titulo{margin:2.6rem 0 1.3rem; font-size:1.15rem}
.valores{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.6rem;
}
.valores li{
  color:var(--acero); font-size:.94rem; line-height:1.55;
  padding-top:1rem; border-top:3px solid var(--rojo-marca);
}
.valores b{
  display:block; margin-bottom:.45rem; color:var(--grafito);
  font-family:var(--titular); text-transform:uppercase; letter-spacing:.06em;
  font-size:1.02rem; font-weight:600;
}

/* La pastilla de la tarjeta que está centrada se marca: así se ve la relación
   entre el índice de arriba y lo que hay debajo. */
.indice a.activo{
  background:var(--grafito); color:#fff; border-color:var(--grafito);
}
.indice a.activo:hover{color:#fff}

/* ── Páginas de servicio ─────────────────────────────── */
/* Las páginas de mecanizado, soldadura y reparación reutilizan las clases de
   la portada; solo hacen falta estas dos piezas propias. */
.migas{font-size:.86rem; color:#8f98a5; margin-bottom:1.1rem}
.migas a{color:#c3cad4; text-decoration:underline; text-underline-offset:3px}
.migas a:hover{color:#fff}

.servicios-rel{list-style:none; margin:0; padding:0}
.servicios-rel h3{font-size:1.05rem; margin-bottom:.5rem}
.servicios-rel h3 a{text-decoration:none}
.servicios-rel h3 a:hover{color:var(--rojo)}

/* Enlace desde cada bloque de servicio de la portada a su página completa.
   Es el que reparte autoridad a las páginas nuevas: sin enlaces internos,
   Google las trata como si no existieran. */
.grupo__mas{
  display:inline-block; margin-top:1.1rem; font-weight:600; font-size:.95rem;
  color:var(--rojo); text-decoration:none; border-bottom:2px solid transparent;
}
.grupo__mas:hover{border-bottom-color:var(--rojo)}

/* Menú de servicios en el pie. Aparece en las 5 páginas: es lo que mantiene
   enlazadas las páginas de servicio desde cualquier punto del sitio. */
.pie__nav{
  display:flex; flex-wrap:wrap; gap:.55rem 1.5rem; font-size:.9rem;
  padding-bottom:1.3rem; margin-bottom:1.3rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.pie__nav a{color:#c3cad4; text-decoration:none}
.pie__nav a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
@media (max-width:760px){
  .pie__nav{flex-direction:column; gap:.7rem; text-align:center}
}