/* =============================================================================
   Aura — sitio de venta.

   Continúa el lenguaje de las dos piezas que el invitado ya ve: la pantalla
   del segundo monitor y la página de descarga. Mismo par tipográfico, misma
   paleta comprimida hacia el medio, mismos filetes de un píxel en lugar de
   tarjetas. Un prospecto que después vea el producto tiene que reconocerlo.

   Reglas heredadas del repo y no negociables acá tampoco:
   - Ningún asset remoto. Las fuentes viajan en el sitio, no vienen de Google.
   - Sin blanco ni negro puros.
   - El color lo pone el aura. La interfaz es acromática.
   ========================================================================== */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/outfit-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-variable.woff2') format('woff2-variations');
}

:root {
  --fondo: #07070a;
  --texto: #e9e6e1;
  --suave: #8d8a92;
  --linea: rgba(233, 230, 225, 0.11);
  --linea-fuerte: rgba(233, 230, 225, 0.22);

  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;

  --ancho: 1180px;
  --aire: clamp(60px, 7.5vw, 116px);
  --radio: 2px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

::selection { background: var(--texto); color: var(--fondo); }

a { color: inherit; }

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--texto); color: var(--fondo); padding: 12px 18px; z-index: 99;
}
.saltar:focus { left: 12px; top: 12px; }

/* ---------- tipografía compartida ---------- */

.micro {
  font-size: 0.63rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--suave);
  font-weight: 400;
}

h1, h2, h3 { font-weight: 300; letter-spacing: -0.005em; }

h1 {
  font-family: var(--serif);
  font-size: clamp(2.7rem, 7.2vw, 6rem);
  line-height: 1.02;
  margin: 26px 0 0;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  margin: 18px 0 0;
}

h3 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

em { font-style: italic; }

/* ---------- barra ---------- */

.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(18px, 4vw, 44px);
  /* Sin blur ni tarjeta: un velo que se oscurece al bajar, y nada más. */
  background: linear-gradient(to bottom, rgba(7, 7, 10, 0.9), rgba(7, 7, 10, 0));
  transition: background 0.4s ease;
}
.barra.pegada { background: rgba(7, 7, 10, 0.94); border-bottom: 1px solid var(--linea); }

.barra .marca {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.marca-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--texto);
  box-shadow: 0 0 12px 2px rgba(233, 230, 225, 0.55);
  animation: latir 4.2s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.barra nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.barra nav a {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--suave);
  transition: color 0.25s ease;
}
.barra nav a:hover { color: var(--texto); }
.barra-cta {
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 9px 16px;
  color: var(--texto) !important;
}
.barra-cta:hover { background: var(--texto); color: var(--fondo) !important; }
@media (max-width: 620px) {
  .barra nav a:not(.barra-cta) { display: none; }
}

/* ---------- campo de aura (WebGL) ---------- */

.campo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(38px, 6vh, 70px);
  padding: 118px 0 46px;
  overflow: hidden;
  isolation: isolate;
}
/* El texto se apoya sobre el campo: un velo radial le devuelve el contraste
   sin ensuciar el color, que es lo único que aporta color en toda la página. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(115% 75% at 50% 52%, rgba(7, 7, 10, 0.34) 0%, rgba(7, 7, 10, 0.16) 42%, rgba(7, 7, 10, 0.74) 100%),
    linear-gradient(to bottom, rgba(7, 7, 10, 0.8) 0%, rgba(7, 7, 10, 0) 26%, rgba(7, 7, 10, 0) 62%, var(--fondo) 100%);
  pointer-events: none;
}
.hero-cont {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 940px;
  margin: auto auto 0;
  padding: 0 clamp(20px, 5vw, 40px);
  text-align: center;
  /* El contraste sale de la sombra del texto y no de oscurecer el campo:
     tapar el aura para poder leer el titulo seria apagar justo lo que la
     pagina vino a mostrar. */
  text-shadow: 0 2px 40px rgba(7, 7, 10, 0.95), 0 1px 8px rgba(7, 7, 10, 0.8);
}
/* El volante del hero pisa el nucleo del campo, que es la zona mas clara de
   toda la pagina: con el gris suave de las demas franjas ahi no se lee. */
