/* ═══════════════════════════════════════════════════════════════════════════
   TICKER v3.0 — Barra de anuncios con scroll infinito
   Estructura generada por ticker.js:

   .ticker
     ├── .ticker__bg  (×2, crossfade del fondo global)
     ├── .ticker__viewport
     │     └── .ticker-track
     │           └── .ticker-seq  (×N clones)
     │                 ├── .ticker-item
     │                 │     ├── .ticker-item__zone   (fondo propio del mensaje)
     │                 │     └── .ticker-content
     │                 └── .ticker-sep
     ├── .ticker__overlay  (scanlines / grid / viñeta / brillo)
     └── .ticker__sr       (texto accesible, invisible)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lato es la letra del cuerpo de la tienda (storage/css/style.css,
   --uw-font-body) y hoy solo llega por aquí: se mantiene para que el sitio
   no cambie de letra. Pendiente: pedirla en el <head> de cada página y
   sacarla de este archivo. Las fuentes del ticker las pide ticker.js
   (_cargarFuentes), solo las que usan los mensajes al aire: antes este
   @import cargaba las 8 familias en cada página. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');


/* ═══════════════════════════════════════════════════════════════
   VARIABLES — todas sobrescribibles desde ticker.config.js
   ═══════════════════════════════════════════════════════════════ */
.ticker {
  --ticker-height: 56px;
  --ticker-height-mobile: 42px;
  --ticker-bg: #0a0a12;
  --ticker-z-index: 9999;
  --ticker-border-top: none;
  --ticker-border-bottom: none;
  --ticker-gap: 3.25rem;                 /* separación entre mensajes (config: gap) */
  --ticker-padding-x: var(--ticker-gap);
  --ticker-fade: 4%;

  --ticker-default-color: #fff;
  --ticker-default-font-size: 1rem;
  --ticker-default-font-weight: 700;
  --ticker-default-letter-spacing: 0.03em;

  --ticker-sep-opacity: 0.35;
  --ticker-sep-color: currentColor;

  /* Escala global de tipografía y efectos (cambia en móvil) */
  --tk-scale: 1;
  --tk-mobile-scale: 0.82;

  /* Spotlight */
  --tk-dim: 0.45;
  --tk-active-scale: 1.04;
}


/* ═══════════════════════════════════════════════════════════════
   CONTENEDOR
   ═══════════════════════════════════════════════════════════════ */
.ticker {
  position: relative;
  height: var(--ticker-height);
  background: var(--ticker-bg);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  z-index: var(--ticker-z-index);
  border-top: var(--ticker-border-top);
  border-bottom: var(--ticker-border-bottom);
  contain: layout paint style;
  -webkit-tap-highlight-color: transparent;
}

/* Capas de fondo: permiten que cada mensaje cambie el fondo de la barra */
.ticker__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 650ms ease;
  pointer-events: none;
  will-change: opacity;
}

.ticker__viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 var(--ticker-fade),
    #000 calc(100% - var(--ticker-fade)), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%, #000 var(--ticker-fade),
    #000 calc(100% - var(--ticker-fade)), transparent 100%);
}

.ticker--no-fade .ticker__viewport {
  -webkit-mask-image: none;
  mask-image: none;
}

.ticker-track {
  display: flex;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
  backface-visibility: hidden;
}

