/* =========================================================================
   Rey Mono — hoja de estilos única.
   Fondo blanco, filetes de 1 px, composición distinta en cada bloque y
   un mismo ritmo vertical en toda la página.
   Cambiar de juego = cambiar los cinco colores de :root.
   ========================================================================= */

@font-face{
  font-family:'Marykate';
  src:url('/assets/fonts/marykate.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* --- Paleta de marca --- */
  --c-ink:#07242c;
  --c-forest:#1e5929;
  --c-yellow:#fcdd18;
  --c-mint:#99cfb2;
  --c-white:#ffffff;

  /* --- Fondos y superficies --- */
  --bg:#ffffff;
  --bg-2:#f5faf7;                  /* banda alterna: menta al 4 % */
  --surface:#ffffff;
  --line:#e3ece7;                  /* filete */
  --line-2:#cbe2d5;                /* filete acentuado */

  /* --- Texto --- */
  --tx:#07242c;
  --tx-2:#4c6169;                  /* cuerpo — 7,1:1 sobre blanco */
  --tx-3:#6b7f86;                  /* etiquetas — 4,7:1 sobre blanco */

  --font-display:'Marykate','Trebuchet MS',system-ui,sans-serif;
  --font:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r:14px;
  --r-lg:22px;

  --nav-h:64px;
  --wrap:1200px;

  /* Ritmo único: mismo aire arriba y abajo en todos los bloques */
  --space:clamp(4.5rem,9vw,8rem);
  --gap:clamp(2rem,4vw,3rem);
}
@media (min-width:900px){ :root{ --nav-h:78px } }

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}

body{
  background:var(--bg);color:var(--tx);
  font-family:var(--font);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* Titulares: Marykate y todo en mayúsculas.
   La fuente sólo trae un peso, así que se usa el 400 real en lugar de una
   negrita sintética, y su caja llega al 100 % del em: la interlínea no puede
   bajar de 1,05 sin recortar. El texto corrido se queda en Nunito porque
   Marykate es una fuente de rotulación e ilegible a tamaño de párrafo. */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;letter-spacing:.005em;line-height:1.05;
}
h1{font-size:clamp(2.9rem,5.2vw + 1rem,5rem)}
h2{font-size:clamp(2.1rem,2.6vw + 1rem,3.3rem)}
h3{font-size:clamp(1.25rem,.55vw + 1.05rem,1.55rem)}
h4{font-size:1.1rem}
h1,h2,h3,h4,.btn,.nav__links a,.nav__menu ul a{text-transform:uppercase}
.btn,.nav__links a,.nav__menu ul a{font-family:var(--font-display);font-weight:400;letter-spacing:.02em}
/* Cifras grandes: mismo trazo que los titulares. Los precios NO, porque
   Marykate no trae el glifo del euro y el símbolo saltaría a la fuente
   de respaldo dentro de la misma palabra. */
.spec__value,.fact__value,.stat__value,.skill__num,.step__num{
  font-family:var(--font-display);font-weight:400;letter-spacing:0;
}
/* Excepción: las preguntas de las FAQs se quedan en Nunito y en caja mixta.
   Son textos largos y es donde más se lee (y donde miran los buscadores
   de IA): en mayúsculas y con fuente de rótulo se leen mucho peor. */
.faq__q h3{font-family:var(--font);text-transform:none}

.wrap{width:min(var(--wrap),100% - 2.25rem);margin-inline:auto}
@media (min-width:700px){ .wrap{width:min(var(--wrap),100% - 4rem)} }

.eyebrow{
  display:inline-block;font-size:.7rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-forest);
  margin-bottom:1rem;
}
.lead{color:var(--tx-2);font-size:1.05rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--c-forest);outline-offset:3px;border-radius:6px}
.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:100;background:var(--c-yellow);color:var(--c-ink);
  padding:.7rem 1.1rem;border-radius:0 0 var(--r) var(--r);font-weight:800;transition:top .18s ease;
}
.skip-link:focus{top:0}

.todo{
  display:inline-block;background:#fff8d6;color:#6b5300;
  border:1px dashed #d9bb2a;border-radius:7px;
  padding:.22rem .55rem;font-weight:700;font-size:.76rem;
}
.todo-img{
  display:grid;place-items:center;text-align:center;width:100%;
  min-height:160px;aspect-ratio:16/9;padding:1rem;line-height:1.4;background:var(--bg-2);
}

