/* =============================================================
   JC Investment — styles.css
   Identidad: institucional + navy técnico · blancos y grises azulados, navy #0f274b, azul técnico #2f5b9a y dorado #d4a641
   Tipografía: Manrope 800 (H1/titulares) · 700 (destacados, H2/H3, módulos) · 600 (botones, nav, cards) · 400–500 (texto)
   Geist Mono 500 para datos técnicos (precios, strikes, Gamma Chart) y etiquetas cortas (kickers, numeración).
   Las capturas de Gamma Chart van en marcos oscuros (.app) que replican la interfaz real.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* ===== Paleta "Institucional + navy técnico" ===== */
  /* Fondos */
  --bg:        #ffffff;   /* fondo principal */
  --bg-2:      #f5f7fa;   /* secciones alternas */
  --bg-3:      #e6eaf1;   /* bordes y divisores */
  --surface:   #cbd2dc;   /* superficies UI */

  /* Texto */
  --ink:       #0f274b;   /* navy: títulos principales y énfasis */
  --text:      #1a1f29;   /* texto base */
  --ink-soft:  #3f4a5c;
  --mute:      #667085;
  --dim:       #98a2b3;

  /* Azul técnico */
  --blue:      #2f5b9a;   /* acentos técnicos: datos, numeración, etiquetas de producto */
  --blue-rgb:  47, 91, 154;

  /* Dorado de marca */
  /* Dorado metálico del logo JC: reflejos claros, ámbar y bronce */
  --gold:      #f4bd2c;   /* dorado de marca (sólido, para trazos e iconos) */
  --gold-rgb:  244, 189, 44;
  --gold-mid:  #e9a90f;   /* líneas y trazos dorados */
  --gold-deep: #9b6a06;   /* texto dorado legible sobre blanco (AA) */
  --gold-ink:  #0f274b;   /* texto sobre fondo dorado */
  /* Degradado metálico para rellenos (botones, etiquetas, viñetas): claro y luminoso */
  --gold-metal: linear-gradient(180deg, #ffeaa8 0%, #fdd463 38%, #f4ba2a 74%, #f8c94b 100%);
  /* Degradado de los títulos: brillo metálico como el borde del logo */
  --gold-grad: linear-gradient(100deg, #b07506 0%, #e3a00f 26%, #f6c640 48%, #fbd666 56%, #e39d0d 76%, #b98010 100%);

  /* Interfaz de Gamma Chart (marcos de las capturas reales) */
  --app-bg:    #1b1a17;
  --app-bar:   #13120f;
  --app-line:  rgba(255, 255, 255, 0.08);
  --app-text:  rgba(255, 255, 255, 0.62);

  /* Líneas y sombras (nítidas, sin desenfoques) */
  --line:      #e6eaf1;
  --line-2:    #cbd2dc;
  --shadow-sm: 0 1px 2px rgba(15,39,75,.05), 0 2px 8px rgba(15,39,75,.04);
  --shadow-md: 0 1px 2px rgba(15,39,75,.06), 0 12px 32px -8px rgba(15,39,75,.12);
  --shadow-lg: 0 2px 4px rgba(15,39,75,.04), 0 30px 80px -20px rgba(15,39,75,.28);

  /* Tipografía */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;   /* datos técnicos y etiquetas cortas */

  /* Ritmo */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max:    1320px;
  --section-y: clamp(6rem, 11vw, 10rem);
  --radius: 18px;

  /* Easings */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  overflow-x: clip;
  background: var(--bg);
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  /* Fondo de marca: seda blanca con líneas doradas, fijo detrás de todo el contenido.
     SVG vectorial: el navegador lo dibuja a la resolución exacta de cada pantalla
     (alternativas guardadas: fondo-ondas, fondo-trading, fondo-dorado) */
  background-color: var(--bg);
  background-image: url("/web/assets/img/fondo-seda.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; font-weight: 500; }
h1, h2, h3, h4 { font-family: var(--sans); color: var(--ink); font-weight: 700; text-wrap: balance; line-height: 1.04; letter-spacing: -0.035em; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--gold-metal); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 3px; border-radius: 4px; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* Etiquetas de texto (Manrope) */
.label { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
/* Datos técnicos (Geist Mono 500) — precios, strikes, GEX, datos de Gamma Chart */
.data { font-family: var(--mono); font-weight: 500; letter-spacing: 0.01em; }
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1rem; background: var(--ink); color: #fff;
  border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-mid); box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .9);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(var(--gold-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0); } }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--gold-mid); transform-origin: 0 50%; transform: scaleX(0); }

/* =============================================================
   4. Typography
   ============================================================= */
.kicker, .eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: clamp(.92rem, 1.08vw, 1.1rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
}
.eyebrow .label { color: var(--gold-deep); font-size: inherit; }
.section-title {
  font-size: clamp(2.5rem, 5.6vw, 4.8rem);
  font-weight: 700; letter-spacing: -0.05em;
  margin-top: 1.2rem;
}
/* Palabras destacadas: Manrope + dorado nítido */
.section-title em, .hero-title em, .cta-title em {
  font-style: normal; font-weight: 700;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-sub { color: var(--mute); max-width: 50ch; margin-top: 1.4rem; font-size: 1.05rem; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.38rem); line-height: 1.5; color: var(--ink); letter-spacing: -0.01em; font-weight: 500; }

