/* ═══════════════════════════════════════════════════════════════════════════
   DHN · Hoja de estilos del sitio
   Separada del HTML a propósito: la política de seguridad de contenido (CSP)
   del servidor solo permite scripts y hojas servidos desde el propio dominio.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Manrope · SIL Open Font License 1.1 (uso libre, también comercial).
   Alojada en el propio servidor en vez de Google Fonts: carga más rápido,
   no le avisa a un tercero de cada visita y deja cerrar la CSP a 'self'.
   Es un solo archivo variable: cubre todos los pesos de 400 a 800. */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fuentes/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DHN · Sistema de diseño

   IDENTIDAD (propuesta, 10-sep). El cliente hoy usa amarillo saturado sobre
   azul índigo. Se conserva el AMARILLO, que es lo que la gente reconoce y
   además es el color de la maquinaria pesada, y se cambia el índigo por una
   base de acero casi negro. Amarillo sobre tinta lee mucho más caro que
   amarillo sobre morado, y deja el amarillo trabajando como señal y no como
   fondo. El azul acero queda de secundario, solo para el lado de servicios.

   Base gráfica: cantos vivos de 3 px, líneas de un solo píxel, retícula de
   plano y numeración técnica en monoespaciada.

   REGLA DE CONTRASTE: --marca es amarillo y NO se usa para texto sobre papel
   (no llega al mínimo legible). Para texto sobre claro está --marca-texto,
   que es el mismo amarillo oscurecido. En fondos tinta el amarillo va libre.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Una sola familia en todo el sitio. --f-mono conserva el nombre por
     compatibilidad, pero ya no es monoespaciada: marca las etiquetas. */
  --f-display:'Manrope','Segoe UI',system-ui,sans-serif;
  --f-texto:'Manrope','Segoe UI',system-ui,sans-serif;
  --f-mono:'Manrope','Segoe UI',system-ui,sans-serif;

  --tinta:#0A0F14;
  --tinta-2:#111B23;
  --tinta-3:#1B2831;

  --papel:#F5F5F2;
  --superficie:#FFFFFF;
  --texto:#101A21;
  --texto-2:#4C5B65;
  --texto-3:#8A99A2;

  --linea:#E2E3DF;
  --linea-fuerte:#CFD2CD;
  --linea-obscura:rgba(255,255,255,.10);
  --linea-obscura-2:rgba(255,255,255,.18);

  --marca:#FFBD39;                       /* el ámbar del logo de DHN */
  --marca-viva:#FFD066;                  /* realce */
  --marca-texto:#8A6209;                 /* el mismo amarillo, legible sobre papel */
  --marca-tenue:rgba(255,189,57,.13);
  --acero:#3E5A6B;                       /* secundario: servicios */
  --acero-tenue:rgba(62,90,107,.10);

  --r:3px;
  --ancho:1240px;
  --curva:cubic-bezier(.16,1,.3,1);
  --sombra:0 1px 2px rgba(10,15,20,.04),0 8px 28px rgba(10,15,20,.07);
  --sombra-alta:0 2px 4px rgba(10,15,20,.05),0 18px 50px rgba(10,15,20,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:only light}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:var(--f-texto);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--marca);color:var(--tinta)}
:focus-visible{outline:2px solid var(--marca-texto);outline-offset:3px;border-radius:2px}

.caja{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 28px}
@media(max-width:600px){.caja{padding:0 20px}}

/* Al tocar un enlace del menú, la sección debe quedar justo debajo del cabezal.
   El 72px fijo de antes se sumaba al relleno de la sección: el rótulo caía a
   196 px del borde en escritorio y a 148 px en el teléfono, con una franja
   vacía enorme arriba y la sensación de que el enlace no apuntaba bien.
   Ahora se descuenta el relleno, así que lo que queda por encima del rótulo es
   el cabezal más 20 px, en cualquier pantalla. --cabezal-alto lo mide sitio.js;
   el 65px es el respaldo si el JavaScript no corre. */
section{
  --pad-seccion:clamp(76px,9vw,124px);
  padding:var(--pad-seccion) 0;position:relative;
  scroll-margin-top:calc(var(--cabezal-alto,65px) + 20px - var(--pad-seccion));
}
/* El formulario es destino propio: en el teléfono la sección de contacto
   empieza con los datos y el formulario queda una pantalla más abajo, así que
   «Cotizar» no lo mostraba. Aquí no hay relleno de sección que descontar. */
.forma{scroll-margin-top:calc(var(--cabezal-alto,65px) + 20px)}
.fondo-claro{background:var(--superficie)}

.plano{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.plano::before{
  content:'';position:absolute;inset:-1px;
  background-image:
    linear-gradient(var(--linea-obscura) 1px,transparent 1px),
    linear-gradient(90deg,var(--linea-obscura) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 0%,#000 10%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 70% 0%,#000 10%,transparent 78%);
}
.grano{
  position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}

h1,h2,h3{font-family:var(--f-display);letter-spacing:-.032em;text-wrap:balance;margin:0}
h2{font-size:clamp(27px,3.5vw,42px);font-weight:600;line-height:1.1;margin:0 0 16px}
h3{font-size:19px;font-weight:600;letter-spacing:-.022em;line-height:1.28;margin:0 0 9px}
p{margin:0 0 15px}
.suave{color:var(--texto-2)}
.fondo-tinta .suave{color:#9FB0BA}
.entrada{font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.62;max-width:58ch}

.rotulo{
  display:flex;align-items:center;gap:14px;margin:0 0 22px;
  font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-3);
}
.rotulo b{color:var(--marca-texto);font-weight:500}
.rotulo::after{
  content:'';flex:1;height:1px;background:var(--linea-fuerte);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--curva) .1s;
}
.visible .rotulo::after,.rotulo.visible::after{transform:scaleX(1)}

/* ── Botones ────────────────────────────────────────────────────────────── */
.boton{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-texto);font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:var(--r);text-decoration:none;border:1px solid transparent;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--curva),box-shadow .35s var(--curva),
             background-color .3s ease,color .3s ease,border-color .3s ease;
}
.boton svg{width:17px;height:17px;flex:none}
.boton::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--curva);
}
.boton:hover::after{transform:translateX(120%)}
.boton:hover{transform:translateY(-2px)}
.boton:active{transform:translateY(0)}
/* Amarillo con texto tinta: es el par de más contraste y el que usa la
   maquinaria pesada. Texto blanco sobre amarillo sería ilegible. */