.hero-cont .micro { color: color-mix(in srgb, var(--texto) 82%, transparent); }

.entrada {
  max-width: 52ch;
  margin: 30px auto 0;
  color: var(--suave);
  font-size: 1.02rem;
  line-height: 1.8;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 40px;
}

.btn {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radio);
  padding: 16px 28px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-lleno { background: var(--texto); color: var(--fondo); }
.btn-lleno:hover { background: transparent; color: var(--texto); border-color: var(--texto); }
.btn-linea { border-color: var(--linea-fuerte); color: var(--texto); background: transparent; }
.btn-linea:hover { border-color: var(--texto); background: rgba(233, 230, 225, 0.06); }

.baja {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: 62px;
  background: var(--linea);
  overflow: hidden;
  display: none;
}
.baja span {
  display: block;
  width: 1px;
  height: 26px;
  background: var(--texto);
  animation: caer 2.8s ease-in-out infinite;
}
@keyframes caer {
  0% { transform: translateY(-30px); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(62px); opacity: 0; }
}

/* ---------- franjas ---------- */

.franja {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--aire) clamp(20px, 5vw, 40px);
  border-top: 1px solid var(--linea);
}
.franja:first-of-type { border-top: 0; }
.franja-cab { max-width: 40ch; }
.franja-sub { color: var(--suave); margin-top: 22px; max-width: 46ch; }

.declaracion {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.14;
  margin-top: 26px;
  max-width: 22ch;
}
.declaracion em { color: var(--suave); }
.declaracion.chica { font-size: clamp(1.5rem, 3vw, 2.4rem); max-width: 20ch; }

.dos-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 60px);
  margin-top: clamp(40px, 6vw, 72px);
  color: var(--suave);
  max-width: 900px;
}

/* ---------- galería ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 20px);
  margin-top: clamp(40px, 6vw, 72px);
}
@media (max-width: 900px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rejilla { grid-template-columns: 1fr; } }

/* Sin tarjeta, sin radio: la foto es un objeto que se apoya sobre el fondo.
   Es la misma decisión que se tomó en la página de descarga. */
.pieza { position: relative; overflow: hidden; }
.pieza img {
  width: 100%;
  /* `height: auto` no es decorativo: sin eso gana el atributo height del HTML
     —que existe para reservar el espacio y no saltar al cargar— y aspect-ratio
     se ignora, con lo que las piezas salen tres veces mas altas. */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 26%;
  background: #000;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pieza:hover img { transform: scale(1.035); }
.pieza figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 46px 16px 16px;
  background: linear-gradient(to top, rgba(7, 7, 10, 0.92), rgba(7, 7, 10, 0));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pieza-color {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
}
.pieza-rasgo {
  font-size: 0.7rem;
  color: var(--suave);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.nota {
  margin-top: 26px;
  font-size: 0.75rem;
  color: var(--suave);
  letter-spacing: 0.04em;
}

/* ---------- revelar ---------- */

.revelar { position: relative; isolation: isolate; }
.campo-caja {
  position: absolute;
  inset: var(--aire) 0 auto 0;
  height: min(560px, 70vw);
  z-index: 0;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 78%);
  opacity: 0.9;
}
.revelar-cont { position: relative; z-index: 1; text-align: center; }
.revelar .micro, .revelar h2 { margin-left: auto; margin-right: auto; }
.revelar h2 { max-width: 16ch; }

.revelar-caja {
  margin: clamp(48px, 8vw, 96px) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 210px;
  justify-content: center;
}
.revelar-nombre {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 5.6rem);
  line-height: 1;
  transition: opacity 0.45s ease;
}
.revelar-rasgo {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--suave);
  max-width: 34ch;
  line-height: 2;
  transition: opacity 0.45s ease;
}
.revelar-caja.cambiando .revelar-nombre,
.revelar-caja.cambiando .revelar-rasgo { opacity: 0; }
#revelar-btn { margin-top: 22px; }

