/* ==========================================================================
   ticonline | páginas de servicio (web, SEO, IA, flotas)
   Complementa styles.css (tokens, cabecera, botones, preguntas frecuentes, pie y el portátil).
   El CSS por defecto muestra el estado FINAL de cada ilustración: sin JavaScript o con
   «reducir movimiento» se ve completa. js/servicio.js la monta paso a paso con el scroll
   (y añade .js-build a <html> solo en ese caso). Cada servicio carga además su mock-*.css.
   ========================================================================== */

/* Secciones siempre oscuras (como el inicio): llevan sus propios tonos de «imagen» */
.sv-dark {
  --tile: #fbf6ef; --tile-ink: #1f140d; --tile-muted: #5b4a3d; --tile-line: #e7d9c6; --tile-accent: #2c5aa0;
  --ok: #246a3d; --ok-bg: #e3f1e5; --wire: #eadfce;
  position: relative; background: #0d0704; color: var(--img-fg);
}
.sv-dark .eyebrow { color: var(--img-accent); }
.sv-dark h2 em, .sv-dark h1 em { color: var(--img-accent); }
.sv-dark .btn { background: #6a93d6; border-color: #6a93d6; color: #0a1220; }
@media (hover: hover) and (pointer: fine) {
  .sv-dark .btn:hover { background: var(--img-fg); border-color: var(--img-fg); color: #0a1220; }
}

/* ---------- Portada ---------- */
.sv-hero {
  isolation: isolate; overflow: hidden;
  display: grid; align-content: center; justify-items: center; gap: clamp(18px, 2.2vw, 28px); text-align: center;
  min-height: min(92svh, 820px);
  padding: calc(var(--nav-h) + clamp(40px, 9svh, 110px)) var(--gutter) clamp(56px, 9svh, 100px);
}
.sv-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(64% 56% at 50% 100%, rgba(58, 100, 178, 0.34), transparent 72%);
}
.sv-hero h1 {
  max-width: 18ch; font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance;
}
.sv-hero__lead, .sv-cta__lead { max-width: 54ch; font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--img-muted); }
.sv-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 28px; }
.sv-hero .hero__proof { justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
  .intro-on .sv-hero [data-in] { animation: none; opacity: 0; }   /* esperan a que termine la intro */
  .sv-hero [data-in] { animation: sv-in 800ms var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms); }
  @keyframes sv-in { from { opacity: 0; transform: translateY(18px); } }
}

/* ---------- Construcción ---------- */
.sv-stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  gap: clamp(32px, 5vw, 96px);
  padding: clamp(72px, 9vw, 128px) var(--gutter);
}
.sv-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(52% 60% at 72% 54%, rgba(58, 100, 178, 0.26), transparent 72%);
}
.sv-copy { display: grid; gap: 20px; justify-items: start; }
.sv-copy h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }

/* Pasos: línea que se rellena y paso activo; los demás se atenúan */
.sv-steps { position: relative; padding-left: 28px; margin-top: 12px; width: 100%; }
.sv-steps__track, .sv-steps__fill { position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; }
.sv-steps__track { background: rgba(248, 238, 226, 0.18); }
.sv-steps__fill { background: var(--img-accent); transform-origin: 50% 0; }
.sv-steps ol { display: grid; gap: clamp(14px, 2.4svh, 26px); }
.sv-steps li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 16px; transition: opacity 350ms var(--ease); }
.sv-steps li > span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--img-accent); font-variant-numeric: tabular-nums; }
.sv-steps h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.sv-steps__more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 380ms var(--ease), opacity 300ms; }
.sv-steps__more p { min-height: 0; overflow: hidden; max-width: 40ch; padding-top: 8px; color: var(--img-muted); font-size: 0.98rem; line-height: 1.55; }
.js-build .sv-steps li:not(.is-active) { opacity: 0.55; }
.js-build .sv-steps li:not(.is-active) .sv-steps__more { grid-template-rows: 0fr; opacity: 0; }

/* Pantalla fija: el escenario ocupa justo una pantalla */
.js-build .sv-stage {
  height: 100svh; padding-block: calc(var(--nav-h) + 12px) 20px;
}

/* ---------- Ilustración ---------- */
.sv-scene { display: grid; place-items: center; min-width: 0; }
.sv-mock {
  --avail: calc(100svh - var(--nav-h) - 32px);
  position: relative; container-type: inline-size;
  width: min(100%, 760px, calc(var(--avail) * 1.136)); aspect-ratio: 5 / 4.4;
}