.boton-solido{background:var(--marca);color:var(--tinta);box-shadow:0 6px 18px rgba(255,189,57,.30)}
.boton-solido:hover{background:var(--marca-viva);box-shadow:0 10px 26px rgba(255,189,57,.38)}
.boton-linea{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.05)}
.boton-linea:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.boton-tinta{background:var(--tinta);color:#fff}
.boton-tinta:hover{background:var(--tinta-3)}

.avance{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:90;
  background:linear-gradient(90deg,var(--marca),var(--marca-viva));
  transform:scaleX(0);transform-origin:left;will-change:transform;
}

/* ═════════════════════════════ Cabezal ═════════════════════════════════ */
.cabezal{
  position:fixed;top:0;left:0;right:0;z-index:80;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--curva),border-color .4s var(--curva),
             backdrop-filter .4s var(--curva),box-shadow .4s var(--curva);
}
.cabezal .caja{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px;transition:height .4s var(--curva)}
/* 09 · Se retira al bajar y vuelve apenas se sube, con el botón Cotizar a mano.
   Nunca se esconde con el menú chico abierto: lo maneja el JS. */
.cabezal{transition:background-color .4s var(--curva),border-color .4s var(--curva),
                    backdrop-filter .4s var(--curva),box-shadow .4s var(--curva),
                    transform .45s var(--curva)}
.cabezal.oculto{transform:translateY(-100%)}
.cabezal.fijo{
  background:rgba(255,255,255,.86);border-bottom-color:var(--linea);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  box-shadow:0 1px 20px rgba(10,15,20,.05);
}
.cabezal.fijo .caja{height:64px}

/* ══ MARCADOR DE POSICIÓN DEL LOGO ══════════════════════════════════════
   Jostin diseña el logo definitivo y lo reemplaza aquí por
   <img src="assets/logo-dhn.svg" alt="DHN"> con alto de 40px.
   Mientras tanto va este monograma. */
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
/* El emblema va suelto, sin placa ni recuadro: el PNG es transparente a
   propósito y así se ve el dibujo completo sobre cualquier fondo.
   Dos versiones del mismo logo: las letras «DHN» en plata mientras el cabezal
   está sobre la portada oscura, y las azules del archivo original cuando el
   cabezal se vuelve blanco al bajar. El pie, que siempre es oscuro, usa la
   clara; el telón también. */
.logo-tesela{
  position:relative;height:46px;flex:none;display:block;
  transition:transform .5s var(--curva);
}
.logo-tesela img{display:block;height:100%;width:auto}
.cabezal .sobre-claro,
.cabezal.fijo .sobre-oscuro{display:none}
.cabezal.fijo .sobre-claro{display:block}
.logo:hover .logo-tesela{transform:translateY(-2px)}
.logo-texto{font-family:var(--f-display);font-weight:600;font-size:14.5px;letter-spacing:-.02em;line-height:1.2;color:#fff;max-width:22ch;min-width:0}
.logo-texto small{white-space:nowrap}
.logo-texto small{
  display:block;font-family:var(--f-mono);font-weight:400;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:3px;
}
.cabezal.fijo .logo-texto{color:var(--texto)}
.cabezal.fijo .logo-texto small{color:var(--texto-3)}

.menu{display:flex;gap:2px;align-items:center}
.menu a{
  position:relative;text-decoration:none;font-size:14.5px;font-weight:500;
  color:rgba(255,255,255,.74);padding:9px 15px;border-radius:var(--r);
  transition:color .28s ease;white-space:nowrap;
}
.cabezal.fijo .menu a{color:var(--texto-2)}
.menu a::after{
  content:'';position:absolute;left:15px;right:15px;bottom:2px;height:1.5px;
  background:var(--marca);transform:scaleX(0);transform-origin:center;
  transition:transform .45s var(--curva);
}
.menu a:hover{color:#fff}
.cabezal.fijo .menu a:hover{color:var(--texto)}
.menu a:hover::after,.menu a.activo::after{transform:scaleX(1)}
.menu a.activo{color:#fff}
.cabezal.fijo .menu a.activo{color:var(--texto)}
.menu .cta{
  margin-left:12px;background:var(--marca);color:var(--tinta);font-weight:600;
  padding:11px 22px;box-shadow:0 5px 16px rgba(255,189,57,.32);
  transition:transform .35s var(--curva),background-color .3s ease;
}
.menu .cta::after{display:none}
.menu .cta:hover,.cabezal.fijo .menu .cta:hover{color:var(--tinta);background:var(--marca-viva);transform:translateY(-1px)}
.cabezal.fijo .menu .cta{color:var(--tinta)}

.hamburguesa{
  display:none;background:transparent;border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r);padding:10px 11px;cursor:pointer;line-height:0;
}
.cabezal.fijo .hamburguesa{border-color:var(--linea-fuerte)}
/* Antes la barra del medio tardaba .25 s en desvanecerse mientras las otras
   dos ya se cruzaban: durante ese instante se veía una raya dentro de la X.
   Ahora al ABRIR la del medio desaparece en 80 ms y recién después giran las
   otras; al CERRAR las barras se enderezan primero y la del medio vuelve al
   final. Grosor y separación en píxeles enteros (2 + 3): con 1.6 px el
   teléfono redondeaba distinto cada barra y quedaban borrosas. */
.hamburguesa i{display:block;width:18px;height:2px;background:#fff;margin:3px 0;border-radius:2px;
  transition:transform .32s var(--curva) .06s,opacity .1s linear .18s}
.hamburguesa[aria-expanded="true"] i{transition:transform .32s var(--curva) .08s,opacity .08s linear 0s}
.cabezal.fijo .hamburguesa i{background:var(--texto)}
.hamburguesa[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] i:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburguesa[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media(max-width:1040px){
  .hamburguesa{display:block}
  .menu{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--superficie);border-bottom:1px solid var(--linea);
    padding:14px 28px 22px;gap:2px;box-shadow:var(--sombra);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .35s var(--curva),transform .35s var(--curva),visibility .35s;
  }
  .menu.abierto{opacity:1;visibility:visible;transform:translateY(0)}
  .menu a,.cabezal.fijo .menu a{color:var(--texto-2);padding:13px 4px;font-size:16px;border-bottom:1px solid var(--linea)}
  .menu a.activo,.cabezal.fijo .menu a.activo{color:var(--marca-texto)}
  .menu a::after{display:none}
  .menu .cta,.cabezal.fijo .menu .cta{margin:14px 0 0;color:var(--tinta);justify-content:center;text-align:center;border:0}
  /* Con menú hamburguesa sobra ancho: el nombre completo va en una sola línea.
     Antes el max-width de 16ch lo partía en tres y se salía de la barra. */
  /* En teléfono el vidrio al 86 % sobre la portada oscura se veía gris sucio.
     Casi opaco se lee blanco y nítido. En escritorio se mantiene el vidrio. */
  .cabezal.fijo{background:rgba(255,255,255,.97)}
  .logo-texto{font-size:14px;max-width:none}
  .logo-nombre{white-space:nowrap}
}

/* Teléfono: sin "Distribuidora de". El monograma ya dice DHN, así que
   "Hidráulica y Neumática" en una línea identifica igual y cabe en la barra
   de 64 px junto al botón del menú. */
@media(max-width:600px){
  .solo-ancho{display:none}
  .logo{gap:10px;min-width:0}
  .logo-tesela{height:40px}
  .logo-texto{font-size:14px;line-height:1.15}
  .logo-texto small{font-size:9px;letter-spacing:.11em;margin-top:2px}
}

/* Teléfonos angostos (320-379 px): se quita el renglón de la ciudad. */
@media(max-width:379px){
  .logo-texto small{display:none}
  .logo-texto{font-size:13.5px}
}

/* ═════════════════════════════ Portada ═════════════════════════════════ */
/* La portada y la cinta llenan juntas la primera pantalla, ni más ni menos:
   la portada mide el alto de la ventana MENOS la cinta, así que la franja
   queda pegada al borde de abajo y no se ve nada de la sección siguiente.
   Antes el alto salía del relleno y sobraban 16 px de blanco debajo.
   El contenido va centrado, porque en un monitor alto sobra sitio.
   En el teléfono la portada apilada es más alta que eso y manda su contenido:
   el mínimo no la achica. */
.portada{--alto-visible:100vh;--cinta-alto:52px}
@supports (height:100dvh){.portada{--alto-visible:100dvh}}
.portada{
  position:relative;background:var(--tinta);color:#fff;overflow:hidden;
  min-height:calc(var(--alto-visible) - var(--cinta-alto));
  display:grid;align-content:center;
  padding:calc(76px + clamp(44px,7vh,92px)) 0 clamp(40px,6vh,92px);
}
/* La portada es la primera sección y ahora llena la pantalla con la cinta al
   ras: tocar el logo, o entrar por /#portada, tiene que dejar la página en el
   tope, igual que una visita normal. Sin esta línea heredaba el descuento de
   las demás secciones y caía 27 px más abajo. */
.portada{scroll-margin-top:0}
.portada::after{
  content:'';position:absolute;top:-25%;right:-10%;width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle,rgba(255,189,57,.16),transparent 62%);pointer-events:none;
}
.portada .caja{position:relative;z-index:2}
.portada-rejilla{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,72px);align-items:center}
@media(max-width:940px){.portada-rejilla{grid-template-columns:1fr;gap:44px}}