/* =============================================================
   5. Components
   ============================================================= */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.6rem; border-radius: 999px;
  font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), color .35s, border-color .35s, background-color .35s;
}
.btn span[aria-hidden] { transition: transform .45s var(--ease-out); }
.btn:hover span[aria-hidden] { transform: translateX(4px); }
.btn-primary {
  /* Mismo dorado metálico y mismo destello continuo que el título (sin brillo "plástico") */
  background: linear-gradient(100deg,
    #fcdf8e 0%, #feebb3 14%, #fbd97e 28%,
    #fff2cc 42%, #fffdf5 50%, #fff2cc 58%,
    #fbd97e 72%, #feebb3 86%, #fcdf8e 100%);
  background-size: 300% 100%;
  animation: goldShine 7s linear infinite;
  color: var(--gold-ink); font-weight: 700; font-size: 1rem; letter-spacing: -0.005em;
  padding: 1.05rem 2rem;
  border: 1px solid rgba(226, 176, 60, .45);
  box-shadow: 0 6px 16px -10px rgba(226,176,60,.4);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: translateY(101%); transition: transform .5s var(--ease-out);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(15,39,75,.45); }
.btn-primary:hover::before { transform: translateY(0); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-sm { padding: .62rem 1.15rem; font-size: .86rem; }
.btn-lg { padding: 1.2rem 2.1rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

.nav-link { position: relative; padding: .25rem 0; color: var(--ink-soft); font-weight: 600; transition: color .3s; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold-metal);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-soft);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Marco de ventana de Gamma Chart (para las ilustraciones de lib/mockups.js) */
.app {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 14px; box-shadow: var(--shadow-lg);
}
.app-bar {
  display: flex; align-items: center; gap: .85rem; padding: .62rem .9rem;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .04em; color: var(--mute);
}
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.window-dots i:first-child { background: var(--gold-metal); }
.app-title { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-live { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; color: var(--gold-deep); white-space: nowrap; }
/* Ilustraciones vectoriales */
.mock svg { display: block; width: 100%; height: auto; }
.mock-16x10 { aspect-ratio: 16 / 10; background: #f8fafc; }
.mock-16x10 svg { height: 100%; }
.app-live .dot { width: 6px; height: 6px; }

/* Nav */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  transition: background-color .5s var(--ease-out), border-color .5s, box-shadow .5s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -16px rgba(15,39,75,.18);
}
@supports (backdrop-filter: blur(10px)) {
  .nav.is-scrolled { background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); }
}
.nav-inner { display: flex; align-items: center; gap: 2rem; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand-logo { width: 40px; height: 40px; filter: drop-shadow(0 2px 4px rgba(150,113,31,.25)); transition: transform .8s var(--ease-out); }
.brand:hover .brand-logo { transform: rotate(60deg); }
.brand-name { font-weight: 800; font-size: 1.08rem; letter-spacing: -0.03em; }
.brand-name span { font-weight: 600; color: var(--ink-soft); }
.nav-links { display: none; gap: 2rem; margin-left: auto; font-size: .9rem; }
.nav-cta { display: none; white-space: nowrap; }
.nav-login { margin-right: -1.25rem; }  /* Entrar + Join quedan juntos (.75rem), no a 2rem */
.nav-toggle {
  margin-left: auto; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px;
  border: 1px solid var(--line-2); border-radius: 50%; background: #fff; position: relative; z-index: 101;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 99; background: var(--bg);
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .7s var(--ease-out), visibility 0s .7s;
}
.nav-mobile[aria-hidden="false"] { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease-out); }
.nav-mobile nav { display: grid; gap: .9rem; text-align: center; }
.nav-mobile a { font-weight: 700; letter-spacing: -0.04em; font-size: clamp(2rem, 8.5vw, 3.2rem); line-height: 1.1; }
.nav-mobile a:hover { color: var(--gold-deep); }
.nav-mobile a.nav-mobile-login { justify-self: center; margin-top: .8rem; font-size: 1rem; letter-spacing: -0.01em; line-height: 1; }

/* =============================================================
   6. Sections
   ============================================================= */
.section { position: relative; padding-block: var(--section-y); }
.section-head-center { text-align: center; display: grid; justify-items: center; }
.section-head-center .section-sub { margin-inline: auto; }
.tool .section-head-center .section-sub { max-width: 88ch; }   /* texto largo: 2 líneas en vez de 4 */
.section-head-split { display: grid; gap: 1rem; align-items: end; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: 120px 100px;
  background:
    radial-gradient(55% 50% at 85% 18%, rgba(var(--blue-rgb), .08), transparent 70%);   /* transparente: deja ver el fondo de marca */
}
.hero-inner { position: relative; z-index: 1; display: grid; gap: 4.5rem; align-items: center; }/* La columna de texto es un "container": el H1 se dimensiona según SU ancho,
   no según el ancho de la pantalla (que sigue creciendo cuando el contenedor ya no). */
.hero-copy { container-type: inline-size; min-width: 0; }
.hero-title {
  font-size: clamp(2.4rem, 8.6vw, 6rem);              /* respaldo para navegadores sin cqi */
  /* 3 líneas siempre: "Opera ES y NQ / con una perspectiva / diferente del mercado."
     La línea más larga mide ~10.11em → 100cqi / 10.11 ≈ 9.9cqi; se usa 9.6cqi con margen. */
  font-size: clamp(1.7rem, 9.7cqi, 5.6rem);
  font-weight: 800;
  line-height: 1; letter-spacing: -0.045em;
  margin-top: 1.6rem;
}
/* "mapa real del mercado.": dorado metálico con un destello de luz que lo recorre (como el bisel del logo) */
.hero-title em {
  font-weight: 800;
  background: linear-gradient(100deg,
    #cf8d08 0%, #f3bd34 14%, #c28207 28%,          /* base metálica */
    #f6cb5e 42%, #fff3cf 50%, #f6cb5e 58%,         /* franja de luz */
    #c28207 72%, #f3bd34 86%, #cf8d08 100%);       /* base metálica */
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: goldShine 7s linear infinite;
}
.hero-title .line:nth-child(3) em { animation-delay: -.35s; }   /* el destello sigue a la línea de abajo */
/* Bucle continuo sin pausa: el degradado empieza y termina en el mismo color y se repite;
   con background-size 300%, desplazar 150% equivale a avanzar exactamente un ciclo. */
@keyframes goldShine {
  from { background-position: 0% 50%; }
  to   { background-position: 150% 50%; }
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero-title .line > span { display: inline-block; animation: lineUp 1.2s var(--ease-out) both; }
.hero-title .line:nth-child(2) > span { animation-delay: .12s; }
.hero-title .line:nth-child(3) > span { animation-delay: .24s; }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
.hero-sub { max-width: 46ch; color: var(--ink-soft); font-size: clamp(1.02rem, 1.3vw, 1.12rem); margin-top: 1.8rem; animation: fadeUp 1s .45s var(--ease-out) both; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; animation: fadeUp 1s .6s var(--ease-out) both; }
.hero .kicker { animation: fadeUp 1s var(--ease-out) both; }
.hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 2.2rem; animation: fadeUp 1s .75s var(--ease-out) both; }
.hero-tags li.label { padding: .38rem .65rem; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-soft); }
.hero-tags li.is-gold { background: var(--gold-metal); border-color: var(--gold-mid); color: var(--gold-ink); }
.hero-tags-arrow { color: var(--dim); padding-inline: .2rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Composición 3D: la ventana principal inclinada en perspectiva y tarjetas flotando delante,
   cada una a distinta profundidad (translateZ), como piezas de una interfaz en el espacio. */
.hero-visual { position: relative; width: 100%; min-width: 0; padding-block: 3rem 5rem; perspective: 1500px; perspective-origin: 30% 45%; }
.hero-stage {
  position: relative; transform-style: preserve-3d;
  transform: rotateY(-22deg) rotateX(9deg) rotateZ(1.5deg);
  transform-origin: 40% 50%;
  transition: transform 1.4s var(--ease-out);
}
.hero-visual:hover .hero-stage { transform: rotateY(-15deg) rotateX(6deg) rotateZ(1deg); }
@media (max-width: 959px) { .hero-stage, .hero-visual:hover .hero-stage { transform: rotateY(-8deg) rotateX(4deg); } }
.app-main { box-shadow: 0 50px 90px -40px rgba(15,39,75,.45), 0 0 0 1px rgba(15,39,75,.04); }
.mock-float { position: absolute; display: none; z-index: 2; filter: drop-shadow(0 26px 30px rgba(15,39,75,.2)); }
/* Sin flotación continua dentro del escenario 3D: Chrome congela a baja resolución las capas 3D
   que se animan sin parar y el texto se ve borroso. El movimiento lo da el paralaje del mouse. */
.app-float-a { width: 42%; left: -7.5%; bottom: -20%; transform: translateZ(35px) rotateY(9deg) rotateX(-3deg); }
.app-float-b { width: 39%; right: -3%; top: -20%; transform: translateZ(25px) rotateY(9deg) rotateX(-3deg); }
.app-float-b > .mock { animation-delay: -2.3s; }
.app-float-c { width: 32%; right: -8%; bottom: -30%; transform: translateZ(45px) rotateY(9deg) rotateX(-3deg); }
.app-float-c > .mock { animation-delay: -4.6s; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* --- Realce de la composición de la portada --- */
/* Luz dorada ambiental detrás del conjunto */
.hero-visual::before {
  content: ""; position: absolute; inset: 0 -10% -5% -5%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 40% at 58% 52%, rgba(var(--gold-rgb), .22), transparent 70%),
    radial-gradient(35% 30% at 30% 80%, rgba(var(--blue-rgb), .08), transparent 70%);
  filter: blur(10px);
}
/* Ventana principal: barra navy, borde dorado fino y reflejo de cristal que la recorre */
.hero .app-main { border-color: rgba(var(--gold-rgb), .45); }
.hero .app-main .app-bar { background: linear-gradient(180deg, #16325c, var(--ink)); border-bottom-color: rgba(var(--gold-rgb), .35); }
.hero .app-main .app-title { color: #fff; }
.hero .app-main .app-live { color: var(--gold); }
.hero .app-main .window-dots i { background: rgba(255,255,255,.22); }
.hero .app-main .window-dots i:first-child { background: var(--gold-metal); }
.hero .app-main::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.08) 43%, rgba(255,255,255,.38) 48%, rgba(255,255,255,.14) 50.5%, rgba(255,255,255,.26) 53%, rgba(255,255,255,.05) 57%, transparent 62%);
  background-size: 250% 100%;
  animation: glassSweep 5s ease-in-out infinite;
}
@keyframes glassSweep { 0%, 15% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
/* Tarjetas: borde y sombras con box-shadow (NO filter: en capas 3D el filtro rasteriza
   la tarjeta como imagen intermedia y el texto se ve borroso y apagado) */
.hero .mock-float { filter: none; }
.hero .mock-float > .mock {
  border-radius: 12px; overflow: hidden; background: #fff;
  border: 1.5px solid #9eaabb;
  box-shadow: 0 2px 3px rgba(15,39,75,.10), 0 18px 26px -6px rgba(15,39,75,.22), 0 40px 50px -20px rgba(15,39,75,.18);
}
.hero .app-float-b > .mock { border-radius: 14px; }
.hero-badge {
  position: absolute; left: 38%; bottom: -14.5%; z-index: 3;
  transform: translateZ(50px);                       /* dentro del escenario 3D, a su propia profundidad */
  border-color: #c3cbd7;
  box-shadow: 0 2px 3px rgba(15,39,75,.10), 0 18px 26px -6px rgba(15,39,75,.22), 0 40px 50px -20px rgba(15,39,75,.18);
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .6rem 1rem .6rem .75rem; border-radius: 14px;
  background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-md);
}
.hero-badge img { width: 22px; height: auto; }
.hero-badge strong { display: block; font-size: .88rem; line-height: 1.2; font-weight: 700; }
.hero-badge small { display: block; font-size: .72rem; color: var(--mute); font-weight: 500; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 28px; translate: -50% 0;
  width: 26px; height: 42px; border: 1px solid var(--line-2); border-radius: 20px; background: #fff;
  display: none;
}
.hero-scroll span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px;
  background: var(--gold-mid); border-radius: 2px; animation: scrollCue 2s var(--ease-out) infinite;
}
@keyframes scrollCue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Franja de texto en movimiento (una línea, velo dorado difuminado) ---------- */
.velocity {
  position: relative; overflow: hidden;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  /* Sin bloques sólidos: un velo dorado que se desvanece hacia arriba, abajo y los lados */
  background:
    radial-gradient(45% 100% at 50% 50%, rgba(var(--gold-rgb), .2), transparent 75%),
    radial-gradient(80% 90% at 50% 50%, rgba(var(--gold-rgb), .08), transparent 80%);
}
.velocity-row {
  overflow: hidden; white-space: nowrap;
  /* los textos aparecen y se desvanecen suavemente en los extremos */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.velocity-track { display: flex; width: max-content; will-change: transform; }
.velocity-item {
  flex: none; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2;
  font-size: clamp(1.2rem, 2.2vw, 1.85rem); color: var(--ink-soft);
}
.velocity-item i { font-style: normal; color: var(--gold-mid); font-size: .5em; vertical-align: .3em; padding-inline: .5em; }
/* Cinta de mercado: chips de cristal con símbolo (Geist Mono) + nombre, separados por un punto dorado */
.tape {
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.75) 50%, rgba(255,255,255,.35));
  border-block: 1px solid rgba(203, 210, 220, .55);
}
.tape::before, .tape::after {          /* filos dorados que se desvanecen en los extremos */
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .55) 30%, rgba(var(--gold-rgb), .55) 70%, transparent);
}
.tape::before { top: -1px; } .tape::after { bottom: -1px; }
.tape-set { display: flex; align-items: center; gap: 0; padding-right: 0; font-size: 1rem; letter-spacing: 0; }
.tk {
  flex: none; display: inline-flex; align-items: center; gap: .6rem;
  margin-right: 1.9rem; padding: .62rem 1.05rem .62rem .8rem; border-radius: 14px;
  background: rgba(255,255,255,.85); border: 1px solid var(--line-2);
  box-shadow: 0 6px 18px -12px rgba(15,39,75,.35), inset 0 1px 0 #fff;
  color: var(--ink); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; white-space: nowrap;
  position: relative;
}
.tk::after {                           /* punto dorado entre chips */
  content: ""; position: absolute; right: calc(-1.9rem / 2 - 3px); top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold-metal);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .15);
}
.tk b { font-family: var(--mono); font-weight: 600; font-size: 1.08rem; letter-spacing: .02em; color: var(--ink); }
.tk small { font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); padding-left: .55rem; border-left: 1px solid var(--line-2); }
.tk-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gold-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tk:not(.tk-c) .tk-ico rect { fill: rgba(var(--gold-rgb), .35); }
.tk-ico circle { fill: rgba(var(--gold-rgb), .3); }
.tk-c { background: linear-gradient(180deg, #fff, #fbf7ee); }
.tk-brand img { width: 18px; height: auto; }
/* Sin JS: animación CSS lenta de respaldo */
/* Banda tipográfica: display grande alternando sólido (tinta) y contorno dorado, separado por hexágonos dorados del logo */
.kinetic {
  padding-block: clamp(1.6rem, 3vw, 2.6rem) clamp(1.3rem, 2.4vw, 2rem);
  border-block: 1px solid rgba(203, 210, 220, .5);
  background:
    radial-gradient(40% 120% at 50% 50%, rgba(var(--gold-rgb), .08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.7) 50%, rgba(255,255,255,.2));
}
.kinetic::before, .kinetic::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .6) 30%, rgba(var(--gold-rgb), .6) 70%, transparent);
}
.kinetic::before { top: -1px; } .kinetic::after { bottom: -1px; }
.kin-set { display: flex; align-items: center; }
.kin {
  flex: none; padding-inline: .5em; font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05;
  color: var(--ink);
}
.kin-o {                                            /* palabra en contorno dorado */
  color: transparent; -webkit-text-stroke: 1.4px var(--gold-deep);
  background: none;
}
@supports not (-webkit-text-stroke: 1px black) { .kin-o { color: var(--gold-deep); } }
.kin-hex {                                          /* separador: hexágono dorado del logo */
  flex: none; width: .5em; height: .56em; margin-inline: .35em; font-size: clamp(2.2rem, 4.6vw, 4rem);
  background: linear-gradient(160deg, #f9dc7c, #c9900c 55%, #f2c94c);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: .9;
}
/* Dos cintas cruzadas en diagonal (frontal blanca con instrumentos, trasera dorada con la marca) + foco que sigue el cursor */
.kinetic { padding-block: clamp(2.4rem, 4vw, 3.2rem); border-block: 0; background: none; overflow: hidden; }
.kinetic::before, .kinetic::after { display: none; }
.kinetic .velocity-row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.kin-cross {
  position: absolute; left: -4%; right: -4%; top: 50%; translate: 0 -50%; rotate: 2.4deg;
  padding-block: .55rem; background: linear-gradient(90deg, #e9b93a, #f7d77a 30%, #d9a21c 60%, #f2c94c);
  box-shadow: 0 10px 24px -14px rgba(155,106,6,.6);
}
.kin-gold { display: flex; align-items: center; }
.kin-gold span {
  flex: none; display: inline-flex; align-items: center; gap: 1.1rem; padding-right: 1.1rem;
  font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #3b2a02;
}
.kin-gold span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(59,42,2,.55); }
.kin-row2 {
  position: relative; z-index: 1; rotate: -1.6deg; margin-inline: -2%;
  padding-block: .95rem;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,251,252,.96));
  border-block: 1px solid rgba(203,210,220,.8);
  box-shadow: 0 18px 36px -22px rgba(15,39,75,.35), 0 1px 0 #fff inset;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kin-sym span { transition: color .3s, transform .3s var(--ease-out); }
.kin-sym span:hover { transform: translateY(-2px); }
.kin-sym span:hover b { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .kin-sym span { transition: none; } }
.kin-sym { display: flex; align-items: center; }
/* cada instrumento: hexágono dorado + símbolo + descripción + tipo; separados por un rombo dorado */
.kin-sym span {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: .7rem; padding-inline: 2.2rem;
  font-family: var(--mono); font-size: .84rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}
.kin-sym span::after {                              /* separador: rombo dorado */
  content: ""; position: absolute; right: -3.5px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg, #f9dc7c, #c9900c); border-radius: 1.5px; opacity: .85;
}
.kin-sym b { font-size: 1.2rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.ks-hex {
  flex: none; width: 15px; height: 17px;
  background: linear-gradient(160deg, #f9dc7c, #c9900c 55%, #f2c94c);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
}
.kin-sym em {
  font-style: normal; font-size: .64rem; font-weight: 600; letter-spacing: .1em; color: var(--gold-deep);
  padding: .2rem .5rem; border-radius: 999px; background: rgba(var(--gold-rgb), .12); border: 1px solid rgba(var(--gold-rgb), .35);
}
html:not(.js) .velocity-track { animation: velFallback 60s linear infinite; }
@keyframes velFallback { to { transform: translateX(-50%); } }

/* ---------- Quiénes somos ---------- */
.about-grid { display: grid; gap: 2.5rem; align-items: center; }
/* Una frase por línea en escritorio; el tamaño sigue al ancho de la columna (container query) */
.about-copy { container-type: inline-size; min-width: 0; }
.about-title { font-size: clamp(2rem, 6.1cqi, 4.4rem);   /* frase más larga ≈ 16.2em → 100/16.2 ≈ 6.2cqi */ line-height: 1.06; letter-spacing: -0.045em; margin-top: 1.2rem; }
.about-title > span { display: block; }
.about-copy .lead { margin-top: 1.8rem; max-width: 60ch; }
.about-copy p + p { margin-top: 1.2rem; color: var(--ink-soft); font-size: 1.05rem; max-width: 62ch; }
.about-copy strong { color: var(--ink); font-weight: 700; }

/* Ilustración: fondo del cliente + velas 3D en perspectiva + tarjetas ES/NQ del cliente */
.about-visual { position: relative; margin: 0 -4% 0 0; min-width: 0; aspect-ratio: 1 / 1; }
/* Emblema Gamma: Γ dorada en placa hexagonal + anillos que giran despacio (solo apoyo visual) */
.about-emblem { display: block; width: 100%; max-width: 540px; margin-inline: auto; aspect-ratio: auto; }
.emblem { display: block; width: 100%; height: auto; overflow: visible; }
.em-spin { transform-box: view-box; transform-origin: 50% 50%; }
.em-spin-slow { animation: emSpin 90s linear infinite; }
.em-spin-rev  { animation: emSpin 60s linear infinite reverse; }
.em-spin-mid  { animation: emSpin 120s linear infinite; }
@keyframes emSpin { to { transform: rotate(360deg); } }
.em-gamma { transform-box: view-box; transform-origin: 50% 50%; transform: scale(.85); opacity: 0; transition: transform 1.2s var(--ease-out), opacity 1s; }
.about-visual.is-revealed .em-gamma { transform: none; opacity: 1; }
.em-shine { transform-box: view-box; transform-origin: 300px 300px; animation: emShine 6s ease-in-out 1.5s infinite; }
@keyframes emShine { 0% { transform: rotate(25deg) translateX(-60px); } 45%, 100% { transform: rotate(25deg) translateX(260px); } }
@media (prefers-reduced-motion: reduce) { .em-spin, .em-shine { animation: none; } }
/* Universo: los planetas giran con su órbita pero se mantienen derechos (contra-rotación) */
.uv-up { transform-box: fill-box; transform-origin: center; }
.uv-up-slow { animation: emSpin 90s linear infinite reverse; }
.uv-up-rev  { animation: emSpin 60s linear infinite; }
.uv-up-mid  { animation: emSpin 120s linear infinite reverse; }
.uv-stars { animation: uvTwinkle 4.5s ease-in-out infinite; }
.uv-stars-b { animation-delay: -2.2s; }
@keyframes uvTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* órbitas de estrellas que giran en torno al logo */
.uv-orbit-a { animation: emSpin 150s linear infinite; }
.uv-orbit-b { animation: emSpin 110s linear infinite reverse; }
@media (prefers-reduced-motion: reduce) { .uv-up, .uv-stars, .uv-orbit-a, .uv-orbit-b { animation: none; } }

.about-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; opacity: .5;
  -webkit-mask-image: radial-gradient(120% 115% at 55% 45%, #000 60%, transparent 100%);
  mask-image: radial-gradient(120% 115% at 55% 45%, #000 60%, transparent 100%);
}
/* Escenario con perspectiva: las velas se ven en ángulo, como un gráfico flotando en 3D */
.about-stage { position: absolute; inset: -6.7% -6% -5.3% -6%; perspective: 1300px; perspective-origin: 50% 50%; }
.about-chart {
  display: block; width: 100%; height: 100%; overflow: visible;
  transform: none;
  transform-origin: 50% 50%;
  transition: transform 1.4s var(--ease-out);
}
.about-chart .ab-level { opacity: 0; transition: opacity .8s 1.2s; }
.about-visual.is-revealed .ab-level { opacity: 1; }
.about-chart .c-body { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .7s var(--ease-out); }
.about-visual.is-revealed .c-body { transform: none; }
.about-chart .c-curve { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.2s .5s var(--ease-out); }
.about-visual.is-revealed .c-curve { stroke-dashoffset: 0; }
.about-chart .c-pulse { transform-box: fill-box; transform-origin: center; animation: cPulse 2.2s ease-out infinite; }
@keyframes cPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.about-chart .c-last { opacity: 0; transition: opacity .6s 1.6s; }
.about-visual.is-revealed .c-last { opacity: 1; }
/* Tarjetas ES / NQ: cristal blanco, borde dorado degradado, canto dorado (relieve), reflejo e inclinación */
.about-tag { position: absolute; z-index: 2; animation: tagBob 7s ease-in-out infinite; }
@keyframes tagBob { 50% { translate: 0 -8px; } }
.about-tag-in {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem 1.35rem .8rem 1.05rem; border-radius: 16px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(160deg, #ffffff, #f7f8fa) padding-box,   /* relleno blanco opaco: sin tinte amarillo */
    linear-gradient(135deg, #ffe7a0, #f4bd2c 40%, #fff4d2 62%, #e9a90f) border-box;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow:
    0 4px 0 -1px #f2cf7e,
    0 5px 0 -1px rgba(214,150,10,.35),
    0 22px 34px -16px rgba(15,39,75,.32),
    inset 0 1px 0 #fff;
  transform: perspective(900px) rotateY(-12deg) rotateX(5deg) rotateZ(-1.5deg);
}
/* reflejo diagonal del cristal */
.about-tag-in::after {
  content: ""; position: absolute; inset: -40% -10%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.75) 46%, transparent 54%);
}
.about-tag-in > * { position: relative; z-index: 1; }   /* texto e icono por encima del reflejo */
.about-tag .tri {
  flex: none; width: 20px; height: 17px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #ffe066, #f5b301 60%, #ee9f00);
  filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), .8));
}
.about-tag b { display: block; font-family: var(--sans); font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.about-tag em { display: block; margin-top: .2rem; font-style: normal; font-family: var(--sans); font-weight: 800; font-size: clamp(.95rem, 1.25vw, 1.15rem); line-height: 1; letter-spacing: -0.01em; color: #17913a; }
.about-tag-es { top: 8%; left: 30%; }
.about-tag-nq { bottom: 11%; right: 4%; animation-delay: -3.5s; }

/* Ecosistema: 5 tarjetas alineadas (subgrid: icono / título / texto a la misma altura en toda la fila) */
.ecosystem-wrap { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.eco-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: 1rem; margin-top: 1.6rem; counter-reset: eco;
}
.eco-card {
  position: relative; counter-increment: eco;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 1.1rem;
  justify-items: center; text-align: center;
  padding: 2.4rem 1.5rem 2rem; border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(15,39,75,.04), 0 18px 38px -24px rgba(15,39,75,.28);
  transition: transform .45s var(--ease-out), border-color .35s, box-shadow .45s var(--ease-out);
}
.eco-card:hover { transform: translateY(-5px); border-color: rgba(var(--gold-rgb), .65); box-shadow: 0 26px 48px -24px rgba(214,150,10,.45); }

/* Icono 3D (PNG/WebP con transparencia) en un área de altura fija para que todos queden alineados */
.eco-media { display: grid; place-items: end center; width: 100%; height: clamp(88px, 7.5vw, 110px); }
.eco-img {
  width: auto; height: clamp(88px, 7.5vw, 110px); max-width: 92%; object-fit: contain; align-self: end;
  filter: drop-shadow(0 14px 16px rgba(15,39,75,.14));
  transition: transform .6s var(--ease-out);
}
.eco-card:hover .eco-img { transform: translateY(-6px) scale(1.04); }
/* Título: grande y en navy, centrado en un espacio de 2 líneas (todas las tarjetas a la misma altura) */
.eco-card h3 {
  position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center;
  min-height: calc(2 * 1.2em + 1.2rem); padding-bottom: 1.2rem;
  font-size: clamp(1.15rem, 1.35vw, 1.32rem); line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; color: var(--ink);
}
/* raya dorada bajo el título: siempre a la misma altura en todas las tarjetas */
.eco-card h3::after {
  content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: 34px; height: 2px; border-radius: 2px; background: var(--gold-metal);
}.eco-card p { align-self: start; color: var(--ink-soft); font-size: .93rem; line-height: 1.6; max-width: 26ch; }
.eco-card strong { color: var(--ink); font-weight: 700; }
@supports not (grid-template-rows: subgrid) {
  .eco-card { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
}
.nowrap { white-space: nowrap; }
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: clamp(4rem, 8vw, 6rem);
  /* sin el padding de .container: si no, el fondo gris de las divisiones asoma a los lados */
  padding-inline: 0; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter));
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.stat { padding: 1.8rem 1.4rem; display: grid; align-content: start; gap: .7rem; background: #fff; transition: background .4s; }
.stat:hover { background: var(--bg-2); }
.stat-num { font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.05em; }
.stat-word { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-label { color: var(--mute); font-size: .92rem; max-width: 28ch; }
.stat-label sup { color: var(--gold-deep); font-weight: 700; }
.stats-note { margin-top: 1rem; font-size: .76rem; color: var(--dim); }

/* ---------- Cómo operamos ---------- */
.operate { background: rgba(245, 247, 250, .55); border-block: 1px solid var(--line); }
.method-steps { position: relative; display: grid; gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); padding-left: 2.2rem; }
.method-rail { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); border-radius: 2px; }
.method-rail span { position: absolute; inset: 0; background: var(--gold-mid); transform-origin: top; transform: scaleY(var(--p, 0)); border-radius: 2px; }
.step {
  position: relative; padding: 1.7rem 1.5rem; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: border-color .5s, box-shadow .5s, transform .6s var(--ease-out);
}
.step::before {   /* nodo sobre el raíl */
  content: ""; position: absolute; left: calc(-2.2rem + 1px); top: 1.9rem;
  width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2);
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.step.is-on { border-color: rgba(var(--gold-rgb), .9); box-shadow: var(--shadow-md); }
.step.is-on::before { background: var(--gold-metal); border-color: var(--gold-mid); box-shadow: 0 0 0 5px rgba(var(--gold-rgb), .3); }
.step-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); transition: background .4s, border-color .4s; }
.step.is-on .step-icon { background: rgba(var(--gold-rgb), .35); border-color: var(--gold-mid); }
.step-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step-num { display: block; color: var(--blue); margin-top: 1.3rem; font-size: .66rem; }
.step h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; margin-top: .5rem; }
.step p { color: var(--mute); margin-top: .6rem; font-size: .94rem; }