.ticker-seq {
  display: flex;
  height: 100%;
  align-items: center;
  flex: 0 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   POSICIONAMIENTO EN LA PÁGINA
   Lo controla el motor con las clases ticker--static / --sticky /
   --fixed, según la configuración global.
   ═══════════════════════════════════════════════════════════════ */

/* Pegajoso: se ancla arriba al llegar a él, sin salir del flujo.
   Ojo: no funciona si algún contenedor padre tiene overflow hidden. */
.ticker--sticky {
  position: sticky;
  top: var(--ticker-offset-top, 0px);
}

/* Fijo: siempre visible. El motor inserta un .ticker__spacer del mismo
   alto para que el contenido de la página no salte hacia arriba. */
.ticker--fixed {
  position: fixed;
  top: var(--ticker-offset-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
}

.ticker__spacer {
  flex: none;
  pointer-events: none;
}

/* Ocultamiento suave al hacer scroll */
.ticker--sticky,
.ticker--fixed {
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .32s ease;
  will-change: transform;
}

.ticker--sticky.is-hidden,
.ticker--fixed.is-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ticker--sticky,
  .ticker--fixed { transition: opacity .2s ease; }
  .ticker--sticky.is-hidden,
  .ticker--fixed.is-hidden { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════
   ARRASTRE
   ═══════════════════════════════════════════════════════════════ */
.ticker--draggable {
  cursor: grab;
  touch-action: pan-y;          /* el scroll vertical de la página sigue funcionando */
  user-select: none;
}
.ticker--draggable.is-grabbing { cursor: grabbing; }

.ticker:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}


/* ═══════════════════════════════════════════════════════════════
   ITEM + ZONA DE FONDO PROPIA
   ═══════════════════════════════════════════════════════════════ */
.ticker-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  flex: 0 0 auto;
  padding: 0 var(--item-pad, var(--ticker-padding-x));
}

.ticker-item--link { cursor: pointer; }
a.ticker-item { color: inherit; text-decoration: none; }
a.ticker-item:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; border-radius: 6px; }

.ticker-item__zone {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Bordes difuminados: la zona se funde con el fondo de la barra */
.ticker-item__zone.is-feathered {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* Textura de panel LED */
.ticker-item__zone.is-dots::after,
.ticker-item__zone.is-lines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
}
.ticker-item__zone.is-dots::after {
  background-image: radial-gradient(circle, rgba(0,0,0,.85) 42%, transparent 45%);
  background-size: 3px 3px;
}
.ticker-item__zone.is-lines::after {
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.6) 0 1px, transparent 1px 3px);
}

/* Zona con gradiente en movimiento */
.ticker-item__zone.is-animated {
  background-size: 200% 100% !important;
  animation: tickerZoneShift 6s linear infinite;
}
@keyframes tickerZoneShift {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

.ticker-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}


/* ═══════════════════════════════════════════════════════════════
   TEXTO
   ═══════════════════════════════════════════════════════════════ */
.ticker-text {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  color: var(--ticker-default-color);
  font-size: calc(var(--msg-fs, var(--ticker-default-font-size)) * var(--tk-scale));
  font-weight: var(--ticker-default-font-weight);
  letter-spacing: var(--ticker-default-letter-spacing);
  line-height: 1;
  transition: opacity .35s ease, transform .35s ease;
}

.tk-mk { display: inline; }
.tk-mk--bg {
  padding: 0.08em 0.38em;
  border-radius: 0.28em;
}
.tk-mk--box {
  padding: 0.05em 0.4em;
  border: 1.5px solid;
  border-radius: 0.25em;
}

.ticker-text--uppercase     { text-transform: uppercase; }
.ticker-text--italic        { font-style: italic; }
.ticker-text--underline     { text-decoration: underline; text-underline-offset: 0.22em; }
.ticker-text--strikethrough { text-decoration: line-through; }
.ticker-text--blur          { filter: blur(var(--msg-blur, 2px)); }

.ticker-text--gradient {
  background: var(--msg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.ticker-text--stroke {
  -webkit-text-stroke: var(--msg-stroke-width, 1px) var(--msg-stroke-color, #000);
  paint-order: stroke fill;
}

.ticker-text--outlined {
  -webkit-text-stroke: var(--msg-stroke-width, 1.5px) var(--msg-stroke-color, currentColor);
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Emojis: sin efectos, conservan su color nativo */
.ticker-emoji {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: initial !important;
  -webkit-text-fill-color: initial !important;
}


/* ═══════════════════════════════════════════════════════════════
   BADGE / DOT / ICONO / CTA / SEPARADOR
   ═══════════════════════════════════════════════════════════════ */
.ticker-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  padding: 0.3em 0.85em;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: calc(var(--badge-fs, 0.72rem) * var(--tk-scale));
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
}
.ticker-badge--square   { border-radius: 4px; }
.ticker-badge--outlined { background: transparent !important; border: 1.5px solid; }
.ticker-badge--pulse    { animation: tickerBadgePulse 1.8s ease-in-out infinite; }

@keyframes tickerBadgePulse {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.06); filter: brightness(1.25); }
}

.ticker-dot {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--dot-color, currentColor);
}
.ticker-dot--pulse { animation: dotPulse 1.4s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.7); opacity: .45; }
}

