/* Base, tipografía, foco y keyframes sp-*.
   Copia literal del diseño de Claude Design (landing).
   NO editar a mano: se regenera con build/sync.js */

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html { scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: 'Space Grotesk', Helvetica, Arial, sans-serif; background: var(--bg,#FBFAF8); color: var(--ink,#16111F); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--acc,#7C3AED); text-decoration: none; }
a:hover { color: #5B21B6; text-decoration: underline; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #7C3AED; outline-offset: 3px; border-radius: 4px; }
::placeholder { color: var(--ink-35,#16111F59); }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sp-ring { 0% { box-shadow: 0 0 0 0 var(--acc-line,#7C3AED4D); } 70% { box-shadow: 0 0 0 12px #7C3AED00; } 100% { box-shadow: 0 0 0 0 #7C3AED00; } }
@keyframes sp-line-in { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes sp-dot-in { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes sp-rise { 0% { opacity: 0; transform: translateY(14px) scale(.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sp-drop { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes sp-scan { 0% { transform: translateX(-100%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes sp-slide-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sp-modal-in { 0% { opacity: 0; transform: translateY(22px) scale(.975); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-wa-ring { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes sp-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes sp-sweep { 0% { transform: translateX(-130%); } 45% { transform: translateX(130%); } 100% { transform: translateX(130%); } }
@keyframes sp-glow { 0%, 100% { box-shadow: 0 2px 10px var(--acc-line,#7C3AED4D); } 50% { box-shadow: 0 6px 24px #7C3AED73; } }
@keyframes sp-neb-a { 0% { transform: translate3d(-11%, -6%, 0) scale(1); } 50% { transform: translate3d(13%, 9%, 0) scale(1.3); } 100% { transform: translate3d(-11%, -6%, 0) scale(1); } }
@keyframes sp-neb-b { 0% { transform: translate3d(10%, 7%, 0) scale(1.18); } 50% { transform: translate3d(-13%, -9%, 0) scale(1); } 100% { transform: translate3d(10%, 7%, 0) scale(1.18); } }
@keyframes sp-warp { from { transform: translateZ(0) scale(1); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } to { transform: translateZ(300px) scale(1.9); opacity: 0; } }
@keyframes sp-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes sp-sky { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes sp-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes sp-shoot {
  0% { opacity: 0; transform: rotate(18deg) translate3d(0, 0, 0); }
  2% { opacity: 1; }
  14% { opacity: .9; }
  22% { opacity: 0; transform: rotate(18deg) translate3d(-620px, 0, 0); }
  100% { opacity: 0; transform: rotate(18deg) translate3d(-620px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
@keyframes sp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.9); opacity: .25; } }

/* Página completa: el diseño ocupa toda la altura (equivale a FULL_PAGE_CSS
   del runtime original). */
html, body { height: 100%; margin: 0; }
#dc-root { height: 100%; }

/* Los iconos de Material Symbols son ligaduras: se escribe "bolt" y la fuente
   dibuja el rayo. Cuando esos spans heredan text-transform: uppercase de su
   contenedor, al navegador le llega "BOLT" — y el subconjunto que servimos
   sólo trae la ligadura en minúsculas. Resultado: se veía la palabra en lugar
   del icono. La fuente completa de Google lo disimulaba; el subconjunto no.
   Es la misma normalización que aplica la clase oficial de Google. */
[style*="Material Symbols Rounded"] { text-transform: none; }

/* La tarjeta del formulario es oscura en los DOS temas: sus campos llevan
   `background: #07060B` escrito a pelo en el diseño. Pero el placeholder sale
   de `--ink-35`, que sí cambia con el tema. En claro eso pinta tinta oscura
   (#16111F59) sobre un campo casi negro: contraste 1,03 — el texto de ejemplo
   desaparece. En oscuro se ve bien, por eso pasa inadvertido.

   Se repone la tinta clara, que es el valor que `--ink-35` ya toma en el tema
   oscuro. Va como literal y no como var() justamente porque la var cambia y el
   fondo no. Afecta sólo a los campos con ese fondo fijo: los de la calculadora
   usan var(--surface) y siguen el tema bien, así que no se tocan.

   Defecto del diseño, en los dos archivos. Pendiente en Claude Design. */
[style*="background: #07060B"]::placeholder { color: #F7F5F359; }