/* ---- Cómo operamos: 4 etapas grandes 2×2 con imágenes IA sobre blanco ---- */
.operate {                                    /* blanco que se funde con el fondo de seda arriba y abajo (sin corte) */
  border-block: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0, #fff clamp(110px, 12vw, 180px), #fff calc(100% - clamp(110px, 12vw, 180px)), rgba(255,255,255,0) 100%);
}
.opx { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .opx { grid-template-columns: 1fr 1fr; }
  .opx { --ow: min(1440px, calc(100vw - 2 * var(--gutter))); width: var(--ow); margin-left: calc(50% - var(--ow) / 2); }
}
.opx-card {
  position: relative; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  background: #fff; border: 1px solid #eceff3;
  box-shadow: 0 1px 2px rgba(15,39,75,.03), 0 30px 60px -46px rgba(15,39,75,.35);
  transition: transform .6s var(--ease-out), box-shadow .6s, border-color .6s;
}
.opx-card:hover { transform: translateY(-6px); border-color: #e3e7ee; box-shadow: 0 1px 2px rgba(15,39,75,.03), 0 44px 80px -50px rgba(15,39,75,.45); }
.opx-img { position: relative; margin: 0; overflow: hidden; background: #fff; aspect-ratio: 3 / 2; }
.opx-img::after {                              /* funde el borde inferior de la imagen con el blanco de la tarjeta */
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.92) 80%, #fff 100%);
}
.opx-card .opx-img > img { width: 100%; height: 100%; object-fit: cover; }   /* llenan el recuadro sin franjas */   /* todas las imágenes ocupan el mismo alto, aunque su proporción varíe */
.opx-via {
  position: absolute; z-index: 2; top: clamp(.9rem, 1.6vw, 1.3rem); left: clamp(.9rem, 1.6vw, 1.3rem);
  display: inline-flex; align-items: center; gap: .75rem; padding: .6rem 1.3rem .6rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.95); border: 1px solid #e3e7ee; box-shadow: 0 14px 30px -16px rgba(15,39,75,.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 600; color: var(--ink-soft);
}
.opx-img .opx-via img, .opx-card:hover .opx-img .opx-via img { width: 34px; height: 34px; transform: none; transition: none; }
.opx-via b { color: var(--ink); font-weight: 800; }
.opx-img img { display: block; width: 100%; height: auto; transform: scale(1.02); transition: transform 1.2s var(--ease-out); }
.opx-card:hover .opx-img img { transform: scale(1.05); }
.opx-body { position: relative; z-index: 1; padding: .4rem clamp(1.4rem, 2.6vw, 2.4rem) clamp(1.6rem, 2.8vw, 2.4rem); }
.opx-meta { display: flex; align-items: center; gap: .75rem; }
.opx-num {
  font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: #fff;
  padding: .28rem .6rem; border-radius: 8px; background: linear-gradient(160deg, #f2c94c, #c9900c);
}
.opx-when { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); display: inline-flex; align-items: center; gap: .45rem; }
.opx-live { color: #c0392b; }
.opx-live i { width: 7px; height: 7px; border-radius: 50%; background: #e2564d; animation: livePulse 1.8s ease-out infinite; }
.opx-body h3 { margin-top: .8rem; font-size: clamp(1.5rem, 2.3vw, 2.05rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; color: var(--ink); }
.opx-body p { margin-top: .7rem; max-width: 56ch; color: var(--ink-soft); font-size: clamp(.98rem, 1.1vw, 1.06rem); line-height: 1.65; }
.opx-body p strong { color: var(--ink); font-weight: 700; }
/* frase de cierre con el emblema JC */
.op-motto {
  position: relative; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.2rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.1rem, 2vw, 1.4rem) clamp(4.8rem, 8vw, 6.8rem);
  border-radius: 999px; background: #fff; border: 1px solid #eceff3;
  box-shadow: 0 24px 50px -38px rgba(15,39,75,.4);
}
.op-motto-badge {
  position: absolute; left: -12px; top: 50%; translate: 0 -50%; width: clamp(76px, 8vw, 96px); aspect-ratio: 1 / 1.1;
  display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #fff6d6, #e9b93a 40%, #b07c08 75%, #f2c94c);
}
.op-motto-badge::before { content: ""; position: absolute; inset: 4px; clip-path: inherit; background: #fff; }
.op-motto-badge img { position: relative; width: 62%; height: auto; }
.op-motto p { flex: 1; text-align: center; font-size: clamp(1.25rem, 2.3vw, 2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.2; color: var(--ink); }
.op-motto em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .opx-live i { animation: none; } .opx-img img { transition: none; } }
/* herramientas: stack de análisis (SpotGamma → Gamma Chart) */
.op-tools { margin-top: clamp(3rem, 6vw, 4.5rem); }
.op-tools-head { text-align: center; max-width: 640px; margin: 0 auto; }
.op-tools-label { color: var(--gold-deep); }
.op-tools-head h3 { margin-top: .5rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.035em; color: var(--ink); }
.op-tools-head p:last-child { margin-top: .6rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.op-tools-grid { display: grid; gap: 1rem; margin-top: clamp(1.8rem, 3vw, 2.4rem); align-items: stretch; }
@media (min-width: 960px) { .op-tools-grid { grid-template-columns: 1fr auto 1fr; gap: 0; } }
.op-tool {
  position: relative; display: flex; flex-direction: column; padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: 24px; overflow: hidden;
  background: #fff; border: 1px solid #e6e9ee;
  box-shadow: 0 1px 2px rgba(15,39,75,.03), 0 26px 50px -38px rgba(15,39,75,.4);
  transition: transform .5s var(--ease-out), box-shadow .5s, border-color .5s;
}
.op-tool::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #4fb3a6, transparent); }
.op-tool-gc::before { background: linear-gradient(90deg, transparent, #fbe8b4, #f7dc8c, #fbe8b4, transparent); }
.op-tool:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(15,39,75,.03), 0 36px 64px -40px rgba(15,39,75,.5); }
.op-tool-gc { border-color: rgba(var(--gold-rgb), .16); background: radial-gradient(80% 60% at 100% 0%, rgba(var(--gold-rgb), .025), transparent 70%), #fff; }
.op-tool-top { display: flex; align-items: center; gap: .9rem; }
.op-tool-ico { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #fff; border: 1px solid #e3e7ee; box-shadow: 0 10px 22px -14px rgba(15,39,75,.45); }
.op-tool-gc .op-tool-ico { border-color: rgba(var(--gold-rgb), .2); background: linear-gradient(160deg, #fff, #fffdf6); }
.op-tool-ico img { width: 30px; height: auto; }
.op-tool-role { display: block; font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.op-tool-top h3 { margin-top: .15rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.op-tool-when { margin-left: auto; align-self: flex-start; padding: .3rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--ink-soft); background: var(--bg-2); border: 1px solid var(--line); white-space: nowrap; }
.op-tool-gc .op-tool-when { color: #c79a3e; background: #fffdf6; border-color: rgba(var(--gold-rgb), .18); }
.op-tool-desc { margin-top: 1rem; color: var(--ink-soft); font-size: .97rem; line-height: 1.6; }
.op-tool-desc strong { color: var(--ink); }
.op-tool-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .55rem; }
.op-tool-list li { display: flex; align-items: center; gap: .85rem; padding: .7rem .8rem; border-radius: 14px; background: #f8fafc; border: 1px solid #eef1f5; }
.op-tool-li-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid #e3e7ee; }
.op-tool-li-ico svg { width: 18px; height: 18px; fill: none; stroke: #2a8f84; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.op-tool-gc .op-tool-li-ico svg { stroke: #d4b264; }
.op-tool-list strong { display: block; font-size: .93rem; font-weight: 800; color: var(--ink); }
.op-tool-list small { display: block; margin-top: .1rem; font-size: .8rem; color: var(--mute); }
/* puente entre herramientas */
.op-tools-bridge { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.op-bridge-line { flex: 1; height: 2px; min-width: 18px; background: linear-gradient(90deg, rgba(var(--gold-rgb), .2), var(--gold-deep)); }
.op-bridge-pill { padding: .45rem .75rem; border-radius: 999px; font-family: var(--mono); font-size: .7rem; font-weight: 700; color: #fff; background: linear-gradient(160deg, #f2c94c, #c9900c); box-shadow: 0 10px 20px -12px rgba(214,150,10,.7); white-space: nowrap; }
@media (min-width: 960px) { .op-tools-bridge { flex-direction: row; width: 120px; } }
@media (max-width: 959px) { .op-tools-bridge { flex-direction: column; height: 56px; } .op-bridge-line { width: 2px; height: auto; min-height: 10px; flex: 1; } }
/* Diagrama anotado */
.diagram { margin-top: clamp(3rem, 6vw, 4.5rem); }
.diagram-stage { position: relative; aspect-ratio: 4 / 3; background: #f8fafc; }
.diagram-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.callout {
  position: absolute; z-index: 2; display: flex; gap: .7rem; align-items: flex-start;
  max-width: 260px; padding: .7rem .85rem; border-radius: 12px;
  background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-md);
  font-size: .8rem; line-height: 1.4; color: var(--mute);
  opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
}
.callout strong { display: block; color: var(--ink); font-size: .9rem; font-weight: 700; margin-bottom: .1rem; }
.callout-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(var(--gold-rgb), .35); }
.callout-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.c-magnet, .c-confirm { left: var(--x); top: var(--y); }
.c-confirm { left: auto; right: 14%; }
.c-level {
  right: calc(min(56px, 8%) + 10px); top: var(--y); transform: translateY(calc(-50% + 10px));
  display: block; padding: .45rem .75rem; border-left: 3px solid; max-width: 200px; font-size: .74rem;
}
.c-level strong { font-size: .84rem; }
.c-call { border-left-color: #3fbf74; }
.c-zero { border-left-color: var(--gold-mid); }
.c-put  { border-left-color: #e2574c; }
.is-live .callout { opacity: 1; transform: none; }
.is-live .c-level { transform: translateY(-50%); }
.callout[data-step="1"] { transition-delay: .9s; }
.callout[data-step="2"] { transition-delay: 1.3s; }
.callout[data-step="3"] { transition-delay: 1.7s; }
.callout[data-step="4"] { transition-delay: 2.1s; }
.callout[data-step="5"] { transition-delay: 2.6s; }

.daily { margin-top: clamp(3rem, 6vw, 4rem); }
.daily-label { color: var(--mute); }
.daily-grid { display: grid; gap: 1rem; margin-top: 1.2rem; }
.daily-card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 1.5rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
  transition: border-color .4s, transform .6s var(--ease-out), box-shadow .6s;
}
.daily-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.daily-card .label { color: var(--blue); }
.daily-card p { margin-top: .6rem; color: var(--ink-soft); font-size: .95rem; }

/* ---------- Gamma Chart ---------- */
.tool { overflow: clip; }
.tool::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 32% at 50% 0%, rgba(var(--blue-rgb), .10), transparent 70%);
}
.tool-logo { width: 54px; height: auto; margin-bottom: 1.4rem; }
.tool-title { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .98; letter-spacing: -0.05em; }

/* ---------- Showcase de Gamma Chart: escenario premium ---------- */
.showcase {
  position: relative; isolation: isolate;
  display: grid; gap: 1.6rem; margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.1rem, 2.4vw, 2rem); border-radius: calc(var(--radius) + 12px);
  background: rgba(255,255,255,.72); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(15,39,75,.04), 0 40px 80px -50px rgba(15,39,75,.4);
}
.showcase::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--gold) 30%, #ffe7a0 50%, var(--gold) 70%, transparent) top / 100% 2px no-repeat,
    radial-gradient(40% 50% at 70% 40%, rgba(var(--gold-rgb), .12), transparent 70%);
}

/* Menú de áreas */
.sc-cats { display: flex; gap: .4rem; overflow-x: auto; overflow-y: visible; padding: .2rem .2rem .8rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.sc-cat {
  position: relative; overflow: hidden; flex: 0 0 auto; scroll-snap-align: start;
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .9rem; text-align: left;
  padding: .85rem 1rem; border-radius: 16px; border: 1px solid transparent; background: transparent;
  transition: background .4s var(--ease-out), border-color .4s, box-shadow .4s, transform .4s var(--ease-out);
}
.sc-cat::before {                       /* barra dorada del área activa */
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--gold-metal); transform: scaleY(0); transition: transform .45s var(--ease-out);
}
.sc-cat-ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--bg-2); border: 1px solid var(--line); transition: background .4s, border-color .4s, box-shadow .4s;
}
.sc-cat-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--mute); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.sc-cat-txt { display: grid; min-width: 0; }
.sc-cat .label { color: var(--dim); font-size: .68rem; transition: color .3s; }
.sc-cat strong { font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; color: var(--ink-soft); white-space: nowrap; }
.sc-cat small { display: none; color: var(--mute); font-size: .82rem; margin-top: .15rem; line-height: 1.4; }
.sc-cat::after {   /* barra de tiempo del auto-avance */
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-mid), #ffe7a0); transform-origin: left; transform: scaleX(0);
}
.sc-cat.is-timing::after { transform: scaleX(1); transition: transform var(--dur, 7s) linear; }
.sc-cat:hover { background: rgba(255,255,255,.6); }
.sc-cat:hover strong { color: var(--ink); }
.sc-cat.is-active { background: #fff; border-color: var(--line); box-shadow: 0 14px 30px -20px rgba(15,39,75,.4); }
.sc-cat.is-active::before { transform: scaleY(1); }
.sc-cat.is-active .sc-cat-ico { background: linear-gradient(160deg, #fffaf0, #fdeec6); border-color: rgba(var(--gold-rgb), .55); box-shadow: 0 6px 14px -8px rgba(214,150,10,.6); }
.sc-cat.is-active .sc-cat-ico svg { stroke: var(--gold-deep); }
.sc-cat.is-active .label { color: var(--gold-deep); }
.sc-cat.is-active strong { color: var(--ink); }

/* Zona principal */
.sc-main { position: relative; min-width: 0; }
.sc-main::before {                      /* brillo dorado detrás de la ventana */
  content: ""; position: absolute; inset: 8% -4% 10% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--gold-rgb), .22), transparent 70%); filter: blur(20px);
}
.sc-views {
  display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; min-height: 2.5rem; margin-bottom: 1rem;
  padding: 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line);
}
.sc-views:empty { display: none; }
@media (max-width: 700px) {
  .sc-views { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .sc-view { flex: none; white-space: nowrap; }
  .sc-caption { margin-top: -1rem; }
}
.sc-view {
  flex: none; white-space: nowrap;
  padding: .5rem .95rem; border-radius: 999px; font-size: .84rem; font-weight: 700;
  border: 1px solid transparent; background: transparent; color: var(--ink-soft);
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.sc-view:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.sc-view.is-active {
  background: linear-gradient(180deg, #feebb3, #fcdf8e); border-color: rgba(226,176,60,.5); color: var(--ink);
  box-shadow: 0 6px 14px -8px rgba(214,150,10,.6), inset 0 1px 0 rgba(255,255,255,.7);
}
/* Ventana de Gamma Chart: como la de la portada */
.showcase .app-stage {
  border-color: rgba(var(--gold-rgb), .45); border-radius: 16px;
  box-shadow: 0 50px 90px -45px rgba(15,39,75,.5), 0 0 0 1px rgba(15,39,75,.03);
}
.showcase .app-stage .app-bar { background: linear-gradient(180deg, #16325c, var(--ink)); border-bottom-color: rgba(var(--gold-rgb), .35); }
.showcase .app-stage .app-title { color: #fff; }
.showcase .app-stage .window-dots i { background: rgba(255,255,255,.22); }
.showcase .app-stage .window-dots i:first-child { background: var(--gold-metal); }
.showcase .app-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  /* reflejo más marcado: núcleo blanco intenso tipo cristal: banda ancha suave + dos filos de luz, cada ~5,5 s */
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.08) 43%, rgba(255,255,255,.38) 48%, rgba(255,255,255,.14) 50.5%, rgba(255,255,255,.26) 53%, rgba(255,255,255,.05) 57%, transparent 62%);
  background-size: 250% 100%; animation: glassSweep 5.5s ease-in-out infinite;
}
.sc-zoom { margin-left: auto; flex: none; white-space: nowrap; font-family: var(--sans); font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.75); padding: .25rem .65rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); transition: color .3s, border-color .3s, background .3s; }
.sc-zoom:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.sc-stage { position: relative; aspect-ratio: 16 / 10; background: #f8fafc; cursor: zoom-in; }
.sc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transform: scale(1.02); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out);
}
.sc-img svg { display: block; width: 100%; height: 100%; }
.sc-img.is-active { opacity: 1; transform: none; }
.sc-img:not(.is-active) { pointer-events: none; }   /* las vistas ocultas no capturan el mouse (la cruz va a la vista visible) */
/* Descripción: tarjeta flotante que se superpone al borde de la ventana */
.sc-caption {
  position: relative; z-index: 4; margin: -2.4rem clamp(.8rem, 3vw, 2rem) 0;
  padding: 1.15rem 1.4rem 1.2rem 1.7rem; border-radius: 16px;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 44px -26px rgba(15,39,75,.45);
}
.sc-caption::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-metal); }
.sc-cap-kicker { display: block; font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.sc-caption h3 { margin-top: .25rem; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 800; letter-spacing: -0.03em; }
.sc-caption p { margin-top: .35rem; color: var(--ink-soft); max-width: 96ch; line-height: 1.65; }
@media (min-width: 1000px) { .tool .sc-caption { min-height: 232px; } }   /* alto estable al cambiar de vista */
.is-swap .sc-caption { animation: capIn .6s var(--ease-out); }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Lo que incluye Gamma Chart: 3 categorías en tarjetas ---------- */
.features {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(4rem, 8vw, 6rem); padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: calc(var(--radius) + 8px);
  background: rgba(255,255,255,.88); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(15,39,75,.04), 0 30px 60px -36px rgba(15,39,75,.35);
}
.features::before {                         /* línea dorada superior + brillos suaves */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--gold) 30%, #ffe7a0 50%, var(--gold) 70%, transparent) top / 100% 2px no-repeat,
    radial-gradient(45% 60% at 0% 0%, rgba(var(--gold-rgb), .10), transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(var(--blue-rgb), .06), transparent 70%);
}
.features-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.features-head { max-width: none; }
.features-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; padding: .35rem .8rem .35rem .6rem; border-radius: 999px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  background: #fff; border: 1px solid #ece7da; box-shadow: 0 6px 14px -10px rgba(15,39,75,.3);
}
.features-eyebrow img { width: 12px; height: auto; }
.features-head h3 { font-size: clamp(2.3rem, 3.7vw, 3.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1.02; }
@media (min-width: 760px) { .features-head h3 { white-space: nowrap; } }
.features-head h3 em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.features-sub { color: var(--ink-soft); margin-top: .7rem; font-size: 1.08rem; line-height: 1.55; }
.features-sub strong { color: var(--ink); font-weight: 700; }
/* recorrido: las tres áreas como etapas conectadas */
.features-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 1.2rem 0 0; padding: 0; counter-reset: ff; }
.features-flow li {
  counter-increment: ff; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem .4rem .45rem; border-radius: 999px;
  font-size: .86rem; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid #ebe8e0;
}
.features-flow li::before {
  content: counter(ff); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--mono); font-size: .7rem; font-weight: 700; color: var(--gold-deep); background: #fff7e3; border: 1px solid rgba(var(--gold-rgb), .45);
}
.features-flow li + li { margin-left: 1.6rem; position: relative; }
.features-flow li + li::after {                 /* conector entre etapas */
  content: ""; position: absolute; right: calc(100% + .45rem); top: 50%; width: 1.5rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--gold-rgb), .25), var(--gold-deep));
}
@media (max-width: 600px) { .features-flow li + li { margin-left: 0; } .features-flow li + li::after { display: none; } }
/* resumen en cifras */
.feat-stats { display: flex; list-style: none; margin: 0; padding: .3rem; border-radius: 18px; background: #fff; border: 1px solid #ebe8e0; box-shadow: 0 14px 30px -26px rgba(15,39,75,.35); }
.feat-stats li { display: grid; justify-items: center; gap: .3rem; min-width: 92px; padding: .7rem 1.1rem; }
.feat-stats li + li { border-left: 1px solid #f0eee8; }
.feat-stats b { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.feat-stats span { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.feat-stats span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 .4rem .1rem 0; border-radius: 50%; background: var(--gold); vertical-align: middle; }.feat-grid { display: grid; gap: 1.25rem; margin-top: 2.2rem; }
/* tarjeta de cada área */
.feat-col {
  position: relative; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid #eceae4;
  box-shadow: 0 1px 2px rgba(15,39,75,.03), 0 24px 48px -40px rgba(15,39,75,.45);
  transition: transform .5s var(--ease-out), border-color .35s, box-shadow .5s var(--ease-out);
}
.feat-col:hover { transform: translateY(-4px); border-color: rgba(var(--gold-rgb), .45); box-shadow: 0 30px 60px -38px rgba(214,150,10,.45); }
.feat-col-head {
  position: relative; display: flex; align-items: center; gap: .9rem; padding: 1.35rem 1.4rem 1.25rem;
  background:
    radial-gradient(circle at 1px 1px, rgba(var(--gold-rgb), .22) 1px, transparent 1.4px) 0 0 / 14px 14px,
    linear-gradient(180deg, #fffaf0, #fff);
}
.feat-col-head::before {                      /* el patrón de puntos se desvanece hacia abajo */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 92%);
}
.feat-col-head::after {                       /* línea dorada que se completa al pasar el mouse */
  content: ""; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), #f2c94c 60%, rgba(var(--gold-rgb), .15));
  transform: scaleX(.18); transform-origin: left; transition: transform .7s var(--ease-out);
}
.feat-col:hover .feat-col-head::after { transform: scaleX(1); }
.feat-col-head > * { position: relative; z-index: 1; }
.feat-col-title { display: grid; gap: .2rem; min-width: 0; }
.feat-col-head h4 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.feat-col-title small { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.feat-ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: #fff; border: 1px solid rgba(var(--gold-rgb), .4);
  box-shadow: 0 0 0 5px rgba(var(--gold-rgb), .08), 0 8px 18px -12px rgba(214,150,10,.6);
  transition: box-shadow .4s var(--ease-out);
}
.feat-col:hover .feat-ico { box-shadow: 0 0 0 7px rgba(var(--gold-rgb), .12), 0 10px 22px -12px rgba(214,150,10,.7); }
.feat-ico svg { width: 21px; height: 21px; fill: none; stroke: var(--gold-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.feat-list { display: grid; list-style: none; margin: 0; padding: .4rem .7rem .8rem; }
.feat-list li {
  position: relative; display: grid; gap: .2rem;
  padding: .85rem .8rem .85rem 2.3rem; border-radius: 12px;
  transition: background .3s;
}
.feat-list li + li::after { content: ""; position: absolute; top: 0; left: 2.3rem; right: .8rem; height: 1px; background: #f0eee8; }
.feat-list li::before {                       /* viñeta: rombo dorado */
  content: ""; position: absolute; left: .95rem; top: 1.18rem; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg);
  border: 1.5px solid var(--gold-deep); background: #fff; transition: background .3s, box-shadow .3s;
}
.feat-list li:hover { background: #fffaf0; }
.feat-list li:hover::before { background: var(--gold-deep); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .16); }
.feat-list li:hover + li::after, .feat-list li:hover::after { opacity: 0; }
.feat-list strong { color: var(--ink); font-weight: 700; font-size: .97rem; letter-spacing: -0.01em; }
.feat-list span { color: var(--mute); font-size: .87rem; line-height: 1.45; }
.features.is-revealed .feat-list li { animation: featIn .6s var(--ease-out) both; }
.features.is-revealed .feat-list li:nth-child(2) { animation-delay: .06s; } .features.is-revealed .feat-list li:nth-child(3) { animation-delay: .12s; }
.features.is-revealed .feat-list li:nth-child(4) { animation-delay: .18s; } .features.is-revealed .feat-list li:nth-child(5) { animation-delay: .24s; }
.features.is-revealed .feat-list li:nth-child(6) { animation-delay: .30s; }
@keyframes featIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .feat-stats { width: 100%; } .feat-stats li { flex: 1; min-width: 0; padding: .6rem .4rem; } }
@media (min-width: 960px) { .feat-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-list li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: .15rem; border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%230f274b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat,
    var(--gold-metal);
}

/* Halo dorado que sigue al cursor en tarjetas */
[data-spotlight]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), rgba(var(--gold-rgb), .08), transparent 65%);   /* halo sutil */
  opacity: 0; transition: opacity .4s;
}
[data-spotlight]:hover::before { opacity: 1; }