/* Ventana genérica de las ilustraciones (SEO, IA y flotas); la web usa su propio navegador */
.mk-win {
  position: absolute; overflow: hidden; container-type: inline-size;
  background: var(--tile); color: var(--tile-ink);
  border: 1px solid rgba(255, 232, 205, 0.5); border-radius: 12px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.mk-win__bar { display: flex; align-items: center; gap: 1.6cqw; height: 9cqw; padding: 0 3.6cqw; background: #f1e8db; border-bottom: 1px solid var(--tile-line); font-size: 3cqw; color: var(--tile-muted); }
.mk-win__bar i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #d3c2ab; }
.mk-win__bar span { margin-left: 2cqw; padding: 0.8cqw 3cqw; background: #fff; border-radius: 99px; }
.mk-win__bar em { margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 0.8cqw 2.6cqw; border-radius: 99px; background: var(--ok-bg); color: var(--ok); font-weight: 500; }
.mk-win__bar em b { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: currentColor; }
/* Tarjeta oscura flotante (mediciones, gráfica, localización...) */
.mk-glass {
  position: absolute; container-type: inline-size; padding: 4cqw 4.4cqw 4.6cqw;
  background: rgba(27, 18, 12, 0.88); color: var(--img-fg);
  border: 1px solid rgba(248, 238, 226, 0.16); border-radius: 16px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mk-glass > p { margin: 0 0 3cqw; font-family: var(--font-mono); font-size: max(0.75rem, 2.8cqw); letter-spacing: 0.1em; text-transform: uppercase; color: var(--img-muted); }
/* Chips de estado: pendiente / correcto (se superponen y se cruzan) */
.mk-st { position: relative; display: inline-grid; font-style: normal; font-size: 2.8cqw; font-weight: 500; white-space: nowrap; }
.mk-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 1cqw; padding: 0.8cqw 2.4cqw; border-radius: 99px; }
.mk-st .wait { background: #f6e8c9; color: #8a5a12; opacity: 0; }
.mk-st .ok { background: var(--ok-bg); color: var(--ok); }
.mk-st svg { width: 3cqw; height: 3cqw; }

/* ---------- Qué incluye ---------- */
.sv-inc { padding: clamp(96px, 12vw, 176px) var(--gutter) 0; background: var(--bg); }
.sv-inc__head { display: grid; gap: 22px; justify-items: start; max-width: 1360px; margin: 0 auto clamp(40px, 5vw, 72px); }
.sv-inc__lead { max-width: 46ch; color: var(--muted); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.sv-list { display: grid; gap: 0 clamp(32px, 4vw, 64px); max-width: 1360px; margin-inline: auto; }
@media (min-width: 720px) { .sv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-list li { display: grid; align-content: start; gap: 12px; padding: 28px 0 40px; border-top: 1px solid var(--line); }
.sv-list li > span { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.sv-list h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
.sv-list p { color: var(--muted); font-size: 0.98rem; line-height: 1.55; max-width: 38ch; }

/* ---------- Llamada a la acción ---------- */
.sv-cta {
  isolation: isolate; overflow: hidden; margin-top: clamp(80px, 10vw, 150px);
  display: grid; justify-items: center; gap: 22px; text-align: center;
  padding: clamp(96px, 13vw, 190px) var(--gutter);
}
.sv-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 100%, rgba(58, 100, 178, 0.36), transparent 72%);
}
.sv-cta h2 { max-width: 16ch; font-size: clamp(2.6rem, 6vw, 5rem); }

/* ---------- Titulares: aparición suave (la activa web.js; sin JS se ve todo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .h-fade { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
  .js .h-fade.is-in { opacity: 1; transform: none; }
}

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .sv-stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sv-copy { gap: 12px; }
  .sv-copy h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .sv-scene { justify-self: center; width: 100%; }
  .sv-steps { margin-top: 4px; }
  .sv-steps ol { gap: 10px; }
  .sv-steps h3 { font-size: 1.125rem; }
  .sv-steps__more p { font-size: 0.9rem; padding-top: 4px; }
  .js-build .sv-stage { grid-template-rows: auto minmax(0, 1fr); align-items: start; }
  .js-build .sv-copy .eyebrow { display: none; }
  .js-build .sv-scene { height: 100%; align-items: center; }
  .sv-mock { --avail: calc(100svh - var(--nav-h) - 330px); width: min(100%, calc(var(--avail) * 1.02)); aspect-ratio: 5 / 4.9; }
}
@media (max-width: 860px) and (max-height: 700px) { .sv-mock { --avail: calc(100svh - var(--nav-h) - 300px); } }

/* ==========================================================================
   INTRO: el portátil se abre solo, el cursor pulsa el panel del servicio y se entra en la página
   (la construye js/intro.js; solo existe con movimiento y JavaScript)
   ========================================================================== */
html.intro-on { overflow: hidden; }
.hero.intro { position: fixed; inset: 0; z-index: 300; display: none; overflow: hidden; background: #0d0704; }
.intro-on .hero.intro { display: block; }
.intro__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 50% 62%, rgba(58, 100, 178, 0.32), transparent 72%); }
.intro__cam { position: absolute; inset: 0; display: grid; place-items: center; }
.intro .mac { --mw: min(86vw, 1180px, calc((100svh - 80px) * 1.42)); opacity: 0; }
@media (max-width: 767px) { .intro .mac { --mw: min(94vw, 520px); } }
.intro__cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 36px; height: 42px; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); }
.intro__ripple { position: absolute; left: 0; top: 0; z-index: 19; width: 64px; height: 64px; margin: -30px 0 0 -30px; border: 2px solid #7ea3e6; border-radius: 50%; opacity: 0; pointer-events: none; }
.intro__skip {
  position: absolute; z-index: 10; right: var(--gutter); top: calc(20px + env(safe-area-inset-top, 0px));
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: rgba(248, 238, 226, 0.08); color: var(--img-muted); border: 1px solid rgba(248, 238, 226, 0.2); border-radius: 99px;
  font-size: 0.85rem; cursor: pointer; opacity: 0; transition: color 200ms, background-color 200ms, scale 160ms var(--ease);
}
.intro__skip:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) { .intro__skip:hover { color: var(--img-fg); background: rgba(248, 238, 226, 0.16); } }