/* --- Botones -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--c-ink);color:var(--c-white);
  font-size:.92rem;font-weight:800;letter-spacing:-.01em;
  padding:.82rem 1.55rem;border-radius:999px;border:1px solid var(--c-ink);
  transition:transform .2s cubic-bezier(.2,.8,.25,1),background-color .2s,box-shadow .25s;
  cursor:pointer;text-align:center;
}
.btn:hover{transform:translateY(-2px);background:#0d3a45;box-shadow:0 14px 28px rgba(7,36,44,.18)}
.btn--lg{padding:.95rem 1.85rem;font-size:.98rem}
.btn--sm{padding:.55rem 1.1rem;font-size:.84rem}
.btn--accent{background:var(--c-yellow);border-color:var(--c-yellow);color:var(--c-ink)}
.btn--accent:hover{background:#ffe74d;border-color:#ffe74d;box-shadow:0 14px 28px rgba(252,221,24,.35)}
.btn--ghost{background:transparent;color:var(--c-ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--bg-2);border-color:var(--c-ink);box-shadow:none}
.btn__price{font-size:.78rem;font-weight:800;opacity:.7;padding-left:.7rem;border-left:1px solid rgba(255,255,255,.28)}
.btn--accent .btn__price,.btn--ghost .btn__price{border-left-color:rgba(7,36,44,.2)}

/* --- Menú ----------------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);
  background:rgba(255,255,255,.88);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
}
.nav__inner{display:flex;align-items:center;gap:1rem;height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;flex:0 0 auto}
.nav__wordmark{font-family:var(--font-display);font-size:1.4rem;color:var(--c-forest)}
.nav__logo-img{height:36px;width:auto}
@media (min-width:900px){ .nav__logo-img{height:46px} }
.nav__links{display:none;flex:1 1 auto;justify-content:center}
.nav__links ul{display:flex;gap:2.25rem}
.nav__links a{font-size:.88rem;font-weight:700;color:var(--tx-2);transition:color .2s}
.nav__links a:hover{color:var(--tx)}
.nav__actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.nav__cta{white-space:nowrap}
.nav__menu{position:relative}
.nav__menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;border:1px solid var(--line)}
.nav__menu summary::-webkit-details-marker{display:none}
.nav__burger,.nav__burger::before,.nav__burger::after{content:"";display:block;width:18px;height:2px;border-radius:2px;background:var(--tx)}
.nav__burger{position:relative}
.nav__burger::before{position:absolute;top:-6px}
.nav__burger::after{position:absolute;top:6px}
.nav__menu ul{
  position:absolute;right:0;top:calc(100% + .6rem);min-width:210px;background:var(--c-white);
  border:1px solid var(--line);border-radius:var(--r);padding:.4rem;box-shadow:0 24px 48px rgba(7,36,44,.14);
}
.nav__menu ul a{display:block;padding:.65rem .85rem;border-radius:9px;font-size:.9rem;font-weight:700;color:var(--tx-2)}
.nav__menu ul a:hover{background:var(--bg-2);color:var(--tx)}
@media (min-width:900px){ .nav__links{display:flex} .nav__menu{display:none} }

/* --- Ritmo de bloque ------------------------------------------------------- */
.block{position:relative;padding:var(--space) 0}
.block--alt{background:var(--bg-2);border-block:1px solid var(--line)}

/* Toda la página se compone sobre un mismo eje central: la cabecera de cada
   bloque va centrada y el contenido debajo, nunca pegado a un lateral.
   La única excepción es el header, que mantiene su reparto a dos columnas. */
.split{display:grid;gap:var(--gap);justify-items:center;text-align:center}
.split__head{max-width:60ch;margin-inline:auto}
.split__head h2{margin:0 0 1rem;text-wrap:balance}
.split__body{width:100%}

.band{display:grid;gap:var(--gap);justify-items:center;text-align:center}
.band__label h2{font-size:clamp(1.6rem,1.4vw + 1rem,2.1rem);margin-bottom:.4rem}
.band__label p{color:var(--tx-3);font-size:.9rem;max-width:34ch;margin-inline:auto}
.band__body{width:100%}

.block__head{max-width:none;margin:0 auto clamp(2.5rem,5vw,3.75rem);text-align:center}
.block__head h2{margin:0 auto 1rem;max-width:24ch;text-wrap:balance}
.block__head .lead{max-width:58ch;margin-inline:auto}

.subhead{
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx-3);margin:3rem 0 1.25rem;text-align:center;
}
.split__body > .subhead:first-child{margin-top:0}

/* --- 1. Header ------------------------------------------------------------- */
.hero{
  position:relative;margin-top:var(--nav-h);overflow:hidden;
  padding:clamp(3rem,6vw,5.5rem) 0 var(--space);
  background:
    radial-gradient(46% 55% at 82% 40%,rgba(153,207,178,.30),transparent 66%),
    radial-gradient(38% 46% at 8% 4%,rgba(252,221,24,.18),transparent 64%),
    var(--bg);
}
.hero__inner{position:relative;z-index:1;display:grid;gap:clamp(3rem,6vw,4.5rem)}
.hero__copy{max-width:36rem}
.hero h1{margin:0 0 1.4rem;text-wrap:balance}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .w > span{
  display:inline-block;translate:0 115%;
  animation:wordUp .9s cubic-bezier(.16,.84,.3,1) forwards;
  animation-delay:calc(var(--i) * 42ms + 60ms);
}
@keyframes wordUp{to{translate:0 0}}
.hero__hook{color:var(--tx-2);font-size:1.08rem;max-width:44ch}
/* Los tres datos del juego, en tira con filete. Sustituyen al bloque de
   ficha rápida, que se ha eliminado. */
