/* ==========================================================================
   Punto Frenos ZG — Hoja de estilos principal
   Versión 2.0
   Orden: 1 Tokens · 2 Base · 3 Componentes · 4 Secciones · 5 Modal
          6 Manual de marca · 7 Responsive · 8 Accesibilidad
   ========================================================================== */

/* ==========================================================================
   1. TOKENS DE MARCA
   ========================================================================== */

:root {
  /* Color */
  --orange: #ff5a12;
  --orange-hover: #ff7a1a;
  --orange-dark: #d94708;
  --ink: #080808;
  --panel: #101010;
  --panel-2: #161616;
  --steel: #d8d8d6;
  --white: #f7f5f1;

  /* Texto — valores verificados para contraste AA sobre fondo oscuro */
  --text: #f7f5f1;
  --text-soft: #c6c3be;
  --text-muted: #a3a09b;
  --text-faint: #8a8781;

  /* Líneas y superficies */
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .22);

  /* Tipografía */
  --font-display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  /* Ritmo vertical */
  --section-y: 110px;
  --shell-w: 1180px;
  --shell-gutter: 48px;

  /* Efectos */
  --radius: 3px;
  --shadow-cta: 0 10px 30px rgba(255, 90, 18, .25);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Base tipográfica al 106,25% = 17px en vez de 16px. Sube de una vez todo
     el texto del sitio, pensando en lectores adultos y en pantallas al sol.
     En porcentaje (y no en px) para respetar el tamaño de fuente que el
     visitante tenga configurado en su navegador. */
  font-size: 106.25%;
  scroll-behavior: smooth;
  /* Compensa el header fijo (menú + franja de categorías) al saltar con anclas */
  scroll-padding-top: 140px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  /* Interlineado amplio: es lo que más ayuda a leer párrafos largos */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
  overflow: hidden;
}

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

img,
svg,
video,
iframe {
  max-width: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  margin: 0;
}

p {
  margin: 0;
}

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

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.shell {
  width: min(var(--shell-w), calc(100% - var(--shell-gutter)));
  margin-inline: auto;
}

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

/* Salto rápido al contenido para teclado y lectores de pantalla */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--orange);
  color: #090909;
  font-weight: 900;
  font-size: .8rem;
  transition: top .2s var(--ease);
}

.skip-link:focus {
  top: 12px;
}

/* Foco visible y consistente en todo el sitio */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ==========================================================================
   3. COMPONENTES
   ========================================================================== */

/* --- Etiqueta superior de sección ---------------------------------------- */

.eyebrow {
  font-size: .67rem;
  letter-spacing: .23em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 900;
}

/* --- Botones -------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--orange);
  color: #090909;
  font-weight: 900;
  font-size: .88rem;
  padding: 16px 24px;
  border-radius: var(--radius);
  text-align: center;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}

.button:hover {
  transform: translateY(-2px);
  background: var(--orange-hover);
  box-shadow: var(--shadow-cta);
}

.button:active {
  transform: translateY(0);
}

.button.small {
  padding: 12px 16px;
  font-size: .75rem;
}

.button.light {
  background: #fff;
}

.button.light:hover {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
}

.button.ghost:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--orange);
  color: #fff;
  box-shadow: none;
}

.button.block {
  width: 100%;
}

/* --- Efecto de partículas al pulsar ---------------------------------------
   Al hacer clic, el botón se encoge y salen 6 partículas desde su centro.
   El JS crea las partículas; aquí vive toda la animación.
   -------------------------------------------------------------------------- */

/* Gana a :hover, que también usa transform */
.button.is-pressed,
.button.is-pressed:hover {
  transform: scale(.95);
  transition-duration: .1s;
}

.particle {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 300;
  transform: scale(0);
  animation: particle .6s ease-out forwards;
}

/* Sobre naranja o blanco, la partícula clara desaparecería */
.particle.dark {
  background: #090909;
}

@keyframes particle {
  0% {
    transform: translate(0, 0) scale(0);
  }
  50% {
    transform: translate(calc(var(--px) / 2), calc(var(--py) / 2)) scale(1);
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
  }
}

/* Icono que acompaña a cada botón: puntero, o el logo de WhatsApp cuando
   el botón lleva a WhatsApp (se reconoce por la forma, sin necesidad de leer) */
.btn-icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-left: 2px;
}

.btn-icon.wa {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
}

.text-link {
  display: inline-block;
  font-size: .82rem;
  font-weight: 800;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.text-link:hover {
  color: var(--orange);
  border-color: var(--orange);
}

/* --- Encabezado de sección ------------------------------------------------ */

.section {
  padding-block: var(--section-y);
}

.section-head {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 80px;
  align-items: end;
}

.section h2,
.clutch h2,
.location h2,
.final-cta h2,
.about h2,
.commerce h2,
.manual-content h2 {
  font-size: clamp(2.7rem, 5vw, 4.8rem);
  line-height: .94;
  text-transform: uppercase;
  letter-spacing: -.055em;
  margin: 18px 0 0;
}

.section h2 em,
.clutch h2 em,
.location h2 em,
.about h2 em,
.commerce h2 em,
.manual-hero h1 em {
  color: var(--orange);
  font-style: normal;
}

.section-head > p {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 500px;
}

.lead {
  max-width: 620px;
  color: var(--text-soft);
  font-size: 1.2rem;
  line-height: 1.7;
}

.microcopy,
.brand-note {
  color: var(--text-faint);
  font-size: .82rem;
  line-height: 1.65;
}

/* ==========================================================================
   4. SECCIONES
   ========================================================================== */

/* --- Franjas tipo noticiero (marquesinas) ---------------------------------
   Un solo grupo de contenido en el HTML. El JS lo clona las veces necesarias
   para llenar la pantalla y calcula el desplazamiento exacto de un grupo, de
   modo que el bucle sea continuo en cualquier resolución.
   Sin JS, o con "reducir movimiento", el grupo queda quieto y centrado.
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee.is-running .marquee-track {
  width: max-content;
  justify-content: flex-start;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}

/* Se detiene al pasar el cursor para poder leer un dato concreto */
.marquee.is-running:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex: none;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--marquee-distance, 0px) * -1)); }
}

