/* =====================================================================================================
   Veyra · «Cristal y aurora» (02/11/2026)
   Una capa de diseño que va ENCIMA de todo (portada, chat y páginas de servicio) sin tocar su código:
   - de fondo, una aurora viva (azul Veyra, violeta y cian) que se mueve despacio y sigue un poco al ratón;
   - las superficies, de cristal: translúcidas, desenfocadas, con su borde de luz arriba;
   - una luz suave que sigue al ratón en tarjetas y planes, botones con brillo, y entradas al hacer scroll.
   Todo lo que se mueve es transform u opacity (lo hace la gráfica, no la CPU) y se para con «menos movimiento»,
   con la pestaña escondida y en móviles flojos (que además van sin desenfoque: aurora.js pone las clases).
   ===================================================================================================== */


:root {
  --a1: #2F5BD3;              /* azul Veyra (Coso) */
  --a2: #7B5CFF;              /* violeta */
  --a3: #36D6FF;              /* cian */
  --a4: #FF6BD5;              /* rosa: solo un toque */
  --fondo-aurora: #03040B;
  /* el cristal: un reflejo en diagonal (más luz arriba a la izquierda), no un gris plano */
  --vidrio: linear-gradient(145deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .035) 45%, rgba(255, 255, 255, .02) 100%);
  --vidrio-2: linear-gradient(145deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, .035) 100%);
  --vidrio-borde: rgba(255, 255, 255, .10);
  --vidrio-luz: rgba(255, 255, 255, .18);
  --desenfoque: blur(22px) saturate(165%);
  --sombra-vidrio: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px var(--vidrio-borde), 0 24px 60px -28px rgba(0, 0, 0, .85);
  --grad-texto: linear-gradient(100deg, #FFFFFF 0%, #DCE6FF 30%, #A9C8FF 55%, #B9A4FF 80%, #8FE8FF 100%);
  --grad-boton: linear-gradient(135deg, #3E70F4 0%, #5B5CF6 50%, #8350F3 100%);
  --brillo-boton: 0 10px 34px -10px rgba(91, 92, 246, .9), 0 0 0 1px rgba(255, 255, 255, .14) inset;
  --suave: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- La aurora (aurora.js mete <div class="aurora">; la página no se toca) ---------- */
html.vey-aurora, html.vey-aurora body { background: var(--fondo-aurora); }
html.vey-aurora body { position: relative; isolation: isolate; }
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.aurora i { position: absolute; display: block; border-radius: 50%; will-change: transform; opacity: .72; mix-blend-mode: screen; }
.aurora .a1 { width: 72vmax; height: 72vmax; left: -22vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(47, 91, 211, .95), rgba(47, 91, 211, 0) 72%); animation: vey-deriva-1 26s ease-in-out infinite alternate; }
.aurora .a2 { width: 62vmax; height: 62vmax; right: -20vmax; top: -18vmax; background: radial-gradient(closest-side, rgba(123, 92, 255, .9), rgba(123, 92, 255, 0) 70%); animation: vey-deriva-2 31s ease-in-out infinite alternate; }
.aurora .a3 { width: 58vmax; height: 58vmax; left: 18vmax; bottom: -34vmax; background: radial-gradient(closest-side, rgba(54, 214, 255, .7), rgba(54, 214, 255, 0) 70%); animation: vey-deriva-3 37s ease-in-out infinite alternate; }
.aurora .a4 { width: 36vmax; height: 36vmax; right: 6vmax; bottom: -10vmax; background: radial-gradient(closest-side, rgba(255, 107, 213, .45), rgba(255, 107, 213, 0) 70%); animation: vey-deriva-2 43s ease-in-out infinite alternate-reverse; opacity: .4; }
/* el conjunto se inclina un poco hacia el ratón (aurora.js pone --px y --py entre -1 y 1) */
.aurora .capa { position: absolute; inset: -6%; transform: translate3d(calc(var(--px, 0) * -2.2%), calc(var(--py, 0) * -2.2%), 0); transition: transform 1.2s var(--suave); }
/* grano finísimo y viñeta: quitan el aspecto de «degradado de plástico» */
.aurora::before { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.aurora::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 20%, transparent 45%, rgba(3, 4, 11, .35) 80%, rgba(3, 4, 11, .75) 100%); }
.aurora .a5 { width: 46vmax; height: 46vmax; left: -12vmax; top: 34vh; background: radial-gradient(closest-side, rgba(54, 214, 255, .5), rgba(54, 214, 255, 0) 70%); animation: vey-deriva-1 34s ease-in-out infinite alternate-reverse; opacity: .5; }
@keyframes vey-deriva-1 { to { transform: translate3d(14vmax, 9vmax, 0) rotate(18deg) scale(1.12); } }
@keyframes vey-deriva-2 { to { transform: translate3d(-12vmax, 14vmax, 0) rotate(-14deg) scale(1.08); } }
@keyframes vey-deriva-3 { to { transform: translate3d(-10vmax, -16vmax, 0) rotate(12deg) scale(1.15); } }
html.vey-quieto .aurora i, html.vey-oculto .aurora i { animation-play-state: paused; }

