/* ============================================================================
   Cebrián Hnos. · Sistema de diseño
   ----------------------------------------------------------------------------
   Paleta clara sobre papel, con bandas de ancho completo que alternan para que
   se distinga una sección de otra al scrollear. Estructura oscura (header,
   hero, footer) para que los logos metálicos se lean tal cual.

   Tipografía: Mozilla Text en títulos, Poppins en textos.
   Radios sutiles: 3px casi en todo, nada de esquinas muy redondeadas.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------ Acentos */
  --accent: #38455e;          /* sitio madre: azul acero profundo */
  --accent-d: #232e42;
  --ind: #b81d29;             /* rojo Cebrián Industrial */
  --ind-d: #8c141d;
  --auto: #1f5fa9;            /* azul Cebrián Automotriz */
  --auto-d: #164679;

  --brand: var(--accent);
  --brand-d: var(--accent-d);
  --brand-soft: rgba(56, 69, 94, .08);   /* fondo tenue del acento */
  --brand-line: rgba(56, 69, 94, .22);

  /* ------------------------------------------- Neutros (paleta clara) */
  --paper: #f2f4f7;           /* banda base, gris papel */
  --paper-2: #e8ebf0;         /* banda un punto más marcada */
  --white: #ffffff;
  --ink: #161c26;             /* títulos */
  --ink-2: #3d4756;           /* cuerpo de texto */
  --muted: #5f6875;           /* texto secundario (contraste AA sobre las 3 bandas claras) */
  --line: #dde2e9;            /* bordes */
  --line-2: #c6cdd8;

  /* ------------------------------------------------- Neutros oscuros */
  --dark: #14181f;            /* bandas oscuras */
  --dark-2: #1c222c;
  --dark-line: #2c3440;
  --on-dark: #f1f4f8;
  --on-dark-2: #b8c1cf;
  --on-dark-muted: #8794a6;

  --wa: #25d366;
  --wa-d: #1da851;

  /* Radios deliberadamente chicos */
  --r: 3px;
  --r-lg: 4px;

  --shadow: 0 1px 2px rgba(22, 28, 38, .06);
  --shadow-md: 0 4px 14px rgba(22, 28, 38, .09);
  --shadow-lg: 0 12px 32px rgba(22, 28, 38, .14);
  --maxw: 1180px;
  --header-h: 76px;

  --font-title: "Mozilla Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html[data-branch="industrial"] {
  --brand: var(--ind); --brand-d: var(--ind-d);
  --brand-soft: rgba(184, 29, 41, .08); --brand-line: rgba(184, 29, 41, .26);
}
html[data-branch="automotriz"] {
  --brand: var(--auto); --brand-d: var(--auto-d);
  --brand-soft: rgba(31, 95, 169, .08); --brand-line: rgba(31, 95, 169, .26);
}

/* --------------------------------------------------------------- Reset base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-2);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--font-title); color: var(--ink); font-weight: 700; line-height: 1.18; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* Los logos van envueltos en <picture> para servir WebP con PNG de reserva.
   display:contents hace que el <img> siga siendo hijo directo del contenedor,
   así las reglas de layout no cambian. */
picture { display: contents; }
ul { list-style: none; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }

/* ============================================================================
   BANDAS DE SECCIÓN
   Cada <section> lleva una de estas clases. El fondo es de ancho completo, así
   se ve claramente dónde empieza y termina cada bloque al scrollear.
   ========================================================================== */
.section { padding: 76px 0; position: relative; }
.section-tight { padding: 48px 0; position: relative; }

.band-paper  { background: var(--paper); }
.band-white  { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-tint   { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-dark   { background: var(--dark); color: var(--on-dark-2); }

/* Dentro de una banda oscura se invierten los colores de texto */
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--on-dark); }
.band-dark .sub-sec, .band-dark p { color: var(--on-dark-2); }
.band-dark .eyebrow { color: #fff; opacity: .72; }

/* Filete de color de rama arriba de cada banda clara: marca el corte */
.band-white::before, .band-tint::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 76px; height: 3px;
  background: var(--brand);
}
.band-white.no-rule::before, .band-tint.no-rule::before { display: none; }

