/* =========================================================
   GUSTAVO D. CAMPOS
   Sistemas de marcación, etiquetado e identificación
   Architecture: @layer cascade (reset → tokens → base →
   layout → components → utilities → animations)
   ========================================================= */

@layer reset, tokens, base, layout, components, utilities, animations;

/* Skip to content - accessibility */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  padding: 12px 24px;
  background: #0f3b63;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-to-content:focus {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  outline: 2px solid #14568a;
  outline-offset: 2px;
}

/* =========================================================
   LAYER: RESET
   ========================================================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  /* overflow-x: clip (not hidden) — `hidden` creates a scroll container that
     breaks `position: sticky` on the white header. `clip` clips the same way
     but doesn't establish a new scroll/positioning context. */
  html { scroll-behavior: smooth; text-size-adjust: 100%; overflow-x: clip; }
  body { margin: 0; -webkit-font-smoothing: antialiased; overflow-x: clip; }
  img { max-width: 100%; display: block; }
  a { text-decoration: none; color: inherit; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  ::selection { background: var(--accent-18); color: #0f3b63; }
}

/* =========================================================
   LAYER: TOKENS (Design Token System)
   ========================================================= */
@layer tokens {
  :root {
    /* Color tokens */
    --primary: #0f3b63;
    --primary2: #0c2d4e;
    --accent: #14568a;
    --accent-soft: #dde9f5;
    --surface: #f8fbfd;
    --text: #1f2937;
    --muted: #667085;
    --muted-light: #7c8a96;
    --text-secondary: #4a5a6a;
    --placeholder: #9aa5b0;
    --white: #ffffff;

    /* Primary opacity scale — rgba(15,59,99, α) */
    --primary-02: rgba(15,59,99,.02);
    --primary-04: rgba(15,59,99,.04);
    --primary-05: rgba(15,59,99,.05);
    --primary-06: rgba(15,59,99,.06);
    --primary-08: rgba(15,59,99,.08);
    --primary-10: rgba(15,59,99,.10);
    --primary-12: rgba(15,59,99,.12);
    --primary-14: rgba(15,59,99,.14);
    --primary-15: rgba(15,59,99,.15);
    --primary-18: rgba(15,59,99,.18);
    --primary-20: rgba(15,59,99,.20);
    --primary-22: rgba(15,59,99,.22);
    --primary-26: rgba(15,59,99,.26);
    --primary-40: rgba(15,59,99,.40);
    --primary-42: rgba(15,59,99,.42);

    /* Accent opacity scale — rgba(20,86,138, α) */
    --accent-03: rgba(20,86,138,.03);
    --accent-08: rgba(20,86,138,.08);
    --accent-10: rgba(20,86,138,.10);
    --accent-12: rgba(20,86,138,.12);
    --accent-14: rgba(20,86,138,.14);
    --accent-16: rgba(20,86,138,.16);
    --accent-18: rgba(20,86,138,.18);
    --accent-20: rgba(20,86,138,.20);
    --accent-22: rgba(20,86,138,.22);
    --accent-28: rgba(20,86,138,.28);

    /* White opacity scale — rgba(255,255,255, α) */
    --white-07: rgba(255,255,255,.07);
    --white-08: rgba(255,255,255,.08);
    --white-10: rgba(255,255,255,.10);
    --white-12: rgba(255,255,255,.12);
    --white-16: rgba(255,255,255,.16);
    --white-18: rgba(255,255,255,.18);
    --white-20: rgba(255,255,255,.20);
    --white-22: rgba(255,255,255,.22);
    --white-24: rgba(255,255,255,.24);

    /* Layout tokens */
    --max: 1240px;

    /* Shadow tokens */
    --shadow-soft: 0 10px 24px var(--primary-06);
    --shadow: 0 18px 36px var(--primary-10);
    --shadow-strong: 0 24px 48px var(--primary-14);

    /* Radius tokens */
    --radius: 18px;
    --radius-card: 20px;
    --radius-inner: 14px;
    /* Button tokens */
    --btn-radius: 14px;
    --btn-padding: 12px 20px;
    --btn-font-size: 14px;
    --btn-transition: transform .32s cubic-bezier(.22,1,.36,1), background-color .32s ease, border-color .32s ease, color .32s ease;
    --btn-shine: linear-gradient(120deg, transparent 0%, var(--white-07) 38%, var(--white-16) 50%, var(--white-07) 62%, transparent 100%);
    --bg: var(--surface);

    /* Scroll tokens */
    --scroll-offset: 96px;

    /* Transition tokens */
    --ease-out-expo: cubic-bezier(.22,1,.36,1);
    --duration-fast: .22s;
    --duration-normal: .32s;
    --duration-slow: .52s;

    /* === Mobile design tokens (Etapa 1) — vocabulario base.
       Solo declarados; NO reemplazan valores existentes en
       esta etapa. Pasos siguientes consumen estos tokens. === */

    /* Spacing scale (base 4px, multiplica) */
    --space-3xs: 4px;
    --space-2xs: 6px;
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  16px;
    --space-lg:  20px;
    --space-xl:  24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* Mobile section vertical padding — ritmo unificado entre secciones */
    --section-py-m-tight: 20px;
    --section-py-m:       28px;
    --section-py-m-loose: 36px;

    /* Mobile typography scale (px-based para precisión en pantallas chicas) */
    --text-xs-m:  11px;
    --text-sm-m:  12.5px;
    --text-md-m:  14px;
    --text-lg-m:  15.5px;
    --text-xl-m:  17px;
    --text-2xl-m: 20px;
    --text-3xl-m: 24px;
    --text-4xl-m: 28px;

    /* Floating stack: padding-bottom que reserva <main> en mobile.
       Cubre el WhatsApp FAB (44px alto + 14px bottom = 58px) + buffer. */
    --fab-stack-bottom: 80px;
  }
}

/* =========================================================
   LAYER: BASE
   ========================================================= */
@layer base {
  body {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  }

  .container {
    width: 100%;
    max-width: var(--max);
    padding-inline: clamp(16px, 4vw, 32px);
    margin-inline: auto;
  }

  a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    position: relative;
    transition: color var(--duration-fast) ease, opacity var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-expo);
  }

  :is(.nav ul, footer, .solution-card, .featured-card, .product-card, .contact-info-copy, .topbar) a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  :is(.nav ul, footer, .solution-card, .featured-card, .product-card, .contact-info-copy, .topbar) a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width var(--duration-fast) ease;
  }

  :is(.nav ul, footer, .solution-card, .featured-card, .product-card, .contact-info-copy, .topbar) a:hover::after {
    width: 100%;
  }

  :is(.nav ul, footer, .solution-card, .featured-card, .product-card, .contact-info-copy, .topbar) a:hover {
    color: var(--accent);
  }

  :is(.solution-card, .featured-card, .product-card) a {
    font-weight: 800;
    letter-spacing: -.01em;
  }

  :is(.solution-card, .featured-card, .product-card) a svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }
}

/* =========================================================
   LAYER: LAYOUT
   ========================================================= */
@layer layout {
  /* Topbar — navy con luz sutil (strip fino, no necesita múltiples radiales) */
  .topbar {
    background:
      radial-gradient(ellipse 60% 200% at 50% 0%, rgba(61,143,214,.18) 0%, transparent 65%),
      radial-gradient(ellipse 40% 300% at 100% 50%, rgba(89,165,228,.10) 0%, transparent 60%),
      linear-gradient(95deg, #071828 0%, #0a2238 35%, #0e2f4d 70%, #123856 100%);
    color: #fff;
    font-size: 13px;
    border-bottom: 1px solid var(--white-08);
  }
  .topbar .container {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 12px 0;
    flex-wrap: wrap;
  }
  .topbar strong { font-weight: 700; letter-spacing: -.01em; }
  .topbar-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.76);
  }
  .topbar-meta a { color: rgba(255,255,255,.76); font-weight: 500; }
  .topbar-meta a:hover { color: #fff; }
  .topbar-message {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.9);
    font-weight: 600;
    letter-spacing: .01em;
  }
  .topbar-message::before {
    display: none;
  }

  /* Header & Nav */
  header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255,255,255,.92);
    background: color-mix(in srgb, var(--white) 92%, transparent);
    backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--primary-06);
    transition: padding var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) ease;
    padding: 14px 0;
    contain: layout style;
    transform: translateZ(0);
  }
  .header-scrolled header {
    padding: 8px 0;
    box-shadow: 0 4px 24px var(--primary-06);
  }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .nav-left { display: flex; align-items: center; gap: 14px; }
  .nav-actions { display: flex; align-items: center; gap: 10px; }
  .nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
    font-weight: 600;
  }

  /* Nav dropdown */
  .nav-dropdown { position: relative; }
  .nav-dropdown > a { display: inline-flex; align-items: center; }
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    margin: 0;
    padding: 0;
    background: var(--white);
    border: 1px solid rgba(15,59,99,.07);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(15,59,99,.08), 0 1px 2px rgba(15,59,99,.03);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s;
    z-index: 100;
    width: max-content;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
  /* "Ver todo el catálogo" header link */
  .nav-dd-all {
    display: block;
    padding: 8px 16px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(15,59,99,.06);
    transition: background .12s ease;
    border-radius: 10px 10px 0 0;
    letter-spacing: .01em;
  }
  .nav-dd-all:hover { background: rgba(20,86,138,.04); }
  /* 2-column category grid */
  .nav-dd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
  }
  .nav-dd-grid a {
    display: block;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: all .12s ease;
    white-space: nowrap;
  }
  .nav-dd-grid a:hover {
    background: rgba(20,86,138,.05);
    color: var(--primary);
  }

  /* Mobile sub-menu for categories */
  .mobile-menu-sub {
    display: flex;
    flex-direction: column;
    padding-left: 16px;
    gap: 0;
  }
  .mobile-menu-sub a {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-light);
    padding: 6px 0;
  }

  /* Brand */
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--primary);
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }
  .brand:hover { transform: scale(1.012); }
  .brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }
  .brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .brand-copy { display: flex; flex-direction: column; gap: 1px; }
  .brand-copy strong { font-size: 16px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
  .brand-copy span { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
  .header-cta { white-space: nowrap; flex-shrink: 0; }
  .header-cta span { white-space: nowrap; }

  /* Mobile */
  .mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) ease;
  }
  .mobile-toggle:hover { background: var(--accent-soft); }
  .mobile-toggle svg { width: 22px; height: 22px; stroke: var(--primary); fill: none; stroke-width: 2; stroke-linecap: round; }
  .mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.97);
    background: color-mix(in srgb, var(--white) 97%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    z-index: 999;
    padding: 80px 0 40px;
    overflow-y: auto;
  }
  .mobile-menu.open { display: block; }
  .mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
  .mobile-menu nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    transition: background var(--duration-fast) ease;
  }
  .mobile-menu nav a:hover { background: var(--accent-soft); color: var(--accent); }

  /* Hero — overlay editorial sobre la imagen del warehouse.
     Mismo patrón que los heros de rubros: gradient horizontal navy
     pesado a la izquierda (donde vive el texto), liviano a la derecha
     (donde la imagen y la card respiran). */
  .hero {
    padding: 64px 0 48px;
    background:
      linear-gradient(
        100deg,
        rgba(8, 18, 28, 0.86) 0%,
        rgba(8, 18, 28, 0.70) 35%,
        rgba(8, 18, 28, 0.45) 60%,
        rgba(8, 18, 28, 0.22) 100%
      ),
      url('../img/hero/hero-warehouse.webp') center/cover no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  /* Viñeta neutralizada — el linear-gradient ya hace todo el trabajo */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 0;
  }
  .hero > .container { position: relative; z-index: 1; }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 36px;
    align-items: center;
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    color: rgba(255,255,255,.85);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .hero h1 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    color: #fff;
    margin: 0 0 20px;
  }
  .hero-product-rotate {
    width: 360px;
    height: 200px;
    position: relative;
    margin: 20px 0 16px;
    background: var(--white);
    border-radius: 14px;
    padding: 20px 28px;
    cursor: pointer;
    transition: box-shadow .25s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
  }
  .hero-product-rotate:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.1);
  }
  .hero-product-rotate img {
    position: absolute;
    inset: 20px 28px;
    width: calc(100% - 56px);
    height: calc(100% - 40px);
    object-fit: contain;
    transition: opacity .8s ease;
  }
  .hero-product-rotate img.fade-out { opacity: 0; }
  .hero p {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,.92);
    max-width: 520px;
    margin: 0 0 32px;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
  }
  .hero .btn-secondary {
    background: var(--white-12);
    color: #fff;
    border-color: rgba(255,255,255,.2);
    backdrop-filter: blur(6px);
  }
  .hero .btn-secondary:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.3);
    color: #fff;
  }
  .button-row { display: flex; gap: 16px; flex-wrap: wrap; }
  .hero-card {
    background: rgba(13, 28, 46, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-card);
    padding: 28px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
  }
  .hero-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
  }
  .hero-card p {
    font-size: 14px;
    color: rgba(255,255,255,.82);
    margin: 0 0 18px;
    line-height: 1.6;
  }
  .hero-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
  }
  .hero-card li {
    display: grid;
    grid-template-columns: minmax(auto, max-content) 1fr;
    column-gap: 8px;
    align-items: baseline;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.88);
  }
  .hero-card li b {
    font-weight: 700;
    color: rgba(255,255,255,.95);
  }
  .hero-card li b::before {
    content: "•";
    margin-right: 8px;
    color: rgba(255,255,255,.6);
    font-weight: 400;
  }
  .hero-card li span {
    color: rgba(255,255,255,.82);
  }
  /* Mobile ≤768: layout stacked.
     Soporta dos estructuras de li:
       (1) Home: <b>Title</b> text-node                — texto suelto
       (2) Cats: <b>Title</b><span>Y</span>            — span sin separador HTML
     b se vuelve display:block (ocupa su propia línea) → todo lo que sigue
     (text-node anonymous o span explícito) cae en una segunda línea.
     Resuelve dos bugs:
       - Bullet alignment: 2ª línea ya no queda pegada al bullet.
       - Pegado b+span: ya no hay "Papel ilustraciónblancas..." sin espacio.
     Hanging indent vive en b (no en li) para que solo aplique a la
     primera línea con el bullet; el span/text-node hereda padding-left
     pero no el text-indent negativo. */
  @media (max-width: 768px) {
    /* !important necesario: hay reglas .hero.hero-full .hero-card li b
       en mobile (línea ~10590) que viven OUT-OF-@layer y ganan sobre
       este @layer layout. Sin display:block !important el b queda
       inline y span queda pegado. */
    .hero-card li {
      display: block !important;
      grid-template-columns: none !important;
      padding-left: 1.2em !important;
    }
    .hero-card li b {
      display: block !important;
      margin-bottom: 2px !important;
      text-indent: -1.2em !important;
    }
    .hero-card li span {
      display: block !important;
    }
    .hero-card li b::before {
      content: "•";
      margin-right: 0.5em;
      color: rgba(255,255,255,.6);
      font-weight: 400;
    }
  }
  /* Desktop (>768): bullet vive en b::before del layer base; ocultamos
     cualquier li::before residual para que no compita. */
  @media (min-width: 769px) {
    .hero-card li::before { display: none; }
  }

  /* Trust strip — tratamiento cinematográfico navy */
  .trust-strip {
    background:
      /* Keylight focal superior-centro */
      radial-gradient(ellipse 55% 80% at 50% -20%, rgba(89,165,228,.22) 0%, rgba(61,143,214,.10) 45%, transparent 70%),
      /* Rim light lateral-derecho */
      radial-gradient(ellipse 28% 60% at 92% 20%, rgba(120,190,240,.14) 0%, transparent 62%),
      /* Side fill medio-izquierdo */
      radial-gradient(ellipse 38% 70% at 5% 55%, rgba(20,86,138,.12) 0%, transparent 55%),
      /* Shadow pool inferior-izquierdo */
      radial-gradient(ellipse 55% 90% at 10% 110%, rgba(2,8,18,.50) 0%, transparent 65%),
      /* Shadow secundaria inferior-derecha */
      radial-gradient(ellipse 45% 70% at 95% 105%, rgba(4,12,24,.42) 0%, transparent 60%),
      /* Base profunda — match paleta de botones */
      linear-gradient(160deg,
        #0e3156 0%,
        #0a2543 22%,
        #051828 50%,
        #020a18 75%,
        #0a2442 100%);
    padding: 32px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  /* Viñeta cinematográfica */
  .trust-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 92% 100% at 50% 50%, transparent 45%, rgba(0,0,0,.18) 82%, rgba(0,0,0,.28) 100%);
    pointer-events: none;
  }
  .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
  .trust-item { text-align: center; }
  .trust-item b { display: block; font-size: clamp(28px, 4vw, 40px); font-weight: 800; margin-bottom: 8px; letter-spacing: -.03em; color: #fff; }
  .trust-item strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
  .trust-item span { display: block; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.65); line-height: 1.55; }

  /* Sections */
  section { padding: 48px 0; }
  section[id] { scroll-margin-top: var(--scroll-offset); }
  .product-card details { scroll-margin-top: var(--scroll-offset); }
  section.light { background: var(--surface); }
  #categorias { padding: 56px 0; }
  #destacados { padding: 56px 0; }
  .section-head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
  .split .section-head { text-align: left; max-width: none; margin: 0 0 32px; }
  .section-title {
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--primary);
    margin: 0 0 12px;
    line-height: 1.12;
  }
  .section-sub {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
  }
  .section-sub + .section-sub { margin-top: 12px; }

  /* Split */
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .split img { border-radius: var(--radius-card); box-shadow: var(--shadow); width: 100%; height: auto; }

  /* Grid & Cards */
  .grid { display: grid; gap: 20px; }
  .card {
    background: var(--white);
    border-radius: var(--radius-card);
    padding: 28px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--primary-04);
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

  /* Solutions */
  .solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .solutions .section-title { font-size: 32px; letter-spacing: -.025em; }
  .solutions .section-sub { font-size: 14px; color: var(--muted); max-width: 560px; margin-left: auto; margin-right: auto; }
  .solutions .section-head { margin-bottom: 24px; }
  .solution-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
  .solution-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: var(--radius-card);
    padding: 30px 28px 26px 34px;
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 1px 2px rgba(15,59,99,.04),
      0 10px 24px rgba(15,59,99,.05),
      0 24px 48px rgba(15,59,99,.04);
    border: 1px solid var(--primary-08);
    transition:
      transform var(--duration-normal) var(--ease-out-expo),
      border-color var(--duration-normal) ease,
      box-shadow var(--duration-normal) var(--ease-out-expo);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* Left accent bar — muted default, saturates + grows on hover (consistent con commercial-box) */
  .solution-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 100%);
    opacity: .34;
    transition:
      opacity var(--duration-normal) var(--ease-out-expo),
      top var(--duration-normal) var(--ease-out-expo),
      bottom var(--duration-normal) var(--ease-out-expo);
  }
  .solution-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-22);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 2px 4px rgba(15,59,99,.05),
      0 14px 32px rgba(15,59,99,.09),
      0 32px 60px rgba(15,59,99,.08);
  }
  .solution-card:hover::before {
    opacity: 1;
    top: 12%;
    bottom: 12%;
  }
  /* Icon + title header */
  .solution-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
  }
  .solution-icon-box {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 9px;
    flex-shrink: 0;
    color: var(--primary);
    border: 1.5px solid var(--primary-14);
    border-radius: 10px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-normal) ease,
                border-color var(--duration-normal) ease,
                color var(--duration-normal) ease;
  }
  .solution-icon-box svg { width: 100%; height: 100%; display: block; }
  .solution-card:hover .solution-icon-box {
    background: linear-gradient(135deg, var(--accent-08) 0%, var(--accent-14) 100%);
    border-color: var(--accent-28);
    color: var(--accent);
  }
  .solutions-button { margin-top: 32px; text-align: center; }
  .map-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--btn-radius);
    background: linear-gradient(135deg, #134468 0%, #0a2c4a 45%, #051526 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--white-12);
    box-shadow: 0 12px 28px var(--primary-20), inset 0 1px 0 var(--white-18);
    transition: var(--btn-transition);
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .map-button:hover {
    transform: translateY(-1px) scale(1.005);
    box-shadow: 0 16px 34px var(--primary-26), inset 0 1px 0 var(--white-24);
  }
  .solution-card h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    letter-spacing: -.018em;
    line-height: 1.22;
  }
  .solution-card > p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 14px;
  }
  /* Lista con checks accent (consistente con commercial-box) */
  .solution-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .solution-list li {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 5px 0 5px 26px;
    position: relative;
  }
  .solution-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314568a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    opacity: .78;
  }

  /* Equipos típicos — chips navegables al catálogo (la nueva "función") */
  .solution-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 14px 0 0;
    border-top: 1px solid var(--primary-06);
    margin-top: auto;
    margin-bottom: 18px;
  }
  .solution-chips-label {
    width: 100%;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-light);
    margin-bottom: 2px;
  }
  .solution-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--primary-08);
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--duration-fast) ease,
                border-color var(--duration-fast) ease,
                color var(--duration-fast) ease,
                transform var(--duration-fast) var(--ease-out-expo);
  }
  .solution-chip::after {
    content: "→";
    font-size: 11px;
    opacity: .5;
    transition: transform var(--duration-fast) var(--ease-out-expo), opacity var(--duration-fast) ease;
  }
  .solution-chip:hover {
    background: var(--accent-08);
    border-color: var(--accent-28);
    color: var(--accent);
    transform: translateY(-1px);
  }
  .solution-chip:hover::after { opacity: 1; transform: translateX(2px); }

  /* CTA "Consultar solución" — botón presencial al pie del card */
  .solution-card { cursor: default; }
  .solution-consult {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .005em;
    color: #fff;
    background:
      /* Keylight arriba-izquierda */
      radial-gradient(ellipse 70% 60% at 25% 20%, rgba(120,190,240,.16) 0%, rgba(61,143,214,.05) 45%, transparent 70%),
      /* Shadow pool abajo-derecha */
      radial-gradient(ellipse 60% 55% at 88% 88%, rgba(0,0,0,.32) 0%, transparent 60%),
      /* Base navy profunda */
      linear-gradient(135deg, #134468 0%, #0a2c4a 45%, #051526 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    text-decoration: none;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(0,0,0,.35),
      0 2px 6px rgba(5,21,38,.30),
      0 10px 22px rgba(5,21,38,.40);
    transition:
      transform var(--duration-normal) var(--ease-out-expo),
      box-shadow var(--duration-normal) var(--ease-out-expo),
      filter var(--duration-normal) ease;
  }
  .solution-consult svg {
    width: 14px;
    height: 14px;
    transition: transform var(--duration-fast) var(--ease-out-expo);
  }
  .solution-consult:hover {
    transform: translateY(-1px);
    filter: saturate(1.08) brightness(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(0,0,0,.35),
      0 4px 12px rgba(5,21,38,.40),
      0 16px 34px rgba(5,21,38,.55);
  }
  .solution-consult:hover svg { transform: translateX(3px); }
  /* Desactivar underline animation global sobre chip/consult (viene de :is rule arriba) */
  .solution-card .solution-chip::after { position: static; background: none; width: auto; height: auto; }
  .solution-card .solution-consult::after { display: none; }
  .solution-card .solution-chip:hover { color: var(--accent); }
  .solution-card .solution-consult:hover { color: #fff; }

  /* ── Solutions process — Variant B: container card institucional ──
     Container: bg WHITE sobre la sección Surface, borde sutil navy 8%,
     sin sombra. Genera contraste claro contra el fondo gris de la
     sección sin romper el rhythm white/gray de la landing.
     Aloja eyebrow, 3 step cards conectadas por hairline horizontal,
     y CTA al final como cierre natural del recorrido. */
  .solutions-process {
    background: var(--white);
    border: 1px solid var(--primary-08);
    border-radius: 20px;
    padding: 36px 36px 32px;
    margin-top: 4px;
  }
  /* Header del container — solo eyebrow técnico + hairline divisor */
  .solutions-process-head {
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--primary-08);
  }
  .solutions-process-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* Step cards — 3 columnas en desktop con timeline hairline horizontal.
     La línea cruza la grid a la altura del icon-row; las cards (bg
     blanco) la cubren — visible solo en los gaps entre cards. */
  .process-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    position: relative;
  }
  .process-steps::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 16.5%;
    right: 16.5%;
    height: 1px;
    background: var(--primary-18);
    z-index: 0;
  }
  /* Cards blancas con border navy 12% (bumped desde 08).
     Sobre un container también blanco, el border es lo que define la
     card. 12% es visible sin ser pesado — pattern editorial tipo
     Linear Enterprise / Stripe Atlas (cards outlined, no shadows). */
  .step {
    background: var(--white);
    border: 1px solid var(--primary-12);
    border-radius: 14px;
    padding: 26px 24px 22px;
    position: relative;
    z-index: 1;
    transition: border-color .25s var(--ease-out-expo),
                transform .25s var(--ease-out-expo);
  }
  /* Dot conector en cada gap entre cards (cards 2 y 3) */
  .step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 41px;
    left: -13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    z-index: 2;
  }
  .step:hover {
    border-color: var(--accent-22);
    transform: translateY(-2px);
  }
  .step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  /* Número sólido navy — sin gradient. Ancla visual principal de la card.
     Bump 32 → 36 para que sea claramente el elemento dominante del header. */
  .step-num {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
  }
  /* Icon chip — 32×32 (más chico, no compite con el número).
     bg muy sutil .04 → integra sin protagonismo. */
  .step-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(20,86,138,.04);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .25s var(--ease-out-expo), color .25s var(--ease-out-expo);
  }
  .step-icon svg { width: 14px; height: 14px; }
  .step:hover .step-icon {
    background: rgba(20,86,138,.10);
    color: var(--accent);
  }
  .step-title {
    display: block;
    color: var(--primary);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.015em;
    margin-bottom: 8px;
  }
  /* Desc: bump font 13.5 → 14 para mejor contraste/legibilidad
     manteniendo color text-secondary (jerarquía respecto al title). */
  .step p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
  }

  /* CTA — cierre natural del proceso, centrado al final del container */
  .solutions-process-actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
  /* CTA: padding generoso para que tenga presencia como cierre del bloque,
     sin parecer botón genérico. */
  .solutions-process .btn {
    font-size: 14px;
    padding: 14px 28px;
  }

  @media (max-width: 1024px) {
    /* Tablet/mobile: cards stack vertical, timeline horizontal pierde
       sentido (no hay alineación horizontal a conectar). Se oculta
       — la numeración 01/02/03 ya comunica secuencia clara. */
    .solutions-process { padding: 30px 26px 26px; }
    .process-steps { grid-template-columns: 1fr; gap: 14px; }
    .process-steps::before,
    .step:not(:first-child)::before { display: none; }
  }
  @media (max-width: 600px) {
    .solutions-process { padding: 24px 18px 20px; border-radius: 16px; }
    .step { padding: 22px 18px 20px; }
    .solutions-process-actions { margin-top: 22px; }
    .solutions-process-actions .btn { width: 100%; justify-content: center; }
  }
  .solution-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--accent-soft);
    margin-bottom: 18px;
  }
  .solution-icon svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* =========================================================
     COMMERCIAL STRIP — executive-tallado (matches contact-info)
     Premium corporate: left accent bar, refined icon frame,
     check-mark list, layered depth, hover cascade.
     ========================================================= */
  .commercial-strip {
    padding: 64px 0;
    background:
      /* Keylight focal superior-centro */
      radial-gradient(ellipse 55% 42% at 50% -8%, rgba(89,165,228,.22) 0%, rgba(61,143,214,.10) 40%, transparent 65%),
      /* Rim light superior-derecho */
      radial-gradient(ellipse 32% 28% at 90% 10%, rgba(120,190,240,.14) 0%, transparent 62%),
      /* Side fill medio-izquierda */
      radial-gradient(ellipse 40% 45% at 5% 50%, rgba(20,86,138,.10) 0%, transparent 55%),
      /* Shadow pool inferior-izquierda */
      radial-gradient(ellipse 55% 48% at 10% 98%, rgba(2,8,18,.50) 0%, transparent 65%),
      /* Shadow secundaria inferior-derecha */
      radial-gradient(ellipse 45% 38% at 95% 92%, rgba(4,12,24,.42) 0%, transparent 60%),
      /* Base asimétrica */
      linear-gradient(168deg, #0e3156 0%, #0a2543 22%, #051828 48%, #020a18 68%, #051c34 88%, #0b2846 100%);
    position: relative;
    overflow: hidden;
  }
  .commercial-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 92% 72% at 50% 50%, transparent 42%, rgba(0,0,0,.18) 82%, rgba(0,0,0,.30) 100%);
    pointer-events: none;
    z-index: 0;
  }
  .commercial-strip > .container { position: relative; z-index: 1; }
  .commercial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .commercial-box {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--primary-08);
    border-radius: var(--radius-card);
    padding: 32px 32px 28px 36px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 1px 2px rgba(15,59,99,.04),
      0 10px 24px rgba(15,59,99,.05),
      0 24px 48px rgba(15,59,99,.04);
    transition:
      border-color var(--duration-normal) var(--ease-out-expo),
      box-shadow var(--duration-normal) var(--ease-out-expo),
      transform var(--duration-normal) var(--ease-out-expo);
  }
  /* Left accent bar — muted by default, saturates + grows on hover */
  .commercial-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24%;
    bottom: 24%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 100%);
    opacity: .32;
    transition: opacity var(--duration-normal) var(--ease-out-expo),
                top var(--duration-normal) var(--ease-out-expo),
                bottom var(--duration-normal) var(--ease-out-expo);
  }
  .commercial-box:hover {
    border-color: var(--accent-22);
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 2px 4px rgba(15,59,99,.05),
      0 14px 32px rgba(15,59,99,.09),
      0 32px 60px rgba(15,59,99,.08);
  }
  .commercial-box:hover::before {
    opacity: 1;
    top: 14%;
    bottom: 14%;
  }

  /* Header: icon framed in outlined square, title with tight kerning */
  .commercial-box-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }
  .commercial-icon {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 9px;
    flex-shrink: 0;
    color: var(--primary);
    border: 1.5px solid var(--primary-14);
    border-radius: 10px;
    background: transparent;
    transition: background var(--duration-normal) ease,
                border-color var(--duration-normal) ease,
                color var(--duration-normal) ease,
                transform var(--duration-normal) var(--ease-out-expo);
  }
  .commercial-box:hover .commercial-icon {
    background: linear-gradient(135deg, var(--accent-08) 0%, var(--accent-14) 100%);
    border-color: var(--accent-28);
    color: var(--accent);
  }
  .commercial-box h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    letter-spacing: -.018em;
    line-height: 1.25;
  }
  .commercial-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 16px;
  }
  .commercial-desc strong { color: var(--primary); font-weight: 700; }

  /* List with checkmark strokes — accent corporate */
  .commercial-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .commercial-list li {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 5px 0 5px 26px;
    position: relative;
  }
  .commercial-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314568a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    opacity: .78;
  }

  /* Close statement separated by thin fading rule */
  .commercial-close {
    font-size: 12.5px;
    color: var(--muted-light);
    margin: 0 0 20px;
    padding-top: 14px;
    border-top: 1px solid var(--primary-06);
    line-height: 1.55;
    font-style: normal;
  }

  /* CTA button — presence as the card's primary action */
  .commercial-box .btn {
    align-self: flex-start;
    font-size: 13.5px;
    padding: 11px 22px;
    margin-top: auto;
    gap: 9px;
    box-shadow:
      inset 0 1px 0 var(--white-24),
      0 2px 6px var(--primary-14),
      0 10px 26px var(--primary-20);
  }
  .commercial-box .btn:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 var(--white-24),
      0 4px 10px var(--primary-18),
      0 14px 34px var(--primary-26);
  }
  .commercial-box .btn svg { fill: currentColor; stroke: none; width: 16px; height: 16px; flex-shrink: 0; }

  @media (max-width: 768px) {
    .commercial-grid { grid-template-columns: 1fr; gap: 16px; }
    .commercial-box { padding: 24px 22px 22px 26px; }
    .commercial-box h3 { font-size: 17px; }
    .commercial-box .btn { align-self: stretch; justify-content: center; }
  }

  /* Footer */
  footer {
    position: relative;
    background:
      /* Keylight focal — brillo muy tenue superior-centro */
      radial-gradient(ellipse 55% 30% at 50% 0%, rgba(61,143,214,.09) 0%, rgba(20,86,138,.03) 45%, transparent 72%),
      /* Side wash izquierdo — apenas perceptible */
      radial-gradient(ellipse 35% 40% at 5% 45%, rgba(20,86,138,.05) 0%, transparent 55%),
      /* Shadow pool inferior — sutil */
      radial-gradient(ellipse 55% 50% at 8% 100%, rgba(0,0,0,.40) 0%, transparent 65%),
      radial-gradient(ellipse 45% 40% at 96% 100%, rgba(0,0,0,.30) 0%, transparent 60%),
      /* Base petróleo profundo */
      linear-gradient(172deg, #091520 0%, #050e1a 30%, #020812 60%, #060f1c 88%, #0a1828 100%);
    color: #cbd5e1;
    padding: 0 0 22px;
    border-top: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
  }
  footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 70% at 50% 45%, transparent 45%, rgba(0,0,0,.16) 82%, rgba(0,0,0,.26) 100%);
    pointer-events: none;
  }
  footer .container { position: relative; z-index: 1; }

  /* ---------- Top CTA block — fino y refinado.
     Refactor: paleta institucional sin celeste plástico.
     Background usa el navy + un toque sutil del accent corporativo
     (rgb 31,111,178 = --accent, no el celeste 61,143,214 anterior).
     Bordes y eyebrow neutralizados a white-tints. ---------- */
  .footer-cta {
    margin: 36px 0 32px;
    padding: 22px 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto;
    align-items: center;
    gap: 24px;
    background:
      radial-gradient(ellipse 60% 110% at 0% 50%, rgba(31,111,178,.06) 0%, transparent 60%),
      linear-gradient(135deg, rgba(15,59,99,.30) 0%, rgba(8,22,40,.45) 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  }
  .footer-cta-eyebrow {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 6px;
  }
  /* CTA title — Nivel 1: foco principal del bloque superior.
     font-weight 600 → 700 para subir presencia institucional. */
  .footer-cta-title {
    margin: 0 0 6px;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.008em;
    color: #fff;
  }
  /* CTA desc — Nivel 3: párrafo de soporte, claramente secundario. */
  .footer-cta-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,.50);
    max-width: 58ch;
  }
  .footer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .005em;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    white-space: nowrap;
  }
  /* CTA primary — refactor a botón BLANCO. Mismo patrón que los
     hero CTAs primarios del sitio (white fill + navy text + icon).
     Reads cleanly sobre el navy gradient del CTA card y se alinea
     con el sistema visual existente. */
  .footer-cta-btn--primary {
    background: #ffffff;
    color: var(--primary);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
  }
  .footer-cta-btn--primary:hover {
    background: rgba(255,255,255,.94);
    border-color: rgba(255,255,255,.30);
    box-shadow: 0 4px 14px rgba(0,0,0,.16);
    transform: translateY(-1px);
  }
  .footer-cta-btn--primary svg {
    fill: currentColor;  /* hereda el navy → icon WhatsApp en navy */
    flex-shrink: 0;
    opacity: .95;
    width: 14px;
    height: 14px;
  }
  /* CTA secondary — más sobrio. Acompaña al primary blanco sin
     competir: borde un punto más visible, color más muted. */
  .footer-cta-btn--secondary {
    background: transparent;
    color: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.14);
  }
  .footer-cta-btn--secondary:hover {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.22);
    color: #fff;
  }
  .footer-cta-btn--secondary svg { transition: transform .18s ease; flex-shrink: 0; opacity: .65; width: 12px; height: 12px; }
  .footer-cta-btn--secondary:hover svg { transform: translateX(2px); opacity: 1; }

  /* ---------- Main link grid — más apretado ---------- */
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 36px;
    margin-bottom: 26px;
  }
  /* Brand h4 — Nivel 1 del footer: ancla institucional con presencia. */
  .footer-brand h4 {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 8px;
    color: #fff;
    letter-spacing: -.015em;
  }
  /* Tagline — Nivel 3: bajada con menor protagonismo que el nombre. */
  .footer-brand-tagline {
    font-size: 11.5px;
    color: rgba(255,255,255,.50);
    margin: 0 0 14px;
    line-height: 1.5;
    letter-spacing: .005em;
  }
  /* Footer lead (párrafo descriptivo largo) — Nivel 3:
     más muted y respirado para que no compita con la navegación. */
  .footer-lead {
    font-size: 12px;
    color: rgba(255,255,255,.42);
    line-height: 1.65;
    margin: 0 0 16px;
    max-width: 32ch;
  }
  /* Location pill — Nivel 3: badge discreto, no compite con el brand. */
  .footer-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px;
    font-size: 11px;
    color: rgba(255,255,255,.55);
  }
  .footer-location svg { width: 12px; height: 12px; stroke: rgba(255,255,255,.55); fill: none; stroke-width: 2; }

  /* Column titles — Nivel 2: encabezados de navegación con hairline
     debajo (border-bottom 1px) que marca el "section header" sin
     ensuciar. Color subido a rgba(255,255,255,.92) — casi blanco,
     queda apenas debajo del brand (#fff, Nivel 1). El hairline corre
     a lo ancho de la columna; padding-bottom + margin-bottom dan
     respiro entre el título, la línea y el primer link. */
  .footer-col h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.14);
    margin: 0 0 14px;
  }
  /* Lista de links — gap 8 → 10 para más respiro entre ítems. */
  .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .footer-col li { line-height: 1.4; }
  /* Links — Nivel 2/3: legibles pero por debajo de la jerarquía
     del brand. Opacity sube de .60 → .65 para dar mejor contraste
     pero sin competir con el #fff del brand. */
  .footer-col a {
    position: relative;
    display: inline-block;
    font-size: 12.5px;
    color: rgba(255,255,255,.65);
    font-weight: 500;
    text-decoration: none;
    transition: color .18s ease, transform .18s ease;
  }
  .footer-col a:hover { color: #fff; transform: translateX(2px); }

  .footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .footer-contact-list svg {
    width: 13px;
    height: 13px;
    stroke: rgba(255,255,255,.40);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    min-width: 13px;
    transition: stroke .18s ease;
  }
  .footer-contact-list a { font-size: 12px; }
  .footer-contact-list li:hover svg { stroke: rgba(255,255,255,.85); }

  /* WhatsApp directo — link premium: sin underline decorativo (el dotted
     anterior se sentía improvisado). El icono verde + peso tipográfico
     ya comunican el canal. Hover suma underline normal sutil. */
  .footer-contact-wa { margin-top: 2px; }
  .footer-contact-wa svg { stroke: none; fill: #25D366; width: 13px; height: 13px; opacity: .92; }
  .footer-contact-wa a {
    color: rgba(255,255,255,.92);
    font-weight: 600;
    text-decoration: none;
    transition: color .18s ease, transform .18s ease;
  }
  .footer-contact-wa a:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transform: translateX(2px);
  }

  /* ---------- Bottom strip — más fino ---------- */
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.05);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: rgba(255,255,255,.32);
    flex-wrap: wrap;
    gap: 8px;
  }
  .footer-bottom p { margin: 0; }
  .footer-bottom p:last-child {
    color: rgba(255,255,255,.40);
    letter-spacing: .005em;
  }
}

/* =========================================================
   LAYER: COMPONENTS
   ========================================================= */
@layer components {
  /* Category section — catalog entrance */
  #categorias {
    background:
      /* Keylight focal — brillo sutil (contenido) */
      radial-gradient(ellipse 50% 38% at 50% -6%, rgba(89,165,228,.18) 0%, rgba(61,143,214,.08) 35%, transparent 62%),
      /* Rim light superior-derecho */
      radial-gradient(ellipse 32% 26% at 90% 8%, rgba(120,190,240,.12) 0%, transparent 62%),
      /* Side wash medio-izquierda */
      radial-gradient(ellipse 40% 45% at 5% 45%, rgba(20,86,138,.08) 0%, transparent 55%),
      /* Shadow pool inferior-izquierdo — profundo */
      radial-gradient(ellipse 55% 48% at 10% 98%, rgba(0,4,12,.60) 0%, rgba(0,4,12,.22) 40%, transparent 65%),
      /* Shadow secundaria inferior-derecha */
      radial-gradient(ellipse 45% 38% at 95% 92%, rgba(2,6,16,.48) 0%, transparent 60%),
      /* Base profunda — match paleta de botones */
      linear-gradient(162deg,
        #0e3156 0%,
        #0a2543 22%,
        #051828 48%,
        #020a18 68%,
        #051c34 88%,
        #0b2846 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  /* Viewport-sized panel (desktop/tablet) — full-screen presence, viewport-aware */
  @media (min-width: 1025px) {
    #categorias {
      min-height: calc(100svh - var(--header-h, 76px));
      min-height: calc(100dvh - var(--header-h, 76px));
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: clamp(40px, 6vh, 72px);
      padding-bottom: clamp(40px, 6vh, 72px);
    }
    #categorias > .container {
      width: min(92%, var(--max));
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
    }
    #categorias .catalog-entrance-head { margin-bottom: clamp(24px, 4vh, 48px) }
    #categorias .cat-bento { gap: clamp(10px, 1.4vh, 16px) }
    /* Card images scale with viewport height — never overflow */
    #categorias .cat-card-img { min-height: auto; padding: clamp(12px, 1.8vh, 20px) 18px }
    #categorias .cat-card-img img { height: clamp(80px, 14vh, 140px) }
    #categorias .cat-card--primary .cat-card-img img { height: clamp(180px, 28vh, 280px) }
    #categorias .cat-card--secondary .cat-card-img img { height: clamp(100px, 18vh, 160px) }
  }
  /* Viñeta cinematográfica — oscurece bordes, eleva el centro */
  #categorias::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, rgba(0,0,0,.18) 78%, rgba(0,0,0,.32) 100%);
    pointer-events: none;
    z-index: 0;
  }
  /* Halo detrás del título — simula luz volumétrica */
  #categorias::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 780px;
    height: 360px;
    background:
      radial-gradient(ellipse at center,
        rgba(120,190,240,.14) 0%,
        rgba(61,143,214,.10) 30%,
        rgba(20,86,138,.04) 55%,
        transparent 75%);
    filter: blur(8px);
    pointer-events: none;
    z-index: 0;
  }
  #categorias > .container { position: relative; z-index: 1; }
  #categorias .section-title { color: var(--white); }
  #categorias .section-sub { color: rgba(255,255,255,.72); }

  /* Entrance header — editorial, refined */
  .catalog-entrance-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 40px;
    position: relative;
    z-index: 1;
  }
  /* Eyebrow: glass-white text with thin white flanking rules that fade outward */
  .catalog-entrance-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.72) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    text-shadow: 0 0 18px rgba(255,255,255,.12);
    margin-bottom: 18px;
  }
  .catalog-entrance-eyebrow::before,
  .catalog-entrance-eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    -webkit-text-fill-color: initial;
  }
  .catalog-entrance-eyebrow::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55));
  }
  .catalog-entrance-eyebrow::after {
    background: linear-gradient(90deg, rgba(255,255,255,.55), transparent);
  }
  .catalog-entrance-head .section-title {
    font-size: clamp(28px, 4vw, 40px);
    margin-bottom: 14px;
    /* Very soft halo — felt not seen */
    text-shadow: 0 0 60px rgba(61,143,214,.2), 0 1px 0 rgba(0,0,0,.2);
  }
  .catalog-entrance-head .section-title::after { content: none; }
  .catalog-entrance-head .section-sub {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255,255,255,.62);
    max-width: 520px;
    margin-inline: auto;
  }

  /* ── Bento grid — 6-column base for flexible layout ── */
  .cat-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto;
    gap: 14px;
    position: relative;
    z-index: 1;
  }

  /* ── Card base — image dominant, caption minimal ── */
  .cat-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
    background: var(--white);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transition: transform .4s var(--ease-out-expo), box-shadow .4s var(--ease-out-expo), border-color var(--duration-normal) ease;
  }
  .cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,.14);
    border-color: rgba(20,86,138,.2);
  }

  /* Image zone — dominant */
  .cat-card-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: var(--white);
    border-bottom: 1px solid var(--primary-06);
    min-height: 180px;
  }
  .cat-card-img img {
    height: 140px;
    width: auto;
    max-width: 82%;
    object-fit: contain;
    transition: transform var(--duration-slow) var(--ease-out-expo);
  }
  .cat-card:hover .cat-card-img img { transform: scale(1.04); }
  .cat-card-img img { transition: transform .5s var(--ease-out-expo), opacity var(--duration-slow) ease; }

  /* Text zone — compact caption */
  .cat-card-body {
    flex-shrink: 0;
    padding: 14px 18px 16px;
  }
  .cat-card h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    letter-spacing: -.015em;
    line-height: 1.2;
  }
  .cat-card p {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 4px 0 0;
  }

  /* Action — always visible */
  .cat-card-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .02em;
    transition: gap var(--duration-fast) ease;
  }
  .cat-card-action svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.5; flex-shrink: 0; transition: transform var(--duration-fast) ease; }
  .cat-card:hover .cat-card-action svg { transform: translateX(3px); }

  /* ── Primary card (Impresoras) — horizontal hero ── */
  .cat-card--primary {
    grid-column: 1 / 5;
    grid-row: 1 / 3;
    flex-direction: row;
  }
  .cat-card--primary .cat-card-img {
    flex: 0 0 58%;
    padding: 24px;
    background: var(--white);
    border-bottom: none;
    border-right: 1px solid var(--primary-06);
  }
  .cat-card--primary .cat-card-img img {
    height: 280px;
    width: auto;
    max-width: 88%;
  }
  .cat-card--primary .cat-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 28px 28px 24px;
  }
  .cat-card--primary h3 {
    font-size: 26px;
    letter-spacing: -.025em;
    margin-bottom: 8px;
    line-height: 1.1;
  }
  .cat-card--primary p {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 0;
  }
  .cat-card--primary .cat-card-action {
    font-size: 13px;
    margin-top: 14px;
  }

  /* ── Secondary card (Lectores) — vertical, taller image ── */
  .cat-card--secondary {
    grid-column: 5 / 7;
    grid-row: 1 / 3;
  }
  .cat-card--secondary .cat-card-img { padding: 28px 24px; }
  .cat-card--secondary .cat-card-img img { height: 140px; width: auto; }
  .cat-card--secondary h3 { font-size: 18px; letter-spacing: -.015em; }
  .cat-card--secondary p { font-size: 13px; }

  /* ── Bottom row — 3 compact cards, no description ── */
  .cat-bento > .cat-card:nth-child(3) { grid-column: 1 / 3; grid-row: 3; }
  .cat-bento > .cat-card:nth-child(4) { grid-column: 3 / 5; grid-row: 3; }
  .cat-bento > .cat-card:nth-child(5) { grid-column: 5 / 7; grid-row: 3; }

  /* ── Responsive ── */
  @media (max-width: 1024px) {
    .cat-bento { grid-template-columns: 1fr 1fr; }
    .cat-card--primary {
      grid-column: 1 / -1;
      grid-row: auto;
    }
    .cat-card--primary .cat-card-img { flex: 0 0 50%; padding: 28px; }
    .cat-card--primary .cat-card-img img { max-height: 200px; }
    .cat-card--secondary { grid-column: auto; grid-row: auto; }
    .cat-bento > .cat-card:nth-child(3),
    .cat-bento > .cat-card:nth-child(4),
    .cat-bento > .cat-card:nth-child(5) { grid-column: auto; grid-row: auto; }
    .cat-bento > .cat-card:nth-child(5) { grid-column: 1 / -1; }
  }
  @media (max-width: 600px) {
    /* Bento gap subido de 8 → 14: el gap previo era menor que el padding
       interno de las cards (14-18px), generando sensación de cards pegadas. */
    .cat-bento { grid-template-columns: 1fr; gap: 14px; }
    .cat-card--primary { flex-direction: row; }
    .cat-card--primary .cat-card-img { flex: 0 0 42%; padding: 20px; }
    .cat-card--primary .cat-card-img img { max-height: 140px; }
    .cat-card--primary .cat-card-body { padding: 20px 20px 20px 0; }
    .cat-card--primary h3 { font-size: 20px; }
    .cat-card--primary p { font-size: 13px; }
    .cat-card-img { padding: 20px 16px; }
    .cat-card-img img { max-height: 100px; }
    .cat-bento > .cat-card:nth-child(3),
    .cat-bento > .cat-card:nth-child(4),
    .cat-bento > .cat-card:nth-child(5) { grid-column: auto; }
  }

  /* Brand slider */
  .brands-inline { margin-top: 34px; overflow: hidden; }
  .brands-inline-title {
    display: block;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .brand-slider {
    position: relative;
    overflow: hidden;
    padding: 8px 0 2px;
    border-top: 1px solid var(--primary-08);
    border-bottom: 1px solid var(--primary-08);
  }
  .brand-slider::before,
  .brand-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    z-index: 2;
    pointer-events: none;
  }
  .brand-slider::before { left: 0; background: linear-gradient(90deg, #fff 12%, rgba(255,255,255,0)); }
  .brand-slider::after { right: 0; background: linear-gradient(270deg, #fff 12%, rgba(255,255,255,0)); }
  .brand-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: brandScroll 30s linear infinite;
  }
  .brand-slider:hover .brand-track { animation-play-state: paused; }
  .brand-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 65px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    flex-shrink: 0;
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }
  .brand-pill:hover { transform: translateY(-1px); }
  .brand-pill img {
    display: block;
    max-width: 140px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform var(--duration-normal) ease;
  }
  .brand-pill:hover img { transform: scale(1.04); }
  .brand-logo-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--primary-40);
    line-height: 1;
    white-space: nowrap;
    transition: color var(--duration-normal) ease, transform var(--duration-normal) ease;
  }
  .brand-pill:hover .brand-logo-text { color: var(--primary); transform: scale(1.04); }
  /* Zebra: real logo uses condensed bold italic similar to Barlow Condensed */
  .brand-logo-text.is-zebra { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800; font-style: italic; letter-spacing: .03em; text-transform: uppercase; }
  /* Honeywell: real logo uses DIN-style geometric bold caps */
  .brand-logo-text.is-honeywell { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  /* SATO: real logo uses wide-tracked heavy geometric all caps */
  .brand-logo-text.is-sato { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
  /* TSC: real logo uses condensed bold italic */
  .brand-logo-text.is-tsc { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 800; font-style: italic; letter-spacing: .02em; text-transform: uppercase; }
  /* cab: real logo uses very thin/light lowercase — distinctive identity */
  .brand-logo-text.is-cab { font-family: 'Comfortaa', cursive; font-size: 26px; font-weight: 300; letter-spacing: .1em; text-transform: lowercase; }
  /* Datalogic: real logo uses clean geometric uppercase */
  .brand-logo-text.is-datalogic { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  /* Epson: real logo uses geometric sans-serif uppercase (Futura-like) */
  .brand-logo-text.is-epson { font-family: 'Rajdhani', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  /* Brother: real logo uses rounded lowercase — Comfortaa is closest */
  .brand-logo-text.is-brother { font-family: 'Comfortaa', cursive; font-size: 20px; font-weight: 700; text-transform: lowercase; letter-spacing: .01em; }
  /* 3NSTAR: real logo uses heavy condensed uppercase */
  .brand-logo-text.is-3nstar { font-family: 'Archivo Black', sans-serif; font-size: 18px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
  /* Datamax-O'Neil: real logo uses medium weight clean sans */
  .brand-logo-text.is-datamax { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
  /* Avery Dennison: clean geometric bold tracking */
  .brand-logo-text.is-avery { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  /* UPM: condensed bold uppercase */
  .brand-logo-text.is-upm { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  /* RONGTA: heavy condensed caps */
  .brand-logo-text.is-rongta { font-family: 'Archivo Black', sans-serif; font-size: 17px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
  /* FASSON: tracked geometric caps */
  .brand-logo-text.is-fasson { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
  /* Printex: medium geometric caps */
  .brand-logo-text.is-printex { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  /* Arclad: light tracked caps */
  .brand-logo-text.is-arclad { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

  /* Featured grid */
  .featured-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0 20px;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
  }
  .featured-grid::-webkit-scrollbar { display: none; }
  .featured-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }
  .carousel-track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex-wrap: nowrap;
  }
  .featured-grid .featured-card {
    flex: 0 0 290px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }
  .featured-grid .featured-card:hover { transform: translateY(-2px); }
  .featured-carousel-wrap {
    position: relative;
    padding: 0 20px;
  }
  .featured-carousel-wrap::before,
  .featured-carousel-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 4;
    pointer-events: none;
  }
  .featured-carousel-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--surface) 0%, transparent 100%);
  }
  .featured-carousel-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--surface) 0%, transparent 100%);
  }
  .featured-nav {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--primary-10);
    box-shadow: 0 4px 16px var(--primary-10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    color: var(--primary);
    font-size: 20px;
    transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow .2s, opacity var(--duration-normal);
  }
  .featured-nav:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 4px 16px var(--primary-12); }
  .featured-nav:active { transform: translateY(-50%) scale(.95); }
  .featured-nav:disabled { opacity: .3; }
  .featured-nav--prev { left: 0; }
  .featured-nav--next { right: 0; }
  .carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 0;
  }
  .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-15);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .3s, transform var(--duration-normal) var(--ease-out-expo);
  }
  .carousel-dot.is-active {
    background: var(--primary);
    transform: scale(1.3);
  }
  .carousel-pause-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--primary-15);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .2s, border-color .2s, color var(--duration-fast);
  }
  .carousel-pause-btn svg { width: 10px; height: 10px; display: block; }
  .carousel-pause-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
  .featured-card {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
  }
  .featured-card .product-head { display: contents; }
  .featured-card .product-head span {
    font-size: 10px;
    order: -2;
    text-align: center;
    padding: 9px 14px;
    display: block;
    color: #fff;
    letter-spacing: .07em;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--primary);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    margin: -1px -1px 0 -1px;
    width: calc(100% + 2px);
  }
  .featured-card .catalog-card-photo { order: -1; background: var(--white); height: 140px; object-fit: contain; object-position: center; padding: 10px; }
  .featured-card .product-head h3 {
    font-size: 18px;
    min-height: calc(2 * 1.2em);
    display: flex;
    align-items: flex-end;
    text-align: center;
    justify-content: center;
    padding: 14px 16px 8px;
    margin: 0;
  }
  .featured-card .product-body { padding: 10px 16px 16px; display: flex; flex-direction: column; flex: 1; }
  .featured-card .product-body > p { font-size: 12.5px; line-height: 1.4; text-align: center; color: var(--muted); }
  .featured-card .feature-specs { display: none; }
  .featured-card .feature-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: auto; padding-top: 12px; }
  .featured-card .feature-actions .btn { width: 100%; min-height: 36px; padding: 8px 12px; border-radius: 10px; justify-content: center; font-size: 12.5px; }
  .featured-card .feature-actions .btn span { white-space: nowrap; }
  .featured-card details { display: none !important; }
  @media (max-width: 768px) { .featured-grid .featured-card { flex: 0 0 260px; } .featured-nav { display: none; } }
  .featured-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent-08);
    color: var(--accent) !important;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
    width: fit-content;
    align-self: center;
    box-shadow: none;
  }
  .featured-badge::before { content: none; }
  .feature-specs { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
  .feature-specs li { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: flex-start; }
  .feature-specs li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--accent);
    flex: 0 0 5px;
    margin-top: 7px;
  }
  .feature-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .feature-specs li { color: rgba(102,112,133,.7); }

  /* Catalog section background — cinematográfico navy profundo (match buttons) */
  #catalogo {
    background:
      /* Keylight focal — brillo sutil superior-centro (más contenido) */
      radial-gradient(ellipse 55% 42% at 50% -8%, rgba(89,165,228,.16) 0%, rgba(61,143,214,.06) 40%, transparent 65%),
      /* Rim light lateral-derecho alto */
      radial-gradient(ellipse 30% 28% at 92% 12%, rgba(120,190,240,.10) 0%, transparent 60%),
      /* Side fill izquierdo-medio */
      radial-gradient(ellipse 38% 45% at 5% 55%, rgba(20,86,138,.08) 0%, transparent 55%),
      /* Shadow pool inferior-izquierda — profundo */
      radial-gradient(ellipse 50% 42% at 8% 96%, rgba(0,4,12,.55) 0%, transparent 65%),
      /* Shadow secundaria inferior-derecha */
      radial-gradient(ellipse 42% 36% at 95% 94%, rgba(2,6,16,.48) 0%, transparent 60%),
      /* Base asimétrica profunda — navy → casi negro → navy (match palette de botones) */
      linear-gradient(165deg,
        #0e3156 0%,
        #0a2543 22%,
        #051828 48%,
        #020a18 68%,
        #051c34 88%,
        #0b2846 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  /* Viñeta sutil + halo del título en #catalogo */
  #catalogo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 92% 72% at 50% 50%, transparent 42%, rgba(0,0,0,.16) 80%, rgba(0,0,0,.28) 100%);
    pointer-events: none;
    z-index: 0;
  }
  #catalogo > .container { position: relative; z-index: 1; }
  #catalogo .section-title { color: var(--white); }
  #catalogo .section-title + p { color: rgba(255,255,255,.7); }
  #catalogo .category-divider h3 { color: var(--white); }
  #catalogo .category-divider p { color: rgba(255,255,255,.85); }
  #catalogo .category-divider { border-bottom-color: rgba(255,255,255,.25); }
  #catalogo .services-panel { background: rgba(255,255,255,.95); border-color: var(--primary-08); }
  #catalogo .services-panel-head span { color: var(--accent); background: var(--accent-08); }
  #catalogo .services-panel-head h3 { color: var(--primary); }
  #catalogo .services-panel-head p { color: var(--muted); }
  #catalogo .services-item { background: var(--white); border-color: var(--primary-08); }
  #catalogo .services-item strong { color: var(--primary); }
  #catalogo .services-item p { color: var(--muted); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) input[type="search"] { background: var(--white-12); border-color: var(--white-22); color: var(--white); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) input[type="search"]::placeholder { color: rgba(255,255,255,.55); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .filter-btn { background: rgba(255,255,255,.13); border: 1.5px solid var(--white-22); color: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,.12); padding: 10px 22px; font-size: 14px; transition: all .25s var(--ease-out-expo); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .filter-btn:hover { background: var(--white-24); border-color: rgba(255,255,255,.4); color: var(--white); box-shadow: 0 4px 14px rgba(0,0,0,.15); transform: translateY(-1px) scale(1.01); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .filter-btn:active { transform: translateY(0) scale(.97); box-shadow: 0 1px 6px rgba(0,0,0,.15); transition-duration: .1s; }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .filter-btn.active { background: var(--white); color: var(--primary); border-color: var(--white); box-shadow: 0 4px 16px rgba(0,0,0,.16); font-weight: 700; }

  /* Product cards (catalog) — default vertical layout (3+ cards) */
  .product-card {
    background: var(--white);
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1.5px solid rgba(15,59,99,.07);
    box-shadow: var(--shadow-soft);
    transition: transform .35s var(--ease-out-expo), border-color var(--duration-normal) ease, box-shadow .35s var(--ease-out-expo);
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    min-width: 0;
  }
  /* Horizontal layout for rows with 1-2 cards */
  .category-cards-row--horizontal .product-card {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr auto;
    max-width: 680px;
  }
  .category-cards-row--horizontal .product-card > .catalog-card-photo { grid-column: 1; grid-row: 1 / -1; }
  .category-cards-row--horizontal .product-card > .product-head { grid-column: 2; grid-row: 1; }
  .category-cards-row--horizontal .product-card > .product-body { grid-column: 2; grid-row: 2 / -1; }
  .category-cards-row--horizontal .product-card > .models-wrapper { grid-column: 1 / -1; }
  .product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
    opacity: 0;
    transition: opacity .4s ease;
    background: linear-gradient(135deg, var(--accent-03) 0%, var(--accent-08) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .product-card:hover { transform: translateY(-3px) scale(1.008); box-shadow: var(--shadow-strong); border-color: var(--accent-18); }
  .product-card:active { transform: translateY(0) scale(.994); box-shadow: 0 4px 16px var(--primary-12); transition-duration: .1s; }
  .product-card:hover::after { opacity: 1; }
  .product-card:hover .catalog-card-photo { transform: scale(1.03); }
  .product-card:hover .models-toggle-btn { background: var(--accent); color: var(--white); border-color: var(--accent); }
  .catalog-card-photo {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    background: var(--white);
    padding: 20px;
    transition: transform var(--duration-slow) var(--ease-out-expo);
    max-height: 220px;
  }
  /* Horizontal photo fills height */
  .category-cards-row--horizontal .catalog-card-photo {
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
  }
  .product-head {
    padding: 16px 20px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--white);
  }
  .product-head span {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent);
    padding: 0;
    border-radius: 0;
    background: none;
    align-self: center;
    box-shadow: none;
    white-space: nowrap;
    text-align: center;
  }
  .product-head h3 { font-size: 18px; font-weight: 800; color: var(--primary); margin: 0; letter-spacing: -.02em; line-height: 1.2; padding-bottom: 10px; border-bottom: 1px solid var(--primary-08); text-align: center; width: 100%; }
  .product-head h3 small { font-size: 0.72em; font-weight: 600; color: var(--muted); display: block; margin-top: 2px; }
  .product-body { padding: 10px 20px 20px; display: flex; flex-direction: column; flex: 1; text-align: center; background: linear-gradient(180deg, #fff 0%, #f4f8fd 100%); }
  .product-body > p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; flex: 1; }
  .product-card:not(.featured-card):not(.is-expanded) .product-body::after {
    content: "Ver productos →";
    display: block;
    text-align: center;
    padding: 8px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .01em;
    border: none;
    transition: color .2s ease, letter-spacing var(--duration-fast) ease;
    margin-top: auto;
  }
  .product-card:not(.featured-card):not(.is-expanded):hover .product-body::after {
    color: var(--accent);
    letter-spacing: .03em;
  }
  .product-card.hide { display: none; }
  .product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
  }

  /* Product details (accordion inside cards) */
  .product-card details { border-top: 1px solid var(--primary-06); transform-origin: top center; backface-visibility: hidden; }
  .product-card details summary {
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
  }
  .product-card details summary::-webkit-details-marker { display: none; }
  .product-card details summary::after {
    content: "+";
    font-size: 18px;
    font-weight: 500;
    color: var(--muted);
    flex: 0 0 auto;
    transition: transform var(--duration-fast) var(--ease-out-expo);
  }
  .product-card details[open] summary::after { content: "\2212"; transform: rotate(180deg); }
  .product-card details summary:hover { background: var(--surface); color: var(--accent); }
  .detail-card {
    padding: 4px 10px 14px;
  }
  .detail-card-inner {
    background: var(--surface);
    border-radius: var(--radius-inner);
    padding: 16px;
    border: 1px solid var(--primary-06);
  }
  .detail-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .detail-image-wrap {
    max-width: 420px;
    margin: 0 auto;
  }
  .detail-image-wrap img {
    width: 100%;
    border-radius: 14px;
    background: var(--white);
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: 12px;
    border: 1px solid var(--primary-06);
  }
  .detail-meta strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 8px;
  }
  .detail-meta strong + ul { margin-bottom: 16px; }
  .detail-meta ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .detail-meta li { font-size: 13px; color: var(--text); display: flex; gap: 8px; line-height: 1.5; padding: 3px 0; border-bottom: 1px solid var(--primary-03); }
  .detail-meta li:last-child { border-bottom: none; }
  .detail-meta li::before {
    content: none;
  }
  .detail-actions { margin-top: 16px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
  .btn-whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
  }
  .btn-whatsapp:hover { background: #1da851; border-color: #1da851; }
  .btn-whatsapp svg { width: 18px; height: 18px; fill: #fff; stroke: none; }
  .spec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .spec-list li { font-size: 13px; color: var(--text); }

  /* Models list (toggle group) */
  .models-wrapper { padding: 10px 20px 16px; margin-top: auto; }
  .models-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-radius: var(--radius-inner);
    background: linear-gradient(135deg, #134468 0%, #0a2c4a 100%);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--white);
    cursor: pointer;
    transition: transform .3s var(--ease-out-expo), box-shadow .3s ease, background var(--duration-normal) ease;
    box-shadow: 0 3px 12px var(--accent-20);
    letter-spacing: .01em;
  }
  .models-toggle-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-28); background: linear-gradient(135deg, #195a8f 0%, #0a2a48 100%); }
  .models-toggle-btn.is-open { background: linear-gradient(135deg, #0f3b63 0%, #0f3b63 100%); }

  /* Card expandible – click para ver productos */
  .product-card:not(.featured-card) { cursor: pointer; }
  .featured-card { cursor: pointer; }
  .product-card.is-expanded { grid-column: 1 / -1; cursor: default; }

  /* Expanded header — executive-tallado (matches .commercial-box / .contact-info-item):
     left accent bar, outlined image frame, editorial eyebrow, refined hierarchy */
  .product-card.is-expanded .expanded-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 64px 22px 30px;
    border-bottom: 1px solid var(--primary-06);
    margin-bottom: 0;
    background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
    position: relative;
    overflow: hidden;
  }
  /* Top accent hairline — gradient fade through primary → accent → primary */
  .product-card.is-expanded .expanded-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--primary) 22%,
      var(--accent) 50%,
      var(--primary) 78%,
      transparent 100%);
    opacity: .72;
  }
  /* Left accent bar — saturated (active state, no hover) */
  .product-card.is-expanded .expanded-header::after {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 100%);
  }
  /* Product image in refined outlined frame (matches icon system) */
  .product-card.is-expanded .expanded-header img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--white);
    padding: 10px;
    border: 1.5px solid var(--primary-14);
    box-shadow: 0 1px 2px var(--primary-04), 0 6px 14px var(--primary-06);
    position: relative;
    z-index: 1;
  }
  .product-card.is-expanded .expanded-header-text {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
  }
  /* Eyebrow — editorial uppercase with wide tracking */
  .product-card.is-expanded .expanded-header-text span {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--accent);
    margin-bottom: 6px;
  }
  /* Title — tight kerning, cleaner weight */
  .product-card.is-expanded .expanded-header-text h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--primary);
    margin: 0 0 4px;
    line-height: 1.2;
    letter-spacing: -.018em;
  }
  .product-card.is-expanded .expanded-header-text h3 br { display: none; }
  .product-card.is-expanded .expanded-header-text h3 small {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--muted);
    margin-left: 6px;
    letter-spacing: -.005em;
  }
  .product-card.is-expanded .expanded-header-text p {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
    max-width: 72ch;
  }
  /* Ocultar secciones originales en estado expandido */
  .product-card.is-expanded .catalog-card-photo,
  .product-card.is-expanded .product-head,
  .product-card.is-expanded .product-body > p { display: none; }
  .product-body > .material-group { display: none; }
  .product-card.is-expanded .product-body { padding: 0; }

  /* Grilla de productos (tiles) */
  .models-grid {
    display: none;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 20px 24px;
    justify-content: center;
  }
  .product-card.is-expanded .models-grid {
    display: flex;
    animation: gridFadeIn .35s var(--ease-out-expo) both;
  }
  @keyframes gridFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .product-card.is-expanded .models-grid .model-tile {
    animation: tileStagger .3s var(--ease-out-expo) both;
  }
  .product-card.is-expanded .models-grid .model-tile:nth-child(1) { animation-delay: .05s; }
  .product-card.is-expanded .models-grid .model-tile:nth-child(2) { animation-delay: .1s; }
  .product-card.is-expanded .models-grid .model-tile:nth-child(3) { animation-delay: .15s; }
  .product-card.is-expanded .models-grid .model-tile:nth-child(4) { animation-delay: .2s; }
  .product-card.is-expanded .models-grid .model-tile:nth-child(5) { animation-delay: .25s; }
  .product-card.is-expanded .models-grid .model-tile:nth-child(n+6) { animation-delay: .3s; }
  @keyframes tileStagger {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Material group subheaders inside tile grid */
  .models-grid .material-group {
    width: 100%;
    flex-basis: 100%;
    padding: 8px 0 4px;
    margin-top: 8px;
    border-bottom: 1px solid var(--primary-08);
  }
  .models-grid .material-group:first-child { margin-top: 0; }
  .material-group-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
    margin: 0 0 2px;
  }
  .material-group-desc {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
  }

  /* Tile individual */
  .model-tile {
    background: var(--white);
    border: 1px solid var(--primary-06);
    border-radius: var(--radius-card);
    padding: 0;
    display: flex;
    flex-direction: column;
    width: calc((100% - 16px * 5) / 6);
    min-width: 140px;
    max-width: calc((100% - 16px * 2) / 3);
    box-sizing: border-box;
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease;
  }
  .model-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: rgba(20,86,138,.14); }
  .model-tile-photo-wrap {
    position: relative;
    background: var(--white);
    padding: 20px 20px 0;
  }
  /* Technical badges overlay */
  .tile-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
  }
  .tile-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(15,59,99,.08);
    color: var(--primary);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .2s ease, color .2s ease;
  }
  .tile-badge:hover {
    background: var(--primary);
    color: var(--white);
  }
  .tile-badge svg { flex-shrink: 0; }
  .model-tile img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
  }
  .model-tile-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
    padding: 12px 16px 10px;
    line-height: 1.3;
    letter-spacing: -.01em;
    min-height: calc(2 * 1.3em + 12px + 10px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, #f4f7fb 100%);
  }
  .tile-separator {
    height: 1px;
    background: var(--primary-06);
    margin: 0;
  }
  .tile-oneliner {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
    padding: 10px 16px 0;
    flex: 1;
    text-align: center;
  }
  .tile-more-btn {
    margin: 10px 16px 14px;
    padding: 0;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: none;
    transition: color .2s ease, gap var(--duration-fast) ease;
    width: calc(100% - 32px);
    letter-spacing: .01em;
    font-family: inherit;
  }
  .tile-more-btn svg {
    width: 14px; height: 14px; min-width: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--duration-fast) ease;
  }
  .tile-more-btn:hover {
    color: var(--accent);
  }
  .tile-more-btn:hover svg { transform: translateX(2px); }
  .tile-more-btn:active { color: var(--primary); }
  .model-tile strong {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--primary);
    display: block;
    margin: 10px 0 4px;
  }
  .model-tile strong:first-of-type { margin-top: 0; }
  .model-tile ul { list-style: none; padding: 0; margin: 0; }
  .model-tile li {
    font-size: 12px;
    color: var(--text);
    padding: 2px 0;
    display: flex;
    gap: 5px;
    line-height: 1.4;
  }
  .model-tile li::before { content: "•"; color: var(--accent); flex-shrink: 0; }
  .model-tile li b { font-weight: 600; color: var(--primary); }
  /* Specs siempre visibles (sin botón) */
  .tile-specs-btn { display: none; }
  .tile-specs-content { display: block; max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--primary-12) transparent; }
  .tile-specs-content::-webkit-scrollbar { width: 4px; }
  .tile-specs-content::-webkit-scrollbar-thumb { background: var(--primary-15); border-radius: 4px; }

  .model-tile .detail-actions { margin-top: auto; padding-top: 14px; gap: 8px; flex-wrap: wrap; }
  .model-tile .consultar-equipo { width: 100%; justify-content: center; font-size: 13px; }

  /* ── Tile Modal ── */
  .tile-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(7,17,29,.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .28s ease;
  }
  .tile-modal-overlay.is-open { opacity: 1; }

  .tile-modal {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-card);
    box-shadow: 0 32px 64px rgba(7,17,29,.28), 0 0 0 1px var(--primary-04);
    max-width: 900px;
    width: 100%;
    height: 74vh;
    max-height: 580px;
    overflow: hidden;
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition: transform .32s var(--ease-out-expo), opacity .25s ease;
  }
  .tile-modal-overlay.is-open .tile-modal { transform: translateY(0) scale(1); opacity: 1; }

  /* Close button — circular minimal, top-right del modal */
  .tile-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--primary-08);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(15,59,99,.05);
    transition: color .2s, background .2s, border-color var(--duration-fast), box-shadow .2s, transform .2s;
  }
  .tile-modal-close:hover {
    color: var(--primary);
    background: var(--white);
    border-color: var(--primary-18);
    box-shadow: 0 4px 14px rgba(15,59,99,.12);
    transform: scale(1.05);
  }

  /* Counter — top-right del modal, con espacio claro para el close */
  .tile-modal-counter {
    position: absolute;
    top: 22px;
    right: 64px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .04em;
    white-space: nowrap;
    z-index: 10;
    opacity: .65;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    border: 1px solid var(--primary-04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Navigation arrows — afuera del modal, sobre el overlay
     Look refinado: pill vertical grande con blur, muy separado del modal */
  .tile-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,.22);
    width: 48px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    transition: background .25s, border-color .25s, opacity .25s, transform var(--duration-fast);
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
  }
  .tile-modal-nav:hover:not(:disabled) {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.38);
    transform: translateY(-50%) scale(1.05);
  }
  .tile-modal-nav:active:not(:disabled) { transform: translateY(-50%) scale(.96); }
  .tile-modal-nav:disabled {
    opacity: .18;
    cursor: default;
    box-shadow: none;
  }
  .tile-modal-nav svg { width: 22px; height: 22px; stroke-width: 2; }
  /* Flechas pegadas al borde del modal:
     50% - (media anchura del modal) - (ancho flecha + gap).
     El max() clampa a 16px cuando el viewport es tan angosto que el modal llena todo. */
  .tile-modal-prev { left: max(16px, calc(50% - min(450px, 50vw - 24px) - 60px)); }
  .tile-modal-next { right: max(16px, calc(50% - min(450px, 50vw - 24px) - 60px)); }

  /* Content wrapper */
  .tile-modal-content {
    display: flex !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100%;
  }

  /* LEFT: photo + actions */
  .tile-modal-left {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f6f9fc 0%, #eef3f8 100%);
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    padding: 28px 24px 20px;
    overflow: hidden;
  }
  .tile-modal-left img {
    flex: 1;
    width: 100%;
    min-height: 0;
    object-fit: contain;
    border-radius: var(--radius-inner);
    padding: 20px;
    background: var(--white);
    border: none;
    box-shadow: 0 2px 12px var(--primary-04);
    margin-bottom: 16px;
    cursor: zoom-in;
    transition: box-shadow var(--duration-fast);
  }
  .tile-modal-left img:hover { box-shadow: 0 4px 20px var(--primary-08); }
  .tile-modal-left .detail-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .tile-modal-left .consultar-equipo {
    font-size: 13px;
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    border-radius: var(--radius-inner);
  }
  .tile-modal-left .btn-whatsapp {
    font-size: 13px;
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    border-radius: var(--radius-inner);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
  }

  /* RIGHT: info */
  .tile-modal-right {
    flex: 1;
    /* Block layout — no inner flex column. With flex column +
       flex-shrink:0 on children, the top block stayed visually pinned and
       only the bottom child scrolled. As a plain block with overflow-y,
       the entire column scrolls as one continuous flow. */
    display: block;
    padding: 0 28px 0 24px;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    background: var(--white);
    scrollbar-width: thin;
    scrollbar-color: var(--primary-10) transparent;
  }
  .tile-modal-right::-webkit-scrollbar { width: 6px; }
  .tile-modal-right::-webkit-scrollbar-track { background: transparent; }
  .tile-modal-right::-webkit-scrollbar-thumb { background: var(--primary-12); border-radius: 4px; min-height: 40px; }
  .tile-modal-right::-webkit-scrollbar-thumb:hover { background: var(--primary-18); }
  /* Strip any inner overflow / sticky / flex constraints on every direct
     descendant — the .tile-modal-right scroll handles everything as one.
     Critical: prevents top-block, summary, includes, specs, etc. from
     becoming their own scroll/sticky containers. */
  .tile-modal-right > *,
  .tile-modal-right .tile-modal-top-block,
  .tile-modal-right .tile-modal-summary,
  .tile-modal-right .tile-modal-details,
  .tile-modal-right .tile-modal-specs,
  .tile-modal-right .tile-modal-specs-scroll,
  .tile-modal-right .category-includes,
  .tile-modal-right .key-data {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    flex: none !important;
    flex-shrink: 1 !important;
  }

  /* Top block — brand + name + oneliner as cohesive header */
  .tile-modal-top-block {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 0 14px;
    border-bottom: 1px solid var(--primary-06);
    margin-bottom: 2px;
  }
  .tile-modal-right .model-tile-name {
    font-size: 19px;
    font-weight: 800;
    margin: 3px 0 0;
    padding: 0;
    text-align: left;
    border-bottom: none;
    background: none;
    line-height: 1.2;
    color: var(--primary);
    letter-spacing: -.015em;
  }
  .tile-modal-right .tile-oneliner {
    font-size: 13px;
    color: var(--muted);
    margin: 6px 0 0;
    text-align: left;
    padding: 0;
    line-height: 1.5;
    border-bottom: none;
    max-width: 380px;
  }

  /* Category includes — aclaración transversal de valor por categoría.
     Actualmente aplica a impresoras + lectores. El componente es category-agnostic:
     el copy lo inyecta JS según card.dataset.category.
     Se ubica entre el top-block y las specs. */
  .category-includes {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 14px 12px 14px;
    margin: 10px 0 6px;
    background: linear-gradient(135deg, rgba(20,86,138,.05) 0%, rgba(15,59,99,.04) 100%);
    border: 1px solid var(--primary-08);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
  }
  .category-includes-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--accent);
    margin-top: 1px;
  }
  .category-includes-icon svg { width: 100%; height: 100%; display: block; }
  .category-includes-body { min-width: 0; flex: 1; }
  .category-includes-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 2px;
  }
  .category-includes-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
    margin: 0;
    font-weight: 500;
  }

  /* Specs container — no longer a scroll container of its own.
     The whole .tile-modal-right scrolls; specs flow naturally inside. */
  .tile-modal-specs-scroll {
    padding: 4px 0 18px 0;
  }
  .tile-modal-specs-scroll ul { margin: 0; padding: 0; list-style: none; }
  .tile-modal-specs-scroll li {
    display: flex;
    gap: 8px;
    font-size: 13px;
    padding: 5px 0;
    line-height: 1.5;
    color: var(--text);
    border-bottom: 1px solid var(--primary-03);
  }
  .tile-modal-specs-scroll li:last-child { border-bottom: none; }
  .tile-modal-specs-scroll li::before { content: none; }
  .tile-modal-specs-scroll li b {
    font-weight: 600;
    color: var(--primary);
    flex-shrink: 0;
    min-width: 0;
  }
  .tile-modal-right strong {
    font-size: 10.5px;
    margin: 16px 0 4px;
    display: block;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
    font-weight: 700;
  }
  .tile-modal-right strong:first-of-type { margin-top: 8px; }
  .spec-comp-heading { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--primary-08); color: var(--muted); font-size: 10px; }
  .spec-complementary { margin-top: 0; }
  .spec-complementary li { color: var(--muted); font-size: 12.5px; }

  /* ── Comparator ── */
  .tile-compare-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    height: 26px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    border: 1px solid var(--primary-10);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px 0 8px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-size: 10.5px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: .02em;
    white-space: nowrap;
  }
  .tile-compare-btn svg { flex-shrink: 0; }
  .tile-compare-btn:hover { background: var(--white); color: var(--primary); border-color: var(--primary-18); }
  .tile-compare-btn.is-selected { background: var(--accent); color: var(--white); border-color: var(--accent); }
  .tile-compare-btn.is-selected svg { stroke: var(--white); }

  /* Sticky bar */
  .compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--white);
    border-top: 1px solid var(--primary-08);
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    padding: 12px 24px;
    transform: translateY(100%);
    transition: transform .3s var(--ease-out-expo);
  }
  .compare-bar.is-visible { transform: translateY(0); }
  .compare-bar-inner { display: flex; align-items: center; gap: 12px; max-width: var(--max); margin: 0 auto; }
  .compare-bar-pills { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
  .compare-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--accent-08); color: var(--primary); border-radius: 999px; font-size: 13px; font-weight: 600; }
  .compare-pill button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
  .compare-pill button:hover { color: var(--primary); }
  .compare-bar-btn { white-space: nowrap; font-size: 13px; }
  .compare-bar-clear { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; padding: 4px; }
  .compare-bar-clear:hover { color: var(--primary); }

  /* Comparison overlay */
  .compare-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(7,17,29,.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .25s ease;
  }
  .compare-overlay.is-open { opacity: 1; }
  .compare-modal {
    background: var(--white);
    border-radius: var(--radius-card);
    box-shadow: 0 24px 48px rgba(0,0,0,.2);
    max-width: 860px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(12px);
    opacity: 0;
    transition: transform .3s var(--ease-out-expo), opacity .25s ease;
  }
  .compare-overlay.is-open .compare-modal { transform: translateY(0); opacity: 1; }
  .compare-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(255,255,255,.85);
    border: 1px solid var(--primary-06);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--muted);
    cursor: pointer;
    transition: color .2s;
  }
  .compare-close:hover { color: var(--primary); }

  /* Header */
  .compare-header {
    display: grid;
    grid-template-columns: 140px repeat(var(--compare-cols, 2), 1fr);
    gap: 1px;
    background: var(--primary-06);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    overflow: hidden;
  }
  .compare-label-col { background: #f5f7fa; padding: 16px; display: flex; align-items: center; }
  .compare-product-col {
    background: var(--white);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .compare-product-col img {
    display: block;
    max-height: 100px;
    max-width: 80%;
    width: auto;
    object-fit: contain;
    margin: 0 auto 10px;
  }
  .compare-product-col h4 { font-size: 14px; font-weight: 800; color: var(--primary); margin: 0 0 4px; text-align: center; }
  .compare-product-col p { font-size: 11px; color: var(--muted); margin: 0; line-height: 1.4; text-align: center; }

  /* Rows */
  .compare-body { padding: 0; }
  .compare-row {
    display: grid;
    grid-template-columns: 140px repeat(var(--compare-cols, 2), 1fr);
    border-bottom: 1px solid var(--primary-04);
  }
  .compare-row:last-child { border-bottom: none; }
  .compare-row .compare-label-col { font-size: 12px; font-weight: 700; color: var(--primary); padding: 10px 16px; }
  .compare-value-col { padding: 10px 16px; font-size: 13px; color: var(--text); text-align: center; }
  .compare-row-diff { background: rgba(20,86,138,.03); }
  .compare-row-diff .compare-label-col { background: rgba(20,86,138,.06); }

  /* CTA */
  .compare-cta { padding: 20px; display: flex; gap: 12px; justify-content: center; border-top: 1px solid var(--primary-06); }
  .compare-cta .btn { font-size: 13px; }

  /* Responsive */
  @media (max-width: 768px) {
    .compare-header, .compare-row { grid-template-columns: 100px repeat(var(--compare-cols, 2), 1fr); }
    .compare-product-col img { max-height: 70px; }
    .compare-product-col h4 { font-size: 12px; }
    .compare-bar-pills { display: none; }
  }

  /* Compare scroll hint */
  .compare-scroll-hint {
    position: sticky;
    bottom: 10px;
    float: right;
    margin-top: -28px;
    margin-right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary);
    opacity: .7;
    z-index: 2;
    animation: scrollBounce 1.8s ease-in-out infinite;
    transition: opacity var(--duration-normal);
    pointer-events: none;
  }
  .compare-scroll-hint svg:last-of-type { margin-top: -8px; }
  .compare-scroll-hint span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-top: 2px;
    text-transform: uppercase;
    color: var(--primary);
  }
  .compare-scroll-hint.hidden { opacity: 0; }

  /* Scroll indicator — "Ver más ↓" sticky al fondo del scroll container,
     centrado horizontalmente. Flota sobre la última parte visible del
     contenido (con backdrop-blur para legibilidad) sin taparlo: el padding
     bottom del scroll content le deja aire. Fade out cuando el usuario
     llega al final del scroll (via .hidden en JS). */
  .tile-modal-right { position: relative; }
  /* position: sticky !important: la regla `.tile-modal-right > *`
     fuerza position:static !important a todos los hijos directos
     (para que el right pane scrollee como una unidad). El indicador
     necesita ganarle a esa cascada para flotar al fondo del viewport. */
  .scroll-indicator {
    position: sticky !important;
    bottom: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    margin: 6px auto 8px;
    padding: 5px 14px 5px 16px;
    color: var(--muted);
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--primary-08);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15,59,99,.06);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
  }
  .scroll-indicator svg {
    width: 12px;
    height: 12px;
    stroke: var(--accent);
    animation: scrollBounce 2.4s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    transform-origin: center;
    will-change: transform, opacity;
  }
  .scroll-indicator-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .scroll-indicator.hidden {
    opacity: 0;
    transform: translateY(4px);
  }
  /* Bounce simétrico al rededor del eje vertical de la pill: la flecha
     oscila igual hacia arriba y hacia abajo de su posición de reposo
     (que coincide con el centro vertical del pill por align-items:center).
     Así el movimiento queda balanceado y la flecha no parece "caída". */
  @keyframes scrollBounce {
    0%   { transform: translateY(-2.5px); opacity: 0.6; }
    50%  { transform: translateY(2.5px);  opacity: 1;   }
    100% { transform: translateY(-2.5px); opacity: 0.6; }
  }
  .tile-modal-right li { font-size: 13px; padding: 2px 0; line-height: 1.45; }
  .tile-modal-content .tile-more-btn { display: none; }

  /* Photo zoom overlay */
  .photo-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    transition: opacity .25s ease;
    cursor: zoom-out;
  }
  .photo-zoom-overlay.is-open { opacity: 1; }
  .photo-zoom-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-inner);
    background: var(--white);
    padding: 20px;
    transform: scale(.9);
    transition: transform var(--duration-normal) var(--ease-out-expo);
    cursor: zoom-out;
  }
  .photo-zoom-overlay.is-open img { transform: scale(1); }
  .photo-zoom-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 32px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast);
  }
  .photo-zoom-close:hover { background: rgba(255,255,255,.3); }
  @media (max-width: 768px) {
    .tile-modal { height: auto; max-height: 92vh; border-radius: 16px; }
    .tile-modal-content { flex-direction: column !important; height: auto !important; }
    .tile-modal-left { flex: none; border-radius: 16px 16px 0 0; padding: 20px; }
    .tile-modal-left img { max-height: 180px; flex: none; margin-bottom: 12px; }
    .tile-modal-left .detail-actions { flex-direction: row; }
    .tile-modal-right {
      padding: 16px 20px 0;
      /* On mobile the whole .tile-modal-content scrolls (see media at
         line 9090+); right column should NOT introduce its own scroll. */
      overflow: visible !important;
    }
    .tile-modal-top-block { padding: 0 0 12px; align-items: flex-start; }
    .tile-modal-right .model-tile-name { font-size: 17px; }
    /* No inner scroll on specs in mobile — flow inside the modal-content scroll */
    .tile-modal-specs-scroll { max-height: none !important; padding-right: 0; }
    .tile-modal-nav { width: 38px; height: 52px; }
    .tile-modal-nav svg { width: 18px; height: 18px; }
    .tile-modal-prev { left: 6px; }
    .tile-modal-next { right: 6px; }
    .tile-modal-counter { top: 18px; right: 58px; font-size: 10px; padding: 2px 8px; }
    .tile-modal-close { top: 12px; right: 12px; width: 32px; height: 32px; font-size: 15px; }
  }

  @media (max-width: 600px) {
    .models-grid { grid-template-columns: 1fr; }
  }

  /* Modal secondary actions (share + datasheet) */
  .modal-secondary-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--primary-06);
  }
  .modal-action-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-light);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    font-family: inherit;
    white-space: nowrap;
  }
  .modal-action-link:hover { color: var(--primary); background: rgba(20,86,138,.04); }
  .modal-action-link svg { opacity: .5; flex-shrink: 0; }
  .modal-action-link:hover svg { opacity: .8; }

  /* Share menu */
  .share-wrap { position: relative; }
  .share-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: var(--white);
    border: 1px solid var(--primary-08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15,59,99,.1);
    padding: 4px;
    min-width: 190px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all .15s ease;
    z-index: 10;
  }
  .share-menu--open { opacity: 1; visibility: visible; transform: translateY(0); }
  .share-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s ease;
    text-decoration: none;
    width: 100%;
    font-family: inherit;
  }
  .share-menu-item:hover { background: rgba(20,86,138,.05); color: var(--primary); }
  .share-menu-item svg { opacity: .5; flex-shrink: 0; }
  .share-menu-item:hover svg { opacity: .8; }

  @media (max-width: 768px) {
    .modal-secondary-actions { justify-content: center; }
    .share-menu { left: auto; right: 0; }
  }

  /* Search results */
  .search-results-container { padding: 8px 0; }
  .search-results-count { font-size: 15px; color: rgba(255,255,255,.7); margin-bottom: 24px; }
  .search-results-count strong { color: #fff; }
  .search-results-category { margin-bottom: 32px; }
  .search-results-cat-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255,255,255,.4);
    display: inline-block;
  }
  .search-results-category .models-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .search-results-category .models-grid .model-tile {
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .search-no-results {
    text-align: center;
    padding: 56px 24px 60px;
    color: rgba(255,255,255,.7);
    max-width: 560px;
    margin: 0 auto;
  }
  .search-no-results strong { color: #fff; font-weight: 700; }
  .search-no-results-title {
    font-size: 18px;
    line-height: 1.45;
    color: rgba(255,255,255,.92);
    margin: 0 0 6px;
    font-weight: 500;
  }
  .search-no-results-hint {
    font-size: 13.5px;
    margin-top: 4px;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
  }

  .services-panel {
    background: linear-gradient(135deg, #f0f6fd 0%, #f8fbff 50%, #eef4fb 100%);
    border-radius: var(--radius-card);
    padding: 24px 32px;
    box-shadow: 0 2px 12px var(--primary-05);
    grid-column: 1 / -1;
    border: 1px solid var(--accent-08);
    position: relative;
    overflow: hidden;
  }
  .services-panel::before { display: none; }
  .services-panel.hide { display: none; }
  .services-panel-head span {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    background: var(--accent-10);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
  }
  .services-panel h3 { font-size: 17px; font-weight: 800; color: var(--primary); margin: 0 0 4px; }
  .services-panel-head > p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
  .services-panel p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
  .services-panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .services-panel li { font-size: 14px; color: var(--text); display: flex; gap: 8px; }
  .services-panel li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--accent);
    flex: 0 0 5px;
    margin-top: 8px;
  }

  /* Catalog intro hidden */
  .catalog-intro-hidden .product-grid,
  .catalog-intro-hidden .filters,
  .catalog-intro-hidden .catalog-tools { display: none; }

  /* Filters */
  .filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  .filter-btn {
    padding: 9px 20px;
    min-height: 44px;
    border-radius: 50px;
    border: 1px solid var(--primary-10);
    background: var(--white);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-expo);
  }
  .filter-btn:hover { border-color: var(--accent-22); color: var(--primary); background: #f4f8fc; }
  .filter-btn.active {
    background: linear-gradient(135deg, #134468 0%, #0a2c4a 45%, #051526 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px var(--primary-15);
  }

  /* Search tools */
  .catalog-tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 32px;
    position: relative;
    z-index: 2;
  }
  .catalog-tools-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 950;
    margin: 0;
    padding: 7px 24px;
    background: rgba(255,255,255,.95);
    background: color-mix(in srgb, var(--white) 95%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px var(--primary-10);
    border-bottom: 1px solid var(--primary-06);
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
    opacity: 1;
  }
  /* Branding inside sticky catalog tools */
  .catalog-brand {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
    letter-spacing: -.02em;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--duration-fast);
  }
  .catalog-brand:hover { opacity: .7; }
  .catalog-brand svg, .catalog-brand img { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }
  .catalog-tools-sticky .catalog-brand { display: flex; }
  /* Override dark-bg filter-btn colors when sticky (white background) */
  #catalogo .catalog-tools-sticky .filter-btn { background: var(--white); border-color: var(--primary-10); color: var(--muted); }
  #catalogo .catalog-tools-sticky .filter-btn:hover { border-color: var(--accent-22); color: var(--primary); background: #f4f8fc; }
  #catalogo .catalog-tools-sticky .filter-btn.active { background: linear-gradient(135deg, #134468 0%, #0a2c4a 45%, #051526 100%); color: #fff; border-color: transparent; box-shadow: 0 4px 14px var(--primary-15); }
  #catalogo .catalog-tools-sticky input[type="search"] { background: var(--white); border-color: var(--primary-10); color: var(--primary); }
  #catalogo .catalog-tools-sticky input[type="search"]::placeholder { color: var(--placeholder); }

  /* Brand block en modal — bloque completo (logo + nombre + tagline)
     Aprovecha el espacio del header del modal en vez de quedar como
     chip pequeño. Logo prominente a la izquierda, nombre + tagline
     en stack a la derecha. */
  .modal-brand-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(15,59,99,.04) 0%, rgba(15,59,99,.02) 100%);
    border: 1px solid rgba(15,59,99,.08);
    border-radius: 12px;
    color: var(--primary);
    text-decoration: none;
    align-self: stretch;
    box-sizing: border-box;
  }
  .modal-brand-badge img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    opacity: 1;
    object-fit: contain;
  }
  .modal-brand-badge .modal-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
  }
  .modal-brand-badge .modal-brand-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.01em;
    line-height: 1.2;
  }
  .modal-brand-badge .modal-brand-tagline {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
    line-height: 1.3;
    font-style: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .modal-brand-badge::before,
  .modal-brand-badge::after { content: none; }
  .catalog-tools-sticky ~ * header,
  body:has(.catalog-tools-sticky) header { transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity var(--duration-normal) ease; }
  .catalog-tools-sticky.tools-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  :where(.catalog-tools) :is(input[type="search"], input[type="text"]) {
    width: 280px;
    padding: 9px 18px 9px 40px;
    border-radius: 50px;
    border: 1px solid var(--primary-10);
    font-size: 15px;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237c8a96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 16px center no-repeat;
    box-shadow: 0 4px 16px var(--primary-08);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  }
  :where(.catalog-tools) input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-08);
  }
  :where(.catalog-tools) input::placeholder { color: var(--placeholder); }

  /* Botón X (clear) del input[type="search"]. Por defecto Chrome muestra
     un X gris diminuto que se pierde sobre el fondo oscuro del catálogo.
     Lo reemplazamos por un SVG blanco bien visible y un hover sutil. */
  :where(.catalog-tools) input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    margin-right: 4px;
    border-radius: 50%;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    background-color: rgba(255,255,255,.18);
    opacity: .9;
    transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
  }
  :where(.catalog-tools) input[type="search"]::-webkit-search-cancel-button:hover {
    background-color: rgba(255,255,255,.28);
    opacity: 1;
    transform: scale(1.05);
  }
  /* Sticky bar: input sobre fondo blanco — la X tiene que ser navy */
  :where(.catalog-tools-sticky) input[type="search"]::-webkit-search-cancel-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3b63' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    background-color: rgba(15, 59, 99, .08);
  }
  :where(.catalog-tools-sticky) input[type="search"]::-webkit-search-cancel-button:hover {
    background-color: rgba(15, 59, 99, .16);
  }

  /* Spec filters — refinement toolbar */
  .spec-filters-toggle {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid var(--primary-06);
    background: rgba(244,247,251,.6);
    color: var(--muted-light);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    width: 100%;
    justify-content: center;
  }
  .spec-filters-toggle svg { width: 12px; height: 12px; opacity: .5; }
  /* Texto corto / largo: por default mostramos el largo (sf.toggle).
     En mobile (≤768px) swappeamos al corto (sf.toggle_short = "Filtros").
     Ambos viajan por i18n, no hay texto fijo en CSS. */
  .spec-filters-toggle-text-short { display: none; }
  .spec-filters-toggle-text-full { display: inline; }
  .spec-filters-toggle:hover { color: var(--primary); border-color: rgba(20,86,138,.12); background: rgba(244,247,251,.9); }
  .spec-filters-toggle--open { color: var(--primary); background: rgba(244,247,251,.9); }
  .spec-filters-toggle--open .spec-filters-chevron { transform: rotate(180deg); }
  .spec-filters-chevron { transition: transform .2s ease; }
  .spec-filters-toggle--hidden { display: none !important; }

  .spec-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 14px;
    row-gap: 6px;
    width: 100%;
    padding: 6px 0 4px;
    margin-top: 4px;
  }
  /* Desktop: one-line toolbar — no wrap between filter groups */
  @media (min-width: 1200px) {
    .spec-filters { flex-wrap: nowrap; }
  }
  .spec-filters--hidden { display: none !important; }

  .spec-filter-group {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 0;
    flex-shrink: 0;
  }
  .spec-filter-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted-light);
    letter-spacing: .03em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .spec-filter-label::after { content: none; }
  .spec-filter-pills {
    display: inline-flex;
    gap: 3px;
  }
  .spec-pill {
    padding: 3px 9px;
    border-radius: 7px;
    border: 1px solid rgba(15,59,99,.07);
    background: rgba(244,247,251,.5);
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
    line-height: 1.35;
  }
  .spec-pill:hover {
    border-color: rgba(20,86,138,.16);
    color: var(--primary);
    background: rgba(20,86,138,.04);
  }
  .spec-pill--active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(15,59,99,.15);
  }
  .spec-pill--active:hover {
    background: #0f3b63;
    border-color: #0f3b63;
    box-shadow: 0 2px 8px rgba(15,59,99,.2);
  }

  /* Chip bar — status line */
  .spec-chip-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 5px 0 2px;
    width: 100%;
  }
  .spec-chip-bar--hidden { display: none; }
  .spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 6px;
    border: none;
    background: rgba(20,86,138,.08);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
  }
  .spec-chip:hover { background: rgba(20,86,138,.14); }
  .spec-chip svg { width: 10px; height: 10px; opacity: .35; }
  .spec-chip:hover svg { opacity: .75; }
  .spec-chip-clear {
    padding: 3px 0;
    border: none;
    background: transparent;
    color: var(--muted-light);
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    margin-left: auto;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
  }
  .spec-chip-clear:hover { color: var(--primary); text-decoration-color: currentColor; }
  .spec-result-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--primary);
    opacity: .6;
    padding: 0 2px;
  }
  .spec-result-count--zero { color: var(--muted-light); opacity: .7; }
  .spec-result-count::before {
    content: "·";
    margin-right: 6px;
    font-weight: 400;
    opacity: .35;
  }

  /* Dark bg variant (non-sticky catalog tools) */
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-filters-toggle { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.55); background: rgba(255,255,255,.05); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-filters-toggle:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-filters-toggle--open { color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-filter-label { color: rgba(255,255,255,.55); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-pill { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.65); background: rgba(255,255,255,.04); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-pill:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.9); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-pill--active { background: var(--white); color: var(--primary); border-color: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-pill--active:hover { background: #f0f4f8; }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-chip { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-chip:hover { background: rgba(255,255,255,.18); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-chip-clear { color: rgba(255,255,255,.4); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-chip-clear:hover { color: var(--white); }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .spec-result-count { color: rgba(255,255,255,.5); }

  /* Spec filters responsive */
  @media (max-width: 768px) {
    .spec-filters-toggle { display: flex; }
    /* Swap del texto: en mobile mostramos el corto traducido. */
    .spec-filters-toggle-text-full { display: none; }
    .spec-filters-toggle-text-short { display: inline; }
    .spec-filters {
      max-height: 0;
      overflow: hidden;
      padding: 0;
      margin-top: 0;
      transition: max-height .3s ease, padding .3s ease, margin .3s ease;
    }
    .spec-filters--open {
      max-height: 300px;
      padding: 8px 0 4px;
      margin-top: 6px;
    }
    .spec-filters { flex-direction: column; gap: 6px; align-items: flex-start; }
    .spec-filter-group { padding-right: 0; }
    .spec-filter-label { font-size: 9.5px; }
    .spec-pill { font-size: 10.5px; padding: 3px 9px; }
    .spec-filter-pills { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .spec-filter-pills::-webkit-scrollbar { display: none; }
  }
  @media (min-width: 769px) {
    .spec-filters-toggle { display: none !important; }
  }

  /* Buttons */
  :is(.btn, .btn-primary, .btn-secondary, .solutions-button, .map-button) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    line-height: 1.2;
    font-size: var(--btn-font-size);
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: var(--btn-transition);
  }
  :is(.btn, .map-button)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--btn-shine);
    transform: translateX(-135%);
    transition: transform .9s var(--ease-out-expo);
  }
  :is(.btn, .map-button):hover::before { transform: translateX(135%); }
  :is(.btn, .map-button) > * { position: relative; z-index: 1; }

  .btn-primary {
    background:
      /* Keylight sutil arriba-izquierda */
      radial-gradient(ellipse 70% 60% at 25% 20%, rgba(120,190,240,.18) 0%, rgba(61,143,214,.06) 45%, transparent 70%),
      /* Shadow pool abajo-derecha */
      radial-gradient(ellipse 60% 55% at 88% 88%, rgba(0,0,0,.35) 0%, transparent 60%),
      /* Base cinematográfica navy profundo */
      linear-gradient(135deg, #134468 0%, #0a2c4a 45%, #051526 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(0,0,0,.4),
      0 2px 6px rgba(5,21,38,.35),
      0 12px 28px rgba(5,21,38,.45);
  }
  .btn-primary:hover {
    transform: translateY(-1px) scale(1.005);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(0,0,0,.4),
      0 4px 10px rgba(5,21,38,.40),
      0 18px 36px rgba(5,21,38,.55);
    filter: saturate(1.08) brightness(1.04);
  }
  .btn-primary:active {
    transform: translateY(0) scale(.995);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.4),
      0 4px 12px rgba(5,21,38,.35);
  }
  .btn-secondary {
    background: rgba(255,255,255,.96);
    color: var(--primary);
    border: 1px solid var(--primary-12);
    box-shadow: 0 10px 24px var(--primary-08), inset 0 1px 0 rgba(255,255,255,.7);
  }
  .btn-secondary:hover {
    background: var(--white);
    color: var(--accent);
    border-color: var(--accent-22);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px var(--primary-10);
  }

  /* SVG icons in buttons - consolidated with :is() */
  :is(.btn-with-icon, .link-with-icon, .map-button, .feature-actions .btn, .cta .btn, .contact-box .btn, .header-cta) svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    flex: 0 0 16px;
    overflow: visible;
    stroke: currentColor;
    fill: none !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  :is(.btn-with-icon, .link-with-icon, .map-button, .feature-actions .btn, .cta .btn, .contact-box .btn, .header-cta) :is(svg path, svg circle, svg rect) {
    fill: none !important;
    stroke: currentColor;
  }
  /* WhatsApp icon is fill-based, not stroke-based — override for any SVG variant */
  .btn-whatsapp.btn-with-icon :is(svg path, svg circle, svg rect),
  :is(.btn-with-icon, .cta .btn, .contact-box .btn) svg path[d^="M17.472"] {
    fill: currentColor !important;
    stroke: none !important;
  }
  .btn-whatsapp.btn-with-icon svg,
  :is(.btn-with-icon, .cta .btn, .contact-box .btn) svg:has(path[d^="M17.472"]) {
    fill: currentColor;
    stroke: none;
    stroke-width: 0;
  }
  li > svg path[d^="M17.472"] {
    fill: currentColor !important;
    stroke: none !important;
  }
  li > svg:has(path[d^="M17.472"]) {
    stroke: none;
    stroke-width: 0;
  }
  :is(.hero .btn-primary, .cta .btn-primary) { font-size: 16px; padding: 16px 30px; }

  /* Contact section */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }
  /* ============================================================
     CONTACT BOX — executive-tallado aesthetic
     Premium corporate treatment: layered depth, meta-labeling,
     micro-accents. Inspired by Stripe Atlas / Linear Enterprise.
     ============================================================ */
  .contact-box {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-card);
    padding: 32px 32px 28px;
    border: 1px solid var(--primary-08);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 1px 2px rgba(15,59,99,.04),
      0 10px 32px rgba(15,59,99,.06),
      0 24px 48px rgba(15,59,99,.05);
    overflow: hidden;
  }
  /* Subtle top-accent: thin gradient line at the very top edge */
  .contact-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--primary) 22%,
      var(--accent) 50%,
      var(--primary) 78%,
      transparent 100%);
    opacity: .85;
  }
  .contact-box :is(h2, h3) {
    position: relative;
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    margin: 0 0 6px;
    letter-spacing: -.018em;
    line-height: 1.2;
  }
  /* Tiny accent dot before the heading — professional "indicator" */
  .contact-box :is(h2, h3)::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(20,86,138,.14), 0 0 12px rgba(20,86,138,.35);
    margin: 0 10px 2px 0;
    vertical-align: middle;
  }
  .contact-box > p {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 22px;
    line-height: 1.55;
    max-width: 54ch;
  }
  /* Cuando el form sigue directo al título (sin párrafo intermedio),
     necesita respiro extra para separar bloques tipográficos. */
  .contact-box :is(h2, h3) + .contact-form { margin-top: 22px; }
  /* Container con overflow:hidden + height fijo. El iframe es 60px más
     alto y queda clippeado por abajo → oculta el thumbnail "View larger
     map" + la barra de atribución de Google que sobraba visualmente. */
  .contact-map {
    margin-top: 18px;
    border-radius: var(--radius-inner);
    overflow: hidden;
    line-height: 0;
    position: relative;
    height: 220px;
  }
  .contact-map-iframe {
    position: relative;
    z-index: 1;
    border: 0;
    border-radius: var(--radius-inner);
    display: block;
    width: 100%;
    height: 280px;
  }
  /* Overlay "Abrir en Maps" como solapa superior del mapa: banda
     horizontal navy que ocupa todo el ancho y 1/4 del alto del wrapper.
     Tapa por completo el widget nativo de Google "View larger map" sin
     parches ni halos. Las esquinas superiores quedan redondeadas por el
     overflow:hidden + border-radius del wrapper. Link externo (no
     dentro del iframe) → no le aplica el bloqueo mobile de popups. */
  .contact-map-cta {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    background: var(--primary);
    color: #fff;
    border-radius: 0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.2;
    transition: background var(--duration-fast) ease;
  }
  .contact-map-cta:hover {
    background: #14568a;
  }
  .contact-map-cta svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
  }
  .contact-form { display: flex; flex-direction: column; gap: 16px; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-inner);
    border: 1px solid var(--primary-10);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  }
  .contact-form :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-08);
  }
  .contact-form textarea { min-height: 110px; resize: vertical; }
  .contact-form .input-error { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
  .contact-form .form-error { display: block; font-size: 12px; color: #dc2626; margin-top: 4px; font-weight: 500; }
  /* Thin divider before the info grid — fade→accent→fade */
  .contact-info-grid {
    display: grid;
    gap: 10px;
    margin: 22px 0 22px;
    padding-top: 22px;
    position: relative;
  }
  .contact-info-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--primary-10) 30%,
      var(--accent-28) 50%,
      var(--primary-10) 70%,
      transparent 100%);
  }

  /* Horizontal row layout: icon | (label + value) | action — all vertically
     centered within the card. Uses display:contents on copy and row so all
     leaf children participate directly in the parent grid.
     Includes left accent bar + index counter. */
  .contact-info-item {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 2px;
    align-items: center;
    padding: 16px 22px 16px 22px;
    border: 1px solid var(--primary-06);
    border-radius: var(--radius-inner);
    background: #ffffff;
    overflow: hidden;
    transition:
      border-color var(--duration-normal) var(--ease-out-expo),
      box-shadow var(--duration-normal) var(--ease-out-expo),
      transform var(--duration-normal) var(--ease-out-expo);
  }
  /* Left accent bar — muted by default, saturates on hover */
  .contact-info-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 100%);
    opacity: .28;
    transition: opacity var(--duration-normal) var(--ease-out-expo),
                top var(--duration-normal) var(--ease-out-expo),
                bottom var(--duration-normal) var(--ease-out-expo);
  }
  .contact-info-item:hover {
    border-color: var(--accent-22);
    box-shadow:
      0 1px 2px var(--primary-06),
      0 6px 18px var(--primary-08);
  }
  .contact-info-item:hover::before {
    opacity: 1;
    top: 12%;
    bottom: 12%;
  }
  .contact-info-icon {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: transparent;
    border: 1.5px solid var(--primary-14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    transition: background var(--duration-normal) ease,
                border-color var(--duration-normal) ease,
                color var(--duration-normal) ease,
                transform var(--duration-normal) var(--ease-out-expo);
  }
  .contact-info-item:hover .contact-info-icon {
    background: linear-gradient(135deg, var(--accent-08) 0%, var(--accent-14) 100%);
    border-color: var(--accent-28);
    color: var(--accent);
    transform: translateY(-1px);
  }
  .contact-info-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }
  .contact-info-item:hover .contact-info-icon svg {
    transform: scale(1.06);
  }
  .contact-info-copy { display: contents; }
  .contact-info-copy > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    display: block;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .11em;
    line-height: 1.2;
    transition: color var(--duration-normal) ease;
  }
  .contact-info-item:hover .contact-info-copy > strong {
    color: var(--accent);
  }
  .contact-info-row { display: contents; }
  .contact-info-row > .contact-info-value {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .contact-info-row > .contact-info-action {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
  }
  .contact-info-value {
    display: block;
    font-size: 15.5px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.015em;
    word-break: break-word;
    margin: 0;
    color: var(--primary) !important;
    font-variant-numeric: tabular-nums;
    transition: color var(--duration-normal) ease;
  }
  .contact-info-value:hover { color: var(--accent) !important; opacity: 1; }
  .contact-info-action { margin-top: 0; flex: 0 0 auto; }
  .contact-info-action .btn {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 6px var(--primary-06);
    transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease, background-color var(--duration-normal) ease, color var(--duration-normal) ease;
  }
  .contact-info-action .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px var(--primary-18), inset 0 1px 0 var(--white-22);
    filter: saturate(1.04);
  }
  .contact-info-action .btn:not(.btn-primary) {
    transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease, background-color var(--duration-normal) ease, color var(--duration-normal) ease;
    border: 1px solid var(--primary-14);
    background: var(--white);
    color: var(--primary);
  }
  .contact-info-action .btn:not(.btn-primary):hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--surface);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px var(--primary-12);
  }
  .contact-info-action .btn.btn-primary {
    background: linear-gradient(135deg, #195a8f 0%, #0f3b63 48%, #061829 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 700;
    font-size: 13px;
    box-shadow:
      inset 0 1px 0 var(--white-24),
      0 2px 6px var(--primary-14),
      0 8px 22px var(--primary-20);
  }
  .contact-info-action .btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 var(--white-24),
      0 4px 10px var(--primary-18),
      0 12px 28px var(--primary-26);
  }
  .contact-info-action .btn.btn-primary svg { stroke: #ffffff; fill: none; }
  .contact-info-action .btn.btn-primary svg:has(path[d^="M17.472"]) { fill: #ffffff; stroke: none; stroke-width: 0; }
  .contact-info-action .btn.btn-primary svg path[d^="M17.472"] { fill: #ffffff !important; stroke: none !important; }
  .contact-info-action .btn.btn-primary span { color: #ffffff; }
  .contact-info-action .btn.btn-secondary { color: var(--primary) !important; background: var(--white); border: 1px solid var(--primary-12); }
  .contact-info-copy .contact-info-value::after,
  .contact-info-action .btn::after { display: none !important; }
  .contact-info-copy span,
  .contact-info-copy a { color: var(--muted); }

  .contact-info-block h4 { font-size: 14px; font-weight: 700; color: var(--primary); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .02em; }
  .contact-info-block p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; }
  .contact-info-block a { font-weight: 600; color: var(--accent); }

  .location-link { display: block; margin-top: 18px; color: inherit; }
  .location-card {
    padding: 18px 20px;
    border: 1px solid var(--primary-08);
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, #f7fbff, #ffffff);
    box-shadow: var(--shadow-soft);
    transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-out-expo);
  }
  .location-link:hover .location-card { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--accent-16); }
  .location-card strong { display: block; color: var(--primary); margin-bottom: 8px; font-size: 16px; }
  .location-card p { margin: 0 0 12px; color: var(--muted); }
  .location-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .map-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #14568a;
    color: #fff;
    padding: 12px 18px;
    border-radius: var(--btn-radius);
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) ease;
    box-shadow: var(--shadow-soft);
  }
  .map-button:hover { background: #173a5a; transform: translateY(-1px); box-shadow: var(--shadow); }
  .map-button svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 18px; }

  /* Form & utility — .button-row already defined in layout layer */
  .spacer-26 { height: 26px; }
  .contact-intro-tight { margin-bottom: 0; }
  input, textarea, select { width: 100%; padding: 13px 14px; border: 1px solid var(--primary-10); border-radius: var(--radius-inner); font: inherit; background: var(--white); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .full { grid-column: 1 / -1; }
  .location-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

  /* CTA — cinematográfico */
  .cta {
    background:
      /* Keylight focal superior-centro */
      radial-gradient(ellipse 55% 45% at 50% -5%, rgba(120,190,240,.20) 0%, rgba(61,143,214,.08) 45%, transparent 70%),
      /* Rim light superior-derecho */
      radial-gradient(ellipse 35% 30% at 92% 12%, rgba(89,165,228,.14) 0%, transparent 62%),
      /* Side fill medio-izquierdo */
      radial-gradient(ellipse 45% 50% at 3% 50%, rgba(20,86,138,.10) 0%, transparent 55%),
      /* Shadow pool inferior-izquierda */
      radial-gradient(ellipse 55% 48% at 10% 98%, rgba(2,8,18,.48) 0%, transparent 65%),
      /* Shadow secundaria inferior-derecha */
      radial-gradient(ellipse 45% 40% at 96% 92%, rgba(4,12,24,.40) 0%, transparent 60%),
      /* Base asimétrica */
      linear-gradient(155deg, #0b2d4e 0%, #071f3a 25%, #030f20 55%, #061c36 80%, #0a2a48 100%);
    color: #fff;
    text-align: center;
    padding: 72px 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
  }
  /* Viñeta cinematográfica en CTA */
  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 72% at 50% 50%, transparent 38%, rgba(0,0,0,.18) 78%, rgba(0,0,0,.30) 100%);
    pointer-events: none;
    z-index: 0;
  }
  .cta > .container, .cta > * { position: relative; z-index: 1; }
  .cta h2, .cta h3 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin: 0 0 12px; letter-spacing: -.02em; }
  .cta p { font-size: 16px; color: rgba(255,255,255,.78); margin: 0 0 32px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.7; }
  .cta .button-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .cta .btn-secondary {
    background: var(--white-12);
    backdrop-filter: blur(8px);
    border: 1px solid var(--white-24);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 1px 0 var(--white-12);
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 50px;
    transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) ease, border-color var(--duration-normal) ease;
  }
  .cta .btn-secondary:hover {
    background: var(--white-22);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,.24), inset 0 1px 0 var(--white-18);
  }
  .cta .btn-primary {
    background: var(--white-16);
    border: 1px solid var(--white-22);
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
  }
  .cta .btn-primary:hover { background: var(--white-22); }

  /* FAQ */
  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
  .faq-list { display: flex; flex-direction: column; gap: 8px; }
  .faq details {
    background: var(--white);
    border-radius: var(--radius-inner);
    border: 1px solid var(--primary-06);
    overflow: hidden;
    transition: box-shadow var(--duration-fast) ease;
  }
  .faq details:hover { box-shadow: var(--shadow-soft); }
  .faq details summary {
    padding: 18px 22px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--text);
  }
  .faq details summary::-webkit-details-marker { display: none; }
  .faq details summary::after {
    content: "+";
    font-size: 20px;
    font-weight: 500;
    color: var(--muted);
    flex: 0 0 auto;
  }
  .faq details[open] summary::after { content: "\2212"; }
  .faq details p { padding: 0 22px 18px; font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
  .faq-side {
    background: var(--white);
    border-radius: var(--radius-card);
    padding: 28px;
    border: 1px solid var(--primary-04);
    box-shadow: var(--shadow-soft);
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .faq-side h3 { font-size: 16px; font-weight: 800; color: var(--primary); margin: 0 0 14px; }
  .faq-side ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .faq-side li { font-size: 14px; color: var(--muted); display: flex; gap: 8px; }
  .faq-side li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--accent);
    flex: 0 0 5px;
    margin-top: 8px;
  }

  /* WhatsApp float */
  .whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #25d366;
    color: #fff;
    padding: 0;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37,211,102,.28);
    z-index: 800;
    transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo);
  }
  .whatsapp-float:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 28px rgba(37,211,102,.30); }
  .whatsapp-float svg { width: 28px; height: 28px; fill: #fff; flex: 0 0 28px; }
  .whatsapp-float-label { display: none; }

  /* Services cards */
  .services-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
  }
  .services-item {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid var(--primary-06);
    border-radius: var(--radius-inner);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 6px var(--primary-04);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) ease;
  }
  .services-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    border-color: var(--accent-14);
  }
  .services-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
  }
  .services-item strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.02em;
    line-height: 1.15;
  }
  .services-item p {
    color: var(--muted);
    font-size: 12.5px;
    flex: 1;
    line-height: 1.5;
    margin: 0 0 4px;
  }
  .services-item .btn { align-self: flex-start; margin-top: auto; }

  /* Reach / Shipping + Product inquiry strip */
  .reach-strip {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  }
  .reach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .reach-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: var(--radius-card);
    padding: 40px 36px;
    border: 1px solid var(--primary-06);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo);
  }
  .reach-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
  }
  .reach-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
  }
  .reach-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent-08), var(--accent-16));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
  }
  .reach-icon svg { width: 24px; height: 24px; }
  .reach-card h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    letter-spacing: -.03em;
    line-height: 1.2;
  }
  .reach-card p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
  }
  .reach-highlights {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .reach-highlights li {
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
  }
  .reach-highlights li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }
  .reach-card .btn {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 12px;
  }
}

/* =========================================================
   LAYER: UTILITIES
   ========================================================= */
@layer utilities {
  .reveal-delay-1 { transition-delay: .06s; }
  .reveal-delay-2 { transition-delay: .12s; }
  .reveal-delay-3 { transition-delay: .18s; }
  .reveal-delay-4 { transition-delay: .24s; }
}

/* =========================================================
   LAYER: ANIMATIONS
   ========================================================= */
@layer animations {
  @keyframes brandScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px) scale(.992);
    transition: opacity .82s ease, transform .82s var(--ease-out-expo);
  }
  .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0) scale(1); }

  .product-card { opacity: 1; transform: translateY(0); }
  .product-card.stagger-in,
  .model-tile.stagger-in {
    animation: catalogStaggerIn var(--duration-slow) var(--ease-out-expo) both;
    animation-delay: var(--stagger-delay, 0ms);
  }
  @keyframes catalogStaggerIn {
    0% { opacity: 0; transform: translateY(18px) scale(.985); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Featured card effects */
  .featured-card { position: relative; isolation: isolate; }
  .featured-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.05) 40%, var(--white-16) 50%, rgba(255,255,255,.05) 60%, transparent 100%);
    transform: translateX(-130%);
    transition: transform .95s var(--ease-out-expo);
    pointer-events: none;
    z-index: 0;
  }
  .featured-card:hover::after { transform: translateX(130%); }
  .featured-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-strong); }
  .featured-card .catalog-card-photo { transition: transform var(--duration-slow) var(--ease-out-expo); }
  .featured-card:hover .catalog-card-photo { transform: scale(1.02); }
  :is(.featured-card .product-head, .featured-card .product-body) { position: relative; z-index: 1; }
  .featured-card .feature-actions .btn { transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) ease; }
  .featured-card .feature-actions .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

  /* Catalog card hover */
  .product-card .catalog-card-photo { transition: transform var(--duration-slow) var(--ease-out-expo); }
  .catalog-card-photo.image-rotate { transition: opacity var(--duration-slow) ease; }
  .product-card:hover .catalog-card-photo { transform: scale(1.028); }

  .product-card details[open] { animation: appleAccordion .56s var(--ease-out-expo); }
  .product-card details[open] .detail-card { animation: detailPanelFloat .48s var(--ease-out-expo); }
  @keyframes appleAccordion {
    0% { opacity: 0; transform: translateY(-8px) scale(.992); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes detailPanelFloat {
    0% { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.reveal-on-scroll, .reveal-on-scroll.is-visible) {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .stagger-in { animation: none; }
    .brand-track { animation: none; }
    .product-card,
    .featured-card,
    .solution-card,
    .card,
    .catalog-card-photo,
    .btn,
    header {
      transition: none !important;
    }
    details[open] .detail-card { animation: none; }
  }
}

/* =========================================================
   RESPONSIVE (outside @layer for override capability)
   ========================================================= */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .cat-card-action { opacity: 1; transform: none; }
  .catalog-entrance-eyebrow { font-size: 10px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .solutions-grid { grid-template-columns: 1fr 1fr; }
  .solution-main { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-cta { grid-template-columns: 1fr; gap: 16px; padding: 18px 22px; border-radius: 12px; }
  .footer-cta-actions { width: 100%; }
  .faq-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .topbar-meta { display: none; }
  .nav ul { display: none; }
  .mobile-toggle { display: flex; }
  .hero { padding: 56px 0 48px; }
  .trust-grid { grid-template-columns: 1fr; }
  .solutions-grid { grid-template-columns: 1fr; }
  .solution-main { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr; }
  .brand-copy span { display: none; }
  .contact-info-action { width: auto; }
  .contact-info-action .btn { min-width: 180px; justify-content: center; }
  .cta { padding: 24px 0; }
  .cta .btn { width: 100%; }
  section { padding: 48px 0; }
  .services-list { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .reach-grid { grid-template-columns: 1fr !important; }
  .reach-strip { padding: 56px 0 !important; }
  .reach-card { padding: 28px 24px !important; }
}


/* Noscript banner */
.noscript-banner { text-align: center; padding: 1em; background: #fff3cd; color: #856404; font-family: sans-serif; }

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Enhanced focus states for interactive components */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-08);
}
.cat-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--accent-08);
}
.product-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--accent-08);
}
.solution-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--accent-08);
}
.featured-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--accent-08);
}
.model-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--accent-08);
}
.filter-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-08);
}
.tile-modal-nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-08);
}

/* Print styles */
@media print {
  .topbar, header, .mobile-menu, .whatsapp-float, .trust-strip, .cta,
  .contact-map iframe, footer, .catalog-tools, .filter-btn, .cat-card-action,
  .tile-more-btn, .models-toggle-btn, .featured-nav, .carousel-dots,
  .solutions-process-actions, .rec-reset, .scroll-indicator, .compare-scroll-hint, .spec-filters, .spec-filters-toggle, .spec-chip-bar,
  #productSelector, .whatsapp-float-label { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 12pt; }
  section { padding: 18px 0 !important; break-inside: avoid; background: #fff !important; color: #000 !important; }
  #categorias, #catalogo { background: #fff !important; }
  #categorias .section-title, #catalogo .section-title { color: #000 !important; }
  .section-sub { color: #444 !important; }
  .hero { background: #f5f5f5 !important; color: #000 !important; padding: 24px 0 !important; }
  .hero h1, .hero p, .hero-card, .hero-card h3, .hero-card li { color: #000 !important; }
  .eyebrow { color: #666 !important; }
  .hero-grid, .cat-bento, .solutions-layout, .solution-main, .contact-grid,
  .footer-grid, .process-steps, .product-grid { display: block !important; }
  .cat-card, .solution-card, .product-card, .step { margin-bottom: 12px; }
  .cat-card--primary { flex-direction: column !important; }
  .cat-card, .solution-card, .product-card, .featured-card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .cat-card-img { background: #f8f8f8 !important; }
  .solution-card::before { background: #000 !important; }
  * { transition: none !important; animation: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
  a[href^="#"]::after, a[href^="tel:"]::after, a[href^="mailto:"]::after, a[href^="javascript:"]::after { content: ""; }
  img { max-width: 100% !important; }
}

/* =========================================================
   GLOBAL OVERRIDES (outside @layer for cascade priority)
   Tightens spacing, adjusts sizing, and handles edge cases
   that require overriding layered rules.
   ========================================================= */

/* Base overrides — non-layer essentials */
/* overflow-x: clip — `hidden` would establish a scroll container that breaks
   `position: sticky` on the white header (which lives at body level). */
html, body { overflow-x: clip; }
.split > * { min-width: 0; overflow: hidden; }

/* Categories */
/* old category-card override removed — replaced by .cat-card system */


/* Solutions */
.solution-card { padding: 28px !important; }
.solution-card h3 { font-size: 20px !important; }
.solution-list { margin-bottom: 12px !important; }
.process-steps { gap: 18px !important; }

/* CTA + Contact */
#contacto .cta { padding: 32px 0; }
#contacto .cta :is(h1, h2, h3) { font-size: clamp(22px, 3vw, 30px); margin-bottom: 6px; }
#contacto .cta p { font-size: 14px; margin-bottom: 18px; line-height: 1.5; }
.spacer-26 { height: 14px !important; }
.contact-grid { gap: 20px !important; }
.contact-box { padding: 32px !important; }
.contact-box :is(h2, h3) { font-size: 17px !important; margin-bottom: 4px !important; }
.contact-box > p { font-size: 13px !important; margin-bottom: 12px !important; }
.contact-info-grid { gap: 8px !important; margin: 10px 0 0 !important; }
.contact-info-item { padding: 12px 14px !important; }
.contact-form { gap: 8px !important; }
.contact-form input,
.contact-form select { padding: 9px 12px !important; font-size: 13px !important; }
.contact-form textarea { padding: 9px 12px !important; font-size: 13px !important; min-height: 60px !important; }
.contact-form .form-row { gap: 8px !important; }

/* Services panel — desktop-only padding (mobile se compacta en la capa responsive) */
@media (min-width: 769px) {
  .services-panel { padding: 48px 72px !important; }
  .services-item { padding: 16px 18px !important; }
}

/* Product-specific */
img[alt="ITALORA TX Twin Head"] { background: #fff !important; }
#cat-ribbons .catalog-card-photo { min-height: 220px; }

/* FAQ — desktop-only: en mobile colapsa a 1fr (línea 4466 / capa residual) */
@media (min-width: 769px) {
  .faq-grid { gap: 20px !important; grid-template-columns: 1fr 1fr !important; }
  .faq details summary { padding: 14px 18px !important; font-size: 14px !important; }
}

/* Footer */
footer { padding: 40px 0 0 !important; }

/* =========================================================
   CATEGORY GROUPS (JS-generated layout)
   ========================================================= */
.category-group {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category-group .product-card,
.category-group .services-panel { min-width: 0; }
.category-group .services-panel { margin: 24px auto 0; width: 100%; }

.category-cards-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.category-cards-row > .product-card {
  flex: 1 1 calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
  min-width: 240px;
}
.category-cards-row--horizontal { gap: 24px; }
.category-cards-row--horizontal > .product-card {
  flex: 1 1 400px;
  max-width: 680px;
}
.category-cards-row > .product-card.is-expanded {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.category-cards-row:has(.is-expanded) > .product-card:not(.is-expanded) { display: none; }
.category-cards-row:has(.is-expanded) { flex-wrap: wrap; }

/* Category dividers */
.category-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0 4px;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 16px;
  width: 100%;
  align-self: stretch;
}
.category-divider h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  white-space: nowrap;
  letter-spacing: -.02em;
}
#catalogo .category-divider h3 { color: var(--white); }
.category-divider p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.4; }
#catalogo .category-divider p { color: rgba(255,255,255,.75); }
.category-divider.hide { display: none; }
.category-group.hide { display: none !important; }

/* Card hover & expanded states */
.product-card:not(.featured-card):hover::after { opacity: 1; }
.product-card.is-expanded::after { display: none; }

/* Close button on expanded card — refined, same language as card system */
.expanded-close {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-14);
  background: var(--white);
  color: var(--primary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px var(--primary-04), 0 4px 12px var(--primary-06);
  transition: background var(--duration-normal) ease, color var(--duration-normal) ease, border-color var(--duration-normal) ease, transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) ease;
  z-index: 5;
}
.expanded-close:hover {
  background: linear-gradient(135deg, var(--accent-08), var(--accent-14));
  border-color: var(--accent-28);
  color: var(--accent);
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 2px 6px var(--primary-06), 0 8px 20px var(--primary-12);
}

/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */
/* =========================================================
   MOBILE OVERRIDES (outside @layer)
   ========================================================= */
@media (max-width: 768px) {
  .hero h1 { font-size: clamp(26px, 7vw, 38px) !important; word-break: break-word; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .product-head span { font-size: 10.5px !important; padding: 3px 9px !important; letter-spacing: .02em; }
  .featured-card .product-head span { font-size: 11px !important; padding: 6px 12px !important; letter-spacing: .02em; }
  /* .faq-grid y .contact-grid ya colapsan a 1fr desde @media (max-width: 768px)
     del bloque principal (líneas 4458–4459). No redeclarar. */
  .whatsapp-float { bottom: 16px !important; right: 12px !important; width: 48px !important; height: 48px !important; }
  .whatsapp-float svg { width: 24px !important; height: 24px !important; }
}

/* ── Language Switcher ─────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--primary-06);
  border-radius: 8px;
  padding: 3px;
}
.lang-btn {
  background: none;
  border: none;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
  line-height: 1;
  font-family: inherit;
}
.lang-btn:hover { background: var(--primary-10); color: var(--primary); }
.lang-btn.active { background: var(--primary); color: #fff; }
@media (max-width: 768px) {
  /* Header desktop lang-switcher: oculto en mobile (no entra) */
  .nav-actions .lang-switcher { display: none; }
  /* Mobile menu lang-switcher: visible y estilizado para touch */
  .mobile-menu .mobile-menu-lang.lang-switcher {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px;
    margin: 18px auto 0;
    width: fit-content;
    background: rgba(15,59,99,.04);
    border: 1px solid rgba(15,59,99,.08);
    border-radius: 999px;
  }
  .mobile-menu .mobile-menu-lang .lang-btn {
    min-width: 44px;
    min-height: 36px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--muted);
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
  }
  .mobile-menu .mobile-menu-lang .lang-btn:hover {
    background: rgba(20,86,138,.08);
    color: var(--primary);
  }
  .mobile-menu .mobile-menu-lang .lang-btn.active {
    background: var(--primary);
    color: #fff;
  }
}

/* =========================================================
   Recommendation Engine — executive-tallado (light surface)
   ========================================================= */

/* ── Stepper — horizontal progress bar with labels ── */
.rec-progress {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  padding-bottom: 12px;
  margin: 0 auto 22px;
  max-width: 520px;
}
/* Background track */
.rec-progress::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--primary-08);
  border-radius: 2px;
}
/* Filling bar — width driven by :has() on active item position */
.rec-progress::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 2px;
  transition: width .5s var(--ease-out-expo);
  z-index: 1;
  width: 16.6%;
}
.rec-progress:has(.rec-progress-item:nth-child(3).is-active)::before { width: 50%; }
.rec-progress:has(.rec-progress-item:nth-child(5).is-active)::before { width: 100%; }

.rec-progress-sep { display: none; }

.rec-progress-item {
  flex: 1;
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-light);
  transition: color .3s ease;
  white-space: nowrap;
}
.rec-progress-item.is-active { color: var(--primary); font-weight: 700; }
.rec-progress-item.is-done { color: var(--accent); }
.rec-progress-num {
  display: inline-block;
  margin-right: 4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}
.rec-progress-item.is-active .rec-progress-num { color: var(--accent); opacity: 1; }

/* ── Steps ── */
.rec-step {
  transition: opacity .2s ease, margin-bottom .3s var(--ease-out-expo);
  margin-bottom: 16px;
}
.rec-step:last-of-type { margin-bottom: 0; }
.rec-step[hidden] { display: none; }
.rec-step.is-revealing { animation: recFadeUp .35s var(--ease-out-expo); }
/* Completed step renders as a horizontal "summary row":
   [LABEL]  selection title · description           Cambiar
   The label comes from data-step-label (synced from progress at JS init).
   This is the integrated chip layout the wizard uses inside .selector-flow. */
.rec-step.is-completed {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--primary-08);
  border-radius: 10px;
  background: rgba(20,86,138,.03);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.rec-step.is-completed:hover {
  background: rgba(20,86,138,.06);
  border-color: var(--accent-22);
}
.rec-step.is-completed::before {
  content: attr(data-step-label) ":";
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted-light);
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 78px;
}
.rec-step.is-completed:hover::before {
  color: var(--primary);
}
.rec-step.is-completed .rec-step-question { display: none; }
.rec-step.is-completed .rec-options {
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  width: auto;
  gap: 0;
}
.rec-step.is-completed .rec-option { display: none; }
.rec-step.is-completed .rec-option.is-selected {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  max-width: none;
  min-width: 0;
  flex: 1;
}
.rec-step.is-completed .rec-option.is-selected .rec-option-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.005em;
  white-space: nowrap;
  flex-shrink: 0;
}
.rec-step.is-completed .rec-option.is-selected .rec-option-desc {
  font-size: 12px;
  margin: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.rec-step.is-completed .rec-option.is-selected::before {
  display: none;
}
.rec-step.is-completed .rec-change-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted-light);
  margin-left: auto;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .2s ease, color .2s ease;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}
.rec-step.is-completed .rec-change-label::before {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7'/><path d='M3 4v5h5'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7'/><path d='M3 4v5h5'/></svg>") center/contain no-repeat;
  flex-shrink: 0;
}
.rec-step.is-completed:hover .rec-change-label,
.rec-step.is-completed:focus-within .rec-change-label {
  opacity: 1;
  color: var(--accent);
  text-decoration-color: currentColor;
}
.rec-step-question {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 14px;
  text-align: left;
  letter-spacing: -.018em;
  line-height: 1.2;
}

/* ── Option cards with letter badges (A/B/C/D) ── */
.rec-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  counter-reset: opt;
}
.rec-option {
  position: relative;
  counter-increment: opt;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px 14px 56px;
  min-height: 64px;
  border-radius: var(--radius-inner);
  border: 1px solid var(--primary-08);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition:
    border-color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) ease;
}
/* Letter badge (A, B, C, D) — top-left aligned */
.rec-option::before {
  content: counter(opt, upper-alpha);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1.5px solid var(--primary-14);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
  font-family: inherit;
  transition:
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}
.rec-option:hover {
  border-color: var(--accent-22);
  background: #fafcfe;
  transform: translateY(-1px);
}
.rec-option:hover::before {
  border-color: var(--accent-28);
  color: var(--primary);
}
.rec-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rec-option.is-selected {
  border-color: var(--accent);
  background: rgba(20,86,138,.04);
  box-shadow: 0 0 0 2px rgba(20,86,138,.12);
}
.rec-option.is-selected::before {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.rec-option-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.rec-option-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

/* ── Result — sits in .selector-aside (col 2) on desktop, replacing
   the tip panel once the user finishes the wizard. No top margin in
   embed mode — the modal mode adds its own spacing override. ── */
.rec-result {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.rec-result.is-revealing { animation: recFadeUp .4s var(--ease-out-expo); }
.rec-result::before {
  content: "TU RECOMENDACIÓN";
  display: block;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: 10px;
}
.rec-result[hidden] { display: none; }
.rec-result-text {
  font-size: 19px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 auto 18px;
  text-align: center;
  line-height: 1.3;
  letter-spacing: -.015em;
  max-width: 620px;
}
.rec-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  gap: 16px;
  width: 100%;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.rec-result-grid .model-tile { font-size: 13px; width: auto; min-width: 0; max-width: none; }
.rec-reset {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--primary-12);
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out-expo);
  font-family: inherit;
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rec-reset:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--primary-08);
}

/* ── Reveal animation — used by .rec-step.is-revealing and .rec-result.is-revealing ── */
@keyframes recFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Cards entrance: stagger inside the result grid for a guided reveal */
.rec-result.is-revealing .rec-result-grid > * {
  animation: recFadeUp .42s var(--ease-out-expo) backwards;
}
.rec-result.is-revealing .rec-result-grid > *:nth-child(1) { animation-delay: .12s; }
.rec-result.is-revealing .rec-result-grid > *:nth-child(2) { animation-delay: .20s; }
.rec-result.is-revealing .rec-result-grid > *:nth-child(3) { animation-delay: .28s; }
.rec-result.is-revealing .rec-result-grid > *:nth-child(n+4) { animation-delay: .34s; }
@media (prefers-reduced-motion: reduce) {
  .rec-step.is-revealing,
  .rec-result.is-revealing,
  .rec-result.is-revealing .rec-result-grid > * { animation: none; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .rec-options { grid-template-columns: 1fr; }
  .rec-result-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .rec-progress { max-width: 100%; }
  .rec-progress-item { font-size: 10px; letter-spacing: .08em; }
  .rec-step-question { font-size: 18px; }
  .rec-option { padding: 13px 16px 13px 50px; min-height: 60px; }
  .rec-option::before { left: 12px; width: 24px; height: 24px; font-size: 11px; }
  .rec-result-text { font-size: 16px; }
}

/* =========================================================
   ASSISTANT FAB + MODAL + CATALOG FILTER
   Floating pill bottom-center on category pages. Opens the
   wizard in a modal overlay. On completion, filters the
   catalog to the recommended models + shows a clear chip.
   ========================================================= */
.assistant-fab {
  position: fixed;
  top: 120px;
  right: 20px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  z-index: 820;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 16px 5px 5px;
  border: 1px solid rgba(15,59,99,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  color: var(--primary, #0f3b63);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15,59,99,.06),
    0 6px 16px rgba(15,59,99,.09);
  transition:
    opacity .32s var(--ease-out-expo, cubic-bezier(.22,1,.36,1)),
    transform .32s var(--ease-out-expo, cubic-bezier(.22,1,.36,1)),
    box-shadow .24s ease,
    background .24s ease,
    border-color .24s ease,
    color .24s ease;
}
.assistant-fab.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.assistant-fab:hover {
  background: #fff;
  border-color: var(--accent, #14568a);
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(15,59,99,.08),
    0 10px 24px rgba(15,59,99,.12);
}
.assistant-fab:active {
  transform: translateY(0);
  background: rgba(244,247,251,.98);
}
.assistant-fab:focus-visible {
  outline: 2px solid var(--accent, #14568a);
  outline-offset: 3px;
}
/* Icon chip — small accent-tinted disc */
.assistant-fab-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(20,86,138,.08), rgba(20,86,138,.16));
  color: var(--accent, #14568a);
  transition: background .24s ease;
}
.assistant-fab:hover .assistant-fab-icon {
  background: linear-gradient(135deg, rgba(20,86,138,.14), rgba(20,86,138,.24));
}
.assistant-fab-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.assistant-fab-label { white-space: nowrap; }

/* Hide FAB while modal is open */
body.assistant-open .assistant-fab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

/* Modal overlay — backdrop with blur */
.assistant-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,17,29,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
body.assistant-open .assistant-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Wizard in modal mode — centered overlay. Content fits naturally at
   target viewports (>=700px height); a max-height + overflow-y safety
   net kicks in only on short viewports so nothing gets clipped. */
body.page-category.assistant-open #productSelector {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2210;
  width: min(92vw, 820px) !important;
  max-width: min(92vw, 820px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  background: var(--white) !important;
  border-radius: 20px !important;
  padding: 28px 36px 26px !important;
  margin: 0 !important;
  box-shadow: 0 40px 96px rgba(0,0,0,.45);
  animation: assistantModalIn .36s var(--ease-out-expo) both;
}
body.page-category.assistant-open #productSelector .container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Compact section head inside modal */
body.page-category.assistant-open #productSelector .section-head {
  margin: 0 0 16px !important;
  padding-right: 44px;
  text-align: left !important;
  max-width: none !important;
}
body.page-category.assistant-open #productSelector .section-title {
  text-align: left !important;
  font-size: 22px !important;
  margin: 0 0 4px !important;
}
body.page-category.assistant-open #productSelector .section-sub {
  text-align: left !important;
  font-size: 13px !important;
  margin: 0 !important;
  max-width: none !important;
}
/* Compact internals in modal */
body.page-category.assistant-open #productSelector .rec-progress {
  margin: 0 auto 18px !important;
}
body.page-category.assistant-open #productSelector .rec-step-question {
  font-size: 17px !important;
  margin: 0 0 14px !important;
}
body.page-category.assistant-open #productSelector .rec-options {
  gap: 10px !important;
}
body.page-category.assistant-open #productSelector .rec-option {
  padding: 13px 16px 13px 56px !important;
  min-height: 60px !important;
}
body.page-category.assistant-open #productSelector .rec-option::before {
  width: 28px !important;
  height: 28px !important;
  left: 14px !important;
}
body.page-category.assistant-open #productSelector .rec-option-title { font-size: 14px !important; }
body.page-category.assistant-open #productSelector .rec-option-desc { font-size: 12px !important; }
/* Hide info panel inside modal — less cluttered, user focuses on the choice */
body.page-category.assistant-open #productSelector .selector-panel {
  display: none !important;
}
/* When result is visible inside the modal: keep chips + progress visible
   (user wants the same affordance as embed mode), but hide the section head
   to free vertical space — title duplication isn't useful once the answer
   is on screen. Chips on top → result below → cards. */
body.page-category.assistant-open #productSelector:has(.rec-result:not([hidden])) .section-head {
  display: none !important;
}
body.page-category.assistant-open #productSelector:has(.rec-result:not([hidden])) .rec-progress {
  margin: 0 auto 14px !important;
}
body.page-category.assistant-open #productSelector:has(.rec-result:not([hidden])) .rec-step.is-completed {
  margin-bottom: 6px !important;
}
body.page-category.assistant-open #productSelector:has(.rec-result:not([hidden])) .rec-result {
  margin-top: 14px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--primary-08);
}
body.page-category.assistant-open #productSelector:has(.rec-result:not([hidden])) .rec-result::before {
  margin-bottom: 10px !important;
}
body.page-category.assistant-open #productSelector .rec-result {
  margin-top: 16px !important;
  padding-top: 18px !important;
}
body.page-category.assistant-open #productSelector .rec-result::before {
  font-size: 10px !important;
  letter-spacing: .2em !important;
  margin-bottom: 10px !important;
}
body.page-category.assistant-open #productSelector .rec-result-text {
  font-size: 17px !important;
  margin: 0 auto 18px !important;
  max-width: 560px !important;
}
body.page-category.assistant-open #productSelector .rec-result-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px)) !important;
  gap: 12px !important;
  margin-bottom: 4px !important;
  max-width: 700px !important;
  justify-content: center !important;
}
body.page-category.assistant-open #productSelector .rec-reset {
  margin: 14px auto 0 !important;
  font-size: 12px !important;
  padding: 8px 16px !important;
}
/* Force single-column selector-grid in modal */
body.page-category.assistant-open #productSelector .selector-grid {
  grid-template-columns: 1fr !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 16px !important;
}
/* CTA primary "Ver en el catálogo" — injected by JS, styled here */
.rec-result-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.rec-result-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #195a8f 0%, #0f3b63 48%, #061829 100%);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .005em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 10px rgba(15,59,99,.22),
    0 10px 26px rgba(15,59,99,.26);
  transition: transform .2s var(--ease-out-expo), filter .2s ease, box-shadow .2s ease;
}
.rec-result-cta-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 6px 14px rgba(15,59,99,.26),
    0 14px 32px rgba(15,59,99,.3);
}
.rec-result-cta-primary svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease-out-expo);
}
.rec-result-cta-primary:hover svg { transform: translateX(3px); }

@keyframes assistantModalIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Close button inside the wizard modal (SVG, consistent with system) */
.assistant-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-14);
  background: var(--white);
  color: var(--primary);
  padding: 0;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  z-index: 5;
  transition: background .2s ease, border-color .2s ease, transform .2s var(--ease-out-expo);
}
.assistant-close svg {
  width: 18px;
  height: 18px;
  display: block;
}
body.page-category.assistant-open .assistant-close { display: flex; }
.assistant-close:hover {
  background: linear-gradient(135deg, var(--accent-08), var(--accent-14));
  border-color: var(--accent-28);
  color: var(--accent);
  transform: scale(1.04);
}
.assistant-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Wizard-specific hide classes (don't collide with spec-filter's .hide) ── */
.wizard-hidden,
.wizard-card-hidden { display: none !important; }

/* ── Wizard suggestions popover (appears when tile-modal closes) ── */
.wizard-suggestions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 820;
  width: 280px;
  max-width: calc(100vw - 40px);
  padding: 14px 14px 16px;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(15,59,99,.1);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,59,99,.06),
    0 14px 36px rgba(15,59,99,.18),
    0 28px 60px rgba(15,59,99,.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .4s cubic-bezier(.22,1,.36,1),
              transform .4s cubic-bezier(.22,1,.36,1);
}
.wizard-suggestions.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.wizard-suggestions.is-leaving { opacity: 0; transform: translateY(10px) scale(.96); transition-duration: .26s; }

/* Top hairline accent — gradient fade like the contact-box */
.wizard-suggestions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--primary, #0f3b63) 22%,
    var(--accent, #14568a) 50%,
    var(--primary, #0f3b63) 78%,
    transparent 100%);
  opacity: .85;
  z-index: 2;
}

/* Left accent bar */
.wizard-suggestions::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--primary, #0f3b63) 0%, var(--accent, #14568a) 100%);
  z-index: 2;
}

/* Countdown bar (10s visual timer — injected as child element) */
.wizard-suggestions-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, #14568a), var(--primary, #0f3b63));
  opacity: .45;
  transform-origin: left center;
  z-index: 2;
}
.wizard-suggestions.is-visible .wizard-suggestions-progress {
  animation: wizardSuggestionsCountdown 10s linear forwards;
}
@keyframes wizardSuggestionsCountdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.wizard-suggestions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(15,59,99,.08);
}
.wizard-suggestions-head > span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent, #14568a);
  line-height: 1.2;
}
.wizard-suggestions-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, #667085);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wizard-suggestions-close:hover {
  color: var(--primary, #0f3b63);
  background: rgba(15,59,99,.05);
  border-color: rgba(15,59,99,.12);
}
.wizard-suggestions-close:focus-visible {
  outline: 2px solid var(--accent, #14568a);
  outline-offset: 2px;
}
.wizard-suggestions-close svg {
  width: 13px;
  height: 13px;
  display: block;
}

.wizard-suggestions-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 9px 10px 9px 11px;
  border: 1px solid rgba(15,59,99,.08);
  border-radius: 11px;
  background: linear-gradient(135deg, #ffffff 0%, #fafcfe 100%);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  position: relative;
  transition: border-color .22s ease,
              transform .22s cubic-bezier(.22,1,.36,1),
              box-shadow .22s ease,
              background .22s ease;
}
.wizard-suggestions-item:hover {
  border-color: var(--accent-28, rgba(20,86,138,.28));
  transform: translateX(2px);
  box-shadow: 0 2px 6px rgba(15,59,99,.06), 0 8px 20px rgba(15,59,99,.1);
  background: linear-gradient(135deg, #ffffff 0%, rgba(20,86,138,.04) 100%);
}
.wizard-suggestions-item:active { transform: translateX(1px); }
.wizard-suggestions-item:focus-visible {
  outline: 2px solid var(--accent, #14568a);
  outline-offset: 2px;
}
.wizard-suggestions-item-img {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
  border: 1px solid rgba(15,59,99,.08);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: border-color .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.wizard-suggestions-item:hover .wizard-suggestions-item-img {
  border-color: var(--accent-22, rgba(20,86,138,.22));
  transform: scale(1.02);
}
.wizard-suggestions-item-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.wizard-suggestions-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wizard-suggestions-item-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #667085);
  line-height: 1.2;
}
.wizard-suggestions-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0f3b63);
  line-height: 1.25;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wizard-suggestions-item-arrow {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--accent, #14568a);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
  flex-shrink: 0;
  transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
.wizard-suggestions-item:hover .wizard-suggestions-item-arrow {
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .wizard-suggestions {
    right: 12px;
    /* Sienta arriba del FAB stack — usa el token + 8px buffer.
       En categoría: 124+8 = 132. En otras páginas: 80+8 = 88. */
    bottom: calc(var(--fab-stack-bottom, 80px) + 8px);
    width: calc(100vw - 24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-suggestions,
  .wizard-suggestions-item,
  .wizard-suggestions-item-img,
  .wizard-suggestions-item-arrow { transition: none !important; }
  .wizard-suggestions.is-visible .wizard-suggestions-progress { animation: none; transform: scaleX(0); }
}

/* ── Wizard tile highlight (temporary, 5s) — animated accent ring ── */
.model-tile.wizard-highlight {
  position: relative;
  z-index: 2;
  animation: wizardTileHighlightIn .35s var(--ease-out-expo, cubic-bezier(.22,1,.36,1)) both,
             wizardTileHighlightPulse 1.6s ease-in-out .35s infinite;
}
@keyframes wizardTileHighlightIn {
  from { box-shadow: 0 0 0 0 rgba(20,86,138,0), 0 0 0 0 rgba(20,86,138,0); }
  to   { box-shadow: 0 0 0 2px var(--accent, #14568a), 0 0 0 0 rgba(20,86,138,.55); }
}
@keyframes wizardTileHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent, #14568a), 0 0 0 0 rgba(20,86,138,.55); }
  50%      { box-shadow: 0 0 0 2px var(--accent, #14568a), 0 0 0 12px rgba(20,86,138,0); }
}
@media (prefers-reduced-motion: reduce) {
  .model-tile.wizard-highlight {
    animation: none;
    box-shadow: 0 0 0 2px var(--accent, #14568a);
  }
}

/* Wizard filter chip (shown above catalog after completion) */
.wizard-filter-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px 12px 20px;
  margin: 0 0 20px;
  background: linear-gradient(135deg, rgba(20,86,138,.08) 0%, rgba(20,86,138,.03) 100%);
  border: 1px solid var(--accent-22);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--primary);
  animation: wizardChipIn .32s var(--ease-out-expo) both;
}
.wizard-filter-chip-label {
  flex: 1;
  min-width: 0;
}
.wizard-filter-chip-label strong {
  font-weight: 700;
  letter-spacing: -.005em;
}
.wizard-filter-chip-label .wizard-filter-meta {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.wizard-filter-chip-clear {
  background: var(--white);
  border: 1px solid var(--primary-12);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
}
.wizard-filter-chip-clear:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface);
}

@keyframes wizardChipIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.wizard-filter-chip.is-leaving {
  animation: wizardChipOut .24s var(--ease-out-expo) forwards;
}
@keyframes wizardChipOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

/* Responsive FAB — assistant-fab apilado SIEMPRE arriba del whatsapp-float
   (que vive a bottom: 16px en mobile). bottom: 76px deja un gap visible
   entre los dos. z-index 820 (assistant) > 800 (whatsapp). */
@media (max-width: 768px) {
  .assistant-fab {
    top: auto;
    bottom: 76px;
    right: 14px;
    transform: translateY(8px);
    padding: 6px 14px 6px 6px;
    font-size: 12px;
    max-width: calc(100vw - 28px);
    box-shadow: 0 2px 6px rgba(15,59,99,.10), 0 8px 20px rgba(15,59,99,.12);
  }
  .assistant-fab.is-visible { transform: translateY(0); }
  .assistant-fab:hover { transform: translateY(-1px); }
  body.assistant-open .assistant-fab { transform: translateY(8px); }
  .assistant-fab-icon { width: 22px; height: 22px; }
  .assistant-fab-icon svg { width: 12px; height: 12px; }
  body.page-category.assistant-open #productSelector {
    padding: 22px 20px;
    width: 96vw;
    max-height: 92vh;
  }
  .wizard-filter-chip { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wizard-filter-chip-clear { align-self: flex-end; }
}
@media (max-width: 480px) {
  .rec-result-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Category page visual system (.page-category)
   Scoped to category pages only — does not affect home,
   empresa, faq, contacto, or 404.
   ========================================================= */

/* Hero full-viewport (landing + catálogo completo + categorías)
   Usa calc(100dvh - --hero-offset) para respetar topbar + header reales.
   --hero-offset lo setea JS al cargar/resize (ver initHeroOffset en app.js).
   Fallback: 100svh (evita salto por barras del browser en mobile). */
.hero.hero-full {
  --hero-offset: 120px; /* fallback antes de que JS mida */
  min-height: calc(100svh - var(--hero-offset));
  min-height: calc(100dvh - var(--hero-offset));
  max-height: calc(100dvh - var(--hero-offset));
  padding: 40px 0 56px;
  display: grid;
  align-content: center;
  position: relative;
  overflow: hidden;
}
.hero.hero-full .hero-grid { align-items: center; }
.page-category .hero.hero-full {
  padding: 36px 0 52px !important;
}
.page-category .hero.hero-full h1 {
  font-size: clamp(30px, 4.2vw, 46px) !important;
  margin-bottom: 14px !important;
  line-height: 1.08;
}
.page-category .hero.hero-full p { font-size: 15px; margin-bottom: 22px !important; }
.page-category .hero.hero-full .hero-card { padding: 26px 28px !important; }
.page-category .hero.hero-full .hero-card h3 { font-size: 18px !important; margin-bottom: 8px !important; }
.page-category .hero.hero-full .hero-card p { font-size: 13px !important; margin-bottom: 14px !important; }
/* Bullets unificados con .hero-system-list (rubros): 13px en ambos. Con copy
   reescrito en una sola línea, ya no es necesario el 12.5px que usábamos antes
   para "ahorrar" ancho. */
.page-category .hero.hero-full .hero-card li { font-size: 13px !important; }

/* Hero secondary CTA (right button): blanco sólido con texto navy en TODOS
   los heroes (home, categorías, rubros, catálogo, soluciones). El primario
   se mantiene en navy como siempre. En mobile ya existía esta regla; aquí la
   extendemos a desktop unificando el tratamiento. Vive fuera de @layer para
   vencer .hero .btn-secondary del layer layout (translúcido) y la versión
   mobile-only ya existente. */
.hero .button-row > .btn.btn-secondary {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary-12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.hero .button-row > .btn.btn-secondary:hover {
  background: #f4f7fb !important;
  background-image: none !important;
  color: var(--primary) !important;
  border-color: var(--primary-18) !important;
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.hero .button-row > .btn.btn-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Iconos del secundario: stroke/fill = currentColor → navy sobre blanco
   automáticamente, sin overrides extra. */

/* Thin white divider line at hero bottom */
.hero-full::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.32) 25%,
    rgba(255,255,255,.32) 75%,
    rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* Scroll-down indicator "VER MÁS" — discreto pero con vida sutil.
   Solo un bounce leve en los chevrones + fade en hover.
   Nada de halo pulsante, ripple ni cascadas — es un asist visual, no una fiesta. */
.hero-scroll-down {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 8px;
  text-decoration: none;
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  z-index: 3;
  border-radius: 999px;
  transition:
    color .35s ease,
    transform .4s cubic-bezier(.22,1,.36,1);
}
.hero-scroll-down > span {
  transition: opacity .35s ease;
  opacity: .85;
}
.hero-scroll-down svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: scrollDownNudge 2.4s ease-in-out infinite;
  transition: transform .35s ease;
}
@keyframes scrollDownNudge {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(3px); opacity: 1; }
}
.hero-scroll-down:hover { color: rgba(255,255,255,.85); }
.hero-scroll-down:hover > span { opacity: 1; }
.hero-scroll-down:hover svg { transform: translateY(2px); }
.hero-scroll-down:active { transform: translateX(-50%) scale(.96); transition-duration: .12s; }
.hero-scroll-down:focus-visible {
  outline: 2px solid rgba(120,190,240,.55);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-down svg { animation: none; }
}

/* Hero — more compact (other category pages, no hero-full) */
.page-category .hero:not(.hero-full) { padding: 72px 0 56px !important; }
.page-category .hero h1 { font-size: clamp(30px, 4.5vw, 44px) !important; margin-bottom: 12px !important; }
.page-category .hero p { margin-bottom: 20px !important; }
.page-category .hero-grid { gap: 32px !important; grid-template-columns: 1.15fr .85fr !important; }
.page-category .hero-card { padding: 28px !important; }
.page-category .hero-card h3 { font-size: 18px !important; font-weight: 700; margin-bottom: 8px !important; }
.page-category .hero-card p { font-size: 13px !important; margin-bottom: 14px !important; }
.page-category .hero-card li { font-size: 12.5px !important; }
.page-category .hero .button-row { gap: 10px; }
.page-category .hero .btn { padding: 14px 24px !important; font-size: 14px !important; }

/* Selector — the recommendation wizard section */
.page-category .light#productSelector { padding: 40px 0 !important; }
.page-category #productSelector .section-head { margin-bottom: 14px !important; }
.page-category #productSelector .section-title { font-size: clamp(22px, 3.5vw, 30px) !important; letter-spacing: -.02em; margin-bottom: 8px !important; }
.page-category #productSelector .section-sub { font-size: 14px !important; max-width: 560px; margin-left: auto; margin-right: auto; }

/* Two-column wizard layout — desktop ≥1024.
   Left (selector-flow):  steps + chips + active question.
   Right (selector-aside): tip panel initially → result block when ready.
   The :has() rule swaps panel ↔ result without layout jumps. */
.page-category .selector-grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: 36px;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  align-items: start;
}
.page-category .selector-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.page-category .selector-aside {
  position: relative;
  min-width: 0;
}
.page-category .selector-grid:has(.rec-result:not([hidden])) .selector-panel {
  display: none;
}
/* Desktop: 3 cards per row in the result column. Auto-fit with min 160
   keeps it responsive — also gracefully drops to 2 cols if the column
   becomes narrow. */
@media (min-width: 1024px) {
  .page-category .selector-aside .rec-result-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    justify-content: stretch;
  }
}
@media (max-width: 1023px) {
  .page-category .selector-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
    gap: var(--space-xl);
  }
}

/* Info panel — inline footnote with accent-left bar (quiet tip card) */
.page-category .selector-panel {
  position: relative;
  background: rgba(20,86,138,.04);
  border: 1px solid var(--primary-08);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px 16px 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.page-category .selector-panel p { margin: 0 0 10px; }
.page-category .selector-panel p:last-child { margin-bottom: 0; }
.page-category .selector-panel strong { color: var(--primary); font-weight: 700; }

/* Selector auxiliary text (1-column pages like soluciones) */
.page-category .selector-aux {
  max-width: 600px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.page-category .selector-aux strong { color: var(--primary); font-weight: 700; }

/* Editorial sections removed from DOM — content integrated into .selector-panel */

/* Catálogo — tighter top */
.page-category #catalogo { padding: 40px 0 48px !important; }
.page-category #catalogo .section-head { margin-bottom: 32px !important; }

/* Services panel — better separation */
.page-category .services-panel { margin-top: 24px; }

/* CTA — more compact, doesn't compete with hero */
.page-category .cta { padding: 48px 0 !important; }
.page-category .cta h3 { font-size: clamp(24px, 3.5vw, 32px) !important; }
.page-category .cta p { font-size: 15px !important; margin-bottom: 24px !important; }
.page-category section[aria-label*="cotización"],
.page-category section[aria-label*="Solicitar"] { padding: 32px 0 !important; }

/* In category pages, hide the generic CTA inside #contacto (the category-specific CTA above is sufficient) */
.page-category #contacto > .container > .cta { display: none; }
.page-category #contacto > .container > .spacer-26 { display: none; }
/* Match contacto.html spacing: CTA padding-bottom 32px + spacer 14px between CTA and grid */
.page-category section[aria-label*="Solicitar"] + #contacto { padding-top: 14px !important; }
.page-category section[aria-label*="cotización"] + #contacto { padding-top: 14px !important; }

/* Responsive adjustments for category pages */
@media (max-width: 1024px) {
  .page-category .hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .page-category .hero-card { max-width: 540px; }
  .page-category .selector-grid { grid-template-columns: 1fr; }
  .page-category .selector-panel { max-width: 640px; }
}
@media (max-width: 768px) {
  .page-category .hero:not(.hero-full) { padding: 48px 0 36px !important; }
  .page-category .hero.hero-full { padding: 48px 0 56px !important; }
  .page-category .hero.hero-full h1 { font-size: clamp(30px, 7vw, 42px) !important; }
  .hero-scroll-down { bottom: 16px; font-size: 10px; letter-spacing: .12em; padding: 6px 12px 8px; }
  .hero-scroll-down svg { width: 16px; height: 16px; }
  .page-category .hero h1 { font-size: clamp(26px, 7vw, 36px) !important; }
  .hero-product-rotate { width: 260px; height: 150px; margin: 14px 0 12px; padding: 16px 20px; }
  .hero-product-rotate img { inset: 16px 20px; width: calc(100% - 40px); height: calc(100% - 32px); }
  /* Phase 4: bump moderado en sub-secciones de rubros para que respiren
     entre el hero y el catálogo, y entre el catálogo y la CTA final. */
  .page-category .light#productSelector { padding: 40px 0 !important; }
  .page-category #catalogo { padding: 36px 0 44px !important; }
  .page-category .cta { padding: 40px 0 !important; }
  .page-category section[aria-label*="cotización"],
  .page-category section[aria-label*="Solicitar"] { padding: 24px 0 36px !important; }
  .page-category .selector-panel { padding: 22px; position: static; }
  .page-category .selector-aux { font-size: 13px; }
}

/* =========================================================
   MOBILE POLISH — final cascade layer
   System-level refinements for spacing, typography, touch
   ergonomics y consistencia visual en celulares (≤ 768px).
   Esta capa va al final a propósito: gana sobre cualquier
   regla previa sin necesitar !important.
   ========================================================= */
@media (max-width: 768px) {
  /* — Section vertical rhythm — */
  section { padding: 36px 0; }
  #categorias, #destacados { padding: 40px 0; }

  /* — Header: más compacto, no domina — */
  header { padding: 10px 0; }
  .header-scrolled header { padding: 6px 0; }
  .brand { gap: 10px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-copy strong { font-size: 15px; }
  .nav { gap: 12px; }
  .nav-actions { gap: 8px; }
  .header-cta { padding: 9px 14px; font-size: 12.5px; }
  .header-cta svg { width: 14px; height: 14px; }

  /* — Hero: respiración real, lectura fluida — */
  .hero { padding: 36px 0 32px; }
  .hero-grid { gap: 24px; }
  .eyebrow { font-size: 11px; margin-bottom: 12px; }
  .hero p { font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
  .hero-card { padding: 22px; border-radius: 18px; }
  .hero-card h3 { font-size: 17px; margin-bottom: 8px; }
  .hero-card p { font-size: 13.5px; margin-bottom: 14px; }
  .hero-card ul { gap: 10px; }
  .hero-card li { font-size: 12.5px; }
  .hero-product-rotate {
    width: 100%;
    max-width: 320px;
    height: 160px;
    padding: 16px 22px;
    margin: 12px auto 16px;
  }
  .hero-product-rotate img {
    inset: 16px 22px;
    width: calc(100% - 44px);
    height: calc(100% - 32px);
  }

  /* — Section heads: jerarquía proporcional — */
  .section-head { margin-bottom: 22px; }
  .section-title { font-size: clamp(22px, 5.8vw, 30px); margin-bottom: 10px; line-height: 1.15; }
  .section-sub { font-size: 13.5px; line-height: 1.6; }

  /* — Trust strip — */
  .trust-strip { padding: 24px 0; }
  .trust-grid { gap: 18px; }
  .trust-item b { font-size: clamp(24px, 6vw, 32px); }
  .trust-item strong { font-size: 14px; }
  .trust-item span { font-size: 12.5px; }

  /* — Botones: touch target cómodo — */
  .btn { min-height: 44px; padding: 12px 20px; }
  .button-row { gap: 10px; flex-wrap: wrap; }
  .button-row .btn { flex: 1 1 calc(50% - 10px); min-width: 140px; }

  /* — Featured carousel: cards casi al ancho del viewport — */
  .featured-grid .featured-card { flex: 0 0 calc(100% - 36px); max-width: 320px; }

  /* — Cards genéricos: padding más razonable — */
  .card { padding: 22px; }
  .solution-card { padding: 26px 22px 22px 26px; }
  .product-card { border-radius: 16px; }
  .product-head h3 { font-size: 16px; padding-bottom: 8px; }
  .product-body { padding: 14px 18px 20px; }
  .product-body > p { font-size: 13px; line-height: 1.55; }

  /* — Filtros y pills: touch targets — */
  .filter-btn { min-height: 44px; padding: 10px 16px; }
  .spec-pill { min-height: 40px; padding: 8px 14px; }

  /* — Footer: ritmo más fino en mobile — */
  footer { padding: 0 0 18px; }
  .footer-cta { margin: 24px 0 24px; padding: 18px 18px; gap: 14px; border-radius: 11px; }
  .footer-cta-eyebrow { font-size: 9.5px; margin-bottom: 4px; }
  .footer-cta-title { font-size: 15.5px; margin-bottom: 4px; }
  .footer-cta-desc { font-size: 12.5px; }
  .footer-cta-actions { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .footer-cta-btn { justify-content: center; padding: 11px 16px; font-size: 12.5px; min-height: 44px; }
  .footer-grid { gap: var(--space-xl); margin-bottom: 20px; }
  .footer-brand h4 { font-size: 14px; }
  .footer-brand-tagline { font-size: 11.5px; margin-bottom: 10px; }
  .footer-lead { font-size: 12.5px; max-width: none; margin-bottom: 12px; }
  .footer-col h4 { margin-bottom: 11px; }
  .footer-bottom { padding-top: 14px; font-size: 11px; flex-direction: column; align-items: flex-start; gap: 4px; }

  /* — Forms: 16px previene zoom automático en iOS — */
  .contact-form input,
  .contact-form select,
  .contact-form textarea { font-size: 16px; }

  /* — Iframes (Google Maps): menor altura en mobile.
     Container .contact-map limita visualmente; iframe 60px más alto
     para clip del bottom (atribución + thumbnail "View larger map"). */
  .contact-map { height: 200px; }
  .contact-map iframe { height: 260px; border-radius: 14px; }

  /* — Imágenes: safety net contra fixed dimensions — */
  img { max-width: 100%; height: auto; }
}

@media (max-width: 480px) {
  /* — Container más ajustado en pantallas chicas — */
  .container { padding-inline: 16px; }

  /* — Hero más compacto en 360-, mantiene proporción — */
  .hero { padding: 32px 0 28px; }
  .hero h1 { letter-spacing: -.025em; }
  .hero p { margin-bottom: 20px; }

  /* — Botones full width vertical en CTAs duales — */
  .button-row { flex-direction: column; }
  .button-row .btn { flex: 1 1 100%; min-width: 0; }

  /* — Featured cards: deja peek lateral para que se entienda como carousel.
     Antes: full bleed sin tope (claustrofobia).
     Ahora: cap 300px (más presencia, menos "mini card") + calc(100% - 56px)
     para que asome la siguiente. En 320px viewport el calc gana
     (320 - 56 = 264px) y mantiene peek sin overflow. — */
  .featured-grid .featured-card { flex: 0 0 calc(100% - 56px); max-width: 300px; }

  /* — Section heads aún más ajustados — */
  .section-title { font-size: clamp(20px, 6.5vw, 26px); }

  /* — Footer en columna: más aire entre bloques apilados.
     gap 24 → 28, margin-bottom 24 → 28. Tighten footer-bottom items
     que estaban en gap 4px (muy pegado, links sobre copyright). — */
  .footer-grid { gap: 28px; margin-bottom: 28px; }
  .footer-brand h4 { font-size: 17px; }
  .footer-lead { font-size: 13px; }
  .footer-bottom { gap: 8px; padding-top: 16px; }
}

/* =========================================================
   MOBILE — Category page polish layer (≤ 768px)
   Compacta la barra sticky del catálogo, el panel de servicios,
   y reordena los flotantes para que no compitan.
   ========================================================= */
@media (max-width: 768px) {
  /* ── Sticky catalog mobile: 2 filas claras
     Row 1: search grande + botón redondo de filtros spec al costado
     Row 2: strip horizontal con todas las categorías ── */
  .catalog-tools-sticky {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 10px;
    align-items: center;
  }
  /* ── Brand block en sticky mobile: identidad completa
     Layout horizontal: [icono 24px] [nombre / tagline truncado]
     Toma su propia fila arriba (full width), altura controlada
     ~44px. No compite con search/filters. Tagline trunca con
     ellipsis. Bajo 360px solo queda icono + nombre. ── */
  .catalog-tools-sticky .catalog-brand {
    order: -1;
    flex: 0 0 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(15,59,99,.06);
    color: var(--primary);
    text-decoration: none;
    transition: opacity .15s ease;
    min-width: 0;
  }
  .catalog-tools-sticky .catalog-brand:hover { opacity: .82; }
  .catalog-tools-sticky .catalog-brand img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .catalog-tools-sticky .catalog-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
  }
  .catalog-tools-sticky .catalog-brand-name {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.005em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .catalog-tools-sticky .catalog-brand-tagline {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
    line-height: 1.25;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Reorder: row 0 = brand block (full width), row 1 = search + filter,
     row 2 = filters strip. Search basis 200px fuerza wrap del .filters. */
  .catalog-tools-sticky .search { order: 1; flex: 1 1 200px; min-width: 0; }
  .catalog-tools-sticky .spec-filters-toggle { order: 2; }
  .catalog-tools-sticky .filters { order: 3; flex: 0 0 100%; }
  .catalog-tools-sticky .spec-filters { order: 4; }
  .catalog-tools-sticky .spec-chip-bar { order: 5; }

  /* Search grande, alto cómodo */
  :where(.catalog-tools-sticky) :is(input[type="search"], input[type="text"]) {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 16px 0 40px;
    background-position: 14px center;
    background-size: 18px 18px;
    font-size: 15px;
    border-radius: 999px;
    box-shadow: 0 2px 8px var(--primary-06);
  }

  /* Spec-filters toggle: BOTÓN REDONDO ícono-only */
  .catalog-tools-sticky .spec-filters-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 44px;
    border-radius: 50%;
    align-self: center;
    justify-content: center;
    gap: 0;
  }
  .catalog-tools-sticky .spec-filters-toggle svg:first-of-type {
    width: 18px;
    height: 18px;
  }
  /* Ocultar el texto y el chevron — solo queda el ícono de embudo */
  .catalog-tools-sticky .spec-filters-toggle .spec-filters-toggle-text-short,
  .catalog-tools-sticky .spec-filters-toggle .spec-filters-toggle-text-full,
  .catalog-tools-sticky .spec-filters-toggle .spec-filters-chevron {
    display: none;
  }
  /* Estado abierto: marca con bg accent sutil */
  .catalog-tools-sticky .spec-filters-toggle--open {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
  }

  /* Strip de filtros de categoría: scroll horizontal con fade en bordes */
  .catalog-tools-sticky .filters {
    flex: 0 0 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 14px;
    margin: 0 -14px;
    scroll-padding-left: 14px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .catalog-tools-sticky .filters::-webkit-scrollbar { display: none; }
  .catalog-tools-sticky .filter-btn {
    min-height: 38px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* Los chips no-sticky (los que viven dentro del hero oscuro) también */
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .filters::-webkit-scrollbar { display: none; }
  #catalogo .catalog-tools:not(.catalog-tools-sticky) .filter-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    min-height: 36px;
  }

  /* — Services panel: padding mobile razonable — */
  .services-panel {
    padding: 22px 18px;
    border-radius: 16px;
    margin-top: 20px;
  }
  .services-panel-head { margin-bottom: 2px; }
  .services-panel-head span {
    font-size: 10px;
    padding: 3px 10px;
    margin-bottom: 8px;
  }
  .services-panel h3 { font-size: 16px; line-height: 1.2; }
  .services-panel-head > p { font-size: 12.5px; line-height: 1.5; }

  .services-list { gap: 12px; margin-top: 14px; }
  .services-item {
    padding: 14px 16px;
    border-radius: 12px;
    gap: 4px;
  }
  .services-item strong { font-size: 14.5px; line-height: 1.2; }
  .services-item p { font-size: 12.5px; line-height: 1.5; margin-bottom: 2px; }
  /* Botón dentro de svc-card: ancho contenido, una sola línea */
  .services-item .btn.btn-with-icon,
  .services-item .consultar-servicio {
    align-self: stretch;
    min-height: 40px;
    padding: 9px 16px;
    font-size: 13px;
    border-radius: 10px;
    white-space: nowrap;
    min-width: 0;
  }
  .services-item .btn.btn-with-icon svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }

  /* Barra superior azul (topbar): el mensaje completo debe verse.
     Solución: permitir wrap natural a 2 líneas en viewports
     angostos (font compacto + line-height tight + text-align
     center). Nada se trunca. */
  .topbar { font-size: 11.5px; }
  .topbar .container {
    flex-wrap: nowrap !important;
    padding-inline: 14px !important;
    padding-block: 8px !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .topbar-message {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* Una sola línea — font scaling agresivo para que el mensaje
       completo entre sin wrap ni ellipsis. */
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: -.01em !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* .assistant-fab: las reglas mobile viven en el bloque @media 768px
     de arriba (responsive FAB). Acá se eliminó la duplicación. */
}

/* Ajustes finos para pantallas pequeñas (320–430px) */
@media (max-width: 480px) {
  .catalog-tools-sticky { padding: 10px 12px; row-gap: 10px; gap: 8px; }
  .catalog-tools-sticky .filters { margin: 0 -12px; padding: 2px 14px; }
  :where(.catalog-tools-sticky) :is(input[type="search"], input[type="text"]) {
    height: 42px;
    font-size: 14.5px;
    padding: 0 14px 0 38px;
  }
  .catalog-tools-sticky .filter-btn {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 12.5px;
  }
  /* Botón redondo un poco más chico en pantallas estrechas */
  .catalog-tools-sticky .spec-filters-toggle {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }
  .catalog-tools-sticky .spec-filters-toggle svg:first-of-type {
    width: 17px;
    height: 17px;
  }
  /* Brand block más compacto en pantallas chicas */
  .catalog-tools-sticky .catalog-brand { padding: 2px 0 6px; gap: 9px; }
  .catalog-tools-sticky .catalog-brand img { width: 22px; height: 22px; }
  .catalog-tools-sticky .catalog-brand-name { font-size: 12px; }
  .catalog-tools-sticky .catalog-brand-tagline { font-size: 9.5px; }

  .services-panel { padding: 18px 14px; }
  .services-item { padding: 12px 14px; }
  .services-item strong { font-size: 14px; }
  .services-item p { font-size: 12px; }
}

/* =========================================================
   MOBILE — Contact info cards: stacked layout (≤ 600px)
   En mobile el grid 3-col (icon | value | action) colapsa a:
     row 1: [icon] label
     row 2: [icon] value
     row 3: action (ancho completo, debajo)
   Evita que el botón desborde el card y que teléfono/email
   se fragmenten carácter por carácter por columna aplastada.
   ========================================================= */
@media (max-width: 600px) {
  .contact-info-item {
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 4px;
  }
  .contact-info-copy > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .contact-info-row > .contact-info-value {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .contact-info-row > .contact-info-action {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    width: 100%;
    margin-top: 10px;
  }
  .contact-info-action .btn {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }
  /* Evita que un email/url sin espacios corte por carácter cuando
     haya overflow; prefiere un break único al borde, no fragmentación. */
  .contact-info-value {
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   MOBILE — Reservar espacio para FAB flotante (≤ 768px)
   Usa el token --fab-stack-bottom (Etapa 1). En body.page-category
   ese valor crece para acomodar también el assistant-fab.
   ========================================================= */
@media (max-width: 768px) {
  main { padding-bottom: var(--fab-stack-bottom, 80px); }
  /* Categoría: hay 2 FABs (whatsapp + assistant). Ampliamos reserva. */
  body.page-category { --fab-stack-bottom: 124px; }
}

/* =========================================================
   MOBILE — CTA dark compacto en contacto (≤ 600px)
   Baja altura total del bloque "Consultanos por equipos…":
     - padding vertical reducido
     - título/párrafo con tracking tipográfico tighter
     - botones menos pesados (padding, font-size, min-height)
     - lado a lado en vez de stack vertical completo
   ========================================================= */
@media (max-width: 600px) {
  #contacto .cta {
    padding: 22px 0;
  }
  #contacto .cta :is(h1, h2, h3) {
    font-size: clamp(20px, 5.6vw, 26px);
    line-height: 1.2;
    margin-bottom: 8px;
  }
  #contacto .cta p {
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  /* Anula el flex-direction:column global de .button-row a ≤480px
     solo para este CTA: side-by-side queda más compacto y prolijo. */
  #contacto .cta .button-row {
    flex-direction: row;
    gap: 8px;
  }
  #contacto .cta .button-row .btn {
    flex: 1 1 calc(50% - 4px);
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13.5px;
  }
}

/* =========================================================
   MOBILE — Featured carousel: peek affordance en pantallas
   muy angostas (≤ 400px). El card fijo de 260px en un viewport
   de 320px ocupa ~81% del ancho y no muestra el siguiente card
   lo suficiente como para indicar scrollabilidad. En ≤400px
   dimensionamos el card en función del viewport dejando un peek
   de ~72px para el siguiente card.
   ========================================================= */
@media (max-width: 400px) {
  .featured-grid .featured-card { flex: 0 0 calc(100vw - 72px); }
}

/* =========================================================
   MOBILE — Guardas de overflow en media embebida
   iframes y maps no deben desbordar nunca el contenedor.
   ========================================================= */
@media (max-width: 768px) {
  .contact-map-iframe,
  iframe[src*="google.com/maps"] {
    max-width: 100%;
  }
}

/* =========================================================
   MOBILE — Tipografía body copy con clamp (≤ 768px)
   Hero p, eyebrow y section-sub estaban hardcoded en px;
   ahora escalan con vw para no quedar oversized en 320px.
   Caps respetan el tamaño anterior como techo.
   ========================================================= */
@media (max-width: 768px) {
  .hero p { font-size: clamp(13.5px, 3.6vw, 15px); }
  .eyebrow { font-size: clamp(10px, 3vw, 11px); }
  .section-sub { font-size: clamp(12.5px, 3.4vw, 13.5px); }
}

/* =========================================================
   MOBILE — Footer compacto en 480px
   El footer base usa 44px de padding y h4 sin reducir.
   En pantallas chicas eso ocupa mucho cierre vertical.
   ========================================================= */
@media (max-width: 480px) {
  footer { padding: 0 0 16px; }
  .footer-cta { margin: 22px 0 20px; padding: 16px 16px; }
  .footer-cta-title { font-size: 15px; }
  .footer-cta-desc { font-size: 12px; }
  /* En <480 mantenemos los headers algo más chicos pero proporcionales
     al desktop bumpeado (12 → 11). Margin un punto más por la jerarquía. */
  .footer-col h4 { font-size: 11px; margin-bottom: 12px; }
  .footer-col li { font-size: 12.5px; }
  .footer-bottom { font-size: 11px; padding-top: 12px; }
}

/* =========================================================
   MOBILE — Compare overlay en pantallas estrechas (≤ 480px)
   El grid 100px + N×1fr deja muy poca columna para los valores
   cuando hay 3 productos. Reducimos label col y comprimimos.
   ========================================================= */
@media (max-width: 480px) {
  .compare-header,
  .compare-row {
    grid-template-columns: 80px repeat(var(--compare-cols, 2), 1fr);
  }
  .compare-product-col { padding: 14px 6px; }
  .compare-product-col img { max-height: 56px; margin-bottom: 6px; }
  .compare-product-col h4 { font-size: 11.5px; }
  .compare-product-col p { font-size: 10px; }
  .compare-row .compare-label-col { padding: 8px 10px; font-size: 11px; }
  .compare-value-col { padding: 8px 8px; font-size: 11.5px; }
  .compare-cta { padding: 14px 10px; gap: 8px; flex-direction: column; }
  .compare-cta .btn { width: 100%; }
}

/* =========================================================
   RESIDUAL MOBILE FIXES — pasada de validación visual
   ========================================================= */

/* ── Contacto: ocultar FAB de WhatsApp (redundante en esta página)
   La página ya tiene 3 entradas a WhatsApp: el CTA dark, el botón
   dentro del card de Teléfono, y el link en el footer. El FAB
   tapaba el botón de Google Maps en el card de Dirección. ── */
body.page-contact .whatsapp-float { display: none; }

/* ── Contacto: CTA dark más compacto y con botones livianos ── */
@media (max-width: 600px) {
  #contacto .cta {
    padding: 16px 0 18px;
  }
  #contacto .cta :is(h1, h2, h3) {
    font-size: clamp(19px, 5.2vw, 24px);
    line-height: 1.18;
    margin-bottom: 6px;
  }
  #contacto .cta p {
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 12px;
    max-width: 38ch;
  }
  #contacto .cta .button-row {
    gap: 8px;
  }
  #contacto .cta .button-row .btn {
    flex: 1 1 calc(50% - 4px);
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 7px 12px;
    font-size: 12.5px;
    border-radius: 999px;
  }
  #contacto .cta .button-row .btn svg {
    width: 14px;
    height: 14px;
  }
}

/* ── Contacto cards: refinamiento del reflow mobile
   - icon col más chica (40px) para liberar ancho para el valor
   - icon spanea sólo label+value (1/3), no la action; antes se
     centraba sobre las 3 filas y quedaba descolgado hacia abajo
   - value font-size escala con vw para que el email no rompa
     en pantallas muy chicas
   - padding interno reducido para ganar 12px de ancho útil
   ── */
@media (max-width: 600px) {
  .contact-info-item {
    grid-template-columns: 40px 1fr;
    column-gap: 12px;
    padding: 14px 16px;
  }
  .contact-info-icon {
    width: 40px;
    height: 40px;
    grid-row: 1 / 3;
    border-radius: 10px;
  }
  .contact-info-icon svg {
    width: 18px;
    height: 18px;
  }
  .contact-info-value {
    font-size: clamp(13.5px, 4vw, 15.5px);
    line-height: 1.3;
  }
  .contact-info-row > .contact-info-action {
    margin-top: 8px;
  }
  .contact-info-action .btn {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

/* ── Page-category: header un toque más bajo en mobile ── */
@media (max-width: 768px) {
  header { padding: 8px 0; }
  .header-scrolled header { padding: 5px 0; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-mark img { width: 32px; height: 32px; }
}

/* ── Page-category: hero con arranque limpio y visualización
   más compacta. El padding-top extra evita que el h1 quede
   pegado al header sticky en el scroll inicial. La imagen baja
   un escalón en pantallas chicas para no dominar el viewport.
   ── */
@media (max-width: 768px) {
  /* Hero mobile fix: liberar max-height/min-height para que el contenido
     respire según su tamaño real. La regla base usa max-height: 100dvh
     que en mobile chico (h ≤ 700px) trunca por overflow:hidden el hero
     card de rubros (eyebrow + h1 + p + 2 botones + sistema-card). */
  .hero.hero-full {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }
  .page-category .hero.hero-full {
    padding: 28px 0 40px !important;
  }
  .page-category .hero.hero-full h1 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
    word-break: break-word;
  }
  .page-category .hero.hero-full p {
    font-size: 14px !important;
    line-height: 1.5;
    margin-bottom: 16px !important;
  }
  .page-category .hero .hero-product-rotate {
    width: clamp(200px, 62vw, 240px);
    height: clamp(120px, 38vw, 140px);
    margin: 8px 0 16px;
  }
  .page-category .hero .button-row {
    gap: 8px;
  }
  .page-category .hero .button-row .btn {
    padding: 10px 18px !important;
    font-size: 13px !important;
    min-height: 40px;
  }
  /* El secondary CTA (Solicitar cotización) menos pesado:
     borde más sutil, sin sombra dura. */
  .page-category .hero .button-row .btn.btn-secondary {
    background: transparent;
    border: 1px solid var(--primary-18);
    box-shadow: none;
  }
}

/* ── Modal mobile: encuadre limpio, sin peek lateral, header
   con room para el close button, sin que el título toque el
   borde superior. ── */
@media (max-width: 768px) {
  /* Overlay con menos padding lateral para que el modal use
     casi todo el viewport (no queda sensación de peek). */
  .tile-modal-overlay { padding: 12px; }
  /* Modal full-width útil */
  .tile-modal {
    max-width: 100%;
    width: 100%;
    max-height: 94vh;
  }
  /* Espacio top en el right pane para clear del close button
     (top:14px + 36px alto + 6px buffer = 56px) y del counter. */
  .tile-modal-right {
    padding: 56px 18px 16px !important;
  }
  /* Título del modal: line-height tighter, no se arrastra */
  .tile-modal-right .model-tile-name {
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding-right: 4px;
  }
  /* Counter más cerca del close, sin pisarlo */
  .tile-modal-counter {
    top: 18px !important;
    right: 60px !important;
    font-size: 9.5px !important;
  }
  /* Close button con tamaño touch-friendly y bien anclado */
  .tile-modal-close {
    top: 10px !important;
    right: 10px !important;
    width: 36px !important;
    height: 36px !important;
  }
}

/* ── Modal en pantallas muy chicas (≤ 400px): max altura más
   permisiva y arrows pegados al borde para no comer espacio. ── */
@media (max-width: 400px) {
  .tile-modal-overlay { padding: 8px; }
  .tile-modal-prev { left: 4px !important; }
  .tile-modal-next { right: 4px !important; }
  .tile-modal-nav {
    width: 32px !important;
    height: 44px !important;
  }
  .tile-modal-nav svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* =========================================================
   RESIDUAL MOBILE FIXES #2 — segunda pasada de validación
   ========================================================= */

/* ── Page-category hero: KILL del viewport-tall en mobile.
   El base hero-full tenía min-height: calc(100dvh - 120px) que
   forzaba el hero a ~448px en iPhone SE. Ese era el origen real
   del "primer pantallazo largo y pesado". En mobile el hero
   ahora se dimensiona por su contenido. ── */
/* ── Mobile category hero: matchear las proporciones del desktop ──
   El desktop usa full-viewport (display:grid + align-content:center),
   tipografía generosa, hero-card con presencia, botones standard.
   Mobile preserva todo eso (mismos elementos, misma jerarquía
   visual, mismo full-viewport) y solo colapsa el grid 2-col a 1-col
   por restricción de ancho. ── */
@media (max-width: 768px) {
  .page-category .hero.hero-full {
    /* Full-viewport: ocupa la pantalla disponible (igual que desktop) */
    min-height: calc(100svh - var(--hero-offset, 120px)) !important;
    min-height: calc(100dvh - var(--hero-offset, 120px)) !important;
    max-height: none !important;
    padding: 32px 0 36px !important;
    display: grid !important;
    align-content: center !important;
  }
  /* Grid 1-col en mobile (única diferencia estructural vs desktop) */
  .page-category .hero.hero-full .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: start !important;
  }

  /* H1 escala generosa, cercana al desktop */
  .page-category .hero.hero-full h1 {
    font-size: clamp(28px, 6.5vw, 38px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
    margin-bottom: 14px !important;
  }
  .page-category .hero.hero-full p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 22px !important;
    max-width: 56ch;
  }

  /* Imagen producto: tamaño con presencia */
  .page-category .hero .hero-product-rotate {
    width: 100% !important;
    max-width: 320px !important;
    height: clamp(140px, 38vw, 180px) !important;
    margin: 8px 0 18px !important;
    padding: 18px 24px !important;
  }
  .page-category .hero .hero-product-rotate img {
    inset: 18px 24px !important;
    width: calc(100% - 48px) !important;
    height: calc(100% - 36px) !important;
  }

  /* CTAs: standard del sitio (no pills livianas) */
  .page-category .hero .button-row {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .page-category .hero .button-row .btn {
    padding: 13px 22px !important;
    font-size: 14px !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* Secondary blanco sólido + texto navy (igual que desktop) */
  .page-category .hero .button-row .btn.btn-secondary {
    background: rgba(255,255,255,.96) !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary-12) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 10px 24px var(--primary-08), inset 0 1px 0 rgba(255,255,255,.7) !important;
  }
  .page-category .hero .button-row .btn.btn-secondary:hover {
    background: var(--white) !important;
    color: var(--accent) !important;
    border-color: var(--accent-22) !important;
  }
  .page-category .hero .button-row .btn.btn-secondary svg {
    stroke: var(--primary) !important;
    fill: none !important;
  }
  .page-category .hero .button-row .btn.btn-secondary span {
    color: var(--primary) !important;
  }

  /* Hero-card: proporciones cercanas al desktop, no compacto */
  .page-category .hero.hero-full .hero-card {
    padding: 24px 24px !important;
    border-radius: 18px !important;
  }
  .page-category .hero.hero-full .hero-card h3 {
    font-size: 17px !important;
    margin-bottom: 8px !important;
  }
  .page-category .hero.hero-full .hero-card p {
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }
  .page-category .hero.hero-full .hero-card li {
    font-size: 12.5px !important;
  }
}

/* ── Header aún más compacto en mobile (segunda pasada) ──
   El CTA "Solicitar cotización" se oculta en mobile: dominaba el
   navbar y forzaba a la marca a partirse en 2 líneas. La conversión
   queda cubierta por (a) los CTAs del hero, (b) WhatsApp en el menú
   móvil, (c) el WhatsApp FAB flotante.
   La tagline se muestra debajo del nombre con tipografía contenida
   y truncada para no romper balance con hamburguesa. ── */
@media (max-width: 768px) {
  header { padding: 6px 0 !important; }
  .header-scrolled header { padding: 4px 0 !important; }
  .brand-mark,
  .brand-mark img { width: 32px !important; height: 32px !important; }
  .brand-copy strong {
    font-size: 14px !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
  }
  .brand-copy span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    color: var(--muted) !important;
    font-weight: 500 !important;
    letter-spacing: -.005em !important;
    white-space: normal !important;
    overflow: hidden !important;
    max-width: none !important;
  }
  .header-cta { display: none !important; }
  .nav-actions { gap: 6px !important; }
}

/* Pantallas muy chicas (≤360px): ocultar tagline en header y sticky brand */
@media (max-width: 360px) {
  .brand-copy span { display: none !important; }
  .catalog-tools-sticky .catalog-brand-tagline { display: none; }
}

/* Desktop sticky catalog: mantener brand minimalista (solo nombre) — la
   tagline ya está cubierta por el header desktop normal arriba. */
@media (min-width: 769px) {
  .catalog-tools-sticky .catalog-brand-tagline { display: none; }
  .catalog-tools-sticky .catalog-brand-text { display: inline; }
  .catalog-tools-sticky .catalog-brand-name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.02em;
  }
}

/* ── Topbar mobile: mensaje completo en 1 sola línea
   Font scaling con clamp + letter-spacing tight + nowrap.
   Padding lateral mínimo para maximizar ancho disponible. ── */
@media (max-width: 600px) {
  .topbar { font-size: clamp(8.5px, 2.6vw, 11px) !important; }
  .topbar .container {
    padding-inline: 8px !important;
    padding-block: 6px !important;
  }
  .topbar-message {
    font-size: clamp(8.5px, 2.6vw, 11px) !important;
    letter-spacing: -.012em !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}

/* ── Hero scroll indicator "VER MÁS": más visible en mobile ── */
@media (max-width: 768px) {
  .hero-scroll-down {
    color: rgba(255,255,255,.7) !important;
    bottom: 16px !important;
  }
  .hero-scroll-down > span {
    opacity: 1 !important;
  }
}

/* ── Contacto CTA dark: aún más compacto, botones más chicos ── */
@media (max-width: 600px) {
  #contacto .cta {
    padding: 12px 0 14px !important;
    border-radius: 14px !important;
  }
  #contacto .cta :is(h1, h2, h3) {
    font-size: clamp(17px, 4.8vw, 21px) !important;
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
  }
  #contacto .cta p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }
  #contacto .cta .button-row .btn {
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  #contacto .cta .button-row .btn svg {
    width: 12px !important;
    height: 12px !important;
  }
}

/* ── Cards de contacto: visual más simple, menos capas
   Quitamos el accent bar lateral (era too much en mobile)
   y aplanamos la sombra. La acción queda más liviana. ── */
@media (max-width: 600px) {
  .contact-info-item {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  .contact-info-item::before { display: none !important; }
  .contact-info-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    border-width: 1px !important;
  }
  .contact-info-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  .contact-info-copy > strong {
    font-size: 9.5px !important;
    letter-spacing: .1em !important;
  }
  .contact-info-row > .contact-info-action {
    margin-top: 12px !important;
  }
  /* Phase 2 a11y: 44px tactil mínimo. Antes era 34px que en mobile
     hacía muy difícil tappear el "Ver en Google Maps" — el usuario
     reportaba que "el botón no anda" porque el touch caía fuera o en
     el iframe del mapa abajo. */
  .contact-info-action .btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  .contact-info-action .btn.btn-primary {
    box-shadow: none !important;
  }
}

/* ── FAQ: ocultar FAB en faq.html (igual que contacto:
   la página tiene el botón "Hacer una consulta…" + footer link). ── */
body.page-faq .whatsapp-float { display: none; }

/* ── Catálogo: UNIFICAR ancho de cards en mobile.
   Tanto la fila "regular" (.category-cards-row) como la
   "horizontal" (≤2 productos) compartían el mismo problema:
   las cards tenían min-width: 240px y max-width: 1/3 del row,
   lo que dejaba 20-30px de margen lateral cuando la row se
   centraba (justify-content: center). En Consumibles se veía
   especialmente mal porque siempre cae en la fila regular.

   En mobile usamos full-width (flex: 1 1 100%) para todas las
   variantes y eliminamos el centrado para que las cards empiecen
   en el left edge del container. ── */
@media (max-width: 768px) {
  .category-cards-row {
    justify-content: stretch !important;
    gap: 14px !important;
  }
  .category-cards-row > .product-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .category-cards-row--horizontal {
    gap: 16px !important;
  }
  .category-cards-row--horizontal > .product-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .category-cards-row--horizontal .product-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  .category-cards-row--horizontal .product-card > .catalog-card-photo {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: 160px !important;
    width: 100%;
    padding: 16px !important;
  }
  .category-cards-row--horizontal .product-card > .product-head {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .category-cards-row--horizontal .product-card > .product-body {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* ── Catálogo: refinamiento del vertical card en mobile.
   El default funciona pero el padding y la jerarquía se pueden
   ajustar para que la card no se sienta inflada arriba. ── */
@media (max-width: 768px) {
  .product-card:not(.is-expanded) > .catalog-card-photo {
    max-height: 150px;
    padding: 14px 18px;
  }
  .product-head {
    padding: 12px 16px 4px !important;
  }
  .product-head h3 {
    font-size: 15.5px !important;
    padding-bottom: 8px !important;
  }
  .product-head h3 small {
    font-size: 0.7em !important;
  }
  .product-body {
    padding: 8px 16px 14px !important;
  }
  .product-body > p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }
  /* "Ver productos →" — más jerárquico, mejor legible */
  .product-card:not(.featured-card):not(.is-expanded) .product-body::after {
    font-size: 12.5px !important;
    padding: 6px 0 0 !important;
  }
}

/* ── Assistant FAB: en mobile el pill con label "¿No sabés cuál
   elegir?" ocupa 150px+ y se superpone con la lectura de cards.
   Lo convertimos en icon-only redondo y compacto, mucho menos
   invasivo. El usuario sigue accediendo al wizard tocando el
   icono. Coordinado con WhatsApp FAB: pegados al borde inferior
   derecho, ambos ~44px de diámetro. ── */
@media (max-width: 768px) {
  .assistant-fab {
    padding: 5px !important;
    border-radius: 50% !important;
    gap: 0 !important;
    max-width: none !important;
    bottom: 72px !important;
    right: 12px !important;
  }
  .assistant-fab-label {
    display: none !important;
  }
  .assistant-fab-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .assistant-fab-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* WhatsApp FAB: un toque más chico en mobile para aparejar con
     el assistant y bajar visual weight general. */
  .whatsapp-float {
    width: 44px !important;
    height: 44px !important;
    bottom: 14px !important;
    right: 12px !important;
  }
  .whatsapp-float svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ── FAQ mobile: padding y +/- icon que respiren ── */
@media (max-width: 768px) {
  .faq details summary {
    padding: 14px 16px !important;
    font-size: 14px !important;
    gap: 12px !important;
    line-height: 1.35 !important;
  }
  .faq details summary::after {
    font-size: 22px !important;
    line-height: 1 !important;
    width: 22px !important;
    text-align: center !important;
  }
  .faq details p {
    padding: 0 16px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  .faq-side {
    padding: 18px 18px 20px !important;
    border-radius: 14px !important;
  }
  .faq-side h3 {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
  .faq-side ul {
    margin-bottom: 14px !important;
  }
  .faq-side li {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  .faq-side .btn {
    min-height: 40px !important;
    font-size: 13px !important;
  }
  .faq-grid {
    gap: 14px !important;
  }
}

/* =========================================================
   RESIDUAL MOBILE FIXES #3 — wizard + modal de resultados
   ========================================================= */

/* ── WIZARD inline (página categoría, sin assistant-open) ── */
@media (max-width: 600px) {
  /* Stepper más compacto y agrupado: la línea inferior queda
     contenida y los items se ven como un trío, no esparcidos. */
  .rec-progress {
    padding-bottom: 10px !important;
    margin: 0 auto 22px !important;
    max-width: 320px !important;
  }
  .rec-progress-item {
    font-size: 9.5px !important;
    letter-spacing: .08em !important;
  }
  .rec-progress-num {
    margin-right: 3px !important;
  }

  /* Resumen del paso completado ("✓ Identificación / despacho"):
     ya no overflow-cut. El texto descriptivo se ellipsiza en lugar
     de extenderse fuera del card. */
  .rec-step.is-completed {
    gap: 6px !important;
    margin-bottom: 18px !important;
  }
  .rec-step.is-completed .rec-options {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
  .rec-step.is-completed .rec-option.is-selected {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }
  .rec-step.is-completed .rec-option.is-selected .rec-option-title {
    font-size: 12.5px !important;
    flex: 0 0 auto !important;
  }
  .rec-step.is-completed .rec-option.is-selected .rec-option-desc {
    font-size: 11px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Pregunta del paso */
  .rec-step-question {
    font-size: 17px !important;
    margin: 0 0 14px !important;
  }

  /* Opciones: padding y min-height reducidos, jerarquía interna
     más tight, badges levemente más chicos. */
  .rec-options {
    gap: 8px !important;
  }
  .rec-option {
    padding: 12px 14px 12px 50px !important;
    min-height: 56px !important;
    border-width: 1px !important;
    gap: 2px !important;
  }
  .rec-option::before {
    left: 12px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
  }
  .rec-option-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .rec-option-desc {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  /* Selected state: borde sólido limpio, SIN el ring doble que
     genera la sensación de "doble borde pesado". */
  .rec-option.is-selected {
    border-color: var(--accent) !important;
    border-width: 2px !important;
    background: rgba(20,86,138,.04) !important;
    box-shadow: none !important;
    padding: 11px 13px 11px 49px !important;
  }

  /* Resultado: pegado al flujo, sin huecos verticales grandes */
  .rec-result {
    margin-top: 16px !important;
    padding-top: 14px !important;
  }
  .rec-result::before {
    font-size: 10px !important;
    margin-bottom: 8px !important;
  }
  .rec-result-text {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin-bottom: 18px !important;
    padding: 0 4px;
  }
}

/* ── MODAL de resultados (body.assistant-open) en mobile ── */
@media (max-width: 768px) {
  /* Modal usa más ancho útil del viewport, padding interno
     reducido, esquinas un poco más chicas. */
  body.page-category.assistant-open #productSelector {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 18px 16px 20px !important;
    border-radius: 16px !important;
    max-height: 92dvh !important;
  }

  /* Header del modal: clearance del close button (44px) y
     tipografía menor. */
  body.page-category.assistant-open #productSelector .section-head {
    padding-right: 44px !important;
    margin: 0 0 14px !important;
  }
  body.page-category.assistant-open #productSelector .section-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  body.page-category.assistant-open #productSelector .section-sub {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  /* Stepper dentro del modal */
  body.page-category.assistant-open #productSelector .rec-progress {
    margin: 0 auto 14px !important;
    padding-bottom: 8px !important;
    max-width: 100% !important;
  }
  body.page-category.assistant-open #productSelector .rec-progress-item {
    font-size: 9.5px !important;
    letter-spacing: .07em !important;
  }

  /* Pregunta */
  body.page-category.assistant-open #productSelector .rec-step-question {
    font-size: 16px !important;
    margin: 0 0 12px !important;
  }

  /* Options en modal */
  body.page-category.assistant-open #productSelector .rec-options {
    gap: 8px !important;
  }
  body.page-category.assistant-open #productSelector .rec-option {
    padding: 11px 14px 11px 48px !important;
    min-height: 54px !important;
  }
  body.page-category.assistant-open #productSelector .rec-option::before {
    width: 26px !important;
    height: 26px !important;
    left: 11px !important;
    font-size: 11px !important;
  }
  body.page-category.assistant-open #productSelector .rec-option.is-selected {
    border-width: 2px !important;
    box-shadow: none !important;
    padding: 10px 13px 10px 47px !important;
  }

  /* Close button: más chico, anclado top-right limpio */
  body.page-category.assistant-open .assistant-close {
    width: 32px !important;
    height: 32px !important;
    top: 12px !important;
    right: 12px !important;
  }
  body.page-category.assistant-open .assistant-close svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Resultado dentro del modal: el padding-top: 36 da clearance
     vertical del close button para que el eyebrow y el heading
     no queden tapados. */
  body.page-category.assistant-open #productSelector:has(.rec-result:not([hidden])) .rec-result {
    margin-top: 0 !important;
    padding-top: 36px !important;
  }
  body.page-category.assistant-open #productSelector .rec-result::before {
    font-size: 10px !important;
    letter-spacing: .18em !important;
    margin-bottom: 10px !important;
    padding: 0 8px;
  }
  body.page-category.assistant-open #productSelector .rec-result-text {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 auto 14px !important;
    max-width: 100% !important;
    padding: 0 4px;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* Grid de resultados: 1 SOLA COLUMNA en mobile. Mata el peek
     lateral y el overflow horizontal de raíz. */
  body.page-category.assistant-open #productSelector .rec-result-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 14px !important;
    margin-bottom: 4px !important;
    justify-content: stretch !important;
  }

  /* Model-tile dentro del modal: full-width útil, compacto.
     Cards realmente diseñadas para el viewport, no desktop achicado. */
  body.page-category.assistant-open #productSelector .rec-result-grid .model-tile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.page-category.assistant-open #productSelector .rec-result-grid .model-tile img {
    aspect-ratio: 4 / 3 !important;
    max-height: 140px !important;
  }
  body.page-category.assistant-open #productSelector .rec-result-grid .model-tile-name {
    font-size: 13px !important;
    padding: 10px 12px 8px !important;
    min-height: 0 !important;
  }
  body.page-category.assistant-open #productSelector .rec-result-grid .tile-oneliner {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    padding: 8px 12px 0 !important;
  }
  body.page-category.assistant-open #productSelector .rec-result-grid .tile-more-btn {
    margin: 8px 12px 12px !important;
    font-size: 11.5px !important;
    width: calc(100% - 24px) !important;
  }
  /* Tile-badges (Comparar etc): un toque más chicos */
  body.page-category.assistant-open #productSelector .rec-result-grid .tile-badge {
    width: 24px !important;
    height: 24px !important;
  }

  /* Reset button en modal */
  body.page-category.assistant-open #productSelector .rec-reset {
    margin: 12px auto 0 !important;
    font-size: 12px !important;
    padding: 7px 14px !important;
  }

  /* CTA primary "Ver en el catálogo" del result */
  body.page-category.assistant-open #productSelector .rec-result-cta-primary {
    padding: 9px 18px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   MOBILE: model-tile horizontal/compact en subfamilias
   ─────────────────────────────────────────────────────────
   Cuando una subfamilia está expandida en mobile, los tiles
   se renderizan como filas compactas horizontales (foto a la
   izquierda, nombre + oneliner + acción a la derecha) en vez
   de cards verticales altas. Permite ver más productos por
   scroll y baja la fricción de exploración en pantallas chicas.
   Solo aplica al catálogo expandido — no toca búsqueda flat
   ni resultados del wizard, que tienen su propio layout.
   ========================================================= */
@media (max-width: 600px) {
  .product-card.is-expanded .models-grid {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 14px 16px 20px;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* Material-group subheaders: en column-flex, flex-basis: 100% toma
     el 100% del alto y rompe el layout. Reseteamos a auto para que
     cada subheader ocupe sólo su altura intrínseca. */
  .product-card.is-expanded .models-grid .material-group {
    flex-basis: auto;
    flex-shrink: 0;
    width: 100%;
    padding: 6px 2px 8px;
    margin-top: 4px;
    border-bottom: 1px solid var(--primary-08);
  }
  .product-card.is-expanded .models-grid .material-group:first-child {
    margin-top: 0;
  }

  .product-card.is-expanded .models-grid .model-tile {
    display: grid;
    grid-template-columns: 108px 1fr;
    grid-template-rows: auto auto auto;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
  }
  .product-card.is-expanded .models-grid .model-tile:hover {
    transform: none;
  }

  .product-card.is-expanded .models-grid .model-tile .model-tile-photo-wrap {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: var(--white);
    border-right: 1px solid var(--primary-06);
  }
  .product-card.is-expanded .models-grid .model-tile .model-tile-photo-wrap img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 78px;
    aspect-ratio: 1;
    object-fit: contain;
  }

  /* Compare button: solo ícono, esquina superior izquierda */
  .product-card.is-expanded .models-grid .model-tile .tile-compare-btn {
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    gap: 0;
  }
  .product-card.is-expanded .models-grid .model-tile .tile-compare-btn span {
    display: none;
  }
  .product-card.is-expanded .models-grid .model-tile .tile-compare-btn svg {
    width: 11px;
    height: 11px;
  }

  /* Badges: side-by-side en horizontal */
  .product-card.is-expanded .models-grid .model-tile .tile-badges {
    top: 6px;
    right: 6px;
    flex-direction: row;
    gap: 3px;
  }
  .product-card.is-expanded .models-grid .model-tile .tile-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }
  .product-card.is-expanded .models-grid .model-tile .tile-badge svg {
    width: 12px;
    height: 12px;
  }

  /* Nombre: top-left, jerarquía clara, fondo plano */
  .product-card.is-expanded .models-grid .model-tile .model-tile-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    padding: 11px 14px 2px;
    min-height: 0;
    background: transparent;
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 1.22;
  }

  /* Separator no aplica en horizontal */
  .product-card.is-expanded .models-grid .model-tile .tile-separator {
    display: none;
  }

  /* Oneliner: 2 líneas máximo, debajo del título */
  .product-card.is-expanded .models-grid .model-tile .tile-oneliner {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
    line-height: 1.4;
    padding: 0 14px 4px;
    text-align: left;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Ver ficha: link compacto al final del bloque derecho */
  .product-card.is-expanded .models-grid .model-tile .tile-more-btn {
    grid-column: 2;
    grid-row: 3;
    margin: 4px 14px 10px;
    padding: 0;
    width: auto;
    justify-content: flex-start;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
  }
  .product-card.is-expanded .models-grid .model-tile .tile-more-btn svg {
    width: 12px;
    height: 12px;
  }
}

/* =========================================================
   RESIDUAL MOBILE FIXES #4 — services + CTA categoría
   ========================================================= */

/* ── Services panel en página de categoría (≤ 768px) ──
   Pasada agresiva: el bloque base pesaba mucho con padding 22/18,
   margen 20, gap 12 entre items, items 14/16, btn 40px alto.
   Bajamos jerarquía vertical sin perder claridad. ── */
@media (max-width: 768px) {
  .page-category .services-panel,
  .services-panel {
    padding: 22px 18px !important;
    margin-top: 14px !important;
    border-radius: 14px !important;
  }
  .services-panel-head {
    margin-bottom: 16px !important;
  }
  .services-panel-head span {
    font-size: 9.5px !important;
    padding: 2px 8px !important;
    margin-bottom: 10px !important;
    letter-spacing: .1em !important;
  }
  .services-panel h3 {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
  }
  .services-panel-head > p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  /* Lista con aire entre items */
  .services-list {
    gap: 14px !important;
    margin-top: 14px !important;
    grid-template-columns: 1fr !important;
  }
  /* Cards con respiración interna */
  .services-item {
    padding: 16px 16px 14px !important;
    border-radius: 12px !important;
    gap: 10px !important;
    box-shadow: none !important;
  }
  .services-item::before {
    height: 2px !important;
  }
  .services-item strong {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  .services-item p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  /* Botón "Consultar servicio": presente pero contenido */
  .services-item .btn.btn-with-icon,
  .services-item .consultar-servicio,
  .services-item .btn.btn-primary {
    align-self: stretch !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    margin-top: 4px !important;
  }
  .services-item .btn svg {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
  }
}

/* ── Pantallas chicas (≤ 480px) ── */
@media (max-width: 480px) {
  .page-category .services-panel,
  .services-panel {
    padding: 20px 16px !important;
    margin-top: 12px !important;
  }
  .services-item {
    padding: 14px 14px 12px !important;
  }
  .services-item .btn.btn-with-icon,
  .services-item .consultar-servicio,
  .services-item .btn.btn-primary {
    min-height: 36px !important;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
  }
}

/* ── CTA dark "¿Necesitás ayuda para elegir...?" en categorías
   (≤ 600px). Es el .cta dentro de section[aria-label*="cotización"],
   NO el #contacto. Lo compactamos al criterio del CTA de contacto:
   bloque bajo, tipografía contenida, botones livianos pill.
   ── */
@media (max-width: 600px) {
  .page-category .cta {
    padding: 14px 0 16px !important;
    border-radius: 14px !important;
  }
  .page-category .cta :is(h2, h3) {
    font-size: clamp(17px, 4.8vw, 21px) !important;
    line-height: 1.18 !important;
    margin: 0 0 6px !important;
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
  }
  .page-category .cta p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 0 12px !important;
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
  }
  /* Botones lado a lado, livianos */
  .page-category .cta .button-row {
    flex-direction: row !important;
    gap: 8px !important;
  }
  .page-category .cta .button-row .btn {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }
  .page-category .cta .button-row .btn svg {
    width: 12px !important;
    height: 12px !important;
  }
}

/* ── Convivencia con FABs en la zona services + CTA.
   Antes el services-panel y el .cta cerraban "pegados" al
   borde inferior y los FABs (assistant + WhatsApp) se sentaban
   sobre la última card o sobre los botones del CTA. Agregamos
   un margin-bottom de safe area en estos bloques para que el
   stack de FABs (~110px alto desde el borde) caiga sobre el
   gap entre secciones, no sobre contenido útil. ── */
@media (max-width: 768px) {
  .page-category section:has(> .container > .services-panel),
  .page-category section:has(> .container > .cta) {
    /* No tocamos el padding-top — sólo aseguramos respiro abajo.
       Combina con el padding-bottom: 80px global de <main>. */
    margin-bottom: 8px;
  }
}

/* =========================================================
   RESIDUAL MOBILE FIXES #5 — Mobile nav drawer
   Drawer base era padding 80/0/40, gap 4 entre items, items con
   padding 16/18 y font 17. En 320px viewport eso dejaba 5 items
   ocupando 400px y espacios enormes entre cada uno. Le damos
   estructura, jerarquía y la WhatsApp como acción real, no link.
   ========================================================= */
@media (max-width: 768px) {
  /* Drawer container: menos padding-top, deja respirar arriba sin
     vacío. El header sticky ya se ve detrás del backdrop. */
  .mobile-menu {
    padding: 24px 0 32px !important;
  }
  /* Nav: items pegados, sin gap entre ellos. Vamos a usar padding
     interno para definir el ritmo vertical (más controlable). */
  .mobile-menu nav {
    gap: 0 !important;
  }

  /* Items principales: compactos (44px alto touch-friendly), font
     15, peso 600, color primary. Subtle hover. */
  .mobile-menu nav > a {
    padding: 11px 14px !important;
    min-height: 44px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    border-radius: 10px !important;
    letter-spacing: -.005em !important;
  }
  .mobile-menu nav > a:hover {
    background: rgba(20,86,138,.06) !important;
    color: var(--primary) !important;
  }

  /* Estado focus: en vez de outline-button rectangular (que se ve
     como botón "Empresa" mal puesto), usamos accent bar izquierdo
     + tint de background. Sigue siendo claro para a11y. */
  .mobile-menu nav > a:focus-visible {
    outline: none !important;
    background: rgba(20,86,138,.06) !important;
    box-shadow: inset 3px 0 0 var(--accent) !important;
  }

  /* "Catálogo" → eyebrow / section header. No es un link
     navegable independiente en este drawer (el catálogo completo
     se accede tocando una categoría). Tratamiento de label de
     sección, no de link. */
  .mobile-menu nav > a[href="/catalogo"] {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
    color: var(--muted-light) !important;
    padding: 18px 14px 6px !important;
    min-height: 0 !important;
    background: transparent !important;
  }
  .mobile-menu nav > a[href="/catalogo"]:hover {
    background: transparent !important;
    color: var(--accent) !important;
  }
  /* En contexto de eyebrow no queremos el accent bar focus, sólo
     una indicación más sutil por color. */
  .mobile-menu nav > a[href="/catalogo"]:focus-visible {
    box-shadow: none !important;
    background: transparent !important;
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
  }

  /* Sub-menu: agrupado visualmente con un border-left accent.
     Items levemente menores que los principales, mismo color
     primary, indentación clara. */
  .mobile-menu-sub {
    padding: 2px 0 6px 12px !important;
    margin: 0 4px 12px !important;
    border-left: 2px solid var(--accent-22) !important;
    gap: 0 !important;
  }
  .mobile-menu-sub a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    padding: 9px 12px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
  }
  .mobile-menu-sub a:hover {
    background: rgba(20,86,138,.05) !important;
    color: var(--accent) !important;
  }
  .mobile-menu-sub a:focus-visible {
    outline: none !important;
    background: rgba(20,86,138,.06) !important;
    box-shadow: inset 2px 0 0 var(--accent) !important;
  }

  /* Estado activo (página actual) — sutil pero presente */
  .mobile-menu nav > a[aria-current="page"] {
    background: rgba(20,86,138,.06) !important;
    color: var(--accent) !important;
  }

  /* WhatsApp = ACCIÓN, no link. Filled verde, separado del resto
     con margin-top, centrado, con el icono visible (lo agregamos
     vía ::before si no existe). Distinción clara de jerarquía. */
  .mobile-menu nav > a[href*="wa.me"] {
    margin: 18px 4px 0 !important;
    background: linear-gradient(135deg, #25d366 0%, #1dad55 100%) !important;
    color: #fff !important;
    text-align: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    min-height: 46px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(37,211,102,.28) !important;
    letter-spacing: .005em !important;
  }
  .mobile-menu nav > a[href*="wa.me"]:hover {
    filter: brightness(1.05) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #25d366 0%, #1dad55 100%) !important;
  }
  .mobile-menu nav > a[href*="wa.me"]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    background: linear-gradient(135deg, #25d366 0%, #1dad55 100%) !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   POLISH MOBILE NAV DRAWER — alineado con la estética del sitio
   - Hairline gradient accent superior (firma usada en .contact-box,
     .wizard-suggestions, .hero-full).
   - Backdrop con keylight sutil para dar profundidad al panel.
   - Divider hairline para separar bloque de navegación del CTA.
   - Hover con micro-translateX que da sensación de tactil refinado.
   - WhatsApp CTA con cinematic shadow estilo .btn-primary
     (inset highlight + sombra duplicada) en su variante verde.
   - Animación de entrada suave alineada con el resto del sitio.
   ========================================================= */
@media (max-width: 768px) {
  /* Posicionar para los pseudo-elements */
  .mobile-menu {
    position: fixed !important;
    background:
      radial-gradient(ellipse 70% 35% at 50% 0%, rgba(20,86,138,.05) 0%, transparent 65%),
      radial-gradient(ellipse 50% 30% at 50% 100%, rgba(20,86,138,.04) 0%, transparent 70%),
      rgba(255,255,255,.97) !important;
    background: color-mix(in srgb, var(--white) 97%, transparent) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
    backdrop-filter: blur(20px) saturate(1.5) !important;
  }
  .mobile-menu.open {
    animation: drawerIn .35s var(--ease-out-expo) both;
  }

  /* Hairline gradient en el top — firma corporativa del sitio */
  .mobile-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--primary) 22%,
      var(--accent) 50%,
      var(--primary) 78%,
      transparent 100%);
    opacity: .85;
    z-index: 1;
  }

  /* Container con un poco más de aire horizontal */
  .mobile-menu .container {
    padding-inline: 18px !important;
  }

  /* Items principales: micro-translateX en hover, transición suave */
  .mobile-menu nav > a {
    transition:
      background var(--duration-normal) var(--ease-out-expo),
      color var(--duration-normal) ease,
      transform var(--duration-normal) var(--ease-out-expo) !important;
  }
  .mobile-menu nav > a:hover {
    transform: translateX(2px) !important;
  }
  .mobile-menu-sub a {
    transition:
      background var(--duration-normal) var(--ease-out-expo),
      color var(--duration-normal) ease,
      transform var(--duration-normal) var(--ease-out-expo) !important;
  }
  .mobile-menu-sub a:hover {
    transform: translateX(2px) !important;
  }

  /* Divider sutil entre el bloque de navegación y la acción WhatsApp.
     Un hairline gradiente, no una línea sólida — más elegante. */
  .mobile-menu nav > a[href*="wa.me"] {
    position: relative !important;
  }
  .mobile-menu nav > a[href*="wa.me"]::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: -10px;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--primary-12) 30%,
      var(--primary-12) 70%,
      transparent 100%);
  }

  /* WhatsApp CTA: cinematic shadow estilo .btn-primary pero verde.
     Inset highlight + sombra duplicada (corta + larga). */
  .mobile-menu nav > a[href*="wa.me"] {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(0,0,0,.12),
      0 2px 6px rgba(37,211,102,.20),
      0 10px 24px rgba(37,211,102,.30) !important;
  }
  .mobile-menu nav > a[href*="wa.me"]:hover {
    transform: translateY(-1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 -1px 0 rgba(0,0,0,.12),
      0 4px 10px rgba(37,211,102,.26),
      0 16px 32px rgba(37,211,102,.36) !important;
  }
  .mobile-menu nav > a[href*="wa.me"]:active {
    transform: translateY(0) scale(.99) !important;
  }
}

@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   PREMIUM PASS — Mobile nav drawer
   - Backdrop multi-radial con keylight cinematográfico.
   - Staggered fade-in de items para sensación de "panel armado".
   - Sub-menu como bloque de "card sutil": background gradiente +
     border-left con gradient stop (no border sólido plano).
   - Bullet animado (●) en items del sub-menu — micro-detalle
     que reemplaza el "vacío" antes del texto.
   - WhatsApp con SVG de marca a la izquierda (data URI), sin
     necesidad de tocar HTML.
   - Empresa / item activo con gradiente lateral elegante.
   - Catálogo eyebrow con hairline accent debajo.
   ========================================================= */
@media (max-width: 768px) {
  /* Backdrop multi-radial — cinematográfico pero contenido */
  .mobile-menu {
    background:
      radial-gradient(ellipse 90% 38% at 50% 0%, rgba(20,86,138,.06) 0%, transparent 70%),
      radial-gradient(ellipse 70% 25% at 0% 35%, rgba(31,111,178,.025) 0%, transparent 60%),
      radial-gradient(ellipse 65% 35% at 100% 90%, rgba(15,59,99,.035) 0%, transparent 65%),
      rgba(255,255,255,.97) !important;
    background: color-mix(in srgb, var(--white) 97%, transparent),
      radial-gradient(ellipse 90% 38% at 50% 0%, rgba(20,86,138,.06) 0%, transparent 70%),
      radial-gradient(ellipse 70% 25% at 0% 35%, rgba(31,111,178,.025) 0%, transparent 60%),
      radial-gradient(ellipse 65% 35% at 100% 90%, rgba(15,59,99,.035) 0%, transparent 65%) !important;
  }

  /* Staggered fade-in: cada item entra con un microdelay */
  .mobile-menu.open nav > a,
  .mobile-menu.open .mobile-menu-sub a {
    opacity: 0;
    transform: translateY(8px);
    animation: navItemReveal .42s var(--ease-out-expo) forwards;
  }
  .mobile-menu.open nav > a:nth-child(1) { animation-delay: .06s; }
  .mobile-menu.open nav > a:nth-child(2) { animation-delay: .09s; }
  .mobile-menu.open .mobile-menu-sub a:nth-child(1) { animation-delay: .12s; }
  .mobile-menu.open .mobile-menu-sub a:nth-child(2) { animation-delay: .14s; }
  .mobile-menu.open .mobile-menu-sub a:nth-child(3) { animation-delay: .16s; }
  .mobile-menu.open .mobile-menu-sub a:nth-child(4) { animation-delay: .18s; }
  .mobile-menu.open .mobile-menu-sub a:nth-child(5) { animation-delay: .20s; }
  .mobile-menu.open nav > a:nth-child(4) { animation-delay: .24s; }
  .mobile-menu.open nav > a:nth-child(5) { animation-delay: .27s; }
  .mobile-menu.open nav > a:nth-child(6) { animation-delay: .30s; }
  .mobile-menu.open nav > a:nth-child(7) { animation-delay: .34s; }

  /* Catálogo eyebrow: hairline accent debajo, micro-detalle */
  .mobile-menu nav > a[href="/catalogo"] {
    position: relative;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
  .mobile-menu nav > a[href="/catalogo"]::after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 2px;
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity: .6;
  }

  /* Sub-menu como bloque "card sutil" — gradient bg + border accent
     animado en gradient (no plano), border-radius derecho. */
  .mobile-menu-sub {
    background: linear-gradient(135deg, rgba(20,86,138,.028) 0%, rgba(20,86,138,.008) 100%) !important;
    border-left: 0 !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 6px 0 8px 16px !important;
    margin: 4px 8px 14px 4px !important;
    position: relative !important;
  }
  .mobile-menu-sub::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg,
      var(--accent) 0%,
      var(--primary) 50%,
      var(--primary-22) 100%);
    border-radius: 0 2px 2px 0;
  }

  /* Sub-menu items con micro-bullet (●) — reemplaza el vacío
     a la izquierda del texto con un detalle intencional. */
  .mobile-menu-sub a {
    position: relative !important;
    padding-left: 18px !important;
  }
  .mobile-menu-sub a::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-22);
    transition: background var(--duration-normal) ease,
                transform var(--duration-normal) var(--ease-out-expo);
  }
  .mobile-menu-sub a:hover::before {
    background: var(--accent);
    transform: translateY(-50%) scale(1.5);
  }

  /* Empresa / item activo / focus: gradient lateral más elegante.
     Reemplaza el "outline rectangular" feo con un acento que se
     siente diseñado. */
  .mobile-menu nav > a:focus-visible,
  .mobile-menu nav > a[aria-current="page"] {
    outline: none !important;
    background: linear-gradient(90deg,
      rgba(20,86,138,.08) 0%,
      rgba(20,86,138,.025) 60%,
      transparent 100%) !important;
    box-shadow: inset 3px 0 0 var(--accent) !important;
    color: var(--primary) !important;
  }

  /* WhatsApp con icono SVG de marca a la izquierda (data URI),
     sin tocar HTML. Espacio del icon centrado verticalmente. */
  .mobile-menu nav > a[href*="wa.me"] {
    padding-left: 46px !important;
    padding-right: 20px !important;
  }
  .mobile-menu nav > a[href*="wa.me"]::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982 1-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/></svg>")
      no-repeat center / contain;
    opacity: .96;
  }
}

@keyframes navItemReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   MOBILE NAV DRAWER — REDISEÑO ESTÉTICO v2 (override final)
   ─────────────────────────────────────────────────────────
   Drawer con header (eyebrow + botón ✕), ítems como tarjetas
   tappables (bg sutil + borde hairline + chevron), sub-menú
   indentado con árbol visual, WhatsApp como btn-primary navy
   con icono. Cada elemento tiene affordance clara de "tap".
   ========================================================= */
@media (max-width: 768px) {
  /* Drawer base */
  .mobile-menu {
    background: var(--white) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 0 !important;
    box-shadow: inset 4px 0 16px -8px rgba(15,59,99,.04) !important;
  }
  .mobile-menu::before { display: none !important; }
  .mobile-menu .container {
    padding: 18px 18px 28px !important;
  }
  .mobile-menu.open {
    animation: drawerIn .28s var(--ease-out-expo) both !important;
  }

  /* ── Header del drawer: brand (logo + nombre + tagline) + ✕ ── */
  .mobile-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 18px 18px 16px !important;
    border-bottom: 1px solid rgba(15,59,99,.08) !important;
    background: linear-gradient(180deg, rgba(15,59,99,.03) 0%, transparent 100%) !important;
  }
  .mobile-menu-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: opacity .15s ease !important;
  }
  .mobile-menu-brand:hover,
  .mobile-menu-brand:focus-visible {
    opacity: .85 !important;
  }
  .mobile-menu-brand:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 4px !important;
    border-radius: 8px !important;
  }
  .mobile-menu-brand:active {
    opacity: .75 !important;
  }
  .mobile-menu-mark {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--white) !important;
    border: 1px solid rgba(15,59,99,.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(15,59,99,.06) !important;
    overflow: hidden !important;
  }
  .mobile-menu-mark img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    display: block !important;
  }
  .mobile-menu-brand-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .mobile-menu-brand-copy strong {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: -.015em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .mobile-menu-brand-copy > span {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Botón ✕ cerrar: grande en círculo, fácil de tocar */
  .mobile-menu-close {
    position: static !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15,59,99,.06) !important;
    border: 1px solid rgba(15,59,99,.12) !important;
    border-radius: 999px !important;
    color: var(--primary) !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
    padding: 0 !important;
    font-family: inherit !important;
  }
  .mobile-menu-close svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
  }
  .mobile-menu-close:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(15,59,99,.20) !important;
  }
  .mobile-menu-close:active {
    transform: scale(.94) !important;
  }
  .mobile-menu-close:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
  }

  /* Sin staggered fade */
  .mobile-menu.open nav > a,
  .mobile-menu.open .mobile-menu-sub a {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Lista nav (sin eyebrow — el header ya da el anclaje visual) */
  .mobile-menu nav {
    position: relative !important;
    gap: 8px !important;
    padding-top: 4px !important;
  }
  .mobile-menu nav::before {
    content: none !important;
    display: none !important;
  }

  /* Ítems principales como TARJETAS tappables — bg + borde + chevron */
  .mobile-menu nav > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 16px 44px 16px 18px !important;
    min-height: 56px !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    background: rgba(15,59,99,.025) !important;
    border: 1px solid rgba(15,59,99,.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 0 rgba(15,59,99,.02) !important;
    margin: 0 !important;
    letter-spacing: -.005em !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease !important;
  }
  /* Chevron right */
  .mobile-menu nav > a::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    width: 9px !important;
    height: 9px !important;
    transform: translateY(-50%) rotate(45deg) !important;
    border-top: 1.5px solid var(--primary) !important;
    border-right: 1.5px solid var(--primary) !important;
    opacity: .35 !important;
    transition: opacity .15s ease, right .15s ease, border-color .15s ease !important;
    background: transparent !important;
    display: block !important;
  }
  .mobile-menu nav > a:hover,
  .mobile-menu nav > a:focus-visible {
    background: rgba(20,86,138,.07) !important;
    border-color: rgba(20,86,138,.20) !important;
    color: var(--primary) !important;
    transform: none !important;
    box-shadow: 0 2px 6px rgba(15,59,99,.06) !important;
    outline: none !important;
  }
  .mobile-menu nav > a:active {
    transform: scale(.99) !important;
  }
  .mobile-menu nav > a:hover::after,
  .mobile-menu nav > a:focus-visible::after {
    opacity: 1 !important;
    right: 14px !important;
    border-color: var(--accent) !important;
  }
  .mobile-menu nav > a[aria-current="page"] {
    background: rgba(20,86,138,.08) !important;
    border-color: rgba(20,86,138,.24) !important;
    color: var(--accent) !important;
  }
  .mobile-menu nav > a[aria-current="page"]::after {
    border-color: var(--accent) !important;
    opacity: 1 !important;
  }

  /* Catálogo: misma tarjeta + chevron-down (expandido) */
  .mobile-menu nav > a[href="/catalogo"] {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -.005em !important;
    color: var(--primary) !important;
    padding: 16px 44px 16px 18px !important;
    min-height: 56px !important;
    margin: 0 !important;
    background: rgba(20,86,138,.05) !important;
    border: 1px solid rgba(20,86,138,.18) !important;
  }
  .mobile-menu nav > a[href="/catalogo"]::before {
    content: none !important;
    display: none !important;
  }
  .mobile-menu nav > a[href="/catalogo"]::after {
    transform: translateY(-65%) rotate(135deg) !important;
    border-color: var(--accent) !important;
    opacity: 1 !important;
    right: 20px !important;
  }
  .mobile-menu nav > a[href="/catalogo"]:hover {
    background: rgba(20,86,138,.10) !important;
    border-color: rgba(20,86,138,.30) !important;
    color: var(--primary) !important;
    text-decoration: none !important;
  }

  /* Sub-menu: card-group bajo Catálogo, indentado con árbol visual */
  .mobile-menu-sub {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    background: rgba(15,59,99,.018) !important;
    border: 1px solid rgba(15,59,99,.06) !important;
    border-radius: 12px !important;
    padding: 8px 8px 8px 22px !important;
    margin: -2px 0 0 16px !important;
    position: relative !important;
  }
  /* Línea vertical hairline que conecta los sub-ítems */
  .mobile-menu-sub::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 14px !important;
    bottom: 14px !important;
    width: 1.5px !important;
    background: var(--primary-12) !important;
    display: block !important;
    border-radius: 1px !important;
  }
  .mobile-menu-sub a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 36px 12px 14px !important;
    min-height: 46px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    background: var(--white) !important;
    border: 1px solid rgba(15,59,99,.06) !important;
    border-radius: 10px !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease !important;
    box-shadow: 0 1px 0 rgba(15,59,99,.02) !important;
  }
  /* Conector horizontal del árbol */
  .mobile-menu-sub a::before {
    content: "" !important;
    position: absolute !important;
    left: -10px !important;
    top: 50% !important;
    width: 10px !important;
    height: 1.5px !important;
    background: var(--primary-12) !important;
    display: block !important;
    transition: background .15s ease !important;
    border-radius: 1px !important;
  }
  /* Mini chevron right en sub-ítems */
  .mobile-menu-sub a::after {
    content: "" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    transform: translateY(-50%) rotate(45deg) !important;
    border-top: 1.5px solid var(--primary) !important;
    border-right: 1.5px solid var(--primary) !important;
    opacity: .3 !important;
    transition: opacity .15s ease, right .15s ease, border-color .15s ease !important;
    background: transparent !important;
    display: block !important;
  }
  .mobile-menu-sub a:hover,
  .mobile-menu-sub a:focus-visible {
    background: var(--white) !important;
    border-color: rgba(20,86,138,.22) !important;
    color: var(--primary) !important;
    transform: none !important;
    box-shadow: 0 2px 6px rgba(15,59,99,.06) !important;
    outline: none !important;
  }
  .mobile-menu-sub a:active {
    transform: scale(.99) !important;
  }
  .mobile-menu-sub a:hover::before,
  .mobile-menu-sub a:focus-visible::before {
    background: var(--accent) !important;
  }
  .mobile-menu-sub a:hover::after,
  .mobile-menu-sub a:focus-visible::after {
    opacity: 1 !important;
    right: 12px !important;
    border-color: var(--accent) !important;
  }

  /* WhatsApp = btn-primary navy con icono.
     flex-direction: row-reverse → el ::after (icono) aparece antes del
     texto del link sin tener que reordenar HTML. justify-content:center
     + gap centra el conjunto (icono + texto) como una unidad.
     El ::before (divider hairline) sigue absolute → fuera del flujo. */
  .mobile-menu nav > a[href*="wa.me"] {
    position: relative !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 20px 0 0 !important;
    padding: 16px 24px !important;
    min-height: 56px !important;
    background: linear-gradient(180deg, var(--primary) 0%, #0c2f50 100%) !important;
    border: 1px solid #0a253f !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 6px 16px rgba(15,59,99,.22) !important;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease !important;
  }
  /* Hairline divider arriba del WhatsApp */
  .mobile-menu nav > a[href*="wa.me"]::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -10px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, var(--primary-12) 30%, var(--primary-12) 70%, transparent 100%) !important;
    display: block !important;
  }
  /* Icono WhatsApp blanco — en el flujo flex (no absolute) → centrado
     junto al texto como conjunto. */
  .mobile-menu nav > a[href*="wa.me"]::after {
    content: "" !important;
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    transform: none !important;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982 1-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/></svg>")
      no-repeat center / contain !important;
    border: none !important;
    opacity: 1 !important;
  }
  .mobile-menu nav > a[href*="wa.me"]:hover {
    background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 8px 20px rgba(15,59,99,.28) !important;
  }
  .mobile-menu nav > a[href*="wa.me"]:active {
    transform: translateY(0) scale(.99) !important;
  }
  .mobile-menu nav > a[href*="wa.me"]:focus-visible {
    background: linear-gradient(180deg, var(--primary) 0%, #0c2f50 100%) !important;
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
  }
}

/* =========================================================
   MOBILE — "Catálogo por línea de producto" (.cat-bento).
   Impresoras (.cat-card--primary) ya iba en layout horizontal
   mobile (image-left + body-right) y quedó bien balanceada.
   Las demás (Lectores, Etiquetas, Consumibles, Soluciones)
   se renderizaban vertical y quedaban más altas/flojas.
   Unificamos: todas en horizontal con el mismo patrón.
   ========================================================= */
@media (max-width: 600px) {
  /* Base: todas las cards horizontales con imagen a la izquierda */
  .cat-bento .cat-card {
    flex-direction: row !important;
    min-height: 124px;
  }
  .cat-bento .cat-card > .cat-card-img {
    flex: 0 0 40% !important;
    min-height: auto !important;
    padding: 14px 12px !important;
    border-bottom: none !important;
    border-right: 1px solid var(--primary-06) !important;
    background: var(--white);
  }
  .cat-bento .cat-card > .cat-card-img img {
    height: 96px !important;
    max-height: 96px !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
  }
  .cat-bento .cat-card > .cat-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    min-width: 0;
  }
  .cat-bento .cat-card-body h3 {
    font-size: 15.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    letter-spacing: -.015em !important;
  }
  .cat-bento .cat-card-body p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin: 4px 0 0 !important;
    color: var(--muted) !important;
    /* Clamp a 2 líneas para que todas las cards midan ~igual de alto */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cat-bento .cat-card-body .cat-card-action {
    font-size: 11.5px !important;
    margin-top: 8px !important;
    gap: 4px !important;
  }
  .cat-bento .cat-card-body .cat-card-action svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Primary (Impresoras): mantiene un pelo más de presencia
     para respetar la jerarquía del hero, pero con el MISMO
     patrón de layout (no overrides distintos). */
  .cat-card--primary {
    min-height: 140px;
  }
  .cat-card--primary > .cat-card-img {
    flex: 0 0 44% !important;
  }
  .cat-card--primary > .cat-card-img img {
    height: 112px !important;
    max-height: 112px !important;
  }
  .cat-card--primary > .cat-card-body {
    padding: 14px 16px !important;
  }
  .cat-card--primary .cat-card-body h3 {
    font-size: 18px !important;
    letter-spacing: -.02em !important;
  }
  .cat-card--primary .cat-card-body p {
    font-size: 13px !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Secondary (Lectores): alineado al patrón default (sin
     overrides especiales) — queda idéntico a Etiquetas /
     Consumibles / Soluciones. */
  .cat-card--secondary {
    min-height: 124px;
  }
  .cat-card--secondary > .cat-card-img {
    padding: 14px 12px !important;
  }

  /* Gap del bento más tight para ritmo uniforme */
  .cat-bento {
    gap: 10px !important;
  }
}

/* =========================================================
   ETAPA 2 — Home hero + Empresa
   Hero base (.hero.hero-full) en home y empresa section-head
   reciben el mismo criterio de compactación que page-category.
   Consume los tokens introducidos en Etapa 1.
   ========================================================= */

/* ── Home hero (.hero.hero-full sin .page-category) ── */
@media (max-width: 600px) {
  /* h1 con clamp más restringido — antes 26px floor, ahora 22px */
  .hero.hero-full h1 {
    font-size: clamp(22px, 5.8vw, var(--text-4xl-m, 28px)) !important;
    line-height: 1.18 !important;
    margin-bottom: var(--space-sm, 12px) !important;
    word-break: break-word;
    letter-spacing: -.022em;
  }
  /* Eyebrow más sober, alineado con criterio del sitio */
  .hero.hero-full .eyebrow {
    font-size: var(--text-xs-m, 11px) !important;
    letter-spacing: .12em !important;
    margin-bottom: var(--space-xs, 8px) !important;
  }
  /* Párrafo del hero del home — antes era genérico .hero p,
     ahora compactado en su contexto hero-full */
  .hero.hero-full .hero-grid > div > p,
  .hero.hero-full > .container > div > p {
    font-size: var(--text-sm-m, 13.5px) !important;
    line-height: 1.5 !important;
    margin-bottom: var(--space-md, 14px) !important;
    max-width: 56ch;
  }
  /* CTAs del hero más livianos, side-by-side compactos */
  .hero.hero-full .button-row {
    gap: var(--space-xs, 8px) !important;
  }
  .hero.hero-full .button-row .btn {
    padding: 9px 16px !important;
    font-size: 13px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
  }
  .hero.hero-full .button-row .btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* Hero-card (Qué podés resolver) — alineado con criterio
     page-category .hero.hero-full .hero-card que ya teníamos */
  .hero.hero-full .hero-card {
    padding: 16px 18px !important;
    border-radius: 14px !important;
    margin-top: var(--space-sm, 12px) !important;
  }
  .hero.hero-full .hero-card h3 {
    font-size: var(--text-lg-m, 15px) !important;
    margin-bottom: 6px !important;
    line-height: 1.2;
  }
  .hero.hero-full .hero-card p {
    font-size: var(--text-sm-m, 12.5px) !important;
    line-height: 1.45 !important;
    margin-bottom: var(--space-sm, 10px) !important;
  }
  .hero.hero-full .hero-card ul {
    gap: var(--space-2xs, 6px) !important;
  }
  .hero.hero-full .hero-card li {
    font-size: var(--text-sm-m, 12.5px) !important;
    line-height: 1.4 !important;
  }
  /* Scroll-down indicator del home: más sutil, no compite */
  .hero.hero-full .hero-scroll-down {
    font-size: var(--text-xs-m, 10.5px) !important;
    bottom: 8px !important;
  }
  .hero.hero-full .hero-scroll-down svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ── Empresa: section-head + split + brands en mobile ── */
@media (max-width: 600px) {
  /* Section padding tokenizado */
  #empresa {
    padding-block: var(--section-py-m, 28px) !important;
  }
  /* Split 1-col con gap controlado */
  #empresa .split {
    gap: var(--space-lg, 20px) !important;
  }
  /* Section-head más bajo */
  #empresa .section-head {
    margin-bottom: var(--space-md, 14px) !important;
  }
  #empresa .section-title {
    font-size: clamp(22px, 5.8vw, var(--text-4xl-m, 28px)) !important;
    line-height: 1.18 !important;
    margin-bottom: var(--space-sm, 10px) !important;
    letter-spacing: -.022em;
  }
  /* Párrafos de empresa: tipografía contenida y line-height legible
     para texto largo. Margen inter-párrafo controlado. */
  #empresa .section-sub {
    font-size: var(--text-sm-m, 13.5px) !important;
    line-height: 1.55 !important;
    margin-bottom: var(--space-sm, 12px) !important;
  }
  #empresa .section-sub:last-of-type {
    margin-bottom: 0 !important;
  }
  /* Brands-inline: bloque compacto */
  #empresa .brands-inline {
    margin-top: var(--space-lg, 18px) !important;
  }
  #empresa .brands-inline-title {
    display: block !important;
    font-size: var(--text-xs-m, 11px) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    margin-bottom: var(--space-sm, 10px) !important;
    font-weight: 700 !important;
  }
  /* Imagen lateral del split: max-height contenido, border-radius
     consistente con el sistema de cards del sitio */
  #empresa .split > div > img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
  }
}

/* =========================================================
   ETAPA 3 — Cards no auditadas (mobile)
   .solution-card, .commercial-box, .trust-item, .reach-card.
   Antes seguían patrones desktop sin compactación específica
   en mobile. Ahora reciben el mismo lenguaje del sitio:
   bloques firmes, padding contenido, tipografía jerarquizada.
   ========================================================= */

/* ── Solutions (home) ── */
@media (max-width: 600px) {
  .solutions-grid,
  .solution-main {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm, 12px) !important;
  }
  .solutions .section-head {
    margin-bottom: var(--space-md, 16px) !important;
  }
  .solutions .section-title {
    font-size: clamp(22px, 5.8vw, var(--text-3xl-m, 24px)) !important;
  }
  .solution-card {
    padding: 16px 16px 16px 22px !important;
    border-radius: 14px !important;
    box-shadow:
      0 1px 2px rgba(15,59,99,.04),
      0 6px 18px rgba(15,59,99,.06) !important;
  }
  .solution-card-head {
    gap: 10px !important;
    margin-bottom: var(--space-xs, 8px) !important;
  }
  .solution-icon-box {
    width: 18px !important;
    height: 18px !important;
    padding: 7px !important;
    border-radius: 8px !important;
  }
  .solution-card h3 {
    font-size: var(--text-lg-m, 15.5px) !important;
    line-height: 1.2 !important;
  }
  .solution-card > p {
    font-size: var(--text-sm-m, 13px) !important;
    line-height: 1.5 !important;
    margin-bottom: var(--space-sm, 10px) !important;
  }
  .solution-card::before {
    top: 14% !important;
    bottom: 14% !important;
    opacity: .42 !important;
    width: 2px !important;
  }
}

/* ── Commercial-box (impresoras / lectores intro) ── */
@media (max-width: 600px) {
  .commercial-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm, 12px) !important;
  }
  .commercial-box {
    padding: 18px 18px 18px 22px !important;
    border-radius: 14px !important;
  }
  .commercial-box h3 {
    font-size: var(--text-xl-m, 16px) !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }
  .commercial-box .commercial-desc,
  .commercial-box > p {
    font-size: var(--text-sm-m, 13px) !important;
    line-height: 1.5 !important;
    margin-bottom: var(--space-sm, 12px) !important;
  }
  .commercial-list li {
    font-size: var(--text-sm-m, 12.5px) !important;
    padding: 4px 0 4px 24px !important;
    line-height: 1.45 !important;
  }
  .commercial-list li::before {
    top: 6px !important;
    width: 14px !important;
    height: 14px !important;
    background-size: 14px 14px !important;
  }
  .commercial-close {
    font-size: var(--text-xs-m, 11.5px) !important;
    margin-bottom: var(--space-sm, 12px) !important;
    padding-top: 10px !important;
    line-height: 1.5 !important;
  }
  .commercial-box .btn {
    font-size: 12.5px !important;
    padding: 9px 16px !important;
    box-shadow:
      0 1px 2px rgba(15,59,99,.06),
      0 4px 14px rgba(15,59,99,.18) !important;
  }
}

/* ── Trust strip (franja navy con métricas) ── */
@media (max-width: 600px) {
  .trust-strip {
    padding-block: var(--section-py-m, 28px) !important;
  }
  .trust-grid {
    gap: var(--space-md, 18px) !important;
  }
  .trust-item b {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    margin-bottom: 4px !important;
  }
  .trust-item strong {
    font-size: var(--text-md-m, 14px) !important;
    margin-bottom: 4px !important;
  }
  .trust-item span {
    font-size: var(--text-sm-m, 12.5px) !important;
    line-height: 1.45 !important;
  }
}

/* ── Reach strip + reach cards ── */
@media (max-width: 600px) {
  .reach-strip {
    padding-block: var(--section-py-m, 28px) !important;
  }
  .reach-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm, 12px) !important;
  }
  .reach-card {
    padding: 18px 16px !important;
    border-radius: 14px !important;
    gap: var(--space-sm, 10px) !important;
  }
  .reach-card::before {
    height: 3px !important;
  }
  .reach-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  .reach-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .reach-card h3 {
    font-size: var(--text-xl-m, 17px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.022em;
  }
  .reach-card p {
    font-size: var(--text-sm-m, 13px) !important;
    line-height: 1.55 !important;
  }
  .reach-card .btn,
  .reach-card .map-button {
    font-size: 12.5px !important;
    padding: 9px 16px !important;
    align-self: flex-start;
  }
}

/* =========================================================
   ETAPA 4 — Section padding system mobile
   Unifica el padding-block de TODAS las secciones bajo 3 valores:
   - var(--section-py-m, 28px): default
   - var(--section-py-m-loose, 36px): main content sections
   - var(--section-py-m-tight, 20px): tight blocks (hero, CTA dark)
   Ritmo vertical uniforme entre secciones cuando se scrollea.

   Sin !important: la regla genérica `section` deja ganar a los
   overrides específicos existentes (.hero.hero-full padding propio,
   .cta padding propio, .page-category #catalogo padding propio).
   Solo elimina la inconsistencia entre las secciones "neutras"
   que hoy varían de 32 a 48px sin criterio.
   ========================================================= */
@media (max-width: 600px) {
  /* Default mobile para todas las <section> */
  section {
    padding-block: var(--section-py-m, 28px);
  }
  /* Main content sections — respiran un poco más */
  #categorias,
  #destacados,
  #soluciones,
  #faq-page {
    padding-block: var(--section-py-m-loose, 36px);
  }
  /* Section heads compactados al criterio token */
  .section-head {
    margin-bottom: var(--space-lg, 18px) !important;
  }
}

/* =========================================================
   ETAPA — Modales mobile + floating stack consolidation
   - .tile-modal: align al lenguaje del sitio (background, borde,
     proporciones internas), close button y header con clearance
     correcto, CTAs internas compactas.
   - Wizard result modal: refinamientos finos sobre el polish previo.
   - Floating: contract de --fab-stack-bottom + reposicionado de
     wizard-suggestions ya hecho arriba.
   ========================================================= */

/* ── Tile modal (detalle de producto) en mobile ── */
@media (max-width: 768px) {
  /* Overlay con menos padding lateral para que el modal use casi
     todo el viewport (consistente con wizard modal). */
  .tile-modal-overlay {
    padding: 12px !important;
  }
  /* Modal: ALTURA DEFINIDA explícita con dvh (dynamic viewport).
     Solo así el flex child de adentro tiene un track de tamaño
     real y overflow-y:auto activa scroll. Con height:auto +
     max-height el navegador no constriñe correctamente al
     flex child y el scroll no funciona en touch. */
  .tile-modal {
    max-width: 100% !important;
    width: 100% !important;
    height: 92dvh !important;
    max-height: 92dvh !important;
    background: #fbfcfd !important;
    border-radius: 14px !important;
    box-shadow:
      0 20px 60px rgba(7,17,29,.32),
      0 0 0 1px var(--primary-08) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Content: flex:1 con min-height:0 — el flex child ahora SÍ
     tiene track definido (= alto del modal) y puede scrollear. */
  .tile-modal-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
  /* Asegurar que los flex children del content no bloqueen el scroll */
  .tile-modal-content > .tile-modal-left,
  .tile-modal-content > .tile-modal-right {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Scroll indicator del modal ("VER MÁS ↓"): ANCLADO al modal
     frame, no al scroll content. Antes vivía en .tile-modal-right
     (position:relative) y aparecía solo al final del contenido.
     Ahora lo movemos al contexto de .tile-modal (el padre frame
     del modal) y queda visible desde el top del scroll, fade
     cuando el usuario scrollea (vía .hidden del JS). */
  .tile-modal-right {
    position: static !important;
  }
  .scroll-indicator {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 11 !important;
    /* Sober pill — sutil pero visible. Backdrop blur para flotar
       limpio sobre cualquier contenido del modal. */
    padding: 4px 10px 4px 12px !important;
    background: rgba(251,252,253,.88) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 999px !important;
    border: 1px solid var(--primary-08) !important;
    box-shadow: 0 1px 2px rgba(15,59,99,.06) !important;
    opacity: 1 !important;
    color: var(--muted) !important;
    transition: opacity .25s ease, transform .25s ease !important;
  }
  .scroll-indicator svg {
    width: 11px !important;
    height: 11px !important;
    stroke: var(--accent) !important;
  }
  .scroll-indicator-label {
    font-size: 9px !important;
    letter-spacing: .1em !important;
    color: var(--muted) !important;
    font-weight: 700 !important;
  }
  .scroll-indicator.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(4px) !important;
  }

  .tile-modal-left {
    flex: none !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 16px 18px 12px !important;
    border-bottom: 1px solid var(--primary-06) !important;
    background: #fff !important;
  }
  .tile-modal-left img {
    max-height: 26vh !important;
    margin: 0 auto 10px !important;
  }
  /* CTAs dentro del modal-left (Consultar equipo, WhatsApp).
     Stack vertical full-width: en mobile cada CTA tiene su propio renglón,
     más legible y sin riesgo de overflow horizontal. */
  .tile-modal-left .detail-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
  .tile-modal-left .consultar-equipo,
  .tile-modal-left .btn-whatsapp {
    width: 100% !important;
    flex: none !important;
    min-height: 46px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  .tile-modal-left .consultar-equipo svg,
  .tile-modal-left .btn-whatsapp svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Header del modal-right: clearance del close (32×32 + top:10 +
     buffer = 56px). Title con line-height tight, no se arrastra. */
  .tile-modal-right {
    padding: 56px 16px 14px !important;
  }
  .tile-modal-right .model-tile-name {
    font-size: var(--text-xl-m, 17px) !important;
    line-height: 1.18 !important;
    padding-right: 4px !important;
  }
  .tile-modal-right .tile-oneliner {
    font-size: var(--text-sm-m, 12.5px) !important;
    line-height: 1.45 !important;
  }
  /* Specs scroll: en mobile NO usamos scroll interno — el modal
     entero scrollea (.tile-modal { overflow-y: auto }). Las specs
     fluyen completas y el usuario navega con scroll natural. */
  .tile-modal-right .tile-modal-specs-scroll {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  /* Items de specs: tipografía contenida y line-height legible */
  .tile-modal-right li {
    font-size: var(--text-sm-m, 12.5px) !important;
    padding: 3px 0 !important;
    line-height: 1.4 !important;
  }
  /* Counter: bien anclado a la izquierda del close */
  .tile-modal-counter {
    top: 14px !important;
    right: 56px !important;
    font-size: 9.5px !important;
    padding: 2px 8px !important;
  }
  /* Close button: 32×32 consistente con wizard modal */
  .tile-modal-close {
    width: 32px !important;
    height: 32px !important;
    top: 10px !important;
    right: 10px !important;
  }
  .tile-modal-close svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* Navigation arrows: pegados al borde, no comen contenido */
  .tile-modal-prev { left: 6px !important; }
  .tile-modal-next { right: 6px !important; }
  .tile-modal-nav {
    width: 36px !important;
    height: 48px !important;
  }
  .tile-modal-nav svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ── Wizard result modal (refinamientos finos sobre polish previo) ── */
@media (max-width: 768px) {
  /* Background y borde consistentes con tile-modal */
  body.page-category.assistant-open #productSelector {
    background: #fbfcfd !important;
    box-shadow:
      0 20px 60px rgba(7,17,29,.32),
      0 0 0 1px var(--primary-08) !important;
  }
  /* Close button: 32×32 idéntico a tile-modal */
  body.page-category.assistant-open .assistant-close {
    width: 32px !important;
    height: 32px !important;
    top: 10px !important;
    right: 10px !important;
  }
  body.page-category.assistant-open .assistant-close svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* =========================================================
   ETAPA — Typography body + premium consistency mobile
   - Pass tipográfico para body copy en componentes que aún
     no habían pasado por la escala de tokens.
   - Normalización visual fina de cards: shadow language unificado,
     border-color al token primary-08, separadores y labels al
     mismo lenguaje sober del drawer/modales.
   ========================================================= */

/* ── Typography body pass ── */
@media (max-width: 600px) {
  /* Product card details (specs expandibles del catálogo) */
  .product-card details summary {
    padding: 10px 16px !important;
    font-size: var(--text-md-m, 13.5px) !important;
    font-weight: 600 !important;
    gap: 10px !important;
  }
  .product-card details summary::after {
    font-size: 16px !important;
  }
  /* Specs list dentro del details-card (cuando se expande) */
  .product-card details .spec-list li,
  .product-card details ul li {
    font-size: var(--text-sm-m, 12.5px) !important;
    line-height: 1.45 !important;
    padding: 3px 0 !important;
  }

  /* Feature specs (specs preview en featured cards) */
  .feature-specs {
    margin-bottom: var(--space-sm, 12px) !important;
    gap: 4px !important;
  }
  .feature-specs li {
    font-size: var(--text-sm-m, 12.5px) !important;
    line-height: 1.45 !important;
    gap: 5px !important;
  }

  /* Modal secondary actions (Compartir, Ficha técnica en tile-modal) */
  .modal-secondary-actions {
    margin-top: var(--space-xs, 8px) !important;
    padding-top: var(--space-xs, 8px) !important;
    gap: 6px !important;
  }
  .modal-action-link {
    font-size: var(--text-xs-m, 11px) !important;
    padding: 5px 9px !important;
    border-radius: 6px !important;
  }

  /* Spec filter labels (sticky catalog tools) */
  .spec-filter-label {
    font-size: 9.5px !important;
    letter-spacing: .12em !important;
  }

  /* Detail-card-inner: padding compacto y tipografía consistente */
  .detail-card {
    padding: 4px 8px 12px !important;
  }
  .detail-card-inner {
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }
}

/* ── Premium consistency pass: cards de contenido principal ──
   Unifica el "lenguaje material" de las cards medianas/grandes
   en mobile para que el sitio se sienta de un mismo sistema.
   .services-item / .contact-info-item / .cat-card mantienen su
   tratamiento ya refinado (densidad distinta intencional). */
@media (max-width: 600px) {
  /* Shadow language unificado para cards de contenido */
  .product-card,
  .featured-card,
  .reach-card,
  .commercial-box {
    box-shadow:
      0 1px 2px rgba(15,59,99,.04),
      0 6px 18px rgba(15,59,99,.06) !important;
  }
  /* Border-color al token consistente */
  .product-card,
  .featured-card,
  .reach-card,
  .commercial-box {
    border-color: var(--primary-08) !important;
  }
  /* Border-radius medianas: 14 (consistente con drawer/modales) */
  .reach-card,
  .commercial-box {
    border-radius: 14px !important;
  }

  /* Hairline divider entre product cards expandidas: más sutil */
  .product-card details {
    border-top-color: var(--primary-08) !important;
  }

  /* Brand pills (logos en empresa): tamaño mobile contenido */
  .brand-pill {
    min-height: 38px !important;
    padding: 0 10px !important;
  }
  .brand-pill img {
    max-height: 26px !important;
    width: auto !important;
    object-fit: contain !important;
  }
}

/* ── Pequeño polish: brand-slider en empresa más fluido ── */
@media (max-width: 600px) {
  #empresa .brand-slider {
    padding: 6px 0;
  }
  #empresa .brand-track {
    gap: 14px !important;
  }
}

/* =========================================================
   ETAPA 8 — Polish premium consistencia final mobile
   Últimas refinaciones para que el sistema se sienta del mismo
   lenguaje material en todo el sitio:
   - Close buttons uniformes (drawer, modales, expanded cards)
   - Category dividers del catálogo con hairline sober
   - Form inputs mobile polish (radius + focus ring unificado)
   - Footer con signature hairline accent arriba
   - Botones mobile con radius consistente (pill vs rectángulo)
   ========================================================= */

/* ── A. Close buttons uniformes (32×32 mobile, sober border) ── */
@media (max-width: 600px) {
  .expanded-close {
    width: 32px !important;
    height: 32px !important;
    right: 12px !important;
    font-size: 14px !important;
    border-width: 1px !important;
    box-shadow: 0 1px 2px var(--primary-04) !important;
  }
}

/* ── B. Category dividers: hairline sober en mobile ── */
@media (max-width: 600px) {
  .category-divider {
    padding: 0 0 10px !important;
    margin-bottom: var(--space-sm, 12px) !important;
    border-bottom: 1px solid var(--primary-08) !important;
    gap: 6px !important;
    align-items: baseline !important;
  }
  .category-divider h3 {
    font-size: var(--text-2xl-m, 17px) !important;
    letter-spacing: -.02em;
    line-height: 1.2 !important;
  }
  .category-divider p {
    font-size: var(--text-sm-m, 12.5px) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }
  /* Layout mobile: stack vertical compacto (title + desc) */
  .category-divider {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  /* En #catalogo dark bg: border-bottom menos opaco */
  #catalogo .category-divider {
    border-bottom-color: rgba(255,255,255,.18) !important;
  }
}

/* ── C. Form inputs mobile + tablet polish (.contact-form) ──
   Cubre 0-768px: extiende el polish de mobile a tablet para evitar el "caos"
   en 600-768 donde antes ganaba la regla out-of-layer (línea ~4947) con
   gap:8px y padding 9×12 forzados en todos los breakpoints.
   El !important es necesario solo para vencer ese override global; no se toca
   desktop (>768) que mantiene su comportamiento previo. */
@media (max-width: 768px) {
  .contact-form {
    gap: 14px !important;
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1px solid var(--primary-08) !important;
    background: #fff !important;
  }
  .contact-form :is(input, select, textarea):focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-08) !important;
  }
  .contact-form textarea {
    min-height: 100px !important;
    line-height: 1.45;
  }
  /* form-row tiene gap forzado a 8px en línea ~4949 (out-of-layer !important).
     En mobile lo subimos a 12 para mantener ritmo con el gap del form. */
  .contact-form .form-row {
    gap: 12px !important;
  }
  /* Submit button del form con el mismo radius/altura que los CTAs */
  .contact-form .btn[type="submit"] {
    border-radius: 12px !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}

/* ── Contact form select — chevron custom con aire a la derecha.
   Antes: select nativo, flecha browser-default pegada al borde.
   Ahora: appearance:none + SVG chevron propio (navy primary)
   posicionado a 16px del borde derecho. padding-right 42px deja
   espacio entre el texto y el icon (texto + 14px aire + 12px icon
   + 16px aire al borde = 42px).
   !important justificado: hay reglas out-of-layer (línea ~5054) y
   mobile (línea 10059) con !important sobre background y padding
   que sin override removerían nuestra chevron y resetearían el
   padding-right. */
.contact-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f3b63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 12px !important;
  padding-right: 42px !important;
}

/* ── D. Footer: signature hairline gradient arriba (consistente
   con drawer, contact-box, wizard-suggestions) ── */
@media (max-width: 600px) {
  footer {
    position: relative;
    padding-top: var(--section-py-m-loose, 36px) !important;
    padding-bottom: var(--space-xl, 24px) !important;
    border-top: 0 !important;
  }
  footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(61,143,214,.35) 22%,
      rgba(89,165,228,.5) 50%,
      rgba(61,143,214,.35) 78%,
      transparent 100%);
    opacity: .7;
    pointer-events: none;
    z-index: 2;
  }
  .footer-bottom {
    margin-top: var(--space-lg, 20px) !important;
    padding-top: var(--space-sm, 14px) !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
  }
}

/* ── E. Buttons mobile — radius consistency system ──
   Criterio: CTAs principales (full width, acción primaria) → 999 (pill).
   Buttons inline/small (dentro de cards, forms) → 10 o 12 (rectángulo suave).
   Los botones específicos (ya tokenizados en sus contextos) mantienen
   sus valores; acá solo aseguramos el default sean consistentes. */
@media (max-width: 600px) {
  /* Detail actions (consultar equipo, whatsapp dentro de modal) ya son pill */
  /* CTAs principales del hero y dark .cta ya son pill */
  /* Buttons inline del catálogo: tile-more-btn es text-style → OK */

  /* Focus-visible consistente — outline accent + offset 2px */
  .btn:focus-visible,
  .btn-primary:focus-visible,
  .btn-secondary:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
  }
}

/* ── F. Hero-scroll-down: ubicación mobile con safe zone.
   Reservamos padding-bottom en el hero para que el indicador
   nunca se monte sobre contenido legible (h1, p, button-row,
   hero-card). El indicador queda en la zona de cierre del hero
   sobre el background, no encima del contenido. ── */
@media (max-width: 600px) {
  /* Hero con padding-bottom suficiente para safe-zone del indicador */
  .hero.hero-full {
    padding-bottom: 44px !important;
  }
  /* Indicador anclado en la safe zone */
  .hero-scroll-down {
    bottom: 10px !important;
    gap: 2px !important;
  }
  .hero-scroll-down > span {
    font-size: 10px !important;
    letter-spacing: .12em !important;
  }
  .hero-scroll-down svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ── G. Detalles finos de consistencia ── */
@media (max-width: 600px) {
  /* Spacer-26 tokenizado (antes 14px hardcoded) */
  .spacer-26 { height: var(--space-md, 14px) !important; }
  /* Section subs consistentes mobile */
  .section-sub {
    font-size: var(--text-sm-m, 13px) !important;
    line-height: 1.5 !important;
  }
}

/* =========================================================
   FIX — CTAs dark mobile (viñeta): breathing room + centrado real
   Corrección puntual: las polish layers anteriores los dejaron
   demasiado comprimidos (padding 12-14 vertical, 0 horizontal).
   Quedaban con sensación de "apretado" y sin aire lateral.

   Ahora: padding 22/24, inner padding horizontal real (20px),
   sin max-width forzado que rompa el título en lugares raros,
   text-align center explícito, gap de buttons consistente.

   Se aplica a LOS DOS bloques del sitio (#contacto .cta y
   .page-category .cta) con el mismo criterio — en toda página
   la viñeta dark se ve igual de proporcionada.
   ========================================================= */
@media (max-width: 600px) {
  #contacto .cta,
  .page-category .cta {
    padding: 22px 22px 24px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }
  /* Inner div wrapper (contiene h2/h3 + p) — centrado explícito */
  #contacto .cta > div:first-child,
  .page-category .cta > div:first-child {
    max-width: 100%;
    margin: 0 auto;
  }
  /* Titles: sin max-width que fuerce quiebres raros, dejan
     wrap natural y quedan centrados. */
  #contacto .cta :is(h1, h2, h3),
  .page-category .cta :is(h1, h2, h3) {
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1.22 !important;
    margin: 0 auto 8px !important;
    max-width: none !important;
    letter-spacing: -.015em;
  }
  /* Paragraph: max-width razonable para evitar renglones muy largos
     en viewports anchos, pero sin forzar quiebres tight en 320. */
  #contacto .cta p,
  .page-category .cta p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 auto 14px !important;
    max-width: 44ch !important;
    color: rgba(255,255,255,.78) !important;
  }
  /* Button row: gap consistente, centrado */
  #contacto .cta .button-row,
  .page-category .cta .button-row {
    justify-content: center !important;
    gap: 10px !important;
    flex-direction: row !important;
  }
  /* Buttons dentro del CTA: side-by-side, touch-friendly, pill */
  #contacto .cta .button-row .btn,
  .page-category .cta .button-row .btn {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    width: auto !important;
  }
  #contacto .cta .button-row .btn svg,
  .page-category .cta .button-row .btn svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* En viewports muy chicos (≤ 380px) los buttons pueden quedar
   justos; damos un padding horizontal menor al CTA. */
@media (max-width: 380px) {
  #contacto .cta,
  .page-category .cta {
    padding: 20px 18px 22px !important;
  }
  #contacto .cta .button-row .btn,
  .page-category .cta .button-row .btn {
    padding: 8px 10px !important;
    font-size: 12.5px !important;
  }
}

/* =========================================================
   FIX — Services panel mobile: hierarchy + breathing
   El bloque de servicios había quedado correcto en compactación
   pero le faltaba presencia: eyebrow muy chiquito, intro densa,
   service items con muy poco aire interior, CTA gigante navy
   visualmente desbalanceado contra cards soft.
   Ahora: jerarquía clara, aire correcto, CTA compacto y elegante
   sin perder presencia de acción.
   ========================================================= */
@media (max-width: 600px) {
  /* Panel: más aire, esquinas más prolijas */
  .page-category .services-panel,
  .services-panel {
    padding: 22px 18px 22px !important;
    border-radius: 16px !important;
    margin-top: var(--space-md, 16px) !important;
  }

  /* Eyebrow "IMPRESORAS · SERVICIOS" */
  .services-panel-head {
    margin-bottom: 16px !important;
  }
  .services-panel-head span {
    font-size: 10.5px !important;
    padding: 4px 10px !important;
    margin-bottom: 12px !important;
    letter-spacing: .12em !important;
    background: rgba(20,86,138,.1) !important;
  }

  /* Title — más espacio bajo */
  .services-panel h3 {
    font-size: var(--text-xl-m, 16.5px) !important;
    line-height: 1.22 !important;
    margin: 0 0 10px !important;
    letter-spacing: -.018em;
  }

  /* Intro paragraph — espacio bajo antes de las cards */
  .services-panel-head > p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    color: var(--muted) !important;
  }

  /* Lista de service-items: separación clara entre cards */
  .services-list {
    gap: 14px !important;
    margin-top: 18px !important;
    grid-template-columns: 1fr !important;
  }

  /* Service-item card: padding más generoso vertical, gap interno
     que da aire entre título → descripción → botón. */
  .services-item {
    padding: 18px 18px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    box-shadow: 0 1px 2px rgba(15,59,99,.04) !important;
  }
  .services-item::before {
    height: 2px !important;
  }

  /* Title del service-item — bold y presente */
  .services-item strong {
    font-size: 14.5px !important;
    line-height: 1.25 !important;
    color: var(--primary) !important;
  }

  /* Descripción: legible + más aire antes del CTA */
  .services-item p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--muted) !important;
    margin: 0 0 14px !important;
  }

  /* CTA "Consultar servicio": dark navy filled pero compacto.
     Aire arriba (margin-top: auto + 4) lo separa del texto sin
     cambiar el diseño del botón. */
  .services-item .btn.btn-with-icon,
  .services-item .consultar-servicio,
  .services-item .btn.btn-primary {
    align-self: stretch !important;
    margin-top: 4px !important;
    min-height: 38px !important;
    padding: 9px 16px !important;
    font-size: 12.5px !important;
    border-radius: 999px !important;
    letter-spacing: .005em !important;
    font-weight: 700 !important;
    gap: 8px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 1px 2px rgba(15,59,99,.10),
      0 4px 12px rgba(15,59,99,.20) !important;
  }
  .services-item .btn svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }
}

/* Viewport muy chico (≤ 380px) — mantener proporción cómoda */
@media (max-width: 380px) {
  .page-category .services-panel,
  .services-panel {
    padding: 20px 16px 20px !important;
  }
  .services-list {
    gap: 12px !important;
  }
  .services-item {
    padding: 16px 16px !important;
    gap: 7px !important;
  }
  .services-item p {
    margin: 0 0 12px !important;
  }
  .services-item .btn.btn-with-icon,
  .services-item .consultar-servicio,
  .services-item .btn.btn-primary {
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
}

/* Ultra-chico (≤ 380px): imagen un poco más chica para evitar
   que aplaste el texto. */
@media (max-width: 380px) {
  .cat-bento .cat-card > .cat-card-img {
    flex: 0 0 38% !important;
  }
  .cat-bento .cat-card > .cat-card-img img {
    height: 86px !important;
    max-height: 86px !important;
  }
  .cat-bento .cat-card-body h3 {
    font-size: 14.5px !important;
  }
  .cat-bento .cat-card-body p {
    font-size: 12px !important;
  }
  .cat-card--primary > .cat-card-img img {
    height: 100px !important;
    max-height: 100px !important;
  }
  .cat-card--primary .cat-card-body h3 {
    font-size: 16.5px !important;
  }
}

/* (bloque "SOBER PREMIUM PASS" eliminado — pisaba el rediseño limpio
   del drawer móvil definido más arriba) */

/* =========================================================
   HERO CINEMATOGRÁFICO MOBILE — pasada premium
   ─────────────────────────────────────────────────────────
   Polish cinematográfico para que el hero en mobile no se
   sienta como una landing genérica. Capas: keylight focal
   sobre el título, vignette más marcado en bordes, eyebrow
   con accent bar lateral, título con depth sutil, hero-card
   con frosted-glass real (inset highlight + sombra premium +
   border-top accent), bullets accent, botones con inset
   highlight + cinematic shadow.
   ========================================================= */
@media (max-width: 768px) {
  /* Background del hero: keylight focal + vignette más fuertes
     que en desktop para compensar viewport chico. */
  .hero.hero-full {
    background:
      radial-gradient(ellipse 90% 40% at 50% 8%, rgba(120,190,240,.32) 0%, rgba(61,143,214,.10) 45%, transparent 70%),
      radial-gradient(ellipse 60% 30% at 100% 0%, rgba(89,165,228,.18) 0%, transparent 60%),
      radial-gradient(ellipse 55% 35% at 0% 100%, rgba(2,8,18,.55) 0%, transparent 65%),
      radial-gradient(ellipse 50% 35% at 100% 95%, rgba(4,12,24,.50) 0%, transparent 65%),
      linear-gradient(168deg,
        rgba(14,49,86,.80) 0%,
        rgba(8,32,58,.88) 35%,
        rgba(3,18,32,.92) 65%,
        rgba(6,28,52,.85) 100%),
      url('../img/hero/hero-warehouse.webp') center/cover no-repeat !important;
  }
  /* Vignette extra en los bordes — refuerza el centro */
  .hero.hero-full::before {
    background: radial-gradient(ellipse 95% 78% at 50% 45%, transparent 38%, rgba(0,0,0,.30) 78%, rgba(0,0,0,.45) 100%) !important;
  }

  /* Eyebrow con accent bar vertical — firma corporativa */
  .hero.hero-full .eyebrow {
    position: relative !important;
    padding-left: 14px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 10.5px !important;
    letter-spacing: .22em !important;
    margin-bottom: 14px !important;
  }
  .hero.hero-full .eyebrow::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 14px !important;
    background: linear-gradient(180deg, var(--accent), rgba(120,190,240,.4)) !important;
    border-radius: 2px !important;
  }

  /* Título con depth sutil — text-shadow imperceptible que da peso */
  .hero.hero-full h1 {
    font-size: clamp(28px, 7.5vw, 38px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.18), 0 2px 12px rgba(0,0,0,.18) !important;
    margin-bottom: 16px !important;
  }

  /* Párrafo del hero con mejor jerarquía */
  .hero.hero-full > .container > .hero-grid > div > p,
  .hero.hero-full p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,.82) !important;
    margin-bottom: 24px !important;
  }

  /* Botones del hero — premium B2B */
  .hero.hero-full .button-row {
    gap: 10px !important;
  }
  .hero.hero-full .btn {
    min-height: 50px !important;
    padding: 14px 22px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: .005em !important;
    border-radius: 12px !important;
  }
  /* Hero primary CTA: removidos los overrides mobile que usaban
     gradient con var(--accent) (azul brillante) en el top — se veían
     más celeste/brillante que desktop. Ahora cascada natural al
     .btn-primary del @layer components: mismo navy profundo
     #134468 → #051526 en desktop y mobile. Las reglas de sizing
     arriba (padding/font-size/min-height) se conservan. */
  /* Secundario blanco sólido + texto navy (igual que desktop) */
  .hero.hero-full .btn-secondary {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid var(--primary-12) !important;
    color: var(--primary) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 10px 24px var(--primary-08), inset 0 1px 0 rgba(255,255,255,.7) !important;
  }
  .hero.hero-full .btn-secondary:hover {
    background: var(--white) !important;
    border-color: var(--accent-22) !important;
    color: var(--accent) !important;
  }
  .hero.hero-full .btn-secondary svg {
    stroke: var(--primary) !important;
    fill: none !important;
  }
  .hero.hero-full .btn-secondary span {
    color: var(--primary) !important;
  }

  /* Hero-card "Qué podés resolver" — frosted glass premium */
  .hero.hero-full .hero-card {
    position: relative !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 16px !important;
    padding: 22px 22px 24px !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.20),
      0 12px 32px rgba(0,0,0,.32),
      0 2px 6px rgba(0,0,0,.20) !important;
    overflow: hidden !important;
  }
  /* Hairline accent superior dentro del card — firma corporativa */
  .hero.hero-full .hero-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 16px !important;
    right: 16px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(120,190,240,.5) 50%, transparent 100%) !important;
    pointer-events: none !important;
  }
  .hero.hero-full .hero-card h3 {
    font-size: 16.5px !important;
    color: #fff !important;
    margin-bottom: 8px !important;
    letter-spacing: -.015em !important;
  }
  .hero.hero-full .hero-card > p {
    font-size: 13px !important;
    color: rgba(255,255,255,.75) !important;
    margin-bottom: 14px !important;
    line-height: 1.55 !important;
  }
  .hero.hero-full .hero-card ul {
    gap: 11px !important;
  }
  .hero.hero-full .hero-card li {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  .hero.hero-full .hero-card li b {
    color: #fff !important;
    font-weight: 700 !important;
  }
  /* Bullets blancos faintes (igual que desktop, no accent azul) */
  .hero.hero-full .hero-card li b::before {
    color: rgba(255,255,255,.4) !important;
    font-size: 1em !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    margin-right: 8px !important;
    vertical-align: baseline !important;
  }
  .hero.hero-full .hero-card li span {
    color: rgba(255,255,255,.72) !important;
  }

  /* VER MÁS: más visible + área tappable */
  .hero.hero-full .hero-scroll-down {
    color: rgba(255,255,255,.82) !important;
    font-size: 10px !important;
    bottom: 14px !important;
    padding: 8px 14px 10px !important;
  }
  .hero.hero-full .hero-scroll-down > span {
    opacity: 1 !important;
    letter-spacing: .22em !important;
  }
  .hero.hero-full .hero-scroll-down svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.8 !important;
  }
}

/* =========================================================
   HERO CINEMATOGRÁFICO MOBILE — páginas de categoría
   Heroes editorial (impresoras, lectores, etc) — mismo
   tratamiento premium adaptado al layout single-column.
   ========================================================= */
@media (max-width: 768px) {
  .page-category .hero.hero-full .eyebrow {
    position: relative !important;
    padding-left: 14px !important;
    color: rgba(255,255,255,.78) !important;
    letter-spacing: .22em !important;
  }
  .page-category .hero.hero-full .eyebrow::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 14px !important;
    background: linear-gradient(180deg, var(--accent), rgba(120,190,240,.4)) !important;
    border-radius: 2px !important;
  }
  .page-category .hero.hero-full h1 {
    text-shadow: 0 1px 0 rgba(0,0,0,.18), 0 2px 12px rgba(0,0,0,.18) !important;
  }
  /* page-category btn-primary mobile override removido — duplicaba
     el gradient brillante de .hero.hero-full .btn-primary arriba.
     Cascada natural al desktop .btn-primary (navy profundo). */
  .page-category .hero.hero-full .btn-secondary {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #fff !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  }
}

/* =========================================================
   Eyebrow categoría — swap full/short con marca GDC
   Desktop: "Gustavo D. Campos · [Categoría]" (forma extendida)
   Mobile : "GDC · [Categoría]" (forma compacta)
   Marca presente sin sobrebranding, mismo tracking sober.
   ========================================================= */
.eyebrow-full,
.eyebrow-short {
  display: inline;
}
.eyebrow-short { display: none; }
@media (max-width: 768px) {
  .eyebrow-full { display: none; }
  .eyebrow-short { display: inline; }
}

/* =========================================================
   Mobile menu — usa todo el viewport disponible
   El drawer es flex-column de altura 100dvh. Header arriba,
   container flex:1 en el medio (que distribuye nav + footer
   con WhatsApp y lang switcher pegado abajo via margin-top:
   auto). Sin scroll, sin espacio muerto: cada elemento toma
   su altura natural y el espacio sobrante se reparte como gap.
   ========================================================= */
@media (max-width: 768px) {
  /* Drawer = flex column de altura completa */
  .mobile-menu {
    display: none !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  .mobile-menu.open {
    display: flex !important;
  }

  /* Header: altura fija, no crece */
  .mobile-menu-header {
    flex: 0 0 auto !important;
    padding: 16px 18px 14px !important;
    gap: 12px !important;
  }
  .mobile-menu-mark {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .mobile-menu-mark img {
    width: 34px !important;
    height: 34px !important;
  }
  .mobile-menu-brand-copy strong {
    font-size: 15px !important;
  }
  .mobile-menu-brand-copy > span {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .mobile-menu-close {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .mobile-menu-close svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Container: ocupa el espacio restante, flex column con footer abajo */
  .mobile-menu .container {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 18px 18px !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* Nav: ocupa todo el espacio sobrante, scrollable cuando los
     <details> de Catálogo/Rubros se expanden y el contenido
     supera la altura del drawer. */
  .mobile-menu nav {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Ítems principales: alto cómodo, sin min-height pequeño */
  .mobile-menu nav > a {
    padding: 14px 44px 14px 18px !important;
    min-height: 52px !important;
    font-size: 15.5px !important;
    border-radius: 12px !important;
    flex: 0 0 auto !important;
  }
  .mobile-menu nav > a[href="/catalogo"] {
    padding: 14px 44px 14px 18px !important;
    min-height: 52px !important;
  }

  /* Sub-menu group */
  .mobile-menu-sub {
    padding: 8px 8px 8px 22px !important;
    margin: -2px 0 0 14px !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
  }

  /* Sub-ítems */
  .mobile-menu-sub a {
    padding: 11px 34px 11px 14px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* WhatsApp: empujado al final del nav con margin-top: auto.
     Esto hace que el espacio sobrante se acumule arriba del
     WhatsApp en vez de dejar todo junto y vacío abajo.
     Padding y posición del icono se definen en la regla base
     (icono inline en flujo flex con row-reverse). */
  .mobile-menu nav > a[href*="wa.me"] {
    margin-top: auto !important;
  }
  .mobile-menu nav > a[href*="wa.me"]::after {
    width: 18px !important;
    height: 18px !important;
  }

  /* Lang switcher: pegado al fondo (fuera del nav, al final del container) */
  .mobile-menu .mobile-menu-lang.lang-switcher {
    margin: 14px auto 0 !important;
    padding: 5px !important;
    flex: 0 0 auto !important;
  }
  .mobile-menu .mobile-menu-lang .lang-btn {
    min-height: 36px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
  }
}

/* Pantallas chicas (≤600px): items levemente más compactos */
@media (max-width: 600px) {
  .mobile-menu-header { padding: 14px 16px 12px !important; }
  .mobile-menu-mark {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
  .mobile-menu-mark img { width: 30px !important; height: 30px !important; }
  .mobile-menu-brand-copy strong { font-size: 14px !important; }
  .mobile-menu-brand-copy > span {
    font-size: 10px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
  }
  .mobile-menu-close {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .mobile-menu .container { padding: 12px 16px 14px !important; }
  .mobile-menu nav { gap: 6px !important; }
  .mobile-menu nav > a {
    padding: 12px 40px 12px 16px !important;
    min-height: 48px !important;
    font-size: 14.5px !important;
  }
  .mobile-menu nav > a[href="/catalogo"] {
    padding: 12px 40px 12px 16px !important;
    min-height: 48px !important;
  }

  .mobile-menu-sub {
    padding: 6px 6px 6px 20px !important;
    gap: 4px !important;
  }
  .mobile-menu-sub a {
    padding: 9px 30px 9px 12px !important;
    min-height: 38px !important;
    font-size: 13.5px !important;
  }

  .mobile-menu nav > a[href*="wa.me"] {
    padding: 14px 22px !important;
    min-height: 50px !important;
    font-size: 14.5px !important;
  }
  .mobile-menu nav > a[href*="wa.me"]::after {
    width: 17px !important;
    height: 17px !important;
  }

  .mobile-menu .mobile-menu-lang.lang-switcher {
    margin: 12px auto 0 !important;
  }
  .mobile-menu .mobile-menu-lang .lang-btn {
    min-height: 34px !important;
    font-size: 11.5px !important;
  }
}

/* =========================================================
   RUBROS — sección editorial dark, sectores que atendemos
   ========================================================= */
#rubros {
  background: var(--primary);
  color: #fff;
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
#rubros::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(89,165,228,.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 100% 100%, rgba(0,4,12,.45) 0%, transparent 60%);
  pointer-events: none;
}
#rubros .container { position: relative; z-index: 1; }

.rubros-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.rubros-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  letter-spacing: .16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.rubros-eyebrow::after {
  content: "";
  display: inline-block;
  width: 56px;
  height: 1px;
  background: rgba(255,255,255,.25);
}
.rubros-title {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.rubros-sub {
  font-size: 15.5px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 0;
  max-width: 460px;
}

.rubros-wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: stretch;
}

.rubros-feature {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 5 / 7;
  background: var(--primary2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.rubros-feature img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.rubros-feature::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,59,99,.2) 0%, rgba(12,45,78,.95) 100%);
}
.rubros-feature-body {
  position: relative;
  padding: 40px;
  color: #fff;
}
.rubros-feature-tag {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: rgba(170,210,240,.95);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.rubros-feature h3 {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #fff;
  text-wrap: balance;
}
.rubros-feature p {
  font-size: 14.5px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 460px;
}
.rubros-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-expo);
}
.rubros-feature-cta:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.65);
  transform: translateY(-1px);
}
.rubros-feature-cta svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

.rubros-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.12);
}
.rubro-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  transition: padding-left var(--duration-fast) ease, padding-right var(--duration-fast) ease, background var(--duration-fast) ease;
}
.rubro-row:hover {
  padding-left: 8px;
  padding-right: 8px;
  background: rgba(255,255,255,.03);
}
.rubro-row:hover .rubro-arrow {
  transform: translateX(0);
  opacity: 1;
}
.rubro-row:focus-visible {
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 2px;
  border-radius: 4px;
}
.rubro-num {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  letter-spacing: .05em;
}
.rubro-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: #fff;
  display: block;
  line-height: 1.25;
}
.rubro-name small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
  letter-spacing: 0;
  line-height: 1.5;
}
.rubro-arrow {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: .4;
  transform: translateX(-8px);
  transition: transform .3s var(--ease-out-expo), opacity var(--duration-fast) ease;
}
.rubro-arrow svg { width: 14px; height: 14px; }

@media (max-width: 980px) {
  #rubros { padding: 56px 0; }
  .rubros-head { grid-template-columns: 1fr; gap: 16px; align-items: start; margin-bottom: 32px; }
  .rubros-wrap { grid-template-columns: 1fr; gap: 32px; }
  .rubros-feature { aspect-ratio: 16 / 11; }
}
@media (max-width: 600px) {
  #rubros { padding: 44px 0; }
  .rubros-eyebrow::after { display: none; }
  .rubro-row { grid-template-columns: 40px 1fr 24px; gap: 14px; padding: 16px 0; }
  .rubro-name { font-size: 16px; }
  .rubro-name small { font-size: 11.5px; }
  .rubros-feature h3 { font-size: 22px; }

  /* Mobile rubros-feature: STACK layout en lugar de overlap.
     Antes: aspect-ratio forzado (16/11) + image absolute + opacity .48
     + overlay gradient navy 95% → imagen recortada y ensuciada por el
     velo. Ahora: bloque vertical limpio — imagen full-opacity arriba
     con su ratio natural, content abajo como card body sin overlay. */
  .rubros-feature {
    aspect-ratio: auto;
    display: block;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
  }
  /* #rubros context: vence opacity:.48 de línea ~13226 sin !important */
  #rubros .rubros-feature img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center 40%;
    opacity: 1;
    display: block;
  }
  /* Sin gradient navy heavy: el texto vive en su propio bloque debajo */
  .rubros-feature::before { display: none; }
  .rubros-feature-body {
    position: relative;
    padding: 22px 24px 26px;
  }
}

/* =========================================================
   PÁGINAS DE RUBROS — landing por sector (.page-rubro)
   ========================================================= */
.page-rubro main { background: var(--surface); }
/* Legacy rubro hero (NO .hero-full opt-in). Kept as safety net for any
   future rubro that doesn't use the unified system. Modern rubros all use
   .hero-full and inherit min-height: calc(100dvh - --hero-offset) from there. */
.page-rubro .hero:not(.hero-full) { padding: 64px 0 56px; min-height: auto; }
.page-rubro .hero:not(.hero-full) h1 {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 0 0 18px;
}
.page-rubro .hero:not(.hero-full) p {
  font-size: 16px;
  line-height: 1.65;
  max-width: 540px;
  margin: 0 0 28px;
}
.page-rubro .hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Equipos recomendados — grid de cards */
.rubro-equipment {
  padding: 72px 0;
  background: var(--surface);
}
.rubro-equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.rubro-eq-card {
  background: var(--white);
  border: 1px solid var(--primary-08);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.rubro-eq-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--primary-14);
}
.rubro-eq-card-img {
  background: linear-gradient(180deg, #fff 0%, #f4f7fb 100%);
  padding: 24px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rubro-eq-card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.rubro-eq-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rubro-eq-card-body h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--primary);
  margin: 0 0 6px;
  line-height: 1.25;
}
.rubro-eq-card-body p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 14px;
  flex: 1;
}
.rubro-eq-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.005em;
  margin-top: auto;
}
.rubro-eq-card-action svg {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.rubro-eq-card:hover .rubro-eq-card-action svg {
  transform: translateX(3px);
}

/* CTA final */
.rubro-cta {
  background: var(--primary);
  color: #fff;
  padding: 64px 0;
}
.rubro-cta-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
.rubro-cta h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 12px;
}
.rubro-cta p {
  font-size: 15px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  margin: 0;
  max-width: 540px;
}
.rubro-cta .button-row { justify-content: flex-end; }
.rubro-cta .btn-secondary {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.rubro-cta .btn-secondary:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

@media (max-width: 900px) {
  .page-rubro .hero:not(.hero-full) { padding: 48px 0 40px; }
  .rubro-equipment { padding: 48px 0; }
  .rubro-cta-inner { grid-template-columns: 1fr; gap: 24px; }
  .rubro-cta .button-row { justify-content: flex-start; }
  .rubro-equipment-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .rubro-eq-card-img { height: 140px; padding: 16px; }
}
@media (max-width: 600px) {
  .rubro-equipment-grid { grid-template-columns: 1fr; }
}


/* === RUBRO PAGES — secciones de problemas y consejos === */
.rubro-problems {
  padding: 64px 0;
  background: var(--surface);
  border-top: 1px solid var(--primary-08);
}
.rubro-problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.rubro-problem-card {
  background: var(--white);
  border: 1px solid var(--primary-08);
  border-radius: var(--radius-card);
  padding: 24px;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.rubro-problem-card:hover {
  border-color: var(--primary-14);
  box-shadow: var(--shadow-soft);
}
.rubro-problem-card h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--primary);
  margin: 0 0 8px;
  line-height: 1.3;
}
.rubro-problem-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
.rubro-advice {
  padding: 64px 0;
  background: var(--white);
  border-top: 1px solid var(--primary-08);
}
.rubro-advice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 32px;
  margin-top: 24px;
  list-style: none;
  padding: 0;
}
.rubro-advice-list li {
  font-size: 14.5px;
  color: var(--text-secondary);
  padding-left: 28px;
  position: relative;
  line-height: 1.55;
}
.rubro-advice-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}
@media (max-width: 600px) {
  .rubro-problems, .rubro-advice { padding: 48px 0; }
  .rubro-problems-grid { grid-template-columns: 1fr; }
  .rubro-advice-list { grid-template-columns: 1fr; gap: 14px; }
}


/* === RUBROS — SEO + comercial: breadcrumb, intro, apps, faq, hero solo === */
.breadcrumb {
  background: var(--surface);
  border-bottom: 1px solid var(--primary-08);
  padding: 14px 0;
  font-size: 13px;
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}
.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: var(--muted-light);
}
.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.breadcrumb [aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}

/* Hero solo column (no hero-card) */
.hero.hero-rubro--solo .hero-content {
  max-width: 760px;
}

/* Intro (prosa, sin H2) */
.rubro-intro {
  padding: 56px 0;
  background: var(--white);
  border-bottom: 1px solid var(--primary-08);
}
.rubro-intro .container {
  max-width: 760px;
}
.rubro-intro p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.rubro-intro p:last-child { margin-bottom: 0; }

/* Apps section (standalone, was in hero-card) */
.rubro-apps {
  padding: 64px 0;
  background: var(--white);
  border-top: 1px solid var(--primary-08);
}
.rubro-apps-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 32px;
  margin-top: 24px;
  list-style: none;
  padding: 0;
}
.rubro-apps-list li {
  padding-left: 28px;
  position: relative;
  line-height: 1.55;
}
.rubro-apps-list li::before {
  content: "■";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 14px;
}
.rubro-apps-list strong {
  display: block;
  color: var(--primary);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.012em;
  margin-bottom: 4px;
}
.rubro-apps-list span {
  font-size: 14px;
  color: var(--text-secondary);
}

/* FAQ section */
.rubro-faq {
  padding: 64px 0;
  background: var(--surface);
  border-top: 1px solid var(--primary-08);
}
.rubro-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  max-width: 760px;
}
.rubro-faq-item {
  background: var(--white);
  border: 1px solid var(--primary-08);
  border-radius: var(--radius-card);
  padding: 0;
  overflow: hidden;
  transition: border-color var(--duration-fast) ease;
}
.rubro-faq-item[open] {
  border-color: var(--primary-14);
}
.rubro-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.012em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.rubro-faq-item summary::-webkit-details-marker { display: none; }
.rubro-faq-item summary::after {
  content: "+";
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.rubro-faq-item[open] summary::after { content: "−"; }
.rubro-faq-item p {
  padding: 0 24px 22px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* CTA — pregunta sobre desc */
.rubro-cta-question {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,.95);
  margin: 0 0 8px;
}

@media (max-width: 600px) {
  .rubro-intro, .rubro-apps, .rubro-faq { padding: 44px 0; }
  .rubro-apps-list { grid-template-columns: 1fr; gap: 16px; }
  .breadcrumb { padding: 10px 0; font-size: 12.5px; }
}


/* ==========================================================
   /logistica — VISUAL TRANSFORM
   ========================================================== */

/* Hero 2-col with system card — legacy class kept for any rubro still on the
   old wrapper. New rubro pages use the unified .hero-grid system below. */
.hero-rubro--with-card .hero-2col {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
}

/* Unified rubro hero — same proportion system as category pages */
.hero-rubro--with-card .hero-grid {
  align-items: center;
}

/* System card — aligned with .hero-card (category pages) so both rubro and
   category right-side panels share the same depth, blur and shadow language. */
.hero-system-card {
  background: rgba(13, 28, 46, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
/* Inner typography — aligned with .hero-card (landing/category panels).
   Same family (Inter), same sizes, same colors. The kicker eyebrow and the
   numbered prefix are the only rubro-specific touches; everything else
   inherits the landing's hierarchy and rhythm. */
.hero-system-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(140, 190, 235, 0.78);
  display: block;
  margin-bottom: 8px;
}
.hero-system-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.hero-system-list li {
  display: grid;
  grid-template-columns: minmax(auto, max-content) 1fr;
  column-gap: 8px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}
/* Use the same bullet as .hero-card li b::before on the landing.
   The "01 02 03 04" text in the HTML is hidden via font-size:0 so the
   element keeps its grid cell, and ::before renders the bullet at
   landing's size/color/weight. */
.hero-system-num {
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
}
.hero-system-num::before {
  content: "•";
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.hero-system-foot {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 900px) {
  .hero-rubro--with-card .hero-2col { grid-template-columns: 1fr; gap: 32px; }
  .hero-rubro--with-card .hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Intro 2-col with quick wins */
.rubro-intro--with-wins .rubro-intro-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  max-width: 1100px;
  align-items: start;
}
.rubro-intro-text p:last-child { margin-bottom: 0; }
.rubro-quick-wins {
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
  display: flex;
  flex-direction: column;
}
.rubro-quick-wins li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--primary-08);
  font-size: 15px;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: -.01em;
}
.rubro-quick-wins li:last-child { padding-bottom: 0; }
.rubro-quick-wins li:first-child { border-top: none; padding-top: 0; }
.qw-check {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: rgba(20,86,138,.1);
  color: var(--accent);
  font-weight: 700;
  border-radius: 50%;
  font-size: 13px;
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .rubro-intro--with-wins .rubro-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .rubro-quick-wins { padding-top: 0; }
}

/* Problems — numbered cards with chips */
.rubro-problem-card--numbered {
  position: relative;
  padding-top: 28px;
}
.rubro-problem-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  gap: 12px;
}
.rubro-problem-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .04em;
}
.rubro-problem-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--primary-14);
  padding: 3px 10px;
  border-radius: 999px;
}
.rubro-problem-card--numbered h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 8px;
  letter-spacing: -.012em;
}
.rubro-problem-card--numbered p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* Apps as horizontal flow with arrows */
.rubro-apps--flow {
  padding: 64px 0;
  background: var(--white);
  border-top: 1px solid var(--primary-08);
}
.rubro-flow {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.rubro-flow-step {
  position: relative;
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--primary-08);
  border-radius: var(--radius-card);
  margin-right: 24px;
}
.rubro-flow-step:last-child { margin-right: 0; }
.rubro-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  width: 24px;
  height: 1px;
  background: var(--accent);
  transform: translateY(-50%);
}
.rubro-flow-step:not(:last-child)::before {
  content: "→";
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  background: var(--white);
  padding: 0 4px;
  z-index: 1;
}
.rubro-flow-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .04em;
  margin-bottom: 10px;
  display: block;
}
.rubro-flow-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 8px;
  letter-spacing: -.012em;
}
.rubro-flow-step p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .rubro-flow { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .rubro-flow-step { margin-right: 0; }
  .rubro-flow-step::after, .rubro-flow-step::before { display: none; }
}
@media (max-width: 600px) {
  .rubro-flow { grid-template-columns: 1fr; }
  .rubro-flow-step { margin-bottom: 12px; }
  .rubro-flow-step:not(:last-child)::before {
    content: "↓";
    right: 50%;
    top: auto;
    bottom: -16px;
    transform: translateX(50%);
    background: transparent;
    display: block;
  }
}

/* Equipment as system grid (4 connected blocks) */
.rubro-equipment--system { padding: 72px 0; background: var(--surface); }
.rubro-system-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 32px;
  background: var(--white);
  border: 1px solid var(--primary-14);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.rubro-system-block {
  padding: 28px 24px;
  border-right: 1px solid var(--primary-08);
  display: flex;
  flex-direction: column;
}
.rubro-system-block:last-child { border-right: none; }
.rubro-system-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}
.rubro-system-block h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 10px;
  letter-spacing: -.012em;
  line-height: 1.3;
}
.rubro-system-block p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0 0 18px;
  line-height: 1.55;
  flex: 1;
}
.rubro-system-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -.005em;
  margin-top: auto;
}
.rubro-system-cta svg { width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease-out-expo); }
.rubro-system-cta:hover svg { transform: translateX(3px); }
.rubro-system-foot {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 24px 0 0;
  font-style: italic;
}
@media (max-width: 980px) {
  .rubro-system-grid { grid-template-columns: repeat(2, 1fr); }
  .rubro-system-block:nth-child(odd) { border-right: 1px solid var(--primary-08); }
  .rubro-system-block:nth-child(even) { border-right: none; }
  .rubro-system-block:nth-child(1), .rubro-system-block:nth-child(2) { border-bottom: 1px solid var(--primary-08); }
}
@media (max-width: 600px) {
  .rubro-system-grid { grid-template-columns: 1fr; }
  .rubro-system-block { border-right: none; border-bottom: 1px solid var(--primary-08); }
  .rubro-system-block:last-child { border-bottom: none; }
}

/* Advice — checklist visual 2 cols */
.rubro-checklist {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
}
.rubro-check-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 6px 0;
}
.rubro-check-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: rgba(20,86,138,.08);
  color: var(--accent);
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.rubro-check-body strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.012em;
  margin-bottom: 3px;
}
.rubro-check-body span {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
@media (max-width: 760px) { .rubro-checklist { grid-template-columns: 1fr; } }

/* CTA enhanced — navy + sidebar checklist */
.rubro-cta--enhanced .rubro-cta-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: center;
}
.rubro-cta--enhanced .rubro-cta-main h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 10px;
}
.rubro-cta--enhanced .rubro-cta-question {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,.95);
  margin: 0 0 12px;
}
.rubro-cta--enhanced .rubro-cta-main > p:not(.rubro-cta-question) {
  font-size: 15px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 540px;
}
.rubro-cta-checklist {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-card);
  padding: 24px 26px;
}
.rubro-cta-checklist-title {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 14px;
}
.rubro-cta-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rubro-cta-checklist li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}
.rubro-cta-checklist li:last-child { border-bottom: none; }
.rubro-cta-checklist .qw-check {
  background: rgba(255,255,255,.12);
  color: #fff;
  width: 22px; height: 22px;
  font-size: 11px;
}
@media (max-width: 900px) {
  .rubro-cta--enhanced .rubro-cta-grid { grid-template-columns: 1fr; gap: 28px; }
}


/* ==========================================================
   /logistica — POLISH (compact spacing, 5-card grid fix, CTA)
   ========================================================== */

/* Section eyebrow (small mono label above H2) */
.rubro-section-eyebrow {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* Hero — buttons stay in a tight row; let the rest inherit .hero-full's scale.
   We don't override min-height / padding here anymore: .hero-full owns that. */
.hero-rubro--with-card .hero-text h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08;
  margin-bottom: 14px;
}
.hero-rubro--with-card .hero-text p {
  font-size: 15.5px;
  margin-bottom: 22px;
}
.hero-rubro--with-card .button-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.hero-rubro--with-card .button-row .btn {
  white-space: nowrap;
}
@media (max-width: 540px) {
  .hero-rubro--with-card .button-row { flex-wrap: wrap; }
  .hero-rubro--with-card .button-row .btn { flex: 1 1 auto; justify-content: center; }
}

/* Subtitle = panel main heading. Treat it as the rubro equivalent of
   .hero-card h3 on the landing/category pages. Same Inter family, same
   weight 800, same size. */
.hero-system-subtitle {
  font-family: inherit; /* Inter, like .hero-card h3 */
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: #fff;
  margin: 0 0 18px;
}

/* Intro — compact */
.rubro-intro--with-wins { padding: 44px 0 !important; }
.rubro-intro-text p { font-size: 15px !important; line-height: 1.65 !important; }
.rubro-intro-text p:last-child {
  font-size: 14.5px !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  font-style: italic !important;
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  margin-top: 14px !important;
}

/* PROBLEMS — fix 4+1 grid → flex centered (3+2 or 5 in row) */
.rubro-problems { padding: 52px 0 !important; }
.rubro-problems-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 1200px;
  margin-inline: auto;
}
.rubro-problem-card--numbered {
  flex: 0 0 calc(33.333% - 11px);
  min-width: 240px;
  max-width: 360px;
  padding: 20px 22px !important;
}
@media (min-width: 1320px) {
  .rubro-problem-card--numbered { flex-basis: calc(20% - 13px); }
}
@media (max-width: 760px) {
  .rubro-problem-card--numbered { flex-basis: calc(50% - 8px); min-width: 200px; }
}
@media (max-width: 480px) {
  .rubro-problem-card--numbered { flex-basis: 100%; }
}
.rubro-problem-card--numbered h3 { font-size: 15px !important; }
.rubro-problem-card--numbered p { font-size: 13px !important; line-height: 1.5 !important; }

/* APPS / FLUJO — compact + tighter connections */
.rubro-apps--flow { padding: 52px 0 !important; background: var(--surface) !important; }
.rubro-apps--flow .rubro-flow {
  margin-top: 28px !important;
}
.rubro-apps--flow .rubro-flow-step {
  background: var(--white) !important;
  padding: 20px 18px !important;
  border-radius: 10px !important;
}
.rubro-apps--flow .rubro-flow-step h3 { font-size: 15px !important; }
.rubro-apps--flow .rubro-flow-step p { font-size: 13px !important; line-height: 1.5 !important; }
.rubro-flow-num {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* SYSTEM — compact + secondary CTA */
.rubro-equipment--system { padding: 56px 0 !important; }
.rubro-system-block {
  padding: 24px 22px !important;
}
.rubro-system-block h3 { font-size: 15px !important; }
.rubro-system-block p { font-size: 13px !important; line-height: 1.5 !important; }
.rubro-system-actions {
  text-align: center;
  margin-top: 24px;
}
.rubro-system-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(20,86,138,.08);
  color: var(--accent);
  border: 1px solid rgba(20,86,138,.2);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -.005em;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-expo);
}
.rubro-system-secondary-cta:hover {
  background: rgba(20,86,138,.15);
  border-color: rgba(20,86,138,.4);
  transform: translateY(-1px);
}
.rubro-system-secondary-cta svg { transition: transform var(--duration-fast) var(--ease-out-expo); }
.rubro-system-secondary-cta:hover svg { transform: translateX(3px); }
.rubro-system-foot {
  font-style: normal !important;
  font-weight: 500 !important;
  margin-top: 14px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}

/* ADVICE — wrapped in card + foot */
.rubro-advice { padding: 48px 0 !important; }
.rubro-advice-card {
  background: var(--white);
  border: 1px solid var(--primary-08);
  border-radius: var(--radius-card);
  padding: 36px 36px 28px;
  max-width: 980px;
  margin-inline: auto;
}
.rubro-advice-card .section-head { margin-bottom: 18px; }
.rubro-advice-card .section-title { font-size: clamp(20px, 2.4vw, 26px) !important; }
.rubro-advice-card .section-sub { font-size: 14px !important; }
.rubro-advice-card .rubro-checklist {
  margin-top: 18px !important;
  gap: 14px 28px !important;
}
.rubro-advice-card .rubro-check-body strong { font-size: 14px !important; }
.rubro-advice-card .rubro-check-body span { font-size: 13px !important; }
.rubro-advice-foot {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--primary-08);
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: -.005em;
}
@media (max-width: 600px) {
  .rubro-advice-card { padding: 24px 22px 22px; }
}

/* FAQ — compact */
.rubro-faq { padding: 44px 0 !important; }
.rubro-faq .section-title { font-size: clamp(20px, 2.4vw, 26px) !important; }
.rubro-faq .section-sub { font-size: 14px !important; }
.rubro-faq-list { gap: 8px !important; margin-top: 20px !important; }
.rubro-faq-item summary { padding: 14px 22px !important; font-size: 14.5px !important; }
.rubro-faq-item p { padding: 0 22px 18px !important; font-size: 14px !important; line-height: 1.6 !important; }

/* CTA — compact + improved primary button + balanced */
.rubro-cta--enhanced { padding: 52px 0 !important; }
.rubro-cta--enhanced .rubro-cta-grid { gap: 36px !important; }
.rubro-cta--enhanced .rubro-cta-main h2 {
  font-size: clamp(22px, 2.6vw, 28px) !important;
}
.rubro-cta--enhanced .button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* Primary button white-on-navy for high contrast */
.rubro-cta--enhanced .btn-primary {
  background: #ffffff !important;
  color: var(--primary) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
}
.rubro-cta--enhanced .btn-primary:hover {
  background: var(--accent-soft) !important;
  transform: translateY(-1px);
}
.rubro-cta--enhanced .btn-primary svg { fill: var(--primary) !important; }
/* Secondary stays outline */
.rubro-cta--enhanced .btn-secondary {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.4) !important;
}
.rubro-cta--enhanced .btn-secondary:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.6) !important;
}
.rubro-cta-checklist { padding: 22px 24px !important; }
.rubro-cta-checklist li { padding: 9px 0 !important; }

/* Mobile: WhatsApp float lower margin to not block CTA */
@media (max-width: 760px) {
  body.page-rubro--logistica { padding-bottom: 80px; }
}

/* Tighter section transitions: alternate background subtly */
body.page-rubro--logistica main > section + section {
  border-top: 1px solid var(--primary-06);
}


/* ==========================================================
   /logistica — System cards (visual hub, no longer table)
   ========================================================== */
.rubro-system-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 1100px) {
  .rubro-system-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 600px) {
  .rubro-system-cards { grid-template-columns: 1fr; gap: 14px; }
}

.system-card {
  background: var(--white);
  border: 1px solid var(--primary-08);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) ease,
              border-color var(--duration-fast) ease;
}
.system-card:hover,
.system-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px var(--primary-14);
  border-color: var(--primary-22);
  outline: none;
}
.system-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.system-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--primary-06);
}
.system-card-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .5s var(--ease-out-expo);
}
.system-card:hover .system-card-img img {
  transform: scale(1.05);
}
.system-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.system-card-eyebrow {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.system-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.012em;
  line-height: 1.25;
  margin: 0 0 8px;
}
.system-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 16px;
  flex: 1;
}
.system-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.005em;
  margin-top: auto;
}
.system-card-cta svg {
  transition: transform var(--duration-fast) var(--ease-out-expo);
  flex-shrink: 0;
}
.system-card:hover .system-card-cta svg {
  transform: translateX(4px);
}

/* Tablet: image más alta para verse mejor en 2-col */
@media (max-width: 1100px) and (min-width: 601px) {
  .system-card-img { aspect-ratio: 16 / 11; }
}
@media (max-width: 600px) {
  .system-card-img { aspect-ratio: 16 / 10; padding: 22px; }
  .system-card-body { padding: 18px 20px 20px; }
}


/* ==========================================================
   /logistica — System cards POLISH
   - Paridad visual de imágenes (más padding, max-size constrained)
   - Hover más sutil (translate menor, sombra suave, scale leve)
   - Mobile más compacto (imagen no come altura)
   ========================================================== */

/* Image area: padding mayor + image constrained 78% para parity */
.system-card-img {
  padding: 36px 28px;
}
.system-card-img img {
  max-width: 78%;
  max-height: 78%;
}

/* Hover sutil */
.system-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 10, 18, 0.08);
  border-color: var(--primary-14);
}
.system-card:hover .system-card-img img {
  transform: scale(1.03);
}
.system-card:hover .system-card-cta svg {
  transform: translateX(3px);
}

/* Body: ligeramente más espacioso, CTA bien alineado abajo */
.system-card-body {
  padding: 22px 22px 24px;
}
.system-card-desc {
  margin-bottom: 18px;
}

/* Tablet 2x2: padding intermedio */
@media (max-width: 1100px) and (min-width: 601px) {
  .system-card-img { padding: 32px 26px; }
  .system-card-img img { max-width: 80%; max-height: 80%; }
}

/* Mobile 390px: imagen no muy alta, max 75% para que respire */
@media (max-width: 600px) {
  .system-card-img {
    aspect-ratio: 16 / 9;
    padding: 26px 28px;
  }
  .system-card-img img {
    max-width: 75%;
    max-height: 75%;
  }
  .system-card-body {
    padding: 18px 20px 20px;
  }
}


/* ==========================================================
   /logistica — REDESIGN PROBLEMS (editorial) + APPS (timeline)
   ========================================================== */

/* PROBLEMAS — editorial, off-white bg, 5 cards con presencia */
.rubro-problems--editorial {
  background: var(--surface);
  padding: 88px 0 96px !important;
  border-top: 1px solid var(--primary-08);
}
.rubro-problems-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}
.rubro-problems-head .rubro-section-eyebrow {
  margin-bottom: 16px;
}
.rubro-problems-h2 {
  font-size: clamp(28px, 3.4vw, 38px) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  color: var(--primary) !important;
  margin: 0 0 16px !important;
  line-height: 1.1 !important;
}
.rubro-problems-sub {
  font-size: 16px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Cards grid: flex centered, 3+2 layout */
.prob-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.prob-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--primary-08);
  border-radius: var(--radius-card);
  padding: 32px 28px 26px;
  flex: 1 1 calc(33.333% - 14px);
  min-width: 280px;
  max-width: 380px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}
.prob-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 10, 18, 0.08);
  border-color: var(--primary-14);
}
/* Watermark number — big decorative */
.prob-card-num {
  position: absolute;
  top: 8px;
  right: 18px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 64px;
  font-weight: 500;
  color: var(--primary-08);
  letter-spacing: -.04em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.prob-card-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(20, 86, 138, .08);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  align-self: flex-start;
  position: relative;
  z-index: 1;
}
.prob-card-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
  color: var(--primary) !important;
  margin: 0 0 10px !important;
  line-height: 1.25 !important;
  position: relative;
  z-index: 1;
}
.prob-card-desc {
  font-size: 13.5px !important;
  color: var(--text-secondary) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  flex: 1;
  position: relative;
  z-index: 1;
}
.prob-card-solution {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--primary-08);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.prob-card-solution-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.prob-card-solution-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -.005em;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .prob-card { flex-basis: calc(50% - 10px); }
  .rubro-problems--editorial { padding: 64px 0 72px !important; }
}
@media (max-width: 600px) {
  .prob-card { flex-basis: 100%; padding: 26px 22px 22px; }
  .prob-card-num { font-size: 52px; top: 6px; right: 14px; }
  .rubro-problems-head { margin-bottom: 36px; }
}

/* APLICACIONES — timeline operativo (flow real) */
.rubro-apps--timeline {
  background: var(--white) !important;
  padding: 96px 0 !important;
  border-top: 1px solid var(--primary-08) !important;
}
.apps-timeline-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 64px;
}
.apps-timeline-head .rubro-section-eyebrow {
  margin-bottom: 16px;
}
.apps-timeline-h2 {
  font-size: clamp(28px, 3.4vw, 38px) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  color: var(--primary) !important;
  margin: 0 0 16px !important;
  line-height: 1.1 !important;
}
.apps-timeline-sub {
  font-size: 16px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.apps-timeline {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.apps-timeline-track {
  position: absolute;
  top: 28px;
  left: 7%;
  right: 7%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-14) 0%, var(--accent) 50%, var(--primary-14) 100%);
  z-index: 0;
}
.apps-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.apps-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}
.apps-timeline-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border: 4px solid var(--white);
  box-shadow: 0 6px 18px rgba(2, 10, 18, 0.18);
  flex-shrink: 0;
}
.apps-timeline-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
}
.apps-timeline-content {
  width: 100%;
}
.apps-timeline-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--primary);
  margin: 0 0 10px;
  line-height: 1.2;
}
.apps-timeline-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 240px;
  margin-inline: auto;
}
.apps-timeline-benefit {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(20, 86, 138, .08);
  padding: 5px 12px;
  border-radius: 999px;
}

/* Mobile: vertical timeline */
@media (max-width: 760px) {
  .rubro-apps--timeline { padding: 64px 0 !important; }
  .apps-timeline-head { margin-bottom: 40px; }
  .apps-timeline-track {
    left: 27px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--primary-14) 0%, var(--accent) 50%, var(--primary-14) 100%);
  }
  .apps-timeline-list {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .apps-timeline-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    padding: 0;
  }
  .apps-timeline-dot {
    margin-bottom: 0;
    width: 56px;
    height: 56px;
  }
  .apps-timeline-content {
    flex: 1;
    padding-top: 4px;
  }
  .apps-timeline-desc {
    margin-inline: 0;
    max-width: none;
  }
}


/* ==========================================================
   /logistica — PROBLEMS REDESIGN v2 (icon-based, no watermark)
   ========================================================== */

/* Hide old watermark (defensive — no longer in HTML) */
.prob-card-num { display: none !important; }

/* Icon block: top-left, accent colored, sober line-style */
.prob-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(20, 86, 138, 0.08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.prob-card-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Tag: smaller, just under icon */
.prob-card-tag {
  margin-bottom: 12px !important;
  align-self: flex-start;
}

/* Title más fuerte */
.prob-card-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
}

/* Description tighter, less text feeling */
.prob-card-desc {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  flex: 1;
}

/* Solution line — destacada con peso tipográfico */
.prob-card-solution {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--primary-08);
}
.prob-card-solution-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}
.prob-card-solution-text {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -.005em;
  line-height: 1.5;
}

/* Card hover sutil */
.prob-card {
  padding: 28px 26px 24px !important;
}
.prob-card:hover .prob-card-icon {
  background: rgba(20, 86, 138, 0.12);
  transition: background var(--duration-fast) ease;
}

/* Mobile: icon más chico */
@media (max-width: 600px) {
  .prob-card-icon { width: 44px; height: 44px; margin-bottom: 14px; }
  .prob-card-icon svg { width: 22px; height: 22px; }
  .prob-card-title { font-size: 18px !important; }
}


/* ==========================================================
   /logistica — PROBLEMS REDESIGN v3 (product image header)
   ========================================================== */

/* Hide previous decorative elements (defensive) */
.prob-card-icon { display: none !important; }
.prob-card-num { display: none !important; }
.prob-card-solution { display: none !important; }

/* Grid: 5 in row desktop, responsive */
.prob-cards {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
}
.prob-card {
  flex: 0 1 calc(20% - 13px) !important;
  min-width: 200px;
  max-width: 260px;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--primary-08);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}
.prob-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 10, 18, 0.08);
  border-color: var(--primary-14);
}

/* Image header — corto, prolijo, fondo neutro */
.prob-card-img {
  height: 130px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--primary-06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.prob-card-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .4s var(--ease-out-expo);
}
.prob-card:hover .prob-card-img img {
  transform: scale(1.04);
}

/* Body */
.prob-card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Tag chip pequeño */
.prob-card-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(20, 86, 138, .08);
  padding: 3px 10px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 10px !important;
  border: none;
}

/* Title */
.prob-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.012em !important;
  color: var(--primary) !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
}

/* Description: 2-3 líneas */
.prob-card-desc {
  font-size: 12.5px !important;
  color: var(--text-secondary) !important;
  margin: 0 0 14px !important;
  line-height: 1.5 !important;
}

/* Producto sugerido block */
.prob-card-product {
  display: flex !important;
  flex-direction: column;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--primary-08);
  gap: 3px;
}
.prob-card-product-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.prob-card-product-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.005em;
  line-height: 1.3;
}
.prob-card-product-desc {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  margin: 2px 0 6px;
}
.prob-card-product-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -.005em;
  margin-top: 2px;
}
.prob-card-product-link svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.prob-card-product-link:hover svg {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 1099px) {
  .prob-card { flex-basis: calc(33.333% - 11px) !important; max-width: 320px; }
  .prob-card-img { height: 140px; }
  .prob-card-title { font-size: 16px !important; }
  .prob-card-desc { font-size: 13px !important; }
}
@media (max-width: 760px) {
  .prob-card { flex-basis: calc(50% - 8px) !important; max-width: 380px; }
}
@media (max-width: 480px) {
  .prob-card { flex-basis: 100% !important; max-width: 440px; }
  .prob-card-img { height: 160px; }
}


/* ==========================================================
   /logistica — PROBLEMS image header CINEMATIC
   - cover + scale (no más contain con padding)
   - overlay sutil para integrar al card
   - desaturate liviano para bajar protagonismo
   - object-position custom por card
   ========================================================== */

/* Header con imagen full-bleed, sin padding, overflow hidden */
.prob-card-img {
  height: 130px;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--primary-08);
}

/* Overlay sutil para que la foto no compita con el título del problema */
.prob-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,59,99,0.04) 0%, rgba(2,10,18,0.16) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Imagen: cover + scale + desaturación liviana */
.prob-card-img img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  filter: saturate(0.88) brightness(0.96);
  transform: scale(var(--prob-img-scale, 1.2));
  transition: transform .6s var(--ease-out-expo), filter var(--duration-fast) ease;
}

/* Hover: más zoom + recupera saturación (sutil) */
.prob-card:hover .prob-card-img img {
  transform: scale(calc(var(--prob-img-scale, 1.2) + 0.08));
  filter: saturate(1) brightness(1);
}

/* Object-position + scale custom por card */
/* Card 1 — Zebra TC22 (handheld colector vertical): mostrar pantalla/grip */
.prob-card:nth-child(1) .prob-card-img img {
  --prob-img-scale: 1.4;
  object-position: center 42%;
}
/* Card 2 — adhesivo-extra (etiqueta cuadrada): zoom fuerte para detalle */
.prob-card:nth-child(2) .prob-card-img img {
  --prob-img-scale: 1.55;
  object-position: center 50%;
}
/* Card 3 — Zebra ZT411 (industrial wide): centro frontal */
.prob-card:nth-child(3) .prob-card-img img {
  --prob-img-scale: 1.28;
  object-position: center 48%;
}
/* Card 4 — Honeywell PM45 (industrial): centro frontal */
.prob-card:nth-child(4) .prob-card-img img {
  --prob-img-scale: 1.28;
  object-position: center 48%;
}
/* Card 5 — etiquetas poliéster racks: detalle de material */
.prob-card:nth-child(5) .prob-card-img img {
  --prob-img-scale: 1.45;
  object-position: center 50%;
}

/* Mobile: scales ligeramente más bajos (header más alto = más espacio para la foto) */
@media (max-width: 1099px) {
  .prob-card-img { height: 140px; }
}
@media (max-width: 480px) {
  .prob-card-img { height: 180px; }
  .prob-card:nth-child(n) .prob-card-img img {
    --prob-img-scale: 1.25;
  }
}


/* ==========================================================
   /logistica — CTA final: match footer's deep navy + fine seam
   ----------------------------------------------------------
   Goal: CTA and footer share the same dark navy atmosphere,
   separated by a single hairline divider so the page closes
   as one solid premium block, not two stacked colors.
   ========================================================== */

/* CTA reuses the footer's gradient base. Soft top key-light kept
   for atmosphere; heavy bottom shadow pools omitted because the
   seam below is the visual anchor — pooling would compete with it. */
.rubro-cta--enhanced {
  background:
    radial-gradient(ellipse 55% 38% at 50% 0%, rgba(61,143,214,.10) 0%, rgba(20,86,138,.03) 50%, transparent 75%),
    radial-gradient(ellipse 30% 25% at 92% 8%, rgba(89,165,228,.06) 0%, transparent 60%),
    linear-gradient(172deg, #091520 0%, #050e1a 30%, #020812 60%, #060f1c 88%, #0a1828 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Hairline seam between CTA and footer — premium, not a hard rule.
   Footer already had border-top with --white-08; we strengthen to .12
   only on logistica so the rest of the site is unaffected. */
.page-rubro--logistica footer {
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

/* Body paragraph — bump legibility on the deeper base */
.rubro-cta--enhanced .rubro-cta-main > p:not(.rubro-cta-question) {
  color: rgba(255,255,255,.82);
}

/* Te pedimos card — refined to sit gracefully on darker navy.
   Background slightly more transparent (less competition with text);
   border softened; inner row dividers softened to match. */
.rubro-cta--enhanced .rubro-cta-checklist {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.rubro-cta--enhanced .rubro-cta-checklist li {
  border-bottom-color: rgba(255,255,255,.08) !important;
}

/* Primary button — keep white-on-navy but bump shadow for the deeper bg */
.rubro-cta--enhanced .btn-primary {
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
}
.rubro-cta--enhanced .btn-primary:hover {
  box-shadow: 0 8px 26px rgba(0,0,0,.45) !important;
}
/* Secondary button — strengthen border slightly so it reads on darker bg */
.rubro-cta--enhanced .btn-secondary {
  border-color: rgba(255,255,255,.45) !important;
}
.rubro-cta--enhanced .btn-secondary:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.65) !important;
}


/* ==========================================================
   /logistica — "Armá el sistema completo": dark navy parity
   ----------------------------------------------------------
   Same atmosphere as the CTA + footer so the page closure
   reads as one premium dark block. Cards stay white for
   max contrast and clean B2B feel; secondary CTA flips to
   outline-white to match the dark context.
   ========================================================== */

/* Section background — same gradient family as CTA/footer.
   Slight rim-light shifted left so the two dark sections
   feel related, not identical. */
.rubro-equipment--system {
  background:
    radial-gradient(ellipse 50% 36% at 50% 0%, rgba(61,143,214,.10) 0%, rgba(20,86,138,.03) 50%, transparent 75%),
    radial-gradient(ellipse 28% 24% at 8% 10%, rgba(89,165,228,.06) 0%, transparent 60%),
    linear-gradient(172deg, #091520 0%, #050e1a 30%, #020812 60%, #060f1c 88%, #0a1828 100%) !important;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Headings — white & high-legibility */
.rubro-equipment--system .section-title {
  color: #ffffff !important;
}
.rubro-equipment--system .section-sub {
  color: rgba(255,255,255,.78) !important;
}

/* Cards — keep white for premium contrast on dark.
   Lift the shadow so they "float" on the darker base, not flatten. */
.rubro-equipment--system .system-card {
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.32);
}
.rubro-equipment--system .system-card:hover,
.rubro-equipment--system .system-card:focus-visible {
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 22px 44px rgba(0,0,0,.42);
  transform: translateY(-3px);
}

/* Eyebrow — slightly stronger on dark surroundings (accent stays accent) */
.rubro-equipment--system .system-card-eyebrow {
  color: var(--accent);
}

/* Secondary CTA pill — flips to outline-white for dark context.
   Same shape, same weight; just the chromatic clothing changes. */
.rubro-equipment--system .rubro-system-secondary-cta {
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}
.rubro-equipment--system .rubro-system-secondary-cta:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.5) !important;
}

/* System foot — readable on dark, still clearly subordinate */
.rubro-equipment--system .rubro-system-foot {
  color: rgba(255,255,255,.62) !important;
}


/* ==========================================================
   Landing #rubros — eyebrow removed, title-led entrance
   ----------------------------------------------------------
   The section now opens straight on the H2. Title scales up
   to carry the visual weight the eyebrow used to share, and
   row affordance is refined so each rubro reads as clickable
   without making the list feel busy.
   ========================================================== */

/* Title — gains weight as the new entry point. Larger clamp,
   tighter tracking; balance preserved by align-items:end below. */
#rubros .rubros-title {
  font-size: clamp(30px, 3.9vw, 46px);
  letter-spacing: -.028em;
}

/* Subtitle — slightly more legible, a touch more breathing room.
   Cleaner commercial tone matches the simplified head. */
#rubros .rubros-sub {
  color: rgba(255,255,255,.78);
  max-width: 480px;
}

/* Head — keep the right-side block aligned to the title's baseline.
   Margin trimmed since the eyebrow's space no longer needs to be
   compensated for. */
#rubros .rubros-head {
  margin-bottom: 48px;
  align-items: end;
}

/* Rows — affordance: numbers and arrows read as clearly clickable
   from rest state, not only on hover. Hover bg slightly stronger
   so the active row stands out without being loud. */
#rubros .rubro-num { color: rgba(255,255,255,.55); }
#rubros .rubro-arrow { opacity: .55; }
#rubros .rubro-row:hover { background: rgba(255,255,255,.05); }
#rubros .rubro-row:hover .rubro-num { color: rgba(255,255,255,.85); }

/* Feature image — pulled back a notch so the body content
   (tag, h3, copy, CTA) clearly carries the column. */
#rubros .rubros-feature img { opacity: .48; }

@media (max-width: 980px) {
  #rubros .rubros-head { margin-bottom: 32px; }
}

/* Match footer's deep navy so the section sits in the same
   atmosphere as the rest of the dark blocks (CTA, equipos, footer).
   The existing ::before keeps its keylight + shadow pool over this. */
#rubros {
  background:
    linear-gradient(172deg, #091520 0%, #050e1a 30%, #020812 60%, #060f1c 88%, #0a1828 100%) !important;
}


/* ==========================================================
   Global header — sticky reinforced + wider real estate
   ----------------------------------------------------------
   The navbar gets its own wider container so brand, nav and
   actions stop crowding into a centered island on big screens.
   Sticky background is more solid (less see-through) so the
   bar reads as clearly fixed without growing taller.
   The nav switches to a 3-col grid (1fr auto 1fr) so the
   menu is truly centered regardless of the side widths.
   ========================================================== */

/* Wider navbar container — site content stays at --max:1240px,
   header alone breathes up to ~1480px. Padding-inline scales
   with viewport so it never glues to the edge. */
header > .container.nav {
  max-width: min(100% - 32px, 1480px);
  padding-inline: clamp(16px, 2vw, 24px);
}

/* Sticky reinforced — more solid surface so the bar separates
   from content cleanly. Same height; just clearer. */
header {
  background: color-mix(in srgb, var(--white) 96%, transparent) !important;
}
.header-scrolled header {
  background: color-mix(in srgb, var(--white) 98.5%, transparent) !important;
  box-shadow: 0 6px 20px rgba(15, 59, 99, 0.10) !important;
  border-bottom-color: rgba(15, 59, 99, 0.10) !important;
}

/* 3-col grid layout: brand left | nav centered | actions right.
   minmax(0, 1fr) prevents grid blowout when content overflows. */
.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.nav .nav-left { justify-self: start; }
.nav > nav { justify-self: center; }
.nav .nav-actions { justify-self: end; }

/* Hide tagline earlier so the centered nav doesn't compress
   on intermediate screens. Existing 768/360 rules still win. */
@media (max-width: 1100px) {
  .brand-copy span { display: none; }
}

/* Mobile: collapse the centered nav slot so brand and actions
   don't share space with an empty middle column. */
@media (max-width: 768px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav > nav { display: none; }
}


/* ==========================================================
   Rubros dropdown — same pattern as Catálogo, slightly
   tighter rows because there are 9 items (vs 5 in Catálogo).
   Keeps the menu visually equivalent in vertical footprint.
   ========================================================== */
.nav-dd-grid--rubros { padding: 6px 4px 4px; }
.nav-dd-grid--rubros a {
  padding: 6px 14px;
  font-size: 12.5px;
}


/* ==========================================================
   Mobile menu — collapsible groups (Catálogo, Rubros)
   ----------------------------------------------------------
   Native <details>/<summary>: zero JS, accessible by default.
   Summary = a pill (same look as a regular nav link) with a
   chevron at the right. Sub-menu hidden until user taps to
   expand. First sub item is "Ver todo X" since the pill is no
   longer a navigation link itself.
   ========================================================== */

/* Group sits in the column flow of the mobile nav */
.mobile-menu .mobile-menu-group {
  display: block;
}

/* Summary acts as a pill — match the styling of nav > a */
.mobile-menu .mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  border-radius: 10px;
  letter-spacing: -.005em;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
/* Strip the default disclosure triangle on every browser */
.mobile-menu .mobile-menu-toggle::-webkit-details-marker { display: none; }
.mobile-menu .mobile-menu-toggle::marker { display: none; content: ''; }

.mobile-menu .mobile-menu-toggle:hover {
  background: rgba(20,86,138,.06);
}
.mobile-menu .mobile-menu-toggle:focus-visible {
  outline: none;
  background: rgba(20,86,138,.06);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Chevron — rotates 180° when the group is open */
.mobile-menu .mobile-menu-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted-light);
  transition: transform var(--duration-normal) var(--ease-out-expo), color var(--duration-fast) ease;
}
.mobile-menu .mobile-menu-group[open] > .mobile-menu-toggle .mobile-menu-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.mobile-menu .mobile-menu-group[open] > .mobile-menu-toggle {
  color: var(--accent);
}

/* Sub-menu inside the collapsible — keep existing visual treatment
   (left accent bar, indented links). The .mobile-menu-sub rules at
   line ~7918 already handle this; nothing extra needed here. */


/* ==========================================================
   Rubro pages — closing block (FAQ + CTA in one split layout)
   ----------------------------------------------------------
   Single LIGHT section that combines the page's FAQ and the
   commercial CTA in a 2-col split.
     left  → FAQ (1.1fr) — column header on top, accordions below
     right → CTA card (0.9fr) — elevated white card with checklist
   The FAQ header is pure typographic hierarchy (no boxed
   container) so it reads as a section opener, not a parche.
   The CTA sits inside an actual card so it has presence on the
   light surface without depending on a dark backdrop.
   Reusable pattern across rubro pages.
   ========================================================== */

.rubro-closing {
  background: var(--surface);
  padding: 72px 0 76px;
  border-top: 1px solid var(--primary-06);
  position: relative;
}

/* Split grid: FAQ wider than CTA. Top-aligned so the eyebrows
   of both columns share the same baseline. */
.rubro-closing-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}

/* FAQ column header — flush above the list, NO box. Compact
   typographic hierarchy that reads as the natural opener of
   the accordion list, not as a separate component. */
.rubro-closing-head {
  margin-bottom: 18px;
  /* Belt + suspenders: even though we now use <div>, defensively
     strip any sticky/border/bg drift that a global rule might apply. */
  background: none;
  border: none;
  padding: 0;
  position: static;
}
.rubro-closing-head .rubro-section-eyebrow {
  margin-bottom: 6px;
}
.rubro-closing-title {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.2;
  color: var(--primary);
  margin: 0 0 8px;
  text-wrap: balance;
}
.rubro-closing-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* FAQ list inherits the default light .rubro-faq-item styling
   (white bg, navy text, primary-08 border). Only trim list-level
   top margin since the head already sits directly above. */
.rubro-closing-faq .rubro-faq-list {
  margin-top: 0;
  max-width: none;
  gap: 10px;
}

/* CTA column — proper card on light bg. Subtle border + soft
   shadow give it presence without competing with the FAQ. */
.rubro-closing-cta {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--primary-08);
  border-radius: var(--radius-card);
  padding: 32px 32px 28px;
  box-shadow: 0 6px 20px var(--primary-06);
}
.rubro-closing-cta > .rubro-section-eyebrow,
.rubro-closing-cta .rubro-cta-main > .rubro-section-eyebrow {
  display: block;
  margin-bottom: 12px;
}

/* Strip the standalone-section styles from .rubro-cta--enhanced
   when nested in .rubro-closing. The card wrapper above already
   carries all the visual treatment. */
.rubro-closing .rubro-cta--enhanced {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.rubro-closing .rubro-cta--enhanced .rubro-cta-grid { display: block !important; gap: 0 !important; }
.rubro-closing .rubro-cta--enhanced .rubro-cta-main { padding-bottom: 22px; }

/* CTA copy in light context — navy heading, dark body, navy strong. */
.rubro-closing .rubro-cta--enhanced .rubro-cta-main h2 {
  color: var(--primary) !important;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  margin-bottom: 8px;
}
.rubro-closing .rubro-cta--enhanced .rubro-cta-question {
  color: var(--primary) !important;
  font-weight: 700;
}
.rubro-closing .rubro-cta--enhanced .rubro-cta-main > p:not(.rubro-cta-question) {
  color: var(--text-secondary) !important;
}
.rubro-closing .rubro-cta--enhanced .rubro-cta-main > p:not(.rubro-cta-question) strong {
  color: var(--primary);
  font-weight: 700;
}

/* Buttons revert to default site treatment: primary = navy filled,
   secondary = navy outline. Overrides the white-on-navy flip set
   for the previous dark CTA. */
.rubro-closing .rubro-cta--enhanced .btn-primary {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary) !important;
  box-shadow: 0 4px 14px var(--primary-14) !important;
}
.rubro-closing .rubro-cta--enhanced .btn-primary:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 6px 18px var(--primary-22) !important;
}
.rubro-closing .rubro-cta--enhanced .btn-primary svg { fill: #ffffff !important; }
.rubro-closing .rubro-cta--enhanced .btn-secondary {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary-22) !important;
}
.rubro-closing .rubro-cta--enhanced .btn-secondary:hover {
  background: var(--accent-soft) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* "Te pedimos" checklist — soft accent panel inside the white
   card. Navy text, accent-soft fill, hairline border. */
.rubro-closing .rubro-cta-checklist {
  margin-top: 4px;
  background: var(--accent-soft) !important;
  border: 1px solid var(--primary-08) !important;
  box-shadow: none;
}
.rubro-closing .rubro-cta-checklist-title {
  color: var(--muted) !important;
}
.rubro-closing .rubro-cta-checklist li {
  color: var(--primary) !important;
  border-bottom-color: var(--primary-08) !important;
}
.rubro-closing .rubro-cta-checklist .qw-check {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* Tablet: stack FAQ then CTA. CTA card keeps its frame. */
@media (max-width: 900px) {
  .rubro-closing { padding: 56px 0 60px; }
  .rubro-closing-grid { grid-template-columns: 1fr; gap: 40px; }
  .rubro-closing-cta { padding: 28px 26px 24px; }
}
@media (max-width: 600px) {
  .rubro-closing { padding: 48px 0 52px; }
  .rubro-closing-grid { gap: 32px; }
  .rubro-closing-cta { padding: 24px 22px 20px; }
}


/* ==========================================================
   Rubro hero — sectorial background image (DARK OVERLAY)
   ----------------------------------------------------------
   Premium editorial: image visible behind a dark navy gradient
   (heavier on the left where the text lives, lighter on the
   right so the photo breathes). Headline & body flip to white;
   the system card becomes dark glass. Logística has no .hero-
   rubro-bg, so its hero stays in the original light treatment.
   Activated only when the section actually has an image
   (sibling .hero-rubro-bg present) via :has().
   ========================================================== */

.hero-rubro--with-card {
  position: relative;
  overflow: hidden;
}
.hero-rubro--with-card .hero-rubro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.hero-rubro--with-card .hero-rubro-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Dark navy overlay — heavier on the left for legibility, lighter
   right so the image stays present. Stops at near-transparent so
   the photo never fully washes out. */
.hero-rubro--with-card .hero-rubro-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(8, 18, 28, 0.86) 0%,
    rgba(8, 18, 28, 0.70) 35%,
    rgba(8, 18, 28, 0.45) 60%,
    rgba(8, 18, 28, 0.22) 100%
  );
}
.hero-rubro--with-card > .container {
  position: relative;
  z-index: 1;
}

/* Per-rubro object-position fine-tuning */
.page-rubro--alimentos     .hero-rubro-bg img { object-position: center center; }
.page-rubro--textil        .hero-rubro-bg img { object-position: center center; }
.page-rubro--laboratorios  .hero-rubro-bg img { object-position: center center; }
.page-rubro--retail        .hero-rubro-bg img { object-position: center center; }
.page-rubro--industria     .hero-rubro-bg img { object-position: center center; }
.page-rubro--agro          .hero-rubro-bg img { object-position: center center; }
.page-rubro--ecommerce     .hero-rubro-bg img { object-position: center center; }
.page-rubro--autopartistas .hero-rubro-bg img { object-position: center center; }
.page-rubro--logistica     .hero-rubro-bg img { object-position: center center; }

/* === TYPOGRAPHY ON IMAGE — applies via :has() cuando el hero tiene
   bg image. Hoy todos los rubros tienen imagen; el :has() se mantiene
   como guard por si en el futuro se agrega un rubro sin foto. === */
.hero-rubro--with-card:has(.hero-rubro-bg) .hero-text .eyebrow {
  color: rgba(255, 255, 255, 0.88);
}
.hero-rubro--with-card:has(.hero-rubro-bg) .hero-text h1 {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
.hero-rubro--with-card:has(.hero-rubro-bg) .hero-text > p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.hero-rubro--with-card:has(.hero-rubro-bg) .hero-text > p strong {
  color: #ffffff;
}

/* === DARK GLASS CARD — system card flips for legibility on dark === */
.hero-rubro--with-card:has(.hero-rubro-bg) .hero-system-card {
  background: rgba(13, 28, 46, 0.62);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.hero-rubro--with-card:has(.hero-rubro-bg) .hero-system-eyebrow {
  color: rgba(255, 255, 255, 0.72);
}
.hero-rubro--with-card:has(.hero-rubro-bg) .hero-system-subtitle {
  color: #ffffff;
}
.hero-rubro--with-card:has(.hero-rubro-bg) .hero-system-list li {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.hero-rubro--with-card:has(.hero-rubro-bg) .hero-system-num {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
}
.hero-rubro--with-card:has(.hero-rubro-bg) .hero-system-foot {
  color: rgba(255, 255, 255, 0.68);
}

/* === BUTTONS ON IMAGE — secondary needs more contrast on dark === */
.hero-rubro--with-card:has(.hero-rubro-bg) .button-row .btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.40);
}
.hero-rubro--with-card:has(.hero-rubro-bg) .button-row .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.65);
}

/* === MOBILE — vertical gradient, still dark on top where text lives === */
@media (max-width: 760px) {
  .hero-rubro--with-card .hero-rubro-bg::after {
    background: linear-gradient(
      180deg,
      rgba(8, 18, 28, 0.82) 0%,
      rgba(8, 18, 28, 0.60) 50%,
      rgba(8, 18, 28, 0.40) 100%
    );
  }
  /* Hero del home + páginas de categoría: mismo gradient vertical en mobile
     para coincidir con el patrón de los rubros */
  .hero {
    background:
      linear-gradient(
        180deg,
        rgba(8, 18, 28, 0.82) 0%,
        rgba(8, 18, 28, 0.60) 50%,
        rgba(8, 18, 28, 0.40) 100%
      ),
      url('../img/hero/hero-warehouse.webp') center/cover no-repeat !important;
  }
}


/* ==========================================================
   Hero rotator — sólo en páginas no-rubro con .hero hero-full
   ----------------------------------------------------------
   5 imágenes sectoriales con crossfade infinito + Ken Burns
   sutil (1.05 → 1.00) que dan sensación de fondo "vivo" tipo
   video. Cuando el .hero contiene .hero-bg-rotator, anulamos
   el background-image único y dejamos que los frames + el
   gradient overlay del rotator hagan todo el trabajo. Los
   rubros NO tienen .hero-bg-rotator → su hero queda intacto.
   ========================================================== */

/* Override: cuando hay rotator, el .hero deja de pintar la imagen
   única (warehouse) y se queda con un fallback dark navy. */
.hero:has(.hero-bg-rotator) {
  background:
    linear-gradient(165deg, #0a1828 0%, #050e1a 100%) !important;
}

/* Rotator container — cubre todo el hero detrás del contenido */
.hero-bg-rotator {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Each frame holds one image. 8 frames stacked, cycling. */
.hero-bg-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroBgFade 40s infinite cubic-bezier(.45, .05, .55, .95);
  will-change: opacity, transform;
}
.hero-bg-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  animation: heroBgZoom 40s infinite cubic-bezier(.45, .05, .55, .95);
  will-change: transform;
}

/* 8 frames staggered with negative delay so all 8 cycle in sync,
   each visible for ~5s of the 40s loop with ~1s crossfade. */
.hero-bg-frame:nth-child(1)     { animation-delay: 0s;   }
.hero-bg-frame:nth-child(1) img { animation-delay: 0s;   }
.hero-bg-frame:nth-child(2)     { animation-delay: -5s;  }
.hero-bg-frame:nth-child(2) img { animation-delay: -5s;  }
.hero-bg-frame:nth-child(3)     { animation-delay: -10s; }
.hero-bg-frame:nth-child(3) img { animation-delay: -10s; }
.hero-bg-frame:nth-child(4)     { animation-delay: -15s; }
.hero-bg-frame:nth-child(4) img { animation-delay: -15s; }
.hero-bg-frame:nth-child(5)     { animation-delay: -20s; }
.hero-bg-frame:nth-child(5) img { animation-delay: -20s; }
.hero-bg-frame:nth-child(6)     { animation-delay: -25s; }
.hero-bg-frame:nth-child(6) img { animation-delay: -25s; }
.hero-bg-frame:nth-child(7)     { animation-delay: -30s; }
.hero-bg-frame:nth-child(7) img { animation-delay: -30s; }
.hero-bg-frame:nth-child(8)     { animation-delay: -35s; }
.hero-bg-frame:nth-child(8) img { animation-delay: -35s; }

/* Overlay editorial encima de los frames (mismo patrón que rubros) */
.hero-bg-rotator::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(8, 18, 28, 0.86) 0%,
    rgba(8, 18, 28, 0.70) 35%,
    rgba(8, 18, 28, 0.45) 60%,
    rgba(8, 18, 28, 0.22) 100%
  );
}

/* Content always above the rotator + overlay.
   For .hero-scroll-down keep the original `position: absolute` (bottom 22px)
   that anchors it to the hero's bottom edge — only bump the z-index so it
   sits above the rotator overlay. */
.hero:has(.hero-bg-rotator) > .container {
  position: relative;
  z-index: 3;
}
.hero:has(.hero-bg-rotator) > .hero-scroll-down {
  z-index: 3;
}

/* Crossfade — 40s loop, 5s slot per image (12.5% of cycle), ~1s fade.
   Each frame: 0% (in), 2.5% (full opacity), 10% (still visible),
   12.5% (faded out), 100% (idle). */
@keyframes heroBgFade {
  0%    { opacity: 0; }
  2.5%  { opacity: 1; }
  10%   { opacity: 1; }
  12.5% { opacity: 0; }
  100%  { opacity: 0; }
}
/* Ken Burns — sutil zoom-out durante el slot visible (12.5% del ciclo) */
@keyframes heroBgZoom {
  0%    { transform: scale(1.06); }
  12.5% { transform: scale(1.00); }
  100%  { transform: scale(1.00); }
}

/* Mobile: gradient vertical encima del rotator (igual a rubros) */
@media (max-width: 760px) {
  .hero-bg-rotator::after {
    background: linear-gradient(
      180deg,
      rgba(8, 18, 28, 0.82) 0%,
      rgba(8, 18, 28, 0.60) 50%,
      rgba(8, 18, 28, 0.40) 100%
    );
  }
  /* Disable Ken Burns on mobile — translate/scale on full-screen images
     can be jankier and we already deliver a strong crossfade. */
  .hero-bg-frame img { animation: none; transform: scale(1); }
}

/* Accessibility: si el usuario pidió reduced-motion, congelamos el
   rotator en la primera imagen (sin crossfade ni zoom). */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-frame,
  .hero-bg-frame img {
    animation: none !important;
  }
  .hero-bg-frame { opacity: 0; }
  .hero-bg-frame:first-child { opacity: 1; }
}


/* ==========================================================
   Category page heroes — sectorial image per product line
   ----------------------------------------------------------
   Each category page (impresoras, lectores, etc.) has its own
   hero image. The base `.hero` rule paints linear-gradient +
   warehouse.jpg as fallback; we override the URL part via a
   CSS variable defined per body class.
   ========================================================== */

body.page-category--impresoras                 { --hero-img: url('../img/hero/hero-impresoras.webp'); }
body.page-category--lectores                   { --hero-img: url('../img/hero/hero-lectores.webp'); }
body.page-category--etiquetas                  { --hero-img: url('../img/hero/hero-etiquetas.webp'); }
body.page-category--consumibles                { --hero-img: url('../img/hero/hero-consumibles.webp'); }
body.page-category--soluciones-complementarias { --hero-img: url('../img/hero/hero-soluciones-complementarias.webp'); }
body.page-category--catalogo                   { --hero-img: url('../img/hero/hero-catalogo.webp'); }

/* Override the hero background to use the category-specific image.
   Same overlay (navy gradient horizontal) as the rest. */
body[class*="page-category--"] .hero {
  background:
    linear-gradient(
      100deg,
      rgba(8, 18, 28, 0.86) 0%,
      rgba(8, 18, 28, 0.70) 35%,
      rgba(8, 18, 28, 0.45) 60%,
      rgba(8, 18, 28, 0.22) 100%
    ),
    var(--hero-img) center/cover no-repeat !important;
}

@media (max-width: 760px) {
  /* Vertical gradient for mobile — match the rubro pattern */
  body[class*="page-category--"] .hero {
    background:
      linear-gradient(
        180deg,
        rgba(8, 18, 28, 0.82) 0%,
        rgba(8, 18, 28, 0.60) 50%,
        rgba(8, 18, 28, 0.40) 100%
      ),
      var(--hero-img) center/cover no-repeat !important;
  }
}

/* ==========================================================
   SEARCH UPGRADE: highlight + autocomplete + empty state
   ========================================================== */

/* Highlight de coincidencias dentro de tiles clonados.
   Hereda toda la métrica del texto contenedor para no romper la lectura
   ni desfasar las cards. Solo aporta un fondo sutil. */
mark.search-highlight {
  background-color: rgba(31, 111, 178, 0.13);
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  padding: 0 .08em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Wrapper interno para que .model-tile-name (display:flex) siga teniendo
   un único flex item incluso cuando el highlight inserta <mark>. Sin esto,
   cada fragmento de texto se vuelve un flex item separado y rompe el wrap
   de palabras y la altura de las cards. */
.model-tile-name > .tile-name-inner {
  display: inline;
}

/* Autocomplete dropdown */
.search-autocomplete {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 80;
  background: var(--white);
  border: 1px solid var(--primary-08);
  border-radius: 12px;
  box-shadow:
    0 2px 6px rgba(15, 59, 99, 0.06),
    0 12px 28px rgba(15, 59, 99, 0.10);
  max-height: min(360px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}
.search-autocomplete[hidden] { display: none !important; }

.search-autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.search-autocomplete-item:hover,
.search-autocomplete-item.is-active {
  background: rgba(20, 86, 138, 0.06);
}

.search-autocomplete-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.005em;
}
.search-autocomplete-type {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-light);
  flex-shrink: 0;
}

/* Empty state mejorado */
.search-no-results-suggest {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-secondary);
}
.search-suggest-link {
  background: none;
  border: none;
  padding: 0 2px;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.search-suggest-link:hover { color: var(--primary); }

/* Bloque chips: label + lista, separado del título y del CTA */
.search-quick-links-wrap {
  margin: 28px auto 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.search-quick-links-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
/* Desktop: una sola fila — nowrap + gap chico + sin shrink. Mobile reabre wrap más abajo. */
.search-quick-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: center;
  max-width: 100%;
}
/* Chips: blanco con texto navy. Contraste alto sobre el fondo oscuro
   del catálogo, sin verse "deshabilitados". */
.search-quick-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.0);
  border-radius: 999px;
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: transform .18s var(--ease-out-expo),
              box-shadow .18s ease,
              background-color .18s ease;
}
.search-quick-link:hover,
.search-quick-link:focus-visible {
  background: #f4f7fb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  outline: none;
}
.search-quick-link:focus-visible {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0,0,0,.18);
}

/* CTA WhatsApp: verde corporativo, ícono completo bien centrado */
.search-cta-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding: 13px 24px;
  background: linear-gradient(180deg, #25d366 0%, #1dad55 100%);
  color: #ffffff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .005em;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(37, 211, 102, .25),
              0 1px 2px rgba(0,0,0,.10);
  transition: transform .18s var(--ease-out-expo), box-shadow .18s ease;
}
.search-cta-wa svg {
  flex-shrink: 0;
  display: block;
}
.search-cta-wa:hover,
.search-cta-wa:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, .32),
              0 1px 2px rgba(0,0,0,.10);
  outline: none;
}
.search-cta-wa:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,.6),
              0 10px 24px rgba(37, 211, 102, .32);
}

/* Mobile: autocomplete a ancho completo del search container */
@media (max-width: 768px) {
  .search-autocomplete {
    max-height: 280px;
    border-radius: 10px;
  }
  .search-autocomplete-item {
    padding: 11px 12px;
  }
  .search-autocomplete-value { font-size: 13px; }
  .search-no-results { padding: 44px 18px 48px; }
  .search-no-results-title { font-size: 16px; }
  .search-no-results-hint { font-size: 13px; }
  .search-quick-links-wrap { margin: 24px auto 22px; gap: 10px; }
  /* Mobile: rehabilitar wrap — el viewport no admite 5 chips en una fila */
  .search-quick-links { flex-wrap: wrap; gap: 7px; }
  .search-quick-link {
    padding: 8px 14px;
    font-size: 12.5px;
  }
  .search-cta-wa {
    padding: 12px 22px;
    font-size: 13.5px;
  }
}

/* ==========================================================
   PRODUCT MODAL — REDESIGN PREMIUM B2B
   ----------------------------------------------------------
   Refinement of .tile-modal* without breaking the JS-built DOM.
   Vive fuera de @layer para vencer el bloque base en @layer layout.
   - Mejor proporción imagen/texto
   - Brand badge institucional
   - SERVICIO INCLUIDO con jerarquía clara
   - Specs con divisores sutiles y label fuerte
   - CTAs con altura premium y sombras refinadas
   - Counter + close más sober
   - Nav arrows circulares y elegantes
   - Mobile reordenado y respirable
   - Body scroll lock cuando el modal está abierto
   ========================================================== */

/* Body scroll lock — applied via JS class .tile-modal-open */
body.tile-modal-open {
  overflow: hidden !important;
}

/* Overlay: fondo más profundo + transición suave. Mantenemos el blur
   moderado del bloque base (8px) para no causar artefactos en mobile. */
.tile-modal-overlay {
  background: rgba(7, 17, 29, 0.66) !important;
  padding: 28px !important;
}

/* Modal: max-width, radius, shadow más refinadas. Desktop con height
   explícito (mismo enfoque que la base) para evitar colapso del flex hijo
   con height: 100%. Mobile lo override más abajo a auto. */
.tile-modal {
  max-width: 980px !important;
  height: 78vh !important;
  max-height: 640px !important;
  border-radius: 22px !important;
  box-shadow:
    0 40px 80px -16px rgba(7, 17, 29, 0.45),
    0 0 0 1px rgba(15, 59, 99, 0.06) !important;
}

/* Close button: más circular, premium con sombra suave */
.tile-modal-close {
  top: 18px !important;
  right: 18px !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 18px !important;
  color: var(--muted) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(15, 59, 99, 0.08) !important;
  box-shadow: 0 4px 14px rgba(15, 59, 99, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.tile-modal-close:hover {
  color: var(--primary) !important;
  background: #ffffff !important;
  border-color: rgba(15, 59, 99, 0.18) !important;
  box-shadow: 0 6px 18px rgba(15, 59, 99, 0.14) !important;
  transform: scale(1.06) !important;
}

/* Counter: pill institucional discreta */
.tile-modal-counter {
  top: 26px !important;
  right: 70px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--muted) !important;
  background: rgba(15, 59, 99, 0.06) !important;
  border: 1px solid rgba(15, 59, 99, 0.06) !important;
  padding: 4px 10px !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
}

/* Nav arrows: circulares, glassmorphism premium */
.tile-modal-nav {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
}
.tile-modal-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.46) !important;
}

/* Content wrapper: 2 columnas con mejor proporción */
.tile-modal-content {
  height: 100% !important;
  min-height: 0;
}

/* LEFT COLUMN: product stage premium */
.tile-modal-left {
  flex: 0 0 44% !important;
  background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
  border-radius: 22px 0 0 22px !important;
  padding: 32px 28px 24px !important;
  gap: 16px;
}
.tile-modal-left img {
  background: #ffffff !important;
  border: 1px solid rgba(15, 59, 99, 0.06) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 6px 22px rgba(15, 59, 99, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
.tile-modal-left img:hover {
  box-shadow: 0 10px 30px rgba(15, 59, 99, 0.10), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* CTAs: mismo ancho, altura premium, sombras refinadas */
.tile-modal-left .detail-actions {
  gap: 10px !important;
}
.tile-modal-left .consultar-equipo,
.tile-modal-left .btn-whatsapp {
  font-size: 14px !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  min-height: 50px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

/* Secondary actions (compartir + ficha técnica): pills horizontales */
.modal-secondary-actions {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(15, 59, 99, 0.08) !important;
  gap: 6px !important;
  justify-content: flex-start !important;
}
.modal-action-link {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--muted) !important;
  background: rgba(15, 59, 99, 0.04) !important;
  gap: 6px !important;
}
.modal-action-link:hover {
  color: var(--primary) !important;
  background: rgba(15, 59, 99, 0.10) !important;
}
.modal-action-link svg {
  width: 13px !important;
  height: 13px !important;
  opacity: 0.7 !important;
}
.modal-action-link:hover svg { opacity: 1 !important; }

/* RIGHT COLUMN: aire generoso, scroll suave */
.tile-modal-right {
  padding: 26px 30px 28px 26px !important;
  scrollbar-gutter: stable;
}

/* Brand badge: más institucional y refinada */
.modal-brand-badge {
  padding: 7px 12px !important;
  gap: 10px !important;
  background: linear-gradient(180deg, rgba(15, 59, 99, 0.04) 0%, rgba(15, 59, 99, 0.01) 100%) !important;
  border: 1px solid rgba(15, 59, 99, 0.08) !important;
  border-radius: 12px !important;
  margin-bottom: 0 !important;
}
.modal-brand-badge img {
  width: 36px !important;
  height: 36px !important;
}
.modal-brand-badge .modal-brand-text {
  gap: 3px !important;
  line-height: 1.05 !important;
}
.modal-brand-badge .modal-brand-name {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}
.modal-brand-badge .modal-brand-tagline {
  font-size: 10.5px !important;
  color: var(--muted) !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Top block: title + oneliner con jerarquía fuerte */
.tile-modal-top-block {
  padding: 4px 0 14px !important;
  border-bottom: 1px solid rgba(15, 59, 99, 0.06) !important;
  margin-bottom: 4px !important;
}
.tile-modal-right .model-tile-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
  color: var(--primary) !important;
  margin: 0 !important;
}
.tile-modal-right .tile-oneliner {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
  margin: 8px 0 0 !important;
  max-width: none !important;
}

/* SERVICIO INCLUIDO — card prominent con barra acento e icono en chip */
.category-includes {
  margin: 14px 0 8px !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, rgba(31, 111, 178, 0.07) 0%, rgba(15, 59, 99, 0.03) 100%) !important;
  border: 1px solid rgba(31, 111, 178, 0.14) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 12px !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.category-includes-icon {
  width: 28px !important;
  height: 28px !important;
  padding: 5px !important;
  background: rgba(31, 111, 178, 0.14) !important;
  border-radius: 50% !important;
  color: var(--accent) !important;
  flex-shrink: 0;
  margin-top: 0 !important;
}
.category-includes-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: var(--accent) !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}
.category-includes-text {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}

/* Specs: section label + divisores sutiles + label/value claros */
.tile-modal-right strong {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin: 18px 0 8px !important;
  display: block;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(31, 111, 178, 0.10);
}
.tile-modal-right strong:first-of-type { margin-top: 10px !important; }
.tile-modal-specs-scroll {
  padding: 0 0 8px 0 !important;
}
.tile-modal-specs-scroll li {
  font-size: 13px !important;
  padding: 9px 0 !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  border-bottom: 1px solid rgba(15, 59, 99, 0.05) !important;
  gap: 10px !important;
}
.tile-modal-specs-scroll li b {
  font-weight: 700 !important;
  color: var(--primary) !important;
  letter-spacing: -0.005em;
}

/* Mobile (≤768): tarjeta vertical con header sticky y aire respirable */
@media (max-width: 768px) {
  .tile-modal-overlay { padding: 14px !important; }
  .tile-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px !important;
  }
  .tile-modal-content { flex-direction: column !important; }
  .tile-modal-left {
    flex: none !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 22px 18px 18px !important;
    gap: 12px;
  }
  .tile-modal-left img {
    max-height: 220px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
  }
  /* Detail-actions y CTAs: ver bloque consolidado en línea ~9642
     (mobile @media). Acá NO duplicar para evitar conflictos de cascada. */
  .modal-secondary-actions {
    justify-content: center !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
  }
  .tile-modal-right {
    padding: 16px 20px 22px !important;
    overflow: visible !important;
  }
  .modal-brand-badge {
    padding: 10px 12px !important;
  }
  .modal-brand-badge img { width: 28px !important; height: 28px !important; }
  .tile-modal-right .model-tile-name {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
  .tile-modal-right .tile-oneliner {
    font-size: 13px !important;
  }
  .tile-modal-top-block {
    padding: 16px 0 12px !important;
  }
  .category-includes {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .category-includes-icon {
    width: 26px !important;
    height: 26px !important;
  }
  .tile-modal-right strong {
    font-size: 10px !important;
    margin-top: 16px !important;
  }
  .tile-modal-specs-scroll li {
    font-size: 12.5px !important;
    padding: 8px 0 !important;
  }

  /* Counter + close en header: counter integrado en pill, close circular */
  .tile-modal-close {
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  .tile-modal-counter {
    top: 18px !important;
    right: 58px !important;
    font-size: 10px !important;
    padding: 3px 9px !important;
  }

  /* Nav arrows: chicas, translúcidas, en bordes */
  .tile-modal-nav {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
  }
  .tile-modal-nav svg { width: 18px !important; height: 18px !important; }
  .tile-modal-prev { left: 8px !important; }
  .tile-modal-next { right: 8px !important; }
}

/* Mobile pequeño (≤400): aún más compacto */
@media (max-width: 400px) {
  .tile-modal-overlay { padding: 10px !important; }
  .tile-modal-left { padding: 18px 16px 14px !important; }
  .tile-modal-left img {
    max-height: 180px !important;
    padding: 12px !important;
  }
  .tile-modal-right { padding: 14px 16px 20px !important; }
  .tile-modal-right .model-tile-name { font-size: 18px !important; }
  .tile-modal-prev { left: 4px !important; }
  .tile-modal-next { right: 4px !important; }
  .tile-modal-nav { width: 32px !important; height: 32px !important; }
  .tile-modal-nav svg { width: 14px !important; height: 14px !important; }
}

/* ── CLEANUP TODO (futuro, no urgente) ──────────────────────
   1) Unificación progresiva de tokens mobile (--text-*-m / --space-*).
      Hoy ~60% del CSS mobile usa hardcoded. Refactor sin cambio de
      comportamiento donde los valores ya coinciden con tokens.
   2) Limpieza de reglas out-of-layer con !important (líneas ~4929-4949
      principalmente). Hoy fuerzan padding/gap en TODOS los breakpoints,
      generando "caos" que las capas mobile compensan con !important
      adicionales. Cleanup: scope-arlas con @media o moverlas a @layer.
   3) Revisar FAQ específicamente si después de Fase 5 sigue
      sintiéndose comprimida (tiene reglas dedicadas en línea ~7669
      con !important; pueden necesitar bump de paddings).
   ─────────────────────────────────────────────────────────── */

/* Mobile polish — touch targets
   Bumpea min-height en CTAs principales a 44px (a11y iOS/Android).
   Chips/tabs secundarios a 40px y tile-compare-btn a 36px para
   preservar jerarquía visual. Solo aplica en ≤768px. */
@media (max-width: 768px) {
  /* CTAs principales — 44px. (filter-btn, spec-pill y footer-cta-btn
     fueron consolidados en sus reglas originales del bloque mobile main,
     líneas ~6585-6595, para evitar duplicación.) */
  .featured-card .feature-actions .btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  .contact-info-action .btn {
    min-height: 44px;
    padding: 10px 18px;
  }
  .tile-more-btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  .rec-reset {
    min-height: 44px;
    padding: 10px 22px;
  }
  /* FAQ sidebar btn — ya tenía 40 !important; subimos a 44 con !important
     para vencer la cascada previa (línea ~7704). */
  .faq-side .btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Secundarios — modal action tabs. 40px mantiene jerarquía contra los
     CTAs principales del modal (Consultar/WhatsApp ya en 46+). */
  .modal-action-link {
    min-height: 40px;
    padding: 9px 12px;
  }

  /* tile-compare-btn — chip flotante en esquina, bump 26 → 36 gana
     tactilidad sin romper la estética del corner-pill. */
  .tile-compare-btn {
    height: 36px;
    padding: 0 12px 0 10px;
  }
}

/* Mobile polish — typographic rhythm
   Mejora line-height y separación entre títulos / bajadas / contenido.
   No agranda font-sizes (premium ≠ inflado). Sin !important: el bloque
   vive al final → vence cascade sin forzar especificidad. Solo ≤768px. */
@media (max-width: 768px) {
  /* Headings: line-height más respirado para que en mobile (donde h1
     suele romper en 2-3 líneas) las líneas no se peguen entre sí. */
  .hero h1 { line-height: 1.12; }
  .section-title { line-height: 1.18; margin-bottom: 14px; }

  /* Section head: más aire entre el bloque title+sub y la siguiente sección */
  .section-head { margin-bottom: 26px; }

  /* Hero: separación cómoda entre la bajada y los CTAs */
  .hero p { margin-bottom: 28px; }

  /* Product cards: line-height en title + más respiro al separator */
  .product-head h3 { line-height: 1.3; padding-bottom: 10px; }
  .product-body > p { line-height: 1.6; }

  /* Hero secondary card: bajada legible */
  .hero-card p { line-height: 1.5; }

  /* Footer headings: line-height definido + aire bajo h4 de columnas.
     Mobile margin 16px alineado con el desktop bumpeado (18px). */
  .footer-brand h4,
  .footer-col h4 { line-height: 1.3; }
  .footer-col h4 { margin-bottom: 16px; }
}

@media (max-width: 480px) {
  /* En 320-480 el hero h1 con clamp(26, 7vw, 38) puede romper en 3
     líneas. Subimos line-height un punto más para mantener legibilidad. */
  .hero h1 { line-height: 1.15; }
  /* Section title: más margin-bottom porque hay menos ancho útil
     y el contraste título→bajada se nota más con espaciado generoso. */
  .section-title { margin-bottom: 16px; }
}

/* Mobile polish — vertical rhythm
   Bump moderado en padding de secciones para que la página respire
   entre bloques sin volverse larguísima. Los incrementos son de +4 a
   +8px máximo donde más se siente. Solo ≤768px, sin !important. */
@media (max-width: 768px) {
  /* Sections genéricos: 36 → 42. Aire entre componentes apilados. */
  section { padding: 42px 0; }
  /* Heros temáticos del home (#categorias, #destacados): un pelín
     más generoso porque son las secciones marquee. */
  #categorias, #destacados { padding: 48px 0; }
  /* Hero padding-bottom: 32 → 40. La sección siguiente (categorías,
     featured, etc.) deja de sentirse pegada al final del hero. */
  .hero { padding: 36px 0 40px; }
  /* Product-grid: gap 20 → 24 entre cards apiladas verticalmente.
     +4 respira sin engordar el scroll. */
  .product-grid { gap: 24px; }
}

@media (max-width: 480px) {
  /* En 320-480 el bump genérico se nota más; bajamos un par de px
     para no inflar la página en pantallas chicas. */
  section { padding: 38px 0; }
  #categorias, #destacados { padding: 44px 0; }
  /* Hero padding-bottom 40 → 36 en pantallas chicas — la primera
     sección post-hero no debe quedar tan lejos en 320-360px. */
  .hero { padding: 32px 0 36px; }
}

/* Mobile polish — Phase 5 puntual
   Cambios específicos en componentes que después de fases 1-4
   todavía se sentían comprimidos en mobile. Sin !important salvo
   donde las reglas de origen ya lo usan (caso inevitable). */
@media (max-width: 768px) {
  /* FAQ — separación entre preguntas. La lista venía con gap 8 que
     leía como bloque compacto. 14 da respiración real en mobile. */
  .faq-list { gap: 14px; }
  /* FAQ de rubros — misma idea pero con !important porque la regla
     fuente (línea ~12066) ya tiene !important global. */
  .rubro-faq-list { gap: 12px !important; }

  /* Contact info grid — vencer reglas out-of-layer (líneas 4943-4944)
     que fuerzan gap 8 y padding 12×14 en TODOS los breakpoints. En
     mobile pedimos más aire para que las cards no se lean apiladas. */
  .contact-info-grid {
    gap: 14px !important;
    margin: 22px 0 0 !important;
  }
  .contact-info-item {
    padding: 16px 14px !important;
  }

  /* Rubros — problemas grid: cuando colapsa a 1col el gap 16 del
     desktop queda apretado entre cards verticales. */
  .rubro-problems-grid { gap: 18px; }
  /* Rubros — apps list: idem, +4 para que los pasos del flow
     respiren. La regla fuente está en @media <600 sin !important. */
  .rubro-apps-list { gap: 20px; }

  /* Services list (soluciones complementarias / catálogo): cuando
     colapsa a 1col el gap heredado (16) queda corto. */
  .services-list { gap: 18px; }
}

/* =========================================================
   ABOUT SHOWCASE — Rotator visual editorial de productos
   Reemplaza la imagen estática en "Sobre la empresa" tanto en
   index.html como en empresa.html.

   Estética: editorial product-hero B2B premium. Productos sobre
   una "stage" compartida con luz suave + ground shadow. Se evita
   el efecto "PNG con fondo blanco pegado" usando mix-blend-mode:
   multiply, que hace que los pixels blancos del PNG desaparezcan
   y los productos se fundan con el fondo claro.

   Patrón de animación basado en .hero-bg-rotator: crossfade puro
   (solo opacity, GPU-accelerated). 30s de loop (5 × 6s con ~1s
   fade entre slides). Sin layout shifts.
   ========================================================= */
/* El <div> que envuelve el showcase es hijo directo de .split, y
   .split > * { overflow: hidden } estaba clipeando la box-shadow
   del card (línea 5084). Sobrescribimos solo para ese wrapper.
   Specificity 1,2,1 con :has() — gana sobre 0,1,0 de .split > *. */
#empresa .split > div:has(> .about-showcase) {
  overflow: visible;
}

.about-showcase {
  position: relative;
  width: 100%;
  /* Aspect 4:3 (más alto que el 3:2 anterior) → card con más
     presencia visual y los productos respiran. */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  /* Container blanco igual que el fondo PNG de los productos →
     los productos se integran 100% sin necesidad de mix-blend-mode
     ni recorte. Sombra dramática multi-layer para que el card flote
     claramente sobre el fondo de la página, incluso en secciones
     blancas-blancas donde una sombra suave queda invisible. */
  background: #ffffff;
  border: 1px solid rgba(15, 59, 99, 0.12);
  box-shadow:
    0 28px 64px rgba(15, 59, 99, 0.22),
    0 10px 20px rgba(15, 59, 99, 0.12),
    0 2px 4px rgba(15, 59, 99, 0.08);
  isolation: isolate;
}

/* Línea de acento navy sutil arriba (firma editorial) */
.about-showcase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(31, 111, 178, 0.18) 25%,
    rgba(31, 111, 178, 0.28) 50%,
    rgba(31, 111, 178, 0.18) 75%,
    transparent 100%);
  z-index: 5;
  pointer-events: none;
}

.about-showcase-rotator {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.about-showcase-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Padding generoso → margen real alrededor de los productos.
     Top más grande para no chocar con el logo; bottom suficiente
     para el tag pill + ground shadow. */
  padding: 56px 56px 72px;
  animation: aboutShowcaseFade 30s infinite cubic-bezier(.45, .05, .55, .95);
  will-change: opacity;
}

/* Ground shadow — elipse sutil que conecta visualmente los
   productos con el container. Sobre blanco se mantiene tenue
   para no parecer mancha; da realismo sin saturar. */
.about-showcase-frame::after {
  content: "";
  position: absolute;
  bottom: 22%;
  left: 50%;
  width: 60%;
  height: 14px;
  background: radial-gradient(ellipse closest-side,
    rgba(15, 59, 99, 0.10) 0%,
    rgba(15, 59, 99, 0.03) 55%,
    transparent 80%);
  filter: blur(8px);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

/* === Variante multi: sub-rotator zoomed-in dentro del slide ===
   Aplicado a TODOS los slides. Cada slide cicla rápidamente (1s c/u)
   a través de 5 imágenes con object-fit: cover + scale (estilo
   prob-card de rubros) → la imagen llena el rectángulo completo y
   se siente zoomed-in / editorial. La animación es continua (5s
   loop) → durante la ventana visible del slide padre (~4-5s) se
   ven las 5 imágenes pasar rápido. */
.about-showcase-frame--multi::after {
  display: none; /* ground shadow innecesario, la img llena el área */
}
.about-showcase-multi-img {
  position: absolute;
  /* Edge-to-edge horizontal, top/bottom dejan espacio para las
     dos solapas (blanca arriba, navy abajo). La imagen ocupa todo
     el ancho del container, sin padding lateral. */
  top: 42px;
  right: 0;
  bottom: 40px;
  left: 0;
  width: 100%;
  height: calc(100% - 82px);
  /* Cover + scale (estilo prob-card-img): la imagen llena todo el
     rectángulo. Como el container es blanco y el PNG también, los
     bordes recortados (que son padding blanco de la foto) se
     mimetizan. El producto queda dominante y zoomed-in. */
  object-fit: cover;
  object-position: center 50%;
  opacity: 0;
  /* Transición tipo carousel comercial: la imagen entra deslizándose
     desde la derecha + fade in, queda fija con scale 1.08, sale hacia
     la izquierda + fade out. */
  animation: aboutMultiSlide 5s infinite cubic-bezier(.55, .05, .25, 1);
  will-change: opacity, transform;
  z-index: 2;
}
.about-showcase-multi-img:nth-child(1) { animation-delay: 0s; }
.about-showcase-multi-img:nth-child(2) { animation-delay: -1s; }
.about-showcase-multi-img:nth-child(3) { animation-delay: -2s; }
.about-showcase-multi-img:nth-child(4) { animation-delay: -3s; }
.about-showcase-multi-img:nth-child(5) { animation-delay: -4s; }

/* Carousel slide — 5s loop, 1s slot por imagen.
   Entrada: 0% → 5% (slide+fade in desde la derecha)
   Estancia: 5% → 16% (centered con scale 1.08)
   Salida: 16% → 20% (slide+fade out hacia la izquierda)
   Resto: idle a la izquierda invisible. */
@keyframes aboutMultiSlide {
  0%   { opacity: 0; transform: translateX(36px) scale(1.08); }
  5%   { opacity: 1; transform: translateX(0) scale(1.08); }
  16%  { opacity: 1; transform: translateX(0) scale(1.08); }
  20%  { opacity: 0; transform: translateX(-36px) scale(1.08); }
  100% { opacity: 0; transform: translateX(-36px) scale(1.08); }
}

/* Crossfade simple para nombre de producto — opacity sincronizada
   con la imagen + leve slide vertical para feel comercial. */
@keyframes aboutMultiSlideName {
  0%   { opacity: 0; transform: translateY(10px); }
  5%   { opacity: 1; transform: translateY(0); }
  16%  { opacity: 1; transform: translateY(0); }
  20%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Solapa inferior — banda navy de punta a punta. Estructura:
   • Izquierda: categoría (fija por slide)
   • Derecha: nombre del producto (rota junto con la imagen)
   Las esquinas inferiores se redondean por el overflow:hidden +
   border-radius del container .about-showcase. */
.about-showcase-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--primary);
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.10em;
  border-radius: 0;
  border: none;
  z-index: 4;
}
/* Categoría — uppercase con dot inicial (firma editorial) */
.about-showcase-tag-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.about-showcase-tag-category::before {
  content: "";
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  flex-shrink: 0;
}
/* Contenedor del nombre rotativo — height fijo + flex para centrar
   verticalmente sin necesitar translateY(-50%) en los hijos
   (que necesitan tener transform libre para la animación). */
.about-showcase-tag-products {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  height: 1.4em;
}
/* Cada nombre — apilados absolute con inset:0 + flex interno para
   centrar el texto verticalmente. Transform queda libre para la
   animación de slide vertical comercial. */
.about-showcase-tag-product {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  animation: aboutMultiSlideName 5s infinite cubic-bezier(.55, .05, .25, 1);
  will-change: opacity, transform;
}
.about-showcase-tag-product:nth-child(1) { animation-delay: 0s; }
.about-showcase-tag-product:nth-child(2) { animation-delay: -1s; }
.about-showcase-tag-product:nth-child(3) { animation-delay: -2s; }
.about-showcase-tag-product:nth-child(4) { animation-delay: -3s; }
.about-showcase-tag-product:nth-child(5) { animation-delay: -4s; }

/* 5 frames staggered — cycle sincronizado de fade entre slides padre */
.about-showcase-frame:nth-child(1) { animation-delay: 0s; }
.about-showcase-frame:nth-child(2) { animation-delay: -6s; }
.about-showcase-frame:nth-child(3) { animation-delay: -12s; }
.about-showcase-frame:nth-child(4) { animation-delay: -18s; }
.about-showcase-frame:nth-child(5) { animation-delay: -24s; }

/* Solapa de marca — banda BLANCA full-width en el borde superior.
   Espejo visual de la solapa navy inferior: misma estructura, color
   inverso. Logo + nombre centrados como conjunto. FIJO, no rota.
   Las esquinas superiores se redondean naturalmente por el
   overflow:hidden + border-radius del container.about-showcase. */
.about-showcase-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 24px;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid rgba(15, 59, 99, 0.06);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.about-showcase-logo img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}
.about-showcase-logo-text {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Crossfade — 30s loop, 6s slot por imagen (20% del cycle), ~1s fade.
   Cada frame: 0% in → 3% full → 17% still → 20% out → 100% idle. */
@keyframes aboutShowcaseFade {
  0%    { opacity: 0; }
  3%    { opacity: 1; }
  17%   { opacity: 1; }
  20%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* Reduce motion: respeta usuarios sensibles → estático en frame 1 */
@media (prefers-reduced-motion: reduce) {
  .about-showcase-frame,
  .about-showcase-multi-img,
  .about-showcase-tag-product {
    animation: none;
  }
  .about-showcase-frame:nth-child(1) { opacity: 1; }
  .about-showcase-multi-img:first-child { opacity: 1; }
  .about-showcase-tag-product:first-child { opacity: 1; }
}

/* Mobile (≤600px) — aspect 4:3 (mismo que desktop ahora),
   padding proporcional al tamaño chico. Productos con margen
   real al borde, sin sentirse pegados ni achicados de más. */
@media (max-width: 600px) {
  .about-showcase {
    aspect-ratio: 4 / 3;
  }
  .about-showcase-frame {
    padding: 36px 32px 56px;
  }
  /* Multi-img mobile — edge-to-edge, deja espacio para las solapas */
  .about-showcase-multi-img {
    top: 36px;
    right: 0;
    bottom: 34px;
    left: 0;
    width: 100%;
    height: calc(100% - 70px);
  }
  /* Solapa navy mobile más compacta + texto más chico para que
     entren categoría a la izquierda + nombre producto a la derecha */
  .about-showcase-tag {
    padding: 8px 14px;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    gap: 10px;
  }
  .about-showcase-tag-category {
    letter-spacing: 0.08em;
  }
  .about-showcase-tag-product {
    letter-spacing: 0.02em;
  }
  /* Solapa blanca (logo) mobile */
  .about-showcase-logo {
    padding: 8px 16px;
    gap: 8px;
  }
  .about-showcase-logo img {
    width: 20px;
    height: 20px;
  }
  .about-showcase-logo-text {
    font-size: 11px;
  }
}