/* ¿Cuánto falta? — hoja de estilos única.
   Mobile-first. Paleta espacial oscura con acento cian/violeta. */

:root {
  --fondo:        #05060f;
  --fondo-suave:  #0b0f22;
  --panel:        rgba(255, 255, 255, .045);
  --panel-borde:  rgba(255, 255, 255, .09);
  --texto:        #e9edfb;
  --texto-tenue:  #8e97b8;
  --cian:         #6fd3ff;
  --violeta:      #b98cff;
  --oro:          #ffd479;
  --radio:        18px;
  --tipo-titulo:  'Space Grotesk', system-ui, sans-serif;
  --tipo-texto:   'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipo-texto);
  line-height: 1.6;
  overflow-x: hidden;
}

/* El cielo vive detrás de todo y no captura clics. */
#estrellas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.envoltorio {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin: 0 auto;
  /* El mínimo NO puede bajar de 4.2rem: los dos botones fijos de las esquinas
     (← zaxfun / idioma) llegan hasta ~3.2rem desde arriba, y en móvil —sobre
     todo en la app instalada, sin barra del navegador— la cabecera de la cabina
     se les metía debajo y «Volver» salía tapado por «← zaxfun». */
  padding: clamp(4.2rem, 7vw, 4.5rem) clamp(1rem, 4vw, 2rem) 4rem;
}

/* ---------- Cabecera ---------- */

.cabecera { text-align: center; margin-bottom: clamp(2.5rem, 7vw, 4rem); }

.marca {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: clamp(2.6rem, 10vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0 0 .6rem;
  background: linear-gradient(135deg, #fff 10%, var(--cian) 55%, var(--violeta) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitulo {
  margin: 0 auto;
  max-width: 30ch;
  color: var(--texto-tenue);
  font-size: clamp(.98rem, 2.4vw, 1.15rem);
}

/* Los dos botones fijos de las esquinas comparten pinta: píldora dorada.
   Iban en gris del panel y no se veían sobre el cielo estrellado; el oro es
   la marca de la casa y los saca sin gritar. */
.idioma {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  padding: .58rem 1.05rem;
  border: 1px solid rgba(255, 212, 121, .45);
  border-radius: 999px;
  background: rgba(10, 14, 32, .82);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 20px -6px rgba(255, 212, 121, .35);
  color: var(--oro);
  font: 700 .86rem/1 var(--tipo-texto);
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.idioma:hover {
  color: #ffe6ab;
  border-color: rgba(255, 212, 121, .85);
  box-shadow: 0 0 26px -4px rgba(255, 212, 121, .55);
}

/* Esquina de la izquierda: espejo del botón de idioma, mismo tamaño, al otro
   lado. Hay UN solo control ahí y cambia según dónde estés — fuera del viaje
   es «← zaxfun» (sale al hub) y dentro es «← Volver» (sale del viaje). Tenerlos
   a la vez se contraponía: dos flechas doradas peleando por decir «atrás»,
   y el hub no pinta nada en mitad de un viaje.
   La flecha la pone el CSS para los dos: así son idénticos y, además, el
   traductor reescribe el textContent de «Volver» y se la comería. */
.nav-esquina {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .58rem 1.05rem;
  border: 1px solid rgba(255, 212, 121, .45);
  border-radius: 999px;
  background: rgba(10, 14, 32, .82);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 20px -6px rgba(255, 212, 121, .35);
  color: var(--oro);
  font: 700 .86rem/1 var(--tipo-texto);
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.nav-esquina::before {
  content: '←';
  font-size: 1.05em;
  transition: transform .2s;
}
.nav-esquina:hover {
  color: #ffe6ab;
  border-color: rgba(255, 212, 121, .85);
  box-shadow: 0 0 26px -4px rgba(255, 212, 121, .55);
}
.nav-esquina:hover::before { transform: translateX(-3px); }

/* El relevo. `body.en-viaje` lo ponen `arrancar()` y `volver()` en app.js. */
#salir { display: none; }
body.en-viaje #inicio { display: none; }
body.en-viaje #salir { display: inline-flex; }

/* ---------- Pasos ---------- */

.paso { margin-bottom: clamp(2rem, 5vw, 3rem); }

.paso-titulo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.1rem;
  font-family: var(--tipo-titulo);
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -.01em;
}

.paso-num {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  border: 1px solid var(--panel-borde);
  border-radius: 50%;
  color: var(--cian);
  font-size: .82rem;
}

.rejilla { display: grid; gap: .7rem; }

.rejilla-destinos  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.rejilla-vehiculos { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }

/* ---------- Tarjetas seleccionables ---------- */

.opcion {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .85rem .9rem;
  border: 1px solid var(--panel-borde);
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--texto);
  font: 500 .95rem/1.25 var(--tipo-texto);
  text-align: left;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s, background .18s;
}

.opcion:hover { transform: translateY(-2px); border-color: rgba(111, 211, 255, .45); }
.opcion:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

.opcion[aria-checked="true"] {
  border-color: var(--cian);
  background: linear-gradient(135deg, rgba(111,211,255,.16), rgba(185,140,255,.12));
  box-shadow: 0 0 0 1px rgba(111,211,255,.35), 0 8px 30px -12px rgba(111,211,255,.5);
}

.opcion-emoji { font-size: 1.35rem; line-height: 1; flex: none; }
.opcion-nombre { min-width: 0; }

/* ---------- Garaje: vehículos por desbloquear ---------- */

/* El bloqueado se ve a medias: lo justo para querer abrirlo. El emoji se apaga
   del todo para que el premio no se gaste antes de ganarlo. */
.opcion.bloqueada {
  cursor: not-allowed;
  border-style: dashed;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .02);
  color: var(--texto-tenue);
  flex-wrap: wrap;
}
.opcion.bloqueada:hover { transform: none; border-color: rgba(255, 212, 121, .4); }
.opcion.bloqueada .opcion-emoji { filter: grayscale(1); opacity: .35; }

.opcion-candado {
  flex-basis: 100%;
  padding-left: 2rem;
  color: var(--oro);
  font-size: .72rem;
  letter-spacing: .01em;
  opacity: .85;
}

.garaje { margin-top: 1rem; }

.garaje-barra {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}

.garaje-relleno {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violeta), var(--oro));
  transition: width .4s ease;
}

