/* ==========================================================================
   MATESEREÑO — Utilidades de animación
   Se aplican agregando la clase (ej: "revelar revelar--subir") a cualquier
   elemento. animaciones.js agrega "revelar--activo" cuando el elemento
   entra en pantalla (Intersection Observer).

   Para escalonar una grilla no hace falta tocar nada: poné
   data-stagger en el contenedor y el JS le asigna el retraso a cada hijo.
   ========================================================================== */

.revelar {
  opacity: 0;
  transition:
    opacity   var(--dur-media) var(--ease-suave),
    transform var(--dur-media) var(--ease-suave),
    filter    var(--dur-media) var(--ease-suave),
    clip-path var(--dur-media) var(--ease-suave);
  transition-delay: var(--reveal-retraso, 0s);
  will-change: opacity, transform;
}

/* ---- Variantes de entrada ---- */
.revelar--subir      { transform: translate3d(0, 38px, 0); }
.revelar--bajar      { transform: translate3d(0, -38px, 0); }
.revelar--izquierda  { transform: translate3d(-46px, 0, 0); }
.revelar--derecha    { transform: translate3d(46px, 0, 0); }
.revelar--zoom       { transform: scale(0.92); }
.revelar--blur       { filter: blur(10px); }

/* Sube + se acerca: la que mejor queda en tarjetas de producto */
.revelar--carta {
  transform: translate3d(0, 44px, 0) scale(0.965);
  filter: blur(4px);
}

/* Cortina: el contenido se descubre de abajo hacia arriba */
.revelar--cortina {
  clip-path: inset(100% 0 0 0);
  transform: translate3d(0, 24px, 0);
}

/* Imagen que además hace un micro zoom-out al aparecer */
.revelar--foto      { transform: scale(1.06); filter: blur(6px); }

/* En celular las entradas laterales se cambian por verticales: el
   desplazamiento horizontal de 46px asomaba por el costado derecho y
   dejaba una franja vacía con scroll lateral. */
@media (max-width: 860px) {
  .revelar--izquierda { transform: translate3d(0, 32px, 0); }
  .revelar--derecha   { transform: translate3d(0, 32px, 0); }
}

.revelar--activo {
  opacity: 1;
  transform: none;
  filter: blur(0);
  clip-path: inset(0 0 0 0);
}

/* Una vez terminada la entrada, sacamos will-change (lo hace el JS) */
.revelar--listo { will-change: auto; }

/* Retrasos escalonados manuales (se siguen pudiendo usar en el HTML) */
.revelar--retraso-1 { --reveal-retraso: 0.08s; }
.revelar--retraso-2 { --reveal-retraso: 0.16s; }
.revelar--retraso-3 { --reveal-retraso: 0.24s; }
.revelar--retraso-4 { --reveal-retraso: 0.32s; }
.revelar--retraso-5 { --reveal-retraso: 0.40s; }
.revelar--retraso-6 { --reveal-retraso: 0.48s; }

/* ==========================================================================
   Título con línea dorada que se dibuja al entrar en pantalla
   ========================================================================== */

.seccion__cabecera .seccion__titulo { position: relative; }

.seccion__cabecera .seccion__titulo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--dorado-sutil), transparent);
  transform: translateX(-50%);
  transition: width 1s var(--ease-suave) 0.25s;
}

.seccion__cabecera.revelar--activo .seccion__titulo::after { width: 128px; }

/* ==========================================================================
   Animaciones sueltas reutilizables
   ========================================================================== */

@keyframes ms-fade-arriba {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

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

@keyframes ms-brillo {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%)  skewX(-18deg); }
}

@keyframes ms-aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Barrido de luz sobre botones/tarjetas premium */
.brillo { position: relative; overflow: hidden; }

.brillo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

.brillo:hover::after { animation: ms-brillo 0.9s var(--ease-salida); }

/* ==========================================================================
   Accesibilidad: sin movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .revelar {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .brillo::after { display: none; }
  .seccion__cabecera .seccion__titulo::after { width: 128px; transition: none; }
}