/* --- Franja superior: horario y datos de servicio -------------------------- */

/* Fondo claro: letra negra, grande y sólida (estilo panel de tiempos de F1) */
.topbar {
  background: var(--orange);
  color: #0a0a0a;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.topbar .marquee-group > * {
  padding-block: 11px;
  flex: none;
}

.topbar .sep {
  width: 7px;
  height: 7px;
  background: #0a0a0a;
  transform: rotate(45deg);
  margin: 0 24px;
  padding: 0;
}

.topbar a {
  border-bottom: 1px solid rgba(9, 9, 9, .45);
}

.topbar a:hover {
  border-bottom-color: #090909;
}

/* --- Navegación ----------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(8, 8, 8, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  flex: none;
}

/* El logo es horizontal: se muestra completo, nunca recortado en círculo */
.brand img {
  width: auto;
  height: 42px;
  object-fit: contain;
  border-radius: 2px;
}

.brand b {
  font-size: .82rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

.navlinks {
  display: flex;
  gap: 26px;
  font-size: .78rem;
  color: var(--text-muted);
}

.navlinks a {
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.navlinks a:hover {
  color: #fff;
  border-color: var(--orange);
}

/* Botón hamburguesa — solo visible en móvil */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0;
  place-items: center;
}

.nav-toggle span {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  transition: background .2s var(--ease);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--white);
  transition: transform .25s var(--ease);
}

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

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

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Panel desplegable móvil */
.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--ink);
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu .shell {
  padding-block: 22px 30px;
}

.mobile-menu a:not(.button) {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
  font-weight: 700;
}

.mobile-menu .button {
  margin-top: 22px;
  width: 100%;
}

.mobile-menu .mobile-meta {
  margin-top: 20px;
  color: var(--text-faint);
  font-size: .72rem;
  line-height: 1.7;
}

/* --- Hero con video ------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 90px;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #050505;
}

/* La imagen es la capa base: si el video no carga o falla, ya está visible */
.hero-media .hero-fallback,
.hero-media .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero-media .hero-video {
  opacity: 0;
  transition: opacity .6s var(--ease);
}

/* El JS añade .is-playing solo cuando el video realmente puede reproducirse */
.hero-media.is-playing .hero-video {
  opacity: 1;
}

.hero-media.is-failed .hero-video {
  display: none;
}

/* Velo que garantiza legibilidad del texto sobre cualquier fotograma */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(8, 8, 8, .97) 0%, rgba(8, 8, 8, .88) 38%, rgba(8, 8, 8, .45) 68%, rgba(8, 8, 8, .7) 100%),
    radial-gradient(circle at 22% 50%, rgba(255, 90, 18, .16), transparent 55%);
}

/* Sin z-index a propósito: con él, este bloque creaba su propio contexto de
   apilamiento y el "mix-blend-mode" del logo no alcanzaba la fotografía de
   fondo, dejando un recuadro negro. Sin z-index sigue pintándose encima del
   velo (viene después en el documento) y el logo sí se funde con la imagen. */
.hero .shell {
  position: relative;
}

.hero-copy {
  max-width: 660px;
}

/* --- Logo del hero --------------------------------------------------------
   PLACEHOLDER: usa el logo maestro, que viene en JPEG con fondo negro.
   El modo de fusión "screen" vuelve transparente ese negro, así que encaja
   sobre la fotografía sin recuadro. Cuando llegue el logo en PNG con fondo
   transparente, cambia la ruta y borra la línea de mix-blend-mode.
   -------------------------------------------------------------------------- */

.hero-logo {
  display: block;
  width: min(420px, 78%);
  height: auto;
  margin-bottom: 26px;
  mix-blend-mode: screen;
  /* El "negro" del JPEG no es negro puro; subir el contraste lo hunde a #000
     para que "screen" lo borre del todo y no quede el recuadro de la imagen.
     Nada de drop-shadow aquí: dibujaría la sombra del rectángulo completo. */
  filter: contrast(1.35) brightness(1.05) saturate(1.1);
}

.manual-hero h1 {
  font-size: clamp(3.2rem, 6.4vw, 6.2rem);
  line-height: .88;
  text-transform: uppercase;
  letter-spacing: -.07em;
  margin: 20px 0 26px;
}

/* --- Título del hero ------------------------------------------------------
   "PUNTO" domina; "FRENOS ZG" queda debajo, más pequeño y en naranja.
   -------------------------------------------------------------------------- */

.hero h1 {
  margin: 0 0 26px;
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: -.07em;
}

.hero h1 .hero-punto {
  display: block;
  font-size: clamp(4.2rem, 11vw, 9rem);
  color: #fff;
}

.hero h1 .hero-resto {
  display: block;
  font-size: clamp(1.7rem, 4.2vw, 3.4rem);
  color: var(--orange);
  letter-spacing: .02em;
  margin-top: 8px;
}

.hero .actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 34px 0 40px;
}

/* --- Banda de confianza ---------------------------------------------------
   Antes iba apretada dentro del hero. Ahora es una banda propia, centrada y
   con aire, para que los tres argumentos de venta se lean de un vistazo.
   -------------------------------------------------------------------------- */

