/* Invisalign en el home (2026-10-13): logo y azul en "Invisalign, de cerca" (el modelo son las secuencias con alfa de la
   hélice, sin blend). La tira de promoción va en promo-invisalign.css, que carga promo.js (no es ruta crítica). Ver MOTION.md. */

:root {
  --inv-azul: #009ace;
  --inv-claro: #8fd8f5;
  --inv-profundo: #052b52;
  --inv-medio: #07508f;
  --inv-noche: #031a38;
  --inv-linea: rgba(143, 216, 245, .28);
}

.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.logo-inv { display: inline-block; width: auto; height: .98em; margin-inline: .12em; vertical-align: -.16em; }
.logo-inv--h2 { height: .82em; margin-inline: 0 .02em; vertical-align: -.1em; }

.alineador {
  --fondo-modelo: var(--inv-profundo);
  background:
    radial-gradient(58% 72% at 74% 52%, rgba(3, 26, 56, .92) 0%, rgba(3, 26, 56, 0) 72%),
    radial-gradient(44% 58% at 4% 100%, rgba(0, 154, 206, .42) 0%, rgba(0, 154, 206, 0) 70%),
    linear-gradient(125deg, var(--inv-medio) 0%, var(--inv-profundo) 52%, var(--inv-noche) 100%);
}
.alineador .beneficios, .alineador .beneficios li { border-color: var(--inv-linea); }
.alineador .beneficio__n { color: var(--inv-claro); }
.alineador .alineador__pista { color: rgba(255, 255, 255, .74); }
.alineador .boton--tostado { background: #fff; color: var(--inv-profundo); }
.alineador .boton--tostado:hover { background: var(--inv-claro); }
.alineador .modelo__boton { border-color: var(--inv-linea); }
.alineador .modelo__boton:hover, .alineador .modelo__boton[aria-pressed="true"] { border-color: var(--inv-claro); color: #fff; }
/* La tira se muestra cuando promo.js cargó su hoja (evita verla sin estilo); sin JS se ve con estilos base. */
.js .promo-inv:not(.promo-inv--lista) { visibility: hidden; }