/* ============================================================
   RUCEG — Sistema de diseño "COMERCIO VIVO"
   Paleta del logo oficial · Archivo + Inter
   ============================================================ */

:root {
  /* ---- Superficies navy ---- */
  --navy: #013084;
  --navy-profundo: #002A7B;
  --navy-noche: #001F5C;
  --navy-vivo: #0B45A8;
  --navy-050: #EAF1FB;
  --navy-025: #F4F8FD;

  /* ---- Claros y texto ---- */
  --nieve: #F6F8FB;
  --blanco: #FFFFFF;
  --tinta: #0C1B2E;
  --gris-texto: #5A6A80;
  --texto-sobre-navy: rgba(255, 255, 255, .82);
  --texto-sobre-navy-tenue: rgba(255, 255, 255, .72);

  /* ---- Bordes ---- */
  --hairline: #E6EBF2;
  --borde-fuerte: #7C8DA6;
  --hairline-clara: rgba(255, 255, 255, .18);

  /* ---- Acento ---- */
  --naranja: #FD7500;
  --naranja-hover: #E06400;
  --naranja-texto: #9A4A00;
  --ambar: #FDA900;
  --ambar-pastilla: #FFF4E3;
  --ambar-texto: #9A5D00;
  --cian: #34C3FD;
  --cian-texto: #0B6E9C;
  --verde: #96DC34;
  --verde-texto: #1B7A27;
  --rojo: #EA3C34;
  --rojo-solido: #C0261F;
  --rojo-error: #B3261E;

  /* ---- Categorías: alias, NO copias.
     Una sola fuente de verdad por color; cambiar el token de arriba
     cambia la categoría entera. ---- */
  --cat-limpieza: var(--cian-texto);
  --cat-papeleria: var(--ambar-texto);
  --cat-uniformes: var(--navy);
  --cat-desechables: var(--verde-texto);
  --cat-limpieza-viva: var(--cian);
  --cat-papeleria-viva: var(--ambar);
  --cat-uniformes-viva: var(--navy-vivo);
  --cat-desechables-viva: var(--verde);

  /* ---- Gradientes y sombras (referencian tokens, no repiten hex) ---- */
  --grad-navy: linear-gradient(165deg, var(--navy) 0%, var(--navy-profundo) 55%, var(--navy-noche) 100%);
  --grad-orbe: radial-gradient(circle at 50% 42%, var(--navy-vivo) 0%, var(--navy) 46%, rgba(0, 31, 92, 0) 72%);
  --grad-naranja: linear-gradient(100deg, var(--ambar) 0%, var(--naranja) 62%);
  --glow-cian: radial-gradient(60% 60% at 50% 45%, rgba(52, 195, 253, .38), rgba(52, 195, 253, 0) 70%);
  --sombra-contacto: radial-gradient(50% 50% at 50% 50%, rgba(0, 10, 40, .34), rgba(0, 10, 40, 0) 70%);

  --sombra-1: 0 1px 2px rgba(0, 31, 92, .06), 0 2px 8px rgba(0, 31, 92, .05);
  --sombra-2: 0 4px 12px rgba(0, 31, 92, .08), 0 12px 32px rgba(0, 31, 92, .10);
  --sombra-3: 0 18px 48px rgba(0, 31, 92, .18);
  --sombra-naranja: 0 6px 18px rgba(253, 117, 0, .35);

  /* ---- Radios ---- */
  --r-card: 16px;
  --r-btn: 999px;
  --r-media: 12px;
  --r-input: 10px;

  /* ---- Layout ---- */
  --container: 1200px;
  --pad-seccion: clamp(72px, 9vw, 120px);
  --nav-h: 76px;
  --nav-h-movil: 64px;

  /* ---- Tipografía ---- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-display: clamp(2.75rem, 6.5vw, 5rem);
  --fs-h2: clamp(2rem, 3.6vw, 3rem);
  --fs-h3: 1.375rem;
  --fs-lede: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  --fs-precio: clamp(1.375rem, 1.8vw, 1.75rem);
  --fs-stat: clamp(2.25rem, 3.4vw, 2.875rem);

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 240ms;
  --dur-rapida: 160ms;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nieve);
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--tinta);
}

h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -.02em;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
}

p { margin: 0 0 1em; }

a {
  color: var(--navy);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease);
}

img, svg { max-width: 100%; height: auto; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Cifras siempre tabulares.
   Los elementos que sólo existen en la página de catálogo
   (.producto__precio, .chip-conteo) los declara catalogo.css. */
.num,
.stat__cifra,
.precio,
.cat-card__conteo,
.paso__num,
.tabla-precios td:last-child {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--blanco);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-input) 0;
  font-family: var(--font-body);
  font-weight: 700;
}
/* Aterriza sobre el hero navy en index (mismo color que su fondo) y sobre
   el nav blanco en catálogo: el anillo blanco inset lo separa de ambos. */
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--blanco);
  outline-offset: -2px;
}

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Foco sobre superficies navy: outline blanco */
.hero :focus-visible,
.cta-banda :focus-visible,
.footer :focus-visible,
.nav--transparente:not(.is-scrolled) :focus-visible {
  outline-color: var(--blanco);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

.seccion { padding-block: var(--pad-seccion); }

/* Ritmo de fondos alternados en index.
   El border-top del mismo color repone el aire de las secciones
   que llevan style="padding-top:0" en el markup (que no se toca). */
#muestra,
#nosotros {
  background: var(--navy-025);
  border-top: clamp(48px, 6vw, 80px) solid var(--navy-025);
}
#cotizamos {
  border-top: clamp(48px, 6vw, 80px) solid var(--nieve);
}