.trust-band {
  background: linear-gradient(180deg, #0e0e0e, #080808);
  border-bottom: 1px solid var(--line);
  padding-block: 54px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.trust-grid article {
  background: #0c0c0c;
  padding: 40px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: background .25s var(--ease);
}

.trust-grid article:hover {
  background: #121212;
}

/* Franja diagonal naranja en la esquina, guiño al panel de tiempos de F1 */
.trust-grid article::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90px;
  height: 60px;
  background: var(--orange);
  opacity: .12;
  transform: rotate(-35deg);
}

.trust-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border: 2px solid var(--orange);
  /* Octógono recortado: forma técnica, no un círculo genérico */
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: rgba(255, 90, 18, .08);
}

.trust-mark svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-grid b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.trust-grid small {
  display: block;
  color: var(--text-muted);
  font-size: .92rem;
  margin-top: 10px;
  line-height: 1.5;
  max-width: 240px;
}

/* --- Franja de categorías -------------------------------------------------
   Va justo debajo del hero, en el flujo normal de la página. Al llegar a ella
   se queda pegada bajo el menú y ya no se despega durante el resto del scroll.
   El "top" tiene que coincidir con la altura del nav para que encajen sin
   dejar hueco (84px en escritorio, 72px en móvil).
   -------------------------------------------------------------------------- */

.ticker {
  position: sticky;
  top: 84px;
  /* Por debajo del header (60) para que el menú siempre quede encima */
  z-index: 55;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, #101010, #070707);
}

/* Fondo oscuro: letra blanca pura con un halo que la despega del fondo */
.ticker .marquee-group > span {
  padding-block: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .1em;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  text-shadow:
    0 0 14px rgba(255, 255, 255, .3),
    0 0 3px rgba(255, 255, 255, .5),
    0 2px 4px rgba(0, 0, 0, .9);
}

.ticker i {
  width: 7px;
  height: 7px;
  background: var(--orange);
  margin: 0 26px;
  transform: rotate(45deg);
  flex: none;
  box-shadow: 0 0 10px rgba(255, 90, 18, .8);
}

/* --- Productos: bloque cotizador ------------------------------------------ */

.quoter-block {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 0;
  background: linear-gradient(120deg, #23120a, #0e0e0e);
  border: 1px solid rgba(255, 90, 18, .35);
  overflow: hidden;
}

.quoter-block > div:first-child {
  padding: 52px 48px;
}

.quoter-block h3 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  text-transform: uppercase;
  margin: 22px 0 14px;
  letter-spacing: -.05em;
  line-height: .95;
}

.quoter-block p {
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.65;
}

.quoter-block .button {
  margin-top: 30px;
}

/* Los tres pasos como tarjetas redondeadas en una sola fila.
   Son informativas: no llevan a ningún lado, solo explican el proceso. */
.quoter-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.quoter-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 20px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 40px;
  background: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  font-size: .92rem;
  line-height: 1.35;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.quoter-steps li:hover {
  border-color: rgba(255, 90, 18, .5);
  background: rgba(255, 90, 18, .07);
}

.quoter-steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange);
  color: #0a0a0a;
  font-size: .82rem;
  font-weight: 900;
  flex: none;
}

.quoter-visual {
  position: relative;
  min-height: 380px;
  background: #050505;
  overflow: hidden;
}

.quoter-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Placa translúcida: deja ver el disco y la mordaza que hay detrás */
.quoter-visual > div {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 14px 18px;
  background: rgba(8, 8, 8, .42);
  backdrop-filter: blur(6px);
  border-left: 3px solid var(--orange);
}

.quoter-visual strong {
  display: block;
  font-size: 1.4rem;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .95);
}

.quoter-visual small {
  display: block;
  color: var(--orange);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: .6rem;
  margin-top: 6px;
}

/* --- Productos: rejilla de categorías ------------------------------------- */

/* --- Tarjetas de categoría ------------------------------------------------
   Cada tarjeta lleva una fotografía de fondo con un velo oscuro encima para
   que el texto mande. Si la foto todavía no existe, el degradado de respaldo
   deja la tarjeta igual de legible.
   Fotos esperadas en assets/products/categorias/ — ver LEEME-IMAGENES.txt
   -------------------------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.product-grid article {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  padding: 30px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Respaldo visible mientras no haya fotografía */
  background: linear-gradient(160deg, #1c1c1c, #0b0b0b);
}

/* Capa de la fotografía */
.product-grid article .cat-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transition: transform .5s var(--ease);
}

.product-grid article:hover .cat-photo {
  transform: scale(1.06);
}

/* Velo que garantiza el contraste del texto sobre cualquier foto */
.product-grid article::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 8, .62) 0%,
    rgba(8, 8, 8, .78) 45%,
    rgba(8, 8, 8, .94) 100%
  );
  transition: background .25s var(--ease);
}

.product-grid article:hover::after {
  background: linear-gradient(
    180deg,
    rgba(8, 8, 8, .55) 0%,
    rgba(20, 10, 5, .74) 45%,
    rgba(8, 8, 8, .93) 100%
  );
}

.product-grid article > span {
  color: var(--orange);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
}

.product-grid h3 {
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
}

.product-grid p {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 10px 0 20px;
  flex: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .95);
}

/* Iconos de categoría — SVG inline, un trazo gris con un detalle naranja */
.cat-icon {
  width: 52px;
  height: 52px;
  margin: 30px 0 24px;
  flex: none;
}

.cat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s var(--ease);
}

.cat-icon .i-base {
  stroke: #64615c;
}

.cat-icon .i-accent {
  stroke: var(--orange);
}

.cat-icon .i-dot {
  fill: #64615c;
  stroke: none;
}

/* Al pasar el cursor por la tarjeta, el icono completo se aclara */
.product-grid article:hover .cat-icon .i-base {
  stroke: #8f8b85;
}

/* Enlace de cotización dentro de cada tarjeta */
.cat-quote {
  color: var(--orange);
  font-weight: 900;
  font-size: .92rem;
  text-align: left;
  padding: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
}

