/* Trylux — capa visual "Silicon Valley": aurora de luz, vidrio, bento, brillo que sigue el cursor,
   aparición al bajar y transición entre páginas. Usa SOLO los tokens de sitio.css.
   Todo el movimiento se apaga con prefers-reduced-motion. */

:root { --brillo: rgba(124, 231, 255, .14); --vidrio: color-mix(in srgb, var(--superficie) 62%, transparent); --borde-luz: color-mix(in srgb, var(--luz) 38%, var(--linea)); }
:root[data-tema="claro"] { --brillo: rgba(53, 80, 232, .10); --vidrio: color-mix(in srgb, #fff 72%, transparent); }

/* Transición entre páginas (navegadores con View Transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: salir .28s ease both; }
::view-transition-new(root) { animation: entrar .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes salir { to { opacity: 0; transform: translateY(-8px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }

main { position: relative; }

/* Aurora: tres manchas de luz que flotan despacio detrás de la portada y de la cabecera de cada página */
.aurora { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; z-index: 0; filter: blur(70px); opacity: .55; }
.aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: flotar 18s ease-in-out infinite alternate; }
:root[data-tema="claro"] .aurora { opacity: .35; }
:root[data-tema="claro"] .aurora span { mix-blend-mode: multiply; }
.aurora span:nth-child(1) { width: 46vw; height: 46vw; left: 48%; top: -8%; background: radial-gradient(circle, #4C6BFF 0%, transparent 65%); }
.aurora span:nth-child(2) { width: 38vw; height: 38vw; left: 66%; top: 18%; background: radial-gradient(circle, #7CE7FF 0%, transparent 65%); animation-duration: 22s; animation-delay: -6s; }
.aurora span:nth-child(3) { width: 34vw; height: 34vw; left: 4%; top: 38%; background: radial-gradient(circle, #8B5CF6 0%, transparent 65%); opacity: .55; animation-duration: 26s; animation-delay: -12s; }
@keyframes flotar { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6%, 8%, 0) scale(1.12); } 100% { transform: translate3d(5%, -4%, 0) scale(.94); } }

/* Cuadrícula técnica que se desvanece hacia abajo */
.rejilla-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 25%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 80% 65% at 50% 25%, #000 25%, transparent 75%); }

.portada, main > .bloque:first-child { position: relative; isolation: isolate; }
.portada > .contenedor, main > .bloque:first-child > .contenedor { position: relative; z-index: 1; }
/* Las páginas internas reciben su propia aurora sin tocar el HTML */
main > .bloque:first-child:not(.portada)::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 70% 20%, color-mix(in srgb, #4C6BFF 55%, transparent), transparent 70%), radial-gradient(30% 40% at 90% 40%, color-mix(in srgb, #7CE7FF 45%, transparent), transparent 70%);
  filter: blur(60px); opacity: .45; }
:root[data-tema="claro"] main > .bloque:first-child:not(.portada)::before { opacity: .22; }

/* Barra superior: vidrio que se marca al bajar */
.barra { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; border-bottom-color: transparent; }
.barra.con-sombra { background: color-mix(in srgb, var(--fondo) 72%, transparent); border-bottom-color: var(--linea); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55); }

/* Insignia viva arriba del titular */
.insignia { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--borde-luz); background: var(--vidrio); backdrop-filter: blur(10px); color: var(--tinta); text-decoration: none; font-size: .9rem; margin-bottom: 26px; }
.insignia:hover { color: var(--tinta); border-color: var(--luz); }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--exito); box-shadow: 0 0 0 0 color-mix(in srgb, var(--exito) 60%, transparent); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Titular grande con entrada palabra por palabra */
.titular-grande { font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: 1.02; letter-spacing: -.045em; }
.texto-luz { background: linear-gradient(100deg, #E9EEF8 0%, #7CE7FF 35%, #4C6BFF 70%, #B9A6FF 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: correr-luz 8s linear infinite; }
:root[data-tema="claro"] .texto-luz { background-image: linear-gradient(100deg, #0B0F1A 0%, #0B6F8E 40%, #3550E8 75%, #6D4AE0 100%); }
@keyframes correr-luz { to { background-position: 200% center; } }
.js .palabra { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); animation: subir .7s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes subir { to { opacity: 1; transform: none; filter: none; } }

/* Botones con brillo */
.boton-primario { position: relative; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--luz) 25%, transparent), 0 8px 30px -10px color-mix(in srgb, var(--electrico) 70%, transparent); }
.boton-primario::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.boton-primario:hover::after { transform: translateX(120%); }
.boton-primario:hover { transform: translateY(-1px); }
.boton-secundario { background: var(--vidrio); backdrop-filter: blur(8px); }

/* Teléfono con halo */
.telefono { background: var(--vidrio); backdrop-filter: blur(16px); box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--electrico) 65%, transparent), var(--sombra); }
.js .telefono { animation: aparecer-telefono 1s .25s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes aparecer-telefono { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.halo { position: absolute; inset: auto -12% -18% -12%; height: 60%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--electrico) 45%, transparent), transparent); filter: blur(30px); pointer-events: none; }

/* Cinta de integraciones */
.cinta { position: relative; overflow: hidden; padding-block: 26px; border-block: 1px solid var(--linea); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cinta-titulo { text-align: center; color: var(--tinta-2); font-size: .95rem; margin: 0 0 16px; }
.cinta-pista { display: flex; gap: 12px; width: max-content; animation: deslizar 38s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-pista span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linea); background: var(--vidrio); color: var(--tinta-2); font-weight: 500; font-size: .95rem; white-space: nowrap; }
.cinta-pista span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rayo); }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* Bento con luz que sigue el cursor */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento > * { grid-column: span 2; }
.bento > .ancha { grid-column: span 4; }
.bento > .media { grid-column: span 3; }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; } .bento > *, .bento > .ancha, .bento > .media { grid-column: span 2; } }
@media (min-width: 640px) and (max-width: 960px) { .bento > * { grid-column: span 1; } .bento > .ancha { grid-column: span 2; } }
.tarjeta-luz { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--linea); background: var(--vidrio); backdrop-filter: blur(12px); padding: 28px; display: grid; gap: 12px; align-content: start; min-height: 220px; transition: border-color .3s ease, transform .3s ease; isolation: isolate; text-decoration: none; color: var(--tinta); }
.tarjeta-luz::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--brillo), transparent 45%); }
.tarjeta-luz:hover { border-color: var(--borde-luz); transform: translateY(-3px); color: var(--tinta); }
.tarjeta-luz:hover::before { opacity: 1; }
.tarjeta-luz h3 { font-size: 1.3rem; }
.tarjeta-luz p { color: var(--tinta-2); }
.tarjeta-luz .ir { margin-top: auto; font-weight: 600; color: var(--enlace); }
.icono-luz { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--borde-luz); background: color-mix(in srgb, var(--luz) 10%, transparent); color: var(--luz-texto); }
.mini-grafica { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 6px; }
.mini-grafica i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--luz), color-mix(in srgb, var(--electrico) 60%, transparent)); opacity: .8; transform-origin: bottom; }
.js .mini-grafica i { transform: scaleY(.1); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.js .visible .mini-grafica i, .js .mini-grafica.visible i { transform: scaleY(1); }
.mini-grafica i:nth-child(1) { height: 30%; } .mini-grafica i:nth-child(2) { height: 45%; } .mini-grafica i:nth-child(3) { height: 38%; } .mini-grafica i:nth-child(4) { height: 62%; } .mini-grafica i:nth-child(5) { height: 55%; } .mini-grafica i:nth-child(6) { height: 80%; } .mini-grafica i:nth-child(7) { height: 100%; }
.mini-chat { display: grid; gap: 6px; margin-top: 4px; }
.mini-chat span { font-size: .85rem; padding: 7px 11px; border-radius: 12px; max-width: 85%; background: var(--superficie); color: var(--tinta-2); }
.mini-chat span:nth-child(even) { justify-self: end; background: color-mix(in srgb, var(--electrico) 22%, var(--superficie)); color: var(--tinta); }

/* Métricas grandes */
.metricas { gap: 16px; }
.metrica { padding: 28px; border-radius: 22px; border: 1px solid var(--linea); background: var(--vidrio); }
.metrica b { font-size: clamp(2.6rem, 5vw, 3.6rem); }
.metrica b.texto-luz { animation-duration: 10s; }

/* Casos como tarjetas */
.caso { padding: 26px; border-radius: 22px; border: 1px solid var(--linea); border-top: 1px solid var(--linea); background: var(--vidrio); transition: border-color .3s ease, transform .3s ease; }
.caso:hover { border-color: var(--borde-luz); transform: translateY(-3px); }

/* Método: el rayo se llena al bajar */
.metodo::before { background: var(--linea); }
.metodo::after { content: ""; position: absolute; left: 19px; top: 10px; width: 2px; height: calc((100% - 20px) * var(--avance, 0)); background: var(--rayo-v); border-radius: 2px; box-shadow: 0 0 14px var(--luz); transition: height .15s linear; }
.metodo li::before { z-index: 1; }

/* Tarjetas de precio de los paquetes */
.precios-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 960px) { .precios-tarjetas { grid-template-columns: 1fr; } }
.tarjeta-precio { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: 24px; border: 1px solid var(--linea); background: var(--vidrio); backdrop-filter: blur(12px); }
.tarjeta-precio h3 { font-size: 1.35rem; }
.tarjeta-precio .monto { font-size: 2.2rem; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.tarjeta-precio .monto small { display: block; margin-top: 8px; font-size: .9rem; font-weight: 400; letter-spacing: 0; color: var(--tinta-2); }
.tarjeta-precio ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--tinta-2); font-size: .98rem; }
.tarjeta-precio li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.tarjeta-precio li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: color-mix(in srgb, var(--luz) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237CE7FF' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; }
.tarjeta-precio .boton { margin-top: auto; }
.tarjeta-precio.destacada { border-color: transparent; background: linear-gradient(var(--superficie), var(--superficie)) padding-box, conic-gradient(from var(--giro, 0deg), #7CE7FF, #4C6BFF, #B9A6FF, #7CE7FF) border-box; border: 1.5px solid transparent; animation: girar 6s linear infinite; box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--electrico) 80%, transparent); }
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes girar { to { --giro: 360deg; } }
.tarjeta-precio .cinta-rec { position: absolute; top: -12px; left: 30px; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--rayo); color: var(--sobre-luz); }

/* Llamado final en banda de luz */
.banda-final { position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: clamp(40px, 7vw, 80px); border: 1px solid var(--borde-luz); background: var(--vidrio); }
.banda-final .aurora { inset: -60% -20% auto; opacity: .5; }
.banda-final > *:not(.aurora) { position: relative; z-index: 1; }

/* Aparición al bajar */
.js .revelar { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--retraso, 0s); }
.js .revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .aurora span, .texto-luz, .cinta-pista, .tarjeta-precio.destacada, .punto-vivo { animation: none !important; }
  .js .palabra, .js .revelar, .js .telefono { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .js .mini-grafica i { transform: none !important; }
  @view-transition { navigation: none; }
}
@media print { .aurora, .rejilla-fondo, .cinta { display: none !important; } }

/* Pulido 2: ritmo, problemas como tarjetas, titular menos apretado */
.titular-grande { font-size: clamp(2.6rem, 5.4vw, 4.4rem); letter-spacing: -.035em; line-height: 1.04; }
.bloque { padding-block: clamp(64px, 8vw, 104px); }
.bloque + .bloque { border-top: 0; }
.cinta + .bloque { padding-top: clamp(72px, 9vw, 112px); }
.fugas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 0; }
@media (max-width: 760px) { .fugas { grid-template-columns: 1fr; } }
.fuga { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 26px; border: 1px solid var(--linea); border-radius: 22px; background: var(--vidrio); backdrop-filter: blur(10px); }
.fuga h3 { font-size: 1.15rem; display: flex; gap: 10px; align-items: baseline; }
.fuga h3::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--peligro); box-shadow: 0 0 12px var(--peligro); transform: translateY(-2px); }
.fuga > div p { margin-top: 6px; }
.fuga .solucion { padding-top: 14px; border-top: 1px dashed var(--linea); display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.fuga .solucion::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: color-mix(in srgb, var(--exito) 20%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346D39A' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; }
.dato-chip { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie); font-size: .9rem; color: var(--tinta-2); }
.dato-chip b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.dato-chip .sube { color: var(--exito); font-weight: 600; }
.mini-chat span { width: fit-content; justify-self: start; }
.mini-chat span:nth-child(even) { justify-self: end; }
/* La aurora de la cabecera no puede crear scroll horizontal (atrapado por el e2e). */
main > .bloque:first-child { overflow: hidden; }

/* Revisión UX 6-nov */
.barra-acciones .corto { display: none; }
@media (max-width: 920px) {
  .barra-acciones .boton { display: inline-flex; min-height: 44px; padding: 0 14px; }
  .barra-acciones .largo { display: none; }
  .barra-acciones .corto { display: inline; }
  .boton-menu { margin-left: 0; }
  .menu { margin-left: 0; }
}
.enlace-boton { font: inherit; font-size: .95rem; background: none; border: 0; padding: 8px 0; color: var(--enlace); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; text-align: left; }
.tipos-clientes { display: grid; gap: 10px; }
.saltos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.saltos a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea); background: var(--vidrio); color: var(--tinta-2); text-decoration: none; font-size: .92rem; min-height: 44px; display: inline-flex; align-items: center; }
.saltos a:hover { color: var(--tinta); border-color: var(--borde-luz); }
.chat-pie a { color: var(--enlace); text-decoration: none; font-weight: 600; }
.precio-linea { font-weight: 600; color: var(--tinta); }

