/* =========================================================
   Steiter — Hoja de estilos principal
   Sistema visual construido desde el logo real: navy profundo,
   malla de nodos conectados, acento teal del isotipo entrelazado,
   y el corte/chaflán que aparece en los trazos del wordmark.
   Sin dependencias externas (fuentes del sistema) para máximo rendimiento.
   ========================================================= */

:root {
  /* Núcleo de marca, tomado por muestreo directo de logo/steiter logo.png */
  --ink: #0a1233;          /* navy profundo — fondo del isotipo */
  --ink-2: #121f4c;        /* navy elevado — paneles sobre --ink */
  --ink-3: #1a2a5e;        /* navy de borde/hover sobre superficies oscuras */
  --signal: #3b63d8;       /* azul de la malla de nodos */
  --teal: #17d0bc;         /* teal del isotipo — único acento cálido del sitio */
  --teal-deep: #0b8f80;    /* teal oscurecido, para texto/ícono sobre fondo claro */
  --paper: #f5f7fb;        /* fondo claro de contenido */
  --paper-alt: #eaeef8;    /* fondo claro alterno */
  --heading: #10173a;      /* texto de encabezado sobre superficies claras */
  --text: #4b5570;         /* texto de cuerpo sobre superficies claras */
  --muted: #6b748f;        /* texto secundario sobre superficies claras */
  --border: #dde3f0;       /* línea sutil sobre superficies claras */
  --on-ink: #eef1fb;       /* texto principal sobre --ink */
  --on-ink-muted: rgba(238, 241, 251, 0.66); /* texto secundario sobre --ink */
  --on-ink-border: rgba(238, 241, 251, 0.14);
  --jet: #121319;          /* casi-negro neutro — reposo del slide de marcas, distinto del navy de marca */

  --whatsapp: #25d366;
  --whatsapp-dark: #128c46;

  --chamfer: 14px;
  --chamfer-lg: 22px;
  --chamfer-sm: 8px;

  --shadow-ink: 0 20px 45px rgba(6, 10, 28, 0.35);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Anclas de marca en marcas.html (#marca-dell, #marca-hp, etc., usadas por
   los logos del hero y la marquesina): sin esto, el header sticky (76px)
   tapa la tarjeta al hacer scroll suave y el salto se siente como que no
   pasó nada — con esto la tarjeta queda visible debajo del header. */
[id^="marca-"] {
  scroll-margin-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  color: var(--heading);
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-weight: 800;
  letter-spacing: -0.015em;
  font-stretch: 88%;
}

p {
  margin: 0 0 1em;
}

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

.section {
  padding: 88px 0;
}

.section--alt {
  background: var(--paper-alt);
}

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.section-head p {
  color: var(--muted);
}

/* ---------- Eyebrow: etiqueta estructural, no insignia decorativa ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--teal);
  clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
}

.hero-copy .eyebrow,
.page-hero .eyebrow {
  color: var(--teal);
}

/* ---------- Botones ---------- */
/* El chaflán vive en un ::before pintado detrás del contenido, para que el
   elemento real siga siendo una caja rectangular normal — así el foco de
   teclado no queda recortado por el clip-path. */
.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--heading);
  transition: color 0.25s ease;
  white-space: nowrap;
  isolation: isolate;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));
  background: var(--border);
  transition: background-color 0.25s ease, transform 0.3s var(--ease-fluid);
}

.btn:hover::before {
  transform: translateY(-2px);
}

.btn-primary {
  color: var(--ink);
}

.btn-primary::before {
  background: var(--teal);
}

.btn-primary:hover::before {
  background: #23e6d1;
}

.btn-ghost {
  color: var(--on-ink);
}

.btn-ghost::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--on-ink-border);
}

.btn-ghost:hover {
  color: var(--teal);
}

.btn-ghost:hover::before {
  box-shadow: inset 0 0 0 1.5px var(--teal);
}

/* En superficies claras, btn-ghost pasa a usar tinta oscura */
.section .btn-ghost,
.section--alt .btn-ghost,
.page-hero .btn-ghost {
  color: var(--heading);
}

.section .btn-ghost::before,
.section--alt .btn-ghost::before,
.page-hero .btn-ghost::before {
  box-shadow: inset 0 0 0 1.5px var(--border);
}

.section .btn-ghost:hover,
.section--alt .btn-ghost:hover,
.page-hero .btn-ghost:hover {
  color: var(--teal-deep);
}

.section .btn-ghost:hover::before,
.section--alt .btn-ghost:hover::before,
.page-hero .btn-ghost:hover::before {
  box-shadow: inset 0 0 0 1.5px var(--teal-deep);
}