/* Eyebrow con punto ámbar */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--naranja-texto);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ambar);
  flex: none;
}
.hero .eyebrow,
.cta-banda .eyebrow,
.footer .eyebrow { color: var(--cian); }

/* Folio de sección: sólido, discreto */
.folio {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-micro);
  line-height: 1;
  color: var(--gris-texto);
  letter-spacing: .08em;
  user-select: none;
}
/* Sobre el hero navy el gris de texto sólo daría 2.4:1: el folio 01/06
   conmuta al tono claro (6.85:1) en vez de desaparecer y dejar la serie
   de folios empezando en el 02. */
.hero__folio .folio { color: var(--texto-sobre-navy-tenue); }

/* Encabezado de sección: hairline + tramo naranja */
.seccion-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 40px;
}
.seccion-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--naranja);
}
.seccion-head h2 { margin: 8px 0 0; }
.seccion-head .folio { flex: none; padding-bottom: 4px; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 16px 30px;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.1;
  letter-spacing: .005em;
  border: 2px solid transparent;
  transition: background-color var(--dur-rapida) var(--ease),
              background-image var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease),
              border-color var(--dur-rapida) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }

/* CTA primario del sistema */
.btn--naranja,
.hero__ctas .btn--navy,
.nav__cta {
  background-image: var(--grad-naranja);
  background-color: var(--naranja);
  color: var(--tinta);
  border-color: transparent;
  box-shadow: var(--sombra-naranja);
}
.btn--naranja:hover,
.hero__ctas .btn--navy:hover,
.nav__cta:hover {
  background-image: none;
  background-color: var(--naranja-hover);
  color: var(--tinta);
  box-shadow: 0 10px 26px rgba(253, 117, 0, .45);
}

/* Secundario sobre claro */
.btn--navy {
  background: var(--navy);
  color: var(--blanco);
  box-shadow: var(--sombra-1);
}
.btn--navy:hover {
  background: var(--navy-noche);
  color: var(--blanco);
  box-shadow: var(--sombra-2);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--borde-fuerte);
}
.btn--ghost:hover { background: var(--navy-050); color: var(--navy); }

/* Ghost sobre navy */
.hero .btn--ghost,
.cta-banda .btn--ghost {
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .5);
}
.hero .btn--ghost:hover,
.cta-banda .btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
  color: var(--blanco);
}

.btn--claro {
  background: var(--blanco);
  color: var(--navy);
  box-shadow: var(--sombra-1);
}
.btn--claro:hover {
  background: var(--navy-050);
  color: var(--navy);
  box-shadow: var(--sombra-2);
}

/* ============================================================
   CHIPS DE CATEGORÍA
   ============================================================ */
.chip-cat {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 11px;
  border-radius: var(--r-btn);
  background: var(--blanco);
  border: 1px solid currentColor;
  box-shadow: var(--sombra-1);
}
/* El borde es currentColor a plena tinta (5.33:1 – 11.95:1 sobre blanco):
   diluirlo al 30% lo dejaba en ~1.5:1 y el chip perdía su silueta justo
   donde más la necesita, encima de una foto de producto. */