.portada .rotulo{color:rgba(255,255,255,.6)}
.portada .rotulo b{color:var(--marca)}
.portada .rotulo::after{background:var(--linea-obscura-2)}
.portada h1{
  font-size:clamp(34px,5.4vw,60px);font-weight:600;line-height:1.03;letter-spacing:-.042em;
  margin:0 0 22px;
}
.portada h1 em{font-style:normal;color:var(--marca)}
.portada .entrada{color:rgba(255,255,255,.76);margin:0 0 34px}
.botones{display:flex;gap:12px;flex-wrap:wrap}
/* ── 02 · Nada se anima hasta que las tipografías estén listas ──────────
   Sin esto la portada sube en la tipografía de respaldo y a media animación
   salta a Archivo. El tope de 800 ms está en el JS: si la CDN no responde,
   el sitio se muestra igual. */
.portada [data-entrada]{opacity:0;transform:translateY(22px)}
.listo .portada [data-entrada]{animation:subir .95s var(--curva) var(--d,0s) forwards}
/* Con telón, la portada entra mientras el telón se levanta, no antes. */
/* Con telón, la portada no arranca hasta que los cilindros salieron de
   pantalla (1.34 s): así los vástagos nunca pasan por encima del texto.
   Mientras la placa baja se ve la portada vacía, y el contenido sube recién
   cuando el escenario quedó libre. --t-despeje es el único número a tocar
   si se cambia la duración del telón. */
/* 2.90 s: los cilindros terminan de salir a 2.55 y el contenido entra a 2.90.
   Antes eran 30 ms de diferencia, que el ojo lee como simultáneo: parecía que
   la portada cargaba encima de los pistones. */
/* En el teléfono, 100vh es la ventana SIN las barras del navegador, mientras
   que el telón (position:fixed) mide el área realmente visible. Por eso los
   vástagos, que medían 100vh, bajaban más que la placa y se despegaban: la
   diferencia era exactamente el alto de la barra. dvh sí mide lo visible.
   El 100vh queda de respaldo para navegadores sin dvh. */
.con-telon{--alto-real:100vh}
@supports (height:100dvh){.con-telon{--alto-real:100dvh}}
.con-telon{--t-despeje:3.5s}
.con-telon .portada [data-entrada]{animation-delay:calc(var(--d,0s) + var(--t-despeje))}
@keyframes subir{to{opacity:1;transform:translateY(0)}}

/* ── 01 · Titular por líneas ────────────────────────────────────────────
   El span recorta y la i es la que se mueve. Los cortes de línea están
   puestos a mano porque el titular es fijo: si se cambia el texto hay que
   revisar dónde parte en cada punto de quiebre. */
.portada h1 .linea{display:block;overflow:hidden}
.portada h1 .linea i{display:block;font-style:normal;transform:translateY(110%)}
.listo .portada h1 .linea i{animation:subir-linea 1s var(--curva) both}
.listo .portada h1 .linea:nth-child(1) i{animation-delay:.10s}
.listo .portada h1 .linea:nth-child(2) i{animation-delay:.19s}
.listo .portada h1 .linea:nth-child(3) i{animation-delay:.28s}
.con-telon .portada h1 .linea:nth-child(1) i{animation-delay:calc(var(--t-despeje) + .08s)}
.con-telon .portada h1 .linea:nth-child(2) i{animation-delay:calc(var(--t-despeje) + .17s)}
.con-telon .portada h1 .linea:nth-child(3) i{animation-delay:calc(var(--t-despeje) + .26s)}
@keyframes subir-linea{to{transform:translateY(0)}}

/* ── Pistón hidráulico: pieza reutilizable ──────────────────────────────
   Se usa dos veces: en el telón de entrada y en el indicador de scroll.
   Todo se dimensiona desde --ancho y --camisa, así que el mismo dibujo
   sirve a 30 px y a 16 px. El vástago está dentro de una guía con
   overflow:hidden: al moverlo con transform parece salir de la camisa, y
   como es transform y no height, lo mueve la tarjeta de video sin
   recalcular layout. */