.garaje-texto {
  margin: .5rem 0 0;
  color: var(--texto-tenue);
  font-size: .78rem;
}

/* Aviso de vehículo ganado, en la cabina. */
.aviso-garaje {
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border: 1px solid rgba(255, 212, 121, .45);
  border-radius: var(--radio);
  background: linear-gradient(135deg, rgba(255, 212, 121, .16), rgba(185, 140, 255, .1));
  box-shadow: 0 10px 34px -18px var(--oro);
}

.aviso-garaje-linea {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: var(--texto);
  font: 600 .88rem/1.3 var(--tipo-texto);
}
.aviso-garaje-linea + .aviso-garaje-linea { margin-top: .45rem; }
.aviso-garaje-emoji { font-size: 1.4rem; line-height: 1; flex: none; }

.aviso-garaje-entra { animation: garaje-entra .45s cubic-bezier(.2,.8,.3,1); }

@keyframes garaje-entra {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aviso-garaje-entra { animation: none; }
}

/* ---------- Resultado ---------- */

.resultado { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.resultado[hidden] { display: none; }

.billete {
  position: relative;
  padding: clamp(1.5rem, 5vw, 2.6rem);
  border: 1px solid var(--panel-borde);
  border-radius: 26px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(111,211,255,.09), transparent 60%),
    rgba(11, 15, 34, .72);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.9);
  animation: aparecer .5s cubic-bezier(.2,.8,.3,1) both;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.billete-ruta {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.6rem;
  color: var(--texto-tenue);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.billete-linea {
  flex: 1;
  height: 1px;
  min-width: 20px;
  background: linear-gradient(90deg, var(--panel-borde), var(--cian));
}

.billete-destino { color: var(--cian); font-weight: 600; }

.res-etiqueta {
  margin: 0;
  color: var(--texto-tenue);
  font-size: .95rem;
}

.res-tiempo {
  margin: .15rem 0 0;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: clamp(2.1rem, 8.5vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  background: linear-gradient(120deg, var(--oro) 5%, #fff 45%, var(--cian) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.res-remate {
  margin: .9rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--violeta);
  color: #d6c6ff;
  font-size: clamp(.95rem, 2.4vw, 1.05rem);
}
.res-remate:empty { display: none; }

.res-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .9rem;
  margin: 1.8rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--panel-borde);
}