/* ------------------------------------------------------------------ Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 14.5px; line-height: 1; letter-spacing: .2px;
  padding: 14px 24px; border-radius: var(--r); border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .18s ease;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-d); box-shadow: var(--shadow-md); }

/* Botón claro para usar sobre bandas oscuras */
.btn-metal { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-metal:hover { background: #e6eaf0; border-color: #e6eaf0; }

.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand-line); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-soft); }
.band-dark .btn-outline { color: var(--on-dark); border-color: rgba(255,255,255,.28); }
.band-dark .btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

.btn-ghost { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.3); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); }

.btn-wa { background: var(--wa); color: #06331b; }
.btn-wa:hover { background: var(--wa-d); color: #fff; }
.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn-block { width: 100%; }

/* -------------------------------------------------------------------- Badge */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--r);
  background: rgba(255,255,255,.07); color: var(--on-dark-2);
  border: 1px solid rgba(255,255,255,.15);
}
.badge::before { content: ""; width: 5px; height: 5px; background: var(--brand); }
html[data-branch="corp"] .badge::before { background: #8ea0c4; }

/* ============================================================== Aviso demo */
.notice {
  background: #fdf6e3; border-bottom: 1px solid #e8dcbb; color: #7a6420;
  font-size: 12.5px; text-align: center; padding: 9px 24px;
}

/* ================================================================== Header */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--dark);
  border-bottom: 3px solid var(--brand);
}
.header-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  height: var(--header-h); display: flex; align-items: center; gap: 20px;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 40px; width: auto; transition: opacity .18s ease; }
.logo:hover img { opacity: .82; }
.logo.logo-hnos img { height: 42px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 0; }
.nav a {
  font-size: 13.5px; font-weight: 500; color: var(--on-dark-2);
  padding: 11px 14px; white-space: nowrap; position: relative;
  transition: color .15s;
}
.nav a:hover { color: #fff; }
.nav a.active { color: #fff; font-weight: 600; }
.nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 3px; background: var(--brand);
}
.nav a svg { width: 15px; height: 15px; flex-shrink: 0; vertical-align: -2px; }
.nav a.nav-back { color: var(--on-dark-muted); display: inline-flex; align-items: center; gap: 6px; padding-left: 0; }
.nav a.nav-back:hover { color: #fff; }
.wa-nav { display: none; }

.header-cta { display: flex; align-items: center; margin-left: 16px; }
.wa-header {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--wa); border: 1px solid rgba(37,211,102,.4);
  font-weight: 600; font-size: 13px; padding: 10px 15px; border-radius: var(--r);
  transition: background .16s, color .16s, border-color .16s;
}
.wa-header:hover { background: var(--wa); color: #06331b; border-color: var(--wa); }
/* Variante teléfono, mientras no haya WhatsApp cargado */
.wa-header.wa-tel { color: var(--on-dark); border-color: rgba(255,255,255,.26); font-variant-numeric: tabular-nums; }
.wa-header.wa-tel:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); }
.wa-header svg { width: 16px; height: 16px; flex-shrink: 0; }

