/** Shopify CDN: Minification failed

Line 390:20 Unexpected "("

**/
/* High Quality — hero: aurora WebGL, cuadrícula de puntos y collage del catálogo.
   Orden de capas (de atrás hacia delante):
     0 aurora → 1 puntos → 2 collage → 3 velo → 4 marco → 5 texto
   La cuadrícula va DELANTE de la aurora, no detrás: en la referencia la retícula se
   ve cruzar por encima del resplandor. Cuando estaba detrás, el halo la borraba por
   completo (medido en pantalla el 4 ago 2026). El collage va por encima de la aurora
   por petición expresa del dueño (7 ago 2026). */
.chq-onda{
  --chq-reveal-y:50px;
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--chq-lienzo,#F2F4F7);color:#121212;
  /* Sin min-height en vh. Reservar 86vh y luego meter dentro emblema + nombre +
     titular + subtítulo + botones era lo que empujaba los botones contra el borde en
     pantallas de poca altura. Ahora la sección mide lo que mide su contenido más un
     respiro, así que nunca hay nada que no quepa. */
  min-height:min(78vh, 760px);
  display:flex;
  /* ── Por qué los botones se veían cortados, y por qué las medias consultas de abajo
        nunca lo arreglaron del todo ──

     Con `align-items:center`, cuando el contenido es MÁS ALTO que el contenedor el
     desbordamiento se reparte por igual arriba y abajo. Lo de abajo se puede alcanzar
     con scroll; **lo de arriba no** —el navegador no deja desplazarse en negativo—, así
     que el bloque queda descolocado y las cifras y los botones se salen del cuadro. Es
     un fallo conocido del centrado en flexbox, y es la causa raíz de una queja que
     lleva repitiéndose varias sesiones.

     `safe center` es exactamente el remedio: centra mientras quepa y, en cuanto deja de
     caber, se comporta como `flex-start`. Nada se sale por arriba.

     Las dos declaraciones son a propósito: un navegador que no entienda `safe` descarta
     la segunda línea entera y se queda con el centrado de siempre. */
  align-items:center;
  align-items:safe center;
}

/* En un portátil (alto útil ~620-800px) el hero medía 86vh pero su contenido
   —emblema, nombre, titular de tres líneas, subtítulo, botones— pedía más, y los
   botones quedaban cortados por el borde de la pantalla. Se encoge el bloque, no
   los botones: mantienen su tamaño y solo entran dentro del cuadro. */
@media (min-width:750px) and (max-height:900px){
  .chq-onda{min-height:auto;}
  .chq-onda__contenido{padding:10px 0 26px;}
  .chq-onda__emblema{margin-bottom:12px;}
  .chq-onda__titular{font-size:clamp(34px,4.5vw,56px);}
  .chq-onda__sub{margin-top:12px;font-size:clamp(15px,1.5vw,17px);}
  .chq-onda__acciones{margin-top:20px;}
  .chq-onda__cifras{margin-top:20px;}
}
@media (min-width:750px) and (max-height:720px){
  .chq-onda__contenido{padding:8px 0 22px;}
  .chq-onda__titular{font-size:clamp(30px,3.8vw,52px);}
  .chq-onda__emblema .chq-emb{--chq-emb-tam:104px !important;}
}

/* ---------- Fondo técnico ----------
   La cuadrícula de puntos y el grano viven en component-chq-textura.css (compartido
   por todas las secciones claras). Aquí solo se sube la intensidad: es el fondo más
   grande de la página y donde la textura tiene que leerse con más fuerza. */
.chq-onda__tex{
  --chq-tex-op:.42;
  --chq-tex-paso:23px;
  --chq-tex-r:1.25px;
  z-index:1;
}

