/* Smile & Align: la página de Invisalign con la marca de Invisalign (2026-10-13, pedido de Axel).
   Solo la carga /invisalign-cancun (d.marcaInvisalign en tools/paginas.mjs). Dos piezas: el hero y la tarjeta de
   "¿Cuánto cuesta Invisalign?". En las dos la palabra "Invisalign" es el logo (blanco, sin fondo) y el panel usa el azul
   de Invisalign (#009ace, el del logo) en degradado hacia un azul profundo, con blanco y un cian claro como acento. Es el
   único lugar del sitio con azul: el resto sigue en marfil, grafito y dorado. */

:root {
  --inv-azul: #009ace;
  --inv-claro: #8fd8f5;
  --inv-profundo: #052b52;
  --inv-medio: #07508f;
  --inv-degradado: linear-gradient(125deg, var(--inv-profundo) 0%, var(--inv-medio) 58%, #0a74b8 100%);
}

/* Texto solo para lectores de pantalla y buscadores: el logo ocupa su lugar a la vista. */
.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: block; width: auto; max-width: 100%; }
.logo-inv--h1 { height: .98em; margin-bottom: .04em; }
.logo-inv--linea { display: inline-block; height: .98em; width: auto; margin-inline: .12em; vertical-align: -.16em; }

/* ───── Hero ───── */
.s-hero--invisalign { --hero-filete: rgba(143, 216, 245, .55); background: var(--inv-degradado); }
.s-hero--invisalign h1 em { color: var(--inv-claro); }
.s-hero--invisalign .s-hero__bajada { color: rgba(255, 255, 255, .88); }
.s-hero--invisalign .s-hero__foto { background: var(--inv-profundo); }
.s-hero--invisalign .confianza::before { background: rgba(143, 216, 245, .35); }
.s-hero--invisalign .boton--tostado { background: #fff; color: var(--inv-profundo); }
.s-hero--invisalign .boton--tostado:hover { background: var(--inv-claro); }

/* ───── Tarjeta del costo ───── */
.costo-s .costo.costo--invisalign { --panel: var(--inv-degradado); color: #fff; }
.costo--invisalign .costo__filete rect { stroke: rgba(143, 216, 245, .7); }
.costo--invisalign h2, .costo--invisalign p, .costo--invisalign li { color: #fff !important; }
.costo--invisalign .costo__lead, .costo--invisalign .costo__nota, .costo--invisalign .costo__pagos, .costo--invisalign .costo__cifra small { color: rgba(255, 255, 255, .86) !important; }
.costo--invisalign .costo__lista h3, .costo--invisalign .costo__cifra span { color: var(--inv-claro); }
.costo--invisalign .costo__lista li { border-top-color: rgba(255, 255, 255, .22); }
.costo--invisalign .costo__lista li::before { background: var(--inv-claro); }
.costo--invisalign .costo__cierre::before { background: rgba(143, 216, 245, .5); }
.costo--invisalign .costo__promesa em { color: var(--inv-claro); }
.costo--invisalign .boton--tostado { background: #fff; color: var(--inv-profundo); }
.costo--invisalign .boton--tostado:hover { background: var(--inv-claro); }