.burger {
  display: none; margin-left: auto; background: transparent; border: 0; cursor: pointer;
  width: 42px; height: 42px; color: #fff;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { width: 22px; height: 2px; background: #fff; transition: .2s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================= Footer */
.footer { background: var(--dark); color: var(--on-dark-muted); padding: 60px 0 26px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 38px; }
.footer h4 {
  font-family: var(--font-body); color: #fff; font-size: 12px; margin-bottom: 18px;
  letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600;
  padding-bottom: 10px; border-bottom: 1px solid var(--dark-line);
}
.footer .f-logo { display: block; margin-bottom: 18px; }
.footer .f-logo img { height: 46px; width: auto; }
.footer p { margin-bottom: 8px; line-height: 1.7; max-width: 340px; color: var(--on-dark-muted); }
.footer li { margin-bottom: 11px; }
/* Las cinco líneas en dos columnas: separarlas con un punto hacía que el
   separador quedara colgando al principio de la línea siguiente. */
.footer .f-tels { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 20px; }
.footer .f-tels a { font-variant-numeric: tabular-nums; white-space: nowrap; }
.footer .f-horario { color: #7c8797; }
.footer a { transition: color .15s; }
.footer a:hover { color: #fff; }
.footer .f-bottom {
  border-top: 1px solid var(--dark-line); margin-top: 44px; padding-top: 22px;
  font-size: 12.5px; color: #5f6a7b; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.f-ramas { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.f-ramas img { height: 26px; width: auto; opacity: .7; transition: opacity .18s; }
.f-ramas a:hover img { opacity: 1; }

/* ================================================================ Hero */
.hero {
  background: var(--dark); color: var(--on-dark);
  padding: 88px 0 78px; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--dark-line);
}
/* Trama técnica diagonal, muy tenue */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 12px);
}
/* Bloque de color de la rama en el borde derecho */
.hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, var(--brand) 260%);
  opacity: .5;
}
html[data-branch="corp"] .hero::after { opacity: .34; }
.hero .wrap { position: relative; z-index: 3; }
.hero h1 {
  font-size: 48px; line-height: 1.12; max-width: 840px; margin: 22px 0 18px;
  color: #fff; letter-spacing: -.4px;
}
.hero .lead { font-size: 17px; color: var(--on-dark-2); max-width: 640px; margin-bottom: 32px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-logo { margin-bottom: 10px; }
.hero-logo img { height: 76px; width: auto; }
.hero-slim { padding: 60px 0 54px; }
.hero-slim h1 { font-size: 36px; }

/* ------------------------------------------------- Hero con foto de portada
   Solo las tres home. El <picture> cubre toda la sección y encima va un velo
   oscuro que garantiza el contraste del texto sin importar qué caiga debajo.
   El velo es más fuerte de la izquierda, que es donde está el texto.         */
.hero-foto { padding: 104px 0 96px; min-height: 480px; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-bg img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
.hero-foto::before {
  z-index: 1; opacity: 1;
  background-image:
    linear-gradient(90deg, rgba(14,18,24,.94) 0%, rgba(14,18,24,.88) 32%, rgba(14,18,24,.66) 62%, rgba(14,18,24,.5) 100%),
    linear-gradient(180deg, rgba(14,18,24,.5) 0%, rgba(14,18,24,.12) 45%, rgba(14,18,24,.72) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 12px);
}
/* Tinte de la rama, sutil, para que la foto no se despegue de la paleta */
.hero-foto::after {
  z-index: 2; width: 46%; opacity: .34;
  background: linear-gradient(105deg, transparent 0%, var(--brand) 230%);
}
html[data-branch="corp"] .hero-foto::after { opacity: .26; }
.hero-foto > .wrap { width: 100%; }
/* El logo es plateado y puede caer sobre una zona clara de la foto (la
   camioneta blanca, por ejemplo): la sombra lo despega siempre. */
.hero-foto .hero-logo img { filter: drop-shadow(0 3px 16px rgba(0,0,0,.8)); }

/* H1 solo para lectores de pantalla y SEO cuando el título visible es el logo */
.sr-h1 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================== Secciones */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--brand); margin-bottom: 12px;
}
.h-sec { font-size: 33px; letter-spacing: -.3px; }
.sub-sec { color: var(--muted); font-size: 16px; margin-top: 12px; max-width: 720px; }
.sec-head { margin-bottom: 38px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head.center .sub-sec { margin-left: auto; margin-right: auto; }

.prose p { font-size: 16.5px; color: var(--ink-2); margin-bottom: 18px; max-width: 800px; }
.prose-center { text-align: center; max-width: 880px; margin: 0 auto; }
.band-dark .prose p { color: var(--on-dark-2); }

/* ============================================================= Tarjetas */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .18s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); }

.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); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* Tarjeta grande de rama (home corporativo) */
.branch-card {
  border-radius: var(--r); padding: 36px 32px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; min-height: 320px;
  background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--bc);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.branch-card.ind { --bc: var(--ind); }
.branch-card.auto { --bc: var(--auto); }
.branch-card:hover { box-shadow: var(--shadow-lg); }
.branch-card .bc-logo { margin-bottom: 22px; }
.branch-card .bc-logo img { height: 44px; width: auto; }
.branch-card h3 { font-size: 22px; margin-bottom: 12px; }
.branch-card p { color: var(--muted); font-size: 15.5px; margin-bottom: 24px; }
.branch-card .bc-link {
  margin-top: auto; font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 9px; color: var(--bc);
}
.branch-card .bc-link svg { width: 17px; height: 17px; transition: transform .18s; }
.branch-card:hover .bc-link svg { transform: translateX(4px); }
.branch-card .bc-tag {
  align-self: flex-start; font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  background: var(--bc); color: #fff; padding: 5px 11px; margin-bottom: 20px;
}