/* La luz que sigue al ratón por toda la página (solo con ratón; aurora.js la mueve con transform) */
.vey-luz { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 140, 255, .13), rgba(120, 140, 255, 0)); transform: translate3d(-999px, -999px, 0); will-change: transform; transition: opacity .4s; }
html:not(.vey-raton) .vey-luz { display: none; }

/* Barra de progreso de lectura (solo con el scroll; sin JS, en navegadores que lo saben hacer) */
@supports (animation-timeline: scroll()) {
  html.vey-portada body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 100; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--a3), var(--a1), var(--a2), var(--a4)); animation: vey-progreso linear both; animation-timeline: scroll(root); }
  @keyframes vey-progreso { to { transform: scaleX(1); } }
}

/* Cambiar de página con un fundido (Chrome y Edge, entre páginas de Veyra) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vey-vt-sale .28s var(--suave) both; }
::view-transition-new(root) { animation: vey-vt-entra .42s var(--suave) both; }
@keyframes vey-vt-sale { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes vey-vt-entra { from { opacity: 0; transform: scale(1.012); filter: blur(6px); } }

/* ---------- Piezas comunes ---------- */
::selection { background: rgba(123, 92, 255, .45); color: #fff; }
html.vey-aurora { scrollbar-color: rgba(169, 200, 255, .22) transparent; }
.vey-grad { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Los botones principales: degradado de aurora, brillo y un reflejo que cruza al pasar por encima */
.btn:not(.ghost):not(.sm):not(.danger):not(.peligro), .new, a.btn.main { background: var(--grad-boton) !important; box-shadow: var(--brillo-boton); position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.ghost):not(.sm):not(.danger):not(.peligro)::after, .new::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 48%, transparent 62%); transform: translateX(-110%); transition: transform .9s var(--suave); }
.btn:not(.ghost):not(.sm):not(.danger):not(.peligro):hover::after, .new:hover::after { transform: translateX(110%); }
.btn:not(.ghost):not(.sm):not(.danger):not(.peligro):hover, .new:hover { box-shadow: 0 16px 44px -12px rgba(110, 92, 246, 1), 0 0 0 1px rgba(255, 255, 255, .2) inset; }
.btn.ghost { background: var(--vidrio) !important; backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); box-shadow: inset 0 0 0 1px var(--vidrio-borde) !important; }
.btn.ghost:hover { background: var(--vidrio-2) !important; box-shadow: inset 0 0 0 1px rgba(169, 200, 255, .45) !important; }
.btn, .new { transition: transform .45s var(--suave), box-shadow .45s var(--suave), background .3s; will-change: transform; }
/* (aurora.js los atrae un poco hacia el ratón: --mx/--my en píxeles) */
.vey-iman { transform: translate3d(var(--ix, 0px), var(--iy, 0px), 0); }
.vey-iman:hover { transform: translate3d(var(--ix, 0px), calc(var(--iy, 0px) - 2px), 0); }

/* Cristal: la base de tarjetas, planes, pasos, preguntas… */
.vey-vidrio, .card, .plan, .step, .q, .chat, .stat, .compare-wrap, .phone, .field, .cat, .dlg, .composer, .keybox, .toc {
  background: var(--vidrio) !important; backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); box-shadow: var(--sombra-vidrio) !important; }