.chip-cat--limpieza    { color: var(--cat-limpieza); }
.chip-cat--papeleria   { color: var(--cat-papeleria); }
.chip-cat--uniformes   { color: var(--cat-uniformes); }
.chip-cat--desechables { color: var(--cat-desechables); }

/* .chip-conteo vive sólo dentro de .filtro-chip (catalogo.html) y lo
   define catalogo.css. Aquí no se duplica: dos definiciones divergentes
   hacían que editar ésta no tuviera ningún efecto visible. */

/* ============================================================
   ICONOS
   ============================================================ */
.ico {
  width: 20px; height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanco);
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: transparent;
  box-shadow: var(--sombra-1);
}

/* Sólo en index: el nav flota sobre el hero navy */
.nav--transparente { margin-bottom: calc(var(--nav-h) * -1); }
.nav--transparente:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.nav--transparente:not(.is-scrolled) .wordmark__nombre,
.nav--transparente:not(.is-scrolled) .nav__link,
.nav--transparente:not(.is-scrolled) .nav__toggle { color: var(--blanco); }
.nav--transparente:not(.is-scrolled) .wordmark__sub { color: var(--texto-sobre-navy-tenue); }
.nav--transparente:not(.is-scrolled) .nav__toggle { border-color: rgba(255, 255, 255, .45); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
}

/* ---- Lockup: orbe + wordmark ---- */
.wordmark {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  line-height: 1.1;
}
/* Degradación si el HTML aún no trae .wordmark__texto */
.wordmark:not(:has(.wordmark__texto)) { flex-direction: column; align-items: flex-start; gap: 0; }

.wordmark__orbe {
  width: 40px;
  height: 33px;
  flex: none;
  display: block;
  object-fit: contain;
}
.wordmark__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wordmark__nombre {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--navy);
}
.wordmark__sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-texto);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--tinta);
  padding-block: 8px;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Página actual: el estado no puede depender sólo del color (el naranja
   de acento da 2.72:1 sobre el nav blanco). Sube de peso y la barra usa
   el naranja de TEXTO, que sí llega a 6.26:1. */
.nav__link[aria-current="page"] { font-weight: 700; }
.nav__link[aria-current="page"]::after { background: var(--naranja-texto); }

.nav__cta {
  padding: 11px 22px;
  min-height: 44px;
  font-size: 14px;
}

/* Hamburguesa */
.nav__toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-input);
  padding: 9px;
  min-height: 44px;
  min-width: 44px;
  color: var(--tinta);
}
.nav__toggle svg { display: block; width: 22px; height: 22px; }
.nav__toggle .ico-cerrar { display: none; }
.nav__toggle[aria-expanded="true"] .ico-abrir { display: none; }
.nav__toggle[aria-expanded="true"] .ico-cerrar { display: block; }

@media (max-width: 860px) {
  :root { --nav-h: var(--nav-h-movil); }
  .nav__inner { height: var(--nav-h-movil); }
  .nav--transparente { margin-bottom: calc(var(--nav-h-movil) * -1); }
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--blanco);
    box-shadow: var(--sombra-3);
    border-radius: 0 0 var(--r-card) var(--r-card);
    padding: 8px 0 24px;
    display: none;
  }
  .nav__menu.is-open { display: block; }
  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline: clamp(20px, 4vw, 32px);
  }
  .nav__links li { border-bottom: 1px solid var(--hairline); }
  .nav__links li:last-child { border-bottom: 0; padding-top: 16px; }
  .nav__link { display: block; padding: 14px 0; color: var(--tinta); }
  .nav--transparente:not(.is-scrolled) .nav__menu .nav__link { color: var(--tinta); }
  /* El panel abierto es blanco aunque el nav sea transparente: el outline
     blanco de la excepción "sobre navy" sería invisible aquí. */
  .nav--transparente:not(.is-scrolled) .nav__menu :focus-visible { outline-color: var(--navy); }
  .nav__cta { width: 100%; }
}
@media (min-width: 861px) {
  .nav__menu { display: block !important; }
}