/* Franja de estadísticas */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat { padding: 8px 24px; text-align: center; border-left: 1px solid var(--dark-line); }
.stat:first-child { border-left: 0; }
.stat .big { font-family: var(--font-title); font-size: 42px; font-weight: 700; line-height: 1; color: #fff; }
.stat .lbl { font-size: 13px; color: var(--on-dark-muted); margin-top: 10px; }

/* Tarjeta de rubro */
.rubro {
  display: flex; align-items: center; gap: 15px; padding: 18px 20px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  font-weight: 500; font-size: 15px; color: var(--ink);
  border-left: 3px solid transparent;
  transition: border-color .18s ease, box-shadow .2s ease;
}
.rubro:hover { border-left-color: var(--brand); box-shadow: var(--shadow-md); }
.rubro .ic {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); background: var(--brand-soft);
}
.rubro .ic svg { width: 21px; height: 21px; }

/* Tarjeta de aplicación / sector */
.app-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 22px; border-top: 3px solid var(--brand);
  transition: box-shadow .2s ease;
}
.app-card:hover { box-shadow: var(--shadow-md); }
.app-card .ic {
  width: 46px; height: 46px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); background: var(--brand-soft); margin-bottom: 16px;
}
.app-card .ic svg { width: 24px; height: 24px; }
.app-card h4 { font-size: 16.5px; }

/* Tarjeta de servicio (asesoramiento) */
.svc {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px;
  transition: box-shadow .2s ease;
}
.svc:hover { box-shadow: var(--shadow-md); }
.svc .ic {
  width: 46px; height: 46px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--brand); margin-bottom: 18px;
}
.svc .ic svg { width: 23px; height: 23px; }
.svc h4 { font-size: 17.5px; margin-bottom: 9px; }
.svc p { color: var(--muted); font-size: 14.5px; }

/* ================================================================ Marcas */
/* Grilla tipo tabla: las líneas las dibuja cada celda, así la última fila
   incompleta no deja bloques grises sueltos. */
.brand-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0;
  background: var(--white);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.brand-box {
  background: var(--white); border-radius: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  height: 104px; padding: 18px 20px;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.brand-box:hover { background: #fbfcfd; }
.brand-box img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
/* Marca sin logo todavía: se muestra el nombre, con el mismo aire que un logo */
.brand-txt {
  font-family: var(--font-title); font-weight: 700; font-size: 19px;
  letter-spacing: .5px; color: #2b3242; text-align: center; line-height: 1.2;
}
.marquee-item .brand-txt { font-size: 17px; }

/* Bloque por empresa madre dentro de la página Marcas */
.casa { margin-bottom: 34px; }
.casa:last-child { margin-bottom: 0; }
.casa-tit {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
}

/* ----------------------------------------------------- Carrusel de marcas */
.marquee {
  position: relative; overflow: hidden;
  background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px 0;
  cursor: grab; user-select: none; -webkit-user-select: none;
  /* Sin esto el navegador se queda con el gesto y manda pointercancel apenas
     el dedo se mueve, así que el arrastre nunca llegaba al JS. Con pan-y el
     scroll vertical de la página lo sigue manejando el navegador y el
     movimiento horizontal queda para nosotros. */
  touch-action: pan-y;
}
.marquee.dragging { cursor: grabbing; }
/* Degradado en los bordes para que las piezas entren y salgan sin cortarse */
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--white), rgba(255,255,255,0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--white), rgba(255,255,255,0)); }
.marquee-track { display: flex; align-items: center; width: max-content; will-change: transform; }
.marquee-item {
  flex: 0 0 auto; width: 168px; height: 66px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 22px;
}
.marquee-item img {
  max-height: 100%; max-width: 100%; width: auto; object-fit: contain;
  pointer-events: none; -webkit-user-drag: none;
}
.marquee-hint {
  text-align: center; font-size: 12px; color: var(--muted); margin-top: 18px;
  letter-spacing: .3px;
}
/* La sección del carrusel respira distinto: la tira ya ocupa alto propio */
.section-marquee { padding-bottom: 46px; }
.section-marquee .sec-head { margin-bottom: 32px; }