.btn-whatsapp {
  color: #fff;
}

.btn-whatsapp::before {
  background: var(--whatsapp);
}

.btn-whatsapp:hover::before {
  background: var(--whatsapp-dark);
}

.btn-sm {
  padding: 10px 18px;
  font-size: 0.85rem;
}

.btn-block {
  width: 100%;
}

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: currentColor;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* ---------- Header ---------- */
.js-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 18, 51, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.js-site-header.is-scrolled {
  background: rgba(10, 18, 51, 0.96);
  border-bottom-color: var(--on-ink-border);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  font-stretch: 85%;
  color: var(--on-ink);
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-menu > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--on-ink-muted);
  transition: color 0.25s ease;
}

.nav-menu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  background: var(--teal);
  transform: translateX(-50%) scale(0);
  transition: transform 0.25s var(--ease-fluid);
}

.nav-menu > li > a:hover,
.nav-menu > li > a.is-current {
  color: var(--on-ink);
}

.nav-menu > li > a:hover::after,
.nav-menu > li > a.is-current::after {
  transform: translateX(-50%) scale(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--on-ink-border);
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--on-ink);
  position: relative;
  transition: transform 0.3s var(--ease-fluid), opacity 0.3s ease;
}

.nav-toggle span::before {
  position: absolute;
  top: -6px;
}

.nav-toggle span::after {
  position: absolute;
  top: 6px;
}

.nav-toggle.is-active span {
  background: transparent;
}

.nav-toggle.is-active span::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--on-ink);
}

.nav-toggle.is-active span::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--on-ink);
}

/* ---------- Malla de nodos: textura compartida por las superficies navy ---------- */
.hero,
.page-hero,
.cta-band,
.site-footer {
  position: relative;
  background-color: var(--ink);
}

.hero::before,
.page-hero::before,
.cta-band::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/mesh.svg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.55;
  pointer-events: none;
}

.page-hero::before {
  opacity: 0.32;
  background-position: center 30%;
}

.cta-band::before {
  opacity: 0.4;
  background-position: center 60%;
}

.site-footer::before {
  opacity: 0.22;
  background-position: center 80%;
}

.hero > .container,
.page-hero > .container,
.cta-band,
.site-footer > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Hero ---------- */
.hero {
  overflow: hidden;
  padding: 108px 0 112px;
}

.hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6%;
  width: 640px;
  height: 640px;
  max-width: 60vw;
  max-height: 60vw;
  transform: translateY(-50%);
  background-image: url("../img/mark-teal.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.08;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 56px;
  align-items: center;
}

.hero-grid > * {
  min-width: 0;
}

.hero-copy .eyebrow {
  animation: fadeUp 0.7s var(--ease-fluid) both;
}

.hero-copy h1 {
  color: var(--on-ink);
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  max-width: 16ch;
  animation: fadeUp 0.7s var(--ease-fluid) 0.08s both;
}

.hero-copy p {
  font-size: 1.08rem;
  color: var(--on-ink-muted);
  max-width: 46ch;
  animation: fadeUp 0.7s var(--ease-fluid) 0.16s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  animation: fadeUp 0.7s var(--ease-fluid) 0.24s both;
}

.hero-copy .cta-note {
  animation: fadeUp 0.7s var(--ease-fluid) 0.28s both;
}

.hero-stats {
  display: flex;
  gap: 0;
  margin-top: 48px;
  animation: fadeUp 0.7s var(--ease-fluid) 0.32s both;
}

.hero-stat {
  padding: 0 28px;
  border-left: 1px solid var(--on-ink-border);
}

.hero-stat:first-child {
  padding-left: 0;
  border-left: none;
}

.hero-stat strong {
  display: block;
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--on-ink);
}

.hero-stat span {
  font-size: 0.82rem;
  color: var(--on-ink-muted);
}

.hero-visual {
  position: relative;
  animation: fadeUp 0.8s var(--ease-fluid) 0.2s both;
}

/* Tarjeta de marcas del hero, tomo 2: en vez de una caja rectangular con
   una grilla de chips idénticos, las 6 marcas se leen como un pequeño grafo
   de nodos — el mismo lenguaje que la malla de fondo del hero (mesh.svg) y
   que las líneas del isotipo real (logo/STEITER LOGO SVG/1.svg), a escala
   de "constelación de marcas" en vez de textura decorativa. Los logos usan
   la misma técnica de máscara azul-señal que la marquesina de abajo (la
   referencia que sí le gustó al cliente), no la placa navy anterior. */
