/* ═══════════════════════════════════════════════════════════════════
   Jingyuan — es.jingyuan.hk  V1.0
   Sistema de diseño: «Industria mediterránea» — fabricante industrial B2B
   Paleta: blanco cálido y gris cálido dominantes; azul industrial profundo
           en titulares, pie de página y bandas técnicas; terracota como
           único color de acción.
   Diferenciación: la versión francesa (fr.jingyuan.hk) usa blanco + azul
   #0055A4. Esta paleta es deliberadamente distinta: base cálida y acento
   terracota, sin azul cromático.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

:root {
  /* ── Color de acción (terracota) ────────────────────────────────
     Tres variantes del mismo tono, no tres colores distintos:
       --brand      identidad visual (decoración, iconos, filetes, cifras)
       --brand-ink  terracota para TEXTO sobre fondo claro
       --brand-fill terracota para SUPERFICIES con texto blanco (botones)
     El #D96B3B del pliego rinde 3,47:1 con texto blanco: por debajo del
     umbral WCAG AA (4,5:1) para texto normal, que es justo el caso de la
     etiqueta de un botón. #B85427 da 4,87:1 y conserva el mismo tono. */
  --brand:      #D96B3B;
  --brand-ink:  #B0542A;
  --brand-fill: #B85427;
  --brand-dk:   #9E4620;
  --brand-lt:   #FBEDE6;
  --brand-lt2:  #F2D8C9;

  /* ── Azul industrial profundo ─────────────────────────────────── */
  --navy:       #243B53;
  --navy-dk:    #16273A;
  --navy-mid:   #3D5A7A;
  --navy-lt:    #E7ECF2;

  /* ── Verde funcional (solo validación y WhatsApp) ─────────────── */
  --green:      #0B7A50;
  --green-lt:   #E7F5EF;

  /* ── Superficies ──────────────────────────────────────────────────
     Fondo de página = blanco cálido. Las secciones alternas suben a
     blanco puro para crear ritmo sin introducir un tercer tono. */
  --bg:         #F8F7F3;
  --bg-alt:     #FFFFFF;
  --bg-soft:    #EAE7E0;
  --surface:    #FFFFFF;

  --border:     #E2DDD3;
  --border-hi:  #CFC8BA;

  /* ── Tipografía ───────────────────────────────────────────────────
     --ink      titulares (azul industrial)
     --ink-body texto corrido (gris oscuro)
     --ink-sub  texto secundario. El #6B7280 del pliego rinde 4,46:1 sobre
                el fondo cálido: un paso por debajo de AA. #5E6673 da
                5,41:1 y visualmente es el mismo gris. */
  --ink:        #243B53;
  --ink-body:   #343A40;
  --ink-dim:    #4A5563;
  --ink-sub:    #5E6673;

  --radius:     8px;
  --radius-sm:  5px;
  --radius-lg:  14px;

  --shadow-sm:  0 1px 2px rgba(36,59,83,.05), 0 1px 3px rgba(36,59,83,.06);
  --shadow:     0 2px 4px rgba(36,59,83,.05), 0 8px 24px rgba(36,59,83,.07);
  --shadow-lg:  0 4px 8px rgba(36,59,83,.06), 0 20px 48px rgba(36,59,83,.10);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --head: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

  --wrap: 1200px;
  --nav-h: 72px;
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { color: var(--brand-dk); }
/* Las palabras largas no deben desbordar el contenedor: solo se parte una
   palabra cuando por sí sola no cabe. Cero efecto sobre el texto normal.
   Palabras españolas como «deshidrogenación» o «electromagnético» provocan
   desplazamiento horizontal en columnas estrechas. Este es el seguro
   genérico contra ese defecto, independiente del idioma. */