/* ---------- Aurora boreal (WebGL) ----------
   El dibujo lo hace un shader; aquí solo vive el encuadre y el respaldo. La lógica y el
   razonamiento de rendimiento están en `assets/chq-aurora.js`.

   **Capa 0, al fondo de todo**, porque el collage de productos tiene que pasar por
   encima. Es la posición que en su día dejó invisible la versión de velos, y funciona
   ahora por una razón concreta: aquella eran manchas concentradas en el centro, justo
   donde el velo blanquea para que se lea el titular; esta es una banda que cruza el
   hero de lado a lado, así que el óvalo lavado del centro le quita una parte y la luz
   sigue leyéndose a los lados y por arriba.

   Nada de `mix-blend-mode`. Ya se probó `screen` —lo natural para una aurora sobre
   cielo negro— y sobre este lienzo casi blanco sumar luz deja blanco: desaparecía
   entera. El shader ya devuelve su propio alfa, así que se compone normal. */
.chq-onda__aurora.chq-onda__aurora{
  /* Clase doblada por lo de siempre: Dawn oculta `div:empty`, y este div nace vacío —
     el lienzo se lo cuelga el JavaScript después. Sin esto no se vería ni el respaldo. */
  display:block;
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;

  /* Respaldo pintado, activo POR DEFECTO. Si el archivo de la aurora no llega, o el
     dispositivo no da un contexto WebGL, el hero no se queda plano. El JavaScript
     añade `is-webgl` solo cuando el contexto está vivo de verdad, y entonces se retira:
     así el fallo es el estado seguro, no el que hay que acordarse de cubrir. */
  background:
    radial-gradient(120% 62% at 50% 30%,rgba(30,122,205,.30) 0%,rgba(30,122,205,0) 64%),
    radial-gradient(86% 44% at 20% 56%,rgba(10,76,143,.20) 0%,rgba(10,76,143,0) 72%);
}
.chq-onda__aurora.is-webgl{background:none;}

/* El lienzo se pinta muy por debajo de la resolución de pantalla y se estira aquí. La
   aurora no tiene ni un borde duro, así que el estirado no deja escalones. */
.chq-onda__aurora canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}

/* ---------- Marco técnico ---------- */
.chq-onda__marco{
  position:absolute;inset:26px clamp(18px,5vw,72px);pointer-events:none;z-index:4;
  border-left:1px solid rgba(0,31,63,.1);border-right:1px solid rgba(0,31,63,.1);
}
.chq-onda__marca{position:absolute;width:7px;height:7px;}
.chq-onda__marca::before,.chq-onda__marca::after{content:'';position:absolute;background:rgba(0,31,63,.28);}
.chq-onda__marca::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);}
.chq-onda__marca::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%);}
.chq-onda__marca--si{left:-3.5px;top:-3.5px;}
.chq-onda__marca--sd{right:-3.5px;top:-3.5px;}
.chq-onda__marca--ii{left:-3.5px;bottom:-3.5px;}
.chq-onda__marca--id{right:-3.5px;bottom:-3.5px;}

/* ---------- Collage ----------
   Las fotos van NÍTIDAS, a plena opacidad, por encima de la onda. Lo único que
   se atenúa es el hueco justo detrás del titular, con una máscara ajustada: fuera
   de esa elipse las imágenes se ven tal cual. */