/* ============================================================
   HERO — banda navy, el logo es la imagen
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-navy);
  color: var(--blanco);
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + clamp(56px, 8vw, 104px)) clamp(72px, 9vw, 116px);
}

/* Capa 2: foco de luz detrás del orbe (estructural, no decorativo) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grad-orbe);
  background-repeat: no-repeat;
  background-size: 72% 90%;
  background-position: 68% 30%;
  pointer-events: none;
  z-index: 0;
}
/* Capa 3: retícula de meridianos con desvanecido radial */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, .055) 0 1px,
    transparent 1px 48px
  );
  -webkit-mask-image: radial-gradient(78% 78% at 52% 46%, black 35%, transparent 100%);
  mask-image: radial-gradient(78% 78% at 52% 46%, black 35%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Capa 4: swoosh gigante (uso 1 de 2 del motivo).
   El logo ya trae su propia flecha naranja muy marcada: repetirla a escala de
   página en opacidad alta la duplica y además cruza el titular y el CTA. Aquí
   queda como gesto de fondo, y se desvanece sobre la columna de texto. */
.hero__swoosh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 68%);
  mask-image: linear-gradient(100deg, transparent 30%, #000 68%);
}

.hero__grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero__folio {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.hero h1 {
  color: var(--blanco);
  max-width: 15ch;
  margin: 18px 0 20px;
}
.hero h1 .resalte { color: var(--ambar); }

.hero__lede {
  font-size: var(--fs-lede);
  color: var(--texto-sobre-navy);
  max-width: 46ch;
  margin-bottom: 32px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 32px);
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-clara);
}
.hero__stats .stat + .stat {
  border-left: 1px solid var(--hairline-clara);
  padding-left: clamp(16px, 3vw, 32px);
}
.stat__cifra {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: var(--fs-stat);
  color: var(--ambar);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.stat__cifra .stat__sufijo {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-sobre-navy-tenue);
}
.stat__nombre {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-sobre-navy-tenue);
  margin-top: 6px;
}

/* ---- Lado derecho: el orbe ---- */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
}

.hero__reticula {
  position: absolute;
  inset: -8% -12%;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, .05) 0 1px,
    transparent 1px 48px
  );
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, black 20%, transparent 100%);
  mask-image: radial-gradient(60% 60% at 50% 50%, black 20%, transparent 100%);
  pointer-events: none;
}

.hero__orbe {
  position: relative;
  width: clamp(200px, 28vw, 340px);
  aspect-ratio: 790 / 645;
  display: grid;
  place-items: center;
}
/* Halo cian: convierte el rim-light horneado en luz de entorno */
.hero__orbe::before {
  content: "";
  position: absolute;
  inset: -22%;
  background: var(--glow-cian);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}
/* Sombra de contacto: el globo se apoya en la página */
.hero__orbe::after {
  content: "";
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 14px;
  background: var(--sombra-contacto);
  pointer-events: none;
  z-index: 1;
}

.hero__orbe picture { display: contents; }

.hero__orbe-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 10, 40, .5));
}

.hero__orbe-anillo {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  /* La regla base `img, svg { max-width: 100% }` recortaba los dos anillos
     al ancho del orbe mientras conservaban su alto: salían aplastados,
     del mismo diámetro y desplazados por sus offsets. */
  max-width: none;
  max-height: none;
}
.hero__orbe-anillo circle {
  fill: none;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 1;
  stroke-dasharray: 2 10;
}
/* Por modificador, no por posición: con :nth-of-type el nombre de la clase
   mentía (el marcado como --externo recibía el diámetro pequeño) y bastaba
   insertar un elemento para reordenarlo todo en silencio.
   Centrado por offsets, no por transform: así el bloque de
   prefers-reduced-motion puede anular transform sin descentrarlos. */
.hero__orbe-anillo--interno {
  width: 118%; height: 118%;
  top: -9%; left: -9%;
  animation: orbe-girar 90s linear infinite;
}
.hero__orbe-anillo--externo {
  width: 142%; height: 142%;
  top: -21%; left: -21%;
  animation: orbe-girar 130s linear infinite reverse;
}
@keyframes orbe-girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Pastillas flotantes ---- */
.hero__pastilla {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--blanco);
  border-radius: var(--r-btn);
  box-shadow: var(--sombra-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  color: var(--tinta);
}
.hero__pastilla .ico { width: 18px; height: 18px; }