.hero-network {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 0.92;
  margin: 0 auto;
}

.hero-network-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-network-lines line {
  stroke: var(--signal);
  stroke-width: 0.6;
  stroke-opacity: 0.45;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1px;
  stroke-dashoffset: 1px;
  animation: lineDraw 1s var(--ease-fluid) forwards;
}

.hero-network-lines line:nth-of-type(1) { animation-delay: 0.05s; }
.hero-network-lines line:nth-of-type(2) { animation-delay: 0.15s; }
.hero-network-lines line:nth-of-type(3) { animation-delay: 0.25s; }
.hero-network-lines line:nth-of-type(4) { animation-delay: 0.35s; }
.hero-network-lines line:nth-of-type(5) { animation-delay: 0.45s; }
.hero-network-lines line:nth-of-type(6) { animation-delay: 0.55s; }
.hero-network-lines line:nth-of-type(7) { animation-delay: 0.65s; }
.hero-network-lines line:nth-of-type(8) { animation-delay: 0.75s; }
.hero-network-lines line:nth-of-type(9) { animation-delay: 0.8s; }

.hero-network-lines line.is-faint {
  stroke: var(--on-ink-border);
  stroke-opacity: 1;
}

.node-vertex {
  position: absolute;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: var(--on-ink-border);
  clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
}

.node-logo {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%);
  animation: nodeFloat 7s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.node-mark {
  display: block;
  width: 72%;
  height: 72%;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-fluid), background-color 0.3s ease;
}

.node-logo:hover .node-mark,
.node-logo:focus-visible .node-mark,
.node-logo:active .node-mark {
  background-color: var(--teal);
  opacity: 1;
  transform: scale(1.08);
}

.node-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(23, 208, 188, 0.5);
  animation: pulse 2.6s infinite;
  z-index: -1;
}

.hero-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 18, 51, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--on-ink-border);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  padding: 11px 15px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--on-ink);
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}

.hero-tag--a {
  top: -18px;
  left: -4px;
  animation-delay: 0.2s;
}

.hero-tag--b {
  bottom: 0;
  right: -8px;
  animation-delay: 1.6s;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(23, 208, 188, 0.55);
  animation: pulse 2.4s infinite;
}

/* ---------- Categorías / tarjetas ---------- */
.grid {
  display: grid;
  gap: 22px;
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Los productos destacados varían en cantidad (0 a muchos) — con grid fijo
   de 4 columnas, 1 o 2 productos dejan un hueco vacío grande. En flex, las
   tarjetas se quedan a su tamaño natural sin estirarse a rellenar la fila. */
#featured-products-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

#featured-products-grid .card {
  flex: 1 1 240px;
  max-width: 280px;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  position: relative;
  z-index: 0;
  padding: 28px;
  height: 100%;
  display: block;
  color: inherit;
  transition: color 0.3s ease, transform 0.3s var(--ease-fluid);
}

a.card:hover,
a.card:focus-visible {
  transform: translateY(-4px);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow 0.3s ease;
}

.card::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-fluid);
}

a.card:hover::before,
a.card:focus-visible::before {
  box-shadow: inset 0 0 0 1px var(--teal-deep);
}

a.card:hover::after,
a.card:focus-visible::after {
  transform: scaleX(1);
}

/* Placa sólida navy con el pictograma en teal, en vez de un contorno fino
   del mismo color en todas las tarjetas — a tamaño pequeño el contorno se
   perdía y todas las tarjetas de categoría se leían casi idénticas entre
   sí. La placa oscura da peso/contraste real y, en :hover, se invierte a
   teal sólido con el ícono en navy — el mismo lenguaje de "nodo" que ya
   usa .step-number, aplicado aquí como una señal de "esto es clickeable". */
.card-icon {
  position: relative;
  z-index: 0;
  width: 56px;
  height: 56px;
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: color 0.3s ease;
}

.card-icon .icon {
  width: 26px;
  height: 26px;
}

.card-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: var(--ink);
  z-index: -1;
  transition: background-color 0.3s ease;
}

a.card:hover .card-icon,
a.card:focus-visible .card-icon {
  color: var(--ink);
}

a.card:hover .card-icon::before,
a.card:focus-visible .card-icon::before {
  background: var(--teal);
}

.card h3 {
  font-size: 1.06rem;
}

.card p {
  color: var(--muted);
  font-size: 0.92rem;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--teal-deep);
  margin-top: 6px;
}

.card-link::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.25s var(--ease-fluid);
}

