/* ============================================================
   INDUSTRIAS IMR — styles.css  v2 (tema claro estilo Festo)
   Identidad: azul IMR #2C93EF / #1141C6 (manual de marca 2026)
   Tipografia: Barlow (sustituto web de DIN Next) + IBM Plex Mono
   ============================================================ */

:root {
  /* Paleta de marca */
  --imr-azul: #2C93EF;          /* Pantone 2925 C */
  --imr-azul-profundo: #1141C6; /* Pantone 2935 C */
  --imr-azul-claro: #E8F3FD;    /* tinte para fondos suaves */
  --imr-navy: #0B1F3F;          /* footer y contrastes */

  /* Neutros claros */
  --imr-blanco: #FFFFFF;
  --imr-gris-banda: #F2F6FA;
  --imr-borde: #E2E9F0;
  --imr-tinta: #10151D;
  --imr-gris: #5A6B7E;
  --imr-gris-claro: #8494A6;

  /* Mapa funcional */
  --bg: var(--imr-blanco);
  --bg-soft: var(--imr-gris-banda);
  --surface: var(--imr-blanco);
  --ink: var(--imr-tinta);
  --steel: var(--imr-gris);
  --steel-light: var(--imr-gris-claro);
  --accent: var(--imr-azul);
  --accent-hover: #1478D4;
  --accent-deep: var(--imr-azul-profundo);
  --navy: var(--imr-navy);

  --font-display: "Barlow", "Segoe UI", sans-serif;
  --font-body: "Barlow", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;

  --radius: 8px;
  --radius-sm: 4px;
  --maxw: 1180px;
  --header-h: 122px;
  --shadow: 0 2px 6px rgba(16, 21, 29, .06);
  --shadow-hover: 0 14px 34px rgba(16, 21, 29, .13);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Header de dos filas (logo + buscador / menu) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--imr-borde);
}
.header-top {
  height: 76px; display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.header-nav { border-top: 1px solid var(--imr-borde); background: rgba(242, 246, 250, .7); }
.nav { display: flex; align-items: center; gap: 30px; height: 46px; }
.nav a {
  color: var(--ink); font-weight: 600; font-size: .95rem;
  letter-spacing: .01em; position: relative; height: 100%;
  display: flex; align-items: center;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--accent);
  transform: scaleX(0); transition: transform .22s ease;
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a:hover, .nav a.active { color: var(--accent-deep); }
.nav-cta {
  background: var(--accent); color: #fff; flex-shrink: 0;
  padding: 11px 24px; border-radius: var(--radius-sm); font-weight: 700;
  transition: background .18s, transform .18s;
}
.nav-cta:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); }
.menu-toggle {
  display: none; background: none; border: 1px solid var(--imr-borde);
  color: var(--ink); font-size: 1.3rem; padding: 6px 12px;
  border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0;
}

/* ---------- Buscador del grupo (barra visible, estilo Tectul) ---------- */
.buscador { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.bus-icono {
  position: absolute; left: 15px; display: flex; pointer-events: none;
  color: var(--steel-light);
}
.bus-icono svg { width: 19px; height: 19px; fill: currentColor; }
.bus-input {
  width: 100%; padding: 12px 42px 12px 44px;
  border: 1px solid var(--imr-borde); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .96rem; color: var(--ink);
  background: var(--bg-soft); transition: all .18s ease;
}
.bus-input::placeholder { color: var(--steel-light); }
.bus-input:focus {
  outline: none; background: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 147, 239, .16);
}
.bus-input:focus + .bus-limpiar, .buscador.con-texto .bus-limpiar { display: flex; }
.bus-limpiar {
  display: none; position: absolute; right: 10px;
  width: 26px; height: 26px; border: none; border-radius: 50%;
  background: var(--imr-borde); color: var(--steel); cursor: pointer;
  align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1;
}
.bus-limpiar:hover { background: var(--accent); color: #fff; }

.bus-lista {
  display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  max-height: 64vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--imr-borde); border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(16, 21, 29, .18); z-index: 80;
}
.bus-lista.abierta { display: block; }
.bus-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; border-bottom: 1px solid var(--imr-borde); color: var(--ink);
}
.bus-item:last-child { border-bottom: none; }
.bus-item:hover, .bus-item.activo { background: var(--imr-azul-claro); color: var(--ink); }
.bus-n { font-weight: 600; font-size: .96rem; line-height: 1.3; }
.bus-n mark { background: #FFF3B0; color: inherit; padding: 0 1px; border-radius: 2px; }
.bus-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.bus-cat { font-family: var(--font-mono); font-size: .7rem; color: var(--steel-light); }
.bus-div {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep);
  white-space: nowrap;
}
.bus-ext { opacity: .7; }
.bus-vacio { padding: 20px 18px; color: var(--steel); font-size: .94rem; }

@media (max-width: 860px) {
  .header-top { height: 68px; gap: 12px; }
  .bus-input { padding: 10px 38px 10px 40px; font-size: .9rem; }
  .header-top .nav-cta { display: none; }
}
@media (max-width: 680px) {
  .header-nav { display: none; }
  .header-nav.open { display: block; }
  .nav { flex-direction: column; align-items: flex-start; height: auto; gap: 0; padding: 8px 0 14px; }
  .nav a { height: auto; padding: 11px 0; width: 100%; }
  .menu-toggle { display: block; }
  /* Header de DOS FILAS en movil: arriba el logo y el menu, y el buscador
     completo debajo. En una sola fila el logo se come el ancho y el campo
     queda tan angosto que el texto de ayuda sale cortado. */
  .header-top {
    height: auto; flex-wrap: wrap; justify-content: space-between;
    row-gap: 10px; padding: 11px 0 13px;
  }
  .header-top .buscador { order: 3; flex: 0 0 100%; }
  /* el alto del logo va en estilo inline en las 15 paginas: se sobreescribe
     solo aqui, para no tener que tocar los 15 archivos */
  .header-top .brand img { height: 44px !important; }
  .bus-input { padding: 11px 40px 11px 42px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 104px 0 88px;
  background:
    radial-gradient(ellipse 55% 65% at 88% 8%, rgba(44, 147, 239, .10), transparent),
    linear-gradient(180deg, var(--imr-azul-claro) 0%, rgba(232, 243, 253, 0) 55%),
    var(--bg);
}
.hero::before {
  content: ""; position: absolute; right: -140px; top: -140px;
  width: 480px; height: 480px; border-radius: 50%;
  border: 60px solid rgba(44, 147, 239, .07);
  pointer-events: none;
}
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.2vw, 4.7rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.015em;
  max-width: 860px; color: var(--ink);
}
.hero h1 .az { color: var(--accent); }
.hero .sub {
  margin-top: 22px; max-width: 640px;
  color: var(--steel); font-size: 1.15rem;
}
.hero-actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Hero OSCURO (portada híbrida: video/textura navy) ---------- */
.hero-dark {
  background: var(--navy);
  padding: 128px 0 110px;
}
/* Capa 1: retícula blueprint fina + retícula mayor (textura de plano técnico) */
.hero-dark::before {
  content: ""; position: absolute; inset: 0; border-radius: 0; border: none;
  width: auto; height: auto; right: auto; top: auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpath d='M240 0H0v240' fill='none' stroke='rgba(94,166,238,.10)' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='rgba(94,166,238,.05)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}
/* Capa 2: brillos azules muy sutiles + viñeta inferior (filtro suavizado 2026-07-27) */
.hero-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 85% 10%, rgba(44, 147, 239, .08), transparent 65%),
    radial-gradient(ellipse 45% 55% at 8% 95%, rgba(17, 65, 198, .10), transparent 70%),
    linear-gradient(180deg, rgba(11, 31, 63, 0) 58%, rgba(7, 16, 30, .78) 100%);
}
/* Fondo del hero: foto poster (y video corporativo cuando exista /assets/video/hero.mp4).
   Opacidad alta para que se vean los colores naturales del puerto y la planta. */