h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); line-height: 1.18; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.014em; overflow-wrap: break-word; }
h1 { font-size: clamp(1.85rem, 1.2rem + 2.5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2rem); }
h3 { font-size: clamp(1.1rem, .98rem + .5vw, 1.3rem); font-weight: 600; }
h4 { font-size: 1.02rem; font-weight: 600; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }
strong { font-weight: 600; color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
code, kbd, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 3px solid var(--navy-mid); outline-offset: 2px; border-radius: 3px; }

/* ── Auxiliares ─────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 880px; }
.sec { padding: 72px 0; }
.sec-sm { padding: 48px 0; }
.sec-alt { background: var(--bg-alt); }
.sec-soft { background: var(--bg-soft); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand-fill); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink);
  background: var(--brand-lt); border-radius: 100px; padding: 5px 13px; margin-bottom: 16px;
}
.eyebrow-plain { background: none; padding: 0; color: var(--navy-mid); }
.lead { font-size: 1.1rem; color: var(--ink-dim); max-width: 68ch; }
.sec-head { max-width: 780px; margin-bottom: 40px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head p { color: var(--ink-dim); margin-bottom: 0; }
.sub { color: var(--ink-sub); font-size: .93rem; }

/* ── Botones ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 600; line-height: 1;
  padding: 14px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
  text-align: center;
}
.btn-primary { background: var(--brand-fill); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-dk); color: #fff; box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-outline { background: #fff; color: var(--brand-ink); border-color: var(--border-hi); }
.btn-outline:hover { border-color: var(--brand-fill); background: var(--brand-lt); color: var(--brand-dk); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--brand-ink); padding-left: 0; padding-right: 0; }
.btn-ghost::after { content: '→'; transition: transform .18s; }
.btn-ghost:hover::after { transform: translateX(3px); }
.btn-sm { padding: 10px 16px; font-size: 14.5px; }
.btn-lg { padding: 16px 28px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── Navegación ─────────────────────────────────────────────────── */
/* La cabecera es un punto de referencia ARIA (<header> = banner): permite a
   los lectores de pantalla saltar directamente al contenido o al menú. El
   «sticky» lo lleva el <header> y no el <nav>: un elemento sticky solo puede
   pegarse dentro de los límites de su padre; si el padre midiera lo mismo
   que él, no tendría recorrido de desplazamiento y no se pegaría. */
