/* Detalles comunes de las dos páginas públicas (comercial e inversión).
   Va después del kit de diseño y no lo edita. */

/* El botón secundario (tonal) con un borde que lo separa del fondo y de la
   tarjeta de plan: sin él quedaba a 1,02–1,15:1 y parecía apagado. */
html[data-buttons="tonal"] .btn--secondary, html[data-buttons="tonal"] .btn--secondary:hover { border-color: var(--line-strong); }
html[data-buttons="tonal"] .btn--secondary { background: color-mix(in oklab, var(--ink) 11%, var(--bg)); }

/* Las iniciales en las maquetas, más cerca de la tinta para leerse (antes 3:1). */
.ui-avatar { color: color-mix(in oklab, oklch(0.5 0.09 var(--h)) 25%, var(--u-ink)); }

/* El menú marca la sección en la que está el lector (navegacion.js), con la
   misma raya que el enlace de la página actual. */
.nav__link[aria-current="location"]::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -2px; height: 2px; border-radius: 2px; background: currentColor; }
@media (min-width: 1024px) and (max-width: 1279px) { .nav__link[aria-current="location"]::after { left: var(--s-2); right: var(--s-2); } }
/* en el menú abierto del teléfono, la raya corta a la izquierda, como la del enlace actual */
.nav.is-open .nav__link[aria-current="location"]::after { left: 0; right: auto; width: 24px; bottom: 10px; }

/* La raya de los enlaces de texto («Ver los planes →») en el teléfono: el
   enlace mide 44 px para el dedo y la raya (motion.css) quedaba al pie de esa
   caja, a unos 20 px de las letras. Sube bajo el texto; el área táctil no
   cambia. .link.link.link porque la regla común de motion.css pesa (0,3,1). */
@media (max-width: 639px) {
  html:not([data-motion="off"]) .link.link.link,
  html:not([data-motion="off"]) .link.link.link:is(:hover, :focus-visible) { background-position: 0 calc(100% - 10px), 0 calc(100% - 10px); }
}

/* Maqueta del certificado emitido: un paso cumplido se marca con el chulo y se
   lee entero. El tachado de la lista de tareas del kit dice «cancelado», que es
   lo contrario de lo que certifica. Con .ui-checks delante, porque la hoja de
   la lista carga después de esta. */
.ui-checks .ui-check.is-done .ui-check__label { color: var(--u-ink); }
.ui-checks .ui-check.is-done .ui-check__label::after { transform: scaleX(0); }

/* Maqueta de vencimientos: «211 d» en una sola línea. */
.ui-win__age { white-space: nowrap; }

/* El título del héroe collage en inglés: sus palabras son más largas que en
   español («industrial», «simulators») y a 64 px un título de 47 caracteres
   llegaba a 4 líneas a 1440 y pasaba el pliegue a 390. Un 8 % más chico. */
html[lang="en"] .hero--collage h1 { font-size: calc(var(--ly-h1-col) * 0.92); }

/* Palabras que no se parten en los títulos («year-1»; ver marcaSinCorte en tools/construir-comercial.mjs). */
.sin-corte { white-space: nowrap; }