.res-dato dt {
  color: var(--texto-tenue);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.res-dato dd {
  margin: .2rem 0 0;
  font-family: var(--tipo-titulo);
  font-size: 1.02rem;
}
.res-dato-ancho { grid-column: 1 / -1; }

.res-extras {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}
.res-extras li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--texto-tenue);
  font-size: .93rem;
}
.res-extras li::before {
  content: '›';
  position: absolute;
  left: .4rem;
  color: var(--cian);
}

.res-curiosidad {
  margin: 1.5rem 0 0;
  padding: .9rem 1.1rem;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: var(--texto-tenue);
  font-size: .9rem;
  font-style: italic;
}
.res-curiosidad:empty { display: none; }

.res-acciones { margin-top: 1.8rem; }

.boton {
  padding: .8rem 1.4rem;
  border: 1px solid rgba(111,211,255,.5);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(111,211,255,.18), rgba(185,140,255,.14));
  color: var(--texto);
  font: 600 .92rem/1 var(--tipo-texto);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px var(--cian); }
.boton:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }

/* ---------- Pie ---------- */

/* ---------- Bloque de contenido (SEO) ----------
   Va apagado a propósito: es para Google y para quien baje buscando el dato,
   no para competir con el juguete. Separado por una línea y con el texto un
   punto por debajo del resto de la web. */

.seo {
  margin-top: 4.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--panel-borde);
  color: rgba(233,237,251,.72);
  font-size: .92rem;
  line-height: 1.65;
}

.seo h2 {
  margin: 2.2rem 0 .9rem;
  font-family: var(--tipo-titulo);
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  font-weight: 500;
  color: var(--texto);
  letter-spacing: -.01em;
}
.seo h2:first-child { margin-top: 0; }

.seo h3 {
  margin: 1.6rem 0 .4rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--oro);
}

.seo p { margin: 0 0 .9rem; }
.seo strong { color: var(--texto); font-weight: 600; }

.seo-nota {
  color: rgba(142,151,184,.75);
  font-size: .8rem;
}

/* La tabla se sale en móvil: se desplaza sola en vez de romper el ancho. */
.seo-tabla-marco {
  overflow-x: auto;
  margin: 1.2rem 0;
  -webkit-overflow-scrolling: touch;
}

.seo-tabla {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .85rem;
}

.seo-caption {
  padding-bottom: .6rem;
  color: rgba(142,151,184,.75);
  font-size: .78rem;
  text-align: left;
}

.seo-tabla th,
.seo-tabla td {
  padding: .55rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: right;
  white-space: nowrap;
}

.seo-tabla thead th {
  color: var(--texto-tenue);
  font-weight: 500;
  border-bottom-color: var(--panel-borde);
}

.seo-tabla tbody th {
  color: var(--texto);
  font-weight: 500;
  text-align: left;
}

.seo-tabla tbody tr:hover td,
.seo-tabla tbody tr:hover th { background: rgba(255,255,255,.03); }

.pie {
  margin-top: 3.5rem;
  text-align: center;
  color: rgba(142,151,184,.65);
  font-size: .8rem;
}

/* La firma va discreta: si compite con el juguete, estorba. Solo se enciende
   al pasar por encima, que es cuando alguien ya se está preguntando quién lo hizo. */
.pie-firma { margin: .5rem 0 0; }

.credito {
  color: rgba(142,151,184,.8);
  font-size: .8rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}

.credito:hover,
.credito:focus-visible { color: rgba(233,237,251,.8); border-bottom-color: rgba(255,212,121,.5); }

/* El nombre es la marca: va dorado SIEMPRE, no solo al pasar por encima. */
.firma-nombre {
  color: var(--oro);
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 0 14px rgba(255, 212, 121, .35);
}
.credito:hover .firma-nombre,
.credito:focus-visible .firma-nombre {
  color: #ffe6ab;
  text-shadow: 0 0 18px rgba(255, 212, 121, .6);
}

/* ---------- Arrancar ---------- */

.arrancar-zona { margin-top: 2.5rem; text-align: center; }

.boton-grande {
  padding: 1.05rem 2.4rem;
  font-size: 1.08rem;
  border-color: rgba(111,211,255,.7);
  box-shadow: 0 0 40px -12px var(--cian);
}
.boton-grande:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.arrancar-pista { margin: .9rem 0 0; color: var(--texto-tenue); font-size: .85rem; }

.boton-fantasma { background: transparent; border-color: var(--panel-borde); }

/* ---------- Cabina ---------- */

.cabina[hidden] { display: none; }

.cabina-cabecera {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding-right: 4rem;   /* hueco para el botón de idioma, que va fijo */
}