.ticker-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: calc(1em * var(--tk-scale));
}
.ticker-icon svg { width: 1em; height: 1em; }

/* Imagen propia del mensaje (logo, foto de producto, sello…). El tamaño de
   despliegue lo fija siempre `--img-w`/`--img-h` (inyectadas desde el motor),
   independiente de la resolución real del archivo, y escala igual que el
   resto de los elementos en pantallas chicas a través de `--tk-scale`. */
.ticker-image {
  display: block;
  flex-shrink: 0;
  width: calc(var(--img-w, 28px) * var(--tk-scale));
  height: calc(var(--img-h, 28px) * var(--tk-scale));
  vertical-align: middle;
}

.ticker-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: calc(0.72rem * var(--tk-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity .25s ease, transform .25s ease;
}
.ticker-item--link:hover .ticker-cta { opacity: 1; transform: translateX(2px); }
.ticker-cta__arrow { font-size: 1.1em; }
.ticker-cta--bare  { opacity: 0.55; }

.ticker-sep {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  opacity: var(--ticker-sep-opacity);
  color: var(--ticker-sep-color);
  user-select: none;
  font-size: calc(0.7rem * var(--tk-scale));
}
.ticker-sep-inner { display: inline-block; }

.ticker-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
}
.ticker-pill--rect { border-radius: 5px; }


/* ═══════════════════════════════════════════════════════════════
   CAPA DE EFECTOS DEL PANEL
   ═══════════════════════════════════════════════════════════════ */