.piston{position:absolute;width:var(--ancho);pointer-events:none}
.piston-ojo{
  position:absolute;left:50%;top:0;width:calc(var(--ancho) * .62);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,transparent 34%,#4A6A7D 36%);
}
.piston-camisa{
  position:absolute;left:0;right:0;top:calc(var(--ancho) * .5);height:var(--camisa);
  border-radius:3px;
  background:linear-gradient(90deg,#15212A 0%,#4A6A7D 42%,#2A3C48 70%,#15212A 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.10),inset 0 -3px 0 rgba(0,0,0,.30);
}
.piston-camisa::after{ /* puerto de aceite: el único toque de marca */
  content:'';position:absolute;left:-2px;right:-2px;bottom:18%;height:3px;
  background:var(--marca);border-radius:1px;
}
.piston-guia{
  position:absolute;left:50%;transform:translateX(-50%);
  width:calc(var(--ancho) * .62);
  top:calc(var(--ancho) * .5 + var(--camisa));bottom:0;overflow:hidden;
}
.piston-vastago{
  position:absolute;left:50%;top:0;bottom:0;width:calc(var(--ancho) * .3);
  margin-left:calc(var(--ancho) * -.15);
  background:linear-gradient(90deg,#7E8C94,#EEF1F3 45%,#9AA7AE);
  box-shadow:0 0 0 1px rgba(10,15,20,.14);
  transform:translateY(-100%);will-change:transform;
}
.piston-vastago::after{ /* ojo de la punta, donde se engancha la carga */
  content:'';position:absolute;left:50%;bottom:0;
  width:calc(var(--ancho) * .62);aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,transparent 32%,#9AA7AE 34%);
}

/* ── 03 · Telón hidráulico ──────────────────────────────────────────────
   Dos cilindros anclados arriba extienden sus vástagos y bajan la placa
   hasta sacarla por abajo, destapando la página de arriba hacia abajo.
   Después el bastidor con los cilindros se retira.

   Sincronía: la placa baja translateY(100%) de SU alto, y el vástago
   avanza translateY(-100% → 0) de SU alto. Los dos altos son iguales
   —100vh menos el bastidor— y comparten duración y curva, así que la
   punta del vástago va pegada al borde de la placa en todo el recorrido.

   La curva es la de un cilindro hidráulico: arranca despacio mientras
   sube la presión, avanza parejo y frena controlado. Nada de rebote: un
   pistón que rebota es un pistón con aire en el aceite.

   Aparece en la primera visita de la sesión y al recargar (lo decide el
   script del <head>, antes de pintar). Se omite con movimiento reducido. */
/* Mientras la portada sube, por encima de ella se veía el fondo claro de la
   página: una franja blanca cruzando la animación. Se tapa con esta capa.
   Va en z-index -1 a propósito: así queda POR ENCIMA del fondo del <body>
   —ponerle el color al <html> no sirve, el fondo del body lo cubre— y POR
   DEBAJO de la portada, que sube por delante. */
.telon-fondo{display:none}
.con-telon .telon-fondo{display:block;position:fixed;inset:0;z-index:-1;background:var(--tinta)}
/* El cabezal entra cuando los cilindros ya salieron. Si no, al final del tirón
   los vástagos le pasan por encima al nombre y al botón del menú. */
.con-telon .cabezal{opacity:0}
.con-telon.listo .cabezal{animation:aparecer-cabezal .45s var(--curva) 3.45s both}
@keyframes aparecer-cabezal{to{opacity:1}}
.con-telon.listo .telon-fondo{animation:soltar-telon 0s linear 3.5s both}
.telon{display:none}
.con-telon .telon{
  --ancho:30px;--camisa:80px;
  --bastidor:calc(var(--ancho) * .5 + var(--camisa));
  display:block;position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden;
}
.telon-placa{
  position:absolute;left:0;right:0;top:var(--bastidor);bottom:0;
  background:var(--tinta-2);display:grid;place-items:center;will-change:transform;
}
.telon-placa::before{ /* travesaño de acero donde se enganchan los vástagos */
  content:'';position:absolute;left:0;right:0;top:0;height:10px;
  background:linear-gradient(180deg,#2A3C48,#15212A);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
/* ── Logo en el telón ──────────────────────────────────────────────────
   Imagotipo HORIZONTAL, como el archivo de marca: recuadro ámbar a la
   izquierda y «DHN / PRESIÓN Y PRECISIÓN» en ámbar a la derecha. Debajo,
   centrados bajo todo el conjunto, el nombre completo y la regla.
   Va montado SOBRE la placa, así que cuando los pistones empujan, el logo
   baja con ella.

   --logo es el ancho del conjunto y todo sale de ahí con las proporciones
   medidas en «Primario en transparente.png» (862 px de ancho):
     recuadro 279 px = 32.4 %   separación 56 px = 6.5 %   texto 527 px = 61.1 %
   El texto mide el 70 % del alto del recuadro y va centrado con él.

   Se sube media altura del bastidor para quedar centrado en la PANTALLA y no
   en la placa, que empieza debajo de los cilindros. */
.telon-logo{
  --logo:clamp(250px,72vw,500px);
  display:grid;justify-items:center;
  transform:translateY(calc(var(--bastidor) / -2));
  padding:0 20px;text-align:center;
}
/* El emblema, sin fondo: solo una sombra que lo despega del oscuro. */
.telon-emblema{
  display:block;width:var(--logo);
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.6));
  opacity:0;transform:scale(.9);
  animation:logo-simbolo .7s var(--curva) .1s both;
}
.telon-emblema img{display:block;width:100%;height:auto}
/* El eslogan no viene en el archivo del logo: se escribe con la tipografía
   del sitio, en el ámbar de la página. */
.telon-eslogan{
  margin-top:clamp(10px,2vh,18px);
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(15px,3.4vw,24px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--marca);line-height:1.1;
  opacity:0;transform:translateY(10px);
  animation:logo-texto .75s var(--curva) .34s both;
}
.telon-regla{
  margin-top:clamp(12px,2.2vh,20px);
  width:clamp(120px,22vw,200px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--marca),var(--marca-viva));
  transform:scaleX(0);animation:regla-telon .7s var(--curva) .52s both;
}
.telon-lugar{
  margin-top:clamp(12px,2.2vh,18px);
  font-family:var(--f-display);font-weight:600;font-size:clamp(9.5px,1.5vw,11.5px);
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);
  text-align:center;max-width:var(--logo);line-height:1.5;text-wrap:balance;
  opacity:0;animation:logo-texto .75s var(--curva) .72s both;
}
@keyframes logo-simbolo{to{opacity:1;transform:scale(1)}}

/* ── Pantallas bajas (teléfono acostado) ────────────────────────────────
   El conjunto se dimensiona también por el alto, y los cilindros se
   achican: a tamaño normal ocupaban un cuarto de la altura disponible. */
@media(max-height:560px){
  .con-telon .telon{--ancho:22px;--camisa:52px}
  .telon-logo{--logo:clamp(190px,min(38vw,50vh),320px)}
  .telon-eslogan{margin-top:8px;font-size:clamp(14px,2.2vw,18px)}
  .telon-regla{margin-top:8px;width:clamp(80px,16vw,130px)}
  .telon-lugar{margin-top:8px;font-size:9.5px;letter-spacing:.13em}
}
@keyframes logo-texto{to{opacity:1;transform:none}}
@keyframes regla-telon{to{transform:scaleX(1)}}