.hero-media {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  opacity: .82;
  background: url('/assets/img/hero-poster.jpg') center / cover no-repeat;
}
.hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85);
}
.hero-dark::before, .hero-dark::after { z-index: 1; }
.hero-dark .container { position: relative; z-index: 2; }
.hero-dark .eyebrow { color: #7FBCF4; }
.hero-dark h1 { color: #fff; }
.hero-dark h1 .az { color: #4DA6F3; }
.hero-dark .sub { color: #B8C9DE; }
.hero-dark .kicker {
  font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #A8D2F8;
  display: flex; align-items: center; gap: 16px; margin-top: 42px;
}
.hero-dark .kicker::before {
  content: ""; width: 58px; height: 3px; background: var(--accent);
  border-radius: 2px;
}
.hero-dark .btn-ghost {
  border-color: rgba(255, 255, 255, .55); color: #fff;
}
.hero-dark .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Fila de estadisticas dentro del hero (estilo JXPC) */
.hero-stats {
  display: grid; grid-template-columns: repeat(6, auto);
  justify-content: space-between; gap: 26px 34px;
  margin-top: 54px;
}
.hero-stats .valor {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 4.2vw, 3.8rem); line-height: 1; color: #fff;
}
.hero-stats .valor sup {
  font-size: .45em; font-weight: 700; color: #4DA6F3;
  vertical-align: super; margin-left: 2px;
}
.hero-stats .etq {
  margin-top: 10px; max-width: 210px;
  font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: #C9D9EC;
}
@media (max-width: 1100px) { .hero-stats { grid-template-columns: repeat(3, auto); } }
/* Franja de estadisticas anclada a la zona oscura inferior del banner */
.hero-alto { min-height: 660px; display: flex; align-items: flex-start; }
.hero-alto > .container { width: 100%; }
.stats-abajo { position: absolute; left: 0; right: 0; bottom: 38px; z-index: 2; }
.stats-abajo .hero-stats { margin-top: 0; }
@media (max-width: 680px) { .hero-stats { grid-template-columns: repeat(2, auto); margin-top: 38px; } }

/* ---------- Grid de sectores (estilo Marmon/Trelleborg) ---------- */
.sectores-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.sector-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 3; display: flex; align-items: flex-end;
  background:
    var(--foto, linear-gradient(160deg, #1B3252 0%, #0B1F3F 70%)) center / cover no-repeat;
  border: 1px solid rgba(94, 166, 238, .14);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sector-card::before {
  content: ""; position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='rgba(94,166,238,.08)' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(11, 31, 63, 0) 30%, rgba(7, 20, 41, .88) 100%);
}
.sector-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.sector-card .sector-label {
  position: relative; z-index: 1; padding: 20px 22px;
  color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 1.08rem; line-height: 1.25;
}
.sector-card .sector-label::after {
  content: "›"; color: var(--accent); margin-left: 8px;
  font-size: 1.2rem; font-weight: 800;
  transition: margin-left .2s ease;
}
.sector-card:hover .sector-label::after { margin-left: 14px; }

/* ---------- Banda de cifras azul (estilo Marmon) ---------- */
.banda-cifras {
  background: linear-gradient(100deg, var(--accent-deep) 0%, var(--accent) 90%);
  color: #fff; padding: 34px 0 28px;
}
.banda-cifras .cifras-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  text-align: center;
}
.banda-cifras .cifra-item + .cifra-item {
  border-left: 1px solid rgba(255, 255, 255, .35);
}
.banda-cifras .valor {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800; line-height: 1.05; color: #fff;
}
.banda-cifras .etiqueta {
  margin-top: 6px; font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: rgba(255, 255, 255, .92);
}
.banda-cifras .paises {
  margin-top: 22px; text-align: center;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.banda-cifras .paises b { color: #fff; font-weight: 600; }

/* ---------- Tipografia / secciones ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-deep);
}
.section { padding: 84px 0; }
.section.alt { background: var(--bg-soft); }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.15;
  margin-top: 10px; color: var(--ink);
}
.section-head h2::after {
  content: ""; display: block; width: 56px; height: 4px;
  background: var(--accent); margin-top: 16px; border-radius: 2px;
}
.section-head p { margin-top: 16px; color: var(--steel); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  border: 2px solid transparent; cursor: pointer;
  transition: all .18s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover {
  background: var(--accent-hover); color: #fff;
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(44, 147, 239, .3);
}
.btn-ghost { border-color: var(--accent); color: var(--accent-deep); background: transparent; }
.btn-ghost:hover { background: var(--imr-azul-claro); color: var(--accent-deep); transform: translateY(-2px); }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }

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

.card {
  background: var(--surface); border: 1px solid var(--imr-borde);
  border-radius: var(--radius); padding: 30px;
  box-shadow: var(--shadow);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  margin-bottom: 10px; color: var(--ink);
}
.card p { color: var(--steel); font-size: .95rem; }
.card .tag {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-deep);
  background: var(--imr-azul-claro); border-radius: 100px; padding: 5px 12px;
}
.card .more { display: inline-block; margin-top: 16px; font-weight: 700; font-size: .9rem; }

/* Pilares */
.pilar { border-left: 4px solid var(--accent); }
.pilar .num {
  font-family: var(--font-mono); font-size: 2.4rem; font-weight: 600;
  color: var(--accent); opacity: .35; line-height: 1;
}

/* Constelacion */
.empresa-card { display: flex; flex-direction: column; }
a.empresa-card, a.empresa-card:hover { color: inherit; }
a.empresa-card p { color: var(--steel); }
.marca-tectul .tul { color: #00A651; }
.marca-pp .company {
  font-size: .66rem; letter-spacing: .28em; color: var(--steel);
  font-weight: 600; align-self: center;
}
/* Banner visual del sitio de cada empresa, a sangre dentro de la tarjeta */
.empresa-media {
  margin: -30px -30px 16px; height: 100px; flex-shrink: 0; position: relative;
  background-image: var(--media);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 1px solid var(--imr-borde);
}
.empresa-media.media-blanca { background-size: contain; background-color: #fff; }
.empresa-media.media-oscura { background-size: contain; background-color: #16181B; }
/* Wordmark de la empresa sobre el fondo blanco de la tarjeta */
.marca-fila {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.12rem;
  letter-spacing: .04em; color: var(--ink); margin-bottom: 10px;
}
.marca-fila img { height: 27px; width: auto; }
.marca-materialion .ion { color: #13D1D0; }
.marca-gawelds {
  align-self: flex-start;
  background: #101216; color: #fff; font-style: italic;
  padding: 4px 13px 4px 11px; border-radius: 6px;
  font-size: 1.12rem; letter-spacing: .02em;
}
.marca-gawelds .gw { color: #5D7E9C; }
/* Eslogan bajo el banner */
.empresa-card .eslogan {
  font-weight: 700; color: var(--ink); font-size: 1.02rem;
  line-height: 1.35; margin-bottom: 6px;
}
.empresa-card .dominio {
  font-family: var(--font-mono); font-size: .95rem; font-weight: 600;
  color: var(--accent-deep);
  margin-top: auto; padding-top: 18px;
}
.empresa-card .estado {
  font-family: var(--font-mono); font-size: .68rem; color: var(--steel-light);
  text-transform: uppercase; letter-spacing: .1em;
}

/* Bloques por division en /productos/ */
.division-bloque { margin-bottom: 48px; }
.division-bloque:last-child { margin-bottom: 0; }
.division-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; margin-bottom: 12px;
  border-bottom: 2px solid var(--imr-borde); padding-bottom: 12px;
}
.division-head .dnombre {
  font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;
}
.division-head .dnombre a { color: var(--ink); }
.division-head .dnombre a:hover { color: var(--accent-deep); }
.division-head .drol {
  font-family: var(--font-mono); font-size: .84rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-deep);
}
.division-desc { color: var(--steel); font-size: 1.08rem; margin-bottom: 20px; max-width: 820px; }
.division-desc b, .nota-propiedad b { color: var(--ink); font-weight: 700; }
.nota-propiedad {
  margin-top: 14px; font-size: 1rem; color: var(--steel);
  border-left: 3px solid var(--accent); padding-left: 12px;
}
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Tarjeta de categoria con foto (estilo catalogo Tectul) */
.cat-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--imr-borde); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  color: var(--ink); transition: all .2s ease;
}
.cat-card .cfoto {
  height: 200px; background: #fff var(--foto) center / auto 118% no-repeat;
  border-bottom: 1px solid var(--imr-borde);
}
.cat-card .cnombre {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 14px 16px; font-weight: 700; font-size: 1.12rem; line-height: 1.25;
}
.cat-card .cnombre::after { content: "→"; color: var(--accent); flex-shrink: 0; }
.cat-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-hover);
  border-color: var(--accent); color: var(--accent-deep);
}
@media (max-width: 960px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-card .cfoto { height: 96px; }
  .cat-card .cnombre { font-size: .82rem; padding: 9px 11px; }
}

/* Ajustes /capacidades/: fotos de suministro con aire y tarjetas de servicio */
/* Las 6 fotos de /capacidades/ vienen normalizadas con 6% de margen y su
   proporcion original (ver tools/normalizar-fotos-capacidades.py), asi que
   con contain cada una llena el contenedor hasta donde le da su forma y
   ninguna choca con el borde. */
.fotos-suaves .cfoto { background-size: contain; }
.cat-card .cfoto.cover { background-size: cover; height: 160px; }
.servicio .cnombre::after { content: ""; }
.serv-grid { gap: 16px; }

/* Banda "Fabricamos lo que la industria no encuentra" */
/* El boton baja a la esquina inferior derecha (sin pegarse al borde) para
   dejar respirar la foto del banner */
.cta-band.cta-proceso { align-items: flex-start; padding-bottom: 34px; }
.cta-band.cta-proceso > .btn {
  align-self: flex-end; margin-top: auto;
  margin-right: -18px; margin-bottom: -6px;
}
@media (max-width: 680px) {
  .cta-band.cta-proceso > .btn { align-self: flex-start; margin: 6px 0 0; }
}
.cta-band h2.h2-grande {
  font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.06; max-width: 680px;
}
.cta-band .frase-eslogan {
  margin-top: 16px; color: #fff;
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
}
.cta-band .frase-eslogan::before {
  content: ""; width: 46px; height: 3px; background: #fff;
  border-radius: 2px; flex-shrink: 0; opacity: .85;
}

/* ---------- Banners dinamicos ---------- */
[data-rotar]:not(.hero-media) { position: relative; }
.rot-capa {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity .85s ease;
  border-radius: inherit;
}
.rot-capa.visible { opacity: 1; }
.cta-band[data-rotar] > div, .cta-band[data-rotar] > a { position: relative; z-index: 2; }
.pilar-media[data-rotar] { background-position: center; background-size: cover; background-repeat: no-repeat; }
/* Sectores: cruce suave al rotar de posicion */
.sector-card.reveal.visible, .sector-card {
  transition: transform .25s ease, box-shadow .25s ease,
              opacity .72s cubic-bezier(.4,0,.2,1), filter .72s cubic-bezier(.4,0,.2,1) !important;
  transition-delay: 0s !important;
}
.sector-card.cambiando { opacity: 0; filter: blur(4px); }
/* Banda "Hablemos de su proyecto": menos azul */
.cta-band.cta-foto.cta-suave {
  background:
    linear-gradient(100deg, rgba(10, 16, 26, .82) 0%, rgba(14, 28, 48, .55) 52%, rgba(17, 65, 198, .22) 100%),
    url('/assets/img/cta-torno.jpg') center / cover no-repeat;
}

/* Flechas del slider del hero */
.hero-flechas {
  position: absolute; left: 0; right: 0; bottom: 34px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
.hero-flecha {
  width: 46px; height: 46px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.45); border-radius: 50%;
  background: rgba(7,16,30,.42); backdrop-filter: blur(6px);
  color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s ease;
}
.hero-flecha:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.hero-puntos { display: flex; gap: 8px; margin-left: 6px; }
.hero-punto {
  width: 9px; height: 9px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.35); border: none; padding: 0;
  transition: all .2s ease;
}
.hero-punto.activo { background: var(--accent); width: 26px; border-radius: 100px; }
@media (max-width: 680px) { .hero-flechas { bottom: 20px; } .hero-flecha { width: 40px; height: 40px; } }

/* ---------- Pagina de contacto ---------- */
/* Hero de contacto: velo a TODO el ancho (sin franjas ni bordes duros) */
.hero-media.velo-lateral::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(7,16,30,.95) 0%, rgba(7,16,30,.88) 22%, rgba(7,16,30,.62) 42%,
    rgba(7,16,30,.28) 62%, rgba(7,16,30,.10) 80%, rgba(7,16,30,0) 100%);
}
/* En movil el texto va sobre casi toda la foto: velo mas parejo */
@media (max-width: 760px) {
  .hero-media.velo-lateral::after {
    background: linear-gradient(180deg, rgba(7,16,30,.9) 0%, rgba(7,16,30,.8) 60%, rgba(7,16,30,.72) 100%);
  }
}
.wa-destacado {
  display: flex; align-items: center; gap: 26px;
  background: linear-gradient(100deg, #128C4A 0%, #25D366 100%);
  border-radius: var(--radius); padding: 32px 38px; color: #fff;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-destacado:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(37, 211, 102, .35); }
.wa-icono { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; }
.wa-icono svg { width: 42px; height: 42px; fill: #fff; }
.wa-texto { display: flex; flex-direction: column; }
.wa-rot { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.wa-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.1; margin: 4px 0; }
.wa-sub { font-size: .95rem; opacity: .92; }
@media (max-width: 560px) { .wa-destacado { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 24px; } }

.contacto-directo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.cd {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--imr-borde); border-radius: var(--radius);
  background: var(--surface); padding: 20px 24px; box-shadow: var(--shadow);
}
.cd-rot { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.cd-dato { font-weight: 700; font-size: 1.12rem; color: var(--ink); }
a.cd:hover { border-color: var(--accent); }
a.cd:hover .cd-dato { color: var(--accent-deep); }
@media (max-width: 560px) { .contacto-directo { grid-template-columns: 1fr; } }

.deps { display: grid; gap: 22px; }
.dep-rotulo {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px; padding-left: 2px;
}
.dep-rotulo b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.32rem;
  letter-spacing: -.01em; color: var(--ink);
}
.dep-rotulo span {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-deep);
}
.dep-info { display: flex; flex-direction: column; gap: 2px; }
.dep {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  border: 1px solid var(--imr-borde); border-left: 4px solid var(--accent);
  border-radius: var(--radius); background: var(--surface);
  padding: 16px 26px 16px 18px; box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.dep-foto {
  flex-shrink: 0; width: 172px; height: 99px; border-radius: var(--radius-sm);
  background: #0B1F3F var(--foto) center / cover no-repeat;
  border: 1px solid var(--imr-borde);
}
.dep-info { flex: 1; min-width: 220px; }
@media (max-width: 560px) { .dep-foto { width: 100%; height: 132px; } }
.dep:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.dep h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; margin-bottom: 3px; color: var(--ink); }
.dep-mail { font-family: var(--font-mono); font-size: .96rem; font-weight: 600; color: var(--accent-deep); }
.dep-tel {
  display: inline-block; margin-top: 3px;
  font-family: var(--font-mono); font-size: .95rem; font-weight: 600;
  color: var(--steel); transition: color .16s ease;
}
a.dep-tel:hover { color: #128C4A; }
/* WhatsApp de division: contorno discreto, NO compite con el principal */
.dep-wa {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  border: 1.5px solid #25D366; border-radius: 100px;
  padding: 8px 16px 8px 13px;
  font-weight: 700; font-size: .88rem; color: #128C4A;
  transition: all .18s ease;
}
.dep-wa svg { width: 17px; height: 17px; fill: #25D366; }
.dep-wa:hover { background: #25D366; color: #fff; }
.dep-wa:hover svg { fill: #fff; }
.dep-web { font-weight: 700; font-size: .95rem; white-space: nowrap; flex-shrink: 0; }
.dep-web .w2 { display: inline-block; line-height: 1.18; vertical-align: middle; }
@media (max-width: 640px) { .dep-wa, .dep-web { font-size: .84rem; } }

.sede .sede-dir {
  font-family: var(--font-mono); font-size: 1rem; color: var(--ink);
  margin: 4px 0 12px; line-height: 1.55;
}
/* Banda final de contacto con foto */
.cta-band.cta-contacto {
  background:
    linear-gradient(100deg, rgba(7, 20, 41, .9) 0%, rgba(17, 65, 198, .55) 55%, rgba(11, 31, 63, .3) 100%),
    url('/assets/img/banners/empresas.jpg') center / cover no-repeat;
}

/* ---------- CTA del plano en la portada (variante compacta) ----------
   Media altura de la banda normal: el titulo cede protagonismo y la frase
   ("la importamos, la fabricamos o se la conseguimos") es la que manda.
   La foto es la del mostrador con el plano, el pie de rey y la brida: su
   zona vacia cae a la izquierda, justo detras del texto. */
.cta-band.cta-plano {
  padding: 30px 40px;
  align-items: center; flex-wrap: nowrap; gap: 40px;
  background:
    linear-gradient(100deg, rgba(7, 20, 41, .93) 0%, rgba(9, 26, 52, .78) 46%, rgba(11, 31, 63, .34) 100%),
    url('/assets/img/banners/contacto.jpg') center 38% / cover no-repeat;
}
/* El circulo decorativo de la banda alta no cabe en media altura */
.cta-band.cta-plano::after {
  width: 190px; height: 190px; border-width: 26px;
  right: -46px; bottom: -74px;
}
.cta-band.cta-plano > div { max-width: 700px; }
.cta-band.cta-plano h2 {
  font-size: clamp(1.28rem, 2.2vw, 1.68rem); line-height: 1.16; max-width: 640px;
}
/* La frase reforzada: mas cuerpo, mas contraste y verbos en blanco solido */
.cta-band.cta-plano p {
  margin-top: 10px; color: rgba(255, 255, 255, .93);
  font-size: clamp(1rem, 1.35vw, 1.14rem); font-weight: 500; line-height: 1.5;
}
.cta-band.cta-plano p b { color: #fff; font-weight: 700; }
.cta-band.cta-plano > .btn { flex-shrink: 0; }
@media (max-width: 860px) {
  .cta-band.cta-plano { flex-wrap: wrap; gap: 22px; padding: 28px 24px; }
  .cta-band.cta-plano > div { max-width: none; }
}

/* Pregunta grande "A que nos dedicamos" */
.pregunta-head { max-width: 900px; margin-bottom: 40px; }
.pregunta {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.04; color: var(--ink);
}
.pregunta-head p {
  margin-top: 18px; font-size: 1.25rem; color: var(--steel); max-width: 620px;
}
.pregunta-head p::before {
  content: ""; display: block; width: 64px; height: 4px;
  background: var(--accent); border-radius: 2px; margin-bottom: 18px;
}
/* Pilares con banner de foto */
a.pilar-foto { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; }
a.pilar-foto:hover { color: inherit; }
.pilar-media {
  height: 210px; flex-shrink: 0;
  background: var(--foto) center / cover no-repeat;
  border-bottom: 1px solid var(--imr-borde);
}
.pilar-cuerpo { padding: 26px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.pilar-foto .num { margin-bottom: 2px; }
.pilar-foto p { color: var(--steel); }
.pilar-foto .more { margin-top: auto; padding-top: 16px; color: var(--accent-deep); }
.pilar-foto:hover .more { color: var(--accent); }
@media (max-width: 680px) { .pilar-media { height: 170px; } }

/* Ficha de producto */
.ficha-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 44px; align-items: start; margin-top: 8px; }
.ficha-foto {
  aspect-ratio: 1; border: 1px solid var(--imr-borde); border-radius: var(--radius);
  background: #fff var(--foto) center / contain no-repeat; background-origin: content-box;
  padding: 22px; box-shadow: var(--shadow);
}
.ficha-h1 {
  font-family: var(--font-display); font-weight: 800; line-height: 1.08;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 10px 0 18px;
}
.ficha-que { color: var(--steel); font-size: 1.08rem; }
.ficha-que b, .ficha-usos b { color: var(--ink); }
.ficha-usos { margin: 16px 0 22px; color: var(--steel); font-size: .98rem; }
.ficha-grid .tabla-tec { margin-bottom: 26px; }
.ficha-grid .hero-actions { margin-top: 0; }
@media (max-width: 860px) { .ficha-grid { grid-template-columns: 1fr; gap: 26px; } }
/* Banda de la division */
.cta-band.cta-division {
  background: linear-gradient(120deg, #0B1F3F 0%, #16406E 100%);
}
.cta-band.cta-division p b { color: #fff; }

/* Chips de divisiones (hero de /productos/) */
.divisiones-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.divisiones-chips a {
  border: 1px solid rgba(255, 255, 255, .38); color: #fff;
  padding: 8px 18px; border-radius: 100px;
  font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  transition: all .18s ease;
}
.divisiones-chips a:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: translateY(-2px);
}

/* Familias de producto (catalogo VANDERTEK) */
.familia-card { display: flex; flex-direction: column; }
a.familia-card, a.familia-card:hover { color: inherit; }
a.familia-card p { color: var(--steel); }
.familia-foto {
  height: 150px; display: flex; align-items: center; justify-content: center;
  margin: -30px -30px 18px; background: #fff;
  border-bottom: 1px solid var(--imr-borde);
}
.familia-foto img { max-height: 122px; max-width: 70%; object-fit: contain; }
.familia-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.familia-head h3 { margin-bottom: 0; }
.familia-n {
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--steel-light); white-space: nowrap;
}
.familia-subs {
  font-family: var(--font-mono); font-size: .78rem; color: var(--steel);
  margin-top: 8px;
}
.familia-card .more { margin-top: auto; padding-top: 16px; }

/* Cifras */
.cifras {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  text-align: center;
}
.cifra .valor {
  font-family: var(--font-display); font-size: 2.8rem; font-weight: 800;
  color: var(--accent-deep); line-height: 1.1;
}
.cifra .etiqueta {
  margin-top: 8px; color: var(--steel); font-size: .88rem;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}

/* Camino recorrido: titulo izquierda, hitos derecha */
.camino-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .camino-grid { grid-template-columns: 1fr; gap: 32px; } }
/* En grids de 2 columnas (pagina /empresas/) el banner de cada division respira mas */
.grid-2 .empresa-media { height: 180px; }

/* Hitos del camino recorrido (/empresas/) */
.hitos { list-style: none; counter-reset: hito; max-width: 820px; }
.hitos li {
  counter-increment: hito; position: relative;
  padding: 0 0 34px 74px;
}
.hitos li::before {
  content: "0" counter(hito);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600;
  color: var(--accent);
}
.hitos li::after {
  content: ""; position: absolute; left: 22px; top: 44px; bottom: 8px;
  width: 2px; background: var(--imr-borde);
}
.hitos li:last-child::after { display: none; }
.hitos h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  margin-bottom: 6px; color: var(--ink);
}
.hitos p { color: var(--steel); }
.hitos b { color: var(--ink); }

/* ---------- Listas tecnicas ---------- */
.tech-list { list-style: none; }
.tech-list li {
  padding: 15px 0; border-bottom: 1px solid var(--imr-borde);
  display: flex; gap: 14px; align-items: baseline;
}
.tech-list li::before {
  content: "//"; font-family: var(--font-mono); color: var(--accent);
  font-size: .85rem; font-weight: 600;
}
.tech-list b { color: var(--ink); }
.tech-list span { color: var(--steel); }

/* Tabla tecnica */
table.tabla-tec {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  background: var(--surface); border: 1px solid var(--imr-borde);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.tabla-tec th, .tabla-tec td {
  text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--imr-borde);
}
.tabla-tec tr:last-child td { border-bottom: none; }
.tabla-tec th {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-deep); font-weight: 500;
  background: var(--bg-soft);
}
.tabla-tec td { color: var(--steel); }
.tabla-tec td:first-child { color: var(--ink); font-weight: 600; }

/* ---------- Breadcrumbs ---------- */
.crumbs {
  padding: 18px 0; font-size: .85rem; color: var(--steel-light);
  font-family: var(--font-mono);
}
.crumbs a { color: var(--steel); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 8px; color: var(--imr-borde); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--accent-deep) 0%, var(--accent) 100%);
  border-radius: var(--radius); padding: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap; position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; right: -60px; bottom: -100px;
  width: 300px; height: 300px; border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, .08); pointer-events: none;
}
/* Variante con foto de fondo (torno CNC) bajo un velo azul */
.cta-band.cta-foto {
  background:
    linear-gradient(100deg, rgba(7, 20, 41, .93) 0%, rgba(17, 65, 198, .72) 55%, rgba(44, 147, 239, .55) 100%),
    url('/assets/img/cta-torno.jpg') center / cover no-repeat;
}
.cta-band.cta-foto::after { border-color: rgba(255, 255, 255, .1); }
/* Banner proceso de ingenieria (diseno CAD -> plano -> manufactura).
   Color natural: solo una sombra neutra a la izquierda para legibilidad. */
.cta-band.cta-proceso {
  background:
    linear-gradient(100deg, rgba(12, 12, 14, .72) 0%, rgba(12, 12, 14, .34) 42%, rgba(12, 12, 14, 0) 68%),
    url('/assets/img/cta-proceso.jpg?v=2') center / cover no-repeat;
}
.cta-band.cta-proceso::after { border-color: rgba(255, 255, 255, .1); }
/* Banda final de /nosotros/: mesa de ingenieria de fondo */
.cta-band.cta-nosotros {
  background:
    linear-gradient(100deg, rgba(7, 20, 41, .93) 0%, rgba(17, 65, 198, .62) 55%, rgba(11, 31, 63, .4) 100%),
    url('/assets/img/banners/nosotros.jpg') center / cover no-repeat;
}
/* Banda final de /capacidades/: triptico China -> LATAM */
.cta-band.cta-china {
  background:
    linear-gradient(100deg, rgba(7, 20, 41, .92) 0%, rgba(17, 65, 198, .55) 55%, rgba(11, 31, 63, .3) 100%),
    url('/assets/img/hero-poster.jpg') center / cover no-repeat;
}
/* Boton WhatsApp verde oficial */
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover {
  background: #1EBE5D; color: #fff;
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 211, 102, .35);
}
.cta-band .btn-wa { position: relative; z-index: 1; }
.cta-band h2 {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800; color: #fff; max-width: 560px;
}
.cta-band p { color: rgba(255, 255, 255, .85); margin-top: 8px; }
.cta-band .btn-primary { background: #fff; color: var(--accent-deep); position: relative; z-index: 1; }
.cta-band .btn-primary:hover { background: var(--imr-azul-claro); color: var(--accent-deep); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }

/* ---------- Footer (navy, estilo Festo) ---------- */
.site-footer {
  background: var(--navy); color: #C7D3E2;
  padding: 64px 0 32px; font-size: .92rem;
}
/* 5 columnas: marca | Catalogo | Compania | Divisiones | Contacto (footer estandar del grupo) */
.footer-grid { display: grid; grid-template-columns: 1.35fr .85fr .9fr 1.25fr 1.15fr; gap: 32px; }
.site-footer h4 {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px; font-weight: 500;
}
.site-footer a { display: block; color: #C7D3E2; padding: 4px 0; }
.site-footer a:hover { color: #fff; }
.footer-about { color: #8FA3BC; margin-top: 12px; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: #8FA3BC; font-size: .82rem; font-family: var(--font-mono);
}

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(16, 21, 29, .25);
  transition: transform .18s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Animaciones de aparicion ---------- */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cifras { grid-template-columns: 1fr 1fr; gap: 32px; }
  .sectores-grid { grid-template-columns: 1fr 1fr; }
  .banda-cifras .cifras-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .banda-cifras .cifra-item:nth-child(3) { border-left: none; }
}
@media (max-width: 680px) {
  .nav {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--imr-borde);
    box-shadow: var(--shadow-hover);
    flex-direction: column; padding: 20px 24px; gap: 18px; align-items: flex-start;
  }
  .nav.open { display: flex; }
  .menu-toggle { display: block; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 56px; }
  .hero-dark { padding: 80px 0 68px; }
  .section { padding: 56px 0; }
  .cta-band { padding: 36px 24px; }
  .sectores-grid { grid-template-columns: 1fr; }
  .banda-cifras .cifras-grid { grid-template-columns: 1fr; gap: 28px; }
  .banda-cifras .cifra-item + .cifra-item { border-left: none; }
  .banda-cifras .paises { letter-spacing: .1em; }
}

/* ---------- Tablas anchas: scroll propio en movil ---------- */
.tabla-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-bottom: 26px; border-radius: var(--radius);
}
.tabla-wrap .tabla-tec { margin-bottom: 0; }

