/* Cerebro más reconocible y animaciones visibles incluso con movimiento reducido. */
.brain svg {
  width: 78%;
  height: 78%;
  overflow: visible;
}

.brain .brain-outline {
  fill: #f3fcfd;
  stroke: var(--teal);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brain .brain-circuit {
  fill: none;
  stroke: var(--violet);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brain svg circle {
  fill: var(--orange);
  stroke: #fff;
  stroke-width: 2;
}

.brain span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: var(--violet);
  box-shadow: 0 0 18px rgba(115, 92, 232, .35);
  font-size: 11px;
}

.runner {
  position: absolute;
  z-index: 6;
  border-radius: 50%;
  pointer-events: none;
  animation: runnerClockwise 7s linear infinite !important;
  will-change: transform;
}

.runner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 15px rgba(255, 107, 61, .78);
}

.r1 { inset: 10%; }
.r2 { inset: 10%; animation-delay: -3.5s !important; }
.r3 { inset: 20%; animation-duration: 5.5s !important; animation-delay: -1.35s !important; }
.r4 { inset: 20%; animation-duration: 5.5s !important; animation-delay: -4.1s !important; }

@keyframes runnerClockwise {
  to { transform: rotate(360deg); }
}

/* Señales que salen desde la IA y viajan hacia cada servicio. */
.data-path {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg,rgba(9,174,183,.14),rgba(9,174,183,.52));
  pointer-events: none;
}

.path-a { transform: rotate(202deg); }
.path-b { transform: rotate(325deg); }
.path-c { transform: rotate(25deg); }
.path-d { transform: rotate(145deg); }

.data-path em {
  position: absolute;
  left: 0;
  top: -6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 16px rgba(255,107,61,.82);
  animation: dataOut 3s linear infinite !important;
  will-change: left, opacity;
}

.data-path em:nth-child(2) { animation-delay: -1s !important; }
.data-path em:nth-child(3) { animation-delay: -2s !important; }
.path-b em { animation-duration: 3.4s !important; }
.path-c em { animation-duration: 2.7s !important; }
.path-d em { animation-duration: 3.2s !important; }

@keyframes dataOut {
  0% { left: 0; opacity: 0; transform: scale(.55); }
  10% { opacity: 1; transform: scale(1); }
  86% { opacity: 1; transform: scale(1); }
  100% { left: calc(100% - 14px); opacity: 0; transform: scale(.55); }
}

.rail i {
  display: block;
  animation: processTravel 5s linear infinite !important;
  will-change: left, opacity;
}

.rail i:nth-child(2) { animation-delay: -1.66s !important; }
.rail i:nth-child(3) { animation-delay: -3.33s !important; }

@keyframes processTravel {
  0% { left: 0; opacity: 0; transform: scale(.65); }
  6% { opacity: 1; transform: scale(1); }
  92% { opacity: 1; transform: scale(1); }
  100% { left: calc(100% - 14px); opacity: 0; transform: scale(.65); }
}

@media (max-width: 980px) {
  .rail { display: block; left: 0; right: 0; top: 99px; }
  .steps { padding-top: 24px; }
}

@media (max-width: 580px) {
  .rail { position: relative; top: 0; left: 0; right: 0; grid-column: 1; margin: 0 18px 10px; }
}

/* Símbolos temáticos que aparecen al posicionarse sobre el menú. */
.topbar nav a[data-symbol] { position: relative; overflow: visible; }
.topbar nav a[data-symbol]::before,
.topbar nav a[data-symbol]::after {
  content: attr(data-symbol);
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  color: var(--violet);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(.35) rotate(0);
}

/* Seis símbolos por opción, más lentos y relacionados con cada contenido. */
.topbar nav a { position: relative; overflow: visible; }
.nav-particles { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.nav-particles i {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--violet);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.35);
}
.nav-particles i:nth-child(even) { color: var(--orange); }
.nav-particles.formulas i { font-family: Georgia,"Times New Roman",serif; font-size: 14px; letter-spacing: .01em; }
.nav-particles.currencies i { font-family: Montserrat,Arial,sans-serif; font-size: 13px; font-weight: 800; }
.topbar nav a:hover .nav-particles i,
.topbar nav a:focus-visible .nav-particles i { animation: navParticle 3.4s ease-out infinite; }
.nav-particles i:nth-child(1) { --x:-52px; --y:-34px; animation-delay:0s!important; }
.nav-particles i:nth-child(2) { --x:-20px; --y:-46px; animation-delay:.28s!important; }
.nav-particles i:nth-child(3) { --x:18px; --y:-44px; animation-delay:.56s!important; }
.nav-particles i:nth-child(4) { --x:48px; --y:-29px; animation-delay:.84s!important; }
.nav-particles i:nth-child(5) { --x:-43px; --y:27px; animation-delay:1.12s!important; }
.nav-particles i:nth-child(6) { --x:42px; --y:28px; animation-delay:1.4s!important; }
@keyframes navParticle {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.35); }
  16% { opacity:1; }
  66% { opacity:.92; transform:translate(var(--x),var(--y)) scale(1); }
  100% { opacity:0; transform:translate(var(--x),calc(var(--y) - 9px)) scale(.85); }
}
@media (max-width:980px) { .nav-particles { display:none; } }