/* la luz del ratón dentro de cada tarjeta (aurora.js pone --lx/--ly en %), y su borde que se ilumina por ese lado */
.card, .plan, .step, .cat, .q { position: relative; isolation: isolate; }
.card::before, .plan::before, .step::before, .cat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s var(--suave);
  background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 0%), rgba(140, 160, 255, .16), transparent 45%); }
.card::after, .plan::after, .step::after, .cat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; opacity: 0; transition: opacity .5s var(--suave);
  background: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 0%), rgba(190, 200, 255, .75), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.card:hover::before, .plan:hover::before, .step:hover::before, .cat:hover::before,
.card:hover::after, .plan:hover::after, .step:hover::after, .cat:hover::after { opacity: 1; }
/* inclinación 3D al pasar el ratón (aurora.js pone --rx/--ry en grados) */
.vey-incl { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--sube, 0px), 0) !important; transition: transform .5s var(--suave), box-shadow .5s var(--suave) !important; }
.vey-incl:hover { --sube: -6px; }

/* ---------- La portada ---------- */
/* Cabecera: una píldora de cristal que flota; al bajar se hace más pequeña */
html.vey-portada .top { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
html.vey-portada .top-in { width: min(980px, calc(100% - 24px)); margin: 14px auto 0; border-radius: 26px; padding: 16px 22px 12px;
  background: rgba(10, 13, 32, .38); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); box-shadow: var(--sombra-vidrio);
  transition: padding .5s var(--suave), margin .5s var(--suave), background .4s, border-radius .5s var(--suave); }
html.vey-portada .top.solid .top-in { margin-top: 8px; padding: 9px 18px 8px; background: rgba(8, 10, 26, .62); border-radius: 22px; }
html.vey-portada .logo span { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.vey-portada .logo svg { filter: drop-shadow(0 0 14px rgba(80, 120, 255, .65)); }
html.vey-portada .nav a::after { background: linear-gradient(90deg, var(--a3), var(--a2)); height: 2px; border-radius: 2px; }

/* Héroe: la aurora se ve a través (el vídeo queda como textura suave) y el título lleva la luz */
html.vey-portada .hero::before { background: radial-gradient(90% 75% at 50% 42%, rgba(3, 4, 11, .05), rgba(3, 4, 11, .55) 70%, rgba(3, 4, 11, .85)) !important; }
html.vey-portada .hero::after { background: linear-gradient(to top, var(--fondo-aurora), transparent) !important; }
/* el vídeo de fondo del héroe se quita: la aurora ocupa su sitio (el anuncio sigue en su sección) y la portada no se baja el vídeo al abrir */
html.vey-portada .hero video, html.vey-portada .hero .poster { display: none !important; }
/* detrás del título, un brillo de aurora que respira */
html.vey-portada .hero-in { position: relative; }
html.vey-portada .hero-in::before { content: ""; position: absolute; left: 50%; top: 44%; width: min(1180px, 130vw); height: min(680px, 90vh); z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side at 32% 58%, rgba(54, 214, 255, .30), rgba(54, 214, 255, 0) 100%), radial-gradient(closest-side at 68% 42%, rgba(131, 80, 243, .42), rgba(131, 80, 243, 0) 100%),
    radial-gradient(closest-side, rgba(62, 112, 244, .40), rgba(62, 112, 244, .14) 55%, rgba(62, 112, 244, 0) 100%);
  transform: translate3d(-50%, -50%, 0); animation: vey-respira 9s ease-in-out infinite alternate; will-change: transform; }
