/* Propuesta 3 · Historia: recorrido narrativo con scroll y celular fijo que cambia de pantalla
   Paleta: "Blanco suave" claro, con un interludio nocturno */
.progreso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 40; background: transparent; }
.progreso span { display: block; height: 100%; width: 100%; background: var(--ui-ink); transform-origin: 0 50%; transform: scaleX(0); }
.enc { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--ui-bg) 90%, transparent); backdrop-filter: blur(10px); }
.enc-barra { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.enc-nav { margin-left: auto; }
.enc-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.enc-nav a { display: inline-flex; align-items: center; min-height: var(--rh-hit); padding: 0 12px; border-radius: var(--rh-radius-control); text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ui-muted); }
.enc-nav a:hover { color: var(--ui-ink); background: var(--ui-raised); }
@media (max-width: 820px) { .enc-nav { display: none; } .enc-barra .btn { margin-left: auto; } }

.hero { padding: clamp(32px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero h1 { margin: 14px 0 26px; }
.h1-grande { display: block; font-size: clamp(48px, 10vw, 128px); line-height: .92; letter-spacing: -.055em; font-weight: 900; text-wrap: balance; }
.h1-sub { display: block; margin-top: 22px; font-size: clamp(18px, 2.1vw, 23px); line-height: 1.35; font-weight: 500; color: var(--ui-muted); letter-spacing: -.01em; max-width: 30ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.estado-producto { margin-top: 14px; max-width: 58ch; color: var(--ui-muted); font-size: 14px; }
.hero-foto { position: relative; justify-self: center; width: min(420px, 82vw); }
.hero-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 60%; border-radius: 28px; box-shadow: var(--rh-shadow); }
.ficha { position: absolute; left: -24px; bottom: 28px; padding: 14px 16px; display: grid; gap: 2px; max-width: 260px; }
.ficha b { font-size: 20px; letter-spacing: -.02em; }
.ficha small { color: var(--ui-muted); font-size: 13px; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.3fr 1fr; } }
@media (max-width: 520px) { .ficha { left: 8px; right: 8px; bottom: 12px; max-width: none; } }

/* Historia */
.historia { padding: clamp(48px, 7vw, 88px) 0 40px; border-top: 1px solid var(--rh-divider); }
.t2 { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; margin: 10px 0 16px; text-wrap: balance; }
.t2.grande { font-size: clamp(34px, 6vw, 68px); }
.indice { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.indice a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--rh-radius-control); background: var(--ui-raised); border: 1px solid var(--rh-divider); text-decoration: none; font-size: 14px; font-weight: 550; transition: background-color var(--rh-motion-fast) var(--rh-motion-ease); }
.indice a[aria-current="step"] { background: var(--ui-ink); color: var(--ui-bg); }
.ix-h { font-variant-numeric: tabular-nums; color: inherit; opacity: .7; font-size: 12px; }
.hist-grid { display: grid; gap: 24px; margin-top: 40px; }
.caps[role="list"] { list-style: none; padding: 0 0 0 28px; margin: 0; position: relative; }
.caps::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--rh-divider); }
.cap { position: relative; padding: 8px 0 64px; }
.hora { position: relative; }
.hora::before { content: ""; position: absolute; left: -28px; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--ui-bg); border: 2px solid var(--ui-line); transition: background-color var(--rh-motion-medium) var(--rh-motion-ease), border-color var(--rh-motion-medium) var(--rh-motion-ease); }
.cap.activo .hora::before { background: var(--ui-ink); border-color: var(--ui-ink); }
.hora { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.hora span { color: var(--ui-ink); }
.cap h3 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.03em; margin: 8px 0 12px; }
.cap-p { font-size: 18px; color: var(--ui-muted); max-width: 46ch; margin-bottom: 18px; }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; }
.lista-check .i { margin-top: 2px; }
.cap-cel { margin-top: 26px; display: flex; justify-content: center; }
.pegajoso { display: none; }
@media (min-width: 960px) {
  .hist-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; }
  .cap { min-height: 78vh; padding-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
  .cap-cel { display: none; }
  .js .cap h3 { color: var(--ui-muted); transition: color .4s var(--rh-motion-ease); }
  .js .cap.activo h3 { color: var(--ui-ink); }
  .pegajoso { display: block; position: sticky; top: calc(50vh - 300px); height: 650px; align-self: start; }
  .cel-hist { margin: 0 auto; }
  .cel-hist img { position: absolute; inset: calc(var(--cel-w) * .035); width: calc(100% - var(--cel-w) * .07); height: calc(100% - var(--cel-w) * .07); opacity: 0; transform: scale(.98); transition: opacity .45s var(--rh-motion-ease), transform .45s var(--rh-motion-ease); }
  .cel-hist img.activa { opacity: 1; transform: none; }
}

