/* =========================
   memorial-museo.pro.css
   Override seguro (NO rompe tu base)
   Objetivo: más premium + más consistente
========================= */

:root{
  --pro-shadow: 0 22px 70px rgba(0,0,0,.08);
  --pro-shadow2: 0 14px 40px rgba(0,0,0,.06);
}

/* 1) Tipografía y rendering */
.ml{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2) Topbar: conservar tu museo (NO blanco puro) */
.ml-topbar{
  background: rgba(245,242,236,.86) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

/* 3) Hero: jerarquía más fina */
.ml-hero h1{
  letter-spacing: .03em !important; /* menos abierto que .06, más “lujo” */
  line-height: 1.05 !important;
}
.ml-lead{
  color: rgba(31,31,31,.72) !important;
  line-height: 1.85 !important;
}

/* 4) Botones: premium pero conservador (NO pill exagerado) */
.ml-btn{
  border-radius: 14px !important;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}
.ml-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--pro-shadow2);
}

/* 5) Cards/frames: consistencia y profundidad */
.ml-card, .ml-box, .ml-step, .ml-audiencias__card, .ml-media{
  box-shadow: var(--pro-shadow2) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
}

/* 6) Imágenes: “editorial” sin doble-radius ni doble borde */
.ml-media img{
  border-radius: 0 !important;     /* la caja ya tiene radius */
  box-shadow: none !important;     /* sombra la pone el contenedor */
}
.ml-hero__shot,
.ml-hero__visual{
  box-shadow: var(--pro-shadow2) !important;
}

/* 7) Chips: un poquito más sofisticadas */
.ml-meta span,
.ml-trust span,
.ml-audiencias__badge{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
}

/* 8) Hover suave en cards de audiencias */
.ml-audiencias__card{
  transition: transform .18s ease, box-shadow .18s ease;
}
.ml-audiencias__card:hover{
  transform: translateY(-2px);
  box-shadow: var(--pro-shadow) !important;
}

/* 9) Secciones: más ritmo visual (aire) */
.ml-section{ padding: 74px 0 !important; }
@media (max-width: 520px){
  .ml-section{ padding: 58px 0 !important; }
}

/* 10) Fondo fixed: en móvil puede dar bugs -> lo desactivamos solo en móvil (mejor UX) */
@media (max-width: 980px){
  body{
    background-attachment: scroll !important;
  }
}
/* =========================
   Animaciones suaves (sin JS)
   estilo museo / premium
========================= */

/* Keyframes */
@keyframes mtzFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mtzFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Entrada por bloques */
.ml-topbar{
  animation: mtzFadeIn .55s ease both;
}

.ml-hero__copy{
  animation: mtzFadeUp .75s ease .05s both;
}
.ml-hero__card{
  animation: mtzFadeUp .75s ease .14s both;
}

/* Secciones: entrada sutil (sin depender de scroll) */
.ml-section .ml-head{
  animation: mtzFadeUp .70s ease .05s both;
}
.ml-grid .ml-box{
  opacity: 0;
  animation: mtzFadeUp .70s ease both;
}
.ml-grid .ml-box:nth-child(1){ animation-delay: .05s; }
.ml-grid .ml-box:nth-child(2){ animation-delay: .10s; }
.ml-grid .ml-box:nth-child(3){ animation-delay: .15s; }
.ml-grid .ml-box:nth-child(4){ animation-delay: .20s; }

.ml-steps .ml-step{
  opacity: 0;
  animation: mtzFadeUp .70s ease both;
}
.ml-steps .ml-step:nth-child(1){ animation-delay: .05s; }
.ml-steps .ml-step:nth-child(2){ animation-delay: .12s; }
.ml-steps .ml-step:nth-child(3){ animation-delay: .19s; }

/* Split media: aparece suave */
.ml-split .ml-media{
  animation: mtzFadeUp .70s ease .12s both;
}
.ml-split > div:first-child{
  animation: mtzFadeUp .70s ease .05s both;
}

/* Microinteracción: hover más fino (sin “brincar” feo) */
.ml-box, .ml-step, .ml-card, .ml-audiencias__card, .ml-media{
  will-change: transform;
}
.ml-box:hover, .ml-step:hover, .ml-audiencias__card:hover, .ml-media:hover{
  transform: translateY(-2px);
}

/* Botones: feedback táctil */
.ml-btn{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}
.ml-btn:active{
  transform: translateY(0) scale(.99);
}

/* Accesibilidad: si el usuario prefiere menos movimiento, se apaga todo */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* =========================
   WOW PRO: partículas + shine (CSS only)
   pegar al final
========================= */

/* 1) Partículas sutiles en HERO (sin HTML extra)
   - Usamos capas con radial-gradients repetidos
   - Animación MUY lenta para que no moleste
*/
.ml-hero{
  position: relative;
  overflow: hidden;
}

/* Capa partículas */
.ml-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 70%, rgba(198,161,92,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 56% 30%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 62%, rgba(198,161,92,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.40) 0 1px, transparent 2px);
  filter: blur(.1px);
  mix-blend-mode: overlay;
  animation: mtzParticles 14s linear infinite;
}

@keyframes mtzParticles{
  0%   { transform: translateY(8px); opacity:.24; }
  50%  { opacity:.35; }
  100% { transform: translateY(-10px); opacity:.24; }
}

/* 2) Shine elegante en el H1 (sin cursilería)
   - un gradiente que pasa por encima del texto
*/
.ml-hero h1{
  position: relative;
  display: inline-block;
}

/* La “luz” encima */
.ml-hero h1::after{
  content:"";
  position:absolute;
  inset:-6px -14px;              /* un poquito más grande que el texto */
  pointer-events:none;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.30) 18%,
    rgba(198,161,92,.25) 26%,
    rgba(255,255,255,.18) 34%,
    transparent 48%
  );
  transform: translateX(-60%);
  opacity:.0;
  animation: mtzShine 6.5s ease-in-out infinite;
  mix-blend-mode: overlay;
}

@keyframes mtzShine{
  0%   { transform: translateX(-70%); opacity:0; }
  18%  { opacity:.55; }
  40%  { opacity:.0; }
  100% { transform: translateX(120%); opacity:0; }
}

/* 3) Seguridad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .ml-hero::after,
  .ml-hero h1::after{
    animation: none !important;
  }
}