/* ═══════════════════════════════════════════════════════════════════════════
   TITULARES — una sola familia de tinta, y el acento donde no estorba
   ---------------------------------------------------------------------------
   La página tenía TRES tintas peleando en la misma pantalla:

     · azul marino  #102434  en los titulares del carrusel
     · vinotinto    #3b0921  en los titulares de sección
     · café         #c36011  en la segunda línea de esos titulares

   El café era el que rompía. Es el naranja de marca (#ff8a1f) con la
   luminosidad bajada, y un naranja oscurecido deja de leerse como naranja:
   sobre blanco se lee como marrón sucio. Además no está en el logo — el
   emblema tiene naranja VIVO, no café.

   Ahora hay una sola familia: el azul marino que el logo ya usa en su
   texto, en dos intensidades para mantener la jerarquía de las dos líneas.
   El rosa de marca queda como acento en piezas chicas, que es donde un
   color saturado suma sin competir con la lectura.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Marino profundo: la tinta de los titulares. Un punto más oscuro que el
     #102434 del carrusel, para que el titular pese más que el cuerpo. */
  --tit-tinta:#0f2438;
  /* Segunda línea. Mismo tono, más aire: jerarquía sin cambiar de familia. */
  --tit-tinta-suave:#2c5478;
  /* Acento. Es --brand oscurecido hasta pasar contraste AA sobre blanco. */
  --tit-acento:#c42368;
}

/* Los titulares de sección sobre fondo claro. Los que van sobre foto
   (servicios, casilla, anuncios) siguen en blanco y no se tocan. */
#proceso .processIntro h2,
#cotizador h2,
#tarifas h2,
#contacto h2,
.trackHelp h2{
  color:var(--tit-tinta)!important;
}

#proceso .processIntro h2 em,
#cotizador h2 em,
#tarifas h2 em,
#contacto h2 em{
  color:var(--tit-tinta-suave)!important;
  font-style:normal;
  /* Trazo rosa por debajo: el acento de marca entra como gesto gráfico y no
     como tinta, así la palabra se sigue leyendo en la misma familia. */
  background-image:linear-gradient(var(--tit-acento),var(--tit-acento));
  background-repeat:no-repeat;
  background-size:100% 3px;
  background-position:0 calc(100% - .08em);
  padding-bottom:.1em;
}

/* El epígrafe venía en rosa lavado (#f387b7): sobre blanco daba 2:1 de
   contraste, ilegible para media pantalla. El rosa de marca oscurecido llega
   a 5:1 y sigue siendo el mismo color de la casa. */
.sectionEyebrow{
  color:var(--tit-acento)!important;
}

/* ── Animación de entrada ───────────────────────────────────────────────────
   Las letras las parte `landing-headings.js` y las anima GSAP, que ya está
   en la página para el resto del sitio.

   REGLA: este archivo NUNCA esconde una letra. El estado inicial nace con el
   tween de GSAP, que se crea recién cuando el titular entra en pantalla. Si
   el JS no corre —error, red caída, navegador viejo— el titular se ve entero
   y quieto, que es exactamente lo que tiene que pasar. Ocultar desde el CSS
   y confiar en que el JS lo revele es la receta para una página con los
   titulares en blanco; ya pasó una vez con ScrollTrigger. */
.tit-letra{
  display:inline-block;
  /* La animación mueve transform y opacity, nada más: son las dos
     propiedades que el compositor resuelve sin recalcular la página. */
  will-change:transform,opacity;
}

/* La palabra no se puede partir a mitad al saltar de línea: como cada letra
   es inline-block, sin esto el navegador cortaría «histo/ria». */
.tit-palabra{
  display:inline-block;
  white-space:nowrap;
}

/* Terminada la animación se suelta el will-change: mantenerlo en decenas de
   spans deja capas de compositor vivas para siempre. */
.tit-listo .tit-letra{
  will-change:auto;
}

@media (prefers-reduced-motion: reduce){
  .tit-letra{
    /* Por si el JS ya había puesto el estado inicial antes de leer la
       preferencia: se fuerza la vuelta al reposo. */
    opacity:1!important;
    transform:none!important;
    will-change:auto;
  }
}