.site-header { position: sticky; top: 0; z-index: 100; }
.nav {
  background: rgba(248,247,243,.94); backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 46px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a {
  display: block; color: var(--ink-dim); font-size: 15px; font-weight: 500;
  padding: 9px 14px; border-radius: var(--radius-sm); transition: color .16s, background .16s;
}
.nav-links a:hover { color: var(--brand-ink); background: var(--brand-lt); }
.nav-links a.active { color: var(--brand-ink); font-weight: 600; }
.nav-links a.nav-cta {
  background: var(--brand-fill); color: #fff; font-weight: 600; padding: 11px 18px; margin-left: 8px;
  box-shadow: var(--shadow-sm);
}
.nav-links a.nav-cta:hover { background: var(--brand-dk); color: #fff; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }

/* ── Hero ───────────────────────────────────────────────────────── */
/* Degradado cálido, no el degradado azulado de la versión francesa: es el
   primer rasgo que distingue ambas identidades al abrir la página. */
.hero { background: linear-gradient(180deg, #FFFFFF 0%, #F8F7F3 64%, #F3F0E9 100%); border-bottom: 1px solid var(--border); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center; padding: 68px 0 60px; }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-sub { font-size: 1.13rem; color: var(--ink-dim); max-width: 60ch; margin-bottom: 30px; }
.hero-figure { position: relative; }
.hero-figure img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.hero-figure figcaption {
  margin-top: 12px; font-size: 13px; color: var(--ink-sub);
  /* align-items:flex-start (no center): la leyenda española ocupa tres
     líneas; con «center» el punto quedaba centrado respecto al bloque
     completo y aterrizaba junto a la SEGUNDA línea. */
  display: flex; align-items: flex-start; gap: 8px;
}
.hero-figure figcaption::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  flex-shrink: 0;
  /* centra el punto en la caja de la primera línea: (13px × 1.65 − 7px) / 2 */
  margin-top: .55em;
}
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 0; }
.hero-stat { background: #fff; padding: 22px 20px; }
.hero-stat-num { font-family: var(--head); font-size: 1.6rem; font-weight: 700; color: var(--brand-ink); line-height: 1.1; display: block; }
.hero-stat-lbl { font-size: 13.5px; color: var(--ink-sub); margin-top: 6px; display: block; line-height: 1.4; }

/* ── Banda de datos verificables ────────────────────────────────────
   Azul industrial: el pliego reserva este color para bandas técnicas y
   datos. Separa visualmente las cifras del discurso y refuerza la
   identidad frente a la versión francesa, que usa una barra clara. */
.trust { border-bottom: 1px solid var(--navy-dk); background: var(--navy); }
.trust-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; padding: 20px 0; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.82); }
.trust-item strong { font-family: var(--head); color: #fff; font-size: 15.5px; }
.trust-ico {
  width: 30px; height: 30px; border-radius: 7px; background: rgba(255,255,255,.12); color: #F0A87E;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.trust-ico svg { width: 17px; height: 17px; }

/* ── Rejillas y tarjetas ────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card:hover { border-color: var(--border-hi); box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card-ico {
  width: 42px; height: 42px; border-radius: 9px; background: var(--brand-lt); color: var(--brand-ink);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.card-ico svg { width: 22px; height: 22px; }
.card-plain:hover { transform: none; box-shadow: none; border-color: var(--border-hi); }

/* ── Productos ──────────────────────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prod-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s;
  color: inherit;
}
.prod-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-3px); color: inherit; }
.prod-media { aspect-ratio: 16 / 10; background: var(--bg-soft); border-bottom: 1px solid var(--border); overflow: hidden; }
.prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.prod-card:hover .prod-media img { transform: scale(1.035); }
.prod-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.prod-series { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-sub); margin-bottom: 10px; line-height: 1.45; }
.prod-title { font-family: var(--head); font-size: 1.06rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; line-height: 1.3; }
.prod-title .model { color: var(--brand-ink); }
.prod-desc { font-size: 14.5px; color: var(--ink-dim); margin: 0 0 16px; flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--brand-dk);
  background: var(--brand-lt); border: 1px solid var(--brand-lt2); border-radius: 5px; padding: 4px 9px;
}
.chip-plain { background: var(--bg-alt); border-color: var(--border); color: var(--ink-dim); }
.prod-media-line { font-size: 13.5px; color: var(--ink-sub); padding-top: 13px; border-top: 1px solid var(--border); display: flex; gap: 7px; }
.prod-media-line b { color: var(--ink-dim); font-weight: 600; }
.prod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag { font-size: 12px; color: var(--ink-dim); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 100px; padding: 3px 10px; }

/* Filtros de categoría */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; }
.filters button {
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--ink-dim);
  background: #fff; border: 1px solid var(--border); border-radius: 100px; padding: 9px 17px; cursor: pointer;
  transition: all .16s;
}
.filters button:hover { border-color: var(--brand-fill); color: var(--brand-ink); }
.filters button[aria-pressed="true"] { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; font-weight: 600; }

/* ── Tablas ─────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
table.spec { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
table.spec caption { text-align: left; padding: 16px 20px; font-weight: 600; font-family: var(--head); border-bottom: 1px solid var(--border); }
table.spec th, table.spec td { padding: 13px 20px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.spec thead th { background: var(--bg-soft); font-family: var(--head); font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); }
table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec tbody tr:nth-child(even) { background: #FCFAF6; }
table.spec td:first-child { font-weight: 500; color: var(--ink-dim); width: 38%; }
table.spec td.val { font-family: var(--mono); font-size: 14.5px; color: var(--ink); }
table.spec td.note { color: var(--ink-sub); font-size: 13.5px; }
.pending { color: #A4620A; background: #FFF8EC; border: 1px dashed #E0B775; border-radius: 5px; padding: 2px 8px; font-size: 13px; font-family: var(--sans); white-space: nowrap; }

/* ── Galería de producto ────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gallery-main { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); aspect-ratio: 3 / 2; position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-thumbs button {
  width: 92px; height: 68px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--bg-soft); cursor: pointer; transition: border-color .16s, box-shadow .16s;
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button[aria-pressed="true"] { border-color: var(--brand-fill); box-shadow: 0 0 0 2px var(--brand-lt2); }

/* ── Bloque de respuesta directa (AEO) ──────────────────────────── */
.answer {
  background: var(--brand-lt); border: 1px solid var(--brand-lt2); border-left: 4px solid var(--brand-fill);
  border-radius: var(--radius); padding: 22px 26px; margin: 26px 0;
}
.answer .answer-tag {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-ink); margin-bottom: 9px; display: block;
}
.answer p { margin: 0; font-size: 15.5px; color: var(--ink-body); }