/* Interludio nocturno */
.noche { position: relative; isolation: isolate; color: #f5f5f5; min-height: 70vh; display: grid; align-items: end; padding: 120px 0 64px; overflow: hidden; }
.noche-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.noche::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #00000033, #000000cc); }
.noche .kicker { color: #d9d9d6; }
.noche-txt p { font-size: 19px; max-width: 44ch; color: #e6e6e3; }

.sec { padding: clamp(56px, 8vw, 104px) 0; }
.gris { background: var(--ui-raised); }
.gris .card, .gris .aliados li, .gris .faq details { background: var(--ui-card); }
.gris .cifras li { background: var(--ui-card); }
.lead { color: var(--ui-muted); font-size: 18px; max-width: 56ch; margin-bottom: 20px; }
.estrecho { max-width: 820px; }
.espacio { height: 36px; } .espacio-s { height: 18px; }

.pasos3 { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 0; }
.pasos3 li { padding: 24px 0; border-top: 1px solid var(--ui-line); display: grid; grid-template-columns: 70px 1fr; column-gap: 12px; }
.pasos3 .n { grid-row: span 2; font-size: 40px; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.pasos3 h3 { font-size: 21px; }
.pasos3 p { color: var(--ui-muted); }
@media (min-width: 860px) { .pasos3 { grid-template-columns: repeat(3, 1fr); column-gap: 32px; } .pasos3 li { grid-template-columns: 1fr; } .pasos3 .n { font-size: 72px; grid-row: auto; margin-bottom: 12px; } }

.desc-grid { display: grid; gap: 36px; align-items: center; }
.desc-foto { width: 100%; border-radius: var(--rh-radius-card); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--rh-shadow); }
@media (min-width: 900px) { .desc-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; } }

.con-grid { display: grid; gap: 32px; }
.con-form { padding: clamp(20px, 3vw, 32px); }
.con-form--pendiente { align-content: center; min-height: 290px; }
.con-form--pendiente h3 { margin: 8px 0 10px; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -.025em; }
.con-form--pendiente p { color: var(--ui-muted); max-width: 42ch; }
@media (min-width: 900px) { .con-grid { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
/* Fotos de cada capítulo */
.cap-foto { margin: 22px 0 0; max-width: 520px; }
.cap-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rh-radius-card); box-shadow: var(--rh-shadow); }
.equipo { list-style: none; padding: 0; margin: 14px 0 0; display: flex; gap: 10px; max-width: 520px; }
.equipo li { flex: 1; display: grid; gap: 6px; justify-items: center; padding: 10px; background: var(--ui-card); border: 1px solid var(--rh-divider); border-radius: var(--rh-radius-card); font-size: 13px; font-weight: 600; }
.equipo img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: var(--ui-raised); }

/* =====================================================================
   Invasión Roller MTY 2026 · botón flotante (FAB) + sección del evento
   Colores del evento (invasionrollermty.com): menta #8CFC98 sobre negro #050505
   ===================================================================== */
.p3 { --irm-menta: #8cfc98; --irm-menta-2: #5cc86c; --irm-negro: #050505; --irm-tinta: #0a0a0a; }
.irm-mascota { width: 40px; height: 43px; image-rendering: pixelated; flex: none; }
.cd { display: inline-flex; gap: 6px; font-variant-numeric: tabular-nums; }
.cd-u { display: grid; justify-items: center; align-content: center; background: #111311; border: 1px solid #8cfc9840; border-radius: 10px; overflow: hidden; }
.cd-u small { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #bdbdb8; }
.cd-u b { display: block; }
.irm-fab :focus-visible, .irm :focus-visible { outline-color: var(--irm-menta); }
.irm-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--rh-control-height); padding: 0 18px; border-radius: var(--rh-radius-control); background: var(--irm-menta); color: var(--irm-tinta); font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color var(--rh-motion-fast) var(--rh-motion-ease), box-shadow var(--rh-motion-medium) var(--rh-motion-ease); }
.irm-btn svg { width: 18px; height: 18px; flex: none; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.irm-btn:hover { background: #a6ffb0; box-shadow: 0 8px 24px -6px #8cfc9880; transform: translateY(-2px); }
.irm-btn:hover svg { transform: translate(2px, -2px); }
.irm-btn:active { transform: scale(.95); transition-duration: .08s; }
.irm-btn--sec { background: transparent; color: #f4f4f2; border-color: #ffffff40; font-weight: 650; }
.irm-btn--sec:hover { background: #ffffff14; box-shadow: none; }
.irm[data-estado="paso"] .cd { display: none; }

/* Sección del evento */
.irm { padding: 8px 0 clamp(48px, 7vw, 88px); }
.irm-tarjeta { position: relative; isolation: isolate; overflow: hidden; color: #f4f4f2; background: var(--irm-negro); border-radius: 28px; padding: clamp(22px, 4vw, 48px); box-shadow: 0 30px 60px -30px #0000008c; }
.irm-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 85% 10%, #8cfc9826, transparent 70%), radial-gradient(40% 50% at 0% 100%, #5cc86c1f, transparent 70%),
              linear-gradient(#ffffff08 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, #ffffff08 1px, transparent 1px) 0 0 / 28px 28px; }
.irm-haz { position: absolute; top: -20%; right: 12%; width: 220px; height: 140%; background: linear-gradient(180deg, #8cfc9833, transparent 75%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); opacity: .6; transform-origin: 50% 0; }
.irm-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .irm-grid { grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; } }
.irm-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px; background: #8cfc981a; border: 1px solid #8cfc984d; color: var(--irm-menta); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.irm-kicker svg { width: 16px; height: 16px; }
.irm-logo { display: block; width: clamp(180px, 26vw, 260px); height: auto; margin: 20px 0 6px; filter: drop-shadow(0 10px 30px #8cfc9833); }
.irm-t { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.02; letter-spacing: -.035em; font-weight: 900; margin: 6px 0 8px; color: #fff; }
.irm-lema { font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; color: var(--irm-menta); margin: 0 0 14px; letter-spacing: -.01em; }
.irm-p { color: #d4d4d0; font-size: 17px; max-width: 52ch; margin: 0 0 20px; }
.irm-datos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.irm-datos li { display: flex; gap: 12px; align-items: flex-start; }
.irm-datos svg { width: 22px; height: 22px; flex: none; color: var(--irm-menta); margin-top: 2px; }
.irm-datos b { display: block; color: #fff; }
.irm-datos small { color: #bdbdb8; font-size: 14px; }
.irm-accion { background: #0e100e; border: 1px solid #8cfc9833; border-radius: 22px; padding: clamp(18px, 3vw, 28px); }
.irm-estado { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--irm-menta); }
.irm-punto { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--irm-menta); }
.irm-punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--irm-menta); opacity: 0; }
.irm[data-estado="paso"] .irm-punto { background: #8a8a85; }
.cd--grande { gap: 8px; width: 100%; }
.cd--grande .cd-u { flex: 1; min-height: 92px; border-radius: 16px; background: linear-gradient(180deg, #161a16, #0b0c0b); }
.cd--grande b { font-size: clamp(34px, 5vw, 52px); line-height: 1; font-weight: 900; color: #fff; letter-spacing: -.03em; }
.cd--grande small { font-size: 11px; margin-top: 6px; }
.irm-nota-estado { color: #d4d4d0; font-size: 15px; margin: 14px 0 18px; }
.irm-ctas { display: grid; gap: 10px; }
.irm-ctas .irm-btn { min-height: 50px; white-space: normal; text-align: center; }
.irm-letra { color: #bdbdb8; font-size: 13px; margin: 16px 0 0; }
.irm-letra b { color: var(--irm-menta); }
.irm-dias { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 12px; }
@media (min-width: 860px) { .irm-dias { grid-template-columns: repeat(3, 1fr); } }
.irm-dia { background: #ffffff08; border: 1px solid #ffffff1f; border-radius: 18px; padding: 16px 18px; transition: border-color .3s var(--rh-motion-ease), background-color .3s var(--rh-motion-ease); }
.irm-dia-cab { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.irm-dia-cab b { font-size: 18px; color: #fff; }
.irm-dia-cab span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #bdbdb8; }
.irm-hoy { display: none; margin-left: auto; font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--irm-tinta); background: var(--irm-menta); padding: 3px 8px; border-radius: 999px; }
.irm-dia.hoy { border-color: var(--irm-menta); background: #8cfc9814; }
.irm-dia.hoy .irm-hoy { display: inline-block; }
.irm-dia ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.irm-dia li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; font-size: 14px; color: #d4d4d0; }
.irm-dia time { color: var(--irm-menta); font-weight: 700; font-variant-numeric: tabular-nums; }
.irm-fuente { margin: 18px 0 0; font-size: 12.5px; color: #a9a9a4; }

/* =====================================================================
   Micro-interacciones (botones, celular de la app)
   ===================================================================== */
.btn, .tienda, .indice a, .dock-b { position: relative; overflow: hidden; isolation: isolate; }
.onda { position: absolute; z-index: -1; left: var(--ox); top: var(--oy); width: var(--od); height: var(--od); margin: calc(var(--od) / -2) 0 0 calc(var(--od) / -2); border-radius: 50%; background: currentColor; opacity: 0; transform: scale(0); pointer-events: none; }

/* Celular de la historia: capas animadas y "dock" de pantallas */
.capas { position: absolute; inset: calc(var(--cel-w) * .035); border-radius: calc(var(--cel-w) * .118); overflow: hidden; pointer-events: none; }
.cap-cel .capas { --cel-w: 250px; }
.capa { position: absolute; inset: 0; visibility: hidden; }
.capa.activa, .cap.activo .capa { visibility: visible; }
@media (max-width: 959px) {
  .js .cap-cel .capa { visibility: hidden; }
  .js .cap-cel.en-vista .capa { visibility: visible; }
}
.ui-toast { position: absolute; left: 8%; right: 8%; top: 9%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: #252522eb; color: #fff; font-size: 12.5px; font-weight: 650; box-shadow: 0 10px 24px -8px #0000008c; }
.ui-toast svg { width: 16px; height: 16px; flex: none; color: #8cfc98; }
.ui-toque { position: absolute; left: var(--tx); top: var(--ty); width: 0; height: 0; }
.ui-toque::before, .ui-toque i { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; }
.ui-toque::before { border: 2px solid #252522; opacity: 0; }
.ui-toque i { background: #2525222e; opacity: 0; }
.cel-mov { position: relative; display: inline-block; }
.dock { position: relative; display: flex; justify-content: center; gap: 4px; margin: 16px auto 0; padding: 5px; width: max-content; border-radius: 999px; background: var(--ui-card); border: 1px solid var(--rh-divider); box-shadow: var(--rh-shadow); }
.dock-b { display: grid; place-items: center; width: var(--rh-hit); height: var(--rh-hit); border-radius: 50%; color: var(--ui-muted); text-decoration: none; transition: color .25s var(--rh-motion-ease), transform .35s cubic-bezier(.34,1.56,.64,1); }
.dock-b svg { width: 20px; height: 20px; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.dock-b:hover { color: var(--ui-ink); }
.dock-b:hover svg { transform: translateY(-2px) scale(1.08); }
.dock-b:active { transform: scale(.88); transition-duration: .08s; }
.dock-b[aria-current="step"] { color: var(--ui-bg); }
.dock-ind { position: absolute; z-index: 0; left: 5px; top: 5px; width: var(--rh-hit); height: var(--rh-hit); border-radius: 50%; background: var(--ui-ink); transform: translateX(calc(var(--k, 0) * (var(--rh-hit) + 4px))); transition: transform .45s cubic-bezier(.34,1.3,.64,1); }
.dock-b { z-index: 1; overflow: visible; }
.dock-b .onda { display: none; }
@media (min-width: 960px) { .pegajoso { height: auto; top: max(76px, calc(50vh - 370px)); } .cel-hist { --cel-w: min(300px, calc((100vh - 190px) * .461)) !important; } }

/* Botones de página: elevación, squish y flechas */
.btn { transition: background-color var(--rh-motion-fast) var(--rh-motion-ease), border-color var(--rh-motion-fast) var(--rh-motion-ease), transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow var(--rh-motion-medium) var(--rh-motion-ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.95); transition-duration: .08s; }
.btn svg, .tienda svg { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.btn:hover svg { transform: translateX(3px); }
.tienda { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow var(--rh-motion-medium) var(--rh-motion-ease); }
.tienda:hover svg { transform: rotate(-8deg) scale(1.1); }
.tienda:active { transform: scale(.95); transition-duration: .08s; }
.indice a { transition: background-color var(--rh-motion-fast) var(--rh-motion-ease), color var(--rh-motion-fast) var(--rh-motion-ease), transform .35s cubic-bezier(.34,1.56,.64,1); }
.indice a:active { transform: scale(.94); }
.btn--pulso::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; box-shadow: 0 0 0 2px var(--ui-ink); opacity: 0; pointer-events: none; }

/* Todo lo animado, solo si la persona no pidió reducir el movimiento */
@media (prefers-reduced-motion: no-preference) {
  .irm-mascota { animation: irm-flota 1.6s steps(2, jump-none) infinite; }
  .irm-logo { animation: irm-flota-suave 5s ease-in-out infinite; }
  .irm-haz { animation: irm-haz 7s ease-in-out infinite; }
  .irm[data-estado="antes"] .irm-punto::after, .irm[data-estado="curso"] .irm-punto::after { animation: irm-latido 2s ease-out infinite; }
  .cd-u b.tic { animation: cd-tic .32s cubic-bezier(.2,.8,.2,1); }
  .onda { animation: onda .6s cubic-bezier(.2,.8,.2,1); }
  .btn--pulso:not(:hover):not(:focus-visible)::after { animation: pulso 2.8s cubic-bezier(.2,.8,.2,1) 1.6s infinite; }
  .btn--pulso:not(:hover):not(:focus-visible) { animation: pulso-btn 2.8s ease-in-out 1.6s infinite; }

  /* Pantallas del celular: entran desde abajo y salen hacia arriba (o al revés si regresas) */
  @media (min-width: 960px) {
    .cel-hist img { transform: translateY(6%) scale(.96); transition: opacity .5s var(--rh-motion-ease), transform .6s cubic-bezier(.2,.8,.2,1); }
    .cel-hist img.antes { transform: translateY(-6%) scale(.96); }
    .cel-hist[data-dir="atras"] img:not(.activa):not(.antes) { transform: translateY(-6%) scale(.96); }
    .cel-hist[data-dir="atras"] img.antes { transform: translateY(6%) scale(.96); }
    .cel-hist img.activa { transform: none; }
    .cel-hist { transition: transform .6s cubic-bezier(.34,1.3,.64,1); }
    .cel-hist.cambia { animation: cel-salto .6s cubic-bezier(.34,1.3,.64,1); }
  }
  /* Elementos de la app con entrada escalonada */
  .capa.activa .ui-toast, .cap-cel.en-vista .capa .ui-toast { animation: toast 3.6s cubic-bezier(.2,.8,.2,1) .35s both; }
  .capa.activa .ui-toque::before, .cap-cel.en-vista .capa .ui-toque::before { animation: toque-aro 1.1s cubic-bezier(.2,.8,.2,1) .9s both; }
  .capa.activa .ui-toque i, .cap-cel.en-vista .capa .ui-toque i { animation: toque-punto 1.1s cubic-bezier(.2,.8,.2,1) .9s both; }
  .js .cap-cel .cel-mov { transform: translateY(18px) rotate(-2deg); opacity: .001; transition: transform .7s cubic-bezier(.34,1.3,.64,1), opacity .5s var(--rh-motion-ease); }
  .cap-cel.en-vista .cel-mov { transform: none; opacity: 1; }
  .cap.activo .lista-check .i { animation: check-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
  .cap.activo .lista-check li:nth-child(2) .i { animation-delay: .08s; }
  .cap.activo .lista-check li:nth-child(3) .i { animation-delay: .16s; }
  .dock-b[aria-current="step"] svg { animation: icono-salta .5s cubic-bezier(.34,1.56,.64,1); }
  .irm-dias .irm-dia { transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s, background-color .3s; }
  .irm-dias .irm-dia:hover { transform: translateY(-3px); }
}
@keyframes irm-brillo { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(350%); } }
@keyframes irm-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes irm-flota-suave { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
@keyframes irm-haz { 0%, 100% { transform: rotate(-6deg); opacity: .45; } 50% { transform: rotate(6deg); opacity: .75; } }
@keyframes irm-latido { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3); opacity: 0; } }
@keyframes cd-tic { from { transform: translateY(-40%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes onda { from { transform: scale(0); opacity: .28; } to { transform: scale(1); opacity: 0; } }
@keyframes pulso { 0% { transform: scale(1); opacity: .45; } 60%, 100% { transform: scale(1.14, 1.35); opacity: 0; } }
@keyframes pulso-btn { 0%, 70%, 100% { transform: scale(1); } 10% { transform: scale(1.035); } 20% { transform: scale(1); } }
@keyframes cel-salto { 0% { transform: none; } 35% { transform: translateY(-6px) rotate(-.6deg); } 100% { transform: none; } }
@keyframes toast { 0% { transform: translateY(-140%); opacity: 0; } 10%, 82% { transform: none; opacity: 1; } 100% { transform: translateY(-140%); opacity: 0; } }
@keyframes toque-aro { 0% { transform: scale(.4); opacity: 0; } 25% { opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes toque-punto { 0% { transform: scale(.2); opacity: 0; } 20% { transform: scale(.6); opacity: 1; } 35% { transform: scale(.5); } 100% { transform: scale(1); opacity: 0; } }
@keyframes check-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes icono-salta { 0% { transform: translateY(0); } 40% { transform: translateY(-4px) scale(1.12); } 100% { transform: none; } }
.irm-btn[hidden] { display: none; }
.irm[data-estado="paso"] .irm-letra { display: none; }
.irm-dia li { grid-template-columns: 108px 1fr; }

/* ---------- Botón flotante (FAB) con la cuenta regresiva de Invasión Roller MTY ---------- */
.irm-fab { position: fixed; z-index: 45; right: 12px; top: 56%; transform: translateY(-50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.irm-fab > * { pointer-events: auto; transition: translate .45s cubic-bezier(.34,1.3,.64,1), opacity .3s var(--rh-motion-ease), visibility 0s linear 0s; }
.irm-fab[hidden] { display: none; }
.irm-fab.oculto > *, .irm-fab.apartado > * { opacity: 0; visibility: hidden; translate: 90px 0; transition: translate .35s var(--rh-motion-ease), opacity .25s var(--rh-motion-ease), visibility 0s linear .35s; }
.irm-fab-b { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; align-content: start; gap: 4px; width: 60px; padding: 10px 0 12px; border-radius: 999px; background: var(--irm-negro); color: #fff; text-decoration: none;
  border: 1px solid #8cfc9859; box-shadow: 0 0 0 1px #00000040, 0 14px 30px -10px #0000008c, 0 0 22px -6px #8cfc9866; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s var(--rh-motion-ease); }
.irm-fab-b::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: -1; background: linear-gradient(180deg, transparent, #8cfc9826, transparent); transform: translateY(-100%); }
.irm-fab-b:hover { transform: translateX(-3px); box-shadow: 0 0 0 1px #00000040, 0 16px 34px -10px #0000008c, 0 0 28px -4px #8cfc9899; }
.irm-fab-b:active { transform: scale(.95); transition-duration: .08s; }
.irm-fab-b:focus-visible { outline: 3px solid var(--irm-menta); outline-offset: 3px; border-radius: 999px; }
.irm-fab .irm-mascota { width: 30px; height: 33px; }
.fab-tit { font-size: 8.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--irm-menta); margin-bottom: 2px; }
.fab-cd { display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.fab-u { display: grid; justify-items: center; width: 44px; padding: 4px 0 3px; border-radius: 10px; background: #121512; border: 1px solid #8cfc9833; overflow: hidden; line-height: 1; }
.fab-u b { display: block; font-size: 17px; font-weight: 850; }
.fab-u small { font-size: 8.5px; font-weight: 800; text-transform: uppercase; color: #bdbdb8; margin-top: 1px; }
.fab-s { background: transparent; border-color: transparent; padding: 0; }
.fab-s b { font-size: 12px; color: var(--irm-menta); }
.fab-curso { display: none; justify-items: center; gap: 4px; text-align: center; }
.fab-curso em { font-style: normal; font-size: 9px; font-weight: 900; text-transform: uppercase; color: var(--irm-menta); line-height: 1.15; }
.fab-curso b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 18px; font-weight: 900; letter-spacing: .02em; }
.irm-fab[data-estado="curso"] .fab-cd, .irm-fab[data-estado="curso"] .fab-tit { display: none; }
.irm-fab[data-estado="curso"] .fab-curso { display: grid; }
.irm-fab-min { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #8cfc9859; background: var(--irm-negro); color: var(--irm-menta); cursor: pointer; box-shadow: 0 6px 14px -6px #0000008c; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.irm-fab-min::before { content: ""; position: absolute; inset: -6px; }
.irm-fab-min { position: relative; }
.irm-fab-min svg { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.irm-fab-min:hover { transform: scale(1.08); }
.irm-fab-min:active { transform: scale(.9); }
/* Minimizado: queda una pestañita pegada al borde */
.irm-fab-plegado .irm-fab { right: 0; }
.irm-fab-plegado .irm-fab-b { display: none; }
.irm-fab-plegado .irm-fab-min { width: 30px; height: 64px; border-radius: 14px 0 0 14px; border-right: 0; }
.irm-fab-plegado .irm-fab-min svg { transform: rotate(180deg); }
/* Celular: píldora horizontal compacta, centrada abajo */
@media (max-width: 700px) {
  .irm-fab { right: auto; left: 50%; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; }
  .irm-fab.oculto > *, .irm-fab.apartado > * { translate: 0 90px; }
  .irm-fab-b { display: flex; align-items: center; gap: 8px; width: auto; height: 48px; padding: 0 14px 0 10px; }
  .irm-fab-b:hover { transform: none; }
  .irm-fab .irm-mascota { width: 26px; height: 28px; }
  .fab-tit, .fab-s { display: none; }
  .fab-cd { display: flex; gap: 4px; }
  .fab-u { display: flex; align-items: baseline; gap: 2px; width: auto; padding: 5px 7px; }
  .fab-u b { font-size: 15px; }
  .fab-u small { margin: 0; }
  .fab-u.fab-s { display: none; }
  .irm-fab[data-estado="curso"] .fab-curso { display: flex; align-items: center; gap: 8px; }
  .fab-curso b { writing-mode: horizontal-tb; transform: none; font-size: 16px; }
  .fab-curso em, .fab-curso b { white-space: nowrap; }
  .fab-curso em { font-size: 11px; }
  .irm-fab-min { width: 32px; height: 32px; }
  .irm-fab-min svg { transform: rotate(90deg); }
  .irm-fab-plegado .irm-fab { right: auto; bottom: 0; }
  .irm-fab-plegado .irm-fab-min { width: 64px; height: 30px; border-radius: 14px 14px 0 0; border-right: 1px solid #8cfc9859; border-bottom: 0; }
  .irm-fab-plegado .irm-fab-min svg { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .irm-fab-b::after { animation: fab-brillo 5s ease-in-out 1.5s infinite; }
  .irm-fab-b { animation: fab-entra .6s cubic-bezier(.34,1.3,.64,1) .4s both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  .irm-fab-b { animation-name: fab-entra-abajo; }
  .irm-fab-b::after { top: 0; bottom: 0; left: 0; right: auto; width: 40%; height: auto; background: linear-gradient(90deg, transparent, #8cfc9826, transparent); animation-name: fab-brillo-h; }
}
@keyframes fab-entra-abajo { from { transform: translateY(120%); } to { transform: none; } }
@keyframes fab-brillo-h { 0% { transform: translateX(-100%); } 40%, 100% { transform: translateX(360%); } }
@media (prefers-reduced-motion: reduce) { .irm-fab > *, .irm-fab.oculto > *, .irm-fab.apartado > * { transition: none; } }
@keyframes fab-brillo { 0% { transform: translateY(-100%); } 40%, 100% { transform: translateY(260%); } }
@keyframes fab-entra { from { transform: translateX(120%); } to { transform: none; } }

/* ---------- Menú hamburguesa (solo celular / tableta) ---------- */
.hamb { display: none; }
.menu-movil, .menu-velo { display: none; }
@media (max-width: 820px) {
  .enc-barra .enc-unete { margin-left: auto; min-height: 40px; padding: 0 16px; }
  .hamb { display: grid; place-items: center; flex: none; width: var(--rh-hit); height: var(--rh-hit); border-radius: var(--rh-radius-control); border: 1px solid var(--ui-line); background: var(--ui-card); color: var(--ui-ink); cursor: pointer; transition: background-color var(--rh-motion-fast) var(--rh-motion-ease), transform .35s cubic-bezier(.34,1.56,.64,1); }
  .hamb:active { transform: scale(.92); }
  .hamb[aria-expanded="true"] { background: var(--ui-ink); color: var(--ui-bg); border-color: var(--ui-ink); }
  .hamb-l { position: relative; width: 20px; height: 14px; }
  .hamb-l i { position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.34,1.3,.64,1), opacity .2s var(--rh-motion-ease); }
  .hamb-l i:nth-child(1) { top: 0; } .hamb-l i:nth-child(2) { top: 6px; } .hamb-l i:nth-child(3) { top: 12px; }
  .hamb[aria-expanded="true"] .hamb-l i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hamb[aria-expanded="true"] .hamb-l i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .hamb[aria-expanded="true"] .hamb-l i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .menu-movil { display: block; position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 50; padding: 8px; border-radius: var(--rh-radius-card); background: var(--ui-card); border: 1px solid var(--rh-divider); box-shadow: 0 24px 48px -16px #0000004d, var(--rh-shadow);
    opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: top right; transition: opacity .22s var(--rh-motion-ease), transform .3s cubic-bezier(.2,.8,.2,1); }
  .menu-movil[hidden] { display: none; }
  .menu-abierto .menu-movil { opacity: 1; transform: none; }
  .menu-movil ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .menu-movil li + li { border-top: 1px solid var(--rh-divider); }
  .menu-movil nav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 12px; border-radius: var(--rh-radius-control); color: var(--ui-ink); font-weight: 650; font-size: 17px; text-decoration: none; transition: background-color var(--rh-motion-fast) var(--rh-motion-ease); }
  .menu-movil nav a svg { width: 18px; height: 18px; color: var(--ui-muted); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .menu-movil nav a:hover, .menu-movil nav a:active { background: var(--ui-raised); }
  .menu-movil nav a:hover svg { transform: translateX(3px); }
  .menu-unete { width: 100%; margin-top: 8px; }
  .menu-velo { display: block; position: fixed; inset: 0; z-index: 29; background: #18191766; opacity: 0; visibility: hidden; transition: opacity .25s var(--rh-motion-ease), visibility 0s linear .25s; }
  .menu-abierto .menu-velo { opacity: 1; visibility: visible; transition: opacity .25s var(--rh-motion-ease); }
  .menu-abierto { overflow: hidden; }
  .menu-abierto .irm-fab > * { opacity: 0; visibility: hidden; }
  .menu-movil li { opacity: 1; }
}
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .menu-abierto .menu-movil li, .menu-abierto .menu-unete { animation: menu-item .4s cubic-bezier(.2,.8,.2,1) both; }
  .menu-abierto .menu-movil li:nth-child(2) { animation-delay: .04s; }
  .menu-abierto .menu-movil li:nth-child(3) { animation-delay: .08s; }
  .menu-abierto .menu-movil li:nth-child(4) { animation-delay: .12s; }
  .menu-abierto .menu-unete { animation-delay: .16s; }
}
@media (prefers-reduced-motion: reduce) { .hamb-l i, .menu-movil, .menu-velo { transition: none !important; } }
@keyframes menu-item { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }