/* =========================================================================
   SIXX STAR — "Conducción nocturna" · sistema visual
   Marca: navy #0D1B3E + azul Sixx #2F5CFF (favicon oficial)
   Tipos: Big Shoulders Display (señalética industrial) + Overpass (derivada
   de Highway Gothic, la tipografía de las autopistas de EE. UU.)
   ========================================================================= */

@property --accent { syntax: '<color>'; inherits: true; initial-value: #2F5CFF; }
@property --accent-2 { syntax: '<color>'; inherits: true; initial-value: #A9C2FF; }

:root {
  --night: #060C1E;
  --navy: #0D1B3E;
  --sixx: #2F5CFF;
  --sixx-deep: #1A49E0;
  --ice: #EAF0FF;
  --mist: #A8B6DA;
  --dim: #6D7CA6;
  --amber: #FFB547;
  --route: #38E1FF;
  --violet: #8C7CFF;

  --stroke: rgba(170, 195, 255, .16);
  --stroke-2: rgba(180, 202, 255, .30);
  --glass-bg: rgba(16, 30, 70, .34);
  --glass-strong: rgba(10, 20, 50, .72);

  --font-display: "Big Shoulders Display", "Big Shoulders", "Overpass", "Arial Narrow", system-ui, sans-serif;
  --font-text: "Overpass", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.2, .75, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .25, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 76px;

  transition: --accent .9s var(--ease), --accent-2 .9s var(--ease);
  color-scheme: dark;
}
:root[data-world="0"] { --accent: #2F5CFF; --accent-2: #A9C2FF; }
:root[data-world="1"] { --accent: #38E1FF; --accent-2: #8FF2E0; }
:root[data-world="2"] { --accent: #8C7CFF; --accent-2: #B9C9FF; }
:root[data-world="3"] { --accent: #FFB547; --accent-2: #FFD49A; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ice);
  font: 400 1.0625rem/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid #9FC1FF; outline-offset: 3px; }
::selection { background: rgba(47, 92, 255, .55); color: #fff; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 400;
  background: var(--sixx); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 700;
  transition: top .2s;
}
.skip:focus { top: 16px; }

.wrap { width: min(1320px, 100% - var(--gutter) * 2); margin-inline: auto; }

/* ---------- capas de fondo ---------- */
#world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; outline: none; }
.sky-fallback {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s;
  background:
    radial-gradient(60% 50% at 75% 35%, rgba(47, 92, 255, .35), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgba(56, 225, 255, .14), transparent 70%),
    radial-gradient(40% 30% at 85% 85%, rgba(255, 181, 71, .12), transparent 70%),
    linear-gradient(180deg, #060C1E, #0A1530 60%, #060C1E);
}
html.no-webgl .sky-fallback { opacity: 1; }
html.no-webgl #world { display: none; }
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

main, .footer { position: relative; z-index: 2; }

/* ---------- vidrio ---------- */
.glass {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .015) 42%, rgba(255, 255, 255, .05)),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .03), 0 40px 80px -40px rgba(0, 0, 0, .75);
}
.glass::after { /* brillo especular que sigue al cursor */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .09), transparent 45%);
  opacity: var(--glow, 0); transition: opacity .4s;
}
.glass:hover::after { --glow: 1; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: 700 1rem/1 var(--font-text); letter-spacing: .01em;
  padding: 1em 1.35em .86em; border-radius: 12px; border: 1px solid transparent;
  color: var(--ice); text-decoration: none; white-space: nowrap;
  transition: background .3s, border-color .3s, box-shadow .3s, color .3s;
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; margin-top: -.12em; }
.btn-primary {
  background: linear-gradient(180deg, #5479FF 0%, #2F5CFF 50%, #2148E2 100%);
  box-shadow: 0 12px 34px -12px rgba(47, 92, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.btn-primary:hover { box-shadow: 0 18px 44px -12px rgba(70, 110, 255, 1), inset 0 1px 0 rgba(255, 255, 255, .5); background: linear-gradient(180deg, #6687FF 0%, #3C66FF 50%, #2650EA 100%); }
.btn-glass {
  background: rgba(255, 255, 255, .06); border-color: var(--stroke-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .12); border-color: rgba(205, 220, 255, .55); }
.btn-lg { font-size: 1.08rem; padding: 1.15em 1.6em 1em; border-radius: 14px; }
.btn-sm { font-size: .9rem; padding: .78em 1em .66em; border-radius: 10px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke); color: var(--ice);
  transition: background .25s, border-color .25s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .12); border-color: var(--stroke-2); }
.icon-btn svg { width: 20px; height: 20px; }
.link-out { display: inline-flex; align-items: center; gap: .4em; color: var(--accent-2); font-weight: 700; text-decoration: none; }
.link-out svg { width: 1.05em; height: 1.05em; }
.link-out:hover { text-decoration: underline; text-underline-offset: 4px; }

.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .62em 1em .5em; border-radius: 999px; border: 1px solid var(--stroke-2);
  background: rgba(255, 255, 255, .05); font: 600 .92rem/1.2 var(--font-text); color: var(--ice);
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.chip:hover { background: rgba(255, 255, 255, .12); border-color: rgba(205, 220, 255, .6); transform: translateY(-2px); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.hot {
  display: inline-flex; align-items: center; gap: .45em; padding: .35em .7em .25em; border-radius: 999px;
  font: 700 .74rem/1 var(--font-text); letter-spacing: .02em; color: #1B1203; background: var(--amber);
}
.hot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #1B1203; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- tipografía ---------- */
h2 { font: 800 clamp(2.6rem, 1.1rem + 4.4vw, 6rem)/.9 var(--font-display); letter-spacing: -.005em; text-wrap: balance; }
h3 { font-family: var(--font-text); }

[data-split] .w { display: inline-block; perspective: 700px; white-space: nowrap; }
[data-split] .wi {
  display: inline-block; transform-origin: 50% 0%;
  transform: rotateX(-96deg) translateZ(0); opacity: 0;
  transition: transform 1s var(--ease), opacity .55s ease;
  transition-delay: calc(var(--i, 0) * 38ms);
}
.in [data-split] .wi, [data-split].in .wi { transform: none; opacity: 1; }
[data-reveal] { opacity: 0; transition: opacity 1s ease .15s; }
[data-reveal].in { opacity: 1; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: radial-gradient(60% 60% at 50% 45%, #0E1D45, #060C1E 70%);
  transition: opacity .9s var(--ease), visibility .9s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-star { width: 92px; height: 96px; overflow: visible; filter: drop-shadow(0 0 18px rgba(47, 92, 255, .9)); }
.loader-path { fill: transparent; stroke: #CFE0FF; stroke-width: .7; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.6s var(--ease-io) forwards, starFill .8s 1.1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes starFill { to { fill: #EAF0FF; } }
.loader-word {
  width: 300px; height: 18px; background-repeat: no-repeat; background-size: contain; background-position: center;
  filter: drop-shadow(0 0 14px rgba(120, 150, 255, .55));
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: writeOn 1.3s .55s var(--ease-io) forwards;
}
@keyframes writeOn { to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
.loader-text { font: 600 .95rem var(--font-text); color: var(--mist); letter-spacing: .02em; }
.loader-text b { display: inline-block; min-width: 3ch; color: var(--ice); font-variant-numeric: tabular-nums; }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; display: none; }
@media (pointer: fine) { .cursor { display: block; } }
.cursor-ring, .cursor-dot { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-ring {
  width: 38px; height: 38px; border: 1.5px solid rgba(220, 230, 255, .55);
  transition: width .35s var(--ease), height .35s var(--ease), border-color .35s, background .35s;
}
.cursor-dot { width: 6px; height: 6px; background: var(--ice); }
.cursor.is-link .cursor-ring { width: 64px; height: 64px; border-color: var(--accent-2); background: rgba(47, 92, 255, .12); }
.cursor.is-stage .cursor-ring { width: 74px; height: 74px; border-color: var(--accent); border-width: 2px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cursor-label {
  position: absolute; left: 0; top: 0; margin: -15px 0 0 48px; white-space: nowrap;
  padding: 7px 12px 5px; border-radius: 10px; font: 700 .82rem/1.2 var(--font-text);
  background: rgba(8, 16, 42, .82); border: 1px solid var(--stroke-2); color: var(--ice);
  opacity: 0; transition: opacity .3s;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cursor.has-label .cursor-label { opacity: 1; }
.cursor-label b { color: var(--accent-2); font-weight: 800; }

/* ---------- navegación ---------- */
.nav {
  position: fixed; z-index: 60; top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 18px; height: var(--nav-h); padding: 0 12px 0 18px;
  border-radius: 18px; border: 1px solid transparent;
  transition: transform .5s var(--ease), background .4s, border-color .4s, -webkit-backdrop-filter .4s, backdrop-filter .4s;
}
.nav.solid {
  background: rgba(8, 16, 42, .55); border-color: var(--stroke);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.nav.hide { transform: translateY(calc(-100% - 20px)); }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; flex: none; }
.brand-logo { height: 30px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }
.brand-fallback { display: none; align-items: center; gap: 8px; font: 800 1.35rem var(--font-display); letter-spacing: .03em; }
.brand-fallback svg { width: 26px; height: 26px; fill: currentColor; }
.brand.no-img .brand-logo { display: none; }
.brand.no-img .brand-fallback { display: inline-flex; }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  position: relative; padding: 10px 12px 8px; border-radius: 10px; text-decoration: none;
  font: 600 .93rem var(--font-text); color: var(--mist); transition: color .25s, background .25s;
}
.nav-links a:hover { color: var(--ice); background: rgba(255, 255, 255, .06); }
.nav-links a.on { color: var(--ice); }
.nav-links a.on::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.nav-end { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke); }
.lang button { border: 0; background: none; padding: 7px 10px 5px; border-radius: 8px; font: 800 .8rem var(--font-text); color: var(--dim); letter-spacing: .04em; }
.lang button[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: var(--ice); }
.menu-btn { display: none; }
.menu {
  position: fixed; inset: 0; z-index: 55; padding: 110px var(--gutter) 40px;
  background: rgba(6, 12, 30, .86); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.menu nav { display: grid; gap: 4px; }
.menu nav a { font: 800 clamp(2.4rem, 9vw, 3.6rem)/1.05 var(--font-display); text-decoration: none; color: var(--ice); padding: 4px 0; }
.menu-phone { font: 700 1.2rem var(--font-text); color: var(--accent-2); text-decoration: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 60px) 0 120px; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 12, 30, .72) 0%, rgba(6, 12, 30, .25) 52%, transparent 70%);
}
.hero-inner { position: relative; }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.pills li {
  padding: .5em .9em .38em; border-radius: 999px; border: 1px solid var(--stroke-2); background: rgba(255, 255, 255, .05);
  font: 700 .82rem/1 var(--font-text); color: var(--mist); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pills li:last-child { color: var(--ice); display: inline-flex; align-items: center; gap: .5em; }
.pills li:last-child::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: blink 2s infinite; }
.hero-title {
  font: 800 clamp(3.6rem, 1.2rem + 6.4vw, 8.8rem)/.86 var(--font-display);
  letter-spacing: -.008em; max-width: 10.5ch; text-wrap: balance;
  text-shadow: 0 10px 60px rgba(6, 12, 30, .6);
}
.hero-lead { max-width: 46ch; margin-top: 28px; font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); color: #C6D2F2; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-call { margin-top: 18px; color: var(--mist); font-size: .98rem; }
.hero-call a { color: var(--ice); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px; font: 600 .82rem var(--font-text); color: var(--mist);
}
.hero-scroll i { width: 2px; height: 46px; background: linear-gradient(var(--ice), transparent); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--amber); animation: drop 1.8s var(--ease-io) infinite; }
@keyframes drop { to { top: 110%; } }
.hero .pills, .hero-lead, .hero-ctas, .hero-call { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.ready .hero .pills { opacity: 1; transform: none; transition-delay: .1s; }
.ready .hero-lead { opacity: 1; transform: none; transition-delay: .55s; }
.ready .hero-ctas { opacity: 1; transform: none; transition-delay: .7s; }
.ready .hero-call { opacity: 1; transform: none; transition-delay: .85s; }

/* ---------- marquee ---------- */
.marquee { position: relative; padding: 34px 0 30px; border-block: 1px solid var(--stroke); background: linear-gradient(90deg, rgba(6, 12, 30, .6), rgba(13, 27, 62, .35), rgba(6, 12, 30, .6)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: hidden; }
.marquee-label { font: 600 .9rem var(--font-text); color: var(--mist); margin-bottom: 14px; }
.marquee-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-row { display: flex; width: max-content; gap: 0; will-change: transform; }
.marquee-row span {
  font: 800 clamp(2rem, 1rem + 2.6vw, 3.6rem)/1 var(--font-display); letter-spacing: .01em; padding: 0 .55em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(200, 215, 255, .5);
}
.marquee-row span:nth-child(3n+1) { color: var(--ice); -webkit-text-stroke: 0; }
.marquee-row span::after { content: '✳'; font-size: .45em; vertical-align: .55em; margin-left: 1.1em; color: var(--accent); -webkit-text-stroke: 0; }

/* ---------- escenario de servicios ---------- */
.stage { position: relative; height: 100svh; min-height: 660px; overflow: clip; touch-action: pan-y; }
@media (pointer: fine) { .stage { cursor: crosshair; } .stage .svc-card, .stage .route { cursor: default; } }
.stage-head { position: absolute; top: calc(var(--nav-h) + 34px); left: 0; right: 0; pointer-events: none; }
.stage-kicker { font: 600 .95rem var(--font-text); color: var(--mist); }
.stage-cat {
  font-size: clamp(2.6rem, 1rem + 4vw, 5.4rem); margin: 6px 0 8px; max-width: 14ch;
  text-shadow: 0 0 50px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: opacity .35s, transform .5s var(--ease), filter .35s;
}
.stage-cat.swap { opacity: 0; transform: translateY(16px); filter: blur(8px); }
.stage-world { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--accent-2); font-weight: 600; font-size: .98rem; }
.stage-count { padding: .3em .7em .18em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); color: var(--ice); font-size: .82rem; font-weight: 700; }
.stage-hint {
  position: absolute; top: calc(var(--nav-h) + 40px); right: var(--gutter); max-width: 22ch; text-align: right;
  display: flex; align-items: center; gap: 12px; color: var(--mist); font-size: .92rem; line-height: 1.35; pointer-events: none;
}
.hint-ico { position: relative; flex: none; width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 12px; }
.hint-ico::before { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--amber); animation: wheel 1.8s ease-in-out infinite; }
.hint-ico::after { content: '↔'; position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); font-size: 18px; color: var(--accent-2); animation: sway 1.8s ease-in-out infinite; }
@keyframes wheel { 50% { transform: translateY(5px); opacity: .4; } }
@keyframes sway { 50% { transform: translateX(-30%); } }

.svc-card {
  position: absolute; left: 0; bottom: 104px; width: min(392px, calc(100vw - 32px));
  padding: 20px 22px 18px; border-radius: 22px; z-index: 3;
  transform: translate3d(var(--card-x, 24px), 0, 0);
}
.svc-card.swap .svc-name, .svc-card.swap .svc-short, .svc-card.swap .svc-feats, .svc-card.swap .svc-prov { opacity: 0; transform: translateY(8px); filter: blur(6px); }
.svc-name, .svc-short, .svc-feats, .svc-prov { transition: opacity .3s, transform .45s var(--ease), filter .3s; }
.svc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; min-height: 30px; }
.mile {
  display: inline-grid; justify-items: center; padding: 4px 8px 3px; min-width: 44px; border-radius: 7px;
  background: var(--accent); color: #fff; border: 2px solid rgba(255, 255, 255, .85); line-height: 1;
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 70%, transparent);
}
:root[data-world="1"] .mile, :root[data-world="3"] .mile { color: #0B1430; }
.mile small { font: 800 .55rem var(--font-text); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.mile b { font: 800 1.35rem/1 var(--font-display); }
.svc-name { font: 800 clamp(1.9rem, 1.2rem + 1.2vw, 2.5rem)/.95 var(--font-display); letter-spacing: .005em; }
.svc-short { margin-top: 8px; color: #C9D5F4; font-size: .97rem; line-height: 1.45; }
.svc-feats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 12px; }
.svc-feats li { position: relative; padding-left: 16px; font-size: .86rem; line-height: 1.3; color: var(--ice); }
.svc-feats li::before { content: ''; position: absolute; left: 0; top: .38em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); transform: rotate(45deg); }
.svc-prov { margin-top: 12px; font-size: .8rem; color: var(--dim); line-height: 1.4; }
.svc-prov:empty { display: none; }
.svc-card .svc-feats, .svc-card .svc-prov { display: none; }
.svc-actions { display: flex; gap: 8px; margin-top: 14px; }

.route { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; display: flex; align-items: flex-end; gap: 14px; padding: 0 calc(var(--gutter) + 64px) 0 var(--gutter); }
.in-stage .star-launch { padding-right: 7px; gap: 0; }
.in-stage .star-launch-label { max-width: 0; opacity: 0; }
.star-launch-label { max-width: 220px; overflow: hidden; white-space: nowrap; transition: max-width .5s var(--ease), opacity .3s; }
.route-body { position: relative; flex: 1; min-width: 0; }
.route-step { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; border: 1px solid var(--stroke-2); background: rgba(255, 255, 255, .05); color: var(--ice); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.route-step:hover { background: rgba(255, 255, 255, .12); }
.route-step svg { width: 20px; height: 20px; }
.route-segs { display: flex; margin-bottom: 8px; }
.route-seg {
  flex: var(--n) 1 0; min-width: 0; padding: 0 8px 2px; border-left: 1px solid var(--stroke-2);
  font: 700 .74rem/1.2 var(--font-text); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .4s;
}
.route-seg.on { color: var(--ice); }
.route-line { position: relative; height: 2px; background: rgba(160, 185, 255, .16); border-radius: 2px; }
.route-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent)); box-shadow: 0 0 14px var(--accent); }
.route-marks { display: flex; }
.mark {
  flex: 1 1 0; min-width: 0; height: 36px; padding: 0; border: 0; background: none; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; font: 700 .7rem/1 var(--font-text); font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.mark::before { content: ''; width: 2px; height: 8px; margin-bottom: 5px; background: currentColor; border-radius: 2px; transition: height .35s var(--ease), background .3s, box-shadow .3s; }
.mark:hover { color: var(--ice); }
.mark.on { color: var(--ice); }
.mark.on::before { height: 16px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.mark.hot-dot span::after { content: ''; display: block; width: 4px; height: 4px; margin: 3px auto 0; border-radius: 50%; background: var(--amber); opacity: .8; }

/* ---------- pórtico de promesas ---------- */
.gantry { position: relative; height: 290vh; }
.gantry-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; perspective: 1000px; perspective-origin: 50% 42%; }
.gantry-copy { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 6vh); z-index: 3; text-align: center; transition: opacity .2s linear; }
.gantry-copy h2 { max-width: 18ch; margin-inline: auto; }
.gantry-copy p { margin-top: 14px; color: var(--mist); font-size: 1.1rem; }
.gantry-scene { position: absolute; inset: 0; transform-style: preserve-3d; }
.gantry-road {
  position: absolute; left: 50%; bottom: -6vh; width: 160vw; height: 230vh; margin-left: -80vw;
  transform-origin: 50% 100%; transform: rotateX(82deg);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 72%); mask-image: linear-gradient(to top, #000 10%, transparent 72%);
}
.gantry-road i {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 31vw), rgba(255, 181, 71, .75) calc(50% - 31vw), rgba(255, 181, 71, .75) calc(50% - 30.6vw), transparent calc(50% - 30.6vw)),
    linear-gradient(90deg, transparent calc(50% + 30.6vw), rgba(234, 240, 255, .7) calc(50% + 30.6vw), rgba(234, 240, 255, .7) calc(50% + 31vw), transparent calc(50% + 31vw)),
    repeating-linear-gradient(0deg, rgba(234, 240, 255, .75) 0 90px, transparent 90px 220px) calc(50% - 10.5vw) var(--road-y, 0) / .45vw 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(234, 240, 255, .75) 0 90px, transparent 90px 220px) calc(50% + 10.5vw) var(--road-y, 0) / .45vw 100% no-repeat,
    linear-gradient(90deg, transparent calc(50% - 31vw), rgba(20, 34, 70, .55) calc(50% - 31vw), rgba(20, 34, 70, .55) calc(50% + 31vw), transparent calc(50% + 31vw));
}
.gantry-rig {
  position: absolute; left: 50%; top: 24%; width: min(1240px, 94vw); margin-left: calc(min(1240px, 94vw) / -2);
  transform-style: preserve-3d; transform: translate3d(0, 0, -2600px); will-change: transform;
}
.truss {
  height: 30px; border-radius: 3px;
  border-top: 2px solid rgba(195, 210, 240, .7); border-bottom: 2px solid rgba(195, 210, 240, .7);
  background:
    repeating-linear-gradient(55deg, transparent 0 18px, rgba(195, 210, 240, .5) 18px 20px),
    repeating-linear-gradient(-55deg, transparent 0 18px, rgba(195, 210, 240, .35) 18px 20px),
    rgba(20, 32, 62, .4);
}
.post { position: absolute; top: 0; width: 20px; height: 120vh; background: linear-gradient(90deg, #45577F, #1C2848); border-radius: 2px; }
.post-l { left: -26px; } .post-r { right: -26px; }
.signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; }
.sign {
  position: relative; padding: 38px 28px 28px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(36, 70, 190, .55), rgba(12, 26, 70, .82));
  border: 2px solid rgba(232, 240, 255, .9);
  box-shadow: inset 0 0 0 6px rgba(12, 26, 70, .65), inset 0 0 0 8px rgba(232, 240, 255, .28), 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 60px -20px rgba(47, 92, 255, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sign::before { content: ''; position: absolute; left: 22%; right: 22%; top: -16px; height: 16px; background: repeating-linear-gradient(90deg, rgba(195, 210, 240, .6) 0 3px, transparent 3px 46px); }
.sign-tab {
  position: absolute; top: -20px; right: 22px; padding: 7px 14px 4px; border-radius: 9px;
  background: var(--sixx); border: 2px solid rgba(232, 240, 255, .9); font: 800 1.15rem/1 var(--font-display); letter-spacing: .03em;
}
.sign:nth-child(2) .sign-tab { background: #0F7E5C; }
.sign:nth-child(3) .sign-tab { background: #B36A00; }
.sign h3 { font: 800 clamp(1.9rem, 1rem + 1.9vw, 3rem)/.95 var(--font-display); letter-spacing: .01em; }
.sign p { margin-top: 12px; font-size: 1rem; line-height: 1.5; color: #D5E0FA; }
.gantry-foot { position: absolute; left: 0; right: 0; bottom: 6vh; text-align: center; color: var(--mist); font-size: .95rem; z-index: 3; }

/* ---------- Star IA ---------- */
.ai { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 0; }
.ai-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
.ai-copy { max-width: 640px; }
.ai-copy h2 { font-size: clamp(2.6rem, 1.1rem + 3.8vw, 5.2rem); }
.ai-lead { margin-top: 22px; color: #C6D2F2; font-size: 1.12rem; max-width: 52ch; }
.ai-caps { list-style: none; display: grid; gap: 10px; margin-top: 26px; }
.ai-caps li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.ai-caps svg { width: 22px; height: 22px; color: var(--route); flex: none; }
.ai-try { margin-top: 28px; }
.ai-try > p { color: var(--mist); font-size: .92rem; margin-bottom: 10px; }
.ai-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- herramientas ---------- */
.tools { padding: clamp(100px, 14vh, 170px) 0; }
.tools-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.tools-head { position: sticky; top: 120px; }
.tools-head p { margin-top: 18px; color: #C6D2F2; max-width: 44ch; }
.tools-panel { padding: 22px; border-radius: 26px; }
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--stroke); }
.tabs button { border: 0; background: none; padding: 10px 16px 8px; border-radius: 10px; font: 700 .95rem var(--font-text); color: var(--mist); }
.tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .12); color: var(--ice); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.tool { margin-top: 22px; }
.tool-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tool-in label { display: grid; gap: 6px; font: 600 .85rem var(--font-text); color: var(--mist); }
.tool-in input {
  width: 100%; padding: 12px 14px 10px; border-radius: 12px; border: 1px solid var(--stroke-2);
  background: rgba(4, 10, 28, .5); color: var(--ice); font: 700 1.15rem var(--font-text); font-variant-numeric: tabular-nums;
  transition: border-color .25s, box-shadow .25s;
}
.tool-in input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.tool-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.tool-out > div { padding: 14px 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--stroke); }
.tool-out > div.big { grid-column: 1 / -1; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 26%, transparent), rgba(255, 255, 255, .03)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tool-out dt { font: 600 .82rem var(--font-text); color: var(--mist); }
.tool-out dd { font: 800 1.6rem/1.1 var(--font-display); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tool-out .big dd { font-size: clamp(2.6rem, 1.6rem + 2.4vw, 3.8rem); }
.tools-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: .85rem; color: var(--dim); }

/* ---------- partners ---------- */
.partners { padding: clamp(100px, 14vh, 170px) 0; }
.partners-head { max-width: 860px; }
.partners-head p { margin-top: 18px; color: #C6D2F2; max-width: 60ch; }
.partner-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.pgroup { padding: 20px; border-radius: 20px; }
.pgroup h3 { font: 700 .95rem var(--font-text); color: var(--accent-2); margin-bottom: 12px; }
.pgroup ul { list-style: none; display: grid; gap: 6px; }
.pgroup a {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-decoration: none;
  transition: background .25s;
}
.pgroup a:hover { background: rgba(255, 255, 255, .07); }
.pgroup .mono {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  font: 800 .95rem/1 var(--font-display); letter-spacing: .03em; color: var(--ice);
  background: linear-gradient(145deg, rgba(47, 92, 255, .55), rgba(47, 92, 255, .15)); border: 1px solid var(--stroke-2);
}
.pgroup .pname { flex: 1; font-weight: 600; font-size: .98rem; }
.pgroup a svg { width: 16px; height: 16px; color: var(--dim); transition: color .25s, transform .25s var(--ease); }
.pgroup a:hover svg { color: var(--ice); transform: translate(2px, -2px); }

/* ---------- FAQ ---------- */
.faq { padding: clamp(100px, 14vh, 170px) 0; }
.faq-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-inner > h2 { position: sticky; top: 120px; }
.faq-list { display: grid; gap: 10px; }
.faq-item { border-radius: 18px; overflow: hidden; }
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px 18px; cursor: pointer; font: 700 1.08rem/1.35 var(--font-text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--stroke-2); }
.faq-item summary i::before, .faq-item summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; background: var(--ice); border-radius: 2px; transition: transform .4s var(--ease); }
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i::after { transform: rotate(0deg); }
.faq-item .ans { padding: 0 22px 20px; color: #C6D2F2; max-width: 68ch; }
.faq-more { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 18px 4px; color: var(--mist); }

/* ---------- franquicia ---------- */
.franchise { padding: clamp(80px, 12vh, 150px) 0; }
.franchise-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.fr-copy p { margin-top: 18px; color: #C6D2F2; max-width: 52ch; }
.fr-copy .btn { margin-top: 26px; }
.fr-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; list-style: none; }
.fr-benefits li { padding: .5em .9em .38em; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke); font-size: .86rem; font-weight: 600; }
.fr-req { margin-top: 26px; }
.fr-req h3 { font: 700 .95rem var(--font-text); color: var(--accent-2); }
.fr-req ul { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.fr-req li { display: flex; gap: 10px; align-items: center; font-size: .95rem; }
.fr-req li svg { width: 18px; height: 18px; color: var(--route); flex: none; }
.fr-steps { padding: 8px 24px 6px; border-radius: 24px; align-self: start; }
.fr-steps ol { list-style: none; margin: 0; padding: 0; display: grid; }
.fr-steps h3 { font: 700 .95rem var(--font-text); color: var(--accent-2); padding: 16px 0 6px; }
.fr-steps li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 6px 16px; padding: 18px 0; border-top: 1px solid var(--stroke); }
.fr-steps li b { grid-row: span 2; font: 800 2.6rem/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--accent-2); }
.fr-steps li strong { font: 700 1.05rem var(--font-text); }
.fr-steps li span { color: var(--mist); font-size: .95rem; }

/* ---------- contacto ---------- */
.contact { padding: clamp(80px, 12vh, 150px) 0 clamp(80px, 10vh, 120px); }
.contact-card { padding: clamp(28px, 5vw, 64px); border-radius: 32px; text-align: center; overflow: hidden; }
.contact-card h2 { max-width: 14ch; margin-inline: auto; }
.contact-lead { margin: 18px auto 0; max-width: 60ch; color: #C6D2F2; }
.phone-big {
  display: inline-block; margin-top: 26px; font: 800 clamp(3rem, 1.4rem + 6vw, 7.4rem)/1 var(--font-display); letter-spacing: .01em;
  text-decoration: none; background: linear-gradient(100deg, #FFFFFF, var(--accent-2) 40%, #FFFFFF 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: sheen 6s linear infinite;
}
@keyframes sheen { to { background-position: -200% 0; } }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.contact-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--stroke); text-align: left; }
.contact-meta h3 { font: 700 .95rem var(--font-text); color: var(--accent-2); margin-bottom: 8px; }
.contact-meta p { color: #C6D2F2; }
.contact-meta a { color: var(--ice); }
.contact-meta .link-out { margin-top: 8px; color: var(--accent-2); }
.contact-cb { margin-top: 8px; font-size: .92rem; }

/* ---------- footer ---------- */
.footer { padding: 70px 0 120px; border-top: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(6, 12, 30, .4), rgba(6, 12, 30, .92)); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer .brand-logo { height: 40px; max-width: 100%; }
.footer-brand p { margin-top: 14px; color: var(--mist); max-width: 40ch; font-size: .95rem; }
.footer-contact { display: grid; gap: 4px; }
.footer-contact a { color: var(--ice); text-decoration: none; font-weight: 600; }
.footer-col { display: grid; align-content: start; gap: 8px; }
.footer-col h3 { font: 700 .9rem var(--font-text); color: var(--accent-2); margin-bottom: 6px; }
.footer-col a { color: var(--mist); text-decoration: none; font-size: .95rem; width: fit-content; }
.footer-col a:hover { color: var(--ice); }
.footer-base { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--stroke); display: grid; gap: 14px; color: var(--dim); font-size: .85rem; }
.certs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.certs li { padding: .4em .8em .3em; border-radius: 8px; border: 1px solid var(--stroke); color: var(--mist); font-weight: 600; font-size: .8rem; }

/* ---------- drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(4, 8, 22, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .45s; }
.drawer-panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(520px, calc(100% - 24px));
  display: flex; flex-direction: column; border-radius: 26px; background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(8, 16, 42, .78);
  transform: translateX(110%); transition: transform .6s var(--ease);
}
.drawer.open .drawer-scrim { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px 24px; }
.drawer-cat { font: 700 .9rem var(--font-text); color: var(--accent-2); }
.drawer-body { flex: 1; overflow-y: auto; padding: 4px 24px 24px; overscroll-behavior: contain; }
.drawer-fig { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(255, 255, 255, .04); border: 1px solid var(--stroke); margin-bottom: 18px; }
.drawer-fig img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.drawer-fig img.ok { opacity: 1; }
.drawer-fig.noimg { display: none; }
.drawer-title { font: 800 clamp(2.2rem, 1.4rem + 2vw, 3.2rem)/.92 var(--font-display); margin-top: 12px; }
.drawer-long { margin-top: 14px; color: #CFDAF6; }
.drawer-body h3 { font: 700 .92rem var(--font-text); color: var(--accent-2); margin-top: 24px; }
.drawer-feats { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.drawer-feats li { display: flex; gap: 10px; align-items: flex-start; }
.drawer-feats svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.drawer-prov { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.drawer-prov a { display: inline-flex; padding: .5em .85em .4em; border-radius: 999px; border: 1px solid var(--stroke-2); background: rgba(255, 255, 255, .05); text-decoration: none; font-size: .88rem; font-weight: 600; }
.drawer-prov a:hover { background: rgba(255, 255, 255, .12); }
.drawer-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 26px; }
.drawer-ctas .btn:first-child { grid-column: 1 / -1; }
.drawer-ctas .btn { white-space: normal; text-align: center; line-height: 1.15; }
.drawer-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 16px; border-top: 1px solid var(--stroke); font-weight: 700; color: var(--mist); font-variant-numeric: tabular-nums; }

/* ---------- Star: chat ---------- */
.star-launch {
  position: fixed; right: 18px; bottom: 18px; z-index: 70; display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 7px; border-radius: 999px; border: 1px solid var(--stroke-2);
  background: rgba(10, 20, 52, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--ice); font: 700 .95rem var(--font-text);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8), 0 0 0 0 rgba(47, 92, 255, .6); animation: ping 3.2s 3s infinite;
  transition: transform .4s var(--ease), opacity .4s;
}
.star-launch:hover { transform: translateY(-3px); }
.star-launch.away { transform: translateY(140%); opacity: 0; pointer-events: none; }
@keyframes ping { 0% { box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8), 0 0 0 0 rgba(47, 92, 255, .55); } 70%, 100% { box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8), 0 0 0 18px rgba(47, 92, 255, 0); } }
.star-orb {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #9FB8FF, #2F5CFF 45%, #12245F 80%);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .45), 0 0 24px rgba(47, 92, 255, .8);
}
.star-orb::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(56, 225, 255, .9), transparent 40%, rgba(255, 181, 71, .8), transparent 75%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); animation: spin 4s linear infinite; }
.star-orb svg { position: relative; width: 22px; height: 22px; fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8)); animation: spin 14s linear infinite; }
.star-orb.sm { width: 38px; height: 38px; }
.star-orb.sm svg { width: 19px; height: 19px; }
.star-orb.talking::before { animation-duration: .9s; }
@keyframes spin { to { transform: rotate(360deg); } }

