/* BlaBlaLearn · landing (31 oct 2026)
   La misma marca que la app: el verde del banner de Inicio, papel cálido
   con cuadrícula, tarjetas de color sólido con brillo, botones en pastilla y
   letra redondeada. Y el mapache, que es la cara de todo. */

:root{
  --papel:#F6F2EC; --tinta:#17150F; --gris:#6F6A61; --linea:#E8E2D9; --blanco:#FFFFFF;
  --m1:#7B5CF5; --m2:#5B3CD6; --v1:#7FCB45; --v2:#57A52F; --prim:#6A4CF0; --prim-claro:#EFEBFF;
  --amarillo:#FFD23F; --naranja:#FF6B35; --azul:#2F7CF6; --bosque:#1F7A44;
  --rosa:#FF5C8A; --lila:#8F6BEF; --teal:#14B8A6;
  --brillo:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%);
  --sombra:0 1px 2px rgba(23,21,15,.04),0 10px 28px -14px rgba(23,21,15,.22);
  --rnd:ui-rounded,"SF Pro Rounded","Nunito",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ancho:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--rnd);color:var(--tinta);line-height:1.5;-webkit-font-smoothing:antialiased;
  background-color:var(--papel);
  background-image:linear-gradient(rgba(23,21,15,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(23,21,15,.035) 1px,transparent 1px);
  background-size:22px 22px;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 20px}

/* ── Botones en pastilla ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-weight:800;font-size:16px;letter-spacing:-.01em;padding:12px 22px;border-radius:999px;border:0;
  background:var(--blanco);color:var(--tinta);box-shadow:var(--sombra);
  transition:transform .14s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.96)}
.btn.big{font-size:19px;padding:18px 32px}
.btn.sol{background:#fff;color:var(--m2);
  box-shadow:0 6px 0 #CDEBB4,0 18px 30px -12px rgba(20,60,10,.55)}
.btn.sol:hover{box-shadow:0 8px 0 #CDEBB4,0 22px 34px -12px rgba(20,60,10,.6)}
.btn.sol:active{transform:translateY(4px);box-shadow:0 2px 0 #CDEBB4,0 8px 16px -10px rgba(20,60,10,.5)}
.btn.prim{background:var(--prim);color:#fff;box-shadow:0 10px 22px -12px var(--prim)}
.btn.vidrio{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

/* ── Cabecera ── */
.top{position:fixed;inset:0 0 auto;z-index:50;transition:background .25s ease,box-shadow .25s ease}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.top .logo{height:26px;width:auto;filter:brightness(0) invert(1);transition:filter .25s}
.top nav{display:flex;gap:10px}
.top .ghost{background:transparent;color:#fff;box-shadow:none}
.top.solida{background:color-mix(in srgb,var(--papel) 80%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 1px 0 var(--linea)}
.top.solida .logo{filter:none}
.top.solida .ghost{color:var(--tinta)}

/* ── Morado del splash, liso ── */
/* El verde del banner de Inicio de la app (--verde-mapache): el mapache es
   morado y sobre verde destaca. */
.banner{position:relative;overflow:hidden;color:#fff;isolation:isolate;
  background:linear-gradient(160deg,var(--v1) 0%,var(--v2) 100%)}


/* ── Hero ── */
.hero{padding:120px 0 150px;border-radius:0 0 50% 50% / 0 0 70px 70px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;
  padding:8px 14px;border-radius:999px;background:#fff;color:var(--v2)}
.hero h1{font-size:clamp(52px,8.4vw,108px);margin:22px 0 22px}
.hero h1 .sub{display:inline-block;color:var(--m2);position:relative}
.hero h1 .sub::after{content:"";position:absolute;left:2%;right:2%;bottom:-.04em;height:.14em;border-radius:99px;
  background:var(--m2);opacity:.3;transform:scaleX(0);transform-origin:left;
  animation:subraya .8s cubic-bezier(.3,1.4,.5,1) .9s forwards}
@keyframes subraya{to{transform:scaleX(1)}}
.hero .lead{font-size:clamp(18px,2vw,22px);max-width:30ch;opacity:.92;font-weight:600}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.nota{margin-top:18px;font-size:14px;font-weight:700;opacity:.75}

.escena{position:relative;display:grid;place-items:center;min-height:440px}
.escena .halo{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.1)}
.escena .estrella{height:min(470px,52vw);width:auto;position:relative;
  filter:drop-shadow(0 16px 14px rgba(20,60,10,.3));animation:entra .9s cubic-bezier(.3,1.5,.5,1) .15s both}
@keyframes entra{from{opacity:0;transform:translateY(60px) scale(.6)}to{opacity:1;transform:none}}
.bocadillo{position:absolute;top:4%;left:-2%;background:#fff;color:var(--tinta);font-weight:900;font-size:22px;
  padding:12px 20px;border-radius:22px;box-shadow:0 14px 30px -12px rgba(20,60,10,.5);
  transform-origin:bottom right;animation:pop .5s cubic-bezier(.3,1.7,.5,1) 1.1s both}
.bocadillo::after{content:"";position:absolute;right:26px;bottom:-10px;border:12px solid transparent;
  border-top-color:#fff;border-bottom:0}
@keyframes pop{from{opacity:0;transform:scale(.2) rotate(-10deg)}to{opacity:1;transform:none}}
.flota{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  font-weight:800;font-size:15px;color:var(--tinta);background:rgba(255,255,255,.92);
  box-shadow:0 14px 30px -14px rgba(20,60,10,.55);animation:flota 5s ease-in-out infinite}
.flota i{font-style:normal;font-size:20px}
.flota.f1{right:-4%;top:22%}
.flota.f2{left:-6%;bottom:22%;animation-delay:-1.6s}
.flota.f3{right:2%;bottom:6%;animation-delay:-3.2s}
@keyframes flota{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}

/* ── Cifras: pastillas sólidas pisando el borde del hero ── */
.cifras{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:-64px;position:relative;z-index:2}
.cifra{border-radius:26px;padding:22px 18px;color:#fff;background:var(--brillo),var(--c);
  box-shadow:0 18px 34px -18px var(--c)}
.cifra b{display:block;font-size:clamp(30px,3.6vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1}
.cifra span{display:block;margin-top:6px;font-weight:700;font-size:15px;opacity:.92}
.cifra.oscuro{color:var(--tinta)}

/* ── Secciones ── */
.seccion{padding:120px 0 40px}
.kicker{display:inline-block;font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--prim);background:var(--prim-claro);padding:7px 14px;border-radius:999px}
.seccion h2,.racha h2,.final h2{font-size:clamp(36px,5.2vw,64px);margin:18px 0 18px;max-width:16ch}
.seccion .bajada{font-size:19px;color:var(--gris);max-width:58ch;font-weight:600}

/* ── Tarjetas de color con su mapache ── */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.tarjeta{position:relative;overflow:hidden;min-height:250px;border-radius:30px;padding:30px 28px;color:#fff;
  background:var(--brillo),var(--c);box-shadow:0 22px 40px -22px var(--c);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.tarjeta:hover{transform:translateY(-6px) rotate(-.6deg)}
.tarjeta h3{font-size:25px;max-width:57%;position:relative;z-index:1}
.tarjeta p{margin-top:12px;font-weight:600;font-size:16px;opacity:.95;max-width:57%;position:relative;z-index:1}
.tarjeta img,.tarjeta .mapache-vivo{position:absolute;right:-18px;bottom:-30px;height:195px;width:auto;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.22));transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.tarjeta:hover img,.tarjeta:hover .mapache-vivo{transform:translateY(-12px) rotate(-6deg)}
.tarjeta.oscuro{color:var(--tinta)}

/* ── Tarjetones en cinta infinita ── */
.cinta{margin-top:48px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta-pista{display:flex;gap:22px;width:max-content;padding:20px 0 30px;animation:cinta 46s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
@keyframes cinta{to{transform:translateX(-50%)}}
.carta{width:190px;flex:none;background:#fff;border-radius:24px;padding:10px 10px 14px;box-shadow:var(--sombra);
  transform:rotate(var(--r,0deg));transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.carta:nth-child(odd){--r:-3deg}.carta:nth-child(even){--r:3deg}
.carta:hover{transform:rotate(0) scale(1.06)}
.carta img{border-radius:16px;aspect-ratio:1;object-fit:cover;width:100%}
.carta b{display:block;text-align:center;margin-top:10px;font-weight:900;font-size:19px;letter-spacing:-.02em}

/* ── La racha: el mapache lo nota ──
   De caliente a frío: cada tarjeta lleva el tinte de su estado, del naranja
   de las llamas al gris de la lápida, y una barra de temperatura encima. */
.racha{padding:120px 0 40px}
.racha .kicker{background:var(--naranja-claro,#FFE9DF);color:#D9501E}
.racha .bajada{font-size:19px;color:var(--gris);max-width:56ch;font-weight:600}
.termo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:52px;
  font-weight:900;font-size:15px}
.termo i{flex:1;height:12px;border-radius:99px;
  background:linear-gradient(90deg,#FF6B35,#FFD23F 22%,#8F6BEF 50%,#2F7CF6 70%,#7FD3F0 85%,#B9B3AA)}
.termo span:last-child{color:var(--gris)}
.estados{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px}
.estado{text-align:center;border-radius:28px;padding:20px 10px 18px;background:var(--brillo),var(--t);
  box-shadow:var(--sombra);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.estado:hover{transform:translateY(-6px)}
.estado img{height:150px;width:auto;margin:0 auto;filter:drop-shadow(0 8px 8px rgba(23,21,15,.12))}
.estado b{display:block;margin-top:10px;font-size:17px;font-weight:900}
.estado span{display:block;font-size:13px;color:var(--gris);font-weight:700}
.estado:nth-child(1){--t:linear-gradient(180deg,#FF8A3D,#FF6B35);color:#fff;box-shadow:0 18px 34px -16px #FF6B35}
.estado:nth-child(1) span{color:rgba(255,255,255,.9)}
.estado:nth-child(2){--t:#FFF1D2}
.estado:nth-child(3){--t:#F1ECFF}
.estado:nth-child(4){--t:#E8F0FF}
.estado:nth-child(5){--t:#DDF4FB}
.estado:nth-child(6){--t:#ECE8E2}

/* ── Niveles: el mapache camina de A1 a C2 ── */
.camino{position:relative;margin-top:70px;padding-top:120px}
.camino .andando{position:absolute;top:0;left:0;height:120px;width:auto;
  animation:anda 16s linear infinite}
@keyframes anda{0%{left:-4%}100%{left:94%}}
.niveles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;position:relative}
.niveles::before{content:"";position:absolute;left:4%;right:4%;top:-14px;height:6px;border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--linea) 0 14px,transparent 14px 24px)}
.nivel{border-radius:22px;padding:18px 16px;color:#fff;background:var(--brillo),var(--c);
  box-shadow:0 14px 26px -16px var(--c)}
.nivel b{display:block;font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1}
.nivel span{font-weight:700;font-size:14px;opacity:.95}
.nivel.oscuro{color:var(--tinta)}

/* ── Cierre ── */
.final{margin-top:120px;padding:110px 0 120px;text-align:center;border-radius:70px 70px 0 0 / 70px 70px 0 0}
.final .wrap{display:flex;flex-direction:column;align-items:center}
.final img{height:260px;width:auto;filter:drop-shadow(0 20px 20px rgba(20,60,10,.35))}
.final h2{max-width:18ch;margin:10px auto 16px}
.final p{font-size:19px;opacity:.9;font-weight:600;max-width:46ch;margin-bottom:34px}

footer{background:var(--m2);color:rgba(255,255,255,.8);font-weight:700;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:center;padding:30px 20px 40px}
footer img{height:22px;width:auto;filter:brightness(0) invert(1)}
footer nav{display:flex;flex-wrap:wrap;gap:12px 26px}
footer a{text-decoration:none}
footer a:hover{color:#fff}

/* ═══ Cómo funciona (pasos.html) ═══ */
.hero.corto{padding:130px 0 110px}
.hero.corto h1{font-size:clamp(42px,6.4vw,80px)}
.paso{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:90px 0 0}
.paso.vuelta .texto{order:2}
.paso .num{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:18px;color:#fff;
  font-weight:900;font-size:24px;background:var(--brillo),var(--c);box-shadow:0 12px 22px -12px var(--c)}
.paso h2{font-size:clamp(32px,4.4vw,52px);margin:18px 0 16px;max-width:14ch}
.paso p{font-size:18px;color:var(--gris);font-weight:600;max-width:46ch}
.lienzo{position:relative;border-radius:34px;padding:34px;min-height:340px;background:var(--brillo),var(--c);
  box-shadow:0 24px 44px -24px var(--c);display:grid;place-items:center}
.lienzo .mapache{position:absolute;height:150px;width:auto;right:-18px;bottom:-30px;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.25))}
.paso.vuelta .lienzo .mapache{right:auto;left:-18px}
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.fotos img{border-radius:18px;background:#fff;padding:6px;aspect-ratio:1;object-fit:cover;box-shadow:var(--sombra)}
.crece{display:grid;gap:12px;width:100%}
.crece div{background:#fff;border-radius:18px;padding:14px 18px;font-weight:800;box-shadow:var(--sombra)}
.crece div:nth-child(2){margin-left:6%}.crece div:nth-child(3){margin-left:12%}
.crece small{display:block;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--prim)}
.barras{display:grid;gap:12px;width:100%}
.barras div{background:#fff;border-radius:18px;padding:14px 18px;font-weight:800;box-shadow:var(--sombra)}
.barras i{display:block;height:10px;margin-top:10px;border-radius:99px;
  background:linear-gradient(90deg,var(--bosque) var(--p),var(--linea) 0)}
.medallas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.medallas figure{margin:0;width:80px;padding:10px 4px 8px;border-radius:20px;background:#fff;box-shadow:var(--sombra);text-align:center}
.medallas img{height:54px;width:auto;margin:0 auto}
.medallas b{display:block;margin-top:6px;font-size:11.5px;font-weight:900}
.foto-grande{border-radius:24px;box-shadow:var(--sombra);max-height:300px;width:auto}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:100px}
.extra{border-radius:30px;padding:34px;background:#fff;box-shadow:var(--sombra)}
.extra h3{font-size:30px}
.extra p{margin:12px 0 24px;color:var(--gris);font-weight:600;font-size:17px}

/* ── Mapache vivo ──
   Lo mismo que en la app (.mapache-vivo de static/css/app.css): el SVG se
   mete en la página para mover cada pieza por separado. Los puntos de giro
   los trae el propio dibujo (transform-origin en cada grupo m-*). Encima,
   cada pose tiene su gesto: piensa se rasca la barbilla, lee asiente, habla
   mueve la boca, señala empuja el brazo, el del mapa mira a los lados. */
.mapache-vivo{aspect-ratio:200/220}
.mapache-vivo svg{width:100%;height:100%;display:block;overflow:visible}
.mapache-vivo .m-ojos{animation:mParpadeo 4.6s infinite}
.mapache-vivo .m-ojo-der{animation:mGuino 7.5s ease-in-out 2.2s infinite}
.mapache-vivo .m-cola{animation:mCola 1.9s ease-in-out infinite alternate}
.mapache-vivo .m-oreja-izq{animation:mOreja 6s ease-in-out infinite}
.mapache-vivo .m-oreja-der{animation:mOreja 6s ease-in-out 2.3s infinite}
.mapache-vivo .m-cuerpo{animation:mRespira 3.2s ease-in-out infinite}
.mapache-vivo .m-cabeza{animation:mCabeza 4.4s ease-in-out infinite}
.mapache-vivo .m-cadena{animation:mCadena 3.2s ease-in-out infinite}
.pose-saluda .m-brazo-der,.pose-saluda .m-brazo-izq{animation:mSaluda 1.1s ease-in-out infinite alternate}
.pose-piensa .m-cabeza{animation:mPiensa 3.6s ease-in-out infinite}
.pose-piensa .m-brazo-der{animation:mRasca .5s ease-in-out infinite alternate}
.pose-lee .m-cabeza{animation:mLee 2.4s ease-in-out infinite}
.pose-habla .m-boca,.pose-rapea .m-boca{animation:mHabla .32s ease-in-out infinite alternate}
.pose-habla .m-cabeza,.pose-rapea .m-cabeza{animation:mCabeza 1.6s ease-in-out infinite}
.pose-senala .m-brazo-izq{animation:mApunta .9s ease-in-out infinite}
.pose-senala svg{animation:mSenala 1.8s ease-in-out infinite;transform-origin:50% 95%}
.pose-mapa .m-cabeza{animation:mMira 5s ease-in-out infinite}
.pose-frente svg,.pose-tres-cuartos-der svg{animation:mBote 1.6s ease-in-out infinite alternate}
@keyframes mParpadeo{0%,90%,96%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}97%{transform:scaleY(1)}98.5%{transform:scaleY(.1)}}
@keyframes mGuino{0%,86%,100%{transform:scaleY(1)}88%,93%{transform:scaleY(.08)}95%{transform:scaleY(1)}}
@keyframes mCola{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
@keyframes mOreja{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-10deg)}88%{transform:rotate(4deg)}92%{transform:rotate(0)}}
@keyframes mRespira{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.025)}}
@keyframes mCabeza{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.5deg)}70%{transform:rotate(2deg)}}
@keyframes mCadena{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes mSaluda{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes mPiensa{0%,100%{transform:rotate(0)}40%,60%{transform:rotate(-7deg)}}
@keyframes mRasca{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
@keyframes mLee{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg) translateY(1px)}50%{transform:rotate(0)}75%{transform:rotate(3deg) translateY(1px)}}
@keyframes mHabla{from{transform:scaleY(.7)}to{transform:scaleY(1.45)}}
@keyframes mApunta{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes mSenala{0%,100%{transform:none}50%{transform:rotate(-3deg) translateX(-3px)}}
@keyframes mMira{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}50%{transform:rotate(0)}75%{transform:rotate(5deg)}}
@keyframes mBote{from{transform:translateY(0)}to{transform:translateY(-6px)}}

/* ── Aparecer al hacer scroll ── */
.js .sube{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,1,.3,1)}
.js .sube.visto{opacity:1;transform:none}

/* ── Móvil ── */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero .lead{margin:0 auto}
  .ctas{justify-content:center}
  /* En el móvil el mapache va primero: es lo que se ve al abrir. */
  .escena{min-height:0;order:-1;margin:0 auto -6px;max-width:420px;width:100%}
  .escena .estrella{height:min(300px,64vw)}
  .cifras{grid-template-columns:repeat(3,1fr)}
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  .estados{grid-template-columns:repeat(3,1fr)}
  .niveles{grid-template-columns:repeat(3,1fr)}
  .niveles::before{display:none}
  .paso,.dos{grid-template-columns:1fr;gap:34px}
  .paso.vuelta .texto{order:0}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .top .ghost{display:none}
  .hero{padding:104px 0 120px;border-radius:0 0 50% 50% / 0 0 40px 40px}
  .flota{font-size:13px;padding:8px 12px}
  .flota.f1{top:auto;bottom:10%;right:0}.flota.f2{left:0;bottom:30%}.flota.f3{display:none}
  .escena .estrella{height:min(300px,72vw)}
  .bocadillo{font-size:18px;left:2%}
  .btn.big{width:100%}
  .cifras{grid-template-columns:repeat(2,1fr);margin-top:-48px}
  .cifra:last-child{grid-column:1 / -1}
  .tarjetas{grid-template-columns:1fr}
  .tarjeta{min-height:230px}
  .tarjeta img{height:180px}
  .seccion{padding-top:90px}
  .estados{grid-template-columns:repeat(2,1fr)}
  .estado img{height:120px}
  .niveles{grid-template-columns:repeat(2,1fr)}
  .camino .andando{height:90px}
  .camino{padding-top:96px}
  .final{border-radius:40px 40px 0 0}
  .final img{height:200px}
  .lienzo{padding:24px;min-height:280px}
  .lienzo .mapache{height:110px;right:-8px}
  .paso.vuelta .lienzo .mapache{left:-8px}
  .carta{width:150px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .sube{opacity:1;transform:none}
  .hero h1 .sub::after{transform:none}
  .cinta{overflow-x:auto}
}