.telon-bastidor{
  position:absolute;left:0;right:0;top:0;height:var(--bastidor);
  background:var(--tinta-2);will-change:transform;
}
.telon-bastidor .piston{top:0;height:var(--alto-real);transform:translateX(-50%)}
.telon-bastidor .piston:nth-child(1){left:26%}
.telon-bastidor .piston:nth-child(2){left:74%}

/* Secuencia (s):
     0.10 – 1.42   aparecen el símbolo, el nombre, la ciudad y la regla
     1.42 – 1.75   el nombre se sostiene en pantalla
     1.75 – 2.45   los cilindros extienden y empujan la placa con el logo hacia abajo
     2.45 – 3.15   los cilindros se recogen Y SE LLEVAN LA PORTADA CON ELLOS:
                   el vástago sube el 100 % de su carrera y la portada sube el
                   100 % de la pantalla, con la misma curva y la misma duración,
                   así que la punta va pegada al borde de la portada todo el rato
     3.15 – 3.45   el bastidor con los cilindros sale de cuadro
     3.50          arranca el texto de la portada (--t-despeje)
   Para alargar o acortar la pausa del logo, sumar lo mismo a todos los
   retardos de abajo y a --t-despeje. */
.con-telon.listo .telon-placa{animation:bajar-placa .7s cubic-bezier(.65,0,.35,1) 1.75s both}
/* Dos animaciones encadenadas sobre el mismo vástago: primero extiende para
   empujar, después se recoge tirando de la portada. */
/* OJO con el relleno de la segunda animación: va `forwards`, NO `both`.
   Con `both`, su fotograma inicial —el vástago extendido— se aplicaba desde el
   segundo cero, y los pistones aparecían colgando antes de que les tocara
   moverse. Con `forwards` solo conserva el estado final, y hasta su turno manda
   la primera animación, que los mantiene recogidos. */
.con-telon.listo .telon .piston-vastago{
  animation:extender-vastago .7s cubic-bezier(.65,0,.35,1) 1.75s both,
            recoger-vastago  .7s cubic-bezier(.65,0,.35,1) 2.45s forwards;
}
/* La cinta se mueve con la portada. Sin esto se quedaba quieta en su sitio y
   asomaba por debajo de la placa mientras los cilindros empujaban: se veía la
   franja cruzando la animación. Ahora baja con la portada y sube con ella. */
.con-telon.listo .portada,
.con-telon.listo .cinta{animation:tirar-portada .7s cubic-bezier(.65,0,.35,1) 2.45s both}
/* Canto de acero en el borde superior de la portada: es de donde los vástagos
   la jalan. Sin él, sobre fondo oscuro no se distingue el borde del panel y el
   movimiento se lee como «los cilindros suben», no como «traen la pantalla».
   Se desvanece al llegar, así que el sitio queda sin nada encima. */
.con-telon.listo .portada::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(180deg,#4A6A7D,#15212A);
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  animation:canto-portada .85s linear 2.45s both;
}
@keyframes canto-portada{0%,70%{opacity:1}100%{opacity:0}}
.con-telon.listo .telon-bastidor{
  animation:acompanar-tiron .7s cubic-bezier(.65,0,.35,1) 2.45s forwards,
            retraer-bastidor .3s cubic-bezier(.55,0,.75,.2) 3.15s forwards;
}
.con-telon.listo .telon{animation:soltar-telon 0s linear 3.5s both}

/* Telón cancelado: la página no estaba arriba (pestaña restaurada a media
   página, entrada por ancla o un deslizamiento durante la entrada). El telón
   se desvanece y la portada queda quieta en su lugar. Estas reglas van
   DESPUÉS de las de arriba a propósito: tienen la misma especificidad y
   gana la última. sitio.js quita .con-telon cuando termina el desvanecido. */
.con-telon.telon-cancelado .telon,
.con-telon.telon-cancelado .telon-fondo{animation:cancelar-telon .3s ease forwards}
.con-telon.telon-cancelado .portada,
.con-telon.telon-cancelado .cinta,
.con-telon.telon-cancelado .portada::before{animation:none}
@keyframes cancelar-telon{to{opacity:0;visibility:hidden}}

/* Mientras dura la entrada, deslizar hacia abajo en el teléfono no recarga la
   página: se reiniciaba el telón a medio camino. */
.con-telon:not(.telon-fin){overscroll-behavior-y:none}

@keyframes bajar-placa{to{transform:translateY(100%)}}
@keyframes extender-vastago{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes recoger-vastago{from{transform:translateY(0)}to{transform:translateY(-100%)}}
/* La portada entra desde abajo, enganchada a los vástagos. */
@keyframes tirar-portada{from{transform:translateY(var(--alto-real))}to{transform:translateY(0)}}
@keyframes acompanar-tiron{to{transform:translateY(calc(var(--bastidor) * -1))}}
@keyframes retraer-bastidor{to{transform:translateY(calc(var(--alto-real) * -1));opacity:0}}
@keyframes soltar-telon{to{visibility:hidden}}

/* ── 05 · Parallax de portada ───────────────────────────────────────────
   Animación ligada al scroll, nativa: la calcula el navegador fuera del
   hilo principal, sin listener de scroll. Chromium la tiene; Safari y
   Firefox van más atrás y por eso va dentro de @supports: quien no la
   soporta simplemente no ve parallax, y nada más se rompe.
   "exit" significa: solo mientras la portada está saliendo de cuadro. */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .portada-rejilla{
      animation:alejar-portada linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 92%;
    }
    .portada .plano{
      animation:derivar-plano linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
  }
}
@keyframes alejar-portada{to{opacity:0;transform:translateY(-56px) scale(.965)}}
@keyframes derivar-plano{to{transform:translateY(26px)}}