/* ── Listas técnicas ────────────────────────────────────────────── */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 17px; height: 17px; border-radius: 50%;
  background: var(--green-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230B7A50'%3E%3Cpath d='M6.5 11.2 3.3 8l1.1-1.1 2.1 2.1 5-5L12.6 5z'/%3E%3C/svg%3E") center/13px no-repeat;
}
.hash-list { list-style: none; padding: 0; margin: 0; }
.hash-list li { position: relative; padding-left: 26px; margin-bottom: 11px; }
.hash-list li::before { content: '№'; position: absolute; left: 0; color: var(--navy-mid); font-family: var(--mono); font-size: 13px; top: .12em; }

/* ── Pasos / proceso ────────────────────────────────────────────── */
.steps { display: grid; gap: 18px; counter-reset: st; }
/* Las rejillas de tres columnas usan una CLASE, nunca grid-template-columns
   en línea. Motivo: un estilo en línea tiene prioridad sobre la hoja de
   estilos y anula por completo el @media de abajo — en móvil la sección
   seguiría a tres columnas y desbordaría horizontalmente.
   minmax(0,1fr) y no 1fr: permite que la columna encoja por debajo del
   contenido y evita que un contenido ancho reviente la rejilla. */
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px 24px 74px; }
.step::before {
  counter-increment: st; content: counter(st); position: absolute; left: 24px; top: 24px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-fill); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--head); font-weight: 700; font-size: 15px;
}
.step h3 { margin-bottom: .3em; }
.step p:last-child { margin-bottom: 0; }
.step-meta { font-family: var(--mono); font-size: 13px; color: var(--brand-ink); display: block; margin-bottom: 2px; }