@keyframes vey-respira { to { transform: translate3d(-50%, -52%, 0) scale(1.14); opacity: .78; } }
html.vey-portada .hero h1 { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 10px 60px rgba(90, 110, 255, .35)); padding-bottom: .06em; }
html.vey-portada .hero h1 em { -webkit-text-fill-color: transparent; background: linear-gradient(100deg, #8FE8FF, #A9C8FF 45%, #C3A8FF); -webkit-background-clip: text; background-clip: text; }
html.vey-portada .launch { background: var(--vidrio-2) !important; backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); box-shadow: var(--sombra-vidrio) !important; }
html.vey-portada .launch b { background: var(--grad-boton) !important; box-shadow: 0 0 18px -2px rgba(123, 92, 255, .8); }
html.vey-portada .hero p.lead { color: #CBD5F2; }
/* el título entra palabra a palabra (aurora.js las envuelve en <span class="vey-pal">) */
.vey-pal { display: inline-block; opacity: 0; transform: translate3d(0, .45em, 0) scale(.96); filter: blur(10px); animation: vey-pal-entra 1s var(--suave) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes vey-pal-entra { to { opacity: 1; transform: none; filter: blur(0); } }
/* con el título partido en palabras, el degradado va en cada una (si no, el del título se vería antes de que entraran) */
html.vey-portada .hero h1.vey-partido, html.vey-portada .hero h1.vey-partido em { background: none !important; }
html.vey-portada .hero h1.vey-partido .vey-pal { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .06em; }
html.vey-portada .hero h1.vey-partido em .vey-pal { background: linear-gradient(100deg, #8FE8FF, #A9C8FF 45%, #C3A8FF); -webkit-background-clip: text; background-clip: text; }

/* Cifras: una sola banda de cristal */
html.vey-portada .stats { border: 0 !important; margin-inline: auto; width: min(1180px, calc(100% - 2 * var(--gutter))); border-radius: 28px; overflow: hidden;
  background: var(--vidrio); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); box-shadow: var(--sombra-vidrio); }
html.vey-portada .stats .stat { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
html.vey-portada .stat + .stat { border-left: 1px solid var(--vidrio-borde) !important; }
html.vey-portada .stat .num { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.vey-portada .stat .num small { -webkit-text-fill-color: #A9C8FF; }

/* Títulos de sección con la luz de la aurora */
html.vey-portada .sec-head h2, .head h1, .hello h1 { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: .05em; }
html.vey-portada .eyebrow, .eyebrow { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
html.vey-portada .eyebrow::before, .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--a3), var(--a2)); box-shadow: 0 0 12px rgba(54, 214, 255, .7); }

/* Tarjetas */
html.vey-portada .card, html.vey-portada .plan { border-radius: 26px; }
html.vey-portada .card .px rect { fill: #6E8DFF; }
html.vey-portada .card:hover .px rect.hi { fill: #9FE9FF; }
html.vey-portada .card .tag { color: #9FE9FF; }
html.vey-portada .card.shot img { filter: saturate(1.1); }

/* Pasos y conversación de ejemplo */
html.vey-portada .step .n { background: linear-gradient(135deg, rgba(62, 112, 244, .45), rgba(131, 80, 243, .45)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 24px -10px rgba(91, 92, 246, .9); color: #fff !important; }
html.vey-portada .msg.me { background: var(--grad-boton) !important; box-shadow: 0 10px 30px -14px rgba(91, 92, 246, .9); }
html.vey-portada .msg.it { background: rgba(255, 255, 255, .07) !important; box-shadow: inset 0 0 0 1px var(--vidrio-borde); }
html.vey-portada .chat .bar { border-bottom-color: var(--vidrio-borde) !important; }

/* El móvil del anuncio, con el canto de luz */
html.vey-portada .phone { border-radius: 46px; box-shadow: var(--sombra-vidrio), 0 50px 120px -40px rgba(91, 92, 246, .75) !important; }

/* Planes: el destacado lleva un borde de luz que da la vuelta despacio */
html.vey-portada .plan.main { background: linear-gradient(160deg, rgba(62, 112, 244, .22), rgba(131, 80, 243, .18) 60%, rgba(54, 214, 255, .10)) !important; }
/* (gira una capa con el degradado, recortada al borde: lo mueve la gráfica. Animar --ang con @property costaba 940 ms
   de CPU por segundo en un móvil barato, medido el 02/11) */
html.vey-portada .plan.main > .vey-borde, .vey-borde { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .95; }
.vey-borde > i { position: absolute; left: -100%; top: -100%; width: 300%; height: 300%; display: block; will-change: transform;
  background: conic-gradient(from 0deg, transparent 0deg, #8FE8FF 50deg, #7B5CFF 110deg, transparent 170deg, transparent 220deg, #3E70F4 290deg, transparent 360deg);
  animation: vey-gira 6s linear infinite; }
@keyframes vey-gira { to { transform: rotate(1turn); } }
html.vey-portada .plan .badge { background: var(--grad-boton) !important; color: #fff; box-shadow: 0 0 20px -4px rgba(123, 92, 255, .9); }
html.vey-portada .plan .badge.alt { background: rgba(255, 255, 255, .1) !important; box-shadow: inset 0 0 0 1px var(--vidrio-borde); }
html.vey-portada .plan .price { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.vey-portada .plan .price small { -webkit-text-fill-color: var(--muted); }
html.vey-portada .plan li::before { background: linear-gradient(135deg, var(--a3), var(--a2)) !important; }
html.vey-portada table.compare thead th { background: rgba(255, 255, 255, .04); }
html.vey-portada .compare td, html.vey-portada .compare th { border-color: var(--vidrio-borde) !important; }

/* Preguntas: filas de cristal que se abren suaves */
html.vey-portada .q { border-radius: 20px; margin-bottom: 10px; border: 0 !important; }
html.vey-portada .q.open { background: var(--vidrio-2) !important; }

/* Avisame y pie */
html.vey-portada .news { position: relative; }
html.vey-portada .field { border-radius: 999px !important; }
html.vey-portada .field:focus-within { box-shadow: var(--sombra-vidrio), 0 0 0 2px rgba(123, 92, 255, .55), 0 0 40px -6px rgba(91, 92, 246, .8) !important; }
html.vey-portada footer { background: linear-gradient(to bottom, transparent, rgba(3, 4, 11, .85)); border-top: 1px solid var(--vidrio-borde); }
html.vey-portada .sticky .btn { box-shadow: 0 18px 50px -12px rgba(91, 92, 246, 1), 0 0 0 1px rgba(255, 255, 255, .18) inset; }

/* ---------- Entradas al hacer scroll (aurora.js marca lo que entra; sin JS todo se ve) ---------- */
html.vey-js .vey-entra { opacity: 0; transform: translate3d(0, 34px, 0) scale(.985); filter: blur(8px); transition: opacity .9s var(--suave), transform 1.1s var(--suave), filter .9s var(--suave); transition-delay: calc(var(--i, 0) * 80ms); }
html.vey-js .vey-entra.vey-visto { opacity: 1; transform: none; filter: none; }
/* las que inclinan con el ratón: la entrada no debe pisar su transform cuando ya están dentro */
html.vey-js .vey-entra.vey-visto.vey-incl { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--sube, 0px), 0) !important; }

/* ---------- Páginas de servicio (cuenta, ayuda, descargar, gracias, legales, 404…) ---------- */
html.vey-servicio .top { background: rgba(8, 10, 26, .45) !important; backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); border-bottom: 1px solid var(--vidrio-borde) !important; }
html.vey-servicio .logo b { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.vey-servicio .card { border-radius: 24px; }
html.vey-servicio .card.main { background: linear-gradient(160deg, rgba(62, 112, 244, .2), rgba(131, 80, 243, .14)) !important; }
html.vey-servicio .input { background: rgba(255, 255, 255, .05) !important; box-shadow: inset 0 0 0 1px var(--vidrio-borde) !important; border-radius: 14px; }
html.vey-servicio .input:focus { box-shadow: inset 0 0 0 1.5px rgba(143, 232, 255, .8), 0 0 30px -8px rgba(91, 92, 246, .8) !important; }
html.vey-servicio .q { border-radius: 18px; margin-bottom: 10px; }
html.vey-servicio .foot { background: rgba(3, 4, 11, .5); border-top: 1px solid var(--vidrio-borde); }

/* ---------- El chat ---------- */
html.vey-chat body { background: var(--fondo-aurora); }
html.vey-chat .side { background: rgba(8, 10, 26, .42) !important; backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); border-right: 1px solid var(--vidrio-borde) !important; }
html.vey-chat .brand b { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.vey-chat .brand svg { filter: drop-shadow(0 0 12px rgba(80, 120, 255, .6)); }
html.vey-chat .search input { background: rgba(255, 255, 255, .05) !important; box-shadow: inset 0 0 0 1px var(--vidrio-borde) !important; }
html.vey-chat .search input:focus { box-shadow: inset 0 0 0 1.5px rgba(143, 232, 255, .7), 0 0 24px -8px rgba(91, 92, 246, .8) !important; }
html.vey-chat .conv:hover .abre, html.vey-chat .conv.on .abre { background: rgba(255, 255, 255, .06) !important; }
html.vey-chat .conv.on .abre { box-shadow: inset 2px 0 0 #8FE8FF, 0 0 0 1px var(--vidrio-borde) inset !important; }
html.vey-chat .conv .mini { background: rgba(20, 24, 50, .9) !important; backdrop-filter: blur(10px); }
html.vey-chat .plan { margin: 8px 12px 10px; border-radius: 18px; }
html.vey-chat .side .bottom button:hover, html.vey-chat .side .bottom a:hover, html.vey-chat .ib:hover { background: rgba(255, 255, 255, .07) !important; }
html.vey-chat .ib.on { background: rgba(123, 92, 255, .18) !important; color: #CBB9FF !important; }
html.vey-chat .main { background: transparent; }
html.vey-chat .top { background: transparent; }
/* mensajes: los tuyos con el degradado de la aurora; los de Veyra entran deslizando */
html.vey-chat .m.me .b { background: var(--grad-boton) !important; color: #fff !important; box-shadow: 0 12px 34px -16px rgba(91, 92, 246, .95); }
html.vey-chat .m.live { animation: vey-mensaje .55s var(--suave) both; }   /* solo la respuesta que llega (el hilo entero se rehace al abrir una conversación) */
@keyframes vey-mensaje { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
html.vey-chat .m.it .av { filter: drop-shadow(0 0 10px rgba(80, 120, 255, .6)); }
/* el cuadro de escribir: cristal, y al escribir un halo de aurora alrededor */
html.vey-chat .composer { border-radius: 26px; position: relative; transition: box-shadow .4s var(--suave); }
html.vey-chat .composer:focus-within { box-shadow: var(--sombra-vidrio), 0 0 0 1.5px rgba(143, 232, 255, .55), 0 0 60px -12px rgba(91, 92, 246, .9) !important; }
html.vey-chat .composer.drag { box-shadow: var(--sombra-vidrio), 0 0 0 2px rgba(123, 92, 255, .9) !important; }
html.vey-chat .send { background: var(--grad-boton) !important; color: #fff !important; box-shadow: 0 8px 22px -8px rgba(91, 92, 246, 1); border-radius: 14px; transition: transform .35s var(--suave), box-shadow .35s var(--suave) !important; }
html.vey-chat .send:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 12px 30px -8px rgba(110, 92, 246, 1); }
html.vey-chat .mode { background: rgba(255, 255, 255, .06) !important; }
html.vey-chat .mode.on { background: linear-gradient(135deg, rgba(62, 112, 244, .35), rgba(131, 80, 243, .3)) !important; color: #E3EAFF !important; box-shadow: inset 0 0 0 1px rgba(190, 200, 255, .3) !important; }
html.vey-chat .coso { filter: drop-shadow(0 0 10px rgba(80, 120, 255, .7)); }
/* bienvenida: las tarjetas de ejemplo de cristal */
html.vey-chat .cat { border-radius: 20px; }
html.vey-chat .cat svg { color: #8FA8FF !important; filter: drop-shadow(0 0 8px rgba(80, 120, 255, .55)); }
html.vey-chat .hello .coso-big { filter: drop-shadow(0 0 24px rgba(80, 120, 255, .8)); }
/* ventanas: cristal oscuro con velo desenfocado */
html.vey-chat .veil { background: rgba(3, 4, 11, .55) !important; backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); }
html.vey-chat .dlg { background: rgba(14, 17, 40, .72) !important; border-radius: 26px !important; animation: vey-dlg .5s var(--suave) both; }
@keyframes vey-dlg { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } }

/* El chat en tema claro: cristal blanco esmerilado sobre una aurora pastel */
html.vey-chat[data-theme="light"], html.vey-chat[data-theme="light"] body { --fondo-aurora: #EEF1FB; background: #EEF1FB; }
html[data-theme="light"] .aurora i { mix-blend-mode: multiply; opacity: .32; }
html[data-theme="light"] .aurora::after { background: radial-gradient(120% 90% at 50% 10%, transparent 40%, rgba(238, 241, 251, .5) 80%); }
html[data-theme="light"] .aurora::before { opacity: .035; }
html.vey-chat[data-theme="light"] .side { background: rgba(255, 255, 255, .55) !important; border-right-color: rgba(20, 48, 110, .08) !important; }
html.vey-chat[data-theme="light"] .composer, html.vey-chat[data-theme="light"] .cat, html.vey-chat[data-theme="light"] .plan, html.vey-chat[data-theme="light"] .dlg {
  background: rgba(255, 255, 255, .62) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(20, 48, 110, .08), 0 20px 50px -26px rgba(20, 48, 110, .35) !important; }
html.vey-chat[data-theme="light"] .dlg { color: #141A2E; }
html.vey-chat[data-theme="light"] .veil { background: rgba(230, 235, 250, .45) !important; }
html.vey-chat[data-theme="light"] .search input, html.vey-chat[data-theme="light"] .mode { background: rgba(255, 255, 255, .7) !important; }
html.vey-chat[data-theme="light"] .conv:hover .abre, html.vey-chat[data-theme="light"] .conv.on .abre { background: rgba(255, 255, 255, .75) !important; }
html.vey-chat[data-theme="light"] .brand b, html.vey-chat[data-theme="light"] .hello h1 { background: linear-gradient(100deg, #10173A, #2F5BD3 55%, #6A4DE0); -webkit-background-clip: text; background-clip: text; }
html.vey-chat[data-theme="light"] .mode.on { color: #1F2D6B !important; }
html[data-theme="light"] .card::after, html[data-theme="light"] .cat::after { background: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 0%), rgba(47, 91, 211, .5), transparent 60%); }
html[data-theme="light"] .card::before, html[data-theme="light"] .cat::before { background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 0%), rgba(47, 91, 211, .08), transparent 45%); }

/* ---------- Móviles flojos, sin desenfoque o con «menos movimiento» ---------- */
html.vey-ligero *, html.vey-ligero *::before, html.vey-ligero *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.vey-ligero .card, html.vey-ligero .plan, html.vey-ligero .step, html.vey-ligero .q, html.vey-ligero .chat, html.vey-ligero .cat, html.vey-ligero .composer, html.vey-ligero .dlg { background: rgba(14, 18, 42, .86) !important; }
html.vey-ligero[data-theme="light"] .composer, html.vey-ligero[data-theme="light"] .cat, html.vey-ligero[data-theme="light"] .dlg { background: rgba(255, 255, 255, .94) !important; }
html.vey-ligero .aurora .a4, html.vey-ligero .aurora::before { display: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .plan, .step, .q, .chat, .cat, .composer, .dlg { background: rgba(14, 18, 42, .9) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i, .vey-borde > i, html.vey-portada .hero-in::before { animation: none !important; }
  .vey-pal { animation: none !important; opacity: 1; transform: none; filter: none; }
  html.vey-js .vey-entra { opacity: 1; transform: none; filter: none; transition: none; }
  html.vey-chat .m.live, html.vey-chat .dlg { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
html.movimiento-reducido .aurora i, html.movimiento-reducido .vey-borde > i, html.movimiento-reducido .vey-pal { animation: none !important; opacity: 1; }
@media print { .aurora, .vey-luz { display: none !important; } }

/* Desplegables del chat (filtrar historial, revisar borrador): una píldora pequeña en vez del triángulo del navegador */
html.vey-chat .filtros-historial > summary, html.vey-chat .revision-borrador > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; width: fit-content;
  padding: 4px 10px; border-radius: 999px; font: 500 12px/1.2 var(--body); color: var(--muted); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--vidrio-borde); transition: color .2s, background .2s; }
html.vey-chat .filtros-historial > summary::-webkit-details-marker, html.vey-chat .revision-borrador > summary::-webkit-details-marker { display: none; }
html.vey-chat .filtros-historial > summary::before, html.vey-chat .revision-borrador > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .3s var(--suave); }
html.vey-chat details[open] > summary::before { transform: rotate(45deg); }
html.vey-chat .filtros-historial > summary:hover, html.vey-chat .revision-borrador > summary:hover { color: var(--paper); background: rgba(255, 255, 255, .09); }
html.vey-chat .filtros-historial { padding: 2px 12px 8px; }
html.vey-chat .revision-borrador { padding: 0 12px 2px; }
html.vey-chat[data-theme="light"] .filtros-historial > summary, html.vey-chat[data-theme="light"] .revision-borrador > summary { background: rgba(255, 255, 255, .7); }
/* el botón de la cabecera de las páginas de servicio («Abrir el chat») también con la aurora */
html.vey-servicio .links a.btn { background: var(--grad-boton) !important; box-shadow: var(--brillo-boton); }