.cat-quote:hover {
  text-decoration: underline;
}

.cat-icon svg {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .9));
}

/* --- Marcas --------------------------------------------------------------- */

.brand-section {
  padding-block: var(--section-y);
  background: #eeeeec;
  color: #111;
}

.brand-section .eyebrow {
  color: var(--orange-dark);
}

.brand-section .section-head > p {
  color: #55534f;
}

.brand-wall {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 62px;
}

/* Cada marca sobre un degradado con SUS colores: los logos claros ya no
   quedan blanco sobre blanco y el muro se ve mucho más armado. */
.brand-wall article {
  min-height: 260px;
  border: 0;
  border-radius: 6px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

/* Marco del logo: fondo OSCURO a propósito. Los logos de BEX-USA y Brake Pak
   son blancos, así que sobre una placa clara desaparecían. */
.brand-plate {
  flex: 1;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  padding: 22px 18px;
  border-radius: 4px;
  background: rgba(6, 8, 12, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.brand-wall article > .brand-plate > img {
  width: 100%;
  max-height: 78px;
  object-fit: contain;
  object-position: center;
}

/* BEX-USA: azul y rojo */
.brand-wall .brand-bex {
  background: linear-gradient(150deg, #1b3a6b, #0d1c33);
}

/* Brake Pak: rojo y grafito */
.brand-wall .brand-pak {
  background: linear-gradient(150deg, #8c1d1d, #2a0d0d);
}

/* MJ: acero */
.brand-wall .brand-mj {
  background: linear-gradient(150deg, #4a4f57, #1a1d21);
}

.brand-wall .brand-bex p,
.brand-wall .brand-pak p,
.brand-wall .brand-mj p {
  color: rgba(255, 255, 255, .82);
  font-size: .88rem;
}

.brand-wall .brand-bex strong,
.brand-wall .brand-pak strong,
.brand-wall .brand-mj strong {
  color: #fff;
}

/* Identificador tipográfico mientras no llega el logo oficial de MJ */
.brand-plate .brand-letters {
  font-family: var(--font-display);
  font-size: 3.4rem;
  letter-spacing: -.04em;
  color: #fff;
}

.brand-wall strong {
  font-size: 1.4rem;
  letter-spacing: -.04em;
  font-family: var(--font-display);
}

.brand-wall p {
  font-size: .74rem;
  color: #55534f;
  margin-top: 6px;
}

.brand-wall .dynamik {
  min-height: 300px;
  background: #0b0b0b;
  color: #fff;
  border: 0;
  position: relative;
  overflow: hidden;
}

.brand-wall .dynamik::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 90, 18, .18), transparent 55%);
}

.brand-wall .dynamik > img {
  height: 118px;
  object-position: left center;
  position: relative;
  z-index: 1;
  filter: brightness(0) invert(1);
}

.brand-wall .dynamik small,
.brand-wall .dynamik p,
.brand-wall .dynamik button {
  position: relative;
  z-index: 1;
}

.brand-wall .dynamik small {
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
  font-size: .62rem;
}

.brand-wall .dynamik p {
  color: #b9b7b2;
}

.brand-wall .dynamik button {
  color: var(--orange);
  font-size: .76rem;
  font-weight: 900;
  margin-top: 16px;
  text-align: left;
  padding: 0;
}

.brand-wall .dynamik button:hover {
  text-decoration: underline;
}

.brand-wall article > strong {
  font-size: 1.5rem;
  text-transform: uppercase;
}

/* --- Nosotros ------------------------------------------------------------- */

.about {
  padding-block: var(--section-y);
  background: linear-gradient(160deg, #101010, var(--ink));
  border-block: 1px solid var(--line);
}

/* Todo centrado y a mayor escala: la sección tenía espacio de sobra */
.about-copy {
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}

.about-copy p {
  color: var(--text-soft);
  font-size: 1.1rem;
  line-height: 1.85;
  margin-top: 24px;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 70px;
}

.about-stats article {
  background: var(--panel);
  padding: 44px 24px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-stats article::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--orange);
  transform: translateX(-50%);
  transition: width .5s var(--ease);
}

.about-stats article.is-visible::after {
  width: 60%;
}

.about-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.4rem);
  line-height: 1;
  color: var(--orange);
  letter-spacing: -.05em;
  /* Ancho tabular: los dígitos no bailan mientras corre el contador */
  font-variant-numeric: tabular-nums;
}

.about-stats b {
  display: block;
  font-size: .95rem;
  text-transform: uppercase;
  margin-top: 18px;
  letter-spacing: .03em;
}

.about-stats small {
  display: block;
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.5;
  margin-top: 8px;
}


/* --- Clutch --------------------------------------------------------------- */

.clutch {
  padding-block: var(--section-y);
  background: linear-gradient(115deg, #161616, #080808);
  border-block: 1px solid var(--line);
}

.clutch-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 80px;
  align-items: center;
}

.clutch p {
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 600px;
  margin-top: 20px;
}

.clutch .button {
  margin-top: 26px;
}

.clutch-card {
  border: 1px solid rgba(255, 90, 18, .4);
  background: var(--panel);
  box-shadow: 20px 20px 0 #1b100b;
  overflow: hidden;
}

.clutch-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.clutch-card > div {
  padding: 28px;
}

.clutch-card small {
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .62rem;
  font-weight: 900;
}

.clutch-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin: 12px 0 6px;
  text-transform: uppercase;
}

.clutch-card span {
  color: var(--text-muted);
  font-size: .82rem;
}

/* --- Compra y despacho ---------------------------------------------------- */

.commerce {
  padding-block: var(--section-y);
}