/* ======================================================= Producto (ficha) */
.prod { display: flex; flex-direction: column; padding: 22px; height: 100%; }
.prod .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.prod .marca {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; color: #fff;
  background: var(--brand); padding: 4px 10px; border-radius: 2px;
}
.prod .codigo { font-family: Consolas, Menlo, monospace; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.prod h4 { font-size: 17px; margin-bottom: 7px; }
.prod .desc { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.prod .rubro-tag { font-size: 11.5px; color: var(--brand); font-weight: 500; margin-bottom: 18px; }
.prod .acciones { display: flex; gap: 10px; margin-top: auto; }
.prod .acciones .btn { flex: 1; }

/* ============================================================================
   BUSCADOR DE CÓDIGOS
   ========================================================================== */
.buscador { position: relative; max-width: 720px; }
.busc-label {
  display: block; font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--ink-2); margin-bottom: 10px;
}
.busc-box { position: relative; display: flex; align-items: center; }
.busc-box > svg {
  position: absolute; left: 16px; width: 20px; height: 20px; color: var(--muted); pointer-events: none;
}
.busc-box input {
  width: 100%; padding: 18px 46px 18px 48px;
  border: 1.5px solid var(--line-2); border-radius: var(--r);
  font-family: var(--font-body); font-size: 17px; color: var(--ink); background: var(--white);
  letter-spacing: .3px;
}
.busc-box input::placeholder { color: #98a2b1; letter-spacing: 0; }
.busc-box input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.busc-box input::-webkit-search-cancel-button { display: none; }
.busc-limpiar {
  position: absolute; right: 12px; width: 28px; height: 28px; border: 0; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 22px; line-height: 1; border-radius: var(--r);
}
.busc-limpiar:hover { color: var(--ink); background: var(--paper); }
.busc-ayuda { font-size: 12.5px; color: var(--muted); margin-top: 9px; }

/* Lista de sugerencias */
.busc-lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% - 22px);
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-lg); max-height: 336px; overflow-y: auto; padding: 4px 0;
}
.busc-op {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 16px; cursor: pointer; font-size: 15px;
}
.busc-op:hover, .busc-op.activo { background: var(--brand-soft); }
.busc-cod { font-family: Consolas, Menlo, monospace; color: var(--ink); letter-spacing: .3px; }
.busc-cod b { color: var(--brand); font-weight: 700; }
.busc-marcas { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.busc-vacio { padding: 16px; font-size: 14.5px; color: var(--muted); }
.busc-vacio b { font-family: Consolas, Menlo, monospace; color: var(--ink); }

/* Resultado */
.busc-resultado:empty { display: none; }
.busc-resultado { margin-top: 38px; }
.res-cab {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 2px solid var(--brand); margin-bottom: 26px;
}
.res-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.res-cod { font-family: Consolas, Menlo, monospace; font-size: 27px; color: var(--ink); letter-spacing: .5px; }
.res-resumen { font-size: 15px; color: var(--ink-2); }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.res-marca {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 18px; text-align: center; display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow .2s ease;
}
.res-marca:hover { box-shadow: var(--shadow-md); }
.res-logo {
  height: 52px; display: flex; align-items: center; justify-content: center;
}
.res-logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.res-nombre { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); }
.res-pie { margin-top: 24px; font-size: 14px; color: var(--muted); }
.res-pie a { color: var(--brand); font-weight: 500; }
.res-vacio {
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--r); padding: 30px 32px;
}
.res-vacio h3 { font-size: 20px; margin-bottom: 8px; }
.res-vacio h3 span { font-family: Consolas, Menlo, monospace; color: var(--brand); }
.res-vacio p { color: var(--muted); font-size: 15px; margin-bottom: 20px; max-width: 560px; }

