/* ============================================================
   agency — hero
   ============================================================ */
:root {
  --brand-blue: #2f55ec;       /* primary brand — royal blue (UI, links, CTAs) */
  --brand-blue-dark: #2746d6;
  --brand-blue-tint: rgba(47, 85, 236, 0.10);   /* soft chip / icon background */
  --brand-accent: #059669;     /* secondary accent — emerald (growth highlight) */
  --brand-accent-bright: #2bd49a;  /* luminous emerald for dark backgrounds (hero) */
  --brand-accent-tint: rgba(5, 150, 105, 0.10); /* soft chip / icon background */
  --ink: #161a22;              /* near-black headings */
  --ink-soft: #5b6472;         /* body / muted */
  --eyebrow: #9aa3b2;
  --line: #e6e8ef;
  --bg: #ffffff;
  --card-shadow: 0 18px 40px -18px rgba(20, 30, 60, 0.28);
  --avatar-shadow: 0 10px 24px -8px rgba(22, 32, 64, 0.35);
  --pin: #b9c4dc;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --nav-h: 88px;               /* nav bar height — shrinks on mobile */

  /* Night-sky fill for the "vorseo" wordmark when it renders dark (topbar after
     scroll, mobile drawer, footer). Built from three masked layers so the mark
     reads as a living patch of deep space instead of a flat dotted panel:
       1. --sky-base   — static deep-space gradient + a faint brand-blue nebula
       2. --star-layer — small, widely-spaced stars that slowly drift + shimmer
                         (painted on ::before, see the .brand__logo rules below)
       3. a cursor-origin "estrella" burst on hover (painted on ::after)
     Stars are deliberately tiny (0.6–1px) and sparse, tiled across a 176px band
     so they never visibly repeat inside the ~116px mark and one tile of drift
     loops seamlessly. */
  --sky-base:
    radial-gradient(100px 46px at 46% -20%, rgba(64, 108, 255, 0.22), transparent 72%),
    linear-gradient(178deg, #0a0f2b 0%, #05060f 58%, #04040a 100%);
  --star-layer:
    radial-gradient(0.9px 0.9px at 8px 6px,    #ffffff 0, #ffffff 55%, transparent 100%),
    radial-gradient(0.6px 0.6px at 30px 16px,  #cfe0ff 0, #cfe0ff 55%, transparent 100%),
    radial-gradient(0.8px 0.8px at 52px 4px,   #eaf0ff 0, #eaf0ff 55%, transparent 100%),
    radial-gradient(0.6px 0.6px at 71px 19px,  #bcd4ff 0, #bcd4ff 55%, transparent 100%),
    radial-gradient(1px 1px     at 92px 10px,  #ffffff 0, #ffffff 55%, transparent 100%),
    radial-gradient(0.6px 0.6px at 112px 3px,  #dfe8ff 0, #dfe8ff 55%, transparent 100%),
    radial-gradient(0.8px 0.8px at 132px 15px, #ffffff 0, #ffffff 55%, transparent 100%),
    radial-gradient(0.6px 0.6px at 150px 8px,  #cfe0ff 0, #cfe0ff 55%, transparent 100%),
    radial-gradient(0.9px 0.9px at 168px 18px, #ffffff 0, #ffffff 55%, transparent 100%);
  --star-layer-size: 176px 24px;   /* every star layer shares one tile */
}

/* Smoothly interpolatable driers for the hover "estrella" burst (see below):
   --v-burst is the expanding ring's radius; --v-core is the cursor flash's
   intensity, faded independently so the spark blinks out while the wave rides on. */
@property --v-core {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --v-burst {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

* { box-sizing: border-box; }

/* smooth in-page jumps (e.g. nav "Precios" → #precios); off under reduced motion */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Hide scrollbars everywhere (scrolling still works). */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* old Edge/IE */
}
/* Guard against any element pushing a horizontal scroll on small screens. */
body { overflow-x: hidden; }
/* Kill the grey tap flash on iOS/Android for a native-app feel. */
a, button { -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome/Safari */

a { color: inherit; text-decoration: none; }

/* ===================== NAV ===================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav.is-scrolled {
  backdrop-filter: saturate(1.2) blur(8px);
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--line);
}

/* Over the dark hero (before scroll) the nav type goes light. */
.nav:not(.is-scrolled) .brand { color: #fff; }
.nav:not(.is-scrolled) .nav__links a { color: rgba(232, 237, 248, 0.78); }
.nav:not(.is-scrolled) .nav__links a:hover { color: #fff; }
.nav:not(.is-scrolled) .nav__signin { color: #fff; }
.nav:not(.is-scrolled) .nav__signin:hover { color: #c7d2ff; }
.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* On desktop the drawer wrapper is transparent: its children (links + actions)
   flow as normal flex items of the bar. It only becomes a panel on mobile. */
.nav__drawer { display: contents; }
/* Hamburger + scrim exist only on mobile (shown via the responsive block). */
.nav__toggle { display: none; }
.nav__scrim { display: none; }
/* Lead group = hamburger + wordmark. On desktop the toggle is hidden so this
   reads as just the brand; on mobile the hamburger sits to the brand's left. */
.nav__lead { display: inline-flex; align-items: center; gap: 10px; }

/* Mobile-only top-bar actions (quick login + primary CTA). Hidden on desktop,
   where the equivalents live inside nav__actions at the right of the bar. */
.nav__bar-actions { display: none; }

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
/* The "vorseo" wordmark (logo.svg, orbital ring removed) recolored via
   currentColor — white over the dark hero, ink after scroll / on mobile. */
.brand__logo {
  display: block;
  height: 20px;
  aspect-ratio: 5.827 / 1;
  background: currentColor;
  -webkit-mask: url("../logo.svg") left center / contain no-repeat;
  mask: url("../logo.svg") left center / contain no-repeat;
}
/* When the wordmark renders dark (topbar after scroll, mobile drawer, footer)
   fill it with the static deep-space base; the drifting stars live on ::before
   and the cursor-origin "estrella" burst on ::after — all masked to the same
   letterforms so the whole effect stays inside "vorseo". */
.nav.is-scrolled .brand__logo,
body.nav-open .nav .brand__logo,
.ftr-brand__mark {
  position: relative;
  background: var(--sky-base);
  background-repeat: no-repeat;
}

/* ---- Layer 2: drifting + shimmering starfield ----
   The star tile drifts one full tile (176px) then loops seamlessly, while a
   slow global shimmer breathes the brightness — together with stars crossing
   the letter edges as they drift, the field reads as a live, twinkling sky. */
.nav.is-scrolled .brand__logo::before,
body.nav-open .nav .brand__logo::before,
.ftr-brand__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--star-layer);
  background-size: var(--star-layer-size);
  background-repeat: repeat-x;
  -webkit-mask: url("../logo.svg") left center / contain no-repeat;
  mask: url("../logo.svg") left center / contain no-repeat;
  animation: brand-star-drift 64s linear infinite,
             brand-star-shimmer 5.5s ease-in-out infinite;
}
@keyframes brand-star-drift {
  from { background-position: 0 0; }
  to   { background-position: -176px 0; }
}
@keyframes brand-star-shimmer {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ---- Layer 3: "estrella" burst that radiates from the cursor on hover ----
   main.js sets --mx/--my to the pointer position (as % of the mark) the moment
   it enters; on hover a bright core flashes at that point and a luminous ring
   (radius = --v-burst) expands outward through the letters, then fades. Idle at
   opacity 0 and armed only in the dark states, so it never fires over the white
   hero logo. Shared by the topbar + footer marks. */
.nav.is-scrolled .brand__logo::after,
body.nav-open .nav .brand__logo::after,
.ftr-brand__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --v-burst: 0%;
  --v-core: 0;
  background:
    /* 1 · sparkle rays — a crisp 4-point twinkle at the very origin (faint) */
    radial-gradient(11px 0.6px at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, calc(var(--v-core) * 0.4)) 0, transparent 80%),
    radial-gradient(0.6px 8px at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, calc(var(--v-core) * 0.4)) 0, transparent 80%),
    /* 2 · soft core flash pinned at the cursor (dimmed) */
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, calc(var(--v-core) * 0.6)) 0,
      rgba(206, 228, 255, calc(var(--v-core) * 0.28)) 9%,
      transparent 20%),
    /* 3 · expanding wavefront — soft leading edge, brand-blue trailing glow */
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
      transparent              calc(var(--v-burst) - 32%),
      rgba(96, 150, 255, 0)    calc(var(--v-burst) - 18%),
      rgba(150, 190, 255, 0.18) calc(var(--v-burst) - 8%),
      rgba(214, 232, 255, 0.42) calc(var(--v-burst) - 2%),
      rgba(240, 246, 255, 0.6)  var(--v-burst),
      rgba(200, 224, 255, 0.26) calc(var(--v-burst) + 3%),
      transparent              calc(var(--v-burst) + 13%)),
    /* 4 · soft bloom that swells with the flash then recedes (faint) */
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
      rgba(120, 165, 255, calc(var(--v-core) * 0.16)) 0,
      rgba(120, 165, 255, calc(var(--v-core) * 0.05)) 34%,
      transparent 62%);
  background-repeat: no-repeat;
  -webkit-mask: url("../logo.svg") left center / contain no-repeat;
  mask: url("../logo.svg") left center / contain no-repeat;
  opacity: 0;
}
@keyframes brand-star-burst {
  0%   { --v-core: 0; --v-burst: 6%;  opacity: 0; }
  10%  { --v-core: 1;                 opacity: 0.7; }
  42%  { --v-core: 0; }
  65%  { opacity: 0.55; }
  100% { --v-burst: 150%;             opacity: 0; }
}
/* Triggered by the .is-bursting class (added in main.js on pointer-enter and
   cleared on animationend) — NOT :hover — so a single flick over the wordmark
   always plays through to the end even if the cursor has already left. */
.nav.is-scrolled .brand__logo.is-bursting::after,
body.nav-open .nav .brand__logo.is-bursting::after,
.ftr-brand__mark.is-bursting::after {
  animation: brand-star-burst 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .nav.is-scrolled .brand__logo::before,
  body.nav-open .nav .brand__logo::before,
  .ftr-brand__mark::before { animation: none; }
  .nav.is-scrolled .brand__logo.is-bursting::after,
  body.nav-open .nav .brand__logo.is-bursting::after,
  .ftr-brand__mark.is-bursting::after { animation: none; }
}

/* ===================== BARRA "CIELO VORSEO" (.skybar) =====================
   Cabecera compartida por TODAS las ventanas de producto de ejemplo (Tu Space
   en /visibility, /web, /growth y #gestor): un solo cielo para toda la marca.
   Base de espacio profundo + dos capas de estrellas (el tile del wordmark) que
   se desplazan a velocidades distintas con el scroll — main.js pilota --sky-p
   (posición de la barra en el viewport, -1 arriba … 1 abajo) y cada capa lleva
   su multiplicador, de ahí la profundidad. Título en dos pesos (marca clara +
   negocio apagado), sin iconos; la etiqueta de ejemplo, en píldora de contorno
   a la derecha. El redondeo lo pone cada ventana (o su marco con overflow). */
.skybar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 16px;
  overflow: hidden;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  background:
    radial-gradient(140px 52px at 18% -24%, rgba(64, 108, 255, 0.3), transparent 72%),
    linear-gradient(178deg, #0a0f2b 0%, #05060f 100%);
}
.skybar::before,
.skybar::after {
  content: "";
  position: absolute;
  inset: -12px 0;               /* margen para que el parallax nunca deje borde vacío */
  pointer-events: none;
  background: var(--star-layer);
  will-change: transform;
}
/* capa lejana: tile encogido (estrellas más finas y densas), tenue, casi quieta */
.skybar::before {
  opacity: 0.4;
  background-size: 132px 18px;
  transform: translate3d(0, calc(var(--sky-p, 0) * 3px), 0);
}
/* capa cercana: tile de marca a tamaño real, brillante, la que más viaja;
   respira con el shimmer del wordmark */
.skybar::after {
  background-size: var(--star-layer-size);
  background-position: 60px 9px;
  transform: translate3d(0, calc(var(--sky-p, 0) * 9px), 0);
  animation: brand-star-shimmer 5.5s ease-in-out infinite;
}
.skybar > * { position: relative; z-index: 1; }
.skybar__app {
  flex: none;
  font-weight: 600;
  color: #f2f5fe;
  white-space: nowrap;
}
.skybar__biz {
  min-width: 0;                 /* en pantallas estrechas el negocio se recorta con … */
  overflow: hidden;
  font-weight: 500;
  color: #93a3cf;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.skybar__biz::before { content: "·"; margin-right: 8px; color: #55628f; }
.skybar__badge {
  flex: none;
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid rgba(163, 180, 224, 0.26);
  border-radius: 999px;
  background: rgba(13, 20, 48, 0.4);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b7c4e6;
}
@media (prefers-reduced-motion: reduce) {
  .skybar::after { animation: none; }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--ink); }
.caret { width: 10px; height: 6px; opacity: 0.55; transition: transform .2s ease; }
.nav__links a:hover .caret { transform: translateY(1px); opacity: 0.8; }

/* ===================== NAV MEGA-MENU (dropdowns) ===================== */
.nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__item.is-open > .has-menu { color: var(--ink); }
.nav__item.is-open > .has-menu .caret { transform: rotate(180deg); opacity: 0.85; }

.nav__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  width: 560px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
/* transparent bridge so hover stays contiguous across the visual gap */
.nav__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav__item.is-open > .nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Entradas del nav sin destino real todavía: visibles pero apagadas */
.nav__links a[aria-disabled="true"],
.ftr-col__list a[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.nav__panel a[aria-disabled="true"] { filter: grayscale(1); }

.nav__panel .nav__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink);
  transition: background .15s ease;
}
.nav__panel .nav__row:hover { background: rgba(47, 85, 236, 0.05); }

.nav__panel .nav__row-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
}
/* Colour code: blue = Plataforma (what the app does itself),
   green = Soluciones (services you contract/pay for). */
#nav-panel-soluciones .nav__row-icon {
  color: var(--brand-accent);
  background: var(--brand-accent-tint);
}
.nav__panel .nav__row-icon svg { width: 18px; height: 18px; }

.nav__panel .nav__row-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.nav__panel .nav__row-title {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nav__panel .nav__row-sub {
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Featured CTA strip — spans both columns at the foot of the Soluciones menu */
#nav-panel-soluciones .nav__cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--brand-accent-tint);
  border: 1px solid rgba(5, 150, 105, 0.18);
  transition: background .15s ease, border-color .15s ease;
}
#nav-panel-soluciones .nav__cta:hover {
  background: rgba(5, 150, 105, 0.14);
  border-color: rgba(5, 150, 105, 0.30);
}
.nav__cta-text { display: flex; flex-direction: column; line-height: 1.3; }
.nav__cta-title {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nav__cta-sub {
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.nav__cta-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--brand-accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  box-shadow: 0 12px 22px -12px rgba(5, 150, 105, 0.7);
  transition: transform .18s ease, box-shadow .25s ease;
}
#nav-panel-soluciones .nav__cta:hover .nav__cta-btn {
  transform: translateY(-1px);
  box-shadow: 0 16px 26px -12px rgba(5, 150, 105, 0.7);
}
.nav__cta-btn svg { width: 16px; height: 16px; }

/* ---- Rebuilt mega-menus: per-panel identity ----------------------
   Plataforma (azul) = el producto: tile destacado arriba + 2 columnas.
   Soluciones (verde) = los servicios: 2 columnas por objetivo + CTA al pie.
   Same dropdown shell, distinct order / colour / content.            */

/* Comfortable per-panel grid rhythm (columns sit side by side) */
.nav__panel--plataforma,
.nav__panel--soluciones { gap: 8px 14px; align-content: start; }

/* Column wrapper: groups a label + its own rows */
.nav__panel .nav__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Section label heading each column (tinted per panel) */
.nav__group-label {
  margin: 2px 0 5px;
  padding: 0 12px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__panel--plataforma .nav__group-label { color: var(--brand-blue); }
.nav__panel--soluciones .nav__group-label { color: var(--brand-accent); }

/* Soluciones rows hover in their own green, not the default blue */
.nav__panel--soluciones .nav__row:hover { background: rgba(5, 150, 105, 0.06); }

/* Featured tile — the Plataforma signature (full width, top) */
.nav__feature {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--brand-blue-tint);
  border: 1px solid rgba(47, 85, 236, 0.18);
  transition: background .15s ease, border-color .15s ease;
}
.nav__feature:hover {
  background: rgba(47, 85, 236, 0.14);
  border-color: rgba(47, 85, 236, 0.30);
}
.nav__feature-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand-blue);
  box-shadow: 0 10px 20px -10px rgba(47, 85, 236, 0.8);
}
.nav__feature-icon svg { width: 21px; height: 21px; }
.nav__feature-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.nav__feature-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nav__feature-sub {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.nav__feature-arrow {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand-blue);
  transition: transform .18s ease;
}
.nav__feature:hover .nav__feature-arrow { transform: translateX(3px); }

/* "Incluido" pill inside the featured title */
.nav__tag {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: #fff;
  border: 1px solid rgba(47, 85, 236, 0.25);
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.4;
}

/* ---- Recursos (violeta) — la tercera identidad: contenido + soporte.
   Mismo shell que Plataforma/Soluciones, pero anclado a la DERECHA: el
   item vive a media barra y un panel de 560px abriendo a la izquierda se
   saldría de pantalla. ---- */
.nav__panel--recursos {
  left: auto;
  right: -14px;
  gap: 8px 14px;
  align-content: start;
}
.nav__panel--recursos .nav__group-label { color: #5b4ad9; }
.nav__panel--recursos .nav__row-icon { color: #5b4ad9; background: rgba(91, 74, 217, 0.10); }
.nav__panel--recursos .nav__row:hover { background: rgba(91, 74, 217, 0.06); }

.nav__panel--recursos .nav__feature {
  background: rgba(91, 74, 217, 0.10);
  border-color: rgba(91, 74, 217, 0.18);
}
.nav__panel--recursos .nav__feature:hover {
  background: rgba(91, 74, 217, 0.15);
  border-color: rgba(91, 74, 217, 0.30);
}
.nav__panel--recursos .nav__feature-icon {
  background: #5b4ad9;
  box-shadow: 0 10px 20px -10px rgba(91, 74, 217, 0.8);
}
.nav__panel--recursos .nav__feature-arrow { color: #5b4ad9; }
.nav__panel--recursos .nav__tag { color: #5b4ad9; border-color: rgba(91, 74, 217, 0.25); }

/* CTA strip at the foot — violet variant (mirrors #nav-panel-soluciones) */
#nav-panel-recursos .nav__cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(91, 74, 217, 0.10);
  border: 1px solid rgba(91, 74, 217, 0.18);
  transition: background .15s ease, border-color .15s ease;
}
#nav-panel-recursos .nav__cta:hover {
  background: rgba(91, 74, 217, 0.15);
  border-color: rgba(91, 74, 217, 0.30);
}
#nav-panel-recursos .nav__cta-btn {
  background: #5b4ad9;
  box-shadow: 0 12px 22px -12px rgba(91, 74, 217, 0.7);
}
#nav-panel-recursos .nav__cta:hover .nav__cta-btn {
  transform: translateY(-1px);
  box-shadow: 0 16px 26px -12px rgba(91, 74, 217, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .nav__panel { transition: opacity .12s ease, visibility .12s; transform: none; }
  .nav__item.is-open > .nav__panel { transform: none; }
}

/* Right-side actions: text sign-in + primary CTA */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav__signin {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  transition: color .2s ease;
}
.nav__signin:hover { color: var(--brand-blue); }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  padding: 12px 22px;
  border-radius: 11px;            /* rounded rectangle, not a pill */
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn--sm { padding: 9px 18px; font-size: 0.85rem; }

.btn--primary {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 12px 22px -10px rgba(47, 85, 236, 0.7);
}
.btn--primary:hover { background: var(--brand-blue-dark); transform: translateY(-2px); box-shadow: 0 18px 28px -10px rgba(47, 85, 236, 0.7); }

.btn--secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.btn--secondary:hover { transform: translateY(-2px); border-color: #d3d8e4; box-shadow: 0 12px 26px -16px rgba(20, 30, 60, 0.4); }

.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); border-radius: 999px; }
.btn--ghost:hover { border-color: #d3d8e4; }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  /* more air on top → the headline sits optically centred in the upper zone,
     a touch lower than the nav without crowding the globe below. */
  padding: clamp(140px, 16vh, 178px) 24px 0;
  isolation: isolate;
  /* Deep space: near-black sky with a soft blue horizon glow behind the
     Earth at the bottom. The page turns white again below the hero. */
  background:
    radial-gradient(90% 55% at 50% 112%, rgba(54, 92, 170, 0.32) 0%, rgba(8, 12, 26, 0) 60%),
    linear-gradient(180deg, #04050c 0%, #06080f 46%, #080b16 100%);
}

/* Soft seam into the next section: the hero's lower edge (sky + the planet's
   dissolving underside) fades gradually to #030509 — the exact background of
   the .plataforma section — so the two never meet in a hard horizontal line.
   Sits above the sky/globe (z1) but below the opaque planet body (canvas z2),
   so the planet's masked lower edge blends *through* this fade instead of
   being flatly painted over. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(180px, 34vh, 420px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(3, 5, 9, 0) 0%,
    rgba(3, 5, 9, 0.28) 42%,
    rgba(3, 5, 9, 0.72) 78%,
    #030509 100%
  );
}

/* Twinkling starfield canvas (painted in main.js), behind the globe. */
.hero__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* Soft nebula clouds behind the stars — cosmic colour + parallax depth. */
.hero__neb {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Nebulosas del hero: MUY discretas y en deriva lenta por el fondo.
   La deriva anima la propiedad `translate` (independiente), que se COMBINA con
   el `transform` que escribe el parallax de scroll en JS — no compiten. */
.hero__neb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform, translate;
}
.hero__neb-blob--a {          /* brand blue, upper-left */
  top: -8%; left: -6%;
  width: 48vw; height: 48vw;
  max-width: 640px; max-height: 640px;
  opacity: 0.22;
  background: radial-gradient(circle, rgba(47, 85, 236, 0.45) 0%, transparent 68%);
  animation: neb-drift-a 47s ease-in-out -12s infinite alternate;
}
.hero__neb-blob--b {          /* violet, upper-right */
  top: -2%; right: -10%;
  width: 42vw; height: 42vw;
  max-width: 560px; max-height: 560px;
  opacity: 0.16;
  background: radial-gradient(circle, rgba(122, 92, 240, 0.4) 0%, transparent 66%);
  animation: neb-drift-b 59s ease-in-out -31s infinite alternate;
}
.hero__neb-blob--c {          /* cool cyan, mid sky */
  top: 26%; left: 38%;
  width: 34vw; height: 34vw;
  max-width: 460px; max-height: 460px;
  opacity: 0.14;
  background: radial-gradient(circle, rgba(38, 156, 210, 0.34) 0%, transparent 66%);
  animation: neb-drift-c 53s ease-in-out -22s infinite alternate;
}
/* Deriva "random" por TODO el hero: waypoints asimétricos y duraciones primas
   distintas por blob (47s/59s/53s) + delays negativos — nunca se sincronizan ni
   se nota el bucle. El hero tiene overflow:hidden, así que pueden viajar lejos. */
@keyframes neb-drift-a {
  0%   { translate: 0 0; scale: 1; }
  18%  { translate: 34vw 22vh; scale: 1.14; }
  41%  { translate: 61vw 6vh; scale: 0.88; }
  63%  { translate: 42vw 44vh; scale: 1.08; }
  82%  { translate: 12vw 28vh; scale: 0.94; }
  100% { translate: 3vw 5vh; scale: 1.04; }
}
@keyframes neb-drift-b {
  0%   { translate: 0 0; scale: 1; }
  21%  { translate: -40vw 14vh; scale: 0.9; }
  44%  { translate: -18vw 38vh; scale: 1.12; }
  67%  { translate: -58vw 20vh; scale: 0.95; }
  85%  { translate: -30vw -4vh; scale: 1.06; }
  100% { translate: -8vw 8vh; scale: 0.98; }
}
@keyframes neb-drift-c {
  0%   { translate: 0 0; scale: 1; }
  24%  { translate: -26vw -12vh; scale: 1.1; }
  47%  { translate: 20vw 16vh; scale: 0.9; }
  71%  { translate: -12vw 26vh; scale: 1.05; }
  100% { translate: 8vw -6vh; scale: 0.96; }
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  will-change: transform, opacity;
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--eyebrow);
}

.hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.9vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.hero__title .line-1,
.hero__title .line-2 { display: block; }
.hero__title .line-1 { color: var(--ink); }
.hero__title .line-2 { color: var(--brand-accent); }

.hero__subtitle {
  margin: 18px auto 0;
  max-width: 660px;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-soft);
}

.hero__actions {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Soft "not sure where to start?" nudge under the hero CTAs ---- */
.hero__help {
  margin-top: 16px;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(226, 232, 244, 0.6);
}
.hero__help-link {
  color: var(--brand-accent-bright);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.hero__help-link:hover {
  border-bottom-color: currentColor;
  opacity: 0.9;
}
.hero__help-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.hero__help-link:hover .hero__help-arrow {
  transform: translateX(3px);
}

/* ---- Dark-sky hero: lift the type so it reads on the black background ---- */
.hero .eyebrow { color: #93a3c4; }
.hero__title .line-1 { color: #f4f7fc; }
/* Brighter emerald so the accent stays vivid (not muddy) against near-black. */
.hero__title .line-2 { color: var(--brand-accent-bright); }
.hero__subtitle { color: rgba(226, 232, 244, 0.74); }


/* ===================== TEAM CARDS (arc) ===================== */
.team {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52vh;
  min-height: 340px;
  z-index: 4;
  pointer-events: none;
}

/* Each tag = a small card (icon + label + sub) describing what the agency
   does, floating in an arc that follows the globe's curvature.
   .tag is only the positioner (and the surface the scroll-launch transform is
   written to in main.js); the visible white face lives on .tag__inner. */
.tag {
  position: absolute;
  left: var(--x);
  bottom: var(--b);
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: auto;
}

/* The card face — a plain white chip. It carries the faint idle bob (floaty);
   keeping it on this child means the parent's scroll-launch transform and this
   bob never fight over `transform`. */
.tag__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 9px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  /* neutral drop shadow so the white card lifts cleanly off the dark globe */
  box-shadow: 0 18px 36px -18px rgba(16, 24, 48, 0.55),
              0 2px 8px -5px rgba(16, 24, 48, 0.4);
  backdrop-filter: blur(6px);
  animation: floaty var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}
.tag__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
}
/* All hero tags stay blue — green is reserved for paid services (Soluciones). */
.tag__icon svg { width: 18px; height: 18px; }
.tag__t {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.tag__label {
  font-weight: 700;
  font-size: 0.83rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tag__sub {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 1px;
}

/* Faint idle bob in the hero — the cards' only in-place motion (the drama is
   reserved for the scroll launch). Lives on .tag__inner, so no translateX. */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ===================== GLOBE ===================== */
.globe {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 78vh;
  min-height: 460px;
  z-index: 1;
  pointer-events: none;
}
.globe__glow { display: none; }   /* no blue halo */
#globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  /* Gradient applied to the planet itself: its lower edge dissolves into the
     dark sky instead of being washed out by a white overlay. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 99%);
}

/* ===================== PARALLAX DECOR ORBS =====================
   Soft brand-tinted glows that drift on scroll (via [data-parallax] in
   main.js) to give the light sections a little living depth. Kept faint so
   they read as premium atmosphere, never clutter. They sit behind content
   (section __inner is lifted to z-index:1) and are clipped by the section. */
.px-orb {
  position: absolute;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  max-width: 540px;
  max-height: 540px;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.55;
  pointer-events: none;
  will-change: transform;
}
.px-orb--blue    { background: radial-gradient(circle, rgba(47, 85, 236, 0.16) 0%, transparent 70%); }
.px-orb--emerald { background: radial-gradient(circle, rgba(5, 150, 105, 0.14) 0%, transparent 70%); }
.px-orb--tl { top: -9%;  left: -7%; }
.px-orb--tr { top: -11%; right: -7%; }
.px-orb--br { bottom: -11%; right: -5%; }
.px-orb--bl { bottom: -9%;  left: -7%; }

/* keep decor behind the content + contained within each host section */
.what, .how, .prc { overflow: hidden; }
.what__inner, .how__inner, .prc__inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__neb-blob, .px-orb { display: none; }   /* no drifting decor when motion is reduced */
}

/* ===================== GUIDE WIZARD (modal) ===================== */
.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;                 /* above the nav (40) and its panels (60) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 20, 32, 0.46);
  backdrop-filter: blur(6px) saturate(1.1);
  opacity: 0;
  transition: opacity .2s ease;
}
.guide-overlay.is-active { opacity: 1; }
.guide-overlay[hidden] { display: none; }
body.guide-open { overflow: hidden; }

.guide {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 40px 90px -30px rgba(16, 22, 48, 0.55);
  padding: 30px 30px 26px;
  transform: translateY(10px) scale(0.985);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.guide-overlay.is-active .guide { transform: translateY(0) scale(1); }

.guide__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.guide__close:hover { background: rgba(22, 26, 34, 0.05); color: var(--ink); }
.guide__close svg { width: 18px; height: 18px; }
.guide__close:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

.guide__head { padding-right: 36px; }
.guide__eyebrow {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.guide__title {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.guide__lead {
  margin: 7px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* progress */
.guide__progress {
  margin: 20px 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.guide__dots { display: flex; gap: 7px; }
.guide__dot {
  width: 26px;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  transition: background .2s ease, width .2s ease;
}
.guide__dot.is-active { background: var(--brand-blue); }
.guide__dot.is-done { background: rgba(47, 85, 236, 0.4); }
.guide__step-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--eyebrow);
  white-space: nowrap;
}

/* steps */
.guide__form { margin-top: 18px; }
.guide__step {
  border: 0;
  margin: 0;
  padding: 0;
  min-block-size: 132px;        /* steadier height so the footer doesn't jump */
}
.guide__step:not(.is-current) { display: none; }
.guide__q {
  padding: 0;
  margin: 0 0 14px;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.guide__hint {
  margin: -8px 0 14px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.guide__field { display: flex; flex-direction: column; gap: 7px; }
.guide__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.guide__select,
.guide__input {
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.guide__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6472' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.guide__select:focus,
.guide__input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(47, 85, 236, 0.14);
}
.guide__url { margin-top: 14px; }
.guide__url[hidden] { display: none; }
.guide__contact-detail { margin-top: 14px; }
.guide__contact-detail[hidden] { display: none; }

/* location typeahead — up to 3 click-to-fill suggestions */
.guide__field--suggest { position: relative; }
.guide__suggest {
  list-style: none;
  margin: 7px 0 0;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 30px -18px rgba(16, 22, 48, 0.45);
}
.guide__suggest[hidden] { display: none; }
.guide__suggest-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  transition: background .12s ease;
}
.guide__suggest-opt:hover,
.guide__suggest-opt.is-active {
  background: rgba(47, 85, 236, 0.08);
}
.guide__suggest-opt svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--brand-blue);
}
.guide__suggest-opt b { font-weight: 700; }
.guide__suggest-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.guide__suggest-text > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guide__suggest-text small {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* chips (multi & single select) */
.guide__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.guide-chip {
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.guide-chip:hover { border-color: #cfd5e4; }
.guide-chip--lg { padding: 11px 20px; font-size: 0.9rem; }
.guide-chip[aria-pressed="true"],
.guide-chip[aria-checked="true"] {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
  background: rgba(47, 85, 236, 0.08);
  box-shadow: inset 0 0 0 1px var(--brand-blue);
}
.guide-chip:focus-visible,
.guide-toggle__opt:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* yes / no toggle */
.guide__toggle {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: #f4f6fb;
  border: 1px solid var(--line);
  border-radius: 13px;
}
.guide-toggle__opt {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 9px 28px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.guide-toggle__opt[aria-checked="true"] {
  color: var(--brand-blue);
  background: #fff;
  box-shadow: 0 4px 12px -6px rgba(20, 30, 60, 0.35);
}

/* footer */
.guide__foot {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.guide__foot .guide__next { margin-left: auto; }
.guide__next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* final screen */
.guide__done { text-align: center; padding: 8px 4px 4px; }
.guide__done[hidden] { display: none; }
.guide__done-badge {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 6px auto 18px;
  border-radius: 50%;
  color: var(--brand-blue);
  background: rgba(47, 85, 236, 0.10);
}
.guide__done-badge svg { width: 28px; height: 28px; }
.guide__done-title {
  margin: 0;
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.guide__done-lead {
  margin: 10px auto 0;
  max-width: 340px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand-blue);
}
.guide__done-text {
  margin: 10px auto 0;
  max-width: 360px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.guide__done-close { margin-top: 22px; }

@media (max-width: 480px) {
  .guide { padding: 26px 20px 22px; }
  .guide__dot { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-overlay, .guide { transition: opacity .15s ease; }
  .guide { transform: none; }
  .guide-overlay.is-active .guide { transform: none; }
}

/* ===================== SHARED MODALS (auth + contact) ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;                 /* above the nav (40) and its panels (60) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 20, 32, 0.46);
  backdrop-filter: blur(6px) saturate(1.1);
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-overlay.is-active { opacity: 1; }
.modal-overlay[hidden] { display: none; }
body.modal-open { overflow: hidden; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 40px 90px -30px rgba(16, 22, 48, 0.55);
  padding: 30px 30px 26px;
  transform: translateY(10px) scale(0.985);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.modal-overlay.is-active .modal-card { transform: translateY(0) scale(1); }
.modal-card.contact { max-width: 560px; }

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.modal-close:hover { background: rgba(22, 26, 34, 0.05); color: var(--ink); }
.modal-close svg { width: 18px; height: 18px; }
.modal-close:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

.modal-head { padding-right: 36px; }
.modal-eyebrow {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.modal-title {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.modal-lead {
  margin: 7px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* fields (shared with guide tokens) */
.modal-field { display: flex; flex-direction: column; gap: 7px; }
.modal-field[hidden] { display: none; }
.modal-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.modal-opt { font-weight: 500; color: var(--eyebrow); }
.modal-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.modal-input::placeholder { color: #aeb6c5; }
.modal-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(47, 85, 236, 0.14);
}
.modal-select {
  appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6472' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.modal-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .modal-row { grid-template-columns: 1fr; } }

/* success screen */
.modal-done { text-align: center; padding: 10px 4px 4px; }
.modal-done[hidden] { display: none; }
.modal-done-badge {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 6px auto 18px;
  border-radius: 50%;
  color: var(--brand-accent);
  background: var(--brand-accent-tint);
}
.modal-done-badge svg { width: 28px; height: 28px; }
.modal-done-title {
  margin: 0;
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.modal-done-text {
  margin: 12px auto 0;
  max-width: 380px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.modal-done-close { margin-top: 22px; }

/* ---- auth specifics ---- */
.auth__view[hidden] { display: none; }

/* mode switch (signup <-> signin): quick crossfade + collapse so the
   swap reads as smooth instead of a hard cut */
@keyframes auth-swap-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .auth__view.is-swapping .modal-head,
  .auth__view.is-swapping .auth__form,
  .auth__view.is-swapping .auth__switch,
  .auth-split__aside.is-swapping .auth-aside__top,
  .auth-split__aside.is-swapping .auth-aside__list {
    animation: auth-swap-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .auth-split__aside.is-swapping .auth-aside__list { animation-delay: 0.03s; }
  /* smooth height for the fields that appear/disappear between modes */
  #auth-name-field,
  #auth-password2-field {
    transition: max-height 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.18s ease, margin-bottom 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
#auth-password2-field { overflow: hidden; max-height: 90px; }
#auth-password2-field.is-collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: -14px; /* swallow the form's 14px row gap while collapsed */
  pointer-events: none;
}
/* Nombre + Email-o-teléfono comparten fila. En signin el nombre no se pide:
   desaparece de la rejilla y el contacto pasa a ocupar el ancho completo.
   El crossfade del cambio de modo (playSwap) cubre la transición. */
.auth__id-row:has(> #auth-name-field.is-collapsed) { grid-template-columns: 1fr; }
.auth__id-row > #auth-name-field.is-collapsed { display: none; }
.auth__plan {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 13px;
  background: var(--brand-blue-tint);
  border: 1px solid rgba(47, 85, 236, 0.18);
}
.auth__plan[hidden] { display: none; }
.auth__plan-name { display: block; font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.auth__plan-sub { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--ink-soft); }
.auth__plan-price { white-space: nowrap; color: var(--brand-blue); font-weight: 700; }
.auth__plan-amount { font-size: 1.18rem; }
.auth__plan-period { font-size: 0.8rem; font-weight: 600; }

.auth__tabs {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #f4f6fb;
  border: 1px solid var(--line);
  border-radius: 13px;
}
.auth__tab {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.auth__tab.is-active { color: var(--brand-blue); background: #fff; box-shadow: 0 4px 12px -6px rgba(20, 30, 60, 0.35); }
.auth__tab:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

.auth__social { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.auth__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth__social-btn:hover { border-color: #d3d8e4; box-shadow: 0 8px 18px -12px rgba(20, 30, 60, 0.4); }
.auth__social-btn svg { flex: none; }

.auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 4px;
  font-size: 0.76rem;
  color: var(--eyebrow);
}
.auth__divider::before,
.auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth__form { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.auth__pw { position: relative; }
.auth__pw .modal-input { padding-right: 44px; }
.auth__pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.auth__pw-toggle:hover { color: var(--ink); background: rgba(22, 26, 34, 0.05); }
.auth__pw-toggle:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.auth__pw-toggle svg { width: 18px; height: 18px; }
.auth__pw-toggle svg[hidden] { display: none; }
.auth__forgot { font-size: 0.74rem; font-weight: 600; color: var(--brand-blue); text-decoration: none; }
.auth__forgot:hover { text-decoration: underline; }
.auth__forgot[hidden] { display: none; }

.auth__error {
  margin: -2px 0 0;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 600;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fee4e2;
}
.auth__error[hidden] { display: none; }
.auth__submit, .contact__submit { width: 100%; margin-top: 2px; }
.auth__terms {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}
.auth__terms a { color: var(--brand-blue); text-decoration: none; font-weight: 600; }
.auth__terms a:hover { text-decoration: underline; }
.auth__terms[hidden] { display: none; }

.auth__switch { margin: 16px 0 0; text-align: center; font-size: 0.84rem; color: var(--ink-soft); }
.auth__switch-btn {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--brand-blue);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 2px;
}
.auth__switch-btn:hover { text-decoration: underline; }
.auth__switch-btn:disabled { color: var(--ink-soft); cursor: default; text-decoration: none; opacity: 0.6; }

/* ---- 2FA — verificación en dos pasos ---- */
.auth__2fa-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px 8px 4px 4px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.auth__2fa-back svg { width: 16px; height: 16px; }
.auth__2fa-back:hover { color: var(--brand-blue); background: var(--brand-blue-tint); }

.auth__2fa-form { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }

.auth__code {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.auth__code-box {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 58px;
  padding: 0;
  text-align: center;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  -moz-appearance: textfield;
}
.auth__code-box::-webkit-inner-spin-button { display: none; }
.auth__code-box:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-tint);
}
.auth__code-box.is-filled { border-color: var(--brand-blue); }

.auth__2fa-timer { color: var(--ink-soft); font-weight: 600; margin-left: 4px; }
.auth__2fa-timer[hidden] { display: none; }

/* nota de simulación (código visible porque no hay inbox real) */
.auth__sim-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: -2px 0 0;
  padding: 10px 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #8a5a00;
  background: #fff8ea;
  border: 1px solid #ffe8b8;
  border-radius: 10px;
}
.auth__sim-note[hidden] { display: none; }
.auth__sim-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: #c98a13; }
.auth__sim-note strong {
  font-weight: 800;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: #7a4f00;
}
.auth__sim-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}
.auth__sim-hint { color: #a9803a; }

/* ---- auth split layout (brand aside + form) ---- */
.modal-card.auth { max-width: 880px; padding: 0; border: none; border-radius: 16px; }
.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  /* Clip the dark aside to the card's rounded corners so the white card
     background can't bleed through as a hairline at the curve. */
  border-radius: inherit;
  overflow: hidden;
}

.auth-split__aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 34px 32px;
  color: #fff;
  /* Plain black sky — only the moving starfield (canvas) lives on top. */
  background: #05060c;
}
/* twinkling + shooting starfield canvas (painted in main.js) */
.auth-aside__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.auth-aside__top { position: relative; z-index: 2; }
.auth-aside__brand { display: inline-flex; color: #fff; }
.auth-aside__brand .brand__logo { height: 22px; }
.auth-aside__title {
  margin: 22px 0 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.46rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
}
.auth-aside__text {
  margin: 11px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.auth-aside__list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-aside__list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.auth-aside__list svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(43, 212, 154, 0.2);
  color: var(--brand-accent-bright);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-aside__foot {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.auth-aside__avatars { display: inline-flex; }
.auth-aside__avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0a1020;
  margin-left: -11px;
}
.auth-aside__avatars img:first-child { margin-left: 0; }
.auth-aside__proof { display: flex; flex-direction: column; gap: 2px; }
.auth-aside__stars { font-size: 0.82rem; letter-spacing: 2px; color: #ffce45; }
.auth-aside__proof-text { font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); }

.auth-split__main { padding: 30px 30px 26px; }

/* ---- input icons ---- */
.auth__control { position: relative; }
.auth__control-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--eyebrow);
  pointer-events: none;
  transition: color .15s ease;
}
.auth__control .modal-input { padding-left: 40px; }
.auth__control:focus-within .auth__control-icon { color: var(--brand-blue); }

/* ---- password strength meter (signup) ---- */
.auth__strength {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  --_c: var(--line);
}
.auth__strength[hidden] { display: none; }
.auth__strength-bars { display: flex; gap: 5px; flex: 1; }
.auth__strength-bars span {
  height: 5px;
  flex: 1;
  border-radius: 999px;
  background: var(--line);
  transition: background .25s ease;
}
.auth__strength-label {
  min-width: 62px;
  text-align: right;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--eyebrow);
  white-space: nowrap;
  transition: color .25s ease;
}
.auth__strength[data-level="1"] { --_c: #e5484d; }
.auth__strength[data-level="2"] { --_c: #f5a524; }
.auth__strength[data-level="3"] { --_c: #2f55ec; }
.auth__strength[data-level="4"] { --_c: #059669; }
.auth__strength[data-level="1"] .auth__strength-bars span:nth-child(-n+1),
.auth__strength[data-level="2"] .auth__strength-bars span:nth-child(-n+2),
.auth__strength[data-level="3"] .auth__strength-bars span:nth-child(-n+3),
.auth__strength[data-level="4"] .auth__strength-bars span:nth-child(-n+4) { background: var(--_c); }
.auth__strength[data-level="1"] .auth__strength-label,
.auth__strength[data-level="2"] .auth__strength-label,
.auth__strength[data-level="3"] .auth__strength-label,
.auth__strength[data-level="4"] .auth__strength-label { color: var(--_c); }

/* ---- social buttons as a compact row ---- */
.auth__social {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 720px) {
  .modal-card.auth { max-width: 440px; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-split__aside {
    gap: 14px;
    /* extra top room so the corner close button never overlaps the logo */
    padding: 58px 26px 22px;
  }
  .auth-aside__list,
  .auth-aside__foot { display: none; }
  .auth-aside__title { margin-top: 16px; font-size: 1.28rem; }
  .auth-aside__text { display: none; }
  .auth-split__main { padding: 24px 22px 22px; }
  /* Comfortable close button in the top-left, sitting over the dark aside.
     z-index lifts it above the aside's isolated stacking context, which
     would otherwise paint over it. */
  .modal-card.auth .modal-close {
    top: 14px;
    left: 14px;
    right: auto;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  .modal-card.auth .modal-close svg { width: 20px; height: 20px; }
  .modal-card.auth .modal-close:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
}

/* ---- contact specifics ---- */
.contact__view[hidden] { display: none; }
.contact__channels { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.contact__channel { width: 100%; }
.contact__hint {
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

@media (max-width: 480px) {
  .modal-card { padding: 26px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-card { transition: opacity .15s ease; }
  .modal-card, .modal-overlay.is-active .modal-card { transform: none; }
}

/* ===================== CÓMO FUNCIONA (process staircase) ===================== */
.how {
  position: relative;
  /* Clean white with a single faint glow — alternates with the tinted .what above
     so adjacent sections read as separate bands. */
  background:
    radial-gradient(46% 40% at 88% 2%, rgba(47, 85, 236, 0.05) 0%, transparent 58%),
    #ffffff;
  border-top: 1px solid var(--line);
  padding: clamp(72px, 10vh, 124px) 24px clamp(84px, 12vh, 150px);
}
.how__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.how__head { max-width: 460px; padding-top: 8px; }
.how__eyebrow {
  margin: 0 0 16px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand-blue);
}
.how__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.how__title .line-1,
.how__title .line-2 { display: block; }
.how__title .line-1 { color: var(--ink); }
.how__title .line-2 { color: var(--brand-accent); }
.how__lead {
  margin: 16px 0 0;
  max-width: 380px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.how__note {
  margin: 18px 0 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--brand-accent);
}

/* --- the descending staircase --- */
.how__steps {
  list-style: none;
  margin: 0;
  /* base offset so the rows have room to drift left as they descend */
  padding: 0 0 0 clamp(0px, 5vw, 64px);
}
.step {
  display: grid;
  grid-template-columns: auto minmax(56px, 1fr) minmax(160px, 210px);
  align-items: center;
  margin-top: clamp(-18px, -1.4vw, -6px);   /* gentle vertical overlap → cascade */
  /* the WHOLE row (image + dotted line + text) drifts left as it descends,
     so the labels step down in escalera instead of sitting in a vertical column */
  transform: translateX(calc(var(--i) * -46px));
}
.step:first-child { margin-top: 0; }

/* isometric 3D platform render (transparent PNG → blends on the white band).
   Wrapped in .step__media so a soft "ground" glow can sit behind the platform
   and breathe in sync with the float. */
.step__media {
  position: relative;
  display: block;
  isolation: isolate;          /* own stacking context → glow stays above the band */
  width: clamp(116px, 13vw, 168px);
}
.step__media::after {          /* floating ground glow / cast shadow */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: 56%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(47, 85, 236, 0.30), rgba(47, 85, 236, 0) 72%);
  z-index: 0;
  pointer-events: none;
}
.step__img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

/* dotted connector — flowing blue dots that drift toward the label */
.step__connector {
  height: 3px;
  margin: 0 clamp(18px, 2.6vw, 36px);
  background-image: radial-gradient(circle closest-side, rgba(47, 85, 236, 0.55) 96%, transparent);
  background-size: 12px 3px;
  background-repeat: repeat-x;
  background-position: 0 50%;
}

.step__text { padding: 6px 0; }
.step__num {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--brand-blue);
}
.step__title {
  margin: 5px 0 5px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.step__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
  /* gentle, out-of-phase hover so the staircase feels alive (each step uses --i) */
  .step__img {
    animation: stepFloat 5.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -1.4s);
    will-change: transform;
  }
  .step__media::after {              /* shadow shrinks/fades as the platform lifts */
    animation: stepShadow 5.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -1.4s);
  }
  .step__connector { animation: stepDotFlow 1.05s linear infinite; }

  /* hover: pause the float, lift + glow the platform, warm up the label */
  .step__media { transition: transform .3s ease, filter .3s ease; }
  .step:hover .step__img { animation-play-state: paused; }
  .step:hover .step__media {
    transform: translateY(-6px) scale(1.04);
    filter: drop-shadow(0 12px 16px rgba(47, 85, 236, 0.22));
  }
  .step__title { transition: color .25s ease; }
  .step:hover .step__title { color: var(--brand-blue); }

  /* cascade-reveal as the section scrolls into view (JS adds .is-reveal/.is-in;
     translateX is the staircase drift — preserved so reveal only adds a rise) */
  .how__steps.is-reveal .step {
    opacity: 0;
    transform: translateX(calc(var(--i) * -46px)) translateY(34px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.16, .84, .34, 1);
    transition-delay: calc(var(--i) * .13s);
  }
  .how__steps.is-reveal.is-in .step {
    opacity: 1;
    transform: translateX(calc(var(--i) * -46px)) translateY(0);
  }
}

@keyframes stepFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
@keyframes stepShadow {
  0%, 100% { transform: translateX(-50%) scaleX(1);    opacity: 1; }
  50%      { transform: translateX(-50%) scaleX(0.82); opacity: 0.45; }
}
@keyframes stepDotFlow {
  to { background-position: 12px 50%; }
}

/* stack the section on narrower viewports */
@media (max-width: 860px) {
  .how__inner { grid-template-columns: 1fr; gap: 36px; }
  .how__head { max-width: none; text-align: center; margin: 0 auto; }
  .how__lead { margin-left: auto; margin-right: auto; }
  .how__steps { padding-left: 0; }
  .step {
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    margin-top: 14px;
    transform: none;          /* no horizontal drift once stacked */
  }
  .step__media { width: 116px; }
  .step__connector { display: none; }
  /* once stacked there's no escalera drift → reveal only rises, no translateX */
  .how__steps.is-reveal .step {
    transform: translateY(28px);
  }
  .how__steps.is-reveal.is-in .step {
    transform: translateY(0);
  }
}
@media (max-width: 420px) {
  .step__media { width: 92px; }
}

/* ===================== DIAGNÓSTICO GRATIS · QUÉ RECIBES ===================== */
/* Sits between the white .how above and the light-blue .reach below — a soft
   tinted band so it reads as its own beat. Left: the offer + CTA; right: an
   "informe" card that spells out the five things the free diagnosis delivers. */
.diag {
  position: relative;
  overflow: hidden;                 /* clip the decorative orbs */
  border-top: 1px solid var(--line);
  background:
    radial-gradient(48% 44% at 90% 4%, rgba(5, 150, 105, 0.06) 0%, transparent 60%),
    radial-gradient(46% 42% at 6% 96%, rgba(47, 85, 236, 0.05) 0%, transparent 62%),
    linear-gradient(180deg, #f8fafd 0%, #eef3f9 100%);
  padding: clamp(64px, 9vh, 116px) 24px clamp(72px, 11vh, 132px);
}
.diag__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}

/* left — the offer */
.diag__head { max-width: 440px; }
.diag__eyebrow {
  margin: 0 0 16px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand-blue);
}
.diag__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.diag__title .line-1,
.diag__title .line-2 { display: block; }
.diag__title .line-1 { color: var(--ink); }
.diag__title .line-2 { color: var(--brand-accent); }
.diag__lead {
  margin: 18px 0 0;
  max-width: 400px;
  font-size: clamp(0.95rem, 1.1vw, 1.06rem);
  line-height: 1.65;
  color: var(--ink-soft);
}
.diag__cta { margin-top: 26px; }
.diag__cta-arrow { width: 17px; height: 17px; transition: transform .25s ease; }
.diag__cta:hover .diag__cta-arrow { transform: translateX(3px); }
.diag__hint {
  margin: 14px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--eyebrow);
}

/* right — the "informe" card */
.diag__panel {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 34px);
  box-shadow:
    0 30px 60px -28px rgba(20, 30, 60, 0.30),
    0 2px 8px -3px rgba(20, 30, 60, 0.08),
    inset 0 0 0 1px rgba(233, 236, 244, 0.9);
}
.diag__panel-label {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.diag__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.diag-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(14px, 1.9vw, 18px) 0;
}
.diag-item:first-child { padding-top: 0; }
.diag-item:last-child  { padding-bottom: 0; }
.diag-item + .diag-item { border-top: 1px solid var(--line); }
.diag-item__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;               /* rounded square, matches feature icons */
  display: grid;
  place-items: center;
  color: var(--brand-accent);
  background: var(--brand-accent-tint);
}
.diag-item__icon svg { width: 22px; height: 22px; }
.diag-item__text { padding-top: 2px; }
.diag-item__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.diag-item__desc {
  margin: 4px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* stack on narrower viewports */
@media (max-width: 860px) {
  .diag__inner { grid-template-columns: 1fr; gap: 34px; }
  .diag__head { max-width: none; text-align: center; margin: 0 auto; }
  .diag__lead { margin-left: auto; margin-right: auto; }
}

/* ===================== QUÉ HACEMOS ===================== */
.what {
  position: relative;
  /* Soft cool tint + faint dual glow so the white feature cards lift off the page
     and the section reads distinct from the white .how below it. */
  background:
    radial-gradient(56% 48% at 12% -4%, rgba(47, 85, 236, 0.06) 0%, transparent 60%),
    radial-gradient(50% 42% at 94% 16%, rgba(5, 150, 105, 0.05) 0%, transparent 62%),
    linear-gradient(180deg, #f7f9fd 0%, #eef2f9 100%);
  padding: clamp(64px, 9vh, 112px) 24px clamp(64px, 9vh, 112px);
}
.what__inner { max-width: 1120px; margin: 0 auto; }

/* heading block */
.what__head { max-width: 620px; margin: 0 auto; text-align: center; }
.what__eyebrow {
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand-blue);
}
.what__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.what__title .line-1,
.what__title .line-2 { display: block; }
.what__title .line-1 { color: var(--ink); }
.what__title .line-2 { color: var(--brand-accent); }
.what__lead {
  margin: 16px auto 0;
  max-width: 480px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* layout: 4 pilares modulares — se activa por bloques, no servicios sueltos */
.what__pillars {
  margin-top: clamp(34px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* cada pilar = una tarjeta enlazada a #diagnostico — densa y sobria */
.pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 20px 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  box-shadow: 0 8px 22px -20px rgba(20, 30, 60, 0.35);   /* sombra normal muy suave */
  text-decoration: none;
  color: inherit;
  transition: transform .24s ease, box-shadow .3s ease, border-color .24s ease;
}
.pillar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 85, 236, 0.32);      /* borde azul suave, sin salto de color */
  box-shadow: 0 24px 44px -28px rgba(47, 85, 236, 0.30);   /* más profunda pero limpia */
}
.pillar-card:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}
.pillar-card__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  background: rgba(47, 85, 236, 0.07);        /* tinte sobrio, menos saturado */
  transition: transform .24s ease;
}
.pillar-card__icon svg { width: 20px; height: 20px; }
.pillar-card:hover .pillar-card__icon { transform: translateY(-2px); }  /* icono ligeramente elevado */
.pillar-card__name {
  margin: 14px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pillar-card__desc {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* tags: chips muy ligeros que envuelven como unidades (sin separadores que cuelguen) */
.pillar-card__items {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pillar-card__items li {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: #6b7486;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(47, 85, 236, 0.055);
  border: 1px solid rgba(15, 23, 42, 0.05);
  transition: color .24s ease, background .24s ease, border-color .24s ease;
}
.pillar-card:hover .pillar-card__items li {
  color: var(--brand-blue);
  background: rgba(47, 85, 236, 0.09);
  border-color: rgba(47, 85, 236, 0.14);
}
/* "Ver servicio →" — pista discreta que se afirma en hover, sin desplazar el layout */
.pillar-card__more {
  margin-top: auto;
  padding-top: 16px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #9aa2b1;
  transition: color .24s ease;
}
.pillar-card__more svg { width: 13px; height: 13px; transition: transform .24s ease; }
.pillar-card:hover .pillar-card__more,
.pillar-card:focus-visible .pillar-card__more { color: var(--brand-blue); }
.pillar-card:hover .pillar-card__more svg { transform: translateX(3px); }

/* módulos avanzados — una sola línea, no una fila de cards */
.what__advanced {
  margin: clamp(22px, 3.4vw, 34px) auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.what__advanced strong { color: var(--ink); font-weight: 700; }

/* plataforma + criterio humano — banda sobria y compacta, sin fotos de equipo */
.what__trust {
  margin-top: clamp(22px, 3.4vw, 34px);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  box-shadow: 0 8px 22px -20px rgba(20, 30, 60, 0.35);
}
.what__trust-badge {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  background: rgba(47, 85, 236, 0.07);
}
.what__trust-badge svg { width: 21px; height: 21px; }
.what__trust-text { flex: 1 1 auto; min-width: 0; }
.what__trust-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.what__trust-desc {
  margin: 3px 0 0;
  font-size: 0.885rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* CTA secundario — enlace de texto, no botón fuerte */
.what__trust-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.what__trust-link svg { width: 15px; height: 15px; transition: transform .2s ease; }
.what__trust-link:hover { color: var(--brand-blue-dark); }
.what__trust-link:hover svg { transform: translateX(3px); }

/* sectores — una línea compacta de apoyo (no un bloque grande) */
.what__sectors-line {
  margin: clamp(18px, 2.6vw, 26px) auto 0;
  max-width: 660px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.what__sectors-line strong { color: var(--ink); font-weight: 600; }

/* responsive */
@media (max-width: 980px) {
  .what__pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .what__pillars { grid-template-columns: 1fr; }
  .what__trust { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ===================== GARANTÍA ===================== */
.grnt-sec {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 80vh, 780px);
  display: flex;
  align-items: center;
  /* Deeper blue wash with blue + emerald glows — richest light band, leading
     the eye down into the dark footer. */
  background:
    radial-gradient(120% 90% at 92% 6%, rgba(47, 85, 236, 0.10) 0%, transparent 52%),
    radial-gradient(80% 80% at 6% 104%, rgba(5, 150, 105, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #e9eff9 0%, #dde7f6 100%);
  border-top: 1px solid var(--line);
  padding: clamp(72px, 9vh, 120px) 24px clamp(80px, 11vh, 132px);
}

/* decorative layer (3D globe canvas) */
.grnt-sec__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* realistic Earth — large, rising from the bottom-left, melting into white */
.grnt-sec__globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask-image: radial-gradient(115% 105% at 2% 120%, #000 40%, transparent 74%);
          mask-image: radial-gradient(115% 105% at 2% 120%, #000 40%, transparent 74%);
}
.grnt-sec__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: center;
}

/* heading block */
.grnt-sec__head { max-width: 460px; }
.grnt-sec__eyebrow {
  margin: 0 0 18px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand-blue);
}
.grnt-sec__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.grnt-sec__title .line-1,
.grnt-sec__title .line-2 { display: block; }
.grnt-sec__title .line-1 { color: var(--ink); }
.grnt-sec__title .line-2 { color: var(--brand-blue); }
.grnt-sec__lead {
  margin: 20px 0 0;
  font-size: clamp(0.95rem, 1.1vw, 1.06rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

/* guarantee list */
.grnt-sec__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.2vw, 38px);
}
.grnt {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.grnt__icon {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 30%;            /* squircle, not a circle */
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  background: #fff;
  box-shadow:
    0 16px 30px -16px rgba(20, 30, 60, 0.30),
    0 2px 6px -2px rgba(20, 30, 60, 0.10),
    inset 0 0 0 1px rgba(233, 236, 244, 0.9);
}
.grnt__icon svg { width: 23px; height: 23px; }
.grnt__text { padding-top: 3px; }
.grnt__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.grnt__desc {
  margin: 6px 0 0;
  max-width: 290px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* responsive */
@media (max-width: 860px) {
  .grnt-sec { min-height: 0; }
  .grnt-sec__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }
  .grnt-sec__head { max-width: none; }
  .grnt-sec__globe {
    -webkit-mask-image: radial-gradient(150% 90% at 0% 108%, #000 46%, transparent 78%);
            mask-image: radial-gradient(150% 90% at 0% 108%, #000 46%, transparent 78%);
  }
}

/* ===================== RESPONSIVE ===================== */
/* ---- Mobile navigation: hamburger + slide-in drawer ---- */
@media (max-width: 900px) {
  :root { --nav-h: 64px; }

  .nav__inner { padding: 0 18px; }

  /* logo scales down to fit the shorter (64px) mobile bar; a touch smaller now
     that it shares the bar with the hamburger + right-side CTA */
  .brand__logo { height: 16px; }

  /* keep the brand + hamburger above the drawer/scrim layer */
  .brand, .nav__toggle { position: relative; z-index: 42; }

  /* IMPORTANT: no backdrop-filter on the bar at mobile widths — a filter on an
     ancestor would become the containing block for the fixed drawer/scrim and
     collapse them. Use a solid (more legible) background instead. */
  .nav.is-scrolled {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  /* once the drawer opens the bar goes solid so the X + brand read clearly */
  body.nav-open .nav,
  body.nav-open .nav.is-scrolled {
    background: #fff;
    border-bottom-color: var(--line);
  }
  body.nav-open .nav .brand { color: var(--ink); }
  body.nav-open { overflow: hidden; }   /* lock page scroll behind the drawer */

  /* hamburger button — now lives at the left, before the wordmark */
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  .nav__lead { gap: 8px; }
  .nav:not(.is-scrolled) .nav__toggle { color: #fff; }
  body.nav-open .nav .nav__toggle { color: var(--ink); }

  .nav__toggle-lines,
  .nav__toggle-lines::before,
  .nav__toggle-lines::after {
    content: "";
    display: block;
    width: 25px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s cubic-bezier(.4,.05,.2,1), opacity .2s ease, background .2s ease;
  }
  .nav__toggle-lines { position: relative; }
  .nav__toggle-lines::before { position: absolute; left: 0; top: -8px; }
  .nav__toggle-lines::after  { position: absolute; left: 0; top: 8px; }
  body.nav-open .nav__toggle-lines { background: transparent; }
  body.nav-open .nav__toggle-lines::before { transform: translateY(8px) rotate(45deg); }
  body.nav-open .nav__toggle-lines::after  { transform: translateY(-8px) rotate(-45deg); }

  /* ===== Mobile bar action (right side): a single, always-visible CTA =====
     One clear primary button — no login icon, no ambiguous label. Login lives
     as plain text at the foot of the menu. The button stays put when the menu
     opens (only the hamburger morphs to ✕), so the bar never jumps. */
  .nav__bar-actions {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 42;
  }

  /* compact CTA so the whole bar fits a phone width without wrapping */
  .nav__bar-actions .btn.nav__bar-cta {
    padding: 10px 16px;
    font-size: 0.84rem;
    border-radius: 10px;
    white-space: nowrap;
  }

  /* ===== Full-screen editorial menu =====
     The drawer becomes a full-viewport white panel (no side slide, no dim
     scrim): large numbered links, generous rhythm, staggered fade-up entrance.
     The bar (brand + X) stays above it; content is padded clear of the bar. */
  .nav__scrim { display: none; }

  .nav__drawer {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 39;
    width: 100%;
    height: calc(100% - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    padding: 22px clamp(22px, 7vw, 46px) calc(env(safe-area-inset-bottom) + 30px);
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity .42s ease, visibility .42s;
  }
  body.nav-open .nav__drawer { opacity: 1; visibility: visible; }

  /* links list */
  .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  /* The panel is always white, so force dark link colours regardless of the
     scrolled/hover state — the dark-hero "light type" + white :hover rules must
     NOT leak in here (on touch the tapped row keeps a sticky :hover and would
     turn the label white-on-white). Open/pressed rows get the brand accent. */
  body.nav-open .nav__links a,
  body.nav-open .nav:not(.is-scrolled) .nav__links a,
  body.nav-open .nav:not(.is-scrolled) .nav__links a:hover,
  body.nav-open .nav__signin,
  body.nav-open .nav:not(.is-scrolled) .nav__signin { color: var(--ink); }
  body.nav-open .nav__item.is-open > .has-menu,
  body.nav-open .nav__links > a:active { color: var(--brand-blue); }

  .nav__item {
    display: block;
    width: 100%;
  }

  /* top-level rows: clean, restrained list (not oversized headlines) */
  .nav__links > a,
  .nav__item > .has-menu {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 2px;
    font-size: clamp(1.08rem, 4.2vw, 1.24rem);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .nav__links > a:active { color: var(--brand-blue); }

  /* submenu indicator → a right chevron that drops to ↓ when the row is open */
  .nav__item > .has-menu .caret {
    width: 16px;
    height: 10px;
    margin-left: auto;
    opacity: .5;
    transform: rotate(-90deg);
    transition: transform .3s cubic-bezier(.4,.05,.2,1), opacity .2s ease;
  }
  .nav__item.is-open > .has-menu { color: var(--brand-blue); }
  .nav__item.is-open > .has-menu .caret { transform: rotate(0); opacity: .9; }

  /* mega-menu panel → inline accordion */
  .nav__panel {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4,.05,.2,1), padding .3s ease;
  }
  .nav__panel::before { display: none; }
  .nav__item.is-open > .nav__panel {
    max-height: 1200px;
    padding: 10px 0 18px 26px;
    transform: none;
  }
  /* group labels get a touch more breathing room in the accordion */
  .nav__panel .nav__group-label { margin: 10px 0 4px; }
  .nav__panel .nav__col { gap: 2px; }
  .nav__panel .nav__row { padding: 11px 10px; }

  /* CTA strip stacks into a card inside the accordion */
  #nav-panel-soluciones .nav__cta,
  #nav-panel-recursos .nav__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 6px 0 2px;
  }
  .nav__cta-btn { justify-content: center; }

  /* Foot of the menu = login only. The primary CTA ("Empezar gratis") is
     always present in the bar, so we drop the duplicate button here and keep
     a single, clearly-labelled sign-in link. */
  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 22px;   /* follows the links as one block — no lonely button in a void */
    padding-top: 0;
  }
  .nav__actions .btn { display: none; }   /* no duplicate CTA — it lives in the bar */
  .nav__signin {
    text-align: center;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.98rem;
    font-weight: 600;
  }
  .nav__signin:hover { background: rgba(47, 85, 236, 0.05); }

  /* staggered fade-up entrance for the menu rows */
  .nav__links > *,
  .nav__actions {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .5s cubic-bezier(.22,.7,.2,1);
  }
  body.nav-open .nav__links > *,
  body.nav-open .nav__actions {
    opacity: 1;
    transform: none;
  }
  body.nav-open .nav__links > *:nth-child(1) { transition-delay: .07s; }
  body.nav-open .nav__links > *:nth-child(2) { transition-delay: .12s; }
  body.nav-open .nav__links > *:nth-child(3) { transition-delay: .17s; }
  body.nav-open .nav__links > *:nth-child(4) { transition-delay: .22s; }
  body.nav-open .nav__links > *:nth-child(5) { transition-delay: .27s; }
  body.nav-open .nav__actions { transition-delay: .33s; }

  .hero { padding-top: calc(var(--nav-h) + 48px); }
}

/* ---- Hero polish on phones ---- */
@media (max-width: 640px) {
  .hero { padding-left: 20px; padding-right: 20px; }
  .eyebrow { font-size: 0.68rem; letter-spacing: 0.16em; margin-bottom: 14px; }
  .hero__title {
    font-size: clamp(1.95rem, 8.6vw, 2.85rem);
    line-height: 1.08;
  }
  .hero__subtitle {
    font-size: 1rem;
    line-height: 1.58;
    margin-top: 16px;
  }
  .hero__actions { margin-top: 22px; }
}
@media (max-width: 520px) {
  /* full-width, stacked CTAs — easy thumb targets */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
  }
  .hero__actions .btn { width: 100%; padding: 15px 22px; font-size: 0.98rem; }
  /* roomier default tap target for every button */
  .btn { padding: 13px 22px; }
  .btn--sm { padding: 11px 18px; }
  /* section CTA rows stack too */
  .reach__actions { flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto; }
  .reach__actions .btn { width: 100%; }
  /* give the guide modal a bit more width */
  .guide-overlay { padding: 14px; }
}

/* ---- Tighter rhythm + denser cards on phones (vh-based section padding
   bloats the bands apart on a tall narrow screen) ---- */
@media (max-width: 640px) {
  .what     { padding-top: 58px; padding-bottom: 56px; }
  .how      { padding-top: 56px; padding-bottom: 60px; }
  .reach    { padding-top: 56px; padding-bottom: 60px; }
  .grnt-sec { padding-top: 58px; padding-bottom: 60px; }

  /* pull each heading closer to its content */
  .what__head, .how__head, .reach__head, .grnt-sec__head { max-width: 460px; }
  .what__title, .how__title, .reach__title { font-size: clamp(1.85rem, 8vw, 2.5rem); line-height: 1.12; }
  .grnt-sec__title { font-size: clamp(1.95rem, 8.6vw, 2.6rem); }
  .what__lead, .how__lead, .reach__lead, .grnt-sec__lead { font-size: 0.98rem; }
  .what__pillars { margin-top: 26px; }
  .reach__body { margin-top: 24px; }
  .reach__actions { margin-top: 30px; }
  .grnt-sec__lead { margin-top: 14px; }
  .grnt-sec__inner { gap: 28px; }      /* the grid gap already spaces head→list */
  .grnt-sec__list { gap: 22px; }

  /* pilares: un poco más compactos en móvil */
  .what__pillars { gap: 12px; }
  .pillar-card { padding: 18px 16px 16px; border-radius: 18px; }
  .pillar-card__icon { width: 38px; height: 38px; }
  .pillar-card__name { font-size: 1.02rem; }
  .pillar-card__desc { font-size: 0.86rem; }

  /* trust banner a touch tighter */
  .what__trust { padding: 18px; gap: 14px; margin-top: 16px; }

  /* footer: pull the long link stack up + 2-up stats stay compact */
  .ftr-grid { padding-top: 34px; padding-bottom: 30px; gap: 28px; }
  .ftr-stats { padding: 22px 0; gap: 22px 18px; }
  .ftr-cta { padding: 30px 24px; }
}

/* Honour reduced-motion for the drawer + hamburger (consistent with the site). */
@media (prefers-reduced-motion: reduce) {
  .nav__drawer,
  .nav__scrim,
  .nav__panel,
  .nav__links > *,
  .nav__actions,
  .nav__toggle-lines,
  .nav__toggle-lines::before,
  .nav__toggle-lines::after { transition-duration: .01ms !important; }
  /* no fade-up slide when motion is reduced — show rows in place */
  .nav__links > *,
  .nav__actions { transform: none !important; }
}

@media (max-width: 1280px) {
  /* Drop the outer tags first so the inner ones keep their spacing (7 chips) */
  .tag[data-pos="0"],
  .tag[data-pos="6"] { display: none; }
}
@media (max-width: 1080px) {
  .tag[data-pos="1"],
  .tag[data-pos="5"] { display: none; }
}
@media (max-width: 940px) {
  .tag[data-pos="2"],
  .tag[data-pos="4"] { display: none; }
}
@media (max-height: 720px) {
  /* On very short viewports the dark band between the hero copy and the
     Earth's horizon collapses, leaving the arc nowhere to sit without
     touching one or the other — hide it rather than crowd the hero. */
  .team { display: none; }
}
@media (max-width: 860px) {
  /* Below this the floating tags can't sit side-by-side without
     overlapping — hide the overlay and let the globe carry the hero. */
  .team { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* park the idle bob; the scroll launch is skipped in JS */
  .tag__inner { animation: none; }
}

/* ===================== ALCANCE GLOBAL (world map) ===================== */
.reach {
  position: relative;
  overflow: hidden;                 /* clip the full-bleed dot field */
  padding: clamp(64px, 9vh, 116px) 24px clamp(72px, 11vh, 132px);
  /* Light blue band — the page starts deepening toward the dark footer. */
  background:
    radial-gradient(70% 60% at 18% 8%, rgba(47, 85, 236, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #f1f5fc 0%, #e7eef8 100%);
  border-top: 1px solid var(--line);
}
/* dot field spans the whole section behind the content */
#reach-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.reach__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }

.reach__head { max-width: 680px; margin: 0 auto; text-align: center; }
.reach__eyebrow {
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand-blue);
}
.reach__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.reach__accent { color: var(--brand-accent); }
.reach__lead {
  margin: 16px auto 0;
  max-width: 500px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* map (left) + feature list (right) */
.reach__body {
  margin-top: clamp(28px, 4.5vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(220px, 0.95fr);
  gap: clamp(22px, 3.2vw, 46px);
  align-items: center;
}
/* spacer that reserves the map area; the continents render behind it on the
   full-section canvas. aspect-ratio matches the equirectangular crop. */
.reach__map { position: relative; width: 100%; aspect-ratio: 2.24 / 1; }

.reach__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 26px);
}
.rfeat { display: flex; align-items: flex-start; gap: 14px; }
.rfeat__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  background: rgba(47, 85, 236, 0.10);
}
.rfeat__icon svg { width: 21px; height: 21px; }
/* All reach features stay blue — these are value props, not paid services. */
.rfeat__title {
  margin: 2px 0 0;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.rfeat__desc {
  margin: 5px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.reach__actions {
  margin-top: clamp(34px, 5vw, 54px);
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .reach__body { grid-template-columns: 1fr; gap: 34px; }
  .reach__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
  }
}
@media (max-width: 520px) {
  .reach__features { grid-template-columns: 1fr; }
}

/* ===================== FOOTER ===================== */
.ftr {
  position: relative;
  background: #fbfcff;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.ftr a { color: inherit; text-decoration: none; }
.ftr__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) 24px clamp(26px, 4vw, 38px);
}
/* ---- CTA banner — dark starry sky ---- */
.ftr-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 36px;
  padding: clamp(32px, 4.5vw, 54px) clamp(26px, 4vw, 52px);
  border-radius: 24px;
  background:
    radial-gradient(120% 160% at 50% -45%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(160deg, #12151f 0%, #0a0c12 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 34px 70px -34px rgba(8, 11, 24, 0.85);
}
.ftr-cta__stars {
  position: absolute;
  /* fills the banner exactly; the scroll parallax is done per-star inside the
     canvas (near stars slide more than far ones) and wraps at the edges, so
     there's never a bare edge and no whole-canvas transform is needed */
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.ftr-cta__copy {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.ftr-cta__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: #fff;
}
.ftr-cta__sub {
  margin: 12px 0 0;
  font-size: clamp(0.95rem, 1.3vw, 1.06rem);
  line-height: 1.5;
  color: #aab4c6;
}
.ftr-cta__btn {
  position: relative;
  z-index: 1;
  flex: none;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0a0c14;
  background: linear-gradient(180deg, #ffffff 0%, #eef1f8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 40px -16px rgba(0, 0, 0, 0.5);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
}
/* Slow, elegant light sweep — a premium sheen, not a blink. */
.ftr-cta__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 42%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(47, 85, 236, 0.22), transparent);
  transform: skewX(-18deg);
  animation: ftr-cta-sheen 5s ease-in-out infinite;
  pointer-events: none;
}
.ftr-cta__btn > span,
.ftr-cta__btn > svg { position: relative; z-index: 1; }
.ftr-cta__btn svg { width: 18px; height: 18px; transition: transform .28s ease; }
.ftr-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 50px -16px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(47, 85, 236, 0.12);
}
.ftr-cta__btn:hover svg { transform: translateX(4px); }
@keyframes ftr-cta-sheen {
  0%   { left: -60%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}

/* ---- Brand + link columns ---- */
.ftr-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 3fr;
  gap: clamp(32px, 5vw, 76px);
  padding: clamp(40px, 5vw, 60px) 0 clamp(34px, 4vw, 46px);
}
.ftr-brand__logo {
  display: inline-flex;
  align-items: center;
  color: var(--brand-blue);
}
/* Footer mark: the "vorseo" wordmark (logo.svg) recolored via currentColor.
   Color set here (not on .ftr-brand__logo) because `.ftr a { color: inherit }`
   outranks the .ftr-brand__logo class and would otherwise win. */
.ftr-brand__mark {
  display: block;
  height: 22px;
  aspect-ratio: 5.827 / 1;
  color: var(--brand-blue);
  /* Night-sky fill (base + drifting stars + hover burst) is shared with the
     topbar wordmark via the .brand__logo / .ftr-brand__mark rules near the top
     of this file (see --sky-base). */
  -webkit-mask: url("../logo.svg") left center / contain no-repeat;
  mask: url("../logo.svg") left center / contain no-repeat;
}
.ftr-brand__tagline {
  margin: 14px 0 0;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ftr-social {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.ftr-social a {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ftr-social svg { width: 18px; height: 18px; }
.ftr-social a:hover {
  color: #fff;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -10px rgba(47, 85, 236, 0.7);
}

.ftr-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px 20px;
}
.ftr-col__title {
  margin: 0 0 15px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ftr-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ftr-col__list a {
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: color .16s ease;
}
.ftr-col__list a:hover { color: var(--brand-blue); }

/* ---- Stats strip ---- */
.ftr-stats {
  list-style: none;
  margin: 0;
  padding: clamp(22px, 3vw, 28px) 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ftr-stat {
  display: flex;
  align-items: center;
  gap: 13px;
}
.ftr-stat:not(:first-child) {
  border-left: 1px solid var(--line);
  padding-left: clamp(16px, 3vw, 34px);
}
.ftr-stat__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
}
.ftr-stat__icon svg { width: 20px; height: 20px; }
.ftr-stat__text { display: grid; gap: 1px; }
.ftr-stat__num {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ftr-stat__label {
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* ---- Bottom bar ---- */
.ftr-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: clamp(22px, 3vw, 28px);
}
.ftr-copy {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.ftr-bottom__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
}
.ftr-bottom__link {
  color: var(--ink-soft);
  transition: color .16s ease;
}
.ftr-bottom__link:hover { color: var(--brand-blue); }
.ftr-sep { color: #c8cedb; }
.ftr-regions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
}
.ftr-regions svg { width: 15px; height: 15px; color: var(--ink-soft); }

/* ---- Responsive ---- */
@media (max-width: 920px) {
  .ftr-grid { grid-template-columns: 1fr; gap: 38px; }
  .ftr-cols { grid-template-columns: repeat(3, 1fr); gap: 30px 22px; }
  .ftr-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; }
  /* A 2 columnas solo separa la columna derecha. El reset tiene que igualar la
     especificidad de `.ftr-stat:not(:first-child)` (0,2,0): con `.ftr-stat` a
     secas perdía, así que el 3er ítem ("Gestor asignado") se quedaba con el
     borde y el padding del layout de 4 columnas — una raya suelta a la
     izquierda de la segunda fila y el texto desplazado. */
  .ftr-stat:not(:first-child) { border-left: 0; padding-left: 0; }
  .ftr-stat:nth-child(even) {
    border-left: 1px solid var(--line);
    padding-left: clamp(16px, 4vw, 30px);
  }
}
@media (max-width: 620px) {
  .ftr-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    border-radius: 20px;
  }
  .ftr-cta__btn { width: 100%; justify-content: center; padding: 15px 26px; }

  /* Link groups: masonry-style columns so each group packs tightly instead of
     leaving a gap under the shorter column. A 2-col grid ties row heights to the
     tallest neighbour — "Google Maps & Reviews" wrapping pushed the rows out of
     square. */
  .ftr-cols {
    display: block;
    columns: 2;
    column-gap: 22px;
  }
  .ftr-col {
    break-inside: avoid;
    margin-bottom: 26px;
  }
  .ftr-col:last-child { margin-bottom: 0; }

  /* Bottom bar: stack cleanly. The inline "|" separators left a dangling pipe
     when the row wrapped, so drop them and stack the contact links. */
  .ftr-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ftr-bottom__right { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ftr-sep { display: none; }
}
@media (max-width: 420px) {
  .ftr-cols { column-gap: 16px; }
  .ftr-col { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ftr-cta__btn::before { animation: none; opacity: 0; }
  .ftr-social a:hover, .ftr-cta__btn:hover svg { transform: none; }
}

/* ===================== PRECIOS ===================== */
.prc {
  position: relative;
  padding: clamp(72px, 10vh, 124px) 24px clamp(80px, 12vh, 140px);
  background:
    radial-gradient(62% 48% at 50% 0%, rgba(47, 85, 236, 0.05) 0%, transparent 62%),
    #fff;
  border-top: 1px solid var(--line);
  /* the fixed nav shouldn't cover the heading when you jump to #precios */
  scroll-margin-top: var(--nav-h);
}
.prc__inner { max-width: 1200px; margin: 0 auto; }

/* centered header — same recipe as Alcance/Garantía */
.prc__head { max-width: 640px; margin: 0 auto; text-align: center; }
.prc__eyebrow {
  margin: 0 0 14px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--brand-blue);
}
.prc__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.12; letter-spacing: -0.015em;
  color: var(--ink);
}
.prc__accent { color: var(--brand-accent); }
.prc__lead {
  margin: 16px auto 0; max-width: 540px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6; color: var(--ink-soft);
}


/* versión mini del mismo emblema para las escaleras de planes de las
   subpáginas de servicio (/growth y /visibility): estrella desnuda inline. */
.plan-tier {
  display: inline-flex;
  margin-right: 7px;
  vertical-align: -2.5px;
}
.plan-tier svg { width: 17px; height: 17px; }
.plan-tier--1 { color: #97a0b3; }
.plan-tier--2 { color: var(--brand-blue); }
.plan-tier--3 { color: var(--brand-blue); }
/* tier "Pro" de las subpáginas (más allá de Platino): estrella radiante en el
   tono tinta del cielo Vorseo, para no confundirla con el azul de Platino. */
.plan-tier--pro { color: var(--ink); }


.prc__note {
  margin: clamp(28px, 4vw, 42px) auto 0;
  max-width: 580px; text-align: center;
  font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft);
}
.prc__note a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.prc__note a:hover { text-decoration: underline; }
/* "Habla con un agente" — inline link with a real arrow that nudges on hover */
.prc__note-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  white-space: nowrap;
}
.prc__note-link:hover { text-decoration: none; }
.prc__note-arrow {
  width: 15px;
  height: 15px;
  transition: transform .18s ease;
}
.prc__note-link:hover .prc__note-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .prc__note-arrow { transition: none; }
}

/* phones: compact the section shell — la lista .prlist se ajusta sola */
@media (max-width: 600px) {
  .prc { padding: 54px 20px 60px; }
  .prc__lead { font-size: 0.96rem; }
  .prc__note { margin-top: 28px; font-size: 0.88rem; }
}

/* ============================================================
   MÉTRICAS · "Lo que verás en Tu Space" — no vendemos casos de
   sector, mostramos el panel: una vista de ejemplo del dashboard
   con las métricas que el cliente mide desde la plataforma.
   Mismo lenguaje visual que .plat-shot (tarjetas, colores, KPIs).
   ============================================================ */
.metrics {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 120px) 24px;
  background:
    radial-gradient(90% 70% at 50% -8%, rgba(47, 85, 236, 0.05), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--nav-h);
}
.metrics__inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }

.metrics__head { max-width: 660px; margin: 0 auto; text-align: center; }
.metrics__eyebrow {
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand-blue);
}
.metrics__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.metrics__accent { color: var(--brand-accent); }
.metrics__lead {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* honesty badge — small, centred under the header (never louder than the data) */
.metrics__badge {
  margin: 20px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(20, 30, 60, 0.05);
  border-radius: 999px;
}
.metrics__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5);
  animation: metricsLive 2.4s ease-out infinite;
}
@keyframes metricsLive {
  0%   { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

.mtr-defs { position: absolute; }
.mtr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e7eaf3;
  border-radius: 20px;
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: 0 24px 48px -34px rgba(20, 30, 60, 0.35);
}
.mtr-card__label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7486;
}
/* la única nota verde del panel: los deltas de crecimiento */
.mtr-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-accent-tint);
  color: var(--brand-accent);
  font-size: 0.72rem;
  font-weight: 800;
  font-style: normal;
  white-space: nowrap;
}

.mtr-chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.mtr-chart__meta { display: flex; flex-direction: column; gap: 8px; }
.mtr-chart__value { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mtr-chart__value b {
  font-size: clamp(1.9rem, 2.6vw, 2.45rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mtr-chart__vs { font-size: 0.76rem; font-weight: 600; font-style: normal; color: #8b93a3; }
.mtr-chart__plot {
  position: relative;
  padding-left: 34px;
  /* el gráfico absorbe el alto sobrante de la tarjeta: nada de espacio muerto */
  flex: 1;
  display: flex;
  min-height: 216px;
}
.mtr-chart__tick {
  position: absolute;
  left: 0;
  width: 24px;
  transform: translateY(-50%);
  text-align: right;
  font-size: 0.66rem;
  font-weight: 600;
  color: #9aa3b2;
  font-variant-numeric: tabular-nums;
}
.mtr-chart__area { position: relative; flex: 1; }
.mtr-chart__area svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mtr-chart__grid { stroke: #eef1f8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mtr-chart__grid--base { stroke: #e2e7f2; }
.mtr-chart__cross { stroke: #cdd6e8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mtr-chart__fill { fill: url(#mtrArea); }
.mtr-chart__line {
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* puntos como HTML (no se deforman al estirar el svg), con anillo blanco */
.mtr-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brand-blue);
  border: 2.5px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(20, 30, 60, 0.28);
}
.mtr-chart__x {
  display: flex;
  justify-content: space-between;
  padding-left: 34px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #9aa3b2;
}

/* --- score digital --- */
.mtr-score__body { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.mtr-score__ring { position: relative; flex: none; width: 112px; height: 112px; }
.mtr-score__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.mtr-score__track { fill: none; stroke: #e9edf6; stroke-width: 10; }
.mtr-score__fill {
  fill: none;
  stroke: url(#mtrRing);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 82 100;
}
.mtr-score__num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mtr-score__num b { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.mtr-score__num i { margin-top: 3px; font-size: 0.66rem; font-weight: 700; font-style: normal; color: #9aa3b2; }
.mtr-score__side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mtr-score__side p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); }

/* --- KPIs del mes --- */
.mtr-kpis__list { list-style: none; margin: 0; padding: 0; }
.mtr-kpis__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
}
.mtr-kpis__list li + li { border-top: 1px solid #eef1f7; }
.mtr-kpis__list li:last-child { padding-bottom: 2px; }
.mtr-kpis__name { font-size: 0.88rem; font-weight: 600; color: #3c4658; }
.mtr-kpis__val { display: flex; align-items: center; gap: 10px; }
.mtr-kpis__val b { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.mtr-kpis__note {
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f4fa;
  font-size: 0.72rem;
  font-weight: 700;
  font-style: normal;
  color: #6b7486;
  white-space: nowrap;
}

/* --- del informe a la acción --- */
.mtr-flow { grid-column: 1 / -1; gap: 16px; }
.mtr-flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.mtr-flow__steps li { display: flex; gap: 14px; align-items: flex-start; }
.mtr-flow__steps li + li {
  border-left: 1px solid #eef1f7;
  padding-left: clamp(16px, 2vw, 28px);
}
.mtr-flow__ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
}
.mtr-flow__ico svg { width: 20px; height: 20px; }
.mtr-flow__steps h3 { margin: 2px 0 5px; font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.mtr-flow__steps p { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--ink-soft); }

.metrics__actions {
  margin-top: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.metrics__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-blue);
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}
.metrics__link:hover { gap: 10px; color: var(--brand-blue-dark); }

@media (max-width: 920px) {
  .mtr-flow__steps { grid-template-columns: 1fr; gap: 18px; }
  .mtr-flow__steps li + li { border-left: 0; padding-left: 0; border-top: 1px solid #eef1f7; padding-top: 18px; }
}
@media (max-width: 460px) {
  .mtr-chart__tick { display: none; }
  .mtr-chart__plot, .mtr-chart__x { padding-left: 0; }
  .mtr-score__body { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .metrics__live { animation: none; }
}

/* ============================================================
   PRUEBA DE CONFIANZA — slim dark reassurance band under the hero
   (low-commitment, no small print; bridges hero → plataforma)
   ============================================================ */
.trust {
  position: relative;
  z-index: 2;
  padding: clamp(26px, 3.6vw, 42px) 24px;
  background: linear-gradient(180deg, #080b16 0%, #05070e 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.trust__inner { max-width: 1120px; margin: 0 auto; }
.trust__eyebrow {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-accent-bright);
}
.trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.trust__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(43, 212, 154, 0.10);
  border: 1px solid rgba(43, 212, 154, 0.24);
  color: var(--brand-accent-bright);
}
.trust__icon svg { width: 19px; height: 19px; }
.trust__label {
  font-size: 0.855rem;
  line-height: 1.34;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #cfd7e6;
}

@media (max-width: 960px) {
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
  .trust__item:last-child { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 480px) {
  .trust { padding: 26px 20px; }
  .trust__list { grid-template-columns: 1fr; gap: 15px; }
  .trust__item:last-child { grid-column: auto; justify-content: flex-start; }
  .trust__label { font-size: 0.9rem; }
}

/* Confianza operativa — folded into the light Garantía band (was the dark #confianza strip).
   Sits full-width beneath the 2-col grid, recoloured for a light background. */
.trust--merged {
  grid-column: 1 / -1;
  background: none;
  border: 0;
  padding: 0;
  margin-top: clamp(34px, 4.4vw, 58px);
}
.trust--merged .trust__inner {
  max-width: none;
  /* frosted panel so the fine print stays legible over the bottom-left globe */
  background: rgba(248, 251, 255, 0.72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(20, 30, 60, 0.08);
  border-radius: 20px;
  padding: clamp(24px, 2.8vw, 34px) clamp(22px, 3vw, 40px);
  box-shadow: 0 20px 44px -30px rgba(20, 30, 60, 0.35);
}
.trust--merged .trust__eyebrow { color: var(--brand-blue); }
.trust--merged .trust__icon {
  background: #fff;
  border: 1px solid rgba(233, 236, 244, 0.9);
  color: var(--brand-blue);
  box-shadow: 0 10px 22px -14px rgba(20, 30, 60, 0.30);
}
.trust--merged .trust__label { color: var(--ink-soft); }

/* ===================== PARA QUIÉN ES (dark bridge → plataforma) ===================== */
/* Same deep-space black as the hero's faded lower edge and the .plat section
   below, so hero → trust → wfor → plataforma read as one continuous dark field.
   A faint dual glow lifts the sector cards off the black. */
.wfor {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #030509;
  padding: clamp(60px, 8.5vh, 116px) 24px clamp(64px, 9vh, 120px);
}
.wfor__glow {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 20% 4%, rgba(47, 85, 236, 0.16) 0%, transparent 60%),
    radial-gradient(48% 44% at 86% 30%, rgba(43, 212, 154, 0.09) 0%, transparent 62%);
}
.wfor__inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }

.wfor__head { max-width: 640px; margin: 0 auto; text-align: center; }
.wfor__eyebrow {
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #93a3c4;
}
.wfor__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #f4f7fc;
}
/* Brighter emerald so the accent stays vivid against near-black (matches hero). */
.wfor__accent { color: var(--brand-accent-bright); }
.wfor__lead {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: rgba(226, 232, 244, 0.74);
}
/* Payoff phrase — brighter, so the "sin equipo interno" promise lands. */
.wfor__lead-em {
  color: #eef2f9;
  font-weight: 600;
}

.wfor__grid {
  list-style: none;
  margin: clamp(30px, 4.4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.wfor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: clamp(20px, 2.4vw, 28px) 14px;
  border-radius: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.wfor-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(47, 85, 236, 0.5);
}
.wfor-card__icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #9db4ff;
  background: rgba(47, 85, 236, 0.14);
  border: 1px solid rgba(47, 85, 236, 0.22);
}
.wfor-card__icon svg { width: 23px; height: 23px; }
.wfor-card__label {
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #e7ecf6;
}

@media (max-width: 860px) {
  .wfor__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .wfor__grid { gap: 10px; }
  .wfor-card { padding: 18px 10px; gap: 11px; }
}

/* ============================================================
   LA PLATAFORMA · TU SPACE — dark showcase + dashboard product-shot
   ============================================================ */
.plat {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Pure "deep space" black. The real Earth keeps turning behind it (see
     .plat__globe) — super-blurred and darkened — so the black background
     shifts colour a little as you scroll and the planet rotates. */
  background: #030509;
  padding: clamp(72px, 10vh, 130px) 24px clamp(66px, 9vh, 118px);
}

/* The hero globe "continues" behind this section: a second, self-contained
   Earth (scripts/plat-globe.js) rendered full-bleed, then blurred into oblivion
   and sunk toward black by CSS. You don't read it as a planet — just as a faint,
   living colour in the dark that drifts as the world spins on scroll. */
.plat__globe {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(70px) brightness(0.6) saturate(1.15);
  /* vignette: colour lives toward the centre/top, dissolving to pure black at
     the edges so there is no visible planet silhouette */
  -webkit-mask-image: radial-gradient(120% 92% at 50% 34%, #000 0%, #000 34%, transparent 82%);
          mask-image: radial-gradient(120% 92% at 50% 34%, #000 0%, #000 34%, transparent 82%);
}
.plat__glow {
  position: absolute;
  z-index: 0;
  top: 46%;
  left: 50%;
  width: min(860px, 92%);
  height: 500px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(50% 50% at 38% 42%, rgba(47, 85, 236, 0.22) 0%, transparent 70%),
    radial-gradient(46% 46% at 66% 58%, rgba(43, 212, 154, 0.16) 0%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
}
/* Top-edge fade that mirrors the hero's bottom fade: the section's decorative
   layers (blurred Earth + glow) bleed all the way to the top edge, which would
   start a touch bluer than the pure #030509 the hero fades down to — a faint
   step right at the seam. This paints #030509 over the top strip and eases it
   away, so .plat begins at exactly the hero's ending colour. Sits above the
   decor (z0) but below the content (z1, which follows in DOM order). */
.plat::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(120px, 22vh, 280px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #030509 0%,
    rgba(3, 5, 9, 0.7) 40%,
    rgba(3, 5, 9, 0) 100%
  );
}
.plat__inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
}

/* header (light on dark) */
.plat__head { max-width: 660px; margin: 0 auto; text-align: center; }
.plat__eyebrow {
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #8ea6ff;
}
.plat__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
}
.plat__accent { color: var(--brand-accent-bright); }
.plat__lead {
  margin: 16px auto 0;
  max-width: 520px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: rgba(214, 223, 242, 0.74);
}

/* example switcher: restaurante · hotel */
.plat-switch {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: clamp(22px, 3vw, 30px) auto 0;
}
.plat-switch__btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(222, 230, 247, 0.85);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.plat-switch__btn:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
.plat-switch__btn:focus-visible { outline: 2px solid #8ea6ff; outline-offset: 2px; }
.plat-switch__btn.is-active {
  background: #fff;
  border-color: #fff;
  color: #10182c;
  cursor: default;
}

/* stage + product shot */
.plat__stage {
  position: relative;
  margin: clamp(34px, 5vw, 56px) auto 0;
  max-width: 960px;
}
.plat-shot {
  position: relative;
  z-index: 2;
  margin: 0;
  border-radius: 16px;
  background: #fbfcfe;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 2px 0 0 rgba(255, 255, 255, 0.05) inset,
    0 40px 90px -30px rgba(0, 0, 0, 0.7),
    0 18px 50px -24px rgba(47, 85, 236, 0.5);
  overflow: hidden;
}
.plat-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* marco de producto: barra mínima con solo la dirección, sin cromo de navegador */
.plat-shot__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  background: #f4f6fb;
  border-bottom: 1px solid #e2e6ef;
}
.plat-shot__url {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #e2e6ef;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 300px;
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.05);
}
.plat-shot__url svg { width: 13px; height: 13px; color: var(--brand-accent); }

/* app body: sidebar + main */
.plat-app {
  display: grid;
  grid-template-columns: 186px 1fr;
  background: #f4f6fb;
}
.plat-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px;
  background: #fff;
  border-right: 1px solid #e9ecf4;
}
/* business switcher — the person's active negocio (they can hold several) */
.plat-side__biz {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 6px;
  border: 1px solid #e9ecf4;
  border-radius: 11px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 12px -10px rgba(20, 30, 60, 0.5);
}
.plat-side__bizlogo {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eef0f6;
  display: grid;
  place-items: center;
}
.plat-side__bizlogo img { width: 100%; height: 100%; object-fit: contain; }
/* letter-mark fallbacks while a sector example has no real logo yet */
.plat-bizfb {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  font-style: normal;
  color: #fff;
}
.plat-tagfb {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  font-style: normal;
  color: #fff;
}
.plat-side__bizmeta { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.plat-side__bizmeta b {
  /* 0.7rem: "La Perla" entra sin elipsis en el switcher colapsado */
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plat-side__bizmeta i {
  font-style: normal;
  font-size: 0.63rem;
  color: var(--eyebrow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plat-side__bizcaret { width: 13px; height: 13px; flex: none; margin-left: 2px; color: #aab2c2; }
.plat-side__search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 9px;
  background: #f4f6fb;
  border: 1px solid #e9ecf4;
  font-size: 0.76rem;
  color: #9aa3b2;
}
.plat-side__search svg { width: 14px; height: 14px; flex: none; }
.plat-side__search kbd {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.64rem;
  color: #aab2c2;
  background: #fff;
  border: 1px solid #e6e9f1;
  border-radius: 5px;
  padding: 1px 5px;
}
.plat-side__nav { display: flex; flex-direction: column; gap: 2px; }
.plat-side__grp {
  margin: 9px 0 2px 8px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #aab2c2;
}
.plat-side__grp:first-child { margin-top: 0; }
.plat-side__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7486;
}
.plat-side__item svg { width: 16px; height: 16px; flex: none; }
.plat-side__item.is-active { background: var(--brand-blue-tint); color: var(--brand-blue); font-weight: 600; }
.plat-side__count {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand-accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
}
.plat-side__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid #eef0f6;
}
.plat-side__avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #eef0f6;
}
.plat-side__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plat-avfb {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  font-style: normal;
  color: #fff;
}
.plat-side__me {
  display: flex;
  flex-direction: column;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.plat-side__me b { font-weight: 500; font-size: 0.68rem; color: var(--eyebrow); }

/* main column */
.plat-main {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.plat-main__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.plat-main__biztag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e9ecf4;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.plat-main__biztag img {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
}
.plat-main__biztag em {
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 2px;
}
.plat-main__hi {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.plat-main__sub { margin: 3px 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.plat-main__sub b { color: var(--brand-accent); font-weight: 700; }
.plat-main__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.plat-main__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e9ecf4;
  color: #6b7486;
}
.plat-main__icon svg { width: 16px; height: 16px; }
.plat-main__icon.has-dot::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f6685e;
  border: 1.5px solid #fff;
}
.plat-main__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--brand-accent-tint);
  color: var(--brand-accent);
  font-size: 0.7rem;
  font-weight: 700;
}
.plat-main__live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-accent);
}

/* card base */
.plat-card {
  background: #fff;
  border: 1px solid #e9ecf4;
  border-radius: 13px;
  padding: 13px 14px;
  box-shadow: 0 6px 18px -14px rgba(20, 30, 60, 0.4);
  display: flex;
  flex-direction: column;
}
.plat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.plat-card__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b7486;
  text-transform: uppercase;
}
.plat-card__note { font-size: 0.66rem; color: var(--eyebrow); font-weight: 600; }

/* KPI stat row */
.plat-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}
.plat-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 108px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e9ecf4;
  box-shadow: 0 6px 18px -14px rgba(20, 30, 60, 0.4);
}
.plat-stat__label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7486;
}
.plat-stat__num {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.plat-stat__num b { font-weight: 800; }
.plat-stat__unit { font-size: 0.9rem; font-weight: 700; color: var(--eyebrow); }
.plat-stat__delta { margin-top: auto; font-size: 0.66rem; font-weight: 700; color: var(--ink-soft); }
.plat-stat__delta.is-up { color: var(--brand-accent); }
/* score stat with ring */
.plat-stat--score .plat-stat__ringwrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.plat-stat__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.plat-stat__ring-track { fill: none; stroke: #eaedf4; stroke-width: 7; }
.plat-stat__ring-fill {
  fill: none;
  stroke: url(#platRing);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: var(--ring-off, 18); /* 100 − score; per-example via JS */
}
.plat-stat__ringnum {
  position: absolute;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
/* visibility bar */
.plat-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #eef0f6;
  overflow: hidden;
  margin: 2px 0;
}
.plat-bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-blue), #6f8bff);
}
/* mini sparkline (clientes) */
.plat-mini-spark { display: block; height: 26px; margin: 2px 0; }
.plat-mini-spark svg { width: 100%; height: 100%; }
.plat-mini-spark__area { fill: rgba(5, 150, 105, 0.12); }
.plat-mini-spark__line {
  fill: none;
  stroke: var(--brand-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* stars (reseñas) */
.plat-stars { display: inline-flex; gap: 1px; color: #f5b301; }
.plat-stars svg { width: 13px; height: 13px; }

/* hero performance chart */
.plat-chart { gap: 10px; }
.plat-chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.plat-chart__legend { display: inline-flex; gap: 12px; margin-top: 7px; }
.plat-chart__leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.plat-chart__leg i { width: 9px; height: 9px; border-radius: 3px; }
.plat-chart__leg.is-visits i { background: var(--brand-blue); }
.plat-chart__leg.is-conv i { background: var(--brand-accent-bright); }
.plat-chart__now { font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.plat-chart__now b {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ink);
  margin-left: 4px;
  letter-spacing: -0.01em;
}
.plat-chart__plot { position: relative; height: 172px; }
.plat-chart__svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 152px; }
.plat-chart__grid { stroke: #edf0f6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.plat-chart__area { fill: url(#platChartFill); }
.plat-chart__line {
  fill: none;
  stroke: url(#platChartLine);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.plat-chart__line2 {
  fill: none;
  stroke: var(--brand-accent-bright);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
}
.plat-chart__pulse { position: absolute; top: 25px; right: 4px; width: 0; height: 0; }
.plat-chart__pulse i {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-accent-bright);
  box-shadow: 0 0 0 3px rgba(43, 212, 154, 0.18);
}
.plat-chart__pulse i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--brand-accent-bright);
}
.plat-chart__xaxis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  font-weight: 600;
  color: #aab2c2;
}

/* bottom row */
.plat-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

/* competitive rank */
.plat-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plat-rank__row {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr 24px;
  align-items: center;
  gap: 9px;
}
.plat-rank__name {
  font-size: 0.73rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plat-rank__name em {
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
  padding: 1px 5px;
  border-radius: 5px;
  margin-left: 3px;
}
.plat-rank__track { height: 8px; border-radius: 999px; background: #eef0f6; overflow: hidden; }
.plat-rank__track i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: #c3ccdd;
  animation: platBar 1.2s cubic-bezier(.3, .8, .3, 1) both;
}
.plat-rank__row.is-you .plat-rank__name { color: var(--ink); font-weight: 700; }
.plat-rank__row.is-you .plat-rank__track i { background: linear-gradient(90deg, var(--brand-blue), #2bd49a); }
.plat-rank__val { font-size: 0.73rem; font-weight: 700; color: var(--ink); text-align: right; }

/* recomendaciones IA */
.plat-chip-ia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
  padding: 3px 8px;
  border-radius: 999px;
}
.plat-chip-ia svg { width: 12px; height: 12px; }
.plat-reco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.plat-reco__item { display: flex; align-items: center; gap: 9px; font-size: 0.76rem; color: var(--ink); }
.plat-reco__mark {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 1.6px solid #cfd6e3;
  display: grid;
  place-items: center;
}
.plat-reco__mark svg { width: 12px; height: 12px; color: #fff; }
.plat-reco__item.is-done { color: var(--ink-soft); }
.plat-reco__item.is-done .plat-reco__mark { background: var(--brand-accent); border-color: var(--brand-accent); }
.plat-reco__tag {
  margin-left: auto;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--brand-accent);
  background: var(--brand-accent-tint);
  padding: 2px 7px;
  border-radius: 999px;
}

/* value props under the shot */
.plat__feats {
  list-style: none;
  margin: clamp(30px, 4vw, 46px) auto 0;
  padding: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 980px) {
  .plat__feats { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
}
.plat__feats li { font-size: 0.9rem; line-height: 1.55; color: rgba(214, 223, 242, 0.7); }
.plat__feats b { display: block; color: #fff; font-weight: 700; margin: 11px 0 3px; font-size: 0.95rem; }
.plat__feat-ic {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #cdd8ff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.plat__feat-ic svg { width: 19px; height: 19px; }

/* cta */
.plat__cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: clamp(28px, 4vw, 42px) auto 0;
  flex-wrap: wrap;
}

/* ── Live popups: JS keeps up to 3 cards orbiting the shot. Each card is
   centre-anchored and positioned by JS via `transform` (the scroll-driven
   vortex); the cursor parallax rides on the separate `translate` property so
   the two compose without fighting. Entrance is opacity-only. See main.js. */
.plat-floats {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  --mx: 0; /* cursor X, −1 … 1 (JS) */
  --my: 0; /* cursor Y, −1 … 1 (JS) */
}
.pfloat {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 244px;
  padding: 10px 13px;
  border-radius: 13px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.55);
  translate: calc(var(--mx) * var(--pf, 10) * 1px) calc(var(--my) * var(--pf, 10) * 1px); /* cursor parallax, both axes */
  transform: translate(-50%, -50%); /* JS overrides with the vortex position */
  opacity: 0;
  /* The opacity transition is the swap fallback under reduced motion, where
     the pfFade animations are disabled. */
  transition: opacity 0.5s ease;
  will-change: transform, translate, opacity;
}
.pfloat.is-in  { opacity: 1; animation: pfFadeIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.pfloat.is-out { animation: pfFadeOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* icon-style popups (reservas, score, leads, visitas, ranking, IA) */
.pfloat__ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
}
.pfloat__ic svg { width: 17px; height: 17px; }
.pfloat__ic--blue { background: var(--brand-blue-tint); color: var(--brand-blue); }
.pfloat__ic--emerald { background: var(--brand-accent-tint); color: var(--brand-accent); }
.pfloat__ic--amber { background: rgba(245, 179, 1, 0.15); color: #d9920a; }
.pfloat__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pfloat__txt b { font-size: 0.78rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pfloat__txt i { font-style: normal; font-size: 0.68rem; color: var(--ink-soft); white-space: nowrap; }

/* review popups: real customer photo + person name + stars + a real comment */
.pfloat--review { align-items: flex-start; gap: 9px; max-width: 238px; }
.pfloat__ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  object-fit: cover; background: #f3f5fa; box-shadow: 0 0 0 2px #fff;
}
.pfloat__rv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pfloat__rvtop { display: flex; align-items: center; gap: 6px; }
.pfloat__name { font-size: 0.76rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pfloat__stars { display: inline-flex; gap: 1px; color: #f5b301; flex: none; }
.pfloat__stars svg { width: 12px; height: 12px; }
.pfloat__quote {
  font-size: 0.7rem; line-height: 1.35; color: var(--ink-soft); font-style: normal;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Continuous, always-on micro-motion (motion users only; disabled below). */
.plat-main__live i { animation: platPulse 1.8s ease-in-out infinite; }
.plat-chart__pulse i::after { animation: platPing 1.9s ease-out infinite; }

/* Reveal choreography — default state above is the final/resting look, so the
   dashboard is fully readable with no JS. JS adds .is-anim to arm the "start"
   states, then .is-live (on scroll into view) to animate to final. */
.plat-shot.is-anim .plat-bar i,
.plat-shot.is-anim .plat-rank__track i { width: 0; }
.plat-shot.is-anim .plat-stat__ring-fill { stroke-dashoffset: 100; }
/* Reveal the chart by wiping the whole SVG in from the left. The lines stay
   solid (no dash math), so they always render fully to the right edge — the
   pathLength+non-scaling-stroke dash trick used to fall short here. */
.plat-shot.is-anim .plat-chart__svg { clip-path: inset(0 100% 0 0); }

.plat-shot.is-live .plat-bar i { animation: platBar 1.1s cubic-bezier(.3, .8, .3, 1) forwards; }
.plat-shot.is-live .plat-rank__track i { animation: platBar 1.1s cubic-bezier(.3, .8, .3, 1) 0.15s forwards; }
.plat-shot.is-live .plat-stat__ring-fill { animation: platRingFill 1.5s cubic-bezier(.3, .8, .3, 1) forwards; }
.plat-shot.is-live .plat-chart__svg { animation: platWipe 1.7s cubic-bezier(.4, 0, .2, 1) forwards; }

@keyframes platPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
@keyframes platPing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes platRingFill { from { stroke-dashoffset: 100; } to { stroke-dashoffset: var(--ring-off, 18); } }
@keyframes platBar { from { width: 0; } to { width: var(--w); } }
@keyframes platWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }

/* example switch: the app body takes a quick settle-in breath (JS skips this
   class entirely under reduced motion) */
.plat-shot.is-swap .plat-app { animation: platSwapIn 0.45s cubic-bezier(.3, .8, .3, 1); }
@keyframes platSwapIn { from { opacity: 0.2; transform: translateY(10px); } }

/* Popup swap: clean sequenced fade. The old card melts away on opacity alone
   (plus a faint settle in scale) until it is completely gone, and only then
   does the new one breathe in — JS staggers the two, so no residue, texture or
   overlap is ever visible. */
@keyframes pfFadeIn {
  from { opacity: 0; scale: 0.955; }
  to   { opacity: 1; scale: 1; }
}
@keyframes pfFadeOut {
  from { opacity: 1; scale: 1; }
  to   { opacity: 0; scale: 0.96; }
}

/* responsive */
@media (max-width: 1180px) {
  .plat-floats { display: none; }
}
@media (max-width: 880px) {
  .plat-app { grid-template-columns: 1fr; }
  .plat-side {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid #e9ecf4;
    gap: 10px 14px;
  }
  .plat-side__search { order: 3; margin-left: auto; min-width: 150px; }
  .plat-side__grp { display: none; }
  .plat-side__nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .plat-side__foot { margin: 0 0 0 auto; padding: 0; border: 0; }
  .plat-stats { grid-template-columns: repeat(2, 1fr); }
  .plat__feats { grid-template-columns: 1fr; gap: 16px; max-width: 460px; text-align: left; }
}
@media (max-width: 620px) {
  .plat-side__nav { display: none; }
  .plat-grid2 { grid-template-columns: 1fr; }
  .plat-chart__now { display: none; }
}
@media (max-width: 460px) {
  .plat-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .plat-main { padding: 14px; }
  .plat-stat__num { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .plat-main__live i,
  .plat-chart__pulse i::after,
  .plat-shot.is-live .plat-bar i,
  .plat-shot.is-live .plat-rank__track i,
  .plat-shot.is-live .plat-stat__ring-fill,
  .plat-shot.is-live .plat-chart__svg { animation: none; }
  .plat-shot.is-anim .plat-chart__svg { clip-path: none; }
  /* popups sit static (JS places them via transform) and only cross-fade;
     no cursor parallax offset */
  .pfloat {
    transition: opacity 0.5s ease;
    translate: none;
    animation: none !important;
    scale: none;
  }
}

/* ============================================================================
   LANDING v3 — plataforma de digitalización (Tu Space + gestores + servicios)
   Piezas nuevas: gestores, flujo, sector board, marketing, chat del mockup.
   ========================================================================== */

/* --- sección gestores: cards sin enlace (mismo look que pillar-card) ------- */
.what--gestores .pillar-card { cursor: default; }
.gestores-quote {
  margin: clamp(30px, 4.5vw, 52px) auto 0;
  max-width: 720px;
  text-align: center;
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  color: var(--ink, #161a22);
}
.gestores-quote strong { color: #2f55ec; }

/* --- 6 cards de servicios: 3 columnas ------------------------------------- */
.what__pillars--six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .what__pillars--six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .what__pillars--six { grid-template-columns: 1fr; } }

.how__cta { margin-top: clamp(30px, 4vw, 46px); text-align: center; }

.reach__sectors {
  list-style: none;
  margin: clamp(26px, 3.5vw, 40px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}
.reach__sectors li {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #3c4658;
  background: #fff;
  border: 1px solid #e2e6f0;
  box-shadow: 0 8px 18px -12px rgba(20, 30, 60, 0.22);
}

/* --- módulo de marketing: flujo numerado dentro del panel ------------------ */
.mkt-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  counter-reset: none;
}
.mkt-flow li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink, #161a22);
  border-bottom: 1px solid #eceef5;
}
.mkt-flow li:last-child { border-bottom: 0; }
.mkt-flow b {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  color: #2f55ec;
  background: rgba(47, 85, 236, 0.1);
}
.mkt-flow li:last-child b { color: #056d4f; background: #e9f9f2; }

/* --- mockup: tarjeta de chat del gestor digital ----------------------------- */
.plat-chat { display: flex; flex-direction: column; gap: 8px; }
.plat-chat__msg {
  margin: 0;
  max-width: 92%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.74rem;
  line-height: 1.45;
}
.plat-chat__msg--me {
  align-self: flex-end;
  color: #eef2ff;
  background: rgba(47, 85, 236, 0.42);
  border: 1px solid rgba(93, 128, 255, 0.4);
  border-bottom-right-radius: 4px;
}
.plat-chat__msg--ia {
  align-self: flex-start;
  color: rgba(226, 233, 248, 0.92);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom-left-radius: 4px;
}
.plat-chat__done {
  margin: 4px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #7ce8c0;
}
.plat-chat__done svg { width: 13px; height: 13px; }


/* --- CTA final con acción secundaria ---------------------------------------- */
.ftr-cta__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ftr-cta__link {
  color: rgba(226, 233, 248, 0.85);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 233, 248, 0.3);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.ftr-cta__link:hover { color: #fff; border-color: #fff; }

/* ============================================================================
   LANDING v4 — 8 bloques fuertes: sistema de pasos, pilares grandes, caso por
   sector, panel de métricas. Menos cards pequeñas, más jerarquía y aire.
   ========================================================================== */

/* --- mockup más protagonista + leads más legibles --------------------------- */
.plat-shot { max-width: 1120px; }
.what__lead, .how__lead, .reach__lead, .metrics__lead, .prc__lead { font-size: 1.06rem; line-height: 1.65; }

/* --- CÓMO FUNCIONA: sistema de 4 pasos conectados --------------------------- */
.howflow {
  list-style: none;
  margin: clamp(36px, 5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
}
/* raíl que conecta los nodos */
.howflow::before {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(12.5% );
  right: calc(12.5%);
  height: 2px;
  background: linear-gradient(90deg, #cdd7f3 0%, #cdd7f3 66%, #9fe3c8 100%);
  z-index: 0;
}
.howstep { position: relative; z-index: 1; text-align: left; }
.howstep__node {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #2f55ec;
  color: #2f55ec;
  font-size: 0.95rem;
  box-shadow: 0 10px 24px -14px rgba(47, 85, 236, 0.55);
  margin-bottom: 14px;
}
.howstep__node b { font-weight: 800; }
.howstep__node--done { border-color: #0aa574; color: #0aa574; box-shadow: 0 10px 24px -14px rgba(10, 165, 116, 0.5); }
.howstep__who {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5b6472;
  background: #eef1f8;
}
.howstep__who--ia { color: #2746d6; background: rgba(47, 85, 236, 0.1); }
.howstep__who--human { color: #7c3aed; background: rgba(124, 58, 237, 0.1); }
.howstep__who--done { color: #056d4f; background: #e9f9f2; }
.howstep__title { margin: 0 0 6px; font-size: 1.12rem; font-weight: 800; color: var(--ink, #161a22); }
.howstep__desc { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #5b6472; }
@media (max-width: 980px) {
  .howflow { grid-template-columns: repeat(2, 1fr); }
  .howflow::before { display: none; }
}
@media (max-width: 560px) { .howflow { grid-template-columns: 1fr; } }

/* --- QUÉ PUEDES GESTIONAR: 4 pilares grandes -------------------------------- */
.what__pillars--big { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 1040px; margin-left: auto; margin-right: auto; }
.pillar-big {
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 20px;
  padding: clamp(26px, 3vw, 36px);
  box-shadow: 0 22px 44px -26px rgba(20, 30, 60, 0.18);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}
.pillar-big:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -26px rgba(20, 30, 60, 0.26); }
.pillar-big__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: #2f55ec;
  background: rgba(47, 85, 236, 0.09);
  margin-bottom: 16px;
}
.pillar-big__icon svg { width: 26px; height: 26px; }
.pillar-big__name { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; color: var(--ink, #161a22); }
.pillar-big__desc { margin: 0 0 16px; font-size: 0.98rem; line-height: 1.6; color: #5b6472; }
.pillar-big__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.pillar-big__tags li {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #3c4658;
  background: #f2f5fb;
  border: 1px solid #e2e6f0;
}
@media (max-width: 860px) { .what__pillars--big { grid-template-columns: 1fr; } }


/* ============================================================================
   LANDING v5 — corrección visual: planeta de vuelta, sector limpio, flujo de
   5 pasos, métricas más producto, pricing con "ver todo".
   ========================================================================== */

/* --- sector: chips con aire -------------------------------------------------- */
.reach__sectors { margin-top: clamp(36px, 5vw, 60px); gap: 10px 12px; }
.reach__sectors li { padding: 9px 17px; }
.reach__actions { margin-top: clamp(30px, 4vw, 46px); }

/* --- flujo: 5 pasos con icono, en tarjetas ligeras y raíl ------------------- */
.howflow--five { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.howflow--five::before { left: 10%; right: 10%; }
.howflow--five .howstep {
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 18px;
  padding: 20px 18px 22px;
  box-shadow: 0 18px 36px -24px rgba(20, 30, 60, 0.18);
}
.howflow--five .howstep__node { margin-top: -44px; margin-bottom: 12px; }
.howstep__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #2f55ec;
  background: rgba(47, 85, 236, 0.09);
  margin-bottom: 12px;
}
.howstep__icon svg { width: 20px; height: 20px; }
.howstep__icon--done { color: #0aa574; background: rgba(10, 165, 116, 0.1); }
.howflow--five .howstep__title { font-size: 1.02rem; }
.howflow--five .howstep__desc { font-size: 0.9rem; }
@media (max-width: 1080px) {
  .howflow--five { grid-template-columns: repeat(2, 1fr); }
  .howflow--five::before { display: none; }
  .howflow--five .howstep__node { margin-top: 0; }
}
@media (max-width: 560px) { .howflow--five { grid-template-columns: 1fr; } }

/* --- claridad: fondo azul claro para la transición a precios ---------------- */
.grnt-sec { background: linear-gradient(180deg, #f2f6ff 0%, #eaf1ff 100%); }


/* --- flujo v5: a ancho completo, cabecera centrada, raíl alineado ----------- */
.how__inner { display: block; }
.how__head { max-width: 780px; margin: 0 auto; text-align: center; }
.howflow--five { margin-top: clamp(40px, 5vw, 64px); }
.howflow--five .howstep__node { margin-top: 0; }
.howflow--five::before { top: 44px; left: 9%; right: 9%; }
.howflow--five .howstep { text-align: center; }
.howflow--five .howstep__node { margin-left: auto; margin-right: auto; }
.howflow--five .howstep__icon { margin-left: auto; margin-right: auto; display: grid; }
.howflow--five .howstep__title { font-size: 1.05rem; min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
.how__cta { text-align: center; }
.gestores-quote { text-align: center; }
.how__head .how__lead { margin-left: auto; margin-right: auto; }

/* ============================================================================
   LANDING v6 — correcciones de composición (títulos en 2 líneas, 3+3, escala)
   ========================================================================== */
/* títulos partidos en DOS líneas limpias, sin cortes raros */
.grnt-sec__title .line-1,
.grnt-sec__title .line-2,
.what__title .line-1,
.what__title .line-2,
.prc__title .line-1,
.prc__title .line-2 { display: block; }
.grnt-sec__title { font-size: clamp(2rem, 3.1vw, 2.7rem); }

/* claridad: los 6 puntos en dos columnas de 3 (no en una tira) */
.grnt-sec__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 38px);
}
@media (max-width: 760px) { .grnt-sec__list { grid-template-columns: 1fr; } }

/* pilares a escala original: cards sin cursor de enlace */
.what__pillars .pillar-card { cursor: default; }

/* ============================================================================
   LANDING v7 — "Qué puedes gestionar" reconstruido: cards con mini-viñetas de
   producto (mismo lenguaje que el mockup y el panel del restaurante).
   ========================================================================== */
.mg-grid {
  margin-top: clamp(34px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 860px) { .mg-grid { grid-template-columns: 1fr; } }

.mg-card {
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 20px;
  padding: 18px 26px 26px;
  box-shadow: 0 22px 44px -26px rgba(20, 30, 60, 0.18);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}
.mg-card:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -26px rgba(20, 30, 60, 0.26); }
.mg-card__name { margin: 18px 0 6px; font-size: 1.18rem; font-weight: 800; color: var(--ink, #161a22); }
.mg-card__desc { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.6; color: #5b6472; }
.mg-card__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.mg-card__tags li {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #3c4658;
  background: #f2f5fb;
  border: 1px solid #e2e6f0;
}

/* la viñeta: franja de producto en miniatura */
.mg-card__viz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 128px;
  margin: 0 -8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, #f3f6ff 0%, #fbfcff 100%);
  border: 1px solid #e9edf8;
}

/* — ficha tipo Google — */
.mg-ficha { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e6e9f2; border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 20px -14px rgba(20,30,60,.25); }
.mg-ficha__logo { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .82rem; color: #fff; background: linear-gradient(135deg, #2f55ec, #5b8bff); }
.mg-ficha__lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mg-ficha__lines i { height: 7px; border-radius: 4px; background: #e6eaf4; }
.mg-ficha__lines i:first-child { width: 72%; background: #d8dff0; }
.mg-ficha__lines i:last-child { width: 46%; }
.mg-ficha__open { flex: none; font-size: .66rem; font-weight: 800; color: #056d4f; background: #e9f9f2; border: 1px solid #b8ecd7; border-radius: 999px; padding: 4px 9px; }
.mg-ficha__meta { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.mg-ficha__stars { font-size: .74rem; color: #f59e0b; font-weight: 700; letter-spacing: .04em; }
.mg-ficha__stars b { color: #3c4658; margin-left: 3px; }
.mg-ficha__pin { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: #5b6472; }
.mg-ficha__pin svg { width: 13px; height: 13px; color: #2f55ec; }

/* — score + barras — */
.mg-card__viz:has(.mg-score) { flex-direction: row; align-items: center; gap: 18px; }
.mg-score { position: relative; width: 66px; height: 66px; flex: none; }
.mg-score__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.mg-score__track { fill: none; stroke: #e6eaf4; stroke-width: 7; }
.mg-score__fill { fill: none; stroke: url(#platRing, #2f55ec); stroke: #2f55ec; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 82 100; }
.mg-score__num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: #161a22; }
.mg-bars { flex: 1; display: flex; align-items: flex-end; gap: 7px; height: 64px; }
.mg-bars i { flex: 1; height: var(--h, 50%); border-radius: 5px 5px 2px 2px; background: #cdd7f3; }
.mg-bars i.is-hi { background: linear-gradient(180deg, #38d9a9, #0aa574); }
.mg-delta { flex: none; font-size: .72rem; font-weight: 800; color: #0aa574; }

/* — tareas — */
.mg-task { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e6e9f2; border-radius: 12px; padding: 9px 11px; box-shadow: 0 10px 20px -14px rgba(20,30,60,.2); }
.mg-task.is-dim { opacity: .62; box-shadow: none; }
.mg-task__check { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #0aa574; color: #fff; }
.mg-task__check svg { width: 11px; height: 11px; }
.mg-task.is-dim .mg-task__check { background: transparent; border: 1.6px dashed #cbd3e4; }
.mg-task__txt { flex: 1; font-size: .78rem; font-weight: 700; color: #26303f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-task__chip { flex: none; font-size: .64rem; font-weight: 800; padding: 4px 8px; border-radius: 999px; color: #5b6472; background: #f2f5fb; border: 1px solid #e2e6f0; }
.mg-task__chip.is-ok { color: #056d4f; background: #e9f9f2; border-color: #b8ecd7; }

/* — calendario + post — */
.mg-cal { display: flex; gap: 7px; padding: 0 2px; }
.mg-cal i { flex: 1; height: 22px; border-radius: 7px; background: #e9edf8; }
.mg-cal i.is-on { background: linear-gradient(135deg, #2f55ec, #5b8bff); }
.mg-post { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e6e9f2; border-radius: 12px; padding: 9px 11px; box-shadow: 0 10px 20px -14px rgba(20,30,60,.2); }
.mg-post__img { width: 34px; height: 34px; flex: none; border-radius: 9px; background: linear-gradient(135deg, #cdd7f3, #e9edf8); }
.mg-post__lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mg-post__lines i { height: 7px; border-radius: 4px; background: #e6eaf4; }
.mg-post__lines i:first-child { width: 82%; background: #d8dff0; }
.mg-post__lines i:last-child { width: 55%; }
.mg-post__ok { flex: none; font-size: .66rem; font-weight: 800; color: #fff; background: #2f55ec; border-radius: 999px; padding: 5px 10px; }

/* ============================================================================
   LANDING v8 — pulido fino de frontend
   ========================================================================== */

/* --- cita: rompe limpio entre frases, la segunda nunca se corta ------------- */
.gestores-quote span { display: inline; }
.gestores-quote strong { white-space: nowrap; }
@media (max-width: 640px) {
  .gestores-quote span, .gestores-quote strong { display: block; white-space: normal; }
}

/* --- pasos: número como badge pequeño en la esquina, icono como protagonista,
       texto a la izquierda y flechas conectoras entre cards ------------------ */
.howflow--five { gap: 26px; }
.howflow--five::before { display: none; }        /* fuera el raíl: conectan las flechas */
.howflow--five .howstep { position: relative; text-align: left; padding: 22px 20px; }
.howflow--five .howstep__node {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  margin: 0;
  border-width: 1.6px;
  box-shadow: none;
  font-size: 0.72rem;
}
.howflow--five .howstep__icon { margin: 0 0 14px; }
.howflow--five .howstep__title {
  min-height: 0;
  display: block;
  text-align: left;
  font-size: 1.04rem;
  margin-bottom: 6px;
}
.howflow--five .howstep__desc { text-align: left; }
/* flecha conectora entre pasos */
.howflow--five .howstep:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2e6f0;
  color: #2f55ec;
  font-weight: 800;
  font-size: 0.82rem;
  box-shadow: 0 8px 16px -8px rgba(20, 30, 60, 0.35);
  z-index: 2;
}
@media (max-width: 1080px) {
  .howflow--five .howstep:not(:last-child)::after { display: none; }
}

/* ============================================================================
   LANDING v9 — sin flechas, números sin círculo, cards de gestión limpias
   ========================================================================== */
/* pasos: fuera flechas conectoras y fuera círculo del número */
.howflow--five .howstep:not(:last-child)::after { content: none; }
.howflow--five .howstep__node {
  border: 0;
  background: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
  color: #b9c2d4;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}
.howflow--five .howstep__node--done { color: #7ccfb2; }

/* cards de gestión: icono limpio en lugar de la viñeta */
.mg-card { padding: 26px; }
.mg-card__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  color: #2f55ec;
  background: rgba(47, 85, 236, 0.09);
}
.mg-card__icon svg { width: 24px; height: 24px; }
.mg-card__name { margin-top: 16px; }

/* título de la sección: dos líneas SIEMPRE (blindado) */
.what__title .line-1,
.what__title .line-2 { display: block !important; width: 100%; }

/* ============================================================================
   LANDING v10 — "Qué puedes gestionar" = UN DÍA CON VORSEO (command board)
   Raíl-cronología (4 momentos = 4 áreas) que pilota una ventana de producto
   estilo Tu Space; el dock de módulos se enciende según el área activa.
   JS: scripts/what.js · prefijo .gest- exclusivo de esta sección.
   Reglas de color intactas: azul = marca/data; verde SOLO deltas positivos
   (y los estados "Abierto/Aceptado", como en la ficha real de Google).
   ========================================================================== */
.gest {
  margin: clamp(36px, 5vw, 56px) auto 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
/* los hijos del grid nunca imponen su min-content (título nowrap del bar…) */
.gest > * { min-width: 0; }

/* --- raíl: un día cualquiera ---------------------------------------------- */
.gest-rail__cap {
  margin: 0 0 14px;
  padding-left: 40px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.gest-rail__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* la línea del día, continua bajo los nodos */
.gest-rail__steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  border-radius: 2px;
  background: #dbe1ef;
}
.gest-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 14px 16px 17px 40px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  font: inherit;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gest-step:hover { background: rgba(255, 255, 255, 0.65); }
.gest-step.is-on {
  background: #fff;
  border-color: #e7eaf3;
  box-shadow: 0 20px 40px -30px rgba(20, 30, 60, 0.45);
}
.gest-step:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
/* nodo sobre la línea del día */
.gest-step__node {
  position: absolute;
  left: 14px;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #c3ccdf;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.gest-step.is-done .gest-step__node {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
}
.gest-step.is-on .gest-step__node {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(47, 85, 236, 0.16);
}
.gest-step__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gest-step__meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.gest-step__time {
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #6b7486;
  background: #eef1f8;
  border-radius: 7px;
  padding: 3px 7px;
  transition: color 0.25s ease, background 0.25s ease;
}
.gest-step.is-on .gest-step__time { color: var(--brand-blue); background: var(--brand-blue-tint); }
.gest-step__name {
  font-size: 0.99rem;
  font-weight: 800;
  color: #4d5768;
  transition: color 0.25s ease;
}
.gest-step.is-on .gest-step__name { color: var(--ink); }
.gest-step__moment { font-size: 0.84rem; line-height: 1.5; color: #7d8697; }
.gest-step.is-on .gest-step__moment { color: var(--ink-soft); }
/* barra de progreso del autoplay — solo en el paso activo y en modo auto */
.gest-step__run {
  position: absolute;
  left: 40px;
  right: 16px;
  bottom: 9px;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(47, 85, 236, 0.1);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gest-step.is-on .gest-step__run { opacity: 1; }
.gest-step__run::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--brand-blue);
  transform: scaleX(0);
  transform-origin: left center;
}
.gest-step__run.is-run::after { animation: gestRun var(--gest-dur, 5200ms) linear forwards; }
.gest.is-hold .gest-step__run::after { animation-play-state: paused; }
.gest.is-manual .gest-step__run { display: none; }
@keyframes gestRun { to { transform: scaleX(1); } }

/* --- ventana de producto ---------------------------------------------------- */
.gest-win {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e7eaf3;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 34px 70px -42px rgba(20, 30, 60, 0.45);
}
/* cabecera de producto: compartida .skybar (definida junto al nav, arriba) */
.gest-win__body {
  position: relative;
  display: grid;
  padding: clamp(18px, 2.4vw, 26px);
  min-height: 330px;
}
/* escenas apiladas en la misma celda de grid: cero saltos de altura */
.gest-scene {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.gest-scene.is-on { opacity: 1; pointer-events: auto; }
/* cascada interna al entrar cada escena */
.gest-scene > * {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gest-scene.is-on > * { opacity: 1; transform: none; }
.gest-scene.is-on > :nth-child(2) { transition-delay: 0.07s; }
.gest-scene.is-on > :nth-child(3) { transition-delay: 0.14s; }
.gest-scene.is-on > :nth-child(4) { transition-delay: 0.21s; }
.gest-scene__note {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px dashed #e6e9f2;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* piezas compartidas */
.gest-card__label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7486;
}
/* verde SOLO en deltas positivos — misma receta que el bento de #casos */
.gest-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-accent-tint);
  color: var(--brand-accent);
  font-size: 0.7rem;
  font-weight: 800;
  font-style: normal;
  white-space: nowrap;
}

/* --- escena 09:12 · presencia digital -------------------------------------- */
.gest-ficha {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 16px;
  box-shadow: 0 16px 30px -22px rgba(20, 30, 60, 0.35);
}
.gest-ficha__top { display: flex; align-items: center; gap: 12px; }
.gest-ficha__logo {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e9f2;
}
.gest-ficha__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gest-ficha__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gest-ficha__id > b {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gest-ficha__stars { font-size: 0.75rem; font-weight: 700; color: #f59e0b; letter-spacing: 0.03em; }
.gest-ficha__stars b { color: #3c4658; }
.gest-ficha__stars i { font-style: normal; font-weight: 600; color: #8b93a3; letter-spacing: 0; }
.gest-ficha__open {
  margin-left: auto;
  flex: none;
  font-size: 0.66rem;
  font-weight: 800;
  color: #056d4f;
  background: #e9f9f2;
  border: 1px solid #b8ecd7;
  border-radius: 999px;
  padding: 4px 10px;
}
.gest-ficha__actions { display: flex; flex-wrap: wrap; gap: 7px; }
.gest-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #3c4658;
  background: #f2f5fb;
  border: 1px solid #e2e6f0;
}
.gest-act svg { width: 13px; height: 13px; color: var(--brand-blue); }
.gest-act.is-hi { color: #fff; background: var(--brand-blue); border-color: var(--brand-blue); }
.gest-act.is-hi svg { color: #fff; }
.gest-checks { list-style: none; margin: 0; padding: 0 2px; display: grid; gap: 9px; }
.gest-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #3c4658;
}
.gest-checks__ic {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
}
.gest-checks__ic svg { width: 11px; height: 11px; }

/* --- escena 12:40 · datos y control — mini-bento como el de #casos ----------- */
.gest-board {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}
/* cascada propia: las tarjetas entran escalonadas, como el resto de escenas */
.gest-board > * {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gest-scene.is-on .gest-board > * { opacity: 1; transform: none; }
.gest-scene.is-on .gest-board > :nth-child(2) { transition-delay: 0.09s; }
.gest-scene.is-on .gest-board > :nth-child(3) { transition-delay: 0.18s; }
.gest-bcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 16px 30px -22px rgba(20, 30, 60, 0.35);
}

/* tarjeta principal: evolución de visitas (curva + tooltip congelado) */
.gest-bchart { grid-column: 1; grid-row: 1 / span 2; gap: 7px; }
.gest-bchart__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gest-bchart__range {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: #f1f4fa;
  border-radius: 8px;
}
.gest-bchart__range i {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  font-style: normal;
  color: #6b7486;
}
.gest-bchart__range i.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20, 30, 60, 0.14); }
.gest-bchart__value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gest-bchart__value b {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gest-bchart__value i { font-style: normal; font-size: 0.68rem; font-weight: 600; color: #8b93a3; }
/* la curva entra con barrido al activarse la escena */
.gest-bchart__area {
  position: relative;
  flex: 1;
  min-height: 96px;
  margin-top: 2px;
  clip-path: inset(-48px 100% -6px 0);
}
.gest-scene.is-on .gest-bchart__area {
  clip-path: inset(-48px -12px -6px 0);
  transition: clip-path 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.gest-bchart__area svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gest-bchart__grid { stroke: #eef1f8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.gest-bchart__grid--base { stroke: #e2e7f2; }
.gest-bchart__cross { stroke: #cdd6e8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.gest-bchart__fill { fill: url(#gestArea); }
.gest-bchart__line {
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.gest-bdot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-blue);
  border: 2.5px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(20, 30, 60, 0.28);
}
.gest-bdot--end::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: rgba(47, 85, 236, 0.16);
  animation: mtrHalo 2.6s ease-out infinite;
}
/* mtrHalo vivía en el bloque MÉTRICAS (retirado a _future-platform/informe-
   interactivo/); se conserva aquí porque este pulso lo comparte. */
@keyframes mtrHalo {
  0%   { transform: scale(0.45); opacity: 0.9; }
  70%  { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}
.gest-btip {
  position: absolute;
  left: 83.3%;
  top: 29.8%;
  transform: translate(-50%, calc(-100% - 13px));
  display: flex;
  flex-direction: column;
  padding: 7px 10px;
  border-radius: 9px;
  background: #141a2a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 24px -12px rgba(10, 16, 32, 0.55);
}
.gest-btip b { font-weight: 800; font-size: 0.82rem; }
.gest-btip i { font-style: normal; font-size: 0.64rem; font-weight: 600; color: #9aa6c4; margin-top: 2px; }
.gest-btip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: #141a2a;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}
.gest-bchart__x {
  display: flex;
  justify-content: space-between;
  font-size: 0.64rem;
  font-weight: 600;
  color: #9aa3b2;
}

/* score digital: anillo con el mismo degradado azul→verde del bento */
.gest-bscore { grid-column: 2; grid-row: 1; }
.gest-bscore__body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gest-bscore__txt { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); }
.gest-ring { position: relative; width: 68px; height: 68px; flex: none; }
.gest-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gest-ring__track { fill: none; stroke: #e8ecf6; stroke-width: 9; }
.gest-ring__fill {
  fill: none;
  stroke: url(#gestRing);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.gest-scene.is-on .gest-ring__fill { stroke-dasharray: 82 100; }
.gest-ring__num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.gest-ring__num b { font-size: 1.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.gest-ring__num i { font-style: normal; font-size: 0.56rem; font-weight: 700; color: #8b93a3; }

/* KPIs de la semana */
.gest-bkpis { grid-column: 2; grid-row: 2; gap: 2px; }
.gest-bkpis__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gest-bkpis__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.gest-bkpis__list li + li { border-top: 1px solid #eef1f7; }
.gest-bkpis__list li:last-child { padding-bottom: 2px; }
.gest-bkpis__name { font-size: 0.78rem; font-weight: 600; color: #3c4658; min-width: 0; }
.gest-bkpis__val { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.gest-bkpis__val b {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- escena 16:05 · tareas y servicios --------------------------------------- */
.gest-task { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.gest-task li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 13px;
  box-shadow: 0 12px 24px -20px rgba(20, 30, 60, 0.3);
}
.gest-task li.is-next { opacity: 0.72; box-shadow: none; border-style: dashed; }
.gest-task__ic {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
}
.gest-task__ic svg { width: 16px; height: 16px; }
.gest-task__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gest-task__txt b { font-size: 0.84rem; font-weight: 800; color: var(--ink); }
.gest-task__txt > span {
  font-size: 0.76rem;
  color: #7d8697;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gest-task__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  color: #5b6472;
  background: #f2f5fb;
  border: 1px solid #e2e6f0;
}
.gest-task__chip.is-ok { color: #056d4f; background: #e9f9f2; border-color: #b8ecd7; }
.gest-task__chip svg { width: 10px; height: 10px; }

/* --- escena 19:30 · crecimiento modular --------------------------------------
   preview de campaña: mini-post estilo red social (que el gestor deja listo)
   + lado de aprobación. Todo decorativo, dentro del mockup. */
.gest-prev {
  display: grid;
  grid-template-columns: minmax(0, 218px) 1fr;
  gap: 16px;
  align-items: center;
}
.gest-ig {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 30px -22px rgba(20, 30, 60, 0.35);
}
.gest-ig__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.gest-ig__head img { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid #eef1f7; }
.gest-ig__id { display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.25; }
.gest-ig__id b {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gest-ig__id i { font-style: normal; font-size: 0.6rem; font-weight: 600; color: #8b93a3; }
.gest-ig__shot { position: relative; display: block; aspect-ratio: 3 / 2; }
.gest-ig__shot img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.gest-ig__cap {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 10px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: rgba(13, 21, 38, 0.72);
  border-radius: 999px;
  backdrop-filter: blur(3px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gest-ig__foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-top: 1px solid #f0f2f8;
}
.gest-ig__foot svg { width: 14px; height: 14px; flex: none; color: #7d8697; }
.gest-ig__when {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
  border-radius: 999px;
  padding: 3px 9px 3px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gest-ig__when svg { width: 10px; height: 10px; flex: none; color: currentColor; }
.gest-prev__side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.gest-prev__txt { font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); }
.gest-prev__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.gest-prev__ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fff;
  background: var(--brand-blue);
  border-radius: 999px;
  box-shadow: 0 10px 20px -12px rgba(47, 85, 236, 0.7);
}
.gest-prev__ok svg { width: 11px; height: 11px; }
.gest-prev__alt {
  padding: 7px 13px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #5b6472;
  border: 1px solid #dfe3ee;
  border-radius: 999px;
}
.gest-auto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 13px;
  box-shadow: 0 12px 24px -20px rgba(20, 30, 60, 0.3);
}
.gest-switch {
  flex: none;
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #d7ddeb;
  transition: background 0.2s ease;
}
.gest-switch.is-on { background: var(--brand-blue); }
.gest-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.3);
  transition: left 0.2s ease;
}
.gest-switch.is-on i { left: 16px; }

/* --- dock de módulos ---------------------------------------------------------- */
.gest-dock {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px 16px;
  border-top: 1px solid #eef1f7;
  background: #fbfcff;
}
.gest-dock__label {
  flex: none;
  margin-top: 5px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9aa3b2;
}
.gest-dock__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gest-dock__chips i {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  color: #98a1b3;
  background: #f2f5fb;
  border: 1px solid #e9ecf4;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.gest-dock__chips i.is-lit {
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
  border-color: rgba(47, 85, 236, 0.3);
  transform: translateY(-1px);
}

/* --- boot en cascada al entrar en viewport (solo con JS: .is-armed) ----------- */
.gest.is-armed .gest-rail__cap,
.gest.is-armed .gest-step,
.gest.is-armed .gest-win {
  opacity: 0;
  transform: translateY(16px);
}
.gest.is-armed.is-live .gest-rail__cap,
.gest.is-armed.is-live .gest-step,
.gest.is-armed.is-live .gest-win {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.gest.is-armed.is-live .gest-step:nth-child(1) { transition-delay: 0.05s; }
.gest.is-armed.is-live .gest-step:nth-child(2) { transition-delay: 0.11s; }
.gest.is-armed.is-live .gest-step:nth-child(3) { transition-delay: 0.17s; }
.gest.is-armed.is-live .gest-step:nth-child(4) { transition-delay: 0.23s; }
.gest.is-armed.is-live .gest-win { transition-delay: 0.12s; }

/* --- responsive ----------------------------------------------------------------- */
@media (max-width: 940px) {
  .gest { grid-template-columns: 1fr; gap: 16px; }
  .gest-rail__cap { padding-left: 2px; }
  .gest-rail__steps {
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: none;
  }
  .gest-rail__steps::-webkit-scrollbar { display: none; }
  .gest-rail__steps::before { display: none; }
  .gest-step__node { display: none; }
  .gest-step {
    flex: 0 0 auto;
    width: min(250px, 78vw);
    padding: 12px 14px 16px;
    background: #fff;
    border-color: #edf0f7;
  }
  .gest-step.is-on { border-color: rgba(47, 85, 236, 0.38); }
  .gest-step__run { left: 14px; right: 14px; bottom: 7px; }
  .gest-win__body { min-height: 0; }
  .gest-dock__label { display: none; }
}
@media (max-width: 560px) {
  .gest-ficha__actions .gest-act:nth-child(4) { display: none; }
  .gest-task__txt > span { white-space: normal; }
  .gest-prev { grid-template-columns: 1fr; gap: 12px; }
  .gest-ig { max-width: 300px; }
  /* bento 12:40 en móvil: gráfica arriba a lo ancho, score y KPIs a la par */
  .gest-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .gest-bchart { grid-column: 1 / -1; grid-row: 1; }
  .gest-bscore { grid-column: 1; grid-row: 2; }
  .gest-bkpis { grid-column: 2; grid-row: 2; }
  .gest-btip { display: none; }
  .gest-bchart__range { display: none; }
}

/* --- reduced motion: todo visible y estático, tabs clicables ------------------- */
@media (prefers-reduced-motion: reduce) {
  .gest.is-armed .gest-rail__cap,
  .gest.is-armed .gest-step,
  .gest.is-armed .gest-win { opacity: 1; transform: none; transition: none; }
  .gest-scene,
  .gest-scene > *,
  .gest-board > *,
  .gest-dock__chips i,
  .gest-ring__fill { transition: none; }
  .gest-scene > *,
  .gest-board > * { transform: none; }
  .gest-bchart__area,
  .gest-scene.is-on .gest-bchart__area { clip-path: none; transition: none; }
  .gest-bdot--end::after { animation: none; opacity: 0.5; transform: scale(0.6); }
  .gest-ring__fill { stroke-dasharray: 82 100; }
  .gest-step__run { display: none; }
}


/* ============================================================================
   ESTUDIO (ago 2026) — reposicionamiento de plataforma a estudio.
   Piezas nuevas: informe como documento (.rpt), lista de precios "desde"
   (.prlist) y sección "El proceso" (#proceso reutiliza .how/.howflow).
   Los componentes retirados viven en src/components/_future-platform/.
   ========================================================================== */

/* --- el informe mensual como documento entregable (PDF), no como app -------- */
.rpt {
  margin: clamp(34px, 5vw, 52px) auto 0;
  max-width: 880px;
  background: #fff;
  border: 1px solid #e3e7f1;
  border-radius: 18px;
  overflow: hidden;                 /* las esquinas recortan el contenido interior */
  box-shadow:
    0 30px 60px -38px rgba(20, 30, 60, 0.4),
    0 2px 8px -4px rgba(20, 30, 60, 0.08);
}
.rpt__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: clamp(22px, 3vw, 32px) clamp(24px, 3.4vw, 44px) 16px;
  border-bottom: 1px solid #e7eaf3;
}
.rpt__brand { display: flex; flex-direction: column; gap: 3px; }
.rpt__brand b { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.rpt__brand i {
  font-style: normal;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: #9aa3b2;
}
.rpt__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.rpt__meta b { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.rpt__meta i { font-style: normal; font-size: 0.76rem; font-weight: 600; color: #6b7486; }

.rpt__page { padding: 4px clamp(24px, 3.4vw, 44px) clamp(20px, 2.6vw, 30px); }
.rpt__sec { padding-top: clamp(18px, 2.4vw, 26px); }
.rpt__sec-title {
  margin: 0 0 14px;
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e7eaf3;
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink);
}
.rpt__sec-title i {
  font-style: normal; font-weight: 800;
  color: var(--brand-blue);
  font-variant-numeric: tabular-nums;
}
.rpt__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 3.4vw, 44px); }
.rpt .mtr-chart__value { margin-bottom: 16px; }
.rpt .mtr-chart__plot { min-height: 200px; }
.rpt .mtr-chart__x { margin-top: 4px; }
.rpt__foot {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 13px clamp(24px, 3.4vw, 44px);
  border-top: 1px solid #e7eaf3;
  font-size: 0.72rem; font-weight: 600; color: #9aa3b2;
}
@media (max-width: 760px) {
  .rpt__cols { grid-template-columns: 1fr; }
  .rpt__head { flex-direction: column; align-items: flex-start; }
  .rpt__meta { align-items: flex-start; text-align: left; }
}

/* la tira "del informe a la acción" vive suelta bajo el documento */
.metrics__flow { margin: clamp(14px, 2vw, 20px) auto 0; max-width: 880px; }

/* --- precios de estudio: lista "desde", sin tarjetas comparativas ----------- */
.prlist {
  margin: clamp(36px, 5vw, 56px) auto 0;
  max-width: 880px;
  display: grid;
  gap: clamp(14px, 2vw, 22px);
}
/* grupos desplegables — mismo idioma que el "ver todo ↓/↑" de los planes */
.prlist__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}
.prlist__head::-webkit-details-marker { display: none; }
.prlist__group { border-bottom: 1px solid #e9ecf4; padding-bottom: 4px; }
.prlist__group[open] .prlist__items,
.prlist__group[open] .prtable { border-top: 1px solid #e9ecf4; }
.prlist__toggle {
  flex: none;
  font-size: 0.8rem; font-weight: 700; color: var(--brand-blue);
  white-space: nowrap;
}
.prlist__toggle::after { content: " ↓"; font-weight: 800; }
.prlist__group[open] .prlist__toggle::after { content: " ↑"; }
.prlist__label {
  margin: 0;
  display: flex; align-items: baseline; gap: 10px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
}
.prlist__label-note {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: none; color: #9aa3b2;
}
.prlist__items { list-style: none; margin: 0; padding: 0; }
.prlist-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  padding: 16px 0;
}
.prlist-item + .prlist-item { border-top: 1px solid #e9ecf4; }
.prlist-item__name { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.prlist-item__desc { margin: 3px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }
.prlist-item__price {
  margin: 0; flex: none;
  font-size: 0.84rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap;
}
.prlist-item__price b {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink);
}
.prlist-item__price i { font-style: normal; }

/* packs de redes sociales como tabla fácil: por post, descuento y precio */
.prtable { width: 100%; border-collapse: collapse; }
.prtable th, .prtable td { padding: 14px 10px; text-align: left; vertical-align: middle; }
.prtable th:first-child, .prtable td:first-child { padding-left: 0; }
.prtable th:last-child, .prtable td:last-child { padding-right: 0; }
.prtable thead th {
  padding-top: 10px; padding-bottom: 9px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #9aa3b2;
  border-bottom: 1px solid #e9ecf4;
}
.prtable tbody tr + tr th,
.prtable tbody tr + tr td { border-top: 1px solid #e9ecf4; }
.prtable tbody th b { display: block; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.prtable tbody th i {
  display: block; margin-top: 3px;
  font-style: normal; font-size: 0.88rem; font-weight: 400;
  line-height: 1.5; color: var(--ink-soft);
}
.prtable td { font-size: 0.9rem; color: var(--ink-soft); white-space: nowrap; }
.prtable th.prtable__num, .prtable td.prtable__num { text-align: right; }
.prtable__num b {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink);
}
.prtable__num i { font-style: normal; font-size: 0.84rem; font-weight: 600; }
.prtable__save {
  display: inline-flex;
  padding: 3px 9px; border-radius: 999px;
  background: var(--brand-accent-tint); color: var(--brand-accent);
  font-size: 0.72rem; font-weight: 800; white-space: nowrap;
}
.prtable__none { color: #c2c9d6; }
@media (max-width: 560px) {
  .prtable__pp { display: none; }
  .prtable th, .prtable td { padding-left: 6px; padding-right: 6px; }
  .prtable tbody th i { font-size: 0.8rem; }
}

/* ⓘ "todo incluido" de las webs — <details> nativo, se abre con click */
.prlist-item__side { flex: none; display: flex; align-items: center; gap: 8px; }
.pinfo { position: relative; display: inline-flex; }
.pinfo__btn {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-blue);
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
  font-size: 0.64rem; font-weight: 800; font-style: normal; line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pinfo__btn::-webkit-details-marker { display: none; }
.pinfo[open] .pinfo__btn { background: var(--brand-blue); color: #fff; }
.pinfo__pop {
  position: absolute;
  right: -6px;
  top: calc(100% + 10px);
  z-index: 30;
  width: min(260px, calc(100vw - 56px));
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(20, 30, 60, 0.35);
  text-align: left;
}
.pinfo__pop::before {
  content: "";
  position: absolute;
  top: -5px; right: 10px;
  width: 9px; height: 9px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}
.pinfo__title { margin: 0 0 8px; font-size: 0.78rem; font-weight: 800; color: var(--ink); }
.pinfo__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 5px;
  font-size: 0.8rem; line-height: 1.4; color: var(--ink-soft);
}
.pinfo__list li { display: flex; gap: 7px; align-items: flex-start; }
.pinfo__list li::before { content: "✓"; flex: none; font-weight: 800; color: var(--brand-accent); }
.pinfo__more { margin: 8px 0 0; font-size: 0.74rem; color: #9aa3b2; }

@media (max-width: 560px) {
  .prlist-item { flex-direction: column; gap: 6px; }
  .pinfo__pop { right: auto; left: -8px; }
  .pinfo__pop::before { right: auto; left: 12px; }
}

/* CTA de diagnóstico reutilizado bajo la lista (estilos base en servicios.css) */
.prc .svc-cta { max-width: 880px; margin: clamp(30px, 4vw, 46px) auto 0; }