/* ---------- Preguntas frecuentes (acordeon) ---------- */
.faq { border-top: 1px solid var(--imr-borde); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--imr-borde); padding: 18px 2px; }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.06rem;
  color: var(--ink); transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-deep); }
.faq summary::after {
  content: "+"; flex-shrink: 0;
  font-family: var(--font-mono); font-weight: 600; font-size: 1.2rem;
  color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 12px; color: var(--steel); font-size: .98rem; }

/* Cards de pilar usadas fuera de <a> */
.pilar-foto { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

/* ---------- Tabla de variantes con miniatura (estilo catalogo) ---------- */
.tabla-titulo {
  font-family: var(--font-display); font-weight: 800; font-size: 1.18rem;
  color: var(--ink); margin: 34px 0 14px;
}
.tabla-titulo:first-child { margin-top: 0; }
.tabla-var td:first-child { width: 72px; padding: 8px 0 8px 14px; }
.tabla-var .mini {
  width: 56px; height: 56px; object-fit: contain; display: block;
  background: #fff; border: 1px solid var(--imr-borde); border-radius: 4px;
}
.tabla-var td { vertical-align: middle; padding: 10px 18px; }
.tabla-var td b { color: var(--ink); }
.tabla-var tr:hover td { background: var(--bg-soft); }
@media (max-width: 680px) {
  .tabla-var td:first-child { width: 56px; padding-left: 10px; }
  .tabla-var .mini { width: 44px; height: 44px; }
}

/* ---------- Bloque de variante: foto a la izquierda, tabla a la derecha ---------- */
.var-bloque {
  border: 1px solid var(--imr-borde); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  padding: 24px 26px 20px; margin-bottom: 26px;
}
.var-nombre {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--ink); line-height: 1.15; margin-bottom: 18px;
}
/* stretch: la caja de la foto toma la altura completa de la tabla
   (pedido de Carlos 2026-07-30). */