/* Panel único de medios de pago, centrado */
.commerce-panel {
  margin-top: 60px;
  padding: 60px 50px;
  border: 1px solid rgba(255, 90, 18, .3);
  border-radius: 8px;
  background: linear-gradient(140deg, #1d1008, #0d0d0d);
  text-align: center;
}

.commerce-panel h3 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  text-transform: uppercase;
  letter-spacing: -.03em;
  margin-bottom: 16px;
}

.commerce-panel > p {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 34px;
}

.pagos-iconos {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.pagos-iconos span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 40px;
  color: var(--text-soft);
  font-size: .92rem;
  font-weight: 700;
}

.pagos-iconos svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* --- FAQ ------------------------------------------------------------------ */

.faq-section {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 90px;
  align-items: start;
}

.faq-intro > p:last-child {
  color: var(--text-muted);
  margin-top: 20px;
  line-height: 1.7;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  list-style: none;
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  gap: 16px;
  align-items: center;
  padding: 26px 0;
  cursor: pointer;
  font-weight: 800;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  color: var(--orange);
  font-size: .62rem;
  font-weight: 900;
}

.faq-list summary b {
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
  transition: transform .25s var(--ease), color .2s var(--ease);
}

.faq-list details[open] summary b {
  transform: rotate(45deg);
  color: var(--orange);
}

.faq-list details > div {
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 44px 26px 60px;
  font-size: .9rem;
}

.faq-list details > div p + p {
  margin-top: 12px;
}

.faq-list details > div a {
  color: var(--orange);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 90, 18, .5);
}

/* --- Ubicación ------------------------------------------------------------ */

.location {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: start;
}

.location-map {
  margin-top: 34px;
  border: 1px solid var(--line);
  line-height: 0;
  background: var(--panel);
}

.location-map iframe {
  width: 100%;
  height: 330px;
  border: 0;
  display: block;
  /* El mapa de Google llega en claro: se atenúa para integrarlo al sitio */
  filter: grayscale(.35) contrast(1.05) brightness(.92);
}

/* Botones de navegación con el color y el logo de cada app: se identifican
   sin leer, que es como la gente busca estos accesos. */
.map-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.map-actions .app-button {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 60px;
  padding: 14px 20px;
  border-radius: 6px;
  font-weight: 900;
  font-size: .95rem;
  color: #fff;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.map-actions .app-button:hover {
  transform: translateY(-2px);
}

.map-actions .app-button svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.app-maps {
  background: #1a1a1a;
  border: 1px solid #34343a;
}

.app-maps:hover {
  border-color: #4285f4;
  box-shadow: 0 10px 26px rgba(66, 133, 244, .3);
}

.app-waze {
  background: #33ccff;
  color: #04263a;
  border: 1px solid #33ccff;
}

.app-waze:hover {
  box-shadow: 0 10px 26px rgba(51, 204, 255, .35);
}

/* --- Redes sociales -------------------------------------------------------- */

.social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 40px;
  border: 1px solid var(--line-strong);
  font-weight: 800;
  font-size: .92rem;
  color: var(--text-soft);
  transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.social-links a svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex: none;
}

.social-links a:hover {
  transform: translateY(-2px);
  color: #fff;
}

.social-links .s-instagram:hover {
  border-color: #d6249f;
  background: linear-gradient(45deg, rgba(240, 148, 51, .18), rgba(214, 36, 159, .18), rgba(150, 47, 191, .18));
}

.social-links .s-facebook:hover {
  border-color: #1877f2;
  background: rgba(24, 119, 242, .16);
}

.location-card {
  border: 1px solid var(--line);
  background: #111;
  padding: 34px;
}

.location-card > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.location-card > div:first-child {
  padding-top: 0;
}

.location-card small {
  display: block;
  color: var(--orange);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .61rem;
  margin-bottom: 7px;
}

.location-card strong,
.location-card > div > a {
  font-size: 1.25rem;
  font-family: var(--font-display);
}

.location-card > div > a:hover {
  color: var(--orange);
}

.location-card p {
  color: var(--text-faint);
  font-size: .8rem;
  margin: 6px 0 0;
}

.location-card .hours {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: .88rem;
  padding: 5px 0;
  font-family: var(--font-body);
}

.location-card .hours span:last-child {
  color: var(--text-soft);
  font-weight: 700;
  white-space: nowrap;
}

.location-card .hours.closed span:last-child {
  color: var(--text-faint);
  font-weight: 400;
}

.location-card > .button {
  margin-top: 26px;
  width: 100%;
}

/* --- CTA final y pie ------------------------------------------------------ */

/* --- Cierre con video de fondo --------------------------------------------
   Mismo sistema que el hero: la imagen es la capa base y el video solo se
   revela si el navegador confirma que puede reproducirlo.
   -------------------------------------------------------------------------- */

.final-cta {
  position: relative;
  isolation: isolate;
  color: var(--white);
  padding-block: 130px;
  text-align: center;
  overflow: hidden;
  background: #0a0a0a;
}

.final-cta .cta-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #0a0a0a;
}

.final-cta .cta-media img,
.final-cta .cta-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.final-cta .cta-media video {
  opacity: 0;
  transition: opacity .6s var(--ease);
}

.final-cta .cta-media.is-playing video {
  opacity: 1;
}

.final-cta .cta-media.is-failed video {
  display: none;
}

/* Velo naranja de marca sobre el video */
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(125deg, rgba(255, 104, 30, .93), rgba(184, 55, 5, .95)),
    radial-gradient(circle at 50% 40%, rgba(0, 0, 0, .3), transparent 65%);
}

.final-cta h2 {
  font-size: clamp(2.8rem, 7.5vw, 6rem);
  margin: 0 auto 44px;
  max-width: 15ch;
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.055em;
  color: #0a0a0a;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .16);
}

/* Botón grande de cierre: es la acción principal de toda la página */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 54px;
  border-radius: 60px;
  background: #0a0a0a;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}