.ficha{
  position:relative;background:rgba(255,255,255,.045);border:1px solid var(--linea-obscura-2);
  border-radius:var(--r);padding:26px 28px 22px;backdrop-filter:blur(8px);
}
.ficha::before{
  content:'';position:absolute;top:-1px;left:-1px;width:26px;height:26px;
  border-top:2px solid var(--marca);border-left:2px solid var(--marca);border-radius:var(--r) 0 0 0;
}
.ficha-titulo{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 6px;padding-bottom:14px;border-bottom:1px solid var(--linea-obscura);
}
.ficha dl{margin:0;display:grid;gap:0}
.ficha .par{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px dashed var(--linea-obscura);
}
.ficha .par:last-child{border-bottom:0;padding-bottom:0}
.ficha dt{font-size:14.5px;color:rgba(255,255,255,.72)}
.ficha dd{margin:0;font-family:var(--f-mono);font-size:12.5px;color:#fff;text-align:right}
.ficha dd b{color:var(--marca);font-weight:500}

/* ═══════════════════════════ Cinta de capacidades ══════════════════════ */
/* Los bordes se desvanecen con dos degradados del color de la franja puestos
   ENCIMA del texto. Antes era un mask-image sobre toda la franja: volvía
   transparente también el fondo oscuro y en los extremos se veía el color claro
   de la página, como un desvanecido blanco. */
.cinta{
  position:relative;
  background:var(--tinta-2);color:rgba(255,255,255,.55);border-top:1px solid var(--linea-obscura);
  border-bottom:1px solid var(--linea-obscura);padding:15px 0;overflow:hidden;
}
.cinta::before,.cinta::after{
  content:'';position:absolute;top:0;bottom:0;width:12%;z-index:1;pointer-events:none;
}
.cinta::before{left:0;background:linear-gradient(90deg,var(--tinta-2),rgba(17,27,35,0))}
.cinta::after{right:0;background:linear-gradient(270deg,var(--tinta-2),rgba(17,27,35,0))}
/* 06 y 10 · La cinta la mueve el JavaScript, no una animación CSS: así el
   scroll la empuja y le cambia el sentido. Si el JS no corre, este respaldo
   la deja caminando igual. */
.cinta-pista{display:flex;width:max-content;will-change:transform;animation:correr 46s linear infinite}
.js .cinta-pista{animation:none}
@keyframes correr{to{transform:translateX(-50%)}}
.cinta-grupo{display:flex;align-items:center;flex:none}
.cinta-grupo span{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:0 26px;white-space:nowrap;position:relative;
}
.cinta-grupo span::after{content:'';position:absolute;right:-3px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--marca);opacity:.65;transform:translateY(-50%)}

/* ═════════════════════════════ Cifras ══════════════════════════════════ */
.cifras{background:var(--superficie);border-bottom:1px solid var(--linea)}
.cifras .caja{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.cifras .caja{grid-template-columns:repeat(2,1fr)}}
.celda{padding:36px 26px;border-left:1px solid var(--linea);position:relative}
.celda:first-child{border-left:0;padding-left:0}
@media(max-width:760px){
  .celda{padding:28px 20px}
  .celda:nth-child(odd){border-left:0;padding-left:0}
  .celda:nth-child(n+3){border-top:1px solid var(--linea)}
  /* La muesca ámbar marca el ARRANQUE de la línea divisoria vertical. En las
     celdas impares no hay tal línea (son las de la primera columna), así que
     quedaba una barrita dorada flotando sola. Se apaga con la línea. */
  .celda:nth-child(odd)::before{display:none}
}
.celda::before{
  content:'';position:absolute;top:36px;left:-1px;width:1px;height:22px;background:var(--marca);
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--curva);
}
.celda.visible::before{transform:scaleY(1)}
.celda:first-child::before{display:none}
/* Va después de la regla base a propósito: con la misma especificidad, gana la
   última. Dentro del bloque de arriba no surtía efecto. Alinea la muesca al
   relleno del teléfono (28px) en vez de al del escritorio (36px). */
@media(max-width:760px){.celda::before{top:28px}}
.cifra{font-family:var(--f-display);font-size:clamp(27px,3.4vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin:0 0 8px}
.cifra i{font-style:normal;color:var(--marca-texto)}
.cifra-pie{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);margin:0;line-height:1.5}

/* ═════════════════════════════ Nosotros ════════════════════════════════ */
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
@media(max-width:940px){.dos-columnas{grid-template-columns:1fr;gap:40px}}

.puntos{list-style:none;margin:0;padding:0;display:grid;gap:0}
.puntos li{
  display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--linea);
  transition:padding-left .45s var(--curva);
}
.puntos li:last-child{border-bottom:1px solid var(--linea)}
.puntos li:hover{padding-left:8px}
.marca-check{
  flex:none;width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--marca-tenue);color:var(--marca-texto);
  transition:background-color .4s ease,color .4s ease,transform .5s var(--curva);
}
.puntos li:hover .marca-check{background:var(--marca);color:var(--tinta);transform:rotate(-8deg)}
.marca-check svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.puntos b{display:block;font-family:var(--f-display);font-size:16.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:3px}
.puntos .detalle{color:var(--texto-2);font-size:15px;line-height:1.55}

/* ═══════════════════════════ Tarjetas de valor ═════════════════════════ */
.tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-top:8px}
@media(max-width:1040px){.tarjetas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tarjetas{grid-template-columns:1fr}}
.valor{position:relative;background:var(--superficie);padding:34px 28px 32px;transition:background-color .45s var(--curva)}
.valor::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--marca);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--curva);
}
.valor:hover::before{transform:scaleX(1)}
.valor:hover{background:#FDFCF8}
@keyframes trazar{to{stroke-dashoffset:0}}
.valor p{color:var(--texto-2);font-size:15px;line-height:1.6;margin:0}

/* ═════════════════════════════ Catálogo ════════════════════════════════ */
.pestanas{position:relative;display:inline-flex;gap:4px;padding:5px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);margin-bottom:36px}
@media(max-width:520px){.pestanas{width:100%}.pestanas .pestana{flex:1}}
.indicador{
  position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:2px;background:var(--tinta);
  transition:transform .5s var(--curva),width .5s var(--curva),background-color .4s ease;z-index:0;
}
.pestana{
  position:relative;z-index:1;border:0;background:transparent;cursor:pointer;
  font-family:var(--f-texto);font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--texto-2);padding:11px 24px;border-radius:2px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;transition:color .35s ease;
}
.pestana .punto{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;transition:opacity .3s ease}
.pestana[aria-selected="true"]{color:#fff}
.pestana[aria-selected="true"] .punto{opacity:1}
.pestana:not([aria-selected="true"]):hover{color:var(--texto)}

.panel{display:none}
.panel.activo{display:block}

/* ── 07 · Escalonado del catálogo ───────────────────────────────────────
   El índice viaja como variable CSS, así un solo selector sirve para 7
   tarjetas o para 70. Antes las tarjetas solo se animaban al cambiar de
   pestaña; llegando por scroll aparecían todas de golpe. */
.pieza{opacity:0;transform:translateY(20px)}
/* ── Pase de fotos de cada línea ────────────────────────────────────────
   Las fotos se cruzan con un fundido, sin botones: la tarjeta ya es un
   enlace a WhatsApp y unos controles competirían con eso. El pase solo
   corre mientras la tarjeta está en pantalla (lo gobierna sitio.js), así
   que no gasta batería ni datos de quien no llega hasta ahí. */
.pieza-fotos{
  position:relative;aspect-ratio:4/3;margin:-24px -24px 20px;
  background:var(--linea);overflow:hidden;
}
.pieza-fotos img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.5s ease;
}
.pieza-fotos img.visible{opacity:1}
/* Un velo muy suave abajo para que el código y el título no compitan con
   la foto cuando esta es clara. */