a.card:hover .card-link::after,
.card-link:hover::after {
  transform: rotate(-45deg) translate(2px, -2px);
}

/* ---------- Catálogo del inicio: bento de categorías ---------- */
/* Deliberadamente NO reusa .card/.card-icon (esas siguen sirviendo bien a
   producto/FAQ/nosotros/contacto). Rediseño real, no un ajuste del mismo
   patrón: tamaños asimétricos (bento) en vez de 8 celdas idénticas, el
   nombre de la categoría como protagonista tipográfico en vez del ícono,
   un acento de color que varía por tarjeta, y dos categorías "ancla"
   (Laptops, Audio y video) tratadas como paneles oscuros con el isotipo
   real de marca sangrando en la esquina — la misma pieza que ya vive en
   el header y en el ::after del hero, no un ícono de línea genérico. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "laptops laptops impresoras ups"
    "laptops laptops monitores proyectores"
    "audio audio accesorios marcas";
  gap: 18px;
}

.category-card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 176px;
  padding: 26px;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease-fluid);
}

.category-card:hover,
.category-card:focus-visible {
  transform: translateY(-4px);
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: polygon(var(--chamfer-lg) 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100%, 0 var(--chamfer-lg));
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border), inset 0 3px 0 0 var(--accent, var(--teal));
  transition: box-shadow 0.3s ease;
}

.category-card:hover::before,
.category-card:focus-visible::before {
  box-shadow: inset 0 0 0 1px var(--accent, var(--teal-deep)), inset 0 3px 0 0 var(--accent, var(--teal));
}

/* Nodo normal (no absoluto) con margin-bottom:auto: en un flex column con
   justify-content:flex-end, esto lo fija arriba y empuja el resto del
   contenido al fondo sin poder solaparse nunca, sin importar cuánto crezca
   el párrafo ni qué tan bajo sea el min-height de la tarjeta en móvil. */
.category-card-node {
  flex: none;
  width: 11px;
  height: 11px;
  margin-bottom: auto;
  background: var(--accent, var(--teal));
  clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
}

.category-card h3 {
  font-size: 1.32rem;
  margin-bottom: 6px;
}

.category-card p {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 34ch;
  margin-bottom: 10px;
}

.category-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--accent, var(--teal-deep));
}

.category-card-link::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.25s var(--ease-fluid);
}

.category-card:hover .category-card-link::after {
  transform: rotate(-45deg) translate(2px, -2px);
}

/* Las dos categorías ancla: panel oscuro con el isotipo real de marca
   sangrando en la esquina inferior, y tipografía a mayor escala — actúan
   como los elementos de mayor peso visual del bento. */
.category-card--feature {
  min-height: 240px;
  padding: 30px 32px;
}

.category-card--feature::before {
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--on-ink-border);
}

.category-card--feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(var(--chamfer-lg) 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100%, 0 var(--chamfer-lg));
  background-image: url("../img/mesh.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}

.category-card-mark {
  position: absolute;
  right: -10%;
  bottom: -14%;
  width: 58%;
  aspect-ratio: 1;
  background-image: url("../img/mark-teal.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.12;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-fluid);
}

.category-card--feature:hover .category-card-mark {
  opacity: 0.2;
  transform: translateY(-4px);
}

.category-card--feature h3 {
  color: var(--on-ink);
  font-size: 1.5rem;
}

.category-card--feature p {
  color: var(--on-ink-muted);
  max-width: 36ch;
}

.category-card--feature .category-card-link {
  color: var(--teal);
}

/* La octava celda no es una categoría de producto — es la puerta al hub
   de marcas, así que se trata como tal: bloque teal sólido, no otra
   variación tonal más del mismo blanco. */
.category-card--hub::before {
  background: var(--teal);
  box-shadow: inset 0 0 0 1px rgba(10, 18, 51, 0.12);
}

.category-card--hub:hover::before {
  box-shadow: inset 0 0 0 1px rgba(10, 18, 51, 0.24);
}

.category-card--hub .category-card-node {
  background: var(--ink);
}

.category-card--hub h3,
.category-card--hub .category-card-link {
  color: var(--ink);
}

.category-card--hub p {
  color: rgba(10, 18, 51, 0.7);
}

/* Slot de logo de marca dentro de una tarjeta: reemplaza el nombre en texto
   por el isotipo real (blanco) sobre una placa navy a chaflán, para que el
   logo tenga contraste sobre la tarjeta clara. El nombre sigue en el DOM
   como alt de la imagen dentro del encabezado real (h3), sin duplicarlo. */
.brand-card-logo {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 14px 18px;
  margin: 0 0 16px;
}

.brand-card-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: var(--ink);
}

/* Cada tarjeta de marcas.html trae un id único (#marca-dell, etc.) — se usa
   ese mismo id para pintar el plato con el color real de esa marca en vez
   del navy fijo, mismos hex que BRAND_COLORS en inc/catalog.php. */
#marca-dell .brand-card-logo::before { background: #0076CE; }
#marca-lenovo .brand-card-logo::before { background: #E2231A; }
#marca-hp .brand-card-logo::before { background: #0096D6; }
#marca-benq .brand-card-logo::before { background: #502E91; }
#marca-epson .brand-card-logo::before { background: #10218B; }
#marca-jabra .brand-card-logo::before { background: #FFD100; }
#marca-jbl .brand-card-logo::before { background: #FF6600; }
#marca-logitech .brand-card-logo::before { background: #00B8FC; }
#marca-apc .brand-card-logo::before { background: #CC0000; }
#marca-ricoh .brand-card-logo::before { background: #CF122E; }

/* Jabra es la única marca con un amarillo claro (#FFD100): el logo blanco
   original pierde legibilidad ahí, así que solo en esta tarjeta se oscurece
   a negro puro vía filtro (sin tocar el SVG, que sigue siendo blanco). */
#marca-jabra .brand-card-logo img {
  filter: brightness(0);
  opacity: 1;
}