/* El COLOR va por modificador: atado a :nth-of-type, insertar o reordenar
   un <span> dentro de .hero__orbe rompía en silencio la pareja
   icono ↔ color. La POSICIÓN y el desfase de la deriva sí son de orden. */
.hero__pastilla--limpieza    { color: var(--cat-limpieza); }
.hero__pastilla--papeleria   { color: var(--cat-papeleria); }
.hero__pastilla--uniformes   { color: var(--cat-uniformes); }
.hero__pastilla--desechables { color: var(--cat-desechables); }

.hero__pastilla:nth-of-type(1) {
  top: -5%; left: 4%;
  animation: pastilla-deriva 7s ease-in-out infinite;
}
.hero__pastilla:nth-of-type(2) {
  top: 34%; right: -14%;
  animation: pastilla-deriva 8s ease-in-out infinite .6s;
}
.hero__pastilla:nth-of-type(3) {
  bottom: 2%; left: 0;
  animation: pastilla-deriva 6.5s ease-in-out infinite 1.2s;
}
.hero__pastilla:nth-of-type(4) {
  top: 18%; left: -16%;
  animation: pastilla-deriva 9s ease-in-out infinite .3s;
}
@keyframes pastilla-deriva {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}

/* ---- Divisor en arco (uso 2 de 2 del motivo) ---- */
.swoosh-divider {
  display: block;
  width: 100%;
  height: 72px;
  margin-bottom: -1px;
}
.hero > .swoosh-divider,
.cta-banda > .swoosh-divider {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  z-index: 4;
}
/* Cada arco toma el color de la superficie que hay JUSTO debajo:
   .disclaimer-banda (navy-050) tras el hero, la sección clara tras la CTA.
   Los divisores viven dentro de la <section>, nunca como hermanos: los
   selectores `+` no casaban con nada y se retiran. */
.hero > .swoosh-divider path { fill: var(--navy-050); }
.cta-banda > .swoosh-divider path { fill: var(--nieve); }

/* 960px: el hero pasa a una columna. Es también la expectativa que verifica
   _tests/build.test.mjs, que es la única puerta automática del repo. */
@media (max-width: 960px) {
  .hero {
    min-height: 0;
    display: block;
    padding-block: calc(var(--nav-h-movil) + clamp(40px, 8vw, 72px)) clamp(56px, 9vw, 88px);
  }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; margin-bottom: 28px; }
  .hero h1 { max-width: none; }
}

@media (max-width: 720px) {
  .hero__swoosh { opacity: .12; }
  .swoosh-divider { height: 40px; }
  .hero__ctas .btn { width: 100%; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .hero__stats .stat + .stat { border-left: 0; padding-left: 0; }
  .hero__stats .stat:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .hero__pastilla:nth-of-type(3),
  .hero__pastilla:nth-of-type(4) { display: none; }
  .hero__pastilla:nth-of-type(2) { right: -4%; }
}

/* ============================================================
   BANDA DISCLAIMER — isla sobria
   ============================================================ */
.disclaimer-banda {
  background: var(--navy-050);
  border: 0;
}
.disclaimer-banda__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
  font-size: var(--fs-small);
  color: var(--tinta);
}
.disclaimer-banda__inner .ico { color: var(--naranja-texto); }
.disclaimer-banda__inner strong { font-weight: 700; }
.disclaimer-banda__inner p {
  border-left: 3px solid var(--ambar);
  border-radius: 0 var(--r-media) var(--r-media) 0;
  padding-left: 14px;
}

/* ============================================================
   02 · CATEGORÍAS
   ============================================================ */
.cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--blanco);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 24px;
  overflow: hidden;
  box-shadow: var(--sombra-1);
  color: var(--tinta);
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Barra de categoría: el tono OSCURO (5.33:1 – 11.95:1 sobre blanco) y a
   plena opacidad desde el reposo. Con el tono vivo al 55% el verde caía a
   ~1.2:1 y en táctil —donde no hay hover— la card se quedaba sin su único
   identificador cromático. */
.cat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--cat-texto, var(--navy));
}
.cat-card:hover,
.cat-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  border-color: color-mix(in srgb, var(--borde-fuerte) 46%, var(--blanco));
  color: var(--tinta);
}

/* Pareja de variables por categoría.
   Aquí SÓLO las .cat-card, que es lo único que existe en index.html.
   Los modificadores .producto--* los declara catalogo.css, que es el
   dueño único de ese componente (lo emite assets/js/catalogo.js). */