.star-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 90; width: min(410px, calc(100vw - 24px)); height: min(640px, calc(100svh - 110px));
  display: flex; flex-direction: column; border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 40%), rgba(7, 14, 38, .84);
  transform-origin: 90% 100%; animation: chatIn .5s var(--ease);
}
.star-chat[hidden] { display: none; }
@keyframes chatIn { from { opacity: 0; transform: translateY(20px) scale(.96); } }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--stroke); }
.chat-id { flex: 1; display: grid; line-height: 1.2; }
.chat-id strong { font: 800 1.35rem/1 var(--font-display); letter-spacing: .02em; }
.chat-id small { display: inline-flex; align-items: center; gap: 6px; color: var(--mist); font-size: .8rem; margin-top: 3px; }
.live { width: 7px; height: 7px; border-radius: 50%; background: #3EE08F; box-shadow: 0 0 10px #3EE08F; }
.chat-tools { display: flex; gap: 6px; }
.chat-tools .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
.chat-tools .icon-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.chat-log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; scroll-behavior: smooth; }
.msg { display: flex; flex-direction: column; max-width: 88%; animation: msgIn .45s var(--ease); }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.msg.bot { align-self: flex-start; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.bubble { padding: 11px 14px 9px; border-radius: 16px; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.msg.bot .bubble { background: rgba(255, 255, 255, .07); border: 1px solid var(--stroke); border-top-left-radius: 6px; }
.msg.user .bubble { background: linear-gradient(180deg, #3D67FF, #2A52E8); border-top-right-radius: 6px; }
.bubble b { color: #fff; }
.bubble ul { margin: 6px 0 2px; padding-left: 18px; }
.bubble li { margin: 2px 0; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acts a, .acts button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 5px; border-radius: 10px; text-decoration: none;
  font: 700 .82rem/1.2 var(--font-text); color: var(--ice); background: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, .04)); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.acts a:hover, .acts button:hover { background: color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, .06)); }
.acts svg { width: 15px; height: 15px; }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mist); animation: dots 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .35; } }
.chat-chips { display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto; scrollbar-width: none; }
.chat-chips::-webkit-scrollbar { display: none; }
.chat-chips:empty { display: none; }
.chat-chips .chip { flex: none; font-size: .84rem; padding: .55em .9em .45em; }
.chat-form { display: flex; gap: 8px; align-items: center; padding: 10px 12px 14px; border-top: 1px solid var(--stroke); }
.chat-form input {
  flex: 1; min-width: 0; padding: 12px 14px 10px; border-radius: 14px; border: 1px solid var(--stroke-2); background: rgba(0, 0, 0, .25);
  font-size: .98rem; color: var(--ice);
}
.chat-form input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.chat-form .send { background: var(--sixx); border-color: transparent; }
.chat-form .mic.on { background: #E5484D; border-color: transparent; animation: ping2 1.2s infinite; }
@keyframes ping2 { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); } 100% { box-shadow: 0 0 0 12px rgba(229, 72, 77, 0); } }
.chat-form .mic[hidden] { display: none; }