.ticker__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ticker__overlay.has-scanlines::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.ticker__overlay.has-grid::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.ticker__overlay.has-vignette {
  box-shadow: inset 0 0 60px rgba(0,0,0,.65), inset 0 0 12px rgba(0,0,0,.5);
}
.ticker__overlay.has-sheen::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; width: 18%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  animation: tickerSheen 7s ease-in-out infinite;
}
@keyframes tickerSheen {
  0%   { transform: translateX(-30vw) skewX(-14deg); }
  60%  { transform: translateX(120vw) skewX(-14deg); }
  100% { transform: translateX(120vw) skewX(-14deg); }
}
.ticker__overlay.has-noise::after {
  content: '';
  position: absolute; inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════════════════════════
   SPOTLIGHT — atenúa lo que no está en el centro
   ═══════════════════════════════════════════════════════════════ */
.ticker--spotlight .ticker-item .ticker-content { opacity: var(--tk-dim); }
.ticker--spotlight .ticker-item.is-active .ticker-content {
  opacity: 1;
  transform: scale(var(--tk-active-scale));
}
.ticker--spotlight .ticker-content {
  transition: opacity .45s ease, transform .45s ease;
}


/* ═══════════════════════════════════════════════════════════════
   TIPOGRAFÍAS
   ═══════════════════════════════════════════════════════════════ */
.ticker-font-display    { font-family: 'DM Serif Display', serif; }
.ticker-font-sans       { font-family: 'Space Grotesk', sans-serif; }
.ticker-font-condensed  { font-family: 'Oswald', sans-serif; }
.ticker-font-impact     { font-family: 'Anton', sans-serif; }
.ticker-font-tech       { font-family: 'Rajdhani', sans-serif; }
.ticker-font-future     { font-family: 'Orbitron', sans-serif; }
.ticker-font-bebas      { font-family: 'Bebas Neue', sans-serif; }
.ticker-font-lato       { font-family: 'Lato', sans-serif; }
.ticker-font-mono       { font-family: 'Courier New', monospace; }
.ticker-font-system     { font-family: system-ui, sans-serif; }


/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES DE TEXTO
   ═══════════════════════════════════════════════════════════════ */
.ticker-anim-pulse   { animation: tickerPulse   var(--anim-speed, 1.5s) ease-in-out infinite; }
.ticker-anim-float   { animation: tickerFloat   var(--anim-speed, 2s)   ease-in-out infinite; }
.ticker-anim-glow    { animation: tickerGlow    var(--anim-speed, 2s)   ease-in-out infinite; }
.ticker-anim-shake   { animation: tickerShake   var(--anim-speed, 4s)   ease-in-out infinite; }
.ticker-anim-rainbow { animation: tickerRainbow var(--anim-speed, 4s)   linear infinite; }
.ticker-anim-blink   { animation: tickerBlink   var(--anim-speed, 1s)   step-start infinite; }
.ticker-anim-bounce  { animation: tickerBounce  var(--anim-speed, .8s)  cubic-bezier(.36,.07,.19,.97) infinite; }
.ticker-anim-flicker { animation: tickerFlicker var(--anim-speed, 3s)   linear infinite; }
.ticker-anim-spin    { animation: tickerSpin    var(--anim-speed, 3s)   linear infinite; display: inline-block; }
.ticker-anim-zoom    { animation: tickerZoom    var(--anim-speed, 2s)   ease-in-out infinite; }
.ticker-anim-glitch  { animation: tickerGlitch  var(--anim-speed, 2.5s) steps(1) infinite; }

.ticker-anim-pulse, .ticker-anim-float, .ticker-anim-glow, .ticker-anim-shake,
.ticker-anim-rainbow, .ticker-anim-blink, .ticker-anim-bounce, .ticker-anim-flicker,
.ticker-anim-spin, .ticker-anim-zoom, .ticker-anim-glitch {
  animation-delay: var(--anim-delay, 0s);
}

@keyframes tickerPulse   { 0%,100% { transform: scale(1); }      50% { transform: scale(1.07); } }
@keyframes tickerFloat   { 0%,100% { transform: translateY(0); }  50% { transform: translateY(-3px); } }
@keyframes tickerShake   { 0%,100% { transform: translateX(0); } 2% { transform: translateX(-3px); } 4% { transform: translateX(3px); } 6% { transform: translateX(0); } }
@keyframes tickerRainbow { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes tickerBlink   { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes tickerBounce  { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-3px); } }
@keyframes tickerZoom    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes tickerSpin    { from { transform: rotate(0); } to { transform: rotate(360deg); } }

@keyframes tickerGlow {
  0%, 100% { filter: brightness(1)   drop-shadow(0 0 var(--glow-size, 6px) var(--glow-color, var(--neon-color, currentColor))); }
  50%      { filter: brightness(1.25) drop-shadow(0 0 calc(var(--glow-size, 6px) * 1.6) var(--glow-color, var(--neon-color, currentColor))); }
}

/* Parpadeo de tubo de neón: irregular, como un letrero real */
@keyframes tickerFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; filter: brightness(1); }
  20%, 24%, 55%                     { opacity: .55; filter: brightness(.7); }
}

@keyframes tickerGlitch {
  0%, 92%, 100% { transform: translate(0); }
  93%  { transform: translate(-2px, 1px); }
  94%  { transform: translate(2px, -1px); }
  95%  { transform: translate(-1px, 0); }
}

