/* ============================================================
   Compatibilidad diseño Editorial <-> Tailwind del resto del sitio.
   Se carga DESPUES de editorial.css. No cambia el diseño: solo evita
   choques de clases utilitarias de Tailwind con clases del diseño.
   ============================================================ */

/* Tailwind define `.invert` como `filter: invert(100%)`. El diseño usa la
   clase `.invert` para el ESQUEMA de color oscuro (fondo --ink, texto crema,
   acento azul). El filtro de Tailwind invertia los colores (fondo claro, texto
   oscuro, azul -> amarillo). Neutralizamos el filtro SOLO en las secciones del
   diseño para restaurar el look correcto. */
.band.invert,
.sec-divider.invert,
.contact.invert,
.footer.invert,
.menu.invert {
  filter: none !important;
}

/* ── Hero anim (red de agentes en vivo) ─────────────────────── */
.hero-media .hero-anim { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }

/* ── Hero video cinematográfico (Veo) ───────────────────────── */
.hero-media .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; opacity: 0;
  /* blur + bajada de intensidad: el video acompaña sin opacar el titular */
  transform: scale(1.06); /* margen de parallax */
  filter: brightness(0.72) saturate(0.72);
  transition: opacity 1.2s ease;
  will-change: transform, opacity;
}
/* VIDRIO ESMERILADO PROGRESIVO: el cubo se ve nítido arriba; hacia abajo aparece
   un blur real (backdrop-filter) + tinte, como un panel de vidrio donde vive el texto */
.hero-media.video-on::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(24px) saturate(0.95);
  backdrop-filter: blur(24px) saturate(0.95);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, rgba(0,0,0,0.6) 48%, #000 72%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, rgba(0,0,0,0.6) 48%, #000 72%);
}
/* tinte de contraste para el texto (encima del vidrio) */
.hero-media.video-on::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,8,20,0.14) 0%, rgba(2,8,20,0.24) 45%, rgba(2,8,20,0.58) 100%);
}
/* fallback sin soporte de backdrop-filter: scrim más fuerte */
@supports not (backdrop-filter: blur(1px)) {
  .hero-media.video-on::after {
    background: linear-gradient(180deg, rgba(2,8,20,0.10) 0%, rgba(2,8,20,0.35) 50%, rgba(2,8,20,0.78) 100%);
  }
}
.hero-media.video-on .hero-video { opacity: 1; }
.hero-media.video-on .hero-anim { display: none; }
.hero-media.video-on .ph { opacity: .55; } /* el gradiente queda como base de color */

/* ── Tipografía del hero: separación del fondo (sombra en capas, estilo Apple) ── */
.hero-overlay h1 {
  text-shadow: 0 2px 6px rgba(2,8,20,0.45), 0 10px 40px rgba(2,8,20,0.55);
}
.hero-foot p, .hero-topline {
  text-shadow: 0 1px 4px rgba(2,8,20,0.55), 0 6px 24px rgba(2,8,20,0.45);
}