/* ---------- Membresía ---------- */
.pricing { background: rgba(245, 247, 250, .55); border-top: 1px solid var(--line); }
.plans { display: grid; gap: 1.4rem; margin-top: clamp(3rem, 6vw, 5rem); max-width: 1040px; margin-inline: auto; align-items: start; }
.plan {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 1.4rem;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--line-2);
  background: #fff; box-shadow: var(--shadow-sm);
}
.plan-head h3 { font-size: clamp(1.6rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: -0.04em; }
.plan-head p { color: var(--mute); margin-top: .5rem; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; font-family: var(--mono); font-weight: 500; }
.plan-currency { font-size: 1.6rem; color: var(--mute); }
.plan-amount { font-size: clamp(3.4rem, 5.6vw, 4.4rem); line-height: .9; letter-spacing: -0.06em; }
.plan-period { color: var(--mute); margin-left: .3rem; font-family: var(--sans); font-weight: 500; }
.plan-was { margin-left: .8rem; color: var(--dim); font-size: 1.15rem; text-decoration-thickness: 2px; text-decoration-color: #e2574c; }
.plan-day { margin-top: -.8rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); color: var(--mute); font-size: .88rem; }
.plan-list { display: grid; gap: .8rem; flex: 1; }
.plan-list li { display: flex; gap: .8rem; color: var(--ink-soft); font-size: .94rem; }
.plan-list strong { color: var(--ink); font-weight: 700; }
.plan-more { color: var(--gold-deep); font-weight: 700; font-size: .9rem; }
.plan-more span { display: inline-block; transition: transform .4s var(--ease-out); }
.plan-more:hover span { transform: translateX(4px); }
.plan-featured { border-color: rgba(var(--gold-rgb), .7); box-shadow: var(--shadow-lg); overflow: visible; }   /* visible: la etiqueta "Más popular" asoma por arriba */

/* ---------- Servicios adicionales (JC Levels, Mentoría 1:1) ---------- */
.addons { max-width: 1040px; margin: clamp(3rem, 6vw, 4.5rem) auto 0; }
.addons-eyebrow { display: flex; align-items: center; gap: 1rem; }
.addons-eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.addons-grid { display: grid; gap: 1.4rem; margin-top: 1.4rem; align-items: start; }
.addon {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.6rem, 2.6vw, 2.2rem); border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.9); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,39,75,.04), 0 18px 40px -28px rgba(15,39,75,.3);
  transition: border-color .35s, box-shadow .45s var(--ease-out);
}
.addon:hover { border-color: rgba(var(--gold-rgb), .55); box-shadow: 0 24px 48px -28px rgba(214,150,10,.4); }
.addon header { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.addon h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.addon h3 span { font-weight: 600; color: var(--ink-soft); }
.addon-price { font-size: 1rem; color: var(--ink-soft); }
.addon-price .data { font-size: 1.5rem; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; }
.addon-price small { color: var(--mute); font-size: .85rem; }
.addon-desc { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.addon-list summary {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--ink); font-size: .95rem; padding-block: .2rem;
}
.addon-list summary::-webkit-details-marker { display: none; }
.addon-list summary span { color: var(--mute); font-weight: 500; margin-left: .3rem; margin-right: auto; }
.addon-list summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(-135deg); transition: transform .3s; margin-right: .3rem; }
.addon-list:not([open]) summary::after { transform: rotate(45deg); }
.addon-list .plan-list { margin-top: 1rem; }
.addon .btn { margin-top: .4rem; }
@media (min-width: 860px) { .addons-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- StarBorder (lib/star-border.js): estrella de luz que recorre el borde ---------- */
.star-border__light {
  position: absolute; top: -48px; left: -48px; z-index: -1;
  width: calc(100% + 96px); height: calc(100% + 96px); pointer-events: none;
  max-width: none;   /* el lienzo sobresale 48px por lado: anula el max-width:100% global */
}
.star-border { overflow: visible; isolation: isolate; }

/* ---------- SpecularButton (lib/specular-button.js): reflejo de luz en el borde que sigue al cursor ---------- */
.specular-button {
  overflow: visible; isolation: isolate;
  border-color: transparent;                       /* el borde lo dibuja el lienzo */
  background: rgba(255, 255, 255, .72);            /* cuerpo de vidrio claro */
  box-shadow: 0 10px 24px -14px rgba(15, 39, 75, .35);
}
@supports (backdrop-filter: blur(8px)) {
  .specular-button { background: rgba(255, 255, 255, .55); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); }
}
.specular-button:hover { border-color: transparent; }
.specular-button:active { transform: scale(.97); }
.specular-button--fallback { border-color: var(--line-2); }   /* sin WebGL2: borde normal */
.specular-button__light {
  position: absolute; inset: -24px; z-index: 1; display: block;
  width: calc(100% + 48px); height: calc(100% + 48px); max-width: none; pointer-events: none;
}
.specular-button__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: inherit; }
/* Título del plan + pastilla dorada clara al lado ("Acceso completo", "Oferta por tiempo limitado") */
.plan-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; }
.plan-pill {
  padding: .4rem .7rem; border-radius: 999px; white-space: nowrap;
  background: #fff6df; border: 1px solid rgba(var(--gold-rgb), .5);
  color: var(--gold-deep); font-size: .62rem;
}
/* Etiqueta colgante sobre la tarjeta destacada */
.plan-ribbon {
  position: absolute; top: 0; left: 50%; translate: -50% -50%; z-index: 3;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.05rem; border-radius: 999px; white-space: nowrap;
  /* mismo dorado claro con destello continuo que el botón "Unirme a Diamond" */
  background: linear-gradient(100deg,
    #fcdf8e 0%, #feebb3 14%, #fbd97e 28%,
    #fff2cc 42%, #fffdf5 50%, #fff2cc 58%,
    #fbd97e 72%, #feebb3 86%, #fcdf8e 100%);
  background-size: 300% 100%;
  animation: goldShine 7s linear infinite;
  border: 1px solid rgba(226, 176, 60, .45);
  box-shadow: 0 6px 16px -10px rgba(226,176,60,.4);
  color: var(--gold-ink); font-size: .82rem; font-weight: 700; letter-spacing: -0.01em;
}
.plan-ribbon svg { width: 9px; height: 6px; fill: var(--gold-ink); }
@media (prefers-reduced-motion: reduce) { .plan-ribbon { animation: none; } }
.plan-featured { margin-top: 1.1rem; }

.free {
  margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 1040px; margin-inline: auto;
  padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: calc(var(--radius) + 6px);
  background: var(--ink); color: #fff;
}
.free-head { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.free-head h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -0.03em; }
.free-tag { padding: .35rem .7rem; border-radius: 999px; background: var(--gold-metal); color: var(--gold-ink); font-size: .62rem; }
.free-grid { display: grid; gap: 1rem; margin-top: 1.6rem; }
.free-card { padding: 1.3rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: border-color .4s, background .4s; }
.free-card:hover { border-color: rgba(var(--gold-rgb), .5); background: rgba(var(--gold-rgb), .06); }
.free-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--gold-rgb), .14); }
.free-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.free-card h4 { margin-top: 1rem; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; }
.free-card p { margin-top: .4rem; font-size: .88rem; color: rgba(255,255,255,.65); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq-grid { display: grid; gap: 3rem; }
/* preguntas como tarjetas: la abierta se destaca con fondo marfil y filete dorado */
.faq-list { display: grid; gap: .75rem; }
.faq-list details {
  position: relative; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.88); border: 1px solid #ebe8e0;
  box-shadow: 0 14px 30px -28px rgba(15,39,75,.4); transition: border-color .35s, box-shadow .45s var(--ease-out), background .35s;
}
.faq-list details::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #f2c94c, var(--gold-deep)); transform: scaleY(0); transition: transform .45s var(--ease-out);
}
.faq-list details:hover { border-color: #e2dccb; }
.faq-list details[open] { background: linear-gradient(180deg, #fffcf4, #fff 60%); border-color: rgba(var(--gold-rgb), .45); box-shadow: 0 24px 46px -34px rgba(214,150,10,.5); }
.faq-list details[open]::before { transform: scaleY(1); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
  padding: 1.25rem 1.3rem 1.25rem 1.6rem; border-radius: 18px; letter-spacing: -0.02em; font-size: clamp(1.02rem, 1.4vw, 1.14rem); font-weight: 700; color: var(--ink);
  transition: color .3s;
}
.faq-list summary:focus { outline: none; }
.faq-list summary:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--gold-rgb), .55); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {                     /* "+" dibujado con dos líneas: gira a "×" al abrir */
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e3dfd4;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 1.8px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.8px 12px no-repeat,
    #fff;
  transition: transform .45s var(--ease-out), border-color .3s, box-shadow .3s;
}
.faq-list summary:hover { color: var(--gold-deep); }
.faq-list summary:hover::after { border-color: rgba(var(--gold-rgb), .6); }
.faq-list details[open] summary::after {
  transform: rotate(45deg); border-color: rgba(var(--gold-rgb), .7);
  background:
    linear-gradient(var(--gold-deep), var(--gold-deep)) center / 12px 1.8px no-repeat,
    linear-gradient(var(--gold-deep), var(--gold-deep)) center / 1.8px 12px no-repeat,
    #fff7e3;
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .12);
}
.faq-list details p { margin: 0; padding: 0 4.2rem 1.4rem 1.6rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.7; max-width: 68ch; }
.faq-list details[open] p { animation: faqIn .45s var(--ease-out) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .faq-list details p { padding-right: 1.3rem; } }