/* Cómo funciona, mientras no hay búsqueda hecha */
.busc-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.busc-pasos[hidden] { display: none; }
.paso { display: flex; gap: 14px; align-items: flex-start; }
.paso-n {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.paso p { font-size: 14.5px; color: var(--muted); }

/* ============================================================================
   SLIDER DE FOTOS DE STOCK
   ========================================================================== */
.slider { position: relative; }
.slider-pista {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  /* El scroll nativo ya resuelve el gesto del dedo */
  -webkit-overflow-scrolling: touch;
}
.slider-pista::-webkit-scrollbar { display: none; }
/* Con mouse se puede arrastrar; en táctil scrollea solo */
@media (hover: hover) { .slider-pista { cursor: grab; } }
.slider-pista.arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.slide { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
.slide-marco {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
}
.slide-marco img { width: 100%; height: 100%; object-fit: cover; }
/* El cartel del placeholder solo se ve si no hay foto */
.slide-ph { display: none; }
.slide-marco.vacio .slide-ph {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: #98a2b1;
}
.slide-marco.vacio .slide-ph small { font-size: 11.5px; font-weight: 400; letter-spacing: .5px; }
.slide-marco.vacio {
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,0,.02) 10px 20px);
}
.slider-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--white); border: 1px solid var(--line-2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: background .16s, border-color .16s;
}
.slider-flecha:hover { background: var(--paper); border-color: var(--brand); color: var(--brand); }
.slider-flecha svg { width: 18px; height: 18px; }
.slider-flecha.izq { left: -14px; }
.slider-flecha.der { right: -14px; }
.slider-puntos { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.slider-punto {
  width: 26px; height: 4px; border: 0; padding: 0; cursor: pointer; border-radius: 2px;
  background: var(--line-2); transition: background .18s;
}
.slider-punto.activo { background: var(--brand); }

/* ==================================================== Banda CTA / franja */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--dark); color: #fff;
  border-radius: var(--r); padding: 50px 44px; text-align: center;
  border-left: 4px solid var(--brand);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 12px);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h3 { font-size: 27px; margin-bottom: 12px; color: #fff; }
.cta-band p { color: var(--on-dark-2); max-width: 620px; margin: 0 auto 26px; font-size: 15.5px; }

.cta-soft {
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--r); padding: 34px 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.cta-soft .txt h3 { font-size: 22px; margin-bottom: 8px; }
.cta-soft .txt p { color: var(--muted); font-size: 15px; max-width: 560px; }

/* ============================================================= Timeline */
.timeline { position: relative; padding-left: 36px; margin-top: 12px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -34px; top: 7px; width: 15px; height: 15px;
  background: var(--brand); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--line-2);
}
.tl-item .tl-key { font-family: var(--font-title); font-weight: 700; color: var(--brand); font-size: 17px; margin-bottom: 5px; }
.tl-item p { color: var(--ink-2); font-size: 15px; }

/* ============================================================== Formulario */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 34px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r);
  font-size: 14.5px; font-family: inherit; color: var(--ink); background: var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