.brand-card-logo img {
  width: auto;
  opacity: 0.94;
}

.brand-card-logo img.is-mark {
  height: 38px;
}

.brand-card-logo img.is-word {
  height: 22px;
}

/* ---------- Marcas ---------- */
.brands-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
}

.brand-tile {
  position: relative;
  z-index: 0;
  padding: 22px 12px;
  text-align: center;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

.brand-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow 0.3s ease;
}

.brand-tile:hover {
  color: var(--teal-deep);
}

.brand-tile:hover::before {
  box-shadow: inset 0 0 0 1px var(--teal-deep);
}

/* ---------- Slide de marcas (marquee) ---------- */
/* Sin placa/fondo de color: los logos flotan directo sobre el fondo de la
   página, como una fila simple de marcas (no una caja oscura con logos
   blancos encima). overflow:hidden + la máscara de degradado siguen aquí
   porque son lo que sostiene el loop infinito sin salto visible en los
   bordes — ya no recortan una placa, recortan la página misma. */
.brand-marquee {
  position: relative;
  overflow: hidden;
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.brand-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 56px;
  animation: brand-marquee-scroll 34s linear infinite;
}

/* Deliberadamente sin pausa en :hover — un loop continuo se lee como
   "vivo"; pausarlo al pasar el mouse se sentía como que la animación se
   trababa, no como una pausa a propósito. */

.brand-marquee-track a {
  display: flex;
  align-items: center;
  flex: none;
}

/* Los SVG de marca son formas planas en blanco sólido (pensadas para ir
   sobre el navy del logo). Aquí no hay navy detrás, así que en vez de un
   <img> se pinta un span vacío con el azul de marca como background-color
   y el SVG puesto de mask-image (mask-size:contain) — el span hereda la
   silueta del logo pero con nuestro color, sin tocar los archivos SVG. */
.brand-marquee-logo {
  display: block;
  flex: none;
  /* Reposo: casi-negro neutro (pedido del cliente) en vez del azul de la
     malla — cada marca reserva su propio color real para el hover. */
  background-color: var(--jet);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.82;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.3s ease;
}

/* Los logos de marca mezclan isotipos casi cuadrados (Dell, HP, JBL, Lenovo,
   Logitech, Epson) con logotipos de texto muy anchos (APC, BenQ, Jabra,
   Ricoh). A una sola altura fija, los logotipos de texto "pesan" 2-3 veces
   más que los isotipos — se normaliza por área/peso óptico en vez de altura.
   El ancho de cada is-word viene en su style="" inline (según el aspect
   ratio real de su SVG) porque, a diferencia de un <img>, un span con mask
   no calcula su propio ancho a partir de la imagen. */
.brand-marquee-logo.is-mark {
  height: 34px;
  width: 34px;
}

.brand-marquee-logo.is-word {
  height: 19px;
}

.brand-marquee-track a:hover .brand-marquee-logo,
.brand-marquee-track a:focus-visible .brand-marquee-logo {
  opacity: 1;
  transform: translateY(-2px);
}