/* Barrido de luz sobre el texto */
.ticker-fx-shine {
  background: linear-gradient(100deg,
    currentColor 0%, currentColor 40%,
    #fff 50%, currentColor 60%, currentColor 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: tickerShine 3.4s linear infinite;
}
@keyframes tickerShine {
  from { background-position: 120% 0; }
  to   { background-position: -20% 0; }
}

/* Wave: requiere que el motor divida el texto en caracteres */
.ticker-anim-wave .ticker-char {
  display: inline-block;
  animation: tickerWave var(--anim-speed, 1.2s) ease-in-out infinite;
}
@keyframes tickerWave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Destello que cruza todo el texto (como {{shine|...}} pero en el mensaje entero) */
.ticker-anim-shine {
  background: linear-gradient(100deg,
    var(--ticker-shine-base, currentColor) 0%, var(--ticker-shine-base, currentColor) 40%,
    #fff 50%, var(--ticker-shine-base, currentColor) 60%, var(--ticker-shine-base, currentColor) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tickerShine var(--anim-speed, 3.4s) linear infinite;
  animation-delay: var(--anim-delay, 0s);
}

/* Se escribe solo: el texto aparece de izquierda a derecha, queda un rato y vuelve a empezar */
.ticker-anim-typing {
  clip-path: inset(-0.4em 100% -0.4em 0);
  animation: tickerTyping var(--anim-speed, 4s) steps(28, end) infinite;
  animation-delay: var(--anim-delay, 0s);
}
@keyframes tickerTyping {
  0%        { clip-path: inset(-0.4em 100% -0.4em 0); }
  45%, 90%  { clip-path: inset(-0.4em -0.4em -0.4em 0); }
  100%      { clip-path: inset(-0.4em 100% -0.4em 0); }
}

/* Cuenta regresiva ({cuenta} en el texto): números del mismo ancho para que no salte */
.ticker-cd { display: inline-block; font-variant-numeric: tabular-nums; text-align: center; }


/* ═══════════════════════════════════════════════════════════════
   BOTÓN DE PAUSA (WCAG 2.2.2: lo que se mueve se tiene que poder detener)
   ═══════════════════════════════════════════════════════════════ */
.ticker__pausa {
  position: absolute;
  right: 6px;
  top: 50%;
  z-index: 3;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s ease, background .2s ease;
}
.ticker__pausa:hover, .ticker__pausa:focus-visible, .ticker.is-paused .ticker__pausa { opacity: 1; }
.ticker__pausa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ticker__pausa svg { width: 11px; height: 11px; fill: currentColor; }

/* ═══════════════════════════════════════════════════════════════
   TEXTO ACCESIBLE (leído por lectores de pantalla, invisible)
   Con teclado: al llegar a un enlace la lista se muestra abajo.
   ═══════════════════════════════════════════════════════════════ */
.ticker__sr:focus-within {
  width: auto; height: auto; margin: 0; padding: 6px 10px;
  clip: auto; clip-path: none; overflow: visible;
  left: 8px; bottom: 4px; z-index: 4;
  background: rgba(0,0,0,.92); border-radius: 8px; font-size: 13px;
}
.ticker__sr a { color: #fff; }
.ticker__sr li { display: inline; margin-right: 12px; }
.ticker__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  list-style: none;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ticker {
    --tk-scale: var(--tk-mobile-scale);
    --ticker-padding-x: calc(var(--ticker-gap) * 0.48);
    height: var(--ticker-height-mobile);
  }
  /* Los halos grandes cuestan caro en GPU móvil */
  .ticker__overlay.has-sheen::before { animation-duration: 9s; }
  .ticker-badge { padding: 0.26em 0.7em; letter-spacing: 0.06em; }
  .ticker-cta:not(.ticker-cta--bare) { display: none; }
}

@media (max-width: 420px) {
  .ticker { --ticker-padding-x: calc(var(--ticker-gap) * 0.36); }
}

/* forceMobile (vista previa "Celular" del constructor): igual que max-width 768px */
.ticker.ticker--movil {
  --tk-scale: var(--tk-mobile-scale);
  --ticker-padding-x: calc(var(--ticker-gap) * 0.36);
  height: var(--ticker-height-mobile);
}
.ticker--movil .ticker__overlay.has-sheen::before { animation-duration: 9s; }
.ticker--movil .ticker-badge { padding: 0.26em 0.7em; letter-spacing: 0.06em; }
.ticker--movil .ticker-cta:not(.ticker-cta--bare) { display: none; }

/* Pantallas grandes: un poco más de aire entre mensajes */
@media (min-width: 1600px) {
  .ticker { --ticker-padding-x: calc(var(--ticker-gap) * 1.25); }
}


/* ═══════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   El recorrido se detiene; el usuario puede arrastrar para leer.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ticker *,
  .ticker *::before,
  .ticker *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}
.ticker--reduced *,
.ticker--reduced *::before,
.ticker--reduced *::after {
  animation: none !important;
  transition-duration: 1ms !important;
}
.ticker--reduced .ticker-anim-typing { clip-path: none; }