@media (min-width: 1100px) { .drawer-open .star-chat { right: calc(min(520px, 100% - 24px) + 30px); } }
.chat-open .stage-hint { color: var(--accent-2); }
.chat-open .stage-hint .hint-ico { display: none; }

.nowebgl-note { position: fixed; left: 16px; bottom: 16px; z-index: 65; max-width: 320px; padding: 10px 14px; border-radius: 12px; background: rgba(8, 16, 42, .85); border: 1px solid var(--stroke); font-size: .82rem; color: var(--mist); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav-links a { padding-inline: 8px; font-size: .88rem; }
}
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-grid; }
  .tools-inner, .faq-inner, .franchise-inner, .ai-inner { grid-template-columns: 1fr; }
  .tools-head, .faq-inner > h2 { position: static; }
  .faq-more { grid-column: 1; }
  .partner-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai { align-items: flex-start; padding-top: 52vh; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  body { font-size: 1rem; }
  .nav { top: 8px; left: 8px; right: 8px; padding: 0 8px 0 12px; gap: 8px; }
  .brand-logo { height: 22px; }
  .nav-quote { display: none; }
  .hero { padding-bottom: 110px; align-items: flex-end; }
  .hero::before { background: linear-gradient(0deg, rgba(6, 12, 30, .92) 0%, rgba(6, 12, 30, .55) 55%, transparent 85%); }
  .hero-title { font-size: clamp(3.1rem, 15vw, 4.6rem); }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-scroll { display: none; }
  .stage { min-height: 600px; }
  .stage-head { top: calc(var(--nav-h) + 22px); }
  .stage-cat { font-size: clamp(2.2rem, 11vw, 3rem); }
  .stage-hint { top: auto; bottom: 60px; left: var(--gutter); right: auto; max-width: none; text-align: left; font-size: .82rem; }
  .stage-hint .hint-ico { display: none; }
  .svc-card { left: 12px; right: 12px; width: auto; bottom: 92px; padding: 16px 16px 14px; transform: none !important; }
  .svc-feats, .svc-prov { display: none; }
  .svc-short { font-size: .9rem; }
  .route { bottom: 14px; gap: 10px; padding: 0 78px 0 12px; }
  .route-segs, .mark span { display: none; }
  .mark { height: 22px; }
  .route-step { width: 46px; height: 46px; }
  .gantry { height: auto; }
  .gantry-pin { position: relative; height: auto; perspective: none; overflow: visible; padding: 110px 0 90px; }
  .gantry-copy, .gantry-foot { position: static; text-align: left; padding-inline: var(--gutter); width: auto; }
  .gantry-copy h2 { margin-inline: 0; }
  .gantry-scene { position: static; }
  .gantry-road, .truss, .post { display: none; }
  .gantry-rig { position: static; width: auto; margin: 46px var(--gutter) 30px; transform: none !important; }
  .signs { grid-template-columns: 1fr; gap: 34px; }
  .ai { padding-top: 46vh; }
  .tool-out { grid-template-columns: 1fr 1fr; }
  .partner-groups { grid-template-columns: 1fr; }
  .contact-meta { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .drawer-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: 88svh; transform: translateY(110%); }
  .star-launch { right: 12px; bottom: 12px; padding-right: 7px; }
  .star-launch-label { display: none; }
  .star-chat { right: 8px; left: 8px; bottom: 8px; width: auto; height: calc(100svh - 16px); }
}
@media (max-height: 760px) and (min-width: 761px) {
  .svc-feats { display: none; }
  .stage-head { top: calc(var(--nav-h) + 18px); }
  .stage-cat { font-size: clamp(2.2rem, 1rem + 3vw, 3.8rem); }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-split] .wi { transform: none; opacity: 1; }
  .hero .pills, .hero-lead, .hero-ctas, .hero-call { opacity: 1; transform: none; }
  .grain { display: none; }
}