.pieza-fotos::after{
  content:'';position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,15,20,0),rgba(10,15,20,.18));
}
@media(prefers-reduced-motion:reduce){.pieza-fotos img{transition:none}}

.pieza.visible{
  transition:opacity .7s var(--curva),transform .7s var(--curva),
             box-shadow .5s var(--curva),border-color .4s ease;
  transition-delay:calc(var(--i,0) * 70ms);
  opacity:1;transform:none;
}
/* Al pasar de pestaña las tarjetas ya numeradas entran de nuevo escalonadas. */
.pieza.visible:hover{transition-delay:0s}

.piezas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.piezas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.piezas{grid-template-columns:1fr}}

.pieza{
  position:relative;display:flex;flex-direction:column;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);
  padding:24px 24px 20px;overflow:hidden;
  transition:transform .5s var(--curva),box-shadow .5s var(--curva),border-color .4s ease;
}
.pieza::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--tono,var(--marca));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--curva);
}
.pieza:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:var(--linea-fuerte)}
.pieza:hover::before{transform:scaleX(1)}

.pieza:hover .pieza p{color:var(--texto-2);font-size:14.5px;line-height:1.58;margin:0 0 16px}
.detalle-linea{
  font-family:var(--f-mono)!important;font-size:11.5px!important;line-height:1.75!important;
  color:var(--texto)!important;background:var(--papel);border-left:2px solid var(--tono,var(--marca));
  padding:9px 12px;border-radius:0 var(--r) var(--r) 0;margin:0 0 18px!important;
}
.pieza-pie{margin-top:auto;padding-top:14px;border-top:1px solid var(--linea)}
.wasap{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:13.5px;font-weight:600;color:var(--texto);
  transition:color .3s ease,gap .35s var(--curva);
}
.wasap:hover{color:var(--tono-texto,var(--marca-texto));gap:13px}
.wasap svg{width:15px;height:15px;fill:currentColor;flex:none}
.wasap .flecha{fill:none;stroke:currentColor;stroke-width:2;transition:transform .35s var(--curva)}
.wasap:hover .flecha{transform:translateX(3px)}

/* Amarillo para lo que se vende de mostrador, acero para lo que sale del taller */
#p-productos .pieza{--tono:var(--marca);--tono-tenue:var(--marca-tenue);--tono-texto:var(--marca-texto)}
#p-servicios .pieza{--tono:var(--acero);--tono-tenue:var(--acero-tenue);--tono-texto:var(--acero)}

/* ═════════════════════════════ Marcas ══════════════════════════════════ */
/* Cuatro marcas: 4 columnas o 2×2. Con auto-fit, a 768 px quedaban 3 + 1 y un
   hueco gris al lado del último logo. */
/* Seis marcas: tres por fila. Con cuatro columnas, las dos últimas dejaban
   media fila vacía. */
.marcas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-top:26px}
.marca-caja{background:var(--superficie);display:grid;place-items:center;min-height:118px;padding:24px;transition:background-color .4s ease}
.marca-caja:hover{background:#FDFCF8}
/* Los logos traen fondo blanco. multiply lo vuelve invisible sobre cualquier
   fondo claro, incluido el crema del hover, sin tener que recortar la
   transparencia a mano. */
/* Los logos no son botones ni se pueden arrastrar: arrastrar una imagen abre
   el gesto de «arrastrar y soltar» del navegador, que en Windows deja la
   página como pegada hasta el siguiente clic. */
.marca-caja{user-select:none}
.marca-caja img{pointer-events:none;-webkit-user-drag:none;width:auto;max-width:100%;mix-blend-mode:multiply;
  transition:filter .5s ease,opacity .5s ease,transform .5s var(--curva)}
/* Compensación óptica: a igual alto, un logo alargado se ve más grande que
   uno compacto. El alto de cada uno sale de igualar el ÁREA visible
   (alto = raíz de área / proporción), no el alto. */
.marca-gates img{height:46px}
.marca-parker img{height:39px}
.marca-atos img{height:44px}   /* el logo nuevo trae dos líneas: la palabra y «the smart electrohydraulics» */
.marca-covalca img{height:31px}
.marca-emc img{height:38px}
.marca-trale img{height:29px}
.marca-caja:hover img{filter:none;opacity:1;transform:scale(1.04)}
.marca-caja .nombre{
  font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:-.02em;
  color:var(--texto-3);margin:0;transition:color .4s ease;
}
.marca-caja:hover .nombre{color:var(--texto)}

/* ═════════════════════════════ Contacto ════════════════════════════════ */
.contacto{background:var(--tinta);color:#fff;overflow:hidden}
.contacto .caja{position:relative;z-index:2}
.contacto-rejilla{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,72px);align-items:start}
@media(max-width:940px){.contacto-rejilla{grid-template-columns:1fr;gap:44px}}
.contacto h2{color:#fff}
.contacto .rotulo{color:rgba(255,255,255,.6)}
.contacto .rotulo b{color:var(--marca)}
.contacto .rotulo::after{background:var(--linea-obscura-2)}
.contacto .suave{color:#9FB0BA}

.datos{list-style:none;margin:32px 0 0;padding:0}
.datos li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--linea-obscura)}
.datos li:last-child{border-bottom:1px solid var(--linea-obscura)}
.icono-dato{
  flex:none;width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;
  background:rgba(255,255,255,.06);color:var(--marca);
  transition:background-color .4s ease,transform .5s var(--curva);
}
.datos li:hover .icono-dato{background:rgba(255,189,57,.2);transform:translateY(-2px)}
.icono-dato svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.clave{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:2px}
.valor-dato{color:#fff;font-size:15.5px;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s ease}
a.valor-dato:hover{border-bottom-color:var(--marca)}

.forma{position:relative;background:var(--superficie);color:var(--texto);border-radius:var(--r);padding:clamp(26px,3.4vw,40px);box-shadow:var(--sombra-alta)}
.forma::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--marca),var(--marca-viva));border-radius:var(--r) var(--r) 0 0}
.forma-titulo{font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:-.025em;margin:0 0 4px}
.forma-nota{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);margin:0 0 26px}
.rejilla-campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.rejilla-campos{grid-template-columns:1fr}}
.campo{position:relative;display:flex;flex-direction:column}
.campo.ancho{grid-column:1/-1}
/* Etiquetas del formulario: 11.5 px y color más oscuro. A 10.5 px y en gris
   claro costaba leerlas, sobre todo en el teléfono. El peso lo pone la regla
   de abajo, que las sube a 700. */