/* Al pasar el mouse (o enfocar con teclado) un logo del slide, revela el
   color real de esa marca en vez del casi-negro de reposo — mismo color
   usado en el plato de la tarjeta de marcas.html y el banner de
   marcas/marca.php (ver BRAND_COLORS en inc/catalog.php). */
.brand-marquee-track a.is-dell:hover .brand-marquee-logo,
.brand-marquee-track a.is-dell:focus-visible .brand-marquee-logo { background-color: #0076CE; }
.brand-marquee-track a.is-lenovo:hover .brand-marquee-logo,
.brand-marquee-track a.is-lenovo:focus-visible .brand-marquee-logo { background-color: #E2231A; }
.brand-marquee-track a.is-hp:hover .brand-marquee-logo,
.brand-marquee-track a.is-hp:focus-visible .brand-marquee-logo { background-color: #0096D6; }
.brand-marquee-track a.is-benq:hover .brand-marquee-logo,
.brand-marquee-track a.is-benq:focus-visible .brand-marquee-logo { background-color: #502E91; }
.brand-marquee-track a.is-epson:hover .brand-marquee-logo,
.brand-marquee-track a.is-epson:focus-visible .brand-marquee-logo { background-color: #10218B; }
.brand-marquee-track a.is-jabra:hover .brand-marquee-logo,
.brand-marquee-track a.is-jabra:focus-visible .brand-marquee-logo { background-color: #FFD100; }
.brand-marquee-track a.is-jbl:hover .brand-marquee-logo,
.brand-marquee-track a.is-jbl:focus-visible .brand-marquee-logo { background-color: #FF6600; }
.brand-marquee-track a.is-logitech:hover .brand-marquee-logo,
.brand-marquee-track a.is-logitech:focus-visible .brand-marquee-logo { background-color: #00B8FC; }
.brand-marquee-track a.is-apc:hover .brand-marquee-logo,
.brand-marquee-track a.is-apc:focus-visible .brand-marquee-logo { background-color: #CC0000; }
.brand-marquee-track a.is-ricoh:hover .brand-marquee-logo,
.brand-marquee-track a.is-ricoh:focus-visible .brand-marquee-logo { background-color: #CF122E; }

@keyframes brand-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track {
    animation: none;
  }
}

/* ---------- Franja de confianza ---------- */
/* Hereda el mismo lenguaje de "fila con separadores" que .hero-stats, en vez
   de inventar una cuarta variante de tarjeta. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 0;
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 250px;
  padding: 0 28px;
  border-left: 1px solid var(--border);
}

.trust-item:first-child {
  padding-left: 0;
  border-left: none;
}

.trust-item .trust-icon {
  position: relative;
  z-index: 0;
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-item .trust-icon .icon {
  width: 20px;
  height: 20px;
}

.trust-item .trust-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: inset 0 0 0 1.5px var(--border);
}

.trust-item h3 {
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.trust-item p {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}

/* Variante compacta para el footer (sobre --ink) */
.trust-strip--footer {
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--on-ink-border);
}

.trust-strip--footer .trust-item {
  border-left-color: var(--on-ink-border);
}

.trust-strip--footer .trust-icon {
  color: var(--teal);
}

.trust-strip--footer .trust-icon::before {
  box-shadow: inset 0 0 0 1.5px var(--on-ink-border);
}

.trust-strip--footer h3 {
  color: var(--on-ink);
  font-size: 0.92rem;
}

.trust-strip--footer p {
  color: var(--on-ink-muted);
  font-size: 0.84rem;
}

/* ---------- Nota de confianza bajo un CTA ---------- */
.cta-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--on-ink-muted);
  margin: 14px 0 0;
}

.cta-note .dot {
  animation: pulse 2.4s infinite;
}

.section .cta-note,
.section--alt .cta-note {
  color: var(--muted);
}

/* ---------- Franja de proceso / pasos ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.step {
  position: relative;
}

.step-number {
  position: relative;
  z-index: 0;
  width: 42px;
  height: 42px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 16px;
}

.step-number::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background: var(--teal);
}

/* ---------- CTA banda ---------- */
.cta-band {
  clip-path: polygon(var(--chamfer-lg) 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100%, 0 var(--chamfer-lg));
  padding: 56px;
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-band h2 {
  color: var(--on-ink);
  margin-bottom: 8px;
}

.cta-band p {
  color: var(--on-ink-muted);
  margin: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  color: var(--on-ink-muted);
  padding: 64px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--on-ink-border);
}

.footer-brand .brand {
  color: var(--on-ink);
}

.footer-brand p {
  color: var(--on-ink-muted);
  font-size: 0.92rem;
  max-width: 32ch;
}

.footer-col h4 {
  color: var(--on-ink);
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col a {
  color: var(--on-ink-muted);
  font-size: 0.92rem;
  transition: color 0.25s ease;
}

.footer-col a:hover {
  color: var(--teal);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.82rem;
}

.social-row {
  display: flex;
  gap: 10px;
}

.social-row a {
  position: relative;
  z-index: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-row a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: inset 0 0 0 1px var(--on-ink-border);
  transition: background-color 0.25s ease;
}

.social-row a:hover::before {
  background: var(--ink-3);
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--whatsapp);
  color: #fff;
  padding: 14px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(6, 10, 28, 0.28);
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 0.3s var(--ease-fluid), box-shadow 0.3s var(--ease-fluid), background-color 0.25s ease;
}

.whatsapp-float:hover {
  background: var(--whatsapp-dark);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(6, 10, 28, 0.34);
}

.whatsapp-float .icon {
  width: 22px;
  height: 22px;
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 92px;
  width: 42px;
  height: 42px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-fluid);
  z-index: 200;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--on-ink-muted);
  padding: 20px 0 0;
}

.breadcrumbs a {
  color: var(--on-ink-muted);
}

.breadcrumbs a:hover {
  color: var(--teal);
}

/* ---------- Page hero (páginas internas) ---------- */
.page-hero {
  padding: 52px 0 60px;
}

.page-hero h1 {
  color: var(--on-ink);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  max-width: 22ch;
}

.page-hero p {
  color: var(--on-ink-muted);
  max-width: 60ch;
}

/* Banner de marca en marcas/marca.php: el color de fondo es dinámico por
   marca (inline, viene de BRAND_COLORS en inc/catalog.php), pero el tamaño
   vive aquí como clase para poder achicarlo en móvil — un logo ancho como
   el de Logitech ("logi") a max-width:75% se ve enorme en una pantalla de
   ~375px de ancho. */
.brand-hero-plate {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--container);
  margin: 0 auto 40px;
  padding: 40px 24px;
  clip-path: polygon(var(--chamfer-lg) 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100%, 0 var(--chamfer-lg));
}

.brand-hero-logo {
  display: block;
  width: 480px;
  max-width: 75%;
  height: 150px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media (max-width: 640px) {
  .brand-hero-plate {
    /* margin:auto no encoge la caja por debajo de --container — en
       móvil hay que angostarla a mano con margen lateral explícito para
       que quede al mismo ancho que el botón de WhatsApp de abajo (que
       está inset por el padding de .container). */
    margin: 0 24px 28px;
    padding: 28px 20px;
  }

  .brand-hero-logo {
    width: 220px;
    max-width: 60%;
    height: 84px;
  }
}

/* ---------- Mapa embebido ---------- */
.map-frame {
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(var(--chamfer-lg) 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100%, 0 var(--chamfer-lg));
}

/* ---------- Utilidades ---------- */
.text-center {
  text-align: center;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ---------- Animación de aparición ---------- */
/* Reservada para un único momento por carga (encabezado de sección), no para
   cada tarjeta — el gancho de IntersectionObserver en main.js sigue igual. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-fluid), transform 0.6s var(--ease-fluid);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ---------- Keyframes ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes nodeFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 6px)); }
}

@keyframes lineDraw {
  from { stroke-dashoffset: 1px; }
  to { stroke-dashoffset: 0; }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(23, 208, 188, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(23, 208, 188, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 208, 188, 0); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero::after {
    opacity: 0.05;
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "laptops laptops"
      "impresoras ups"
      "monitores proyectores"
      "audio audio"
      "accesorios marcas";
  }

  .category-card--feature {
    min-height: 200px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  /* El desenfoque del header crea un "containing block" para descendientes
     con position:fixed (como .nav-menu), lo que rompe el panel de navegación
     de pantalla completa en móvil — se desactiva solo en este rango. */
  .js-site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--ink);
  }

  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    z-index: 150;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ink);
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 4px;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-fluid);
    overflow-y: auto;
  }

  .nav-menu.is-open {
    transform: translateX(0);
  }

  .nav-menu > li > a {
    width: 100%;
    padding: 14px 16px;
  }

  .nav-menu > li > a::after {
    left: 6px;
    bottom: 50%;
    transform: translateY(50%) scale(0);
  }

  .nav-menu > li > a:hover::after,
  .nav-menu > li > a.is-current::after {
    transform: translateY(50%) scale(1);
  }

  .header-actions .btn-primary {
    display: none;
  }

  .grid-3, .grid-2 {
    grid-template-columns: 1fr;
  }

  /* Tarjetas de ícono+texto (p. ej. "Nosotros" y los métodos de contacto):
     apiladas verticalmente (ícono arriba, texto abajo) cada una se vuelve
     muy alta y 3 en fila terminan ocupando más que una pantalla completa
     en teléfono. En columna única, ícono a la izquierda y el resto del
     contenido (título, texto, enlace/botón) apilado a la derecha.
     Grid en vez de flex: el título, párrafo y CTA son hermanos sueltos en
     el HTML (no hay un div que los agrupe), y con flex quedarían todos
     en una sola fila — grid los manda a la columna 2 sin tocar el HTML. */
  .icon-cards .card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 20px 22px;
  }

  .icon-cards .card-icon {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 40px;
    height: 40px;
    margin-bottom: 0;
  }

  .icon-cards .card-icon .icon {
    width: 18px;
    height: 18px;
  }

  .icon-cards .card h3,
  .icon-cards .card > p,
  .icon-cards .card > a,
  .icon-cards .card > span {
    grid-column: 2;
  }

  .icon-cards .card::after {
    left: 22px;
    right: 22px;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .trust-item {
    flex: 1 1 100%;
    padding: 0;
    border-left: none;
    padding-top: 18px;
    border-top: 1px solid var(--border);
  }

  .trust-strip--footer .trust-item {
    border-top-color: var(--on-ink-border);
  }

  .trust-item:first-child {
    padding-top: 0;
    border-top: none;
  }

  .cta-band {
    flex-direction: column;
    text-align: center;
    padding: 40px 24px;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 64px 0;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .category-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "laptops"
      "impresoras"
      "ups"
      "monitores"
      "proyectores"
      "audio"
      "accesorios"
      "marcas";
  }

  .category-card--feature {
    min-height: 200px;
  }

  .hero {
    padding: 44px 0 36px;
  }

  .hero::after {
    display: none;
  }

  /* La constelación de marcas del hero (.hero-network) es puramente
     decorativa y repite las mismas marcas que ya aparecen en la marquesina
     más abajo en esta misma página — en desktop suma contexto junto al
     mensaje principal, pero apilada debajo en una sola columna en teléfono
     agregaba mucho scroll antes de llegar a nada nuevo, empujando los
     botones y las cifras de confianza fuera del viewport inicial. Se oculta
     aquí para que el hero de teléfono priorice mensaje + CTA + cifras. */
  .hero-visual {
    display: none;
  }

  .hero-copy h1 {
    max-width: none;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* Grid de 3 columnas en vez de flex-wrap: con flex-wrap, el tercer dato
     ("100% cotización por WhatsApp") no cabía en la fila y se iba a una
     segunda línea completa, añadiendo una fila entera solo por esa tarjeta.
     En grid siempre caben los 3 en una sola fila (se angostan, no se
     apilan), lo que evita que las cifras terminen cortadas por el borde
     de la pantalla. */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 28px;
  }

  .hero-stat {
    padding: 0 10px;
  }

  .hero-stat strong {
    font-size: 1.3rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .whatsapp-float span {
    display: none;
  }

  .whatsapp-float {
    padding: 14px;
  }
}

/* ---------- Teléfonos angostos (~360-480px) ---------- */
/* Auditoría general: en este rango, paddings y tamaños pensados para
   escritorio/tablet se sienten desproporcionados frente al viewport
   (secciones que "ocupan toda la pantalla", tarjetas con demasiado aire).
   Se ajustan solo tamaños/espaciados — ninguna reestructuración de layout. */
@media (max-width: 480px) {
  .container {
    padding: 0 18px;
  }

  .section {
    padding: 48px 0;
  }

  .section-head {
    margin-bottom: 32px;
  }

  .page-hero {
    padding: 40px 0 44px;
  }

  .grid {
    gap: 14px;
  }

  .card {
    padding: 20px;
  }

  .card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
  }

  .category-grid {
    gap: 14px;
  }

  .category-card {
    padding: 20px;
    min-height: 150px;
  }

  .category-card--feature {
    min-height: 190px;
    padding: 24px;
  }

  .category-card h3 {
    font-size: 1.16rem;
  }

  .category-card--feature h3 {
    font-size: 1.3rem;
  }

  .card-icon .icon {
    width: 20px;
    height: 20px;
  }

  .cta-band {
    padding: 32px 20px;
  }

  .brand-marquee {
    padding: 18px 0;
  }

  .brand-marquee-track {
    gap: 40px;
  }
}