.cat-card--limpieza    { --cat-viva: var(--cat-limpieza-viva);    --cat-texto: var(--cat-limpieza); }
.cat-card--papeleria   { --cat-viva: var(--cat-papeleria-viva);   --cat-texto: var(--cat-papeleria); }
.cat-card--uniformes   { --cat-viva: var(--cat-uniformes-viva);   --cat-texto: var(--cat-uniformes); }
.cat-card--desechables { --cat-viva: var(--cat-desechables-viva); --cat-texto: var(--cat-desechables); }

.cat-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* El disco se construye sobre el tono OSCURO de la categoría: el icono es
   blanco de 2px y sobre los tonos vivos (cian, ámbar, verde) se quedaba en
   1.67–2.72:1, por debajo del 3:1 que exige un objeto gráfico. Así da
   5.33:1 – 11.95:1. El tono vivo sobrevive como filo de luz superior, que
   es donde no tiene que contrastar con nada. */
.cat-card__medallon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blanco);
  background: linear-gradient(150deg,
    var(--cat-texto, var(--navy)),
    color-mix(in srgb, var(--cat-texto, var(--navy)) 62%, var(--navy)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cat-viva, var(--navy-vivo)) 70%, transparent),
              var(--sombra-1);
}
.cat-card__medallon .ico {
  width: 26px; height: 26px;
  stroke-width: 2;
  transition: transform var(--dur) var(--ease);
}
.cat-card:hover .cat-card__medallon .ico { transform: scale(1.06); }

/* Texto real, no un borde: --hairline daba 1.20:1 sobre la card blanca.
   Mismo token que el resto de folios del sistema (5.51:1). */
.cat-card__folio {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gris-texto);
}

.cat-card h3 { margin: 0; }

.cat-card__conteo {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gris-texto);
  margin: 0;
}
.cat-card__conteo strong {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 22px;
  color: var(--cat-texto, var(--navy));
  margin-right: 4px;
}

.cat-card__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cat-texto, var(--navy));
}
.cat-card__flecha {
  width: 18px; height: 18px;
  transition: transform var(--dur) var(--ease);
}
.cat-card:hover .cat-card__flecha { transform: translateX(4px); }

/* ============================================================
   03 · MUESTRA DEL CATÁLOGO — ISLA SOBRIA nº1
   Cero gradientes, cero sombras de color, cero movimiento.
   ============================================================ */
.tabla-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--blanco);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-1);
}

.tabla-precios {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.tabla-precios thead { background: var(--navy); }
/* Sin position:sticky: .tabla-wrap declara overflow-x:auto, lo que fuerza el
   overflow-y usado a auto y lo convierte en el contenedor de scroll contra
   el que se resuelve el sticky. Como ese contenedor no tiene alto limitado,
   la cabecera nunca se pegaba y el `top: var(--nav-h)` era letra muerta. */
.tabla-precios th {
  background: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blanco);
  text-align: left;
  padding: 14px 16px;
}
.tabla-precios td {
  padding: 14px 16px;
  border-top: 1px solid var(--hairline);
  vertical-align: middle;
  font-family: var(--font-body);
}
.tabla-precios tbody tr:hover { background: var(--ambar-pastilla); }
.tabla-precios td:last-child,
.tabla-precios th:last-child { text-align: right; }

/* Pastilla de precio dentro de la tabla */
.tabla-precios td.precio,
.tabla-precios .precio {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: var(--fs-precio);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--tinta);
  background: var(--ambar-pastilla);
  border-left: 3px solid var(--naranja);
  white-space: nowrap;
}
/* Acotado a la tabla: suelto, este margin-left se sumaba al gap:6px de
   .producto__precio (inline-flex) en catalogo.css y la separación real
   entre la cifra y "MXN + IVA" era de 14px, no de 6px. */
.tabla-precios .precio__iva {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin-left: 8px;
  vertical-align: middle;
}

/* Fila placeholder antes de que corra main.js */
.tabla-precios tbody tr td[colspan] {
  color: var(--gris-texto);
  font-style: italic;
  background: none;
  border-left: 0;
}

.muestra__cta {
  margin-top: 32px;
  text-align: center;
}