.cta-button svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  flex: none;
}

.cta-button:hover {
  transform: translateY(-4px) scale(1.02);
  background: #141414;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .45);
}

.cta-button:active {
  transform: translateY(0) scale(1);
}

/* --- Pie de página --------------------------------------------------------- */

.site-footer {
  background: linear-gradient(180deg, #0c0c0c, #060606);
  border-top: 1px solid var(--line);
  margin-top: 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 60px;
  padding-block: 72px 52px;
}

.footer-brand .brand {
  margin-bottom: 20px;
}

.footer-brand p {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.7;
  max-width: 330px;
  margin-bottom: 26px;
}

.footer-col h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--orange);
  margin-bottom: 22px;
}

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

.footer-col a,
.footer-col span {
  color: var(--text-muted);
  font-size: .95rem;
  transition: color .2s var(--ease);
}

.footer-col a:hover {
  color: #fff;
}

.footer-col .footer-hours {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 11px;
}

.footer-col .footer-hours b {
  color: var(--text-soft);
  font-weight: 700;
  white-space: nowrap;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 26px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: .85rem;
}

.footer-bottom .footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-bottom a:hover {
  color: var(--orange);
}

/* --- Botón flotante de WhatsApp -------------------------------------------
   Redondo y naranja en reposo. Mientras se hace scroll cambia a verde
   WhatsApp y al detenerse vuelve al naranja, con transición suave.
   Vibra cada pocos segundos para invitar a pulsarlo.
   -------------------------------------------------------------------------- */

.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--orange);
  color: #0a0a0a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 0 rgba(255, 90, 18, .55);
  transition: background .55s var(--ease), color .55s var(--ease), box-shadow .55s var(--ease);
  animation: wa-latido 4s ease-in-out infinite;
}

.wa-float svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* Estado durante el scroll: verde oficial de WhatsApp */
.wa-float.is-scrolling {
  background: #25d366;
  color: #05340f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 10px rgba(37, 211, 102, .16);
}

.wa-float:hover {
  animation-play-state: paused;
  transform: scale(1.06);
}

/* Vibración corta: llama la atención sin marear */
@keyframes wa-latido {
  0%, 82%, 100% { transform: rotate(0) scale(1); }
  84%  { transform: rotate(-11deg) scale(1.07); }
  86%  { transform: rotate(10deg) scale(1.07); }
  88%  { transform: rotate(-8deg) scale(1.05); }
  90%  { transform: rotate(7deg) scale(1.05); }
  92%  { transform: rotate(-4deg) scale(1.02); }
  94%  { transform: rotate(0) scale(1); }
}

/* ==========================================================================
   5. MODAL COTIZADOR
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.is-open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 4, .82);
  backdrop-filter: blur(4px);
}

.modal-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: #0d0d0d;
  border: 1px solid rgba(255, 90, 18, .35);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .7);
  animation: modal-in .25s var(--ease);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Sin position:sticky a propósito: en móvil el encabezado fijo se comía casi
   la mitad de la pantalla útil. Ahora fluye con el resto y libera espacio. */
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px 20px;
  background: #0d0d0d;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: -.03em;
  margin: 0 0 8px;
}

.modal-head p {
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.6;
  max-width: 460px;
}

.modal-close {
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.modal-close:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.modal-body {
  padding: 28px 32px 34px;
}

.field {
  margin-bottom: 24px;
}

/* En minúsculas y a mayor tamaño: se escanean más rápido que en versalitas */
.field > label,
.field > legend,
.field-label {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--white);
  margin-bottom: 12px;
  padding: 0;
}

/* El número del paso se destaca en naranja */
.field .paso {
  color: var(--orange);
  font-weight: 900;
  margin-right: 3px;
}

.field .opcional {
  color: var(--text-faint);
  font-weight: 400;
  font-size: .85rem;
}

.field input[type="text"],
.field textarea {
  width: 100%;
  padding: 15px 16px;
  background: #141414;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: .95rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

/* Los placeholders ahora llevan las instrucciones, así que necesitan
   contraste suficiente para leerse (5.4:1 sobre el fondo del campo). */
.field input::placeholder,
.field textarea::placeholder {
  color: #8f8b85;
  opacity: 1;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--orange);
  background: #171717;
  outline: none;
}

.field textarea {
  min-height: 88px;
  resize: vertical;
}

/* Fieldset sin estilos por defecto del navegador */
.field fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Chips de categoría y de tipo de compra */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Alto mínimo de 46px: suficiente para el pulgar en cualquier teléfono */
.chip span {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 6px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 40px;
  font-size: .86rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  user-select: none;
}

.chip span:hover {
  border-color: var(--orange);
  color: #fff;
}

.chip input:checked + span {
  background: var(--orange);
  border-color: var(--orange);
  color: #090909;
  font-weight: 900;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Mensaje de error de validación */
.modal-error {
  display: none;
  padding: 13px 16px;
  margin-bottom: 20px;
  background: rgba(255, 90, 18, .1);
  border-left: 3px solid var(--orange);
  color: #ffb08a;
  font-size: .84rem;
}

.modal-error.is-visible {
  display: block;
}

/* --- Modal de transferencias ----------------------------------------------- */

.cuenta {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px;
  margin-bottom: 14px;
  background: #121212;
}

.cuenta-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cuenta-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
  flex: none;
}

.cuenta-logo.bancolombia {
  background: #ffd200;
  color: #16233a;
}

.cuenta-logo.davivienda {
  background: #ed1c27;
}

.cuenta-head b {
  display: block;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.cuenta-head small {
  display: block;
  color: var(--text-muted);
  font-size: .85rem;
  margin-top: 2px;
}

.cuenta-numero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  background: #0c0c0c;
}