/* ===== Revisión UI 6-nov (agente trylux-ui) ===== */
/* 1 y 4. El chat: sin el margen por defecto de <figure>, sin vidrio que encierre el halo */
.telefono { margin: 0; backdrop-filter: none; background: var(--fondo-2); }
@media (max-width: 920px) { .chat { min-height: 250px; } }

/* 2. Modo claro: tarjetas con superficie y sombra suave; barra sin franja gris */
:root[data-tema="claro"] :is(.tarjeta-luz, .fuga, .caso, .metrica, .tarjeta-precio:not(.destacada), .agenda-paso, .politica, .banda-final) {
  background: var(--superficie);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tinta) 6%, transparent), 0 12px 32px -20px color-mix(in srgb, var(--tinta) 22%, transparent);
}
:root[data-tema="claro"] .barra.con-sombra { box-shadow: 0 8px 24px -20px color-mix(in srgb, var(--tinta) 30%, transparent); }

/* 3. Chulitos que toman el color del tema (máscara: círculo suave + chulito sólido) */
.tarjeta-precio li::before, .fuga .solucion::before {
  background: var(--luz-texto);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000' fill-opacity='.18'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000' fill-opacity='.18'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
.fuga .solucion::before { background: var(--exito); }

/* 5. Las acciones de cada tarjeta quedan a la misma altura; botones del llamado lado a lado */
.tarjeta-luz { display: flex; flex-direction: column; gap: 12px; }
.tarjeta-luz .ir { margin-top: auto; padding-top: 6px; }
.banda-final .llamado { grid-template-columns: 1.1fr 1fr; align-items: center; }
@media (max-width: 760px) { .banda-final .llamado { grid-template-columns: 1fr; } }

/* 6. Carta de precios: encabezado alineado con las columnas, títulos de categoría más discretos, filas parejas */
@media (min-width: 861px) {
  .carta-categoria > header { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 210px 24px; gap: 24px; align-items: end; }
  .carta-categoria > header > :last-child { grid-column: 2 / -1; }
  .fila > summary { min-height: 96px; align-items: center; }
}
.carta-categoria > header h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }

/* 7. La luz de las páginas internas no se estira a lo largo de toda la sección */
main > .bloque:first-child:not(.portada)::before { inset: -200px -10% auto; height: 760px; }

/* 8. Menos aire entre secciones */
.bloque + .bloque { padding-top: clamp(32px, 4vw, 56px); }
main > .bloque:first-child:not(.portada) { padding-bottom: clamp(40px, 5vw, 64px); }

/* 9. Agenda: la tira de días se desvanece; el tipo de reunión no deja "min" solo */
.dias { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; }
.tipo b { text-wrap: balance; }

/* 10. Nosotros y políticas con el mismo lenguaje de tarjetas; radios coherentes */
.politicas { gap: 16px; }
.politica { padding: 24px; border: 1px solid var(--linea); border-top: 1px solid var(--linea); border-radius: 22px; background: var(--vidrio); }
.agenda-paso, .fundador .iniciales { border-radius: 22px; }
:root[data-tema="claro"] .mini-chat span:nth-child(odd) { background: var(--fondo-2); color: var(--tinta-2); }