.hero__specs{
  display:flex;margin:2rem 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.spec{flex:1 1 0;padding:1.1rem 0}
.spec + .spec{padding-left:1.4rem;border-left:1px solid var(--line)}
.spec__value{display:block;font-size:clamp(1.5rem,2vw + .9rem,1.95rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.spec__label{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-top:.35rem;display:block}

.hero__points{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1.5rem 0 0}
.hero__points li{
  position:relative;font-size:.84rem;color:var(--tx-3);
}
.hero__points li + li{padding-left:1.4rem}
.hero__points li + li::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:4px;height:4px;border-radius:50%;background:var(--line-2);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.25rem}
.up{opacity:0;translate:0 16px;animation:upIn .7s cubic-bezier(.16,.84,.3,1) forwards;animation-delay:calc(var(--i,0) * 70ms + 240ms)}
@keyframes upIn{to{opacity:1;translate:0 0}}

.hero__media{position:relative}
.fan{position:relative;display:grid;place-items:center;min-height:clamp(360px,44vw,510px);padding-bottom:2.5rem}
.fan__card{
  position:absolute;width:clamp(168px,21vw,248px);
  filter:drop-shadow(0 24px 34px rgba(7,36,44,.22));
  transition:rotate .5s cubic-bezier(.2,.8,.25,1),translate .5s cubic-bezier(.2,.8,.25,1),filter .5s;
}
.fan__img{width:100%;height:auto;display:block}
/* Solo mientras falte la carta: caja marcada con la misma proporción */
.fan__card .todo-img{
  aspect-ratio:620/865;min-height:0;font-size:.54rem;line-height:1.3;padding:.6rem;
  overflow:hidden;border-radius:var(--r-lg);border:1px dashed #d9bb2a;
}
.fan__card--1{rotate:-13deg;translate:-64% 6%;z-index:1;scale:.88}
.fan__card--2{rotate:0deg;translate:0 -3%;z-index:3;filter:drop-shadow(0 30px 44px rgba(7,36,44,.28))}
.fan__card--3{rotate:13deg;translate:64% 8%;z-index:2;scale:.88}
.fan:hover .fan__card--1{rotate:-17deg;translate:-78% 2%}
.fan:hover .fan__card--3{rotate:17deg;translate:78% 4%}

.hero__badge{
  position:absolute;right:0;top:1rem;z-index:4;display:grid;place-content:center;
  width:92px;height:92px;text-align:center;border-radius:50%;
  background:var(--c-yellow);color:var(--c-ink);
}
.hero__badge b{font-size:1.7rem;font-weight:800;line-height:1}
.hero__badge span{font-size:.56rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:0 .6rem}
@media (min-width:900px){
  .hero__inner{grid-template-columns:1fr 1fr;align-items:center}
  .hero__copy{max-width:none}
  .hero__badge{right:-1.5rem;top:-1.5rem}
}

/* --- 2. Ficha rápida: tira de datos, sin cajas ----------------------------- */
.facts{padding:0 0 var(--space)}
.facts__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.fact{display:grid;justify-items:center;text-align:center;gap:.1rem;padding:clamp(1.5rem,3vw,2.25rem) 1rem}
.fact + .fact{border-left:1px solid var(--line)}
.fact__icon{color:var(--c-forest);line-height:0;margin-bottom:.8rem}
.fact__icon svg{width:24px;height:24px}
.fact__value{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.fact__label{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--c-forest);margin-top:.45rem}
.fact__detail{font-size:.82rem;color:var(--tx-3)}

.meta{display:grid;margin-top:2rem}
.meta__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1rem;padding:.95rem 0;border-top:1px solid var(--line)}
.meta dt{font-size:.86rem;color:var(--tx-3)}
.meta dd{margin:0;font-size:.92rem;font-weight:700}
.credits{display:grid;gap:0;margin-top:0}
.credit{display:flex;align-items:center;gap:1rem;padding:1.15rem 0;border-top:1px solid var(--line)}
.credit__icon{color:var(--c-forest);line-height:0;flex:0 0 auto}
.credit__icon svg{width:20px;height:20px}
.credit__body{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem}
.credit__label{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.credit__value{font-weight:700;font-size:.95rem}
@media (min-width:760px){
  .meta{grid-template-columns:repeat(2,1fr);column-gap:3.5rem}
  .credits{grid-template-columns:repeat(2,1fr);column-gap:3.5rem}
}

/* --- 3. Medios: etiqueta + carrusel --------------------------------------- */
.block--media{padding-block:clamp(3rem,6vw,4.5rem);border-block:1px solid var(--line)}
.media__title{font-size:clamp(1.7rem,1.4vw + 1rem,2.2rem);margin-bottom:1.75rem;text-align:center}
.marquee{
  --marquee-gap:2.5rem;--marquee-slot:180px;
  display:flex;gap:var(--marquee-gap);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.marquee__track{display:flex;align-items:center;gap:var(--marquee-gap);flex:0 0 auto;animation:marquee 48s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{to{translate:calc(-100% - var(--marquee-gap)) 0}}
.marquee__item{flex:0 0 var(--marquee-slot);width:var(--marquee-slot);height:40px;display:flex;align-items:center;justify-content:center}
.marquee__logo{max-height:28px;max-width:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:opacity .25s}
.marquee__item:hover .marquee__logo{opacity:1}
.marquee__name{font-size:.9rem;font-weight:700;color:var(--tx-3);white-space:nowrap}

/* --- Cifras ---------------------------------------------------------------- */
.stats{padding:clamp(3rem,6vw,4.5rem) 0;background:var(--bg-2);border-bottom:1px solid var(--line)}
.stats__grid{display:grid;gap:2rem 1rem;grid-template-columns:repeat(2,1fr)}
.stat{display:grid;gap:.2rem;padding-left:1.25rem;border-left:1px solid var(--line-2)}
.stat__value{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.stat__label{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3)}
@media (min-width:760px){ .stats__grid{grid-template-columns:repeat(4,1fr)} }

/* --- 4. Premios: uno destacado y los otros en lista --------------------- */
.awards-split{display:grid;gap:var(--gap);align-items:center}
@media (min-width:900px){ .awards-split{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5rem)} }
.award--hero{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(2rem,4vw,3rem);text-align:center;
}
.award__logo{display:grid;place-items:center}
.award__logo--big{height:180px;margin-bottom:1.6rem}
.award__logo--big .award__img{max-height:180px}
.award__img{width:auto;object-fit:contain}
.award__logo .todo-img{min-height:90px;aspect-ratio:auto;font-size:.66rem}
.award__flag{
  display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:var(--c-yellow);color:var(--c-ink);border-radius:999px;padding:.32rem .85rem;margin-bottom:1rem;
}
.award__name{font-size:1.05rem;margin-bottom:.2rem}
.award__name--big{font-size:clamp(1.4rem,1.6vw + 1rem,1.9rem);margin-bottom:.5rem}
.award__org{font-size:.88rem;color:var(--c-forest);font-weight:700}
.award__note{font-size:.9rem;color:var(--tx-3);margin-top:.7rem}
.awards{display:grid;gap:0;margin-top:2rem}
.award{display:grid;grid-template-columns:64px 1fr;gap:1.25rem;align-items:center;padding:1.25rem 0;border-top:1px solid var(--line)}
.award:last-child{border-bottom:1px solid var(--line)}
.award .award__logo{height:auto}
.award .award__img{max-height:64px}
.award--empty .award__logo{opacity:.5}

/* --- 5. Los tres vídeos --------------------------------------------------- */
.clips{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.clip__frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-ink);aspect-ratio:9/16;
  box-shadow:0 24px 50px rgba(7,36,44,.16);
}
.clip__video{width:100%;height:100%;object-fit:cover;display:block}
.clip__name{
  position:absolute;left:.85rem;top:.85rem;
  background:rgba(7,36,44,.78);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.34rem .8rem;border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.clip__sound{
  position:absolute;left:50%;bottom:.9rem;translate:-50% 0;
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  background:rgba(7,36,44,.8);color:#fff;border:0;
  font-size:.76rem;font-weight:700;padding:.5rem 1rem;border-radius:999px;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .2s;
}
.clip__sound:hover{background:rgba(7,36,44,.95)}
.clip__ico{width:15px;height:15px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M7%202.5L4%205.5H2v5h2l3%203z'%20fill='%23fff'/%3E%3Cpath%20d='M10.5%206a3%203%200%20010%204M12.6%204a6%206%200%20010%208'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.clip__sound[aria-pressed="true"]{background:var(--c-yellow);color:var(--c-ink)}
.clip__sound[aria-pressed="true"] .clip__ico{filter:invert(1)}

/* --- 6. Los cuatro pasos, tipo polaroid ------------------------------------ */
.steps{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}
.step{
  position:relative;background:var(--c-white);border-radius:8px;
  padding:.75rem .75rem 1.6rem;text-align:center;
  box-shadow:0 18px 44px rgba(7,36,44,.15);
  transition:rotate .3s cubic-bezier(.2,.8,.25,1),translate .3s cubic-bezier(.2,.8,.25,1);
}
.step:nth-child(odd){rotate:-1.7deg}
.step:nth-child(even){rotate:1.5deg}
.step:hover{rotate:0deg;translate:0 -6px}
.step__num{
  position:absolute;left:-16px;top:-20px;z-index:2;
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  font-size:1.35rem;font-weight:800;
  background:var(--c-yellow);color:var(--c-ink);
  box-shadow:0 8px 18px rgba(7,36,44,.18);
}
.step--mint .step__num{background:var(--c-mint)}
.step--forest .step__num{background:var(--c-forest);color:var(--c-white)}
.step__media{width:100%}
.step__img,.step__media .todo-img{
  width:100%;border-radius:3px;aspect-ratio:4/5;object-fit:cover;min-height:0;font-size:.66rem;
}
.step__title{
  margin:1.1rem 0 .5rem;font-size:1.05rem;text-transform:uppercase;letter-spacing:-.01em;
}
.step__text{color:var(--tx-2);font-size:.91rem;padding:0 .4rem}
@media (min-width:860px){ .steps .step:nth-child(even){margin-top:2.25rem} }

/* --- 7. Componentes: menú de tipos + carta y descripción ---------------- */
/* Menú de tipos de carta. Sin JavaScript no sirve de nada, así que no se
   pinta: en su lugar quedan todas las fichas seguidas. */
.deck__tabs{display:none;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.25rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.deck.js-deck .deck__tabs{display:flex}
.deck__tab{
  display:inline-flex;align-items:center;gap:.5rem;background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:.6rem 1.15rem;
  font-size:.9rem;font-weight:700;color:var(--tx-2);cursor:pointer;transition:.2s;
}
.deck__tab span{font-size:.72rem;font-weight:800;opacity:.6}
.deck__tab:hover{border-color:var(--line-2);color:var(--tx)}
.deck__tab.is-on{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-white)}
.deck__tab.is-on span{opacity:.75}

/* Ficha del tipo de carta. Sin JS se leen todas; con JS, solo la abierta. */
.deck__intros{max-width:66ch;margin:0 auto 2.25rem}
.deck__intro{color:var(--tx-2);font-size:.95rem}
.deck__intro + .deck__intro{margin-top:.9rem}
.deck.js-deck .deck__intro{display:none;margin-top:0}
.deck.js-deck .deck__intro.is-active{display:block}

.deck__body{display:grid;gap:2.5rem}
@media (min-width:980px){
  .deck__body{grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,5vw,4.5rem);align-items:start}
  .deck__stage{position:sticky;top:calc(var(--nav-h) + 3rem)}
}
/* La columna de la carta solo tiene sentido con el menú funcionando */
.deck__stage{display:none}
.deck.js-deck .deck__stage{display:block}
.deck__card{margin:0;position:relative;display:grid;place-items:center;padding:1rem 0}
.deck__card::before{
  content:"";position:absolute;width:min(88%,330px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(252,221,24,.32),transparent 72%);
}
.deck__img{position:relative;width:min(100%,290px);border-radius:var(--r);box-shadow:0 26px 54px rgba(7,36,44,.18)}
.deck__card .todo-img{position:relative;width:min(100%,290px);aspect-ratio:5/7;min-height:0;border-radius:var(--r);font-size:.66rem}
.deck.js-deck .deck__card{display:none}
.deck.js-deck .deck__card.is-active{display:grid}

.deck__text + .deck__text{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}
.deck.js-deck .deck__text{display:none;margin-top:0;padding-top:0;border-top:0}
.deck.js-deck .deck__text.is-active{display:block}
.deck__group{font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--c-forest);margin-bottom:.5rem}
.deck__name{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;font-size:clamp(1.4rem,1.4vw + 1rem,1.8rem);margin-bottom:.7rem}
.deck__desc{color:var(--tx-2);font-size:.98rem;max-width:52ch}

.deck__list{display:none}
.deck.js-deck .deck__list{
  display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--line);
}
.deck__list li.is-hidden{display:none}
.deck__pick{
  display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:.45rem .9rem .45rem .45rem;cursor:pointer;transition:border-color .2s,background-color .2s;
}
.deck__pick:hover{border-color:var(--line-2)}
.deck__pick.is-on{border-color:var(--c-ink);background:var(--bg-2)}
.deck__thumb{flex:0 0 auto;line-height:0}
.deck__thumb-img{width:34px;height:48px;object-fit:cover;border-radius:5px}
.deck__thumb-empty{display:block;width:34px;height:48px;border-radius:5px;background:#e4f0ea;border:1px dashed var(--line-2)}
.deck__pick-name{flex:1 1 auto;font-size:.9rem;font-weight:700}
.deck__pick-qty{font-size:.74rem;font-weight:800;color:var(--c-forest)}
.deck__qty{font-size:.8rem;font-weight:800;color:var(--c-forest)}
/* Dos navegadores en la misma página: el de la expansión respira arriba */
.subhead + .deck{margin-top:0}

.comps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.comp{display:grid;gap:.85rem;align-content:start;text-align:center}
.comp__media{width:100%}
.comp__img,.comp__media .todo-img{
  width:100%;border-radius:var(--r);border:1px solid var(--line);
  aspect-ratio:5/7;object-fit:cover;min-height:0;font-size:.56rem;
  transition:transform .3s cubic-bezier(.2,.8,.25,1);
}
.comp:hover .comp__img{transform:translateY(-6px)}
.comp__name{display:flex;align-items:baseline;justify-content:center;gap:.5rem;flex-wrap:wrap;font-size:.95rem}
.comp__qty{font-size:.72rem;font-weight:800;color:var(--c-forest)}
.comp__text{color:var(--tx-3);font-size:.82rem;margin-top:.3rem}

/* --- Drops ----------------------------------------------------------------- */
.drops{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.drop{display:grid;gap:1.5rem;align-content:start;text-align:center}
/* Los drops son cartas, no fotos apaisadas: se muestran verticales y del
   mismo tamaño que en el navegador de cartas. */
.drop__media{display:grid;justify-items:center}
.drop__img{
  width:min(100%,280px);border-radius:var(--r);
  box-shadow:0 26px 54px rgba(7,36,44,.18);
}
.drop__media .todo-img{
  width:min(100%,280px);aspect-ratio:620/865;
  min-height:0;border-radius:var(--r);font-size:.66rem;
}
.drop__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem;margin-bottom:.55rem}
.drop__code{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink);background:var(--c-yellow);border-radius:999px;padding:.16rem .7rem}
.drop__status{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);border:1px solid var(--line);border-radius:999px;padding:.16rem .6rem}
.drop__flag{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink);background:var(--c-mint);border-radius:999px;padding:.18rem .6rem}
.drop__name{font-size:1.35rem;margin-bottom:.15rem}
.drop__type{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-forest);margin-bottom:.6rem}
.drop__text{color:var(--tx-2);font-size:.92rem}
.drop__how{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.drop__how-title{font-size:.95rem;margin-bottom:.7rem;color:var(--c-forest)}
.drop__ways{display:grid;gap:.45rem;justify-content:center}
.drop__ways li{
  position:relative;padding-left:1.35rem;text-align:left;
  color:var(--tx-2);font-size:.9rem;
}
/* La marca no es sólo el color: es un tick, así que se entiende igual sin él */
.drop__ways li::before{
  content:"";position:absolute;left:0;top:.44em;width:.42rem;height:.72rem;
  border:solid var(--c-forest);border-width:0 2px 2px 0;rotate:45deg;
}
.drop--soon .drop__media{opacity:.6}

/* --- 8. Expansión ---------------------------------------------------------- */
.exp{display:grid;gap:var(--gap);justify-items:center;text-align:center;margin-bottom:var(--gap)}
.exp__media{width:min(100%,540px)}
.exp__img,.exp__media .todo-img{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:0 30px 70px rgba(7,36,44,.12)}
.exp__body h3{margin-bottom:1.1rem;font-size:1.25rem}
.ticks{display:none}
.ticks li{position:relative;padding-left:1.8rem;color:var(--tx-2);font-size:.95rem}
.ticks li::after{
  content:"";position:absolute;left:2px;top:.5em;width:6px;height:11px;
  border-right:2px solid var(--c-forest);border-bottom:2px solid var(--c-forest);rotate:45deg;
}
.exp__price{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;margin-bottom:1.25rem}


/* --- 9. Reglamento --------------------------------------------------------- */
.langs{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.75rem 0 0}
.lang{
  display:grid;gap:.05rem;text-align:left;line-height:1.3;background:var(--c-white);
  border:1px solid var(--line);border-radius:11px;padding:.6rem 1.1rem;
  font-weight:700;font-size:.88rem;cursor:pointer;transition:.2s;
}
.lang:hover{border-color:var(--c-ink)}
.lang[aria-selected="true"]{background:var(--c-ink);color:var(--c-white);border-color:var(--c-ink)}
.lang__note{display:block;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.langs__single{color:var(--tx-3);margin-top:1.5rem}
.rules{width:100%}
.rules__frame{width:100%;aspect-ratio:16/11;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(7,36,44,.12)}
.rules__frame--empty{display:grid;place-items:center;padding:3rem 2rem;border-style:dashed;box-shadow:none}
.rules__dl{margin-top:1.25rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}

/* --- 10. Comprar ----------------------------------------------------------- */
.products{display:grid;gap:var(--gap)}
.product{display:grid;gap:1.5rem;align-content:start;padding:1.25rem;border:1px solid transparent;border-radius:var(--r-lg);text-align:center}
.product__img,.product__media .todo-img{
  width:100%;border-radius:var(--r-lg);border:1px solid var(--line);aspect-ratio:1/1;object-fit:cover;
  transition:transform .35s cubic-bezier(.2,.8,.25,1);
}
.product:hover .product__img{transform:translateY(-8px)}
.product__tag{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-forest);padding:.24rem 0;margin-bottom:.5rem}
.product__name{font-size:1.5rem}
.product__desc{color:var(--tx-2);font-size:.95rem;margin:.5rem 0 1.1rem}
.product__price{font-size:2rem;font-weight:800;letter-spacing:-.04em;margin-bottom:1.25rem}
@media (min-width:760px){ .products{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .products{grid-template-columns:repeat(3,1fr)} }
.buy-spec{display:grid;gap:0;margin-top:clamp(2.5rem,5vw,3.5rem)}
.buy-spec__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.35rem .9rem;padding:.95rem 0;border-top:1px solid var(--line)}
.buy-spec__row:last-child{border-bottom:1px solid var(--line)}
.buy-spec dt{font-size:.86rem;color:var(--tx-3)}
.buy-spec dd{margin:0;font-size:.92rem;font-weight:700}
@media (min-width:760px){ .buy-spec{grid-template-columns:repeat(2,1fr);column-gap:3.5rem} .buy-spec__row:nth-child(2){border-top:1px solid var(--line)} }
.product--featured{background:var(--bg-2);border-color:var(--line-2)}
.product--featured .product__tag{color:var(--c-ink);background:var(--c-yellow);border-radius:999px;padding:.24rem .7rem}

/* --- 11. Para quién es: foto a sangre de cabecera + cuatro columnas ---- */
/* La foto abre el bloque de lado a lado, así que el bloque pierde su
   espacio superior y lo recupera la propia banda. */
.block--audiencia{padding-top:0}
.audience__hero{margin-bottom:var(--space)}
.audience__hero-img{
  width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;object-position:center 42%;
}
@media (min-width:760px){ .audience__hero-img{aspect-ratio:21/9} }
@media (min-width:1400px){ .audience__hero-img{aspect-ratio:24/9} }


.profiles{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.profile{display:grid;align-content:start;text-align:center}
.profile__icon{
  display:grid;place-items:center;height:120px;margin-bottom:1.25rem;
  background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--c-forest);
  transition:border-color .25s,transform .3s cubic-bezier(.2,.8,.25,1);
}
.profile:hover .profile__icon{border-color:var(--line-2);transform:translateY(-4px)}
.profile__icon svg{width:52px;height:52px}
.profile__title{margin-bottom:.5rem;font-size:1.1rem}
.profile__text{color:var(--tx-2);font-size:.92rem}

/* --- ABJ: rejilla de habilidades + tarjeta para docentes ---------------- */
.abj__head{margin:0 auto clamp(2rem,4vw,2.75rem);max-width:70ch;text-align:center}
.abj__head h2{margin:.35rem 0 1rem}
.chip-tags{display:none}
.chip-tag{
  font-size:.78rem;color:var(--tx-2);border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;
}
.chip-tag b{color:var(--tx);font-weight:800}
.abj__lead{max-width:62ch;margin-inline:auto;margin-bottom:1.5rem}
.skills{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.skill{text-align:center;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem 1.5rem;display:grid;align-content:start;
}
.skill__num{font-size:1.4rem;font-weight:800;letter-spacing:-.04em;color:var(--c-mint);margin-bottom:.75rem}
.skill__title{font-size:1.05rem;margin-bottom:.5rem}
.skill__text{color:var(--tx-2);font-size:.92rem}
.skill--cta{background:var(--c-ink);color:var(--c-white);align-content:center}
.skill--cta .skill__title{font-size:1.15rem}
.skill--cta .skill__text{color:rgba(233,244,238,.72);margin-bottom:1.25rem}
.skill--cta .btn{justify-self:center;background:var(--c-yellow);border-color:var(--c-yellow);color:var(--c-ink)}
.skill--cta .btn[aria-disabled="true"]{opacity:.6;cursor:default}
.meta--solid{background:var(--bg-2)}

/* --- Universo (CTA a página completa) -------------------------------------- */
.universe{position:relative;overflow:hidden;background:var(--c-ink);color:var(--c-white)}
.universe__inner{position:relative;z-index:1;display:grid;gap:var(--gap);justify-items:center;text-align:center}
.universe .eyebrow{color:var(--c-yellow)}
.universe h2{margin:0 0 1.1rem;text-wrap:balance;font-size:clamp(2rem,2.6vw + 1rem,3.1rem)}
.universe__text{color:rgba(233,244,238,.72);max-width:46ch;margin-inline:auto;margin-bottom:2rem}

/* Los dos monos: debajo del texto y en fila cuando no hay sitio; a los lados
   en cuanto lo hay, sin tocar el eje central de la copia. */
.universe__inner{grid-template-columns:1fr 1fr;grid-template-areas:"copia copia" "mono1 mono2"}
.universe__copy{grid-area:copia}
.universe__mono{align-self:end}
.universe__mono--1{grid-area:mono1;justify-self:end}
.universe__mono--2{grid-area:mono2;justify-self:start}
.universe__mono-img{height:clamp(150px,26vw,210px);width:auto}
@media (min-width:900px){
  .universe__inner{
    grid-template-columns:1fr minmax(0,34rem) 1fr;
    grid-template-areas:"mono1 copia mono2";
    align-items:end;column-gap:clamp(1rem,3vw,2.5rem);
  }
  .universe__mono--1{grid-area:mono1;justify-self:end}
  .universe__mono--2{grid-area:mono2;justify-self:start}
  .universe__copy{padding-bottom:clamp(1rem,4vw,3rem)}
  .universe__mono-img{height:clamp(230px,26vw,330px)}
}
.universe .btn{background:var(--c-yellow);border-color:var(--c-yellow);color:var(--c-ink)}
.universe__cta[aria-disabled="true"]{cursor:default;opacity:.55}
.universe__cta[aria-disabled="true"]:hover{transform:none;box-shadow:none;background:var(--c-yellow)}


/* --- 12. Sobre Badan Studios ----------------------------------------------- */
/* Único bloque a dos columnas: la foto del estudio a la izquierda y el texto
   a la derecha. En móvil se apila y vuelve al eje central como el resto. */
.about{display:grid;gap:var(--gap);justify-items:center;text-align:center}
.about__media{width:min(100%,440px)}
.about__body{max-width:64ch}
@media (min-width:860px){
  .about{grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,6vw,5rem);align-items:center;justify-items:stretch;text-align:left}
  .about__media{width:100%}
  .about__body{max-width:56ch}
  .about .about-credits li{justify-content:flex-start}
  .about .value{text-align:left}
  .about .btn{justify-self:start}
}
.about__img,.about__media .todo-img{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:0 30px 70px rgba(7,36,44,.12)}
.about__text{color:var(--tx-2);margin:.5rem 0 2rem}
.about-credits{display:grid;gap:0;margin:0 0 2rem}
.about-credits li{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}
.about-credits li:last-child{border-bottom:1px solid var(--line)}
.about-credits__icon{color:var(--c-forest);line-height:0;flex:0 0 auto}
.about-credits__icon svg{width:22px;height:22px}
.about-credits b{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.about-credits span span,.about-credits li > span:last-child{font-size:.95rem;font-weight:700}
@media (min-width:760px){ .about-credits{grid-template-columns:repeat(2,1fr);column-gap:2.5rem} .about-credits li:nth-child(2){border-top:1px solid var(--line)} }

.values{display:grid;gap:0;margin-bottom:2rem}
.value{padding:1.1rem 0;border-top:1px solid var(--line);text-align:center}
.value:last-child{border-bottom:1px solid var(--line)}
.value__title{font-size:1rem;margin-bottom:.2rem}
.value__text{color:var(--tx-3);font-size:.9rem}


/* --- 13. FAQs por temas ---------------------------------------------------
   El índice solo oculta con CSS: las nueve preguntas y sus respuestas van
   siempre en el HTML servido, que es lo que leen los rastreadores. */
.faq-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:1.75rem}
.faq-nav__btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem;font-size:.85rem;font-weight:700;color:var(--tx-2);cursor:pointer;transition:.2s;
}
.faq-nav__btn span{font-size:.72rem;font-weight:800;opacity:.6}
.faq-nav__btn:hover{border-color:var(--line-2);color:var(--tx)}
.faq-nav__btn.is-on{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-white)}
.faq-nav__btn.is-on span{opacity:.75}
.faq-group + .faq-group{margin-top:2.25rem}
.faq-group.is-hidden{display:none}
.faq-group__name{font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);margin-bottom:.5rem}
.faqs{display:grid;gap:0}
.faq{border-top:1px solid var(--line)}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  cursor:pointer;list-style:none;padding:1.2rem 0;transition:color .2s;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--c-forest)}
.faq__q h3{flex:1 1 auto;font-size:1rem;font-weight:800;letter-spacing:-.02em}
.faq__chevron{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;transition:rotate .25s}
.faq__chevron::before{
  content:"";width:7px;height:7px;margin-top:-3px;
  border-right:2px solid var(--c-forest);border-bottom:2px solid var(--c-forest);rotate:45deg;
}
.faq[open] .faq__chevron{rotate:180deg}
.faq__a{padding:0 0 1.5rem;color:var(--tx-2);font-size:.95rem;max-width:62ch;margin-inline:auto;text-align:left}
.faq__q h3{text-align:left}
.faqs,.faq-group{max-width:76ch;margin-inline:auto;width:100%}
.faq-group__name{text-align:center}