.pie-nota {
  margin: clamp(40px, 6vw, 64px) auto 0;
  max-width: 44ch;
  color: var(--suave);
  font-size: 0.86rem;
}

/* ---------- pasos ---------- */

.lista-pasos {
  list-style: none;
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border-top: 1px solid var(--linea);
}
.lista-pasos li {
  padding: 34px clamp(18px, 2.4vw, 30px) 40px;
  border-bottom: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
}
.lista-pasos li:last-child { border-right: 0; }
.paso-n {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--suave);
  margin-bottom: 22px;
}
.lista-pasos h3 { margin-bottom: 12px; }
.lista-pasos p { color: var(--suave); font-size: 0.92rem; line-height: 1.75; }

/* ---------- banda ---------- */

.banda {
  position: relative;
  margin: 0;
  min-height: min(78vh, 680px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.banda img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 40%;
  z-index: 0;
}
.banda::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, var(--fondo) 6%, rgba(7, 7, 10, 0.72) 40%, rgba(7, 7, 10, 0.1) 72%),
    linear-gradient(to bottom, var(--fondo), rgba(7, 7, 10, 0) 22%, rgba(7, 7, 10, 0) 78%, var(--fondo));
}
.banda-txt {
  position: relative;
  z-index: 2;
  max-width: var(--ancho);
  width: 100%;
  margin: 0 auto;
  padding: 60px clamp(20px, 5vw, 40px);
}
@media (max-width: 700px) {
  .banda { min-height: 74vh; }
  .banda img { object-position: 62% 30%; }
  .banda::after {
    background:
      linear-gradient(to bottom, var(--fondo) 4%, rgba(7, 7, 10, 0.35) 40%, rgba(7, 7, 10, 0.92) 78%, var(--fondo));
  }
  .banda { align-items: flex-end; }
}

/* ---------- formatos ---------- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 6vw, 76px);
  background: var(--linea);
  border: 1px solid var(--linea);
}
.tarjeta {
  background: var(--fondo);
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 32px) clamp(32px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease;
}
.tarjeta:hover { background: #0c0c11; }
.tarjeta-n {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--suave);
  margin-bottom: 26px;
}
.tarjeta h3 {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 16px;
}
.tarjeta-txt { color: var(--suave); font-size: 0.9rem; line-height: 1.75; }
.tarjeta-lista {
  list-style: none;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.tarjeta-lista li { padding-left: 16px; position: relative; color: var(--texto); }
.tarjeta-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--suave);
}
/* El escalón más alto se marca con una luz arriba, no con un color. */
.tarjeta-alta { box-shadow: inset 0 1px 0 0 var(--texto); }

/* ---------- para marcas ---------- */

.rejilla-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(30px, 4vw, 56px);
  margin-top: clamp(44px, 6vw, 76px);
}
.item h3 { padding-bottom: 14px; border-bottom: 1px solid var(--linea); margin-bottom: 16px; }
.item p { color: var(--suave); font-size: 0.92rem; }

/* ---------- montaje ---------- */

.montaje-cont {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 800px) { .montaje-cont { grid-template-columns: 1fr; } }
.montaje-txt p { color: var(--suave); margin-top: 24px; font-size: 0.95rem; }

.ficha { border-top: 1px solid var(--linea); }
.ficha > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.4fr) 1fr;
  gap: 18px;
  padding: 17px 2px;
  border-bottom: 1px solid var(--linea);
}
.ficha dt {
  font-size: 0.63rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--suave);
  padding-top: 4px;
}
.ficha dd { font-size: 0.95rem; }

/* ---------- contacto ---------- */

.contacto { text-align: center; }
.contacto h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.contacto-sub {
  color: var(--suave);
  max-width: 46ch;
  margin: 26px auto 0;
  font-size: 0.95rem;
}

/* ---------- pie ---------- */