.chq-onda__collage{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;
  /* El hueco central se hizo más alto: el velo blanco que antes tapaba el choque
     entre las fotos y el subtítulo se quitó (borraba la cuadrícula), así que ahora
     el hueco tiene que despejar la columna de texto entera por sí solo. */
  /* El hueco tuvo que crecer hacia arriba al entrar el emblema: el dorado del nombre
     sobre una foto clara no se leía. Ahora la columna de contenido entera —emblema,
     titular, subtítulo y botones— cae dentro de la zona despejada. */
  /* El hueco se ciñe al texto, y la transición es corta.

     La versión anterior abría un óvalo del 47×54 % que no recuperaba opacidad plena
     hasta el 95 %: entre el agujero y las fotos nítidas había media pantalla de
     degradado, y el dueño lo describió como «se difuminan mucho, sobre todo las del
     centro». Ahora el hueco es más pequeño y la subida ocupa apenas un tercio del
     radio, así que el despeje se lee como un halo ajustado alrededor de las letras y
     las fotos vuelven a verse nítidas enseguida. */
  -webkit-mask-image:radial-gradient(38% 40% at 50% 46%,transparent 46%,rgba(0,0,0,.62) 64%,rgba(0,0,0,.93) 78%,#000 88%);
          mask-image:radial-gradient(38% 40% at 50% 46%,transparent 46%,rgba(0,0,0,.62) 64%,rgba(0,0,0,.93) 78%,#000 88%);
}

/* El mosaico son 2×2 teselas iguales: al desplazarse una tesela completa vuelve a
   quedar exactamente como estaba, así que el bucle no tiene costura visible.

   La deriva la lleva ahora una animación CSS, no JavaScript. Antes un
   `requestAnimationFrame` iba sumando píxeles y escribiendo el `transform` sesenta
   veces por segundo — en el móvil, además, para acabar aplicando un movimiento que
   nadie mira de cerca. `--px` y `--py` son el empujón del paralaje del ratón, que sí
   necesita JS porque depende del puntero; en móvil se quedan en cero y no hay ni un
   bucle corriendo. */
.chq-onda__mosaico{
  position:absolute;top:-1000px;left:-1500px;
  width:3000px;height:2000px;
  display:grid;grid-template-columns:1500px 1500px;grid-template-rows:1000px 1000px;
  --px:0px; --py:0px;
  translate:var(--px) var(--py);
  animation:chqMosaicoDeriva 26s ease-in-out infinite alternate;
  will-change:transform;
}
/* Vaivén corto, no un recorrido completo.

   Antes esto recorría una tesela entera (1500×1000 px) en 120 s. Era correcto en el
   sentido de que el bucle no tenía costura —al avanzar una tesela, el mosaico vuelve a
   quedar igual—, pero tenía un efecto que no se previó: **la composición cambia por el
   camino**. El reparto de las catorce fotos deja huecos a propósito (el centro va
   despejado para el titular), y al desplazarse esos huecos acaban pasando por el medio
   de la pantalla. El dueño lo describió exacto: «tras unos segundos las imágenes quedan
   demasiado dispersas y en partes muy vacío».

   Con un vaivén de pocas decenas de píxeles el fondo respira igual, pero la composición
   que se ve es siempre la que se compuso: nunca deja de haber grupos de producto. */
@keyframes chqMosaicoDeriva{
  from{transform:translate3d(-46px,-30px,0);}
  to  {transform:translate3d(46px,30px,0);}
}
.chq-onda__tesela{position:relative;width:1500px;height:1000px;}

.chq-onda__pieza{
  position:absolute;margin:0;overflow:hidden;border-radius:16px;
  background:#F4F4F4;line-height:0;
  box-shadow:0 30px 56px -34px rgba(0,31,63,.55);
}
.chq-onda__pieza img{width:100%;height:100%;display:block;object-fit:cover;}

/* Reparto: grupos de 2-3 fotos montadas unas sobre otras y piezas sueltas, con
   tamaños y giros distintos. El centro se deja despejado: ahí va el titular. */
.chq-onda__pieza--1  {left:118px;  top:84px;  width:206px; height:258px; transform:rotate(-5deg);}
.chq-onda__pieza--2  {left:258px;  top:196px; width:152px; height:152px; transform:rotate(4deg);}
.chq-onda__pieza--3  {left:470px;  top:34px;  width:168px; height:212px; transform:rotate(3deg);}
.chq-onda__pieza--4  {left:878px;  top:62px;  width:188px; height:188px; transform:rotate(-4deg);}
.chq-onda__pieza--5  {left:1002px; top:148px; width:146px; height:190px; transform:rotate(5deg);}
.chq-onda__pieza--6  {left:806px;  top:182px; width:128px; height:128px; transform:rotate(2deg);}
.chq-onda__pieza--7  {left:1288px; top:44px;  width:142px; height:182px; transform:rotate(-3deg);}
.chq-onda__pieza--8  {left:44px;   top:424px; width:168px; height:214px; transform:rotate(4deg);}
.chq-onda__pieza--9  {left:142px;  top:548px; width:132px; height:132px; transform:rotate(-6deg);}
.chq-onda__pieza--10 {left:1252px; top:356px; width:198px; height:158px; transform:rotate(-3deg);}
.chq-onda__pieza--11 {left:206px;  top:792px; width:178px; height:178px; transform:rotate(5deg);}
.chq-onda__pieza--12 {left:600px;  top:764px; width:192px; height:152px; transform:rotate(-2deg);}
.chq-onda__pieza--13 {left:1042px; top:690px; width:196px; height:246px; transform:rotate(3deg);}
.chq-onda__pieza--14 {left:1196px; top:828px; width:148px; height:148px; transform:rotate(-4deg);}

/* Velo: solo suaviza el borde inferior. Se quitó el lavado blanco del centro porque
   era lo que borraba la cuadrícula de puntos justo donde tiene que verse más. */
/* Clase doblada por lo mismo que la capa de textura: Dawn oculta `div:empty`. */
.chq-onda__velo.chq-onda__velo{
  display:block;
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,
    rgba(242,244,247,.28) 0%,rgba(242,244,247,0) 14%,
    rgba(242,244,247,0) 82%,var(--chq-lienzo,#F2F4F7) 100%);
}

/* ---------- Contenido ----------
   El relleno de arriba es corto a propósito: la sección ya carga con la altura de la
   cabecera (el hero pasa por debajo de ella). Sumarle otros 88px empujaba el subtítulo
   y los botones fuera de pantalla en un portátil, que era justo lo que se perdía. */
.chq-onda__contenido{position:relative;z-index:5;text-align:center;padding:14px 0 34px;}

/* El emblema ocupa el sitio donde antes iba la etiqueta de texto. */
.chq-onda__emblema{display:flex;justify-content:center;margin-bottom:10px;}

.chq-onda__eyebrow{
  display:inline-flex;align-items:center;gap:10px;min-height:34px;
  font-family:ui-monospace,"Cascadia Code","SF Mono",monospace;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#001F3F;
  background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(0,31,63,.14);border-radius:999px;padding:8px 18px;margin-bottom:26px;
}
.chq-onda__eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#158200;flex:0 0 auto;
  animation:chqOndaLatido 2.4s ease-in-out infinite;
}
@keyframes chqOndaLatido{0%,100%{opacity:1;}50%{opacity:.28;}}

/* Cursor del texto que se escribe solo */
.chq-onda__cursor{
  display:inline-block;width:2px;height:1em;background:#001F3F;
  margin-left:1px;vertical-align:-.12em;
  animation:chqOndaParpadeo 1s steps(2,start) infinite;
}
.chq-onda__cursor.is-fin{opacity:0;animation:none;}
@keyframes chqOndaParpadeo{50%{opacity:0;}}

/* ---------- Jerarquía del hero ----------
   El salto entre piezas se abre a propósito. Antes el nombre de la marca, el titular y
   el subtítulo tenían tamaños demasiado próximos y el bloque se leía plano — que es lo
   contrario de lo que se busca aquí. Ahora hay tres escalones claros:

     emblema + nombre  ·  grande, dorado, es la firma
     titular           ·  el mayor de la página, muy apretado de tracking
     subtítulo         ·  claramente menor y en gris, para que no compita

   El titular se agranda de 72 a 86 px y baja el interlineado a 0,98: en tipografías de
   este cuerpo, un interlineado por debajo de 1 es lo que hace que dos líneas se lean
   como un bloque compacto y no como dos frases sueltas. Con `safe center` en la sección
   ya no hay riesgo de que ese cuerpo extra corte los botones — era el motivo por el que
   se había bajado a 72 en su día. */
.chq-onda__titular{
  font-size:clamp(38px,6.4vw,86px);
  font-weight:700;letter-spacing:-.045em;line-height:.98;
  color:#001F3F;margin:0 auto;max-width:15ch;text-wrap:balance;
}
/* Cada palabra entra por separado: da la sensación de que el titular se escribe solo. */
.chq-onda__palabra{
  display:inline-block;
  opacity:0;transform:translateY(.42em) rotate(1.4deg);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 72ms + 300ms);
}
.chq-onda.is-escrito .chq-onda__palabra{opacity:1;transform:none;}

/* Más pequeño y más estrecho que antes: su papel es acompañar, no competir. Con 52ch
   la columna de texto queda claramente más angosta que el titular, y ese contraste de
   anchura es la mitad de la sensación de jerarquía. */
.chq-onda__sub{
  font-size:clamp(15px,1.45vw,17.5px);line-height:1.62;color:#5A6675;
  margin:16px auto 0;max-width:52ch;letter-spacing:.002em;
}
.chq-onda__sub p{margin:0;}

/* ---------- Los botones ----------
   Toman el lenguaje de la placa «CATÁLOGO» de la vitrina (`.chq-vitrina__sello-caja`):
   marino en degradado diagonal, filo dorado, sombra profunda y una línea de luz interior
   arriba. Es la pieza más cara de la página y ahora la comparten los dos botones del
   hero, en tamaño mayor porque son la acción principal.

   El aura dorada va en un pseudo-elemento DETRÁS (`z-index:-1`), no en un `box-shadow`:
   una sombra se recorta a la forma del botón y lo que se busca aquí es un resplandor que
   se derrame por fuera, como el que rodea al emblema. El desenfoque se calcula una vez
   al rasterizar; lo único que se anima es la opacidad, que el navegador resuelve en el
   compositor sin repintar.

   `flex:0 1 auto` con `max-width:100%` evita el otro modo en que se rompían: con un
   texto largo el botón crecía más que la pantalla y se salía por la derecha. */
.chq-onda__acciones{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:26px;}
.chq-onda__btn{
  /* Sin `isolation:isolate`. Se probó y el aura desaparecía: aislar crea un contexto de
     apilamiento propio, y dentro de él un hijo con `z-index:-1` queda por detrás del
     fondo del propio botón, no por detrás del botón entero. El resplandor tiene que
     vivir en el contexto del contenedor para poder desbordarlo. */
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 1 auto;max-width:100%;
  padding:18px 42px;border-radius:15px;text-decoration:none;
  font-size:16.5px;font-weight:700;letter-spacing:.02em;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease;
}
/* ── El neón va en el BORDE, no dentro ──
   El primer intento ponía un óvalo dorado desenfocado detrás del botón, encendido todo
   el rato. El dueño lo describió como que «se quema por dentro de amarillo», y tenía
   razón: al estar siempre activo y desbordar por debajo del botón, el resplandor se leía
   como relleno y no como contorno.

   Ahora el resplandor lo dibuja el propio borde: un `box-shadow` **sin desplazamiento y
   con extensión**, que es la forma de tener un halo que sigue exactamente la silueta del
   botón en vez de una mancha detrás. Y solo aparece al pasar por encima o al pulsar —en
   reposo el botón es plano y limpio. */
.chq-onda__btn:hover,
.chq-onda__btn:focus-visible,
.chq-onda__btn:active{
  transform:translateY(-3px);
  border-color:#E0B85F;
  box-shadow:
    0 0 0 1px rgba(224,184,95,.95),
    0 0 10px rgba(224,184,95,.85),
    0 0 26px rgba(214,168,86,.5),
    0 20px 38px -22px rgba(0,31,63,.85);
}
.chq-onda__btn:focus-visible{outline:none;}

/* Colores pedidos: catálogo en marino y rastreo en verde, los dos con letra blanca.
   El texto va blanco en ambos y no dorado — el dorado se reserva para el borde, que es
   donde ahora vive el acento. */
.chq-onda__btn--primario{
  background:linear-gradient(152deg,#04304F 0%,#001F3F 52%,#002A4E 100%);
  border:1px solid rgba(173,132,73,.5);
  color:#FFFFFF;
  box-shadow:0 20px 38px -24px rgba(0,31,63,.85),inset 0 1px 0 rgba(255,255,255,.14);
}
.chq-onda__btn--fantasma{
  background:linear-gradient(152deg,#199A02 0%,#158200 54%,#0F6B00 100%);
  border:1px solid rgba(173,132,73,.42);
  color:#FFFFFF;
  box-shadow:0 20px 38px -24px rgba(21,130,0,.7),inset 0 1px 0 rgba(255,255,255,.18);
}
.chq-onda__btn--primario:hover,.chq-onda__btn--primario:focus-visible,
.chq-onda__btn--fantasma:hover,.chq-onda__btn--fantasma:focus-visible{color:#FFFFFF;}

.chq-onda__cifras{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 48px;
  margin:30px 0 0;padding:0;
}
.chq-onda__cifra{display:flex;align-items:baseline;gap:10px;}
.chq-onda__cifra-num{
  font-family:ui-monospace,"Cascadia Code","SF Mono",monospace;
  font-size:26px;font-weight:600;letter-spacing:-.025em;color:#001F3F;font-variant-numeric:tabular-nums;
}
.chq-onda__cifra-lbl{font-size:14px;color:#4D4D4D;}

.chq-pre-reveal[data-chq-reveal]{opacity:0;transform:translateY(var(--chq-reveal-y,28px));}

/* ---------- Responsive ---------- */
@media (max-width:989px){
  /* ── Las fotos van POR ENCIMA del humo, igual que en escritorio ──
     En el orden de capas siempre estuvieron delante (humo 0 · collage 2), pero a media
     opacidad el humo se transparentaba a través de ellas y el resultado se leía justo al
     revés: el humo por encima de las fotos. El .5 venía de cuando el humo del móvil salía
     como un borrón azul y había que separar el texto de las fotos a la fuerza; con el
     humo ya disperso y a menos exposición, ese apagado sobra y era la mitad del
     desenfoque del que se quejó el dueño. */
  .chq-onda__collage{opacity:.92;}
  /* El texto necesita ayuda para separarse del collage, pero el velo se tiñe del
     lienzo (no de blanco puro) para no borrar los puntos, y ya no llega al .96 de
     antes: a esa opacidad lavaba las fotos hasta dejarlas como manchas grises, que
     era la mitad de la queja de «se ven borrosas».

     Bajó otra vez, de .86 a .68 (7 ago 2026): con la aurora al fondo, este óvalo era
     lo que la dejaba invisible en el móvil —se veía luz solo en los dos bordes y un
     hueco blanco en medio—. El titular es marino, grande y en negrita sobre un collage
     que ya está al 50 %, así que aguanta de sobra un velo más ligero. */
     Bajó otra vez (8 ago 2026), de .72 a .38 y ciñéndose al ancho del texto en vez de
     cubrir la pantalla de lado a lado. Este velo va por DELANTE del collage, así que era
     la otra mitad del desenfoque: lavaba las fotos enteras para despejar una columna de
     texto que el collage ya despeja por su cuenta con su máscara. Ahora solo hace de
     colchón detrás de las letras. */
  .chq-onda__velo{
    background:
      radial-gradient(74% 42% at 50% 47%,rgba(242,244,247,.38) 38%,rgba(242,244,247,.2) 72%,rgba(242,244,247,0) 100%),
      linear-gradient(180deg,rgba(242,244,247,.6) 0%,rgba(242,244,247,0) 22%,rgba(242,244,247,0) 78%,var(--chq-lienzo,#F2F4F7) 100%);
  }
  /* `backdrop-filter` obliga al navegador a leer lo que hay DEBAJO del elemento,
     desenfocarlo y recomponerlo — es de lo más caro que se puede pedir en un móvil, y
     aquí solo aportaba un vidrio esmerilado que a este tamaño no se aprecia. El fondo
     translúcido se queda; lo que se va es el desenfoque de lo que hay detrás. */
  .chq-onda__btn--fantasma,.chq-onda__eyebrow{backdrop-filter:none;}
  /* AQUÍ estaba el botón invisible del móvil.
     Esta media consulta conservaba una línea de cuando el segundo botón era «fantasma»
     de verdad: `background:rgba(255,255,255,.9)`. Al pasar los botones a verde con letra
     blanca, esa línea seguía ganando por debajo de 990px —es posterior en el archivo—,
     así que en el móvil quedaba una caja BLANCA con texto BLANCO: el botón existía, se
     podía pulsar, y no se leía nada. Es exactamente lo que el dueño reportó.
     No se sustituye por otro color: el botón ya tiene el suyo arriba y debe ser el mismo
     en móvil y en escritorio, que es lo que se pidió. */
}
@media (max-width:749px){
  /* Aquí había un `transform:scale(.38)` sobre el collage entero. La idea era encoger
     las fotos, pero `.chq-onda__collage` es el contenedor con `inset:0` y
     `overflow:hidden`: al escalarlo se encogía TAMBIÉN su ventana de recorte, así que
     las fotos quedaban metidas en un rectángulo del 38% en mitad de la pantalla y el
     resto del hero se quedaba sin fondo. Eso es lo que se veía como «recortado» en el
     móvil, y rasterizar una capa de 3000×2000 para luego escalarla es lo que las
     emborronaba.
     El arreglo es `zoom` en el MOSAICO, no `transform` en el contenedor: zoom cambia
     el tamaño de maquetación de verdad, así que las fotos se pintan pequeñas y
     nítidas, y el contenedor conserva su recorte a pantalla completa. El JS mueve el
     mosaico en píxeles y el zoom escala esos píxeles con él, así que el mosaico sigue
     encajando consigo mismo al desplazarse. */
  .chq-onda__mosaico{zoom:.5;}
  .chq-onda__collage{opacity:.92;}   /* mismo motivo que en la regla de 989px */
  /* El hueco de la máscara se ensancha SOLO en móvil. En escritorio el titular ocupa una
     franja central y le sobra con el 38 %; en una pantalla de 375 px el subtítulo cruza
     casi de borde a borde, y con las fotos ya a plena opacidad el texto gris caía encima
     de ellas. Se despeja la columna del texto ensanchando el hueco, que es lo contrario
     de lo que hacía el velo: aquí se aparta la foto donde estorba en vez de lavarlas
     todas para tapar el problema. */
  .chq-onda__collage{
    -webkit-mask-image:radial-gradient(64% 42% at 50% 47%,transparent 54%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.9) 85%,#000 95%);
            mask-image:radial-gradient(64% 42% at 50% 47%,transparent 54%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.9) 85%,#000 95%);
  }
  .chq-onda{min-height:auto;}
  .chq-onda__contenido{padding:44px 0 46px;}
  .chq-onda__titular{max-width:13ch;letter-spacing:-.035em;}
  .chq-onda__acciones{flex-direction:column;}
  .chq-onda__btn{width:100%;}
  .chq-onda__marco{inset:16px 12px;}
  .chq-onda__tex{--chq-tex-paso:19px;--chq-tex-r:1.05px;}
  /* El emblema se encoge en móvil: a 140px el nombre se iba más ancho que la pantalla
     y se montaba con el titular. El !important es para ganarle al style en línea que
     escribe el snippet con el tamaño elegido en el editor. */
  .chq-onda__emblema .chq-emb{--chq-emb-tam:116px !important;}
  .chq-onda__emblema{margin-bottom:20px;}
  /* Menos tracking: con .3em el nombre no cabía a 390px. Se toca la VARIABLE, no las
     propiedades sueltas: el ::after del destello usa el mismo valor para su sangría y
     si se separan, el brillo recorre las letras desalineado. */
  .chq-onda__emblema .chq-emb__nombre{--chq-emb-track:.16em;}
  .chq-onda__cifras{gap:14px 30px;margin-top:36px;}
}

@media (prefers-reduced-motion: reduce){
  .chq-onda__eyebrow::before{animation:none;}
  .chq-onda__cursor{display:none;}
  /* Sin movimiento el titular no recibe la clase is-escrito: hay que dejarlo visible. */
  .chq-onda__palabra{opacity:1;transform:none;transition:none;}
  .chq-pre-reveal[data-chq-reveal]{opacity:1;transform:none;}
}