.cuenta-numero span {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.copiar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  min-height: 44px;
  border: 1px solid var(--orange);
  border-radius: 4px;
  color: var(--orange);
  font-weight: 900;
  font-size: .85rem;
  flex: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.copiar:hover {
  background: var(--orange);
  color: #0a0a0a;
}

.copiar.is-copiado {
  background: #25d366;
  border-color: #25d366;
  color: #05340f;
}

.cuenta-titular {
  color: var(--text-muted);
  font-size: .88rem;
  margin-top: 14px;
}

.aviso-datos {
  padding: 14px 16px;
  margin-bottom: 22px;
  border-left: 3px solid var(--orange);
  background: rgba(255, 90, 18, .08);
  color: var(--text-soft);
  font-size: .88rem;
  line-height: 1.6;
}

.modal-foot {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.modal-foot .button {
  width: 100%;
  padding: 19px 24px;
  font-size: .95rem;
}

.modal-foot .note {
  color: var(--text-faint);
  font-size: .74rem;
  line-height: 1.6;
  margin-top: 14px;
  text-align: center;
}

/* ==========================================================================
   6. MANUAL DE MARCA
   ========================================================================== */

.manual {
  background: #0b0b0b;
}

/* Firma tipográfica ZG — usada en el manual donde no va el logo completo */
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  flex: none;
}

.wordmark span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--orange);
  color: #090909;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -.03em;
  border-radius: 2px;
}

.wordmark b {
  font-size: .82rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

.manual-hero {
  display: grid;
  grid-template-columns: 1fr .72fr;
  align-items: center;
  gap: 70px;
  min-height: 620px;
  padding-block: 70px;
  border-bottom: 1px solid var(--line);
}

.manual-hero > div > p:last-child {
  max-width: 520px;
  color: var(--text-muted);
  line-height: 1.7;
}

.manual-hero img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 30px 80px #000;
}

.manual-section {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 70px;
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--line);
}

.manual-index {
  font-size: .68rem;
  color: var(--orange);
  letter-spacing: .18em;
  padding-top: 10px;
  font-weight: 900;
}

.manual-content h2 {
  margin: 0 0 55px;
}

.manual-lead {
  max-width: 740px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 45px;
}

.principles,
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.principles article,
.voice-grid article,
.application-grid article {
  padding: 26px;
  border: 1px solid var(--line);
  background: #121212;
}

.principles small,
.voice-grid b,
.type-system small,
.dos small,
.brandline span {
  display: block;
  color: var(--orange);
  font-weight: 900;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.principles p,
.voice-grid p,
.application-grid p {
  color: var(--text-muted);
  line-height: 1.65;
  font-size: .86rem;
}

.brandline {
  margin-top: 36px;
  padding: 30px;
  background: var(--orange);
  color: #090909;
}

.brandline span {
  color: #090909;
}

.brandline strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 6px 0 14px;
}

.brandline p {
  margin: 4px 0;
  font-size: .85rem;
}

.palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.palette article {
  border: 1px solid var(--line);
  padding: 8px;
}

.palette .swatch {
  height: 125px;
  margin-bottom: 14px;
}

.palette small {
  display: block;
  color: var(--text-muted);
  font-size: .68rem;
}

.palette strong {
  display: block;
  margin: 5px 0;
  font-size: .82rem;
}

.palette p {
  color: var(--text-faint);
  font-size: .65rem;
}

.type-system {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 50px;
}

.type-system > div {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.type-system strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 12px 0;
}

.type-system p {
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.6;
}

.logo-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  margin-top: 50px;
  align-items: center;
}

.logo-stage {
  padding: 35px;
  background: #050505;
  border: 1px solid var(--line);
}

.logo-stage img {
  width: 100%;
  display: block;
}

.logo-rules h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.logo-rules li {
  color: var(--text-muted);
  margin: 12px 0;
  font-size: .85rem;
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}

.logo-rules li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--orange);
}

.voice-grid em {
  display: block;
  color: var(--text);
  font-size: .84rem;
  line-height: 1.55;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 35px;
}

.dos > div {
  padding: 30px;
  border: 1px solid var(--line);
}

.dos > div:first-child {
  border-top: 3px solid var(--orange);
}

.dos > div:last-child {
  border-top: 3px solid #555;
}

.dos > div:last-child small {
  color: var(--text-muted);
}

.dos p {
  font-size: .9rem;
  color: var(--text-muted);
  margin: 8px 0;
}

.application-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.application-grid span {
  color: var(--orange);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.application-grid h3 {
  text-transform: uppercase;
  margin: 26px 0 10px;
  font-size: 1.1rem;
}

.contact-lockup {
  margin-top: 45px;
  padding: 45px;
  background: var(--orange);
  color: #090909;
}

.contact-lockup p {
  font-size: .75rem;
  text-transform: uppercase;
  font-weight: 800;
}

.contact-lockup strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 10px 0 16px;
  line-height: 1.2;
}

.contact-lockup a {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 800;
  border-bottom: 1px solid rgba(9, 9, 9, .4);
  margin-right: 20px;
}

/* --- Página 404 ----------------------------------------------------------- */

.error-page {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding-block: 80px;
}

.error-page h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  text-transform: uppercase;
  letter-spacing: -.06em;
  line-height: .9;
  margin: 18px 0 22px;
}

.error-page p {
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 34px;
}