/* ============================================================
   04 · CÓMO COTIZAMOS
   ============================================================ */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
.paso {
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.paso::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--naranja);
}
.paso__num {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--naranja-texto);
  display: block;
  margin-bottom: 14px;
}
.paso h3 { font-size: var(--fs-h3); }
.paso p { color: var(--gris-texto); font-size: var(--fs-body); margin: 0; max-width: 46ch; }

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

/* ============================================================
   05 · NOSOTROS
   ============================================================ */
.nosotros__texto {
  columns: 2;
  column-gap: clamp(32px, 5vw, 64px);
  color: var(--gris-texto);
  font-size: var(--fs-body);
  margin-bottom: clamp(40px, 6vw, 64px);
}
.nosotros__texto p { break-inside: avoid; max-width: 62ch; }
@media (max-width: 760px) {
  .nosotros__texto { columns: 1; }
}

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.pilar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--blanco);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: var(--sombra-1);
}
.pilar__medallon,
.contacto-card__medallon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blanco);
  background: linear-gradient(150deg, var(--navy-vivo), var(--navy));
  box-shadow: var(--sombra-1);
}
.pilar__medallon .ico,
.contacto-card__medallon .ico { stroke-width: 2; }
.pilar h3 { font-size: var(--fs-h3); margin: 0; }
.pilar p { font-size: var(--fs-small); color: var(--gris-texto); margin: 0; }

/* ============================================================
   CTA INTERMEDIA (banda navy)
   ============================================================ */
.cta-banda {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-navy);
  color: var(--blanco);
  padding-block: clamp(56px, 7vw, 88px) clamp(72px, 8vw, 100px);
}
/* Marca de agua: sólo luz, ningún ráster */
.cta-banda::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grad-orbe);
  background-repeat: no-repeat;
  background-size: 56% 130%;
  background-position: 108% 50%;
  opacity: .8;
  pointer-events: none;
  z-index: 0;
}

.cta-banda__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta-banda h2 {
  color: var(--blanco);
  max-width: 22ch;
  margin: 0;
}
.cta-banda p {
  color: var(--texto-sobre-navy);
  margin: 10px 0 0;
  max-width: 48ch;
}

/* ============================================================
   06 · CONTACTO
   ============================================================ */
.contacto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.contacto-card {
  background: var(--blanco);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: var(--sombra-1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contacto-card h3 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin: 0;
}
.contacto-card__dato {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--tinta);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
a.contacto-card__dato { color: var(--navy); }
a.contacto-card__dato:hover {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contacto-card__nota {
  font-size: var(--fs-small);
  color: var(--gris-texto);
  margin: 0;
  border-left: 2px solid var(--ambar);
  padding-left: 12px;
}

/* ============================================================
   FOOTER — ISLA SOBRIA nº2
   ============================================================ */
.footer {
  background: var(--navy-noche);
  color: var(--texto-sobre-navy);
  padding-block: clamp(56px, 7vw, 80px) 32px;
  font-size: var(--fs-small);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--hairline-clara);
}
.footer .wordmark__nombre { color: var(--blanco); }
.footer .wordmark__sub { color: var(--texto-sobre-navy-tenue); }
.footer .wordmark__orbe { width: 44px; height: 36px; }
.footer__desc { margin-top: 14px; max-width: 40ch; }

.footer h3 {
  font-family: var(--font-body);
  color: var(--cian);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.footer a { color: var(--texto-sobre-navy-tenue); }
.footer a:hover {
  color: var(--blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__legal {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-small);
  color: var(--texto-sobre-navy-tenue);
}
.footer__legal p { margin: 0; max-width: 72ch; }

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

/* ============================================================
   FORMULARIOS Y CONTROLES (regla transversal)
   ============================================================ */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--tinta);
  background: var(--blanco);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-input);
  min-height: 48px;
  padding: 12px 14px;
  transition: border-color var(--dur-rapida) var(--ease);
}
input::placeholder,
textarea::placeholder { color: var(--gris-texto); opacity: 1; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--navy);
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--rojo-error); }
input:disabled,
select:disabled,
textarea:disabled,
button:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   PREFERS-REDUCED-MOTION (obligatorio y global)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__pastilla, .hero__orbe-anillo { animation: none !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* .producto lo cubre catalogo.css, que es su dueño único. */
  .cat-card:hover { transform: none !important; }
}