.var-cab { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: stretch; }
/* min-width:0 es lo que deja que la tabla ancha scrollee dentro de su
   columna en vez de estirar la pagina (los items de grid traen
   min-width:auto por defecto). */
/* min-width:0 deja que la tabla ancha scrollee dentro de su columna en vez
   de estirar la pagina. La columna en flex + tabla al 100% hace que la
   tabla llene el alto del bloque cuando tiene pocas filas, para que calce
   con la foto. */
.var-info { min-width: 0; display: flex; flex-direction: column; }
.var-info .tabla-wrap { flex: 1; }
/* Ojo: NO estirar la tabla al 100% del alto. Con una sola variante la fila se
   estiraba y el :hover pintaba un rectangulo en el vacio de abajo. */
.var-foto {
  border: 1px solid var(--imr-borde); border-radius: var(--radius);
  background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 14px; min-height: 200px;
}
.var-foto img { max-width: 100%; max-height: 260px; object-fit: contain; }
.var-seo { color: var(--steel); font-size: .96rem; margin-bottom: 20px; }
.var-seo b { color: var(--ink); }
.var-info .tabla-wrap { margin-bottom: 0; }
.var-bloque .tabla-tec { box-shadow: none; }

.tabla-medidas .sku,
.tabla-medidas .precio { font-family: var(--font-mono); font-size: .88rem; }
.tabla-medidas .sku { color: var(--steel); font-weight: 400; }
.tabla-medidas td.medida { color: var(--ink); font-weight: 600; }
.tabla-medidas td.medida .long {
  font-family: var(--font-mono); font-weight: 400; color: var(--steel);
}
.tabla-medidas td { padding: 12px 16px; vertical-align: middle; }
.tabla-medidas tr:hover td { background: var(--bg-soft); }
.disp { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; white-space: nowrap; }
.disp::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #22A45D; flex-shrink: 0;
}
.disp.pedido::before { background: #E0A32E; }
input.cant {
  width: 58px; padding: 7px 8px; text-align: center;
  font-family: var(--font-mono); font-size: .9rem; color: var(--ink);
  border: 1px solid var(--imr-borde); border-radius: var(--radius-sm);
  background: #fff;
}
input.cant:focus { outline: none; border-color: var(--accent); }
.enl-ficha {
  font-weight: 600; font-size: .88rem; color: var(--accent-deep);
  white-space: nowrap; border-bottom: 1px solid transparent;
}
.enl-ficha:hover { color: var(--accent); border-bottom-color: var(--accent); }
.btn-cotizar {
  border: 1px solid var(--imr-borde); background: #fff; color: var(--accent-deep);
  font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  padding: 8px 20px; border-radius: var(--radius-sm); cursor: pointer;
  white-space: nowrap; transition: all .16s ease;
}
.btn-cotizar:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: translateY(-1px);
}
.var-pie { font-size: .82rem; color: var(--steel-light); margin-top: 14px; }
@media (max-width: 860px) {
  .var-cab { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .var-foto { min-height: 0; }
  .var-foto { max-width: 220px; }
}
@media (max-width: 680px) {
  .var-bloque { padding: 20px 16px 16px; }
  .var-nombre { font-size: 1.3rem; }
}

/* ---------- Indice de variantes (anclas dentro de la seccion) ---------- */
.var-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.var-indice a {
  font-size: .82rem; font-weight: 600; color: var(--steel);
  border: 1px solid var(--imr-borde); border-radius: 100px;
  padding: 6px 14px; background: var(--surface);
  transition: all .16s ease;
}
.var-indice a:hover {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.var-bloque { scroll-margin-top: 130px; }

/* ---------- Dos materiales en la misma fila de la tabla ---------- */
/* Las dos fotos van UNA AL LADO DE LA OTRA dentro del mismo contenedor. */
.var-fotos {
  display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center;
  border: 1px solid var(--imr-borde); border-radius: var(--radius);
  background: #fff; padding: 16px; height: 100%; min-height: 150px;
}
.var-fotos .var-foto {
  border: none; background: none; padding: 0; min-height: 0;
  flex: 1; flex-direction: column; gap: 8px; justify-content: center;
}
.var-foto img { max-width: 100%; max-height: 240px; object-fit: contain; }
.var-foto figcaption {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--steel); text-align: center;
}

/* Celdas con una linea por material, alineadas entre columnas */
.tabla-medidas .lin {
  display: flex; align-items: center; min-height: 34px;
}
.tabla-medidas .lin + .lin {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--imr-borde);
}
.tabla-medidas .sin { color: var(--steel-light); }
.tabla-medidas .cod { font-family: var(--font-mono); font-size: .84rem; color: var(--steel); }
.mat {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600;
  padding: 3px 8px; border-radius: 100px; margin-right: 9px;
  flex-shrink: 0; min-width: 58px; text-align: center;
}
.mat-0 { background: #E9EDF1; color: #46525F; }
.mat-1 { background: var(--imr-azul-claro); color: var(--accent-deep); }
.tabla-medidas td.ficha { white-space: nowrap; }
@media (max-width: 860px) {
  /* En movil vuelven a quedar lado a lado: ahi la altura es lo escaso. */
  .var-fotos { flex-direction: row; height: auto; }
  .var-fotos .var-foto { max-width: 180px; }
}

/* La tabla de medidas lleva 7 columnas y celdas de dos lineas: se compacta
   para que quepa completa al lado de las fotos en pantalla de escritorio. */
.tabla-medidas th { letter-spacing: .04em; padding: 12px 12px; }
.tabla-medidas td { padding: 12px 12px; }
.tabla-medidas .mat { min-width: 52px; margin-right: 7px; padding: 3px 6px; }
.btn-cotizar { padding: 7px 16px; }

/* ---------- Miniatura de la variante dentro de la celda de medida ---------- */
.tabla-medidas td.medida.con-foto {
  display: flex; align-items: center; gap: 12px;
}
.tabla-medidas td.medida.con-foto .mini { flex-shrink: 0; }
.tabla-medidas td.medida.con-foto b { font-weight: 600; }
@media (max-width: 680px) {
  .tabla-medidas td.medida.con-foto .mini { width: 40px; height: 40px; }
}

/* ---------- Ficha tecnica en pantalla (no se descarga nada) ---------- */
.ficha-modal { position: fixed; inset: 0; z-index: 200; display: none; }
.ficha-modal.abierto { display: block; }
html.con-ficha { overflow: hidden; }
.ficha-fondo { position: absolute; inset: 0; background: rgba(11, 31, 63, .62); }
.ficha-caja {
  position: relative; margin: 3vh auto; max-width: 900px; width: calc(100% - 32px);
  max-height: 94vh; background: #fff; border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(11, 31, 63, .35);
  display: flex; flex-direction: column; overflow: hidden;
}
.ficha-barra {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--imr-borde);
  background: var(--bg-soft); flex-shrink: 0;
}
.ficha-btn {
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  padding: 8px 18px; border-radius: var(--radius-sm); cursor: pointer;
}
.ficha-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.ficha-cerrar {
  border: none; background: none; color: var(--steel); cursor: pointer;
  font-size: 1.7rem; line-height: 1; padding: 0 6px;
}
.ficha-cerrar:hover { color: var(--ink); }
.ficha-scroll { overflow-y: auto; padding: 30px 34px 34px; }