.error-page .actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .brand-wall {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .brand-wall .dynamik {
    grid-column: 1 / -1;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 950px) {
  :root {
    --section-y: 80px;
  }

  html {
    scroll-padding-top: 118px;
  }

  /* El menú de escritorio se reemplaza por el panel desplegable.
     Los botones marcados .always siguen visibles: son la única acción del
     nav en páginas que no tienen menú desplegable (manual y 404). */
  .navlinks,
  .nav > .button:not(.always) {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  .hero,
  .manual-hero,
  .location,
  .section-head,
  .clutch-grid,
  .about-grid,
  .quoter-block {
    grid-template-columns: 1fr;
  }

  .section-head {
    gap: 28px;
  }

  .about-grid,
  .clutch-grid,
  .location {
    gap: 50px;
  }

  .brand-wall {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .about-stats {
    grid-template-columns: 1fr 1fr;
  }

  .faq-section {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .manual-section {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .principles,
  .voice-grid {
    grid-template-columns: 1fr;
  }

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

  .logo-rules,
  .type-system {
    grid-template-columns: 1fr;
  }

  /* Deja aire para que el botón flotante no tape el pie */
  .footer-bottom {
    padding-bottom: 80px;
  }
}

@media (max-width: 620px) {
  :root {
    --shell-gutter: 30px;
    --section-y: 70px;
  }

  /* La franja sigue mostrando todo: al desplazarse no necesita recortar datos */
  .topbar {
    font-size: .6rem;
  }

  .topbar .sep {
    margin: 0 14px;
  }

  .ticker .marquee-group > span {
    font-size: .6rem;
    padding-block: 9px;
  }

  .ticker i {
    margin: 0 18px;
  }

  .nav {
    height: 72px;
  }

  /* Debe seguir el alto del nav para encajar sin dejar hueco */
  .ticker {
    top: 72px;
  }

  .brand img {
    height: 34px;
  }

  .brand b {
    font-size: .72rem;
  }

  .hero {
    min-height: auto;
    padding-block: 62px 56px;
  }

  .manual-hero h1 {
    font-size: 2.9rem;
  }

  .hero-logo {
    width: min(300px, 86%);
    margin-bottom: 20px;
  }

  /* Velo aligerado ~30% para que la fotografía se aprecie en móvil.
     El texto compensa con sombra propia (.hero-copy más abajo). */
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(8, 8, 8, .65) 0%, rgba(8, 8, 8, .58) 55%, rgba(8, 8, 8, .68) 100%),
      radial-gradient(circle at 70% 25%, rgba(255, 90, 18, .16), transparent 60%);
  }

  /* Con menos velo, el texto necesita su propia sombra para seguir legible */
  .hero-copy h1,
  .hero-copy .lead,
  .hero-copy .eyebrow {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95), 0 1px 3px rgba(0, 0, 0, 1);
  }

  .hero-media .hero-fallback,
  .hero-media .hero-video {
    object-position: center;
  }

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

  .hero .actions .button {
    width: 100%;
  }

  .hero .actions .text-link {
    text-align: center;
    align-self: center;
  }

  .quoter-block > div:first-child {
    padding: 34px 26px;
  }

  .quoter-visual {
    min-height: 240px;
    order: -1;
  }

  .product-grid,
  .brand-wall,
  .about-stats,
  .field-row {
    grid-template-columns: 1fr;
  }

  .product-grid article {
    min-height: 290px;
  }

  /* Los tres pasos siguen en fila: son cortos y así se leen como un proceso */
  .quoter-steps {
    gap: 8px;
  }

  .quoter-steps li {
    padding: 16px 8px;
    font-size: .78rem;
    border-radius: 24px;
  }

  .quoter-steps b {
    width: 30px;
    height: 30px;
    font-size: .75rem;
  }

  .trust-band {
    padding-block: 40px;
  }

  .trust-grid article {
    padding: 32px 22px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-block: 50px 36px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .cta-button {
    width: 100%;
    padding: 22px 26px;
  }

  .final-cta {
    padding-block: 90px;
  }

  .brand-wall .dynamik {
    grid-column: auto;
  }

  .brand-wall article > .brand-plate > img {
    max-height: 84px;
  }

  .commerce-panel {
    padding: 40px 24px;
  }

  .clutch-card {
    box-shadow: 12px 12px 0 #1b100b;
  }

  .faq-list summary {
    grid-template-columns: 30px 1fr 20px;
    gap: 12px;
    font-size: .92rem;
  }

  .faq-list details > div {
    margin: 0 0 24px 42px;
  }

  .location-map iframe {
    height: 260px;
  }

  .map-actions .button {
    flex: 1 1 100%;
  }

  .location-card {
    padding: 26px;
  }

  .location-card strong,
  .location-card > div > a {
    font-size: 1.05rem;
  }

  .cuenta-numero {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .copiar {
    justify-content: center;
  }

  .modal {
    padding: 0;
    align-items: flex-end;
  }

  .modal-dialog {
    max-height: 92vh;
    max-height: 92dvh;
    width: 100%;
  }

  .modal-head {
    padding: 24px 22px 18px;
  }

  .modal-head h2 {
    font-size: 1.35rem;
  }

  .modal-body {
    padding: 22px 22px 30px;
  }

  .palette,
  .dos,
  .application-grid {
    grid-template-columns: 1fr;
  }

  .contact-lockup {
    padding: 30px;
  }

  .manual-hero {
    padding-block: 55px;
  }
}

/* ==========================================================================
   8. ACCESIBILIDAD Y PREFERENCIAS DEL SISTEMA
   ========================================================================== */

/* En pantallas táctiles o pequeñas, los enlaces de texto crecen hasta un área
   cómoda para el dedo (~44px de alto). En escritorio no cambia nada. */
@media (hover: none), (max-width: 620px) {
  .cat-quote {
    padding-block: 13px;
  }

  .text-link {
    padding-block: 10px 12px;
  }

  .brand {
    padding-block: 6px;
  }

  .brand-wall .dynamik button {
    padding-block: 12px;
  }

  .faq-list details > div a,
  .footer-col a,
  .footer-bottom a {
    display: inline-block;
    padding-block: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .button:hover {
    transform: none;
  }
}

@media print {
  .topbar,
  .site-header,
  .wa-float,
  .modal,
  .hero-media,
  .final-cta {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}