.assistant-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.assistant-card { display:flex; flex-direction:column; }
.assistant-card small { display:block; margin-top:auto; padding-top:14px; color:#6e7b91; font-size:12px; line-height:1.55; }
.assistant-card .assistant-launch { align-self:flex-start; margin-top:19px; }
.assistant-notice { max-width:900px; margin:22px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.faq-options { margin:0; padding:0 22px 22px 42px; color:var(--muted); }
.faq-options li { margin:10px 0; line-height:1.55; }
.faq-options b { color:var(--ink); }
@media (max-width:980px) { .assistant-grid { grid-template-columns:1fr; } }

/* Título que recibe un rayo, se separa y forma una segunda frase. */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hero-copy { position:relative; }
.transform-title { position:relative; z-index:2; min-height:3.18em; }
#hero-title-animated { display:inline-block; transition:opacity .55s ease,filter .65s ease,transform .65s ease; }
#hero-title-animated.glow-out { opacity:0; filter:blur(10px) brightness(1.8); transform:scale(.985); }
#hero-title-animated.glow-in { animation:titleGlowIn .85s ease-out both; }
.title-glow { position:absolute; z-index:4; left:50%; top:38%; width:112%; height:74%; border-radius:50%; opacity:0; pointer-events:none; background:radial-gradient(ellipse,rgba(255,255,255,.98) 0 12%,rgba(146,239,242,.72) 22%,rgba(115,92,232,.28) 39%,transparent 67%); filter:blur(3px); transform:translate(-50%,-50%) scale(.72); }
.hero-copy.glow-change .title-glow { animation:titleFlash .92s ease-out both; }
@keyframes titleFlash { 0% { opacity:0; transform:translate(-50%,-50%) scale(.72); } 34% { opacity:.45; } 52% { opacity:1; transform:translate(-50%,-50%) scale(1.03); } 70% { opacity:.3; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.16); } }
@keyframes titleGlowIn { 0% { opacity:0; filter:blur(7px) brightness(1.65); transform:scale(1.01); } 100% { opacity:1; filter:none; transform:none; } }
@media (max-width:580px) { .transform-title { min-height:4.35em; } .title-glow { top:43%; width:118%; height:80%; } }

/* El símbolo del encabezado alterna entre cerebro y computador. */
.logo { position:relative; overflow:hidden; }
.logo svg { position:absolute; inset:5px; width:36px; height:36px; transition:none; }
.logo-brain { animation:logoBrain 8s ease-in-out infinite; }
.logo-pc { animation:logoPc 8s ease-in-out infinite; }
.logo-pc rect { fill:#f3fcfd; }
.logo-pc circle { fill:var(--orange); stroke:none; }
@keyframes logoBrain { 0%,38%,100% { opacity:1; transform:scale(1) rotate(0); filter:none; } 48%,88% { opacity:0; transform:scale(.45) rotate(-14deg); filter:blur(4px); } }
@keyframes logoPc { 0%,38%,100% { opacity:0; transform:scale(.45) rotate(14deg); filter:blur(4px); } 48%,88% { opacity:1; transform:scale(1) rotate(0); filter:none; } }

/* Transformación del cerebro principal en un computador activo. */
.brain,.workstation { transition:opacity .55s ease,transform .75s cubic-bezier(.2,.75,.25,1),filter .55s ease; }
.brain svg path,.brain svg circle,.brain span { transition:transform .62s cubic-bezier(.2,.75,.25,1),opacity .45s; transform-box:fill-box; transform-origin:center; }
.workstation { position:absolute; z-index:4; inset:28%; display:grid; place-items:center; border:1px solid rgba(115,92,232,.24); border-radius:50%; background:#fff; box-shadow:0 22px 55px rgba(56,48,120,.16); opacity:0; transform:scale(.58) rotate(10deg); filter:blur(8px); }
.workstation svg { width:78%; height:78%; overflow:visible; }
.computer-frame,.computer-base { fill:#f3fcfd; stroke:var(--teal); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.computer-base { fill:none; }
.computer-code { fill:none; stroke:var(--violet); stroke-width:5; stroke-linecap:round; stroke-dasharray:90; stroke-dashoffset:90; }
.workstation svg circle { fill:var(--orange); filter:drop-shadow(0 0 5px rgba(255,107,61,.7)); }
.workstation span { position:absolute; bottom:15%; padding:4px 8px; border-radius:99px; color:#fff; background:var(--violet); font-size:8px; font-weight:800; letter-spacing:.08em; }
.hero-visual.computer-mode .brain { opacity:0; transform:scale(.62) rotate(-12deg); filter:blur(8px); }
.hero-visual.computer-mode .brain-outline { transform:translate(-22px,-13px) rotate(-9deg); }
.hero-visual.computer-mode .brain-circuit { transform:translate(25px,16px) rotate(11deg); }
.hero-visual.computer-mode .brain svg circle:nth-of-type(odd) { transform:translate(-30px,24px) scale(.2); }
.hero-visual.computer-mode .brain svg circle:nth-of-type(even) { transform:translate(32px,-22px) scale(.2); }
.hero-visual.computer-mode .brain span { transform:translateY(28px) scale(.2); opacity:0; }
.hero-visual.computer-mode .workstation { opacity:1; transform:scale(1) rotate(0); filter:none; }
.hero-visual.computer-mode .computer-code { animation:writeCode 1.15s ease-out .45s forwards; }
.hero-visual.computer-mode .code-b { animation-delay:.68s; }
@keyframes writeCode { to { stroke-dashoffset:0; } }
.topbar nav a[data-symbol]::after { color: var(--orange); font-size: 10px; }
.topbar nav a[data-symbol]:hover::before,
.topbar nav a[data-symbol]:focus-visible::before { animation: menuSymbolLeft .7s ease-out both; }
.topbar nav a[data-symbol]:hover::after,
.topbar nav a[data-symbol]:focus-visible::after { animation: menuSymbolRight .78s .06s ease-out both; }
@keyframes menuSymbolLeft {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(0); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(-42px,-32px) scale(1.15) rotate(-22deg); }
}
@keyframes menuSymbolRight {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(0); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(30px,-28px) scale(1) rotate(24deg); }
}
@media (max-width: 980px) {
  .topbar nav a[data-symbol]::before,.topbar nav a[data-symbol]::after { display: none; }
}

/* Señal continua de interacción en todos los botones y enlaces de servicio. */
.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -40% auto -40% -35%;
  width: 24%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  animation: buttonShine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.button::after {
  content: "→";
  margin-left: 9px;
  animation: arrowNudge 1.25s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

.service > a b { animation: arrowNudge 1.25s ease-in-out infinite; }

@keyframes buttonShine {
  0%, 34% { left: -35%; opacity: 0; }
  42% { opacity: 1; }
  68%, 100% { left: 112%; opacity: 0; }
}

@keyframes arrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* Demostraciones de cada servicio. */
.demos {
  max-width: none;
  padding: 100px max(22px,calc((100vw - var(--max))/2 + 22px));
  background: radial-gradient(circle at 92% 12%,rgba(115,92,232,.12),transparent 25%),#fff;
  scroll-margin-top: 80px;
}

.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.demo-tab {
  position: relative;
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid #cadde3;
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, color .2s, background .2s;
}

.demo-tab::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px rgba(255,107,61,.6);
  animation: tabPulse 1.7s ease-in-out infinite;
}

.demo-tab:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(23,33,60,.1); }
.demo-tab.active { color: #fff; border-color: transparent; background: linear-gradient(120deg,var(--violet),var(--pink)); }

@keyframes tabPulse { 50% { transform: scale(1.45); opacity: .62; } }

.demo-panel {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: linear-gradient(135deg,#f4fbfc,#f8f5ff);
  box-shadow: 0 18px 50px rgba(23,33,60,.07);
}

.demo-panel.changed { animation: panelChange .38s ease-out; }
@keyframes panelChange { from { opacity: .55; transform: translateY(7px); } }

.demo-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr);
  align-items: stretch;
}

.demo-flow article {
  min-height: 160px;
  padding: 22px;
  border: 1px solid #cee2e7;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
}

.demo-flow article span,.demo-result span {
  display: block;
  margin-bottom: 11px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.demo-flow article b { display: block; font-size: 17px; line-height: 1.45; overflow-wrap: normal; word-break: normal; hyphens: none; }
.flow-link { position: relative; align-self: center; display: block; height: 2px; background: #acd7dc; }
.flow-link::after { content: "›"; position: absolute; right: -2px; top: -15px; color: var(--teal); font-size: 24px; }
.flow-link em { position: absolute; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 13px rgba(255,107,61,.75); animation: linkTravel 1.05s linear infinite; }
.flow-link:nth-of-type(2) em { animation-delay: -.35s; }
.flow-link:nth-of-type(3) em { animation-delay: -.7s; }
@keyframes linkTravel { from { left: 0; opacity: 0; } 12%,88% { opacity: 1; } to { left: calc(100% - 14px); opacity: 0; } }

.demo-result {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 20px 23px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(120deg,#162642,#3d3a78);
}
.demo-result span { margin: 0; color: #86e5e5; }
.demo-result strong { font-size: 17px; line-height: 1.45; }

@media (max-width: 980px) {
  .demo-flow { grid-template-columns: 1fr; }
  .flow-link { width: 2px; height: 46px; margin: 0 auto; }
  .flow-link::after { right: -8px; top: 25px; transform: rotate(90deg); }
  .flow-link em { left: -6px; top: 0; animation-name: linkTravelVertical; }
  @keyframes linkTravelVertical { from { top: 0; opacity: 0; } 12%,88% { opacity: 1; } to { top: calc(100% - 14px); opacity: 0; } }
  .demo-flow article { min-height: 0; }
}

@media (max-width: 580px) {
  .demos { padding-block: 75px; }
  .demo-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .demo-tab { padding-inline: 10px; font-size: 12px; }
  .demo-panel { padding: 17px; }
  .demo-result { grid-template-columns: 1fr; }
}

/* Formulario de cotización */
.quote{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;max-width:none;padding:100px max(22px,calc((100vw - var(--max))/2 + 22px));background:linear-gradient(135deg,#f2fbfc,#f8f5ff);scroll-margin-top:80px}.quote-intro h2{margin:0;max-width:500px;font-size:clamp(38px,4.4vw,58px);line-height:1.06;letter-spacing:-.045em}.quote-intro>p:not(.eyebrow){max-width:540px;color:var(--muted);font-size:17px}.quote-promise{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:11px 14px;margin-top:30px}.quote-promise span{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:13px;color:var(--violet);background:#fff;font-size:12px;font-weight:800}.quote-promise p{margin:0;font-size:14px;font-weight:600}.quote-form{display:grid;gap:18px;padding:31px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 20px 55px rgba(23,33,60,.08)}.quote-form label,.quote-form legend{color:var(--ink);font-size:13px;font-weight:700}.quote-form input,.quote-form select,.quote-form textarea{display:block;width:100%;margin-top:8px;padding:13px 14px;border:1px solid #cbdce2;border-radius:11px;color:var(--ink);background:#fff;font:500 14px Montserrat,Arial,sans-serif}.quote-form textarea{resize:vertical;min-height:110px}.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:3px solid rgba(9,174,183,.15);border-color:var(--teal)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.quote-form fieldset{margin:0;padding:17px;border:1px solid var(--line);border-radius:14px}.quote-form legend{padding:0 7px}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 15px}.check-grid label{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:500}.check-grid input{width:17px;height:17px;margin:0;accent-color:var(--violet)}.quote-form .button{width:max-content;border:0;font-family:inherit}.form-note{margin:0;color:var(--muted);font-size:12px}
@media(max-width:980px){.quote{grid-template-columns:1fr;gap:35px}}
@media(max-width:580px){.quote{padding-block:75px}.quote-form{padding:23px 18px}.field-row,.check-grid{grid-template-columns:1fr}.quote-form .button{width:100%}}
.field-help{display:block;margin-top:7px;color:var(--muted);font-size:11px;font-weight:500;line-height:1.45}

/* Beneficios concretos de los asistentes */
.gpt-value{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.gpt-value article{padding:21px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#fff,#f3fbfc)}.gpt-value b{font-size:15px}.gpt-value p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.55}@media(max-width:760px){.gpt-value{grid-template-columns:1fr}}