/* ---------- CTA final ---------- */
.cta-final {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(7rem, 13vw, 11rem); text-align: center;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(var(--gold-rgb), .22), transparent 70%),
    radial-gradient(40% 60% at 20% 100%, rgba(var(--blue-rgb), .10), transparent 70%);
  border-top: 1px solid var(--line);
}
.cta-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, #000 10%, transparent 75%);
}
.cta-inner { display: grid; justify-items: center; gap: 1.6rem; }
.cta-logo { width: 72px; height: 72px; filter: drop-shadow(0 10px 20px rgba(150,113,31,.3)); animation: bob 6s ease-in-out infinite; }
.cta-title { font-size: clamp(2.8rem, 7.6vw, 6.4rem); font-weight: 700; line-height: .98; letter-spacing: -0.055em; }
.cta-inner p { color: var(--ink-soft); font-size: 1.1rem; }

/* ---------- Conecta con nosotros: redes + soporte directo ---------- */
.connect {
  position: relative; border-top: 1px solid var(--line);
  background:
    radial-gradient(50% 60% at 85% 30%, rgba(var(--gold-rgb), .12), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(var(--blue-rgb), .06), transparent 70%);
}
.connect-grid { display: grid; gap: 1.4rem; max-width: 1120px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; align-items: stretch; }
.connect-socials { display: grid; gap: 1rem; align-content: center; }   /* centrada en altura con el panel de soporte */

/* Encabezado en dos columnas: etiqueta + título a la izquierda, texto con línea dorada a la derecha */
.connect-head { display: grid; gap: 1.6rem; max-width: 1120px; margin-inline: auto; align-items: end; }
.connect-title { margin-top: 1rem; }
.connect-title em {
  background: linear-gradient(100deg,
    #cf8d08 0%, #f3bd34 14%, #c28207 28%,
    #f6cb5e 42%, #fff3cf 50%, #f6cb5e 58%,
    #c28207 72%, #f3bd34 86%, #cf8d08 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldShine 7s linear infinite;
}
.connect-sub {
  position: relative; padding-left: 1.4rem; max-width: 36ch;
  font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.55; font-weight: 500; color: var(--ink-soft);
}
.connect-sub::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 3px; background: var(--gold-metal); }
.connect-sub strong { color: var(--ink); font-weight: 700; }
@media (min-width: 960px) { .connect-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 3rem; } .connect-sub { margin-bottom: .6rem; } }