.ft-cab { display: flex; align-items: center; gap: 20px; border-bottom: 3px solid var(--accent); padding-bottom: 16px; }
.ft-cab img { height: 42px; width: auto; }
.ft-cab h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
  color: var(--ink); line-height: 1.2;
}
.ft-ref { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); margin-top: 4px; }
.ft-grid { display: grid; grid-template-columns: 220px 1fr; gap: 26px; margin: 24px 0; align-items: start; }
.ft-foto { border: 1px solid var(--imr-borde); border-radius: var(--radius); background: #fff; padding: 14px; text-align: center; }
.ft-foto img { max-width: 100%; height: auto; }
.ft-texto h3, .ficha-doc > h3 {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-deep); font-weight: 600;
  margin: 16px 0 5px;
}
.ft-texto h3:first-child { margin-top: 0; }
.ft-texto p { color: var(--steel); font-size: .95rem; }
.ft-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--imr-borde); border: 1px solid var(--imr-borde); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; }
.ft-datos div { background: #fff; padding: 12px 14px; }
.ft-datos span { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.ft-datos b { font-family: var(--font-mono); font-size: 1.05rem; color: var(--ink); }
.ft-comp { list-style: none; columns: 2; column-gap: 30px; margin-bottom: 20px; }
.ft-comp li { padding: 6px 0; border-bottom: 1px solid var(--imr-borde); color: var(--steel); font-size: .92rem; break-inside: avoid; }
.ft-pie { font-size: .76rem; color: var(--steel-light); border-top: 1px solid var(--imr-borde); padding-top: 12px; }
@media (max-width: 680px) {
  .ficha-caja { margin: 0; width: 100%; max-height: 100vh; border-radius: 0; }
  .ficha-scroll { padding: 20px 18px 26px; }
  .ft-grid { grid-template-columns: 1fr; gap: 16px; }
  .ft-foto { max-width: 220px; }
  .ft-comp { columns: 1; }
}

/* Al imprimir sale SOLO la ficha, sin la barra ni el resto del sitio. */
@media print {
  body > *:not(.ficha-modal) { display: none !important; }
  .ficha-modal { position: static; display: block; }
  .ficha-fondo, .ficha-barra { display: none !important; }
  .ficha-caja { margin: 0; max-width: none; width: auto; max-height: none; box-shadow: none; }
  .ficha-scroll { overflow: visible; padding: 0; }
  .ft-comp { columns: 2; }
}

/* ---------- Contacto tambien en el menu (ademas del boton de la fila 1) --- */
.nav a.nav-contacto { color: var(--accent-deep); }
.nav a.nav-contacto::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 8px; flex-shrink: 0;
}
.nav a.nav-contacto::after { transform: scaleX(1); background: var(--imr-azul-claro); }
.nav a.nav-contacto:hover::after,
.nav a.nav-contacto.active::after { background: var(--accent); }

/* ---------- Sedes con bandera ---------- */
.sede-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sede-cab h3 { margin-bottom: 0; }
.sede-cab .tag { margin-bottom: 6px; }
.bandera {
  width: 34px; height: 23px; flex-shrink: 0; border-radius: 2px;
  border: 1px solid var(--imr-borde); object-fit: cover;
  box-shadow: 0 1px 3px rgba(11, 31, 63, .16);
}
.sede-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .95rem; font-weight: 600;
  color: var(--accent-deep); margin-top: 4px;
}
.sede-tel::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0;
  background: var(--accent);
  -webkit-mask: var(--ico-tel) center / contain no-repeat;
  mask: var(--ico-tel) center / contain no-repeat;
}
.sede-tel:hover { color: var(--accent); }
.sede .more { display: block; margin-top: 14px; }
:root {
  --ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

/* Plano dimensional dentro de la ficha */
.ft-plano { margin: 6px 0 20px; }
.ft-plano img {
  width: 100%; height: auto; border: 1px solid var(--imr-borde);
  border-radius: var(--radius); background: #fff; padding: 10px;
}
.ft-plano figcaption {
  font-size: .76rem; color: var(--steel-light); margin-top: 8px; text-align: center;
}

/* ---------- Banda de sedes en el footer ---------- */
.footer-sedes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 28px 0 6px; margin-top: 34px;
}
.fsede { display: flex; gap: 12px; align-items: flex-start; }
.fsede > img {
  width: 26px; height: 17px; flex-shrink: 0; margin-top: 4px;
  border-radius: 2px; border: 1px solid rgba(255, 255, 255, .25);
}
.fsede b {
  display: block; color: #fff; font-size: .95rem; font-weight: 800;
  font-family: var(--font-display); letter-spacing: .01em; line-height: 1.25;
}
.fsede em {
  display: block; font-style: normal; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--imr-azul); margin-top: 3px;
}
.fsede span {
  display: block; color: rgba(255, 255, 255, .66); font-size: .8rem;
  line-height: 1.5; margin-top: 7px;
}
.fsede a {
  display: inline-block; margin-top: 7px; color: #fff;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
}
.fsede a:hover { color: var(--imr-azul); }
@media (max-width: 1000px) { .footer-sedes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .footer-sedes { grid-template-columns: 1fr; gap: 20px; } }

