:root {
  /* Margen lateral común. Es el mismo inset del header fijo, del hero
     y del footer: ninguna sección debe sobrepasarlo. */
  --edge: 10px;
  /* Ancho al que se alinea el contenido en pantallas anchas. */
  --container: 1440px;
  /* Margen de los bloques contenidos (tarjetas, rejillas). Hasta
     1440px coincide con --edge; más allá crece para que el contenido
     no se estire, mientras los paneles con fondo (hero, principios,
     sobre mí, banda, cierre) siguen llegando de borde a borde. */
  --side: var(--edge);
  /* Margen del texto: títulos, reglas y párrafos sueltos. */
  --gutter: clamp(20px, 5.4vw, 78px);
  /* Aire entre una sección y la siguiente. */
  --section-gap: clamp(84px, 10.4vw, 150px);
  --radius: 20px;
  /* Pintura: los colores de La noche estrellada, a plena saturación. */
  --night-deep: #070b2c;
  --night-blue: #131c7a;
  --starry-blue: #2743f5;
  --celestial-blue: #5c93ff;
  --swirl-violet: #8f7bff;
  --wind-aqua: #37e2c4;
  --moon-yellow: #ffcd1c;
  --star-yellow: #ffe970;
  --warm-glow: #ff7733;
  --cypress-green: #0d4a3c;
  /* Papel y tinta. */
  --color-bg: #f2f3fb;
  --color-surface: #ffffff;
  --color-text: #0a0f33;
  --color-text-soft: #4c5380;
  --color-border: rgba(10, 15, 51, .18);
  /* Papeles: qué color hace qué. */
  --color-accent: var(--starry-blue);
  --color-on-accent: #ffffff;
  --color-highlight: var(--moon-yellow);
  --color-on-highlight: var(--night-deep);
  --color-focus: var(--starry-blue);
  --signal-available: var(--wind-aqua);
  /* El cielo completo, recortado al texto del hero y del footer. */
  --title-gradient: linear-gradient(102deg, var(--star-yellow) 0%, var(--wind-aqua) 28%, var(--celestial-blue) 52%, var(--swirl-violet) 76%, var(--moon-yellow) 100%);
}

@media (min-width: 1441px) {
  :root {
    --side: calc((100vw - var(--container)) / 2 + var(--edge));
    --gutter: calc((100vw - var(--container)) / 2 + 78px);
  }
}

/* Sobre noche o sobre imagen el anillo de foco cobalto no se vería:
   ahí pasa a amarillo estrella. */
.hero,
.clients-image,
.case-media--plan,
.ticker,
footer,
.site-header:not(.is-scrolled) {
  --color-focus: var(--star-yellow);
}

/* Marcador amarillo sobre una frase.
   Se dibuja solo: el bloque que lo contiene recibe .is-visible del
   observer que vive en script.js, así que no hace falta JS nuevo.
   El trazo va detrás del texto (el amarillo sobre papel claro da
   1.5:1 como color de letra, ilegible). */
.accent {
  padding: 0 .08em;
  border-radius: 3px;
  background-image: linear-gradient(var(--moon-yellow), var(--moon-yellow));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0 55%;
  transition: background-size .75s cubic-bezier(.16, 1, .3, 1) .35s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Cualquier contenedor que reciba .is-visible dispara el trazo,
   así el recurso sirve en otras secciones sin tocar el JS. */
.is-visible .accent {
  background-size: 100% 55%;
}

/* Sin .motion-reveal el observer nunca marca .is-visible:
   dejamos el trazo puesto en vez de perderlo. */
@media (prefers-reduced-motion: reduce) {
  .accent {
    background-size: 100% 55%;
    transition: none;
  }
}