.pie {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 60px clamp(20px, 5vw, 40px) 70px;
  border-top: 1px solid var(--linea);
  text-align: center;
}
.pie-marca { font-family: var(--serif); font-size: 1.5rem; }
.pie-txt { color: var(--suave); font-size: 0.84rem; margin-top: 12px; }
.pie-txt a { text-decoration: none; border-bottom: 1px solid var(--linea-fuerte); }
.pie-txt a:hover { color: var(--texto); border-bottom-color: var(--texto); }
.pie-legal {
  color: var(--suave);
  font-size: 0.7rem;
  margin-top: 26px;
  opacity: 0.7;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}



/* ---------- la pared de retratos ----------
   Doce invitados con doce colores, desfilando despacio abajo del titular. Es
   la prueba del producto y va antes que cualquier argumento: el referente más
   grande del rubro abre igual, con una pared de copias, porque no hay frase
   que explique esto mejor que verlo doce veces seguidas.

   El desfile es infinito porque `sitio.js` clona la pista: media pista de
   desplazamiento vuelve exactamente al punto de partida. */
.pared {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: auto;
  overflow: hidden;
  /* Los bordes se disuelven en el fondo en vez de cortar una foto al medio. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.pared-pista {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: desfilar 90s linear infinite;
}
.pared-pista img {
  height: clamp(132px, 21vh, 210px);
  width: auto;
  flex: none;
  background: #000;
}
@keyframes desfilar {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.pared:hover .pared-pista { animation-play-state: paused; }

/* ---------- ocasiones ---------- */

.ocasiones { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 110px); }
.ocasion {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}
.ocasion.invertida { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.ocasion.invertida img { order: 2; }
.ocasion img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 26%;
  background: #000;
}
.ocasion-txt h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 300;
  line-height: 1.14;
  margin: 16px 0 20px;
}
.ocasion-txt p:last-child { color: var(--suave); font-size: 0.95rem; }
@media (max-width: 760px) {
  .ocasion, .ocasion.invertida { grid-template-columns: 1fr; }
  .ocasion.invertida img { order: 0; }
}

/* ---------- cruce a la página de marcas ---------- */

.contacto-cruce {
  margin-top: clamp(44px, 6vw, 68px);
  padding-top: 26px;
  border-top: 1px solid var(--linea);
  font-size: 0.85rem;
  color: var(--suave);
}
.contacto-cruce a {
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid var(--linea-fuerte);
  padding-bottom: 2px;
}
.contacto-cruce a:hover { border-bottom-color: var(--texto); }



/* ---------- página de marcas ----------
   Comparte todo con la principal salvo dos bloques: las cifras y la tabla
   comparativa. Son los dos formatos que la categoría usa para hablarle a un
   anunciante, y no tienen lugar en la página del invitado. */

.hero-corto { min-height: 88svh; }

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin-top: clamp(34px, 5vw, 56px);
  background: var(--linea);
  border: 1px solid var(--linea);
}
.cifra { background: var(--fondo); padding: clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 30px); }
.cifra-n {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 0.95;
  font-weight: 300;
}
.cifra-t {
  margin-top: 16px;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--suave);
}

.tabla {
  margin-top: clamp(40px, 6vw, 68px);
  border-top: 1px solid var(--linea);
  font-size: 0.9rem;
}
.tabla-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--linea);
  align-items: baseline;
}
.tabla-fila span:first-child { color: var(--suave); }
.tabla-fila span:nth-child(2) { color: var(--suave); }
.tabla-cab span {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--suave) !important;
}
/* La columna nuestra se marca con peso y luz, no con un color de acento: el
   único color de la página lo pone el aura. */
.tabla .si { color: var(--texto); font-weight: 400; }
@media (max-width: 620px) {
  .tabla-fila { grid-template-columns: 1fr; gap: 4px; padding: 14px 2px; }
  .tabla-cab { display: none; }
  .tabla-fila span:nth-child(2)::before { content: 'Photobooth: '; opacity: 0.6; }
  .tabla-fila span:nth-child(3)::before { content: 'Aura: '; opacity: 0.6; }
}

/* ---------- aparecer al entrar ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--demora, 0ms);
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .baja span, .marca-punto { animation: none; }
  .pared-pista { animation: none; }
  .pieza img { transition: none; }
}