.campo label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2);margin-bottom:7px;transition:color .3s ease}
.campo input,.campo textarea{
  font-family:var(--f-texto);font-size:15.5px;color:var(--texto);
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:13px 14px;width:100%;resize:vertical;
  transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease;
}
.campo textarea{min-height:112px;line-height:1.55}
.campo input::placeholder,.campo textarea::placeholder{color:#A9B4BB}
.campo input:focus,.campo textarea:focus{outline:none;background:var(--superficie);border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-tenue)}
.campo:focus-within label{color:var(--marca-texto)}
.campo.error input,.campo.error textarea{border-color:#C4453B;box-shadow:0 0 0 3px rgba(196,69,59,.09)}
.aviso{font-size:12.5px;color:#C4453B;margin:6px 0 0;opacity:0;transform:translateY(-3px);transition:opacity .3s ease,transform .3s ease}
.campo.error .aviso{opacity:1;transform:none}
.con-prefijo{position:relative;display:block}
.con-prefijo input{padding-left:52px}
.con-prefijo::after{content:'+504';position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:14px;color:var(--texto-3);pointer-events:none}
.trampa{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
.forma .boton{width:100%;justify-content:center;margin-top:22px}
.pie-forma{font-size:12.5px;color:var(--texto-3);text-align:center;margin:14px 0 0}

.exito{display:none;text-align:center;padding:34px 10px}
.exito.visible{display:block;animation:entrar-pieza .6s var(--curva) both}
.exito .sello{width:58px;height:58px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:var(--marca-tenue);color:var(--marca-texto)}
.exito .sello svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:trazar .8s var(--curva) .2s forwards}
.exito h3{font-size:21px;margin-bottom:8px}
.exito p{color:var(--texto-2);margin:0 auto;max-width:40ch}

/* ═════════════════════════════ Pie ═════════════════════════════════════ */
.pie{background:var(--tinta-2);color:rgba(255,255,255,.62);padding:56px 0 26px;font-size:14.5px}
.pie-rejilla{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--linea-obscura)}
@media(max-width:820px){.pie-rejilla{grid-template-columns:1fr;gap:30px}}
.pie h4{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);margin:0 0 16px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pie a{text-decoration:none;transition:color .3s ease}
.pie a:hover{color:var(--marca)}
.redes{display:flex;gap:9px;margin-top:18px}
.redes a{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;border:1px solid var(--linea-obscura);transition:background-color .35s ease,border-color .35s ease,transform .45s var(--curva)}
.redes a:hover{background:var(--marca);border-color:var(--marca);transform:translateY(-3px)}
.redes svg{width:16px;height:16px;fill:currentColor}
.redes a:hover svg{fill:var(--tinta)}
/* El crédito enlaza al WhatsApp de GamaX. Se enlaza la frase entera, que en el
   teléfono es un blanco cómodo de tocar, pero solo «GamaX» va en ámbar y
   subrayado: se nota que lleva a algún lado sin gritar más que los datos de
   DHN, que es de quien es la página. Sin icono, por decisión de Jostin. */
.credito{text-decoration:none;transition:color .35s var(--curva)}
.credito b{
  color:var(--marca);font-weight:700;
  text-decoration:underline;text-decoration-color:rgba(255,189,57,.5);text-underline-offset:3px}
.credito:hover b{text-decoration-color:var(--marca)}
.pie-legal{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:22px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.36)}

/* ═════════════════════ Botón flotante de WhatsApp ══════════════════════ */
.flotante{
  position:fixed;right:22px;bottom:22px;z-index:70;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;box-shadow:0 10px 30px rgba(37,211,102,.36);
  transition:transform .45s var(--curva),box-shadow .45s var(--curva);
  opacity:0;visibility:hidden;transform:scale(.6);
}
.flotante.visible{opacity:1;visibility:visible;transform:scale(1)}
.flotante:hover{transform:scale(1.07) translateY(-2px);box-shadow:0 14px 36px rgba(37,211,102,.45)}
.flotante svg{width:27px;height:27px;fill:currentColor}
.flotante::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:pulso 2.6s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.flotante .globo{
  position:absolute;right:70px;white-space:nowrap;background:var(--tinta);color:#fff;
  font-size:13px;font-weight:500;padding:9px 14px;border-radius:var(--r);
  opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .35s ease,transform .35s var(--curva);
}
.flotante:hover .globo{opacity:1;transform:translateX(0)}
@media(max-width:600px){.flotante{right:16px;bottom:16px;width:52px;height:52px}.flotante .globo{display:none}}

[data-revelar]{opacity:0;transform:translateY(24px);transition:opacity .85s var(--curva),transform .85s var(--curva)}
[data-revelar].visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-revelar],.portada [data-entrada],.portada h1 .linea i,.pieza{opacity:1!important;transform:none!important}
  .cinta-pista{animation:none;transform:none!important}
  .telon{display:none!important}
  .cabezal.oculto{transform:none!important}
}

/* ═════════════════ Ajustes tipográficos para Manrope ═════════════════
   Las etiquetas antes eran monoespaciadas. En Manrope las mayúsculas chicas
   y espaciadas necesitan un punto más de peso para no verse flacas, y los
   titulares piden un poco menos de interletra negativa que Archivo. */
body{font-variant-numeric:tabular-nums;letter-spacing:-.003em}
h1,h2,h3{font-weight:700}
.portada h1{letter-spacing:-.034em;font-weight:700}
h2{letter-spacing:-.028em}
h3{letter-spacing:-.018em}

.campo label{font-weight:700}
.rotulo,.ficha-titulo,.cifra-pie,.clave,.forma-nota,
.pie h4,.pie-legal,.logo-texto small,.cinta-grupo span{font-weight:600}
.rotulo{font-size:12px;letter-spacing:.13em}
.rotulo b{font-weight:800}
.cinta-grupo span{font-size:12px;letter-spacing:.14em}
.ficha dd{font-size:13.5px;font-weight:500;letter-spacing:0}
.ficha dd b{font-weight:700}
.detalle-linea{font-size:13px!important;line-height:1.6!important;font-weight:500}
.cifra{font-weight:700;letter-spacing:-.035em}
.logo-texto{font-weight:700}
.boton,.menu a,.pestana{font-weight:600}


/* ── Pantallas angostas ──
   El titular está partido a mano en tres líneas; si una se parte sola en dos,
   la animación por líneas queda despareja. A 320 px "repuestos y el taller"
   no entraba a 34 px, y el rótulo de arriba ocupaba dos renglones. */
@media(max-width:480px){
  .portada .rotulo{font-size:10.5px;letter-spacing:.08em;gap:10px}
}
@media(max-width:359px){
  .portada h1{font-size:28px;letter-spacing:-.03em}
}

@media(max-width:699px){.marcas{grid-template-columns:repeat(2,1fr)}.marca-caja{min-height:100px;padding:18px}}