.social-card {
  --brand: var(--ink);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1.25rem 1.4rem; border-radius: 20px;
  background: rgba(255,255,255,.9); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,39,75,.04), 0 16px 34px -24px rgba(15,39,75,.3);
  color: var(--ink); text-decoration: none;
  transition: transform .45s var(--ease-out), border-color .35s, box-shadow .45s var(--ease-out);
}
.social-card::before {                       /* barra de color de la marca */
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brand); opacity: .85;
}
.social-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--brand) 55%, transparent); }
.sc-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--brand); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--brand) 70%, transparent); }
.sc-ico svg { width: 30px; height: 30px; color: #fff; }
.sc-youtube { --brand: #ff0033; }
.sc-youtube .sc-ico path { fill: #ff0033; }
.sc-instagram { --brand: #d62976; }
.sc-instagram .sc-ico { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.sc-discord { --brand: #5865f2; }
.sc-body { display: grid; gap: .15rem; min-width: 0; }
.sc-body strong { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em; }
.sc-body small { color: var(--ink-soft); font-size: .92rem; }
.sc-handle { font-family: var(--mono); font-size: .78rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-go {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: .84rem; font-weight: 700; color: var(--ink); background: #fff;
  transition: background .3s, color .3s, border-color .3s;
}
.sc-go svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social-card:hover .sc-go { background: var(--brand); border-color: var(--brand); color: #fff; }

.support-panel {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.8rem, 3vw, 2.4rem); border-radius: 24px;
  /* Cristal blanco como las tarjetas de redes; barra superior verde→dorado y brillo verde muy suave */
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink); box-shadow: 0 1px 2px rgba(15,39,75,.04), 0 24px 50px -30px rgba(15,39,75,.35);
}
.support-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, #25d366, #f4bd2c) top / 100% 3px no-repeat,
    radial-gradient(55% 45% at 100% 0%, rgba(37,211,102,.10), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(var(--gold-rgb), .10), transparent 70%);
}
.support-head { display: flex; align-items: center; gap: .6rem; }
.support-head .label { color: var(--gold-deep); }
.support-dot { width: 9px; height: 9px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: supPulse 2s ease-out infinite; }
@keyframes supPulse { 70% { box-shadow: 0 0 0 9px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.support-panel h3 { margin-top: 1.1rem; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink); }
.support-panel h3 em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.support-panel > p { margin-top: .8rem; color: var(--ink-soft); max-width: 40ch; }
.support-list { display: grid; gap: .8rem; margin-top: 1.6rem; }
.support-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  padding: .85rem .9rem .85rem .85rem; border-radius: 16px;
  background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink); text-decoration: none;
  transition: background .3s, border-color .3s, transform .4s var(--ease-out), box-shadow .4s;
}
.support-card:hover { background: #fff; border-color: rgba(37,211,102,.55); transform: translateY(-2px); box-shadow: 0 16px 28px -18px rgba(37,211,102,.6); }
.support-avatar {                             /* blanco con inicial oscura y punto verde de "en línea" */
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: #fff; border: 1px solid #e3e6ea;
  color: var(--ink); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em;
  box-shadow: 0 6px 14px -12px rgba(15,39,75,.35);
}
.support-avatar::after {
  content: ""; position: absolute; right: -1px; bottom: 0; width: 12px; height: 12px; border-radius: 50%;
  background: #25d366; border: 2px solid var(--bg-2); transition: border-color .3s;
}
.support-card:hover .support-avatar::after { border-color: #fff; }
.support-info { display: grid; gap: .1rem; min-width: 0; }
.support-info strong { font-size: 1.05rem; font-weight: 700; }
.support-info span { font-family: var(--mono); font-size: .82rem; color: var(--mute); white-space: nowrap; }
.support-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem; border-radius: 999px; background: #25d366; color: #fff;
  font-size: .82rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(37,211,102,.8);
}
.support-btn svg { width: 16px; height: 16px; }
@media (min-width: 960px) { .connect-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (max-width: 560px) {
  .sc-go { display: none; }
  .social-card { grid-template-columns: auto 1fr; }
  .support-btn { padding: .55rem; font-size: 0; gap: 0; }
}

/* Redes sociales */
.social-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem; margin-top: .4rem; }
.social-cta .label { color: var(--mute); margin-right: .3rem; }
.social-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.social-chip svg { width: 20px; height: 20px; color: var(--gold-deep); }
.social-chip:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(var(--gold-rgb), .7); }
.footer-social { display: flex; gap: .7rem; }
.social-chip .chip-num { font-family: var(--mono); font-weight: 500; font-size: .82rem; color: var(--mute); }
.footer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; margin-top: 2rem; font-size: .9rem; }
.footer-contact .label { color: rgba(255,255,255,.45); }
.footer-contact a { color: rgba(255,255,255,.8); transition: color .25s; }
.footer-contact a:hover { color: var(--gold); }
.social-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75);
  transition: color .25s, border-color .25s, background .25s;
}
.social-icon svg { width: 20px; height: 20px; }
.social-icon:hover { color: var(--gold); border-color: rgba(var(--gold-rgb), .6); background: rgba(var(--gold-rgb), .08); }

/* ---------- Footer ---------- */
.footer { padding-block: 4rem 2.5rem; background: var(--ink); color: #fff; }
.footer .brand-name span { color: rgba(255,255,255,.6); }
.footer .nav-link { color: rgba(255,255,255,.7); }
.footer .nav-link:hover { color: #fff; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.6rem; font-size: .9rem; }
.disclaimer { margin-top: 3rem; color: rgba(255,255,255,.5); font-size: .8rem; max-width: 90ch; }
.footer-legal { margin: 0; color: rgba(255,255,255,.4); font-size: .8rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1);
}
.footer-policies { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-policies a { position: relative; font-size: .82rem; color: rgba(255,255,255,.65); transition: color .25s; }
.footer-policies a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.footer-policies a:hover { color: var(--gold); }
.footer-policies a:hover::after { transform: scaleX(1); }
.faq-list details p a { color: var(--gold-deep); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(var(--gold-rgb), .45); text-underline-offset: 3px; }
.faq-list details p a:hover { text-decoration-color: var(--gold-deep); }

/* ---------- Visor ampliado ---------- */
.lightbox {
  width: min(96vw, 1600px); max-height: 94vh; padding: 0; border: 0; border-radius: 16px;
  background: #fff; color: var(--ink); overflow: auto;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.45);
}
.lightbox-body { background: #f8fafc; }
.lightbox-body svg { display: block; width: 100%; height: auto; max-height: 82vh; }
/* Cabecera de "Cómo operamos": título | texto (alineados abajo) + franja con el recorrido de 4 etapas y el horario */
.op-head { display: grid; gap: 1.4rem 4rem; align-items: end; }
@media (min-width: 900px) { .op-head { grid-template-columns: 1.25fr 1fr; } }
.op-head-text { padding: .2rem 0 .5rem 1.6rem; border-left: 2px solid transparent; border-image: linear-gradient(180deg, transparent, var(--gold-deep) 25%, var(--gold) 75%, transparent) 1; }
/* Título de "Cómo operamos": más grande y ajustado, "con nosotros." con trazo dorado que se dibuja al aparecer */
.op-head .section-title { font-size: clamp(2.6rem, 4.9vw, 4.7rem); white-space: nowrap; line-height: .98; letter-spacing: -0.055em; }
.op-head .section-title em { position: relative; display: inline-block; padding-bottom: .12em; }
.op-head .section-title em::after, .features-head h3 em::after, .pr-head .section-title em::after, .faq .section-title em::after {
  content: ""; position: absolute; left: .02em; right: .18em; bottom: -.04em; height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9900c'/%3E%3Cstop offset='.5' stop-color='%23f6d06a'/%3E%3Cstop offset='1' stop-color='%23b07c08'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 16 C 90 6, 200 4, 396 12' fill='none' stroke='url(%23g)' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.22,.8,.2,1) .35s;
}
.op-head.is-revealed .section-title em::after, html:not(.js) .op-head .section-title em::after,
.features.is-revealed .features-head h3 em::after, html:not(.js) .features-head h3 em::after,
.pr-head.is-revealed .section-title em::after, html:not(.js) .pr-head .section-title em::after,
.faq .section-head.is-revealed .section-title em::after, html:not(.js) .faq .section-title em::after { clip-path: inset(0 0 0 0); }
.features-head h3 em { position: relative; display: inline-block; padding-bottom: .14em; }
.op-head .eyebrow { margin-bottom: .4rem; }
@media (prefers-reduced-motion: reduce) { .op-head .section-title em::after, .features-head h3 em::after, .pr-head .section-title em::after, .faq .section-title em::after { transition: none; clip-path: none; } }
.op-intro-lead { text-wrap: balance; font-size: clamp(1.25rem, 1.65vw, 1.55rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--ink); }
.op-intro-sub { margin-top: .7rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; max-width: 54ch; }
.op-intro-sub strong { color: var(--ink); font-weight: 700; }
.op-strip {
  display: grid; gap: 1rem; align-items: center; margin-top: clamp(2rem, 4vw, 2.8rem);
  padding: 1rem 1rem 1rem 1.5rem; border-radius: 22px; background: #fff; border: 1px solid #e6e9ee;
  box-shadow: 0 1px 2px rgba(15,39,75,.03), 0 18px 40px -32px rgba(15,39,75,.35);
}
@media (min-width: 1380px) { .op-strip { grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; } }
/* por debajo, el horario baja bajo las etapas: cabecera a la izquierda y línea de tiempo a la derecha */
@media (min-width: 760px) and (max-width: 1379.98px) {
  .op-strip-meta { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 2rem; }
  .op-sched-head { flex-direction: column; align-items: flex-start; gap: .45rem; }
}
.op-strip-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem .4rem; list-style: none; margin: 0; padding: 0; }
.op-strip-steps li { display: flex; align-items: center; gap: .75rem; padding: .3rem 0; min-width: 0; }
.op-strip-steps .op-sep { display: none; }
@media (min-width: 900px) {
  /* línea de progreso: cuatro columnas iguales, número arriba unido por una línea y texto centrado debajo */
  .op-strip-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .op-strip-steps li:not(.op-sep) { position: relative; flex-direction: column; justify-content: flex-start; gap: .7rem; padding: .4rem .5rem; text-align: center; }
  .op-strip-steps li:not(.op-sep):not(:last-child)::after {
    content: ""; position: absolute; z-index: 0; top: calc(.4rem + 19px); left: calc(50% + 30px); width: calc(100% - 60px); height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-deep), rgba(var(--gold-rgb), .25));
  }
  .op-strip-steps li b { position: relative; z-index: 1; }
  .op-strip-steps li span { align-items: center; }
}.op-strip-steps b {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  font-family: var(--mono); font-size: .86rem; color: #fff; background: linear-gradient(160deg, #f2c94c, #c9900c);
  box-shadow: 0 8px 18px -10px rgba(214,150,10,.7);
}
.op-strip-steps span { flex: none; display: flex; flex-direction: column; line-height: 1.2; }
.op-strip-steps strong { font-size: .98rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.op-strip-steps small { white-space: nowrap; letter-spacing: .05em; margin-top: .2rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.op-strip-meta {
  display: grid; gap: .85rem; margin: 0; padding: .95rem 1.15rem 1rem; min-width: 340px; box-sizing: border-box;
  border-radius: 16px; background: linear-gradient(180deg, #fff, #fbfaf6); border: 1px solid #ece5d3;
}
.op-sched-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; white-space: nowrap; }
.op-live {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: #137a51; background: #eef8f3; border: 1px solid rgba(31,157,104,.22);
}
.op-live .op-intro-dot { width: 8px; height: 8px; }
.op-sched-where { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
/* línea de tiempo: dos tramos contiguos */
.op-sched { display: grid; grid-template-columns: 1fr 1.9fr; gap: 0; }
.op-seg { display: grid; gap: .35rem; min-width: 0; }
.op-seg small { font-size: .86rem; font-weight: 800; color: var(--mute); white-space: nowrap; }
.op-seg i { position: relative; display: block; height: 6px; background: linear-gradient(90deg, #f2d27a, #d9a520); border-radius: 6px 0 0 6px; }
.op-seg.is-live i { background: linear-gradient(90deg, #4cc493, #1f9d68); border-radius: 0 6px 6px 0; }
.op-seg i::before, .op-seg.is-live i::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid #d9a520; transform: translate(-50%, -50%); box-sizing: border-box;
}
.op-seg.is-live i::before { border-color: #1f9d68; }
.op-seg.is-live i::after { left: 100%; border-color: #1f9d68; }
.op-seg > span { display: flex; justify-content: space-between; }
.op-seg time { font-size: .9rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
.op-seg.is-live > span, .op-seg.is-live small { padding-left: .55rem; }
.op-seg.is-live small { color: #137a51; }
.op-seg.is-pre small { color: #a77a08; }
@media (max-width: 420px) { .op-strip-meta { min-width: 0; } }.op-intro-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #1f9d68; animation: livePulse 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .op-intro-dot { animation: none; } }.lightbox-body img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: #fff; }
.opx-img { cursor: zoom-in; }
.opx-zoom {                                   /* pista "Ampliar" sobre cada imagen */
  position: absolute; z-index: 2; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid #e3e7ee;
  font-size: .8rem; font-weight: 700; color: var(--ink-soft); box-shadow: 0 10px 22px -14px rgba(15,39,75,.4);
  opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease-out); pointer-events: none;
}
.opx-card:hover .opx-zoom { opacity: 1; transform: none; }
@media (hover: none) { .opx-zoom { opacity: 1; transform: none; } }
.lightbox::backdrop { background: rgba(15,39,75,.72); }
.lightbox[open] { animation: lbIn .45s var(--ease-out); }
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lightbox-cap { padding: 1rem 1.3rem 1.2rem; color: var(--ink-soft); font-size: .92rem; border-top: 1px solid var(--line); }
.lightbox-close {
  position: sticky; top: .7rem; float: right; margin: .7rem .7rem -3rem 0; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.5rem; line-height: 1;
  box-shadow: var(--shadow-md);
}

/* =============================================================
   7. Effects — revelado al hacer scroll
   ============================================================= */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* =============================================================
   8. Responsive (mobile-first)
   ============================================================= */
@media (max-width: 719px) {
  /* En móvil, las anotaciones del diagrama se simplifican */
  .c-magnet, .c-confirm { display: none; }
  .c-level { padding: .3rem .5rem; font-size: 0; max-width: none; }
  .c-level strong { font-size: .72rem; margin: 0; }
}
@media (min-width: 540px) {
  .mock-float { display: block; }
}
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .plans { grid-template-columns: 1fr 1fr; }
  .section-head-split { grid-template-columns: 1.4fr 1fr; }
  .daily-grid { grid-template-columns: repeat(3, 1fr); }
  .free-grid { grid-template-columns: repeat(3, 1fr); }
  .diagram-stage { aspect-ratio: 16 / 9; }
}
@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle, .nav-mobile { display: none; }
  /* Dos columnas flexibles con límites: texto ≤ 37rem, visual ≤ 40rem, hueco fluido.
     El conjunto se centra y deja de crecer en pantallas grandes / ultrawide. */
  .hero-inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr);
    justify-content: center;
    column-gap: clamp(2rem, 3.5vw, 3.5rem);
  }
  /* La ilustración se agranda un 16% y se extiende hacia el margen derecho */
  .hero-visual { justify-self: start; width: 104%; margin-right: -4%; }
  .hero-scroll { display: block; }
  .about-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); }

  .method-steps { grid-template-columns: 1fr 1fr; padding-left: 0; }
  .method-rail { display: none; }
  .step::before { display: none; }

  /* Showcase: áreas en columna a la izquierda */
  .showcase { grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; align-items: start; }
  .sc-cats { flex-direction: column; overflow: visible; padding: 0; position: sticky; top: 100px; }
  .sc-cat strong { white-space: normal; }
  .sc-cat small { display: block; }
  .diagram-stage { aspect-ratio: 16 / 8; }
  .faq-grid { grid-template-columns: 1fr 1.3fr; gap: 5rem; }
  .faq-grid .section-head { position: sticky; top: 120px; align-self: start; }
}
@media (min-width: 1280px) {
  /* Pasos en horizontal: raíl dorado arriba que avanza con el scroll */
  .method-steps { grid-template-columns: repeat(4, 1fr); padding-left: 0; padding-top: 2.6rem; gap: 1rem; }
  .method-rail { display: block; left: 8px; right: 8px; top: 6px; bottom: auto; width: auto; height: 2px; }
  .method-rail span { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .step::before { display: block; left: 1.5rem; top: -2.6rem; }
  .showcase { grid-template-columns: 330px minmax(0, 1fr); }
}

/* =============================================================
   9. Reduced motion — solo efectos intrusivos
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .app-float, .cta-logo, .hero-scroll span { animation: none; }
}

/* =============================================================
   GAMMA CHART — escenario premium CLARO (sección estrella)
   Identidad: blanco + dorado como ACENTO (sin teñir todo de amarillo);
   el navy solo en textos. Losa blanca, cuadrícula gris muy tenue,
   filo dorado superior y logo grande de Gamma Chart.
   ============================================================= */
.tool {
  position: relative; isolation: isolate; overflow: clip;
  margin-inline: clamp(.5rem, 1.6vw, 1.5rem); border-radius: clamp(24px, 3vw, 44px);
  padding-block: clamp(5rem, 9vw, 8rem);
  background:
    radial-gradient(50% 30% at 50% 0%, rgba(var(--gold-rgb), .07), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -60px rgba(15,39,75,.35), inset 0 1px 0 #fff;
}
.tool::before {                                   /* cuadrícula técnica gris muy tenue */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(15,39,75,.045) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(15,39,75,.045) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 25%, #000 25%, transparent 80%);
  mask-image: radial-gradient(70% 55% at 50% 25%, #000 25%, transparent 80%);
}
.tool::after {                                    /* filo dorado superior (único toque fuerte de dorado) */
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Encabezado: logo grande de Gamma Chart */
.tool-wordmark { display: block; width: min(520px, 80vw); height: auto; margin: 0 auto 1.6rem; transform: translateX(-6%); }   /* compensación óptica: el texto del logo queda a la derecha del icono */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tool .tool-logo { display: none; }
.tool-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; }
.tool-badges li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2);
  box-shadow: 0 6px 14px -12px rgba(15,39,75,.4);
  font-size: .86rem; font-weight: 700; color: var(--ink);
}
.tool-badges svg { width: 17px; height: 17px; fill: none; stroke: var(--gold-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Showcase */
/* Panel en gris frío suave: separa el showcase del fondo blanco y hace resaltar las piezas blancas de adentro */
.tool .showcase {
  background: linear-gradient(180deg, #f4f6f9 0%, #edf0f4 100%); border-color: #d6dce5;
  box-shadow: 0 1px 2px rgba(15,39,75,.05), 0 40px 80px -46px rgba(15,39,75,.45), inset 0 1px 0 #fff;
}
/* Más ancho que el contenedor normal (hasta 1600px) para que el gráfico se vea más grande */
@media (min-width: 1000px) {
  .tool .showcase {
    --sc-w: min(1400px, calc(100vw - 2 * var(--gutter) - 3rem));
    width: var(--sc-w); margin-left: calc(50% - var(--sc-w) / 2);
  }
}
@media (min-width: 1100px) { .tool .showcase { grid-template-columns: 290px minmax(0, 1fr); gap: 1.8rem; } }
.tool .sc-head { border-bottom-color: #d6dce5; }
.tool .sc-views { background: #fff; border-color: #d6dce5; box-shadow: 0 6px 16px -12px rgba(15,39,75,.3); }
/* cada área como su propia tarjeta: las inactivas en blanco translúcido con borde suave; la activa, blanca y con filo dorado */
.tool .sc-cats { gap: .55rem; }
.tool .sc-cat {
  background: rgba(255,255,255,.55); border: 1px solid #dde3ea;
  box-shadow: 0 1px 2px rgba(15,39,75,.04), 0 6px 14px -12px rgba(15,39,75,.25);
}
.tool .sc-cat:not(.is-active):hover { background: rgba(255,255,255,.9); border-color: #cfd6df; transform: translateX(3px); }
.tool .sc-cat.is-active { border-color: rgba(var(--gold-rgb), .55); }
.tool .sc-cat-ico { background: #fff; }
.tool .sc-cat.is-active { background: #fff; }
.tool .sc-caption { background: #fff; border-color: #d6dce5; }
.tool .showcase::before { background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent) top / 100% 2px no-repeat; }
.tool .sc-cats { position: static; }              /* fijo: no sigue al scroll */
@media (min-width: 1100px) { .tool .sc-cats { align-self: start; margin-top: 4.1rem; } }   /* menú a la altura de la ventana del gráfico */
/* Encabezado del showcase: presenta todo el panel como el ecosistema de Gamma Chart */
/* Cabecera de producto: logo en placa dorada, "en tiempo real", título fuerte, bajada y cifras destacadas */
.sc-head {
  position: relative; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem;
  padding: 1.25rem 1.4rem; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(60% 140% at 0% 0%, rgba(var(--gold-rgb), .12), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8f9fb);
  border: 1px solid #dde3ea;
  box-shadow: 0 1px 2px rgba(15,39,75,.04), 0 18px 36px -26px rgba(15,39,75,.35);
}
.sc-head::before {                                   /* filo dorado superior */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-deep) 50%, var(--gold) 70%, transparent);
}
.sc-head-brand { display: flex; align-items: center; gap: 1.1rem; min-width: 0; flex: 1 1 520px; }
.sc-head-logo {
  flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(160deg, #ffffff, #fff6dc);
  border: 1.5px solid rgba(var(--gold-rgb), .6);
  box-shadow: 0 10px 22px -12px rgba(214,150,10,.55), inset 0 1px 0 #fff;
}
.sc-head-logo img { width: 30px; height: auto; }
.sc-head-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; }
.sc-head-kicker { font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.sc-head-live {
  display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; color: #137a51; background: rgba(31,157,104,.1); border: 1px solid rgba(31,157,104,.3);
}
.sc-head-live i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d68; animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(31,157,104,.55); } 100% { box-shadow: 0 0 0 7px rgba(31,157,104,0); } }
.sc-head h3 { margin-top: .4rem; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; color: var(--ink); }
.sc-head h3 em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-head-txt p { margin-top: .35rem; color: var(--ink-soft); font-size: .98rem; max-width: 62ch; }
.sc-head-meta { display: flex; gap: .55rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.sc-head-meta li {
  min-width: 84px; padding: .6rem .9rem .55rem; border-radius: 14px; text-align: center;
  background: #fff; border: 1px solid #dde3ea; box-shadow: 0 8px 18px -14px rgba(15,39,75,.35);
}
.sc-head-meta strong {
  display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink);
}
.sc-head-meta span { display: block; margin-top: .15rem; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .sc-head-live i { animation: none; } }
/* alturas parejas: la etiqueta va en su propia línea arriba; debajo, logo + título + cifras comparten el mismo centro vertical */
.sc-head { align-items: center; row-gap: .9rem; }
.sc-head-row { flex: 1 1 100%; }
.sc-head-brand { align-items: center; }
.sc-head h3 { margin-top: 0; }
.sc-head-meta { align-self: center; }
.tool .sc-cat.is-active { background: #fff; border-color: rgba(var(--gold-rgb), .55); box-shadow: 0 14px 30px -22px rgba(15,39,75,.45), 0 0 0 3px rgba(var(--gold-rgb), .1); }
.tool .sc-main::before { background: radial-gradient(50% 50% at 50% 50%, rgba(var(--gold-rgb), .10), transparent 70%); }
/* Ventana con marco dorado metálico de 2px + resplandor dorado: la pieza protagonista del panel */
.tool .showcase .app-stage {
  border: 2px solid transparent; border-radius: 18px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #f9dc7c 0%, #c9900c 28%, #f6d06a 52%, #b07c08 78%, #f2c94c 100%) border-box;
  box-shadow: 0 2px 4px rgba(15,39,75,.08), 0 24px 50px -24px rgba(15,39,75,.45), 0 40px 90px -40px rgba(214,150,10,.55);
}
/* Barra de la ventana: gris grafito claro, título en tinta y divisor fuerte */
.tool .showcase .app-stage .app-bar {
  padding-block: .8rem; background: linear-gradient(180deg, #eef1f5, #e2e7ee); border-bottom: 1px solid #bcc5d1;
  font-size: .72rem;
}
.tool .showcase .app-stage .app-title { font-family: var(--sans, inherit); font-size: clamp(.92rem, 1.1vw, 1.05rem); font-weight: 800; letter-spacing: -.01em; text-transform: none; }
.tool .showcase .app-stage .window-dots i { width: 11px; height: 11px; }
.tool .showcase .sc-stage { background: #fff; cursor: crosshair; }
.mock.has-xh { cursor: crosshair; }
.tool .showcase .app-stage .app-title { color: var(--ink); }
.tool .showcase .app-stage .window-dots i { background: var(--line-2); }
.tool .showcase .app-stage .window-dots i:first-child { background: var(--gold-metal); }
.tool .sc-zoom { color: var(--ink-soft); border-color: var(--line-2); background: #fff; }
.tool .sc-zoom:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }
/* Descripción debajo de la ventana, sin taparla */
.tool .sc-caption { margin: 1.2rem 0 0; box-shadow: 0 16px 34px -26px rgba(15,39,75,.35); }

/* Tabla "Lo que incluye" */
.tool .features { background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%); border-color: #ece7da; }
.tool .features::before { background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent) top / 100% 2px no-repeat; }

/* Texto descriptivo de Gamma Chart más marcado + 5 tarjetas en una sola fila */
.tool .section-head-center .section-sub { color: var(--ink); font-size: clamp(1.08rem, 1.35vw, 1.22rem); font-weight: 500; line-height: 1.6; max-width: 80ch; }
@media (min-width: 1100px) { .tool-badges { flex-wrap: nowrap; } .tool-badges li { white-space: nowrap; } }

/* ---------- Encabezado de Membresía: solo etiqueta y título centrados, con el trazo dorado bajo "quieres operar." ---------- */
.pr-head .section-title { font-size: clamp(2.6rem, 4.9vw, 4.7rem); line-height: .98; letter-spacing: -0.055em; }
.pr-head .section-title em { position: relative; display: inline-block; padding-bottom: .12em; }
/* ---------- Encabezado de FAQ: título con trazo dorado ---------- */
.faq .section-title { font-size: clamp(2.6rem, 4.9vw, 4.7rem); line-height: .98; letter-spacing: -0.055em; }
.faq .section-title em { position: relative; display: inline-block; padding-bottom: .12em; }


/* "Nuestro ecosistema": línea horizontal debajo del título */
.eco-eyebrow { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.eco-eyebrow::after { content: ""; display: block; width: 100%; height: 1px; background: linear-gradient(90deg, var(--gold-deep), rgba(var(--gold-rgb), .35) 40%, rgba(15,39,75,.08)); }