/* ══════════════════════════════════════════════════════════════════
   OTAVIANI · EFECTOS PREMIUM (18/10/2026)
   Lo que necesitan en CSS las piezas nuevas de motion.js. Recetas y
   evidencia: 2-OFERTA-3S/web-preview/pedido-2026-10-18/06-EFECTOS-PREMIUM.md,
   seccion C. Regla de marca: el celeste #53BDEB solo sobre fondo oscuro.
   Con movimiento reducido todo queda quieto, entero y legible.
══════════════════════════════════════════════════════════════════ */

/* ── Item 2 · Titulares con mascara de palabras ──
   El h1 nace oculto (js-reveal-pending) para que no se vea entero y despues
   desaparezca. motion.js saca la clase al partirlo; si motion.js no llega,
   la red de contencion del <head> la saca a los 2,5 s. */
@media (prefers-reduced-motion: no-preference) {
  [data-titulo-mascara].js-reveal-pending { visibility: hidden; }
}

/* ── Item 9 · Frase palabra por palabra (home, seccion 2) ──
   Sin motor o con movimiento reducido: la frase entera, con el aire de antes. */
.frase-escena { padding-block: 12rem; }
@media (min-width: 64rem) { .frase-escena { padding-block: 8rem; } }
/* El id le gana a mejoras-huge.css, que fija el tamano del viejo titular rotatorio. */
#titular-rotatorio.frase-escena__h2 { margin: 0; text-wrap: balance; font-size: clamp(3rem, 8vw, 8.75rem); line-height: 1 !important; }
@media (max-width: 767px) { #titular-rotatorio.frase-escena__h2 { font-size: 12.5vw; } }
@media (prefers-reduced-motion: no-preference) {
  html[data-motor] .frase-escena { height: 220svh; padding-block: 0; }
  html[data-motor] .frase-escena__fijo {
    position: sticky; top: 0; height: 100svh; align-self: start;
    display: flex; align-items: center;
  }
  .frase-escena__h2 .frase-palabra { color: #0E2A5C; transition: color .5s ease-out; }
  .frase-escena__h2 .frase-palabra.is-apagada { color: rgba(14, 42, 92, .16); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html[data-motor] .frase-escena { height: 170svh; }
}

/* ── Item 6 · Cortina con el monograma de ocho cajas ──
   El monograma a color va arriba (sobre el azul del panel, el celeste es de
   marca); el rotulo de la pagina queda debajo, mas chico. */
.transition__cajas {
  display: block; width: clamp(84px, 8vw, 128px); height: auto;
  margin: 0 auto clamp(14px, 1.6vw, 24px); overflow: visible;
}
.transition__cajas g { opacity: 0; visibility: hidden; }
.transition__label { font-size: clamp(20px, 2.4vw, 34px) !important; }
.transition__rotulo { display: block; }

/* ── Item 10 · Cursor con vista previa en /casos ── */
.cursor-vista {
  position: fixed; top: 0; left: 0; z-index: 99; pointer-events: none;
  width: clamp(220px, 17vw, 280px); aspect-ratio: 4 / 3;
  border-radius: 10px; overflow: hidden; background: #0E2A5C;
  box-shadow: 0 24px 60px -20px rgba(8, 25, 54, .55);
  opacity: 0; visibility: hidden; will-change: transform;
}
.cursor-vista img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cursor-marquee.is-oculto .cursor-marquee__card { opacity: 0 !important; }

/* ── Item 8 · Logos en dos filas a contramano, solo en celular ── */
.ins-logos__cintas { display: none; }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .ins-logos__grupo .ins-logos__grid { display: none; }
  .ins-logos__cintas {
    display: flex; flex-direction: column; gap: 4px;
    width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
  }
  .ins-logos__cinta { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
  .ins-logos__cinta-celda { position: relative; flex: none; width: 118px; height: 84px; }
  .ins-logos__cinta .ins-logos__logo { width: min(calc(var(--logo-h) * var(--k, 1) * var(--ar, 3)), 92px); }
}