/* El eslogan de portada: la frase que define la marca, a escala de pieza.
 *
 * Se separa de `web.css` porque tiene su propio sistema —tamaño de display,
 * traza encendida, aparición por palabra— y mezclarlo con los estilos
 * generales del sitio haría difícil tocarlo sin romper otra cosa.
 *
 * El color sale del contexto: sobre el marino del hero hereda el blanco y el
 * turquesa que ya define `.hero`. Ningún color literal vive acá.
 */

.eslogan {
  /* Bastante más grande que --txt-3xl: es la pieza principal de la portada y
     compartir tamaño con los títulos de sección la convertiría en uno más.
     Baja un punto respecto del tamaño anterior porque en mayúsculas la misma
     frase ocupa más ancho y se partía en tres líneas a media pantalla. */
  font-size: clamp(2.3rem, 1.3rem + 4.6vw, 4.9rem);
  line-height: 1;
  /* En mayúsculas las letras necesitan aire entre sí: el interletraje
     negativo que favorece a las minúsculas las aprieta hasta tocarse. */
  letter-spacing: -0.005em;
  font-weight: 700;
  margin: 0;
  /* El eslogan de marca va en mayúsculas, como figura en el documento
     comercial. Se aplica desde la hoja y no escribiendo «TÚ TIENES EL
     CONTROL» en el código: así el texto que leen los buscadores, los
     lectores de pantalla y el documento fuente sigue siendo el de la frase,
     con sus tildes, y la caja es una decisión de presentación. */
  text-transform: uppercase;
  /* `balance` reparte las líneas en lugar de dejar una palabra sola abajo,
     que es lo que arruina un titular grande en una pantalla intermedia. */
  text-wrap: balance;
}

/* La versión en inglés. Acompaña al eslogan sin competir con él: mismo
   interletraje ancho de las versalitas del sitio, tamaño de apunte. */
.eslogan__ingles {
  margin-top: 0.9rem;
  font-size: clamp(0.82rem, 0.7rem + 0.5vw, 1.05rem);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--turquesa-400);
}

.eslogan__linea {
  display: block;
}

.eslogan__palabra,
.eslogan__acento {
  display: inline-block;
}

/* --------------------------------------------------------- la palabra clave */
.eslogan__acento-envoltura {
  position: relative;
  display: inline-block;
  /* Deja sitio a la traza sin empujar el resto de la composición. */
  padding-bottom: 0.34em;
}

.eslogan__acento {
  color: var(--turquesa-400);
  position: relative;
}

.eslogan__punto {
  color: var(--turquesa-400);
}

/* ------------------------------------------------------------------ la traza */
/* Va DEBAJO de la palabra, nunca cruzándola: un trazo sobre las letras roba
   legibilidad, que es justo lo que un eslogan no se puede permitir. */
.eslogan__traza {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  width: 100%;
  height: 0.3em;
  color: var(--turquesa-400);
  overflow: visible;
}

.eslogan__pista {
  opacity: 0.5;
}

.eslogan__nodos {
  opacity: 0.9;
}

/* ------------------------------------------------------------- interacción */
/* El estado de foco importa tanto como el de hover: la pieza es interactiva
   solo si se puede alcanzar con el teclado. */
.eslogan[data-activo="1"] .eslogan__pista {
  opacity: 1;
}

.eslogan[data-activo="1"] .eslogan__acento {
  /* Un realce por sombra y no por cambio de color: cambiar el color haría
     saltar el contraste de una palabra que ya está en la paleta. */
  text-shadow: 0 0 1.6rem var(--sombra-acento);
}

.eslogan__pista,
.eslogan__acento {
  transition: opacity var(--transicion), text-shadow var(--transicion);
}

/* --------------------------------------------------------------- aparición */
/* Las palabras entran escalonadas. El retraso lo fija la plantilla por
   palabra, y no hay estado inicial oculto en CSS: si el JavaScript no
   corriera, el titular se vería igual, completo y quieto. */
.eslogan[data-eslogan-revelar="pendiente"] .eslogan__palabra,
.eslogan[data-eslogan-revelar="pendiente"] .eslogan__acento {
  opacity: 0;
  transform: translateY(0.22em);
}

.eslogan[data-eslogan-revelar="visible"] .eslogan__palabra,
.eslogan[data-eslogan-revelar="visible"] .eslogan__acento {
  opacity: 1;
  transform: none;
  /* La misma curva que `--transicion` usa en el resto del sistema, escrita
     entera porque acá hace falta separar duración y retraso. */
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1) var(--retraso, 0ms),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1) var(--retraso, 0ms);
}

/* La traza aparece después de la palabra que subraya: al revés se vería
   dibujar un subrayado bajo un hueco. */
.eslogan[data-eslogan-revelar="pendiente"] .eslogan__traza { opacity: 0; }
.eslogan[data-eslogan-revelar="visible"] .eslogan__traza {
  opacity: 1;
  transition: opacity 700ms ease 520ms;
}

/* ------------------------------------------------------ movimiento reducido */
/* Se apaga todo: la aparición, la transición y la señal que recorre la traza.
   La composición se sostiene sin animarse, que es la prueba de que la
   animación era un refuerzo y no la pieza. */
@media (prefers-reduced-motion: reduce) {
  .eslogan[data-eslogan-revelar] .eslogan__palabra,
  .eslogan[data-eslogan-revelar] .eslogan__acento,
  .eslogan[data-eslogan-revelar] .eslogan__traza {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .eslogan__senal {
    display: none;
  }
}