/* --- Footer ---------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding:var(--space) 0 2rem;background:var(--bg-2)}
.foot__inner{display:grid;gap:2.5rem;justify-items:center;text-align:center}
.foot__brand .nav__wordmark{margin-bottom:1rem}
.foot__tagline{color:var(--tx-2);font-size:.92rem;margin:0 auto 1rem;max-width:40ch}
.foot__note{color:var(--tx-3);font-size:.78rem;max-width:44ch;margin-inline:auto}
.foot__title{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-bottom:1.1rem}
.foot__col ul{display:grid;gap:.7rem}
.foot__col a{color:var(--tx-2);font-size:.9rem;transition:color .2s}
.foot__col a:hover{color:var(--tx)}
.foot__bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--tx-3)}
.foot__bottom{text-align:center}
@media (min-width:760px){ .foot__inner{grid-template-columns:2fr 1fr 1fr;gap:3rem;align-items:start} }

/* --- Cartas: sin menú contextual, sin arrastrar, sin guardar en móvil ------
   No es protección real (el fichero sigue estando en la pestaña de red y una
   captura de pantalla siempre funciona): quita los atajos de un clic. Va en
   CSS para que aguante aunque el JS no llegue a cargar. */
.js-carta{
  pointer-events:none;                 /* el clic derecho no cae sobre la imagen */
  -webkit-user-drag:none;
  -webkit-touch-callout:none;          /* iOS: la pulsación larga no ofrece guardar */
  user-select:none;-webkit-user-select:none;
}
.js-carta-caja{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

/* --- Aparición al entrar en pantalla --------------------------------------- */
.js .reveal{
  opacity:0;translate:0 22px;
  transition:opacity .7s cubic-bezier(.16,.84,.3,1),translate .7s cubic-bezier(.16,.84,.3,1);
  transition-delay:var(--d,0ms);
}
.js .reveal.is-in{opacity:1;translate:0 0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee__track{animation:none}
  .marquee__track[aria-hidden="true"]{display:none}
}