.field textarea { min-height: 140px; resize: vertical; }
.form-ok {
  background: #eaf7ef; border: 1px solid #b6ddc5; color: #1e7742;
  border-radius: var(--r); padding: 15px 16px; font-size: 14.5px; font-weight: 500; margin-top: 6px;
}
.form-error {
  background: #fdeceb; border: 1px solid #f1c3bf; color: #9a2b20;
  border-radius: var(--r); padding: 15px 16px; font-size: 14.5px; font-weight: 500; margin-top: 6px;
}
.form-error a { color: #7d2119; text-decoration: underline; }
#cf-enviar[disabled] { opacity: .65; cursor: progress; }
/* Campo trampa del antispam: invisible para las personas, presente para los
   robots. Con position absoluta en vez de display:none, que algunos ignoran. */
.campo-trampa {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.contact-info li {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.contact-info li:first-child { padding-top: 0; }
.contact-info .ic {
  width: 40px; height: 40px; border-radius: var(--r); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); background: var(--brand-soft);
}
.contact-info .ic svg { width: 20px; height: 20px; }
.contact-info .k { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; }
.contact-info .v { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.contact-info .v-2 { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 2px; }
/* Rotativa: las cinco líneas en una grilla compacta, cada una clickeable */
.tel-lista { display: grid; grid-template-columns: repeat(2, max-content); gap: 2px 26px; }
.tel-lista a { font-variant-numeric: tabular-nums; }
.tel-lista a:hover { color: var(--brand); }
.contact-info .v a:hover { color: var(--brand); }
/* Fila de botones de la página 404 */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==================================================================== Mapa */
.mapa {
  margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: #eef1f5; line-height: 0;
}
.mapa iframe {
  width: 100%; height: 260px; border: 0; display: block;
  /* El mapa de Google llega muy saturado al lado de la paleta del sitio */
  filter: saturate(.85);
}
.mapa-ir {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.mapa-ir:hover { color: var(--brand); }
.mapa-ir svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .mapa iframe { height: 210px; }
}

/* ======================================================= WhatsApp flotante */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(37,211,102,.4);
  transition: background .15s ease;
}
.wa-float:hover { background: var(--wa-d); }
/* [hidden] tiene que poder contra el display:flex de la media query */
.wa-float[hidden] { display: none !important; }
.wa-float svg { width: 29px; height: 29px; }

/* =================================================================== Utils */
.mt-0 { margin-top: 0; }
.mt-lg { margin-top: 32px; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.text-center { text-align: center; }
.stack-btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* Bajada introductoria de las home de rama */
.lead-intro { font-size: 17.5px; color: var(--ink-2); line-height: 1.75; }

/* ============================================================== Responsive */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 900px) {
  .slide { flex: 0 0 calc((100% - 20px) / 2); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .stat:nth-child(3) { border-left: 0; }
  .contact-cols { grid-template-columns: 1fr !important; }
}
@media (max-width: 820px) {
  .burger { display: flex; }
  /* Va absolute contra el header, que es sticky y por lo tanto su bloque
     contenedor. Antes era fixed con top:100%, que funcionaba solo porque el
     header tenía backdrop-filter; al sacarlo, el 100% pasó a ser el alto de la
     ventana y el menú se abría abajo de todo. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--dark-2); border-bottom: 3px solid var(--brand);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 20px 20px; margin: 0;
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h));   /* reserva para navegadores viejos */
    max-height: calc(100svh - var(--header-h));  /* svh no cuenta la barra del navegador */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .2s ease, transform .22s ease, visibility .22s;
  }
  .nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: 15px 4px; border-bottom: 1px solid var(--dark-line); }
  .nav a.active::after { display: none; }
  .nav a.active { color: var(--brand); }
  html[data-branch="corp"] .nav a.active { color: #fff; }
  .header-cta { display: none; }
  .nav .wa-nav {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px;
    background: var(--wa); color: #06331b; font-weight: 600; border-bottom: 0; border-radius: var(--r);
  }
  .wa-float { display: flex; }
  .logo img { height: 34px; }
  .logo.logo-hnos img { height: 36px; }
}
@media (max-width: 720px) {
  .hero { padding: 60px 0 54px; }
  .hero h1 { font-size: 32px; }
  .hero-slim h1 { font-size: 27px; }
  .hero-logo img { height: 50px; }
  .hero::after { width: 55%; }
  /* En mobile el texto ocupa todo el ancho, así que el velo pasa a ser
     vertical y parejo en vez de más oscuro de un lado. */
  .hero-foto { padding: 72px 0 64px; min-height: 0; }
  .hero-foto::before {
    background-image:
      linear-gradient(180deg, rgba(14,18,24,.9) 0%, rgba(14,18,24,.74) 42%, rgba(14,18,24,.94) 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 12px);
  }
  .hero-foto::after { width: 100%; opacity: .2; }
  .h-sec { font-size: 25px; }
  .section { padding: 54px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 36px 24px; }
  .cta-soft { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .toolbar-row { flex-direction: column; align-items: stretch; }
  .select-marca { width: 100%; }
  .form-card { padding: 24px; }
  .marquee::before, .marquee::after { width: 44px; }
  /* Las cinco líneas no entran en dos columnas a este ancho */
  .tel-lista, .footer .f-tels { grid-template-columns: 1fr; }
  /* Una foto por pantalla, y las flechas adentro para que no se corten */
  .slide { flex: 0 0 100%; }
  .slider-flecha.izq { left: 8px; }
  .slider-flecha.der { right: 8px; }
  .busc-box input { font-size: 16px; padding: 16px 44px 16px 44px; }  /* 16px evita el zoom de iOS */
  .res-cod { font-size: 22px; }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
  .busc-pasos { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .marquee-item { width: 132px; height: 56px; padding: 0 16px; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-box { height: 86px; padding: 14px; }
}

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