/* Silenciar el motor. Abre la cabecera de la cabina: «Volver» ya no vive aquí,
   se fue a la esquina de arriba (ver `.nav-esquina`). */
.sonido {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 1px solid var(--panel-borde);
  border-radius: 999px;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.sonido:hover { border-color: var(--cian); }
.sonido[aria-pressed="false"] { opacity: .4; }

.cabina-ruta {
  margin: 0;
  display: flex;
  gap: .6rem;
  align-items: center;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.cabina-destino { color: var(--cian); font-weight: 600; }

/* Escena */

.viaje-escena {
  display: grid;
  place-items: center;
  height: clamp(120px, 22vw, 190px);
  margin-bottom: 1.4rem;
}

.nave {
  font-size: clamp(3rem, 11vw, 4.6rem);
  line-height: 1;
  filter: drop-shadow(0 0 26px rgba(111,211,255,.45));
  animation: flotar 3.2s ease-in-out infinite;
}

@keyframes flotar {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}

/* Barra de progreso */

.barra {
  position: relative;
  height: 34px;
  border: 1px solid var(--panel-borde);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

.barra-relleno {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violeta), var(--cian));
  box-shadow: 0 0 22px -2px var(--cian);
  transition: width .12s linear;
}

.barra-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 .84rem/1 var(--tipo-titulo);
  letter-spacing: .02em;
  color: var(--texto);
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
  font-variant-numeric: tabular-nums;
}

/* HUD */

.hud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.hud-item {
  padding: .9rem 1rem;
  border: 1px solid var(--panel-borde);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}
.hud-item dt {
  color: var(--texto-tenue);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hud-item dd {
  margin: .3rem 0 0;
  font-family: var(--tipo-titulo);
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  font-variant-numeric: tabular-nums;
}

/* Acelerador */

.acelerador {
  margin-top: 2rem;
  padding: 1.3rem;
  border: 1px solid var(--panel-borde);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  text-align: center;
}

.acelerador-titulo {
  margin: 0 0 .9rem;
  color: var(--texto-tenue);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.acelerador-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.paso-vel {
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 1px solid var(--panel-borde);
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  color: var(--texto);
  font: 500 1.5rem/1 var(--tipo-titulo);
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.paso-vel:hover:not(:disabled) { transform: scale(1.08); border-color: var(--cian); }
.paso-vel:disabled { opacity: .3; cursor: not-allowed; }

.paso-vel-fuerte {
  border-color: rgba(111,211,255,.55);
  background: linear-gradient(135deg, rgba(111,211,255,.2), rgba(185,140,255,.16));
  box-shadow: 0 0 26px -8px var(--cian);
}

.acelerador-nivel {
  min-width: 11ch;
  font-family: var(--tipo-titulo);
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  color: var(--oro);
}

.acelerador-burla {
  margin: .9rem 0 0;
  color: var(--violeta);
  font-size: .88rem;
  min-height: 1.2em;
}

/* En viajes largos nunca se llega, así que el momento de compartir es este. */
.compartir-viaje {
  margin-top: 1.1rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--panel-borde);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-tenue);
  font: 500 .85rem/1 var(--tipo-texto);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.compartir-viaje:hover { color: var(--texto); border-color: var(--cian); }

/* Bitácora */

.bitacora {
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45rem;
}

.bitacora-item {
  display: flex;
  gap: .7rem;
  padding: .65rem .9rem;
  border-left: 2px solid var(--violeta);
  border-radius: 0 10px 10px 0;
  background: rgba(255,255,255,.028);
  color: var(--texto-tenue);
  font-size: .9rem;
  animation: entrar .35s cubic-bezier(.2,.8,.3,1) both;
}

@keyframes entrar {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

.bitacora-emoji { flex: none; }

/* Llegada */

.llegada {
  margin-top: 2rem;
  padding: clamp(1.4rem, 5vw, 2.4rem);
  border: 1px solid rgba(111,211,255,.35);
  border-radius: 24px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(111,211,255,.12), transparent 65%),
    rgba(11,15,34,.75);
  animation: aparecer .5s cubic-bezier(.2,.8,.3,1) both;
}
.llegada[hidden] { display: none; }

.llegada-eureka {
  margin: 0;
  font-family: var(--tipo-titulo);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--oro), #fff 60%, var(--cian));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.llegada-resumen { margin: .5rem 0 1.2rem; font-size: 1.05rem; }

.res-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}