/* Rol de cada sede en el footer */
.fsede i.frol {
  display: block; font-style: normal; color: rgba(255, 255, 255, .88);
  font-size: .82rem; line-height: 1.45; margin-top: 6px;
}
.fsede span { margin-top: 6px; font-size: .78rem; }

/* ---------- Matriz de niples: diametro x largo, por material ---------- */
.mat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.mat-tab {
  border: 1px solid var(--imr-borde); background: var(--surface);
  color: var(--steel); font-family: var(--font-body); font-weight: 700;
  font-size: .9rem; padding: 10px 18px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all .16s ease; text-align: left; line-height: 1.2;
}
.mat-tab span {
  display: block; font-family: var(--font-mono); font-size: .66rem;
  font-weight: 400; color: var(--steel-light); margin-top: 3px;
}
.mat-tab:hover { border-color: var(--accent); color: var(--accent-deep); }
.mat-tab.activo {
  background: var(--accent-deep); border-color: var(--accent-deep); color: #fff;
}
.mat-tab.activo span { color: rgba(255, 255, 255, .72); }
.mat-panel { display: none; }
.mat-panel.activo { display: block; }
.mat-desc { color: var(--steel); font-size: .95rem; margin-bottom: 16px; }
.mat-desc b { color: var(--ink); font-family: var(--font-mono); }

table.tabla-matriz { font-size: .84rem; }
.tabla-matriz th, .tabla-matriz td {
  text-align: center; padding: 0; border-bottom: 1px solid var(--imr-borde);
  border-right: 1px solid var(--imr-borde);
}
.tabla-matriz th {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em;
  text-transform: none; color: var(--accent-deep); background: var(--bg-soft);
  padding: 9px 6px; white-space: nowrap;
}
.tabla-matriz th.esq { text-align: left; padding-left: 14px; }
.tabla-matriz th.diam {
  text-align: left; padding-left: 14px; color: var(--ink); font-weight: 600;
  position: sticky; left: 0; z-index: 1;
}
.tabla-matriz td.nd { color: var(--imr-borde); background: #FCFDFE; }
.celda-precio {
  width: 100%; border: none; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: .82rem; color: var(--steel);
  padding: 10px 8px; transition: all .12s ease; white-space: nowrap;
}
.celda-precio::before { content: "$ "; color: var(--steel-light); }
.celda-precio:hover {
  background: var(--accent); color: #fff; font-weight: 600;
}
.celda-precio:hover::before { color: rgba(255, 255, 255, .7); }
@media (max-width: 680px) {
  .mat-tab { flex: 1 1 46%; font-size: .82rem; padding: 9px 12px; }
  table.tabla-matriz { font-size: .78rem; }
  .celda-precio { font-size: .74rem; padding: 8px 5px; }
}

/* ---------- /catalogo/: catalogo unificado del grupo ---------- */
.cata-controles { max-width: 900px; margin-bottom: 26px; }
.cata-controles .bus-input { font-size: 1.05rem; padding: 14px 18px; }
.cata-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cata-chips .chip {
  border: 1px solid var(--imr-borde); background: #fff; color: var(--ink);
  border-radius: 100px; padding: 7px 14px; font-weight: 600; font-size: .88rem;
  cursor: pointer; transition: all .15s ease;
}
.cata-chips .chip small { color: var(--steel-light); font-weight: 500; }
.cata-chips .chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.cata-chips .chip.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
.cata-chips .chip.activo small { color: rgba(255, 255, 255, .8); }
.cata-conteo { margin-top: 12px; font-family: var(--font-mono); font-size: .82rem; color: var(--steel); }
.cata-grid {
  /* tarjetas compactas (Carlos 2026-07-31): 6 por fila en escritorio */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 12px;
}
.cata-card {
  background: #fff; border: 1px solid var(--imr-borde); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cata-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.cata-img {
  aspect-ratio: 1/1; background: #fff; border-bottom: 1px solid var(--imr-borde);
  display: grid; place-items: center; position: relative;
}
.cata-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.cata-img.sin-img::after {
  content: attr(data-inicial); font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 800; color: var(--imr-borde);
}
.cata-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.cata-nombre { font-weight: 700; font-size: .84rem; line-height: 1.28; }
.cata-nombre mark { background: #FFF3B0; padding: 0 1px; border-radius: 2px; }
.cata-desc {
  font-size: .74rem; color: var(--steel); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cata-pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cata-cat { font-size: .74rem; color: var(--steel-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cata-div {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent-deep);
  white-space: nowrap; flex-shrink: 0;
}