/* ── KPI de producto ────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(var(--kpi-n, 3), 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.kpi { background: #fff; padding: 22px 24px; }
.kpi-val { font-family: var(--head); font-size: 1.32rem; font-weight: 700; color: var(--brand-ink); margin-bottom: 5px; }
.kpi-lbl { font-size: 13.5px; color: var(--ink-sub); line-height: 1.45; }

/* ── Recuadro ───────────────────────────────────────────────────── */
.note {
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--navy-mid);
  border-radius: var(--radius); padding: 18px 22px; font-size: 15px; color: var(--ink-dim); margin-top: 22px;
}
.note strong { color: var(--ink); }
.note-warn { border-left-color: #D08A1E; background: #FFFCF6; }
.note-green { border-left-color: var(--green); background: #F7FCFA; }

/* ── Banda CTA / solicitud de cotización ────────────────────────────
   El pliego pide azul industrial de fondo, texto blanco y botón terracota.
   Es la banda de conversión principal del sitio. */
.cta-band { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 46px 48px; }
.cta-band h2, .cta-band h3 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.86); margin-bottom: 0; }
.cta-band .btn-primary { background: var(--brand); color: #fff; }
.cta-band .btn-primary:hover { background: var(--brand-dk); color: #fff; }
.cta-band .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.cta-band .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.cta-band-inner { display: flex; justify-content: space-between; align-items: center; gap: 36px; flex-wrap: wrap; }
.cta-band-inner > div:first-child { max-width: 62ch; }
.cta-band-meta { font-size: 14px; color: rgba(255,255,255,.8); margin-top: 14px; }

/* ── Formulario ─────────────────────────────────────────────────── */
.form-layout { display: grid; grid-template-columns: 1.35fr .85fr; gap: 40px; align-items: start; }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 34px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field .req { color: #C02626; }
.field .hint { font-size: 13px; color: var(--ink-sub); font-weight: 400; margin-left: 6px; }
.input, .select, .textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink-body);
  background: #fff; border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: border-color .16s, box-shadow .16s;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-fill); box-shadow: 0 0 0 3px var(--brand-lt); }
.textarea { min-height: 130px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%234A5563'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%234A5563' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 40px; }
.is-invalid { border-color: #C02626 !important; box-shadow: 0 0 0 3px #FDECEC !important; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-dim); }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand-fill); }
.form-error { display: none; background: #FDECEC; border: 1px solid #F3C6C6; color: #8E2020; border-radius: var(--radius-sm); padding: 13px 16px; font-size: 14.5px; margin-bottom: 18px; }
.form-success { display: none; background: var(--green-lt); border: 1px solid #BFE5D4; border-radius: var(--radius); padding: 26px 28px; }
.form-success h3 { color: var(--green); margin-bottom: .4em; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-meta { font-size: 13.5px; color: var(--ink-sub); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.counter { font-size: 12.5px; color: var(--ink-sub); text-align: right; margin-top: 5px; font-family: var(--mono); }

/* ── Bloque de datos de contacto ────────────────────────────────── */
.contact-list { display: grid; gap: 20px; }
.contact-item { display: flex; gap: 14px; }
.contact-item .ico { width: 36px; height: 36px; border-radius: 8px; background: var(--brand-lt); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-item .ico svg { width: 18px; height: 18px; }
.contact-item dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-sub); font-weight: 600; margin-bottom: 3px; }
.contact-item dd { margin: 0; font-size: 15px; color: var(--ink-dim); line-height: 1.55; }

/* ── Banda de capacidad de fabricación ──────────────────────────── */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.photo-strip figure { margin: 0; }
.photo-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.photo-strip figcaption { font-size: 13.5px; color: var(--ink-sub); margin-top: 9px; }

/* ── Pie de página ──────────────────────────────────────────────────
   Azul industrial profundo, texto claro, enlaces en terracota al pasar el
   cursor. Es el contraste más marcado frente a la versión francesa, cuyo
   pie de página es claro. */
.footer { background: var(--navy-dk); border-top: 1px solid var(--navy-dk); margin-top: 0; color: rgba(255,255,255,.82); }
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 56px 24px 30px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.footer-brand img { height: 44px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,.72); max-width: 34ch; }
/* Los títulos de columna del pie son h3 y no h4: la página no tiene ningún
   h3 entre el último h2 y el pie, y saltarse un nivel rompe la navegación
   por encabezados de los lectores de pantalla. */
.footer h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: #fff; margin: 0 0 14px; font-weight: 700; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; }
.footer a { color: rgba(255,255,255,.82); font-size: 14.5px; }
.footer a:hover { color: #F0A87E; }
.footer-contact dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.footer-contact dd { margin: 0 0 13px; font-size: 14.5px; color: rgba(255,255,255,.82); line-height: 1.5; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); max-width: var(--wrap); margin: 0 auto;
  padding: 20px 24px 34px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255,255,255,.68);
}
.footer-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-tags span { font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.18); border-radius: 4px; padding: 3px 8px; background: rgba(255,255,255,.04); }

/* ── Botones flotantes: consulta rápida + WhatsApp ──────────────────
   Pila anclada abajo a la derecha. El contenedor lleva pointer-events:none
   para no interceptar nunca un clic destinado al contenido que hay debajo:
   solo los botones son clicables (zona muerta = 0). */
.fab-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 92;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.fab-stack > * { pointer-events: auto; }
/* El aviso de cookies es mucho más ancho que la pila: se eleva esta última
   la altura realmente medida del aviso (--cookie-h, fijada por site.js)
   para descartar cualquier solapamiento en todas las anchuras. */
body.cookie-open .fab-stack { bottom: calc(var(--cookie-h, 0px) + 20px); }

.fab {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid transparent; border-radius: 100px; padding: 12px 18px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; line-height: 1;
  box-shadow: var(--shadow-lg); cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.fab svg { width: 20px; height: 20px; flex: 0 0 auto; }
.fab:hover { transform: translateY(-2px); }
.fab-ask { background: var(--brand-fill); color: #fff; }
.fab-ask:hover { background: var(--brand-dk); color: #fff; }
.fab-wa { background: var(--green); color: #fff; }
.fab-wa:hover { background: #095F3E; color: #fff; }

/* Reserva de espacio en el pie: sin ella la pila taparía la línea
   «© … / Política de privacidad» y las etiquetas.
   Escritorio → se libera el margen derecho de la línea inferior.
   Móvil / tableta → el elemento vacío .fab-clearance al final del <footer>
   reserva la altura. NO se usa padding en .footer-bottom porque el atajo
   `padding` de un @media posterior lo reinicia por completo. */
@media (min-width: 941px) { .footer-bottom { padding-right: 236px; } }
.fab-clearance { height: 0; }
@media (max-width: 940px) { .fab-clearance { height: 128px; } }

/* ── Ventana de consulta rápida ─────────────────────────────────── */
.qa {
  border: none; padding: 0; margin: auto; background: transparent;
  width: calc(100% - 32px); max-width: 520px;
  max-height: calc(100vh - 32px); border-radius: var(--radius-lg);
}
.qa::backdrop { background: rgba(22,39,58,.55); }
.qa-inner {
  position: relative; background: #fff; border-radius: var(--radius-lg);
  padding: 30px 30px 26px; overflow-y: auto; max-height: calc(100vh - 32px);
}
.qa h2 { font-size: 1.35rem; margin: 0 0 8px; padding-right: 36px; }
.qa-lead { font-size: 14.5px; color: var(--ink-dim); margin: 0 0 20px; }
.qa-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%; background: #fff;
  color: var(--ink-dim); font-size: 19px; line-height: 1; cursor: pointer;
}
.qa-close:hover { background: var(--bg-soft); color: var(--ink); }
.qa .textarea { min-height: 104px; resize: vertical; }
.qa-alt { font-size: 13.5px; color: var(--ink-sub); margin: 16px 0 0; }
.qa-done { display: none; }
.qa-done.show { display: block; }
.qa-done h3 { color: var(--green); margin: 0 0 .5em; }
@media (max-width: 480px) { .qa-inner { padding: 26px 20px 22px; } }

/* ── Aviso de cookies ───────────────────────────────────────────── */
.cookie-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 95;
  width: calc(100% - 36px); max-width: 940px; background: #fff; border: 1px solid var(--border-hi);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px 24px;
  display: none; gap: 20px; align-items: center; flex-wrap: wrap;
}
.cookie-bar.show { display: flex; }
.cookie-bar p { margin: 0; font-size: 14.5px; color: var(--ink-dim); flex: 1; min-width: 260px; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Ruta de navegación ─────────────────────────────────────────── */
.crumbs { font-size: 13.5px; color: var(--ink-sub); padding: 22px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: '/'; margin-right: 7px; color: var(--border-hi); }
.crumbs a { color: var(--ink-sub); }
.crumbs a:hover { color: var(--brand-ink); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* ── Objetivos táctiles (WCAG 2.2 SC 2.5.8 — 24 × 24 CSS px) ────────
   Los enlaces del pie y de la ruta medían 17–19 px de alto: con ratón no
   se nota, con el dedo en un teléfono se falla el objetivo. Se añade
   relleno vertical en vez de agrandar el texto, para no alterar la
   tipografía ni los saltos de línea. */
.footer a { display: inline-block; padding: 3px 0; }
.footer li { margin-bottom: 5px; }
.footer-bottom a { display: inline-block; padding: 3px 0; }
.crumbs a { display: inline-block; padding: 3px 0; }
.contact-item dd a { display: inline-block; padding: 3px 0; }
/* La casilla mide 18 px, pero quien recibe el clic es el <label> completo:
   ese es el objetivo. Se garantizan 24 px de alto en la línea sin agrandar
   la casilla (que resultaría visualmente pesada). */
.consent { min-height: 24px; }

/* ── Varios ─────────────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.side-col { display: grid; grid-template-columns: 1.45fr .85fr; gap: 44px; align-items: start; }
/* Los hijos de rejilla/flex tienen min-width:auto por defecto: una tabla
   ancha ensancha la columna entera por encima del viewport y anula el
   overflow-x:auto de .table-wrap (el contenedor se estira al ancho del
   contenido y no queda nada que desplazar). A cero, el hijo puede encoger
   y la tabla ancha se desplaza dentro de .table-wrap — corrige el
   desbordamiento horizontal de toda la página en móvil. */
.two-col > *, .side-col > *, .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *,
.form-layout > * { min-width: 0; }

/* H1 del hero de ficha de producto (columna estrecha dentro de .side-col:
   ancho de columna ≈ 427 px para --wrap 1200px y .85fr).
   El clamp del tema lo impulsa el «viewport» y en escritorio llega a 48px;
   este H1 vive en una columna impulsada por el «ancho de columna» y ambas
   velocidades no coinciden: las palabras largas del español
   («deshidrogenación», «electromagnético» — 9,5 em) rompen la columna
   estrecha entre 941 y 1280 px y provocan desplazamiento horizontal.
   De ahí un tamaño ligado al ancho de columna; el corte del @media
   coincide exactamente con el de .side-col (940px): por debajo es una
   sola columna a todo el ancho y el tamaño del tema ya cabe. */
@media (min-width: 941px) {
  .prod-h1 { font-size: clamp(1.85rem, calc(1rem + 1.6vw), 2.6rem); }
}
.sticky-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.notice-pending { background: #FFF8EC; border: 1px solid #E0B775; border-radius: var(--radius); padding: 16px 20px; font-size: 14.5px; color: #7A5008; }

/* ── Adaptación a pantalla ──────────────────────────────────────── */
@media (max-width: 1080px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
  :root { --nav-h: 64px; }
  .nav-burger { display: flex; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: var(--nav-h); display: none;
    flex-direction: column; align-items: stretch; gap: 0; background: #fff;
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow); padding: 10px 16px 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 14px; font-size: 16px; }
  .nav-links a.nav-cta { margin: 10px 0 0; text-align: center; }
  .nav-inner { position: relative; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; padding: 44px 0 48px; }
  .hero-figure { order: -1; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-4, .kpis { grid-template-columns: repeat(2, 1fr); }
  .two-col, .side-col, .form-layout { grid-template-columns: 1fr; gap: 30px; }
  .steps-3 { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 36px 28px; }
  .sec { padding: 52px 0; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .sec { padding: 44px 0; }
  .hero-stats { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4, .kpis, .prod-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 24px 20px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 18px 24px; }
  .footer-bottom { padding: 18px 18px 28px; }
  .photo-strip { grid-template-columns: 1fr; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  /* la pila de botones flotantes se aprieta en pantallas pequeñas */
  .fab-stack { right: 14px; }
  .fab { padding: 11px 15px; font-size: 13.5px; gap: 8px; }
  .fab svg { width: 18px; height: 18px; }
  .gallery-thumbs button { width: 76px; height: 58px; }
  .crumbs { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .nav, .footer, .wa, .cookie-bar, .btn { display: none !important; }
  body { font-size: 12pt; }
}

/* ══════════════════════════════════════════════════════════════════
   CLASES UTILITARIAS PROCEDENTES DE LOS ESTILOS EN LÍNEA ORIGINALES
   ══════════════════════════════════════════════════════════════════
   Estas clases sustituyen los estilos en línea del patrón anterior. Un
   estilo en línea se impone a la TOTALIDAD de la hoja de estilos —
   incluida una regla escrita dentro de un @media. Para reproducir
   exactamente la cascada anterior, este bloque va DESPUÉS de todos los
   @media: a igual especificidad, el orden en el código es el único modo
   de garantizar el mismo resultado.

   Dos ubicaciones reales dependen de ello:
     • 404.html      : <section class="sec hero-pad"> — se conservan los
       80px de relleno vertical; de lo contrario @media (max-width:940px)
       .sec los dejaría en 52px, y en 44px por debajo de 680px.
     • productos.html: <div class="wrap section-tail"> — se conservan los
       64px de relleno inferior; de lo contrario @media (max-width:680px)
       .wrap los dejaría en 18px.

   Corolario: una regla @media NO puede sobrescribir estas clases. Para
   adaptar uno de estos espaciados en responsive, crear una clase
   dedicada en lugar de reutilizar una utilidad. */

/* ── FAQ (acordeón) ─────────────────────────────────────────────── */
.faq-item { padding: 20px 24px; }
.faq-q { cursor: pointer; font-weight: 600; }
.faq-a { margin: 14px 0 0; }
.faq-lead { margin: 0 0 18px; }
.faq-grid { display: grid; gap: 16px; margin-top: 22px; }

/* ── Espaciado ──────────────────────────────────────────────────── */
.mt-0  { margin-top: 0 }      .mt-12 { margin-top: 12px }
.mt-14 { margin-top: 14px }   .mt-16 { margin-top: 16px }
.mt-18 { margin-top: 18px }   .mt-20 { margin-top: 20px }
.mt-22 { margin-top: 22px }   .mt-24 { margin-top: 24px }
.mt-26 { margin-top: 26px }   .mt-28 { margin-top: 28px }
.mt-34 { margin-top: 34px }   .mt-36 { margin-top: 36px }
.mt-44 { margin-top: 44px }   .mt-46 { margin-top: 46px }
.mb-0  { margin-bottom: 0 }   .mb-22 { margin-bottom: 22px }
.mb-26 { margin-bottom: 26px } .mb-34 { margin-bottom: 34px }
.m-0   { margin: 0 }
.mx-auto { margin-left: auto; margin-right: auto }
.lead-center { margin: 0 auto 30px }
.chips-block { margin: 18px 0 }

/* ── Bloques ────────────────────────────────────────────────────── */
.card-pad { padding: 28px }
.hero-pad { padding: 80px 0 }
.section-tail { padding-bottom: 64px }
.pm-flush { border: 0; padding-top: 0 }
.spec-divider { margin-bottom: 0; padding-top: 12px; border-top: 1px solid var(--border) }
.stack { display: flex; flex-direction: column }
.prose { max-width: 80ch }
.prose-narrow { max-width: 820px }
.tag-gap { gap: 10px }
.center-x { justify-content: center }

/* ── Tipografía y color ─────────────────────────────────────────── */
.lead-xs  { font-size: 1rem }
.lead-sm  { font-size: 1.02rem }
.lead-md  { font-size: 1.05rem }
.lead-lg  { font-size: 1.25rem }
.txt-left { text-align: left }
.fw-400 { font-weight: 400 }
.link-plain { color: inherit }
.card-link { display: block; color: inherit }