/* =========================================================================
   v3 — portada de seguros, fotos en tarjetas, 21 herramientas, cobertura, película
   ========================================================================= */
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 700 .8rem var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--route); }
.hero-kicker::before { content: ''; width: 34px; height: 2px; background: linear-gradient(90deg, var(--amber), var(--route)); }
.hero-ins { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; max-width: 640px; }
.hero-ins button { padding: 9px 14px 8px; border-radius: 999px; border: 1px solid rgba(190, 210, 255, .26); background: rgba(10, 20, 50, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 700 .9rem var(--font-text); color: var(--ice); transition: background .2s, border-color .2s, transform .2s; }
.hero-ins button:hover, .hero-ins button:focus-visible { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent-2); transform: translateY(-1px); }
.hero-trust { margin: 26px 0 0; }
.hero-ctas .btn svg { width: 1.05em; height: 1.05em; }
.svc-photo { position: relative; margin: -6px -6px 14px; border-radius: 16px; overflow: hidden; aspect-ratio: 1280 / 640; background: linear-gradient(120deg, #0d1b3e, #14275a); border: 1px solid var(--stroke); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .5s var(--ease), transform 1.2s var(--ease); }
.svc-photo img.ok { opacity: 1; transform: none; }
.svc-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6, 12, 30, .55)); pointer-events: none; }
.svc-card.swap .svc-photo img { opacity: .2; }
.tools-inner--grid { grid-template-columns: 1fr; }
.tools-inner--grid .tools-head { position: static; max-width: 760px; }
.tools-grid { margin-top: clamp(26px, 4vw, 44px); }
.tools-more { margin-top: 22px; }
/* cobertura */
.coverage { position: relative; min-height: 118vh; display: flex; align-items: center; padding: clamp(90px, 12vh, 150px) 0; }
.coverage > .coverage-inner { flex: 0 0 auto; }
.coverage-copy { max-width: 520px; position: relative; z-index: 1; }
.coverage-copy .kicker { font: 700 .8rem var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--route); margin-bottom: 12px; }
.coverage-copy h2 { font: 900 clamp(2.6rem, 1.4rem + 4vw, 5rem)/.95 var(--font-display); text-transform: uppercase; letter-spacing: .005em; }
.coverage-copy > p { margin-top: 18px; color: #C6D2F2; }
.cov-stats { list-style: none; display: flex; gap: 12px; padding: 0; margin: 26px 0 0; flex-wrap: wrap; }
.cov-stats li { padding: 14px 16px 12px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--stroke); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 120px; }
.cov-stats b { display: block; font: 900 2.2rem/1 var(--font-display); color: var(--ice); }
.cov-stats span { font: 600 .82rem var(--font-text); color: var(--mist); }
.cov-hint { font-size: .9rem !important; color: var(--amber) !important; }
.cov-ctas { margin-top: 22px; }
.cov-note { font-size: .78rem !important; color: var(--dim) !important; }
@media (max-width: 760px) {
  .coverage { min-height: 135vh; align-items: flex-end; }
  .coverage-copy { padding: 18px; border-radius: 22px; background: rgba(6, 12, 30, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--stroke); }
  .svc-photo { aspect-ratio: 1280 / 560; }
}
/* película */
.film { position: fixed; inset: 0; z-index: 260; pointer-events: none; }
.film > * { pointer-events: auto; }
.film-bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transform: scaleY(0); transition: transform .6s var(--ease); pointer-events: none !important; }
.film-bar.t { top: 0; transform-origin: top; } .film-bar.b { bottom: 0; transform-origin: bottom; }
.film.on .film-bar { transform: none; }
.film-curtain { position: absolute; inset: 0; background: #02040a; opacity: 0; pointer-events: none !important; }
.film-cap { position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; padding: 0 20px; pointer-events: none !important; text-shadow: 0 4px 30px rgba(0, 0, 0, .9); }
.film-k { font: 900 clamp(2rem, 1.2rem + 3.6vw, 4.4rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.film-s { margin-top: 10px; font: 600 clamp(1rem, .9rem + .5vw, 1.35rem) var(--font-text); color: #D6E0FF; }
.film-logo { position: absolute; left: 50%; top: 24vh; width: min(560px, 76vw); transform: translate(-50%, 10px); opacity: 0; transition: opacity .8s, transform .8s var(--ease); pointer-events: none !important; filter: drop-shadow(0 0 30px rgba(80, 120, 255, .7)); }
.film.show-logo .film-logo { opacity: 1; transform: translate(-50%, 0); }
.film-end { position: absolute; left: 0; right: 0; bottom: 4.5vh; display: flex; justify-content: center; gap: 12px; opacity: 0; transform: translateY(10px); transition: .5s var(--ease); pointer-events: none; z-index: 2; }
.film.show-end .film-end { opacity: 1; transform: none; pointer-events: auto; }
.film-x { position: absolute; top: calc(11vh + 14px); right: 18px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .45); color: #fff; display: grid; place-items: center; cursor: pointer; }
.film-x svg { width: 20px; height: 20px; }
.film-prog { position: absolute; left: 0; right: 0; bottom: 11vh; height: 2px; background: rgba(255, 255, 255, .1); pointer-events: none !important; }
.film-prog b { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--route)); transform-origin: left; transform: scaleX(0); }
.film.capture .film-x, .film.capture .film-prog { display: none; }
html.film-on main, html.film-on .nav, html.film-on .footer, html.film-on .star-launch, html.film-on .cursor { opacity: 0 !important; pointer-events: none !important; transition: opacity .5s; }
html.film-on body { overflow: hidden; }
@media (max-height: 760px) and (min-width: 761px) { .svc-photo { aspect-ratio: 1280 / 440; } }

.linklike { background: none; border: 0; padding: 0; color: var(--ice); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 4px; cursor: pointer; }

/* foto real en la portada */
.hero { position: relative; }
.hero-photo { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(60vw, 1100px); margin: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%); mask-composite: intersect; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; filter: saturate(1.08) contrast(1.06) brightness(.92);
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * 10px + var(--sc, 0) * 60px), 0) scale(calc(1.06 + var(--sc, 0) * .06)); animation: heroKen 22s ease-in-out infinite alternate; }
.hero-photo-glow { position: absolute; inset: 0; background: radial-gradient(60% 50% at 70% 60%, transparent 40%, rgba(6,12,30,.55)), linear-gradient(90deg, rgba(6,12,30,.65), transparent 45%); mix-blend-mode: normal; }
@keyframes heroKen { from { object-position: 58% 55%; } to { object-position: 66% 50%; } }
.hero-inner { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .hero-photo { width: 100%; height: 46vh; bottom: auto; top: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) { .hero-photo img { animation: none; transform: none; } }

/* ---------- catálogo con fotos ---------- */
.catalog { position: relative; z-index: 3; padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); }
.catalog-head { max-width: 760px; }
.catalog-title { font: 800 clamp(2.1rem, 1.4rem + 3vw, 3.6rem)/1 var(--font-display, inherit); letter-spacing: -.01em; margin-top: 10px; }
.catalog-lead { color: var(--mist, #b9c6ea); margin-top: 12px; font-size: 1.05rem; line-height: 1.5; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.catalog-filters .chip { cursor: pointer; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(169,194,255,.28); background: rgba(12,22,52,.55); color: #e8eeff; font: 600 .9rem/1 inherit; backdrop-filter: blur(10px); transition: background .2s, border-color .2s, transform .2s; }
.catalog-filters .chip:hover { transform: translateY(-1px); border-color: rgba(169,194,255,.6); }
.catalog-filters .chip.on { background: linear-gradient(135deg, #3d6bff, #2347d8); border-color: transparent; color: #fff; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 26px; }
.cat-card { border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s; animation: catIn .45s both; }
.cat-card:hover { transform: translateY(-4px); }
.cat-card figure { position: relative; margin: 0; aspect-ratio: 16/10; overflow: hidden; background: #0b1530; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.cat-card:hover img { transform: scale(1.06); }
.cat-card .hot { position: absolute; top: 10px; left: 10px; }
.cat-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cat-body h3 { font: 800 1.15rem/1.1 var(--font-display, inherit); }
.cat-body p { color: var(--mist, #b9c6ea); font-size: .92rem; line-height: 1.45; flex: 1; }
.cat-acts { display: flex; gap: 8px; margin-top: 4px; }
@keyframes catIn { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 560px) { .catalog-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .cat-body { padding: 10px 11px 12px; } .cat-body p { display: none; } .cat-acts { flex-direction: column; } .cat-acts .btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .cat-card { animation: none; } }

/* ---------- portada con globo 3D nítido ---------- */
.hero-globe-tag { display: none; }
.globe-hero .hero-photo { display: none; }
.globe-hero .hero-globe-tag { display: flex; align-items: center; gap: 10px; position: absolute; right: 13vw; top: min(84vh, 800px); z-index: 2;
  padding: 10px 16px; border-radius: 999px; background: rgba(8, 16, 40, .55); border: 1px solid rgba(169, 194, 255, .28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #E6EDFF; font-size: .88rem; font-weight: 600; letter-spacing: .01em; pointer-events: none; opacity: 0; animation: tagIn .8s 1.4s forwards; }
.globe-hero .hero-globe-tag i { width: 9px; height: 9px; border-radius: 50%; background: #38E1FF; box-shadow: 0 0 0 0 rgba(56, 225, 255, .6); animation: tagPulse 2s infinite; }
@keyframes tagIn { to { opacity: 1; } }
@keyframes tagPulse { 70% { box-shadow: 0 0 0 10px rgba(56, 225, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(56, 225, 255, 0); } }
@media (max-width: 760px) { .globe-hero .hero-globe-tag { display: none; } .globe-hero .hero-inner { padding-top: 30vh; } }

/* =========================================================================
   SIXX STAR — 21 herramientas · módulo .sxt
   Vidrio oscuro sobre navy; usa los tokens del sitio con valores de respaldo
   para funcionar también de forma autónoma.
   ========================================================================= */

.sxt {
  --sxt-night: var(--night, #060C1E);
  --sxt-navy: var(--navy, #0D1B3E);
  --sxt-sixx: var(--sixx, #2F5CFF);
  --sxt-accent: var(--accent, #2F5CFF);
  --sxt-ice: var(--ice, #EAF0FF);
  --sxt-mist: var(--mist, #A8B6DA);
  --sxt-dim: var(--dim, #6D7CA6);
  --sxt-amber: var(--amber, #FFB547);
  --sxt-route: var(--route, #38E1FF);
  --sxt-stroke: var(--stroke, rgba(170, 195, 255, .16));
  --sxt-stroke-2: var(--stroke-2, rgba(180, 202, 255, .30));
  --sxt-glass: var(--glass-bg, rgba(16, 30, 70, .34));
  --sxt-glass-strong: var(--glass-strong, rgba(10, 20, 50, .72));
  --sxt-display: var(--font-display, "Big Shoulders Display", "Big Shoulders", "Arial Narrow", system-ui, sans-serif);
  --sxt-text: var(--font-text, "Overpass", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --sxt-ease: var(--ease, cubic-bezier(.2, .75, .1, 1));
  --sxt-focus: #9FC1FF;
  --sxt-cat-rgb: 47 92 255;
  --sxt-cat-ink: #8CA6FF;

  font-family: var(--sxt-text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sxt-ice);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sxt *, .sxt *::before, .sxt *::after { box-sizing: border-box; }
.sxt :where(h2, h3, h4, h5, p, dl, dd, ul, form) { margin: 0; }
.sxt :where(ul) { padding: 0; }
.sxt [hidden] { display: none !important; }
.sxt svg { display: block; flex: none; }
.sxt-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sxt :where(a, button, select, input):focus-visible { outline: 2px solid var(--sxt-focus); outline-offset: 3px; }

/* ---------- etiqueta de categoría + icono ---------- */
.sxt-tag {
  display: inline-flex; align-items: center; gap: .55em;
  font: 700 .9rem/1 var(--sxt-text); font-variant-caps: all-small-caps; letter-spacing: .09em;
  color: var(--sxt-cat-ink);
}
.sxt-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: rgb(var(--sxt-cat-rgb)); box-shadow: 0 0 10px rgb(var(--sxt-cat-rgb) / .9);
}
.sxt-ico {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px;
  color: var(--sxt-cat-ink);
  background: linear-gradient(150deg, rgb(var(--sxt-cat-rgb) / .24), rgb(var(--sxt-cat-rgb) / .07));
  border: 1px solid rgb(var(--sxt-cat-rgb) / .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px -14px rgb(var(--sxt-cat-rgb) / .8);
}
.sxt-ico svg { width: 22px; height: 22px; }
.sxt-ico-lg { width: 52px; height: 52px; border-radius: 15px; }
.sxt-ico-lg svg { width: 26px; height: 26px; }

/* ---------- filtros ---------- */
.sxt-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.sxt-chip {
  display: inline-flex; align-items: center; gap: .55em; min-height: 42px;
  padding: .5em .6em .42em 1em; border-radius: 999px;
  border: 1px solid var(--sxt-stroke-2); background: rgba(255, 255, 255, .04);
  color: var(--sxt-mist); font: 700 .92rem/1 var(--sxt-text); letter-spacing: .01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
}
.sxt-chip:hover { color: var(--sxt-ice); background: rgba(255, 255, 255, .09); border-color: rgba(205, 220, 255, .5); }
.sxt-chip[aria-pressed="true"] {
  color: #fff; background: rgb(var(--sxt-cat-rgb) / .18); border-color: rgb(var(--sxt-cat-rgb) / .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 22px -12px rgb(var(--sxt-cat-rgb) / .9);
}
.sxt-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--sxt-cat-rgb)); box-shadow: 0 0 10px rgb(var(--sxt-cat-rgb) / .8); }
.sxt-chip-n {
  min-width: 1.9em; padding: .32em .5em .22em; border-radius: 999px; text-align: center;
  font: 800 .88rem/1 var(--sxt-display); letter-spacing: .03em; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .08); color: var(--sxt-ice);
}
.sxt-chip[aria-pressed="true"] .sxt-chip-n { background: rgba(255, 255, 255, .16); }

/* ---------- rejilla de tarjetas ---------- */
.sxt-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px;
}
.sxt-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 236px;
  padding: 20px 20px 16px; border-radius: 20px;
  border: 1px solid var(--sxt-stroke);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .012) 46%, rgba(255, 255, 255, .035)),
    var(--sxt-glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px -42px rgba(0, 0, 0, .85);
  transition: transform .45s var(--sxt-ease), border-color .3s, box-shadow .45s var(--sxt-ease);
}
.sxt-card::before { /* resplandor de categoría */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(110% 70% at 0% 0%, rgb(var(--sxt-cat-rgb) / .2), transparent 62%);
  opacity: .6; transition: opacity .45s var(--sxt-ease);
}
.sxt-card:hover, .sxt-card:focus-within {
  transform: translateY(-4px);
  border-color: rgb(var(--sxt-cat-rgb) / .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 28px 54px -26px rgb(var(--sxt-cat-rgb) / .72), 0 0 0 1px rgb(var(--sxt-cat-rgb) / .18);
}
.sxt-card:hover::before, .sxt-card:focus-within::before { opacity: 1; }
.sxt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sxt-card-title {
  font: 800 1.55rem/1 var(--sxt-display); text-transform: uppercase; letter-spacing: .015em;
  color: var(--sxt-ice); text-wrap: balance;
}
.sxt-card-desc { margin: 8px 0 18px; font-size: .94rem; line-height: 1.45; color: var(--sxt-mist); }
.sxt-card-cta {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sxt-stroke);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--sxt-ice); font: 700 .94rem/1.2 var(--sxt-text); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sxt-card-cta::after { /* toda la tarjeta es clicable */
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 20px;
}
.sxt .sxt-card-cta:focus-visible { outline: none; }
.sxt .sxt-card-cta:focus-visible::after { outline: 2px solid var(--sxt-focus); outline-offset: 3px; }
.sxt-cta-ico {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  border: 1px solid var(--sxt-stroke-2); background: rgba(255, 255, 255, .05); color: var(--sxt-ice);
  transition: transform .4s var(--sxt-ease), background .3s, border-color .3s;
}
.sxt-cta-ico svg { width: 16px; height: 16px; }
.sxt-card:hover .sxt-cta-ico, .sxt-card-cta:focus-visible .sxt-cta-ico {
  background: rgb(var(--sxt-cat-rgb) / .3); border-color: rgb(var(--sxt-cat-rgb) / .7); transform: translateX(3px);
}
.sxt-card:hover [data-sxt-launch] .sxt-cta-ico, [data-sxt-launch]:focus-visible .sxt-cta-ico { transform: translate(2px, -2px); }
.sxt-card.sxt-enter { animation: sxt-in .5s var(--sxt-ease) backwards; animation-delay: calc(var(--sxt-i, 0) * 28ms); }
@keyframes sxt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- cabecera de calculadora ---------- */
.sxt-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px; }
.sxt-head-text { min-width: 0; padding-top: 2px; }
.sxt-title {
  margin-top: 8px; font: 800 clamp(1.75rem, 1.3rem + 1.4vw, 2.35rem)/.98 var(--sxt-display);
  text-transform: uppercase; letter-spacing: .012em; color: var(--sxt-ice); text-wrap: balance;
}
.sxt-desc { margin-top: 8px; font-size: .98rem; line-height: 1.45; color: var(--sxt-mist); max-width: 56ch; }
.sxt-close {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; padding: 0;
  border: 1px solid var(--sxt-stroke-2); background: rgba(255, 255, 255, .05); color: var(--sxt-ice); cursor: pointer;
  transition: background .25s, border-color .25s;
}
.sxt-close:hover { background: rgba(255, 255, 255, .12); border-color: rgba(205, 220, 255, .55); }
.sxt-close svg { width: 20px; height: 20px; }

/* ---------- calculadora ---------- */
.sxt-calc { container-type: inline-size; container-name: sxt-calc; }
.sxt-calc-grid { display: grid; gap: 22px; }
.sxt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-content: start; }
@container sxt-calc (min-width: 600px) {
  .sxt-calc-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 26px; align-items: start; }
  .sxt-form { grid-template-columns: minmax(0, 1fr); }
}
@container sxt-calc (max-width: 320px) {
  .sxt-form { grid-template-columns: minmax(0, 1fr); }
}
.sxt-field { display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; min-width: 0; }
.sxt-label { font: 600 .85rem/1.25 var(--sxt-text); color: var(--sxt-mist); }
.sxt-help { margin-top: -3px; font-size: .78rem; line-height: 1.3; color: var(--sxt-mist); opacity: .9; }
.sxt-input {
  width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 12px 14px 10px; border-radius: 12px;
  border: 1px solid var(--sxt-stroke-2); background: rgba(3, 8, 24, .55); color: var(--sxt-ice);
  font: 700 1.1rem/1.2 var(--sxt-text); font-variant-numeric: tabular-nums; letter-spacing: .01em;
  -webkit-appearance: none; appearance: none; -moz-appearance: textfield;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.sxt-input::-webkit-inner-spin-button, .sxt-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sxt-input:hover { border-color: rgba(205, 220, 255, .48); }
.sxt .sxt-input:focus { outline: 2px solid var(--sxt-focus); outline-offset: 1px; border-color: var(--sxt-focus); background: rgba(3, 8, 24, .72); box-shadow: 0 0 0 5px rgba(47, 92, 255, .28); }
.sxt-input[aria-invalid="true"] { border-color: var(--sxt-amber); box-shadow: 0 0 0 3px rgba(255, 181, 71, .22); }
.sxt-select { position: relative; display: block; }
.sxt-select .sxt-input { padding-right: 42px; cursor: pointer; }
.sxt-select svg { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; color: var(--sxt-mist); }
.sxt-select option { background: #0D1B3E; color: #EAF0FF; }

.sxt-field-check { grid-column: 1 / -1; }
.sxt-form > .sxt-field:last-child:nth-child(even) { grid-column: 1 / -1; } /* nº impar de campos (el 1er hijo es el h oculto) */
.sxt-check {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--sxt-stroke-2); background: rgba(3, 8, 24, .4);
  font: 600 .95rem/1.3 var(--sxt-text); color: var(--sxt-ice); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.sxt-check:hover { border-color: rgba(205, 220, 255, .48); }
.sxt-check input { position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; opacity: 0; cursor: pointer; }
.sxt-box {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px;
  border: 1.5px solid var(--sxt-stroke-2); background: rgba(255, 255, 255, .04); color: transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.sxt-box svg { width: 15px; height: 15px; stroke-width: 2.6; }
.sxt-check input:checked + .sxt-box { background: var(--sxt-sixx); border-color: #7C9BFF; color: #fff; }
.sxt-check input:focus-visible + .sxt-box { outline: 2px solid var(--sxt-focus); outline-offset: 3px; }

/* ---------- resultados ---------- */
.sxt-results { min-width: 0; }
.sxt-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sxt-out {
  min-width: 0; padding: 13px 14px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--sxt-stroke);
}
.sxt-out:last-child:nth-child(even) { grid-column: 1 / -1; }
.sxt-out dt { font: 600 .82rem/1.3 var(--sxt-text); color: var(--sxt-mist); }
.sxt-out dd {
  margin: 7px 0 0; font: 800 1.6rem/1 var(--sxt-display); letter-spacing: .012em;
  font-variant-numeric: tabular-nums; color: var(--sxt-ice); overflow-wrap: anywhere;
}
.sxt-cur { font-size: .56em; letter-spacing: .08em; color: var(--sxt-mist); margin-right: .1em; }
.sxt-out.is-lead {
  position: relative; overflow: hidden; grid-column: 1 / -1; padding: 16px 18px 18px;
  background: linear-gradient(125deg, rgba(47, 92, 255, .36), rgba(47, 92, 255, .1) 55%, rgba(255, 255, 255, .03));
  border-color: rgba(47, 92, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 40px -26px rgba(47, 92, 255, .9);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .sxt-out.is-lead {
    background: linear-gradient(125deg, color-mix(in srgb, var(--sxt-accent) 36%, transparent), color-mix(in srgb, var(--sxt-accent) 10%, transparent) 55%, rgba(255, 255, 255, .03));
    border-color: color-mix(in srgb, var(--sxt-accent) 60%, transparent);
  }
}
.sxt-out.is-lead::after { /* línea de carril */
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 7px; height: 3px; border-radius: 2px; opacity: .75;
  background: repeating-linear-gradient(90deg, var(--sxt-accent) 0 22px, transparent 22px 36px);
}
.sxt-out.is-lead dt { color: #D5DFFA; font-size: .86rem; }
.sxt-out.is-lead dd { margin-top: 8px; font-size: 2.6rem; font-size: clamp(2.3rem, 8.5cqi, 3.3rem); color: #fff; }
.sxt-warn {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 11px 13px;
  border-radius: 12px; background: rgba(255, 181, 71, .1); border: 1px solid rgba(255, 181, 71, .42);
  color: #FFD9A3; font-size: .88rem; line-height: 1.4;
}
.sxt-warn svg { width: 18px; height: 18px; margin-top: 1px; color: var(--sxt-amber); }
.sxt-tip {
  margin-top: 12px; padding: 2px 0 2px 12px; border-left: 2px solid rgb(var(--sxt-cat-rgb) / .7);
  font-size: .88rem; line-height: 1.45; color: var(--sxt-mist);
}

/* ---------- lanzador de cotización ---------- */
.sxt-launch { display: grid; gap: 14px; max-width: 62ch; }
.sxt-launch-lead { font-size: 1.02rem; line-height: 1.5; color: var(--sxt-ice); }
.sxt-launch-h { margin-top: 4px; font: 800 1.2rem/1 var(--sxt-display); letter-spacing: .02em; color: var(--sxt-ice); }
.sxt-ready { list-style: none; display: grid; gap: 8px; }
.sxt-ready li {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--sxt-stroke); font-size: .95rem; line-height: 1.4;
}
.sxt-ready li::before {
  content: ''; flex: none; width: 7px; height: 7px; margin-top: .45em; border-radius: 1.5px; transform: rotate(45deg);
  background: rgb(var(--sxt-cat-rgb)); box-shadow: 0 0 8px rgb(var(--sxt-cat-rgb) / .8);
}

/* ---------- pie: nota + CTA ---------- */
.sxt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.sxt-note { flex: 1 1 220px; font-size: .86rem; line-height: 1.4; color: var(--sxt-mist); }
.sxt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 1em 1.4em .86em; border-radius: 12px; border: 1px solid transparent;
  font: 700 1rem/1 var(--sxt-text); letter-spacing: .01em; color: #fff; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background .3s, box-shadow .3s, transform .3s var(--sxt-ease);
}
.sxt-btn-primary {
  background: linear-gradient(180deg, #5479FF 0%, #2F5CFF 50%, #2148E2 100%);
  box-shadow: 0 12px 34px -12px rgba(47, 92, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.sxt-btn-primary:hover {
  background: linear-gradient(180deg, #6687FF 0%, #3C66FF 50%, #2650EA 100%);
  box-shadow: 0 18px 44px -12px rgba(70, 110, 255, 1), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.sxt-btn-primary:active { transform: translateY(1px); }

/* ---------- en línea (renderCalc) ---------- */
.sxt-inline {
  position: relative; padding: clamp(18px, 3vw, 28px); border-radius: 24px;
  border: 1px solid var(--sxt-stroke);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .012) 42%, rgba(255, 255, 255, .03)),
    var(--sxt-glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 40px 80px -44px rgba(0, 0, 0, .8);
}
.sxt-inline .sxt-head { grid-template-columns: auto minmax(0, 1fr); padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--sxt-stroke); }
.sxt-inline .sxt-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sxt-stroke); }

/* ---------- modal ---------- */
.sxt-modal {
  position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 16px;
  overscroll-behavior: contain;
}
.sxt-modal[hidden] { display: none; }
.sxt-backdrop {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--sxt-ease);
  background: radial-gradient(90% 70% at 50% 40%, rgba(13, 27, 62, .6), rgba(3, 7, 20, .86));
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}
.sxt-dialog {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 760px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  border-radius: 24px; border: 1px solid var(--sxt-stroke-2); overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .015) 38%, rgba(255, 255, 255, .03)),
    var(--sxt-glass-strong);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .25);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .26s var(--sxt-ease), transform .45s var(--sxt-ease);
}
.sxt-dialog::before { /* resplandor de categoría en la esquina */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(70% 45% at 0% 0%, rgb(var(--sxt-cat-rgb) / .18), transparent 70%);
}
.sxt-dialog:focus { outline: none; }
.sxt-modal[data-state="open"] .sxt-backdrop { opacity: 1; }
.sxt-modal[data-state="open"] .sxt-dialog { opacity: 1; transform: none; }
.sxt-modal[data-state="closing"] { pointer-events: none; }
.sxt-modal[data-state="closing"] .sxt-dialog { transform: translateY(10px) scale(.985); transition-duration: .18s, .22s; }
.sxt-modal[data-state="closing"] .sxt-backdrop { transition-duration: .22s; }
.sxt-dialog > .sxt-head { position: relative; flex: none; padding: 22px 20px 18px 24px; border-bottom: 1px solid var(--sxt-stroke); }
.sxt-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 24px; }
.sxt-dialog > .sxt-foot { position: relative; flex: none; padding: 14px 24px 18px; border-top: 1px solid var(--sxt-stroke); background: rgba(6, 12, 30, .4); }

@media (max-width: 560px) {
  .sxt-card { min-height: 0; }
  .sxt-modal { padding: 16px; }
  .sxt-dialog { border-radius: 20px; }
  .sxt-dialog > .sxt-head { gap: 12px; padding: 16px 14px 14px 16px; }
  .sxt-ico-lg { width: 44px; height: 44px; border-radius: 13px; }
  .sxt-ico-lg svg { width: 22px; height: 22px; }
  .sxt-title { font-size: 1.7rem; }
  .sxt-desc { font-size: .92rem; }
  .sxt-body { padding: 18px 16px 20px; }
  .sxt-dialog > .sxt-foot { padding: 12px 16px 14px; gap: 10px; }
  .sxt-foot .sxt-btn { flex: 1 1 100%; }
  .sxt-note { flex-basis: 100%; font-size: .82rem; }
  .sxt-out dd { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sxt-card, .sxt-cta-ico, .sxt-btn { transition: border-color .2s, box-shadow .2s, background .2s; }
  .sxt-card:hover, .sxt-card:focus-within { transform: none; }
  .sxt-card:hover .sxt-cta-ico, .sxt-card-cta:focus-visible .sxt-cta-ico { transform: none; }
  .sxt-card.sxt-enter { animation: none; }
  .sxt-dialog, .sxt-modal[data-state="closing"] .sxt-dialog { transform: none; transition: opacity .01s linear; }
  .sxt-backdrop { transition: opacity .01s linear; }
}

@media (forced-colors: active) {
  .sxt-card, .sxt-dialog, .sxt-inline, .sxt-out, .sxt-input, .sxt-chip { border: 1px solid CanvasText; }
  .sxt-chip[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* ============ Cotizadores (SXQuote) ============ */
.sxq { --q-accent: var(--accent, #2F5CFF); --q-stroke: var(--stroke, rgba(170,195,255,.16)); color: var(--ice, #EAF0FF); font-family: var(--font-text, system-ui); }
.sxq-head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: center; margin-bottom: 18px; }
.sxq-photo { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1280 / 832; background: #0b1530; border: 1px solid var(--q-stroke); box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); }
.sxq-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sxq-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,12,30,.55)); }
.sxq-kicker { margin: 0; font: 700 .78rem var(--font-text, system-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--route, #38E1FF); }
.sxq-title { margin: 6px 0 8px; font: 800 clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem)/1.02 var(--font-display, system-ui); letter-spacing: .01em; text-transform: uppercase; }
.sxq-lead { margin: 0; color: #C6D2F2; font-size: .98rem; line-height: 1.55; }
.sxq-badges { margin: 10px 0 0; font: 600 .82rem var(--font-text, system-ui); color: var(--amber, #FFB547); }
.sxq-form { display: grid; gap: 14px; }
.sxq-sec { margin: 0; padding: 16px 16px 14px; border: 1px solid var(--q-stroke); border-radius: 18px; background: rgba(255,255,255,.03); min-width: 0; }
.sxq-sec legend { padding: 0 8px; font: 800 1.05rem var(--font-display, system-ui); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.sxq-sec legend i { font-style: normal; font: 700 .72rem var(--font-text, system-ui); color: var(--q-accent); border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px 1px; }
.sxq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.sxq-f { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sxq-f > span, .sxq-f legend { font: 600 .84rem var(--font-text, system-ui); color: var(--mist, #A8B6DA); }
.sxq-f b { color: var(--amber, #FFB547); font-weight: 700; }
.sxq-wide { grid-column: 1 / -1; }
.sxq input[type=text], .sxq input[type=tel], .sxq input[type=email], .sxq input[type=number], .sxq select, .sxq textarea {
  width: 100%; min-height: 46px; padding: 11px 13px 9px; border-radius: 12px; border: 1px solid rgba(180,202,255,.24); background: rgba(6,12,30,.55);
  color: var(--ice, #EAF0FF); font: 500 1rem var(--font-text, system-ui); transition: border-color .2s, box-shadow .2s; }
.sxq textarea { resize: vertical; min-height: 84px; }
.sxq select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #A8B6DA 50%), linear-gradient(135deg, #A8B6DA 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 34px; }
.sxq select option { background: #0D1B3E; color: #EAF0FF; }
.sxq input::placeholder, .sxq textarea::placeholder { color: #6D7CA6; }
.sxq input:focus, .sxq select:focus, .sxq textarea:focus { outline: none; border-color: var(--accent-2, #A9C2FF); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 35%, transparent); }
.sxq-f.bad input, .sxq-f.bad select, .sxq-f.bad textarea { border-color: #FF7A6B; }
.sxq-err { font: 600 .78rem var(--font-text, system-ui); font-style: normal; color: #FF9A8C; min-height: 0; }
.sxq-err:empty { display: none; }
.sxq-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.sxq-checks label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 7px; border-radius: 999px; border: 1px solid rgba(180,202,255,.24); background: rgba(6,12,30,.45); cursor: pointer; font: 600 .88rem var(--font-text, system-ui); }
.sxq-checks input { accent-color: var(--q-accent); width: 16px; height: 16px; }
.sxq-checks label:has(input:checked) { border-color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 22%, transparent); }
fieldset.bad .sxq-checks label { border-color: #FF7A6B; }
.sxq-file input[type=file] { width: 100%; padding: 10px; border: 1px dashed rgba(180,202,255,.35); border-radius: 12px; background: rgba(6,12,30,.4); color: var(--mist, #A8B6DA); font: 500 .88rem var(--font-text, system-ui); }
.sxq-file input[type=file]::file-selector-button { margin-right: 10px; padding: 7px 12px; border-radius: 9px; border: 0; background: var(--q-accent); color: #fff; font: 700 .82rem var(--font-text, system-ui); cursor: pointer; }
.sxq-file small { color: var(--dim, #6D7CA6); font-size: .76rem; }
.sxq-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sxq-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: #C6D2F2; line-height: 1.5; padding: 2px 4px; }
.sxq-consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--q-accent); }
.sxq-consent.bad { color: #FF9A8C; }
.sxq-consent a { color: var(--accent-2, #A9C2FF); }
.sxq-formerr { margin: 0; color: #FF9A8C; font: 600 .9rem var(--font-text, system-ui); }
.sxq-submit, .sxq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 22px 12px; border-radius: 14px; border: 0; cursor: pointer; text-decoration: none;
  font: 800 1.02rem var(--font-text, system-ui); color: #fff; background: linear-gradient(180deg, #5A7DFF 0%, #2F5CFF 55%, #1A49E0 100%); box-shadow: 0 16px 40px -14px rgba(70,110,255,.95), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .2s, box-shadow .2s; }
.sxq-submit:hover, .sxq-btn:hover { transform: translateY(-1px); }
.sxq-submit:disabled { opacity: .7; cursor: progress; }
.sxq-btn.wa { background: linear-gradient(180deg, #2BDB72, #16A851); box-shadow: 0 16px 40px -16px rgba(35,200,100,.9); }
.sxq-btn.ghost { background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid rgba(205,220,255,.3); }
.sxq-done { text-align: center; padding: 24px 6px 8px; outline: none; }
.sxq-done h3 { margin: 10px 0 6px; font: 800 2rem/1.05 var(--font-display, system-ui); text-transform: uppercase; }
.sxq-done p { color: #C6D2F2; max-width: 52ch; margin: 6px auto; }
.sxq-ref b { color: var(--amber, #FFB547); font-size: 1.1rem; letter-spacing: .04em; }
.sxq-ok { width: 74px; height: 74px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #5A7DFF, #1A49E0); box-shadow: 0 0 0 10px rgba(47,92,255,.18), 0 0 60px rgba(47,92,255,.8); }
.sxq-ok svg { width: 36px; height: 36px; }
.sxq-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
/* modal */
.sxq-modal { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 16px; }
.sxq-backdrop { position: absolute; inset: 0; background: rgba(3,7,20,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.sxq-panel { position: relative; width: min(900px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, rgba(16,30,70,.92), rgba(8,15,36,.96)); border: 1px solid rgba(180,202,255,.22); box-shadow: 0 50px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(47,92,255,.15);
  transform: translateY(18px) scale(.98); opacity: 0; transition: transform .35s var(--ease, ease), opacity .25s; }
.sxq-modal.on .sxq-backdrop { opacity: 1; }
.sxq-modal.on .sxq-panel { transform: none; opacity: 1; }
.sxq-body { overflow-y: auto; padding: 26px clamp(16px, 3vw, 30px) 28px; overscroll-behavior: contain; }
.sxq-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(205,220,255,.25); background: rgba(6,12,30,.7); color: #fff; display: grid; place-items: center; cursor: pointer; }
.sxq-x svg { width: 20px; height: 20px; }
html.sxq-open { overflow: hidden; }
@media (max-width: 760px) {
  .sxq-head { grid-template-columns: 1fr; gap: 14px; }
  .sxq-grid { grid-template-columns: 1fr; }
  .sxq-modal { padding: 0; place-items: end stretch; }
  .sxq-panel { width: 100%; max-height: 94dvh; border-radius: 22px 22px 0 0; }
  .sxq-body { padding: 22px 16px 26px; }
  .sxq-acts .sxq-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .sxq-panel, .sxq-backdrop { transition: none; } }