/* ==========================================================================
   Nezxu — identidad clara, fintech-grade: blanco/negro + un solo azul de
   confianza como acento. Inspirado en el lenguaje visual de plataformas
   financieras B2B (espacio en blanco generoso, tipografia fuerte, tarjetas
   planas con sombra suave, cero ruido visual). Pensado para transmitir
   formalidad y cumplimiento, no "startup de garage".
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-alt: #f6f7f9;
  --bg-card: #fbfbfc;
  --bg-inverse: #0a0e17;
  --line: rgba(10,14,23,0.10);
  --line-soft: rgba(10,14,23,0.06);
  --fg: #0a0e17;
  --muted: #565d6b;
  --muted-2: #8a909c;
  --accent: #0057ff;
  --accent-2: #0039b3;
  --accent-soft: rgba(0,87,255,0.07);
  --accent-line: rgba(0,87,255,0.35);
  --accent-contrast: #ffffff;
  --ok: #0a8a4a;
  --warn: #c23b3b;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10,14,23,.06);
  --shadow-md: 0 10px 30px -12px rgba(10,14,23,.16);
  --shadow-lg: 0 24px 60px -20px rgba(10,14,23,.22);
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.02em; color: var(--fg); }
p { margin: 0 0 1em; color: var(--muted); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }

.grad { color: var(--accent); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1rem;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .eyebrow .dot { animation: pulse-dot 2.4s ease-in-out infinite; }
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

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

/* ---------- preloader ---------- */
.preloader { display: none; }
.js-ready .preloader {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 999;
  background: #fff;
  flex-direction: column; gap: 1.1rem;
  transition: opacity .35s ease, visibility .35s ease;
}
.preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-bar { width: 160px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.preloader-fill { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .25s ease; }
.preloader .brand-logo { font-size: 1.35rem; }

/* ---------- header ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.2rem, 4vw, 3rem);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(10,14,23,.02); }

.brand-logo { display: inline-flex; align-items: baseline; gap: .35rem; font-family: var(--font-mono); }
.brand-mark { color: var(--accent); font-weight: 700; font-size: 1.15em; }
.brand-cursor { display: inline-block; color: var(--fg); }
@media (prefers-reduced-motion: no-preference) { .brand-cursor { animation: blink 1.1s step-end infinite; } }
.brand-word { color: var(--fg); font-weight: 700; letter-spacing: -.01em; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a {
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 500; color: var(--muted);
  position: relative; padding-bottom: 4px;
  transition: color .2s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--accent);
  transition: right .25s ease;
}
@media (hover: hover) {
  .nav-links a:hover { color: var(--fg); }
  .nav-links a:hover::after { right: 0; }
}
.nav-links a.active { color: var(--fg); }
.nav-links a.active::after { right: 0; }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .76rem; font-weight: 500;
  color: var(--muted-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .4rem .8rem;
  transition: border-color .2s ease;
}
@media (hover: hover) {
  .lang-toggle:hover { border-color: var(--accent-line); }
}
.lang-toggle .lang-sep { color: var(--muted-2); opacity: .6; }
.lang-toggle .is-active { color: var(--accent); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600; font-size: .92rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--fg); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--accent-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .btn-ghost:hover { border-color: var(--fg); }
}
.btn-lg { padding: 1rem 1.9rem; font-size: .98rem; }
.btn-block { width: 100%; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; border: none; background: none; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--fg); margin: 0 auto; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 7vh, 5rem) clamp(1.2rem, 4vw, 3rem) 6.5rem;
}
.hero-video-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .06;
}
.hero-video-fade { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(255,255,255,.75) 45%, var(--bg) 100%); }

/* subtle "aurora" background: three soft blue blobs drifting slowly behind
   the hero copy, replacing the old particle canvas removed in Fase 12 —
   blurred + low-opacity + single accent color so it reads as ambient
   texture, not decoration competing with the fintech-serious message */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg-blob {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  opacity: .12;
  filter: blur(70px);
}
.hero-bg-blob.b1 { width: 420px; height: 420px; top: -12%; left: -8%; }
.hero-bg-blob.b2 { width: 380px; height: 380px; top: 20%; right: -10%; opacity: .09; }
.hero-bg-blob.b3 { width: 320px; height: 320px; bottom: -18%; left: 30%; opacity: .08; }
@media (prefers-reduced-motion: no-preference) {
  .hero-bg-blob.b1 { animation: heroFloat1 22s ease-in-out infinite alternate; }
  .hero-bg-blob.b2 { animation: heroFloat2 26s ease-in-out infinite alternate; }
  .hero-bg-blob.b3 { animation: heroFloat3 19s ease-in-out infinite alternate; }
}
@keyframes heroFloat1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 8%) scale(1.12); } }
@keyframes heroFloat2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8%, 10%) scale(0.9); } }
@keyframes heroFloat3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(5%, -6%) scale(1.08); } }

.hero-inner {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto; width: 100%;
  text-align: center;
}

.hero-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--fg); }
.hero-sub { font-size: .98rem; max-width: 44ch; margin-left: auto; margin-right: auto; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.7rem; justify-content: center; }

/* photo frame, reused across sections — clean real photography, subtle
   brand-blue wash instead of the old heavy duotone treatment */
.photo-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.photo-frame img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
@media (hover: hover) {
  .photo-frame:hover img { transform: scale(1.06); }
}
.photo-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(195deg, rgba(0,87,255,.14), rgba(10,14,23,.06) 55%, rgba(10,14,23,.22));
}

/* ---------- page header (banner at the top of every inner page) ---------- */
.page-header {
  max-width: 720px; margin: 0 auto; text-align: center;
  padding: 5.5rem clamp(1.2rem, 4vw, 3rem) 1rem;
}
.page-header .eyebrow { justify-content: center; }
.page-header h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); color: var(--fg); }
.page-header-sub { font-size: 1.05rem; max-width: 56ch; margin-left: auto; margin-right: auto; }

/* ---------- nosotros ---------- */
.nosotros-intro {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items: center;
  padding: 3.5rem clamp(1.2rem, 4vw, 3rem) 0;
  max-width: 1260px; margin: 0 auto;
}
.nosotros-p { font-size: 1rem; max-width: 58ch; }
.nosotros-photo { aspect-ratio: 3.4/4; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.value h3 { font-size: .96rem; color: var(--fg); margin-bottom: .35rem; }
.value p { font-size: .84rem; margin: 0; }
.value::before {
  content: ""; display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--accent);
  margin-bottom: .7rem;
}

/* ---------- nosotros: subsections (mision/vision, liderazgo, especialidades, alianza) ---------- */
.nosotros-block {
  max-width: 1260px; margin: 0 auto;
  padding: 3rem clamp(1.2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
}
.nosotros-block:last-of-type { padding-bottom: 5.5rem; }
.eyebrow-sub { margin-bottom: 1.2rem; }

/* ---------- generic tabs (nosotros mision/vision, servicios, casos de uso, por que nezxu) ---------- */
.tabs-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.8rem; }
.tab-btn {
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  color: var(--muted); background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: .65rem 1.3rem; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
@media (hover: hover) {
  .tab-btn:hover { color: var(--fg); border-color: var(--accent-line); }
}
.tab-btn.is-active {
  color: #fff; background: var(--accent); border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.tab-panel { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.tab-panel.in { opacity: 1; transform: none; }
.tab-panel[hidden] { display: none; }
.tab-panel p { font-size: 1rem; margin: 0; max-width: 68ch; }

.lead-card {
  display: flex; gap: 1.6rem; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem;
}
.lead-avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: #fff; background: var(--accent);
}
.lead-name { font-size: 1.08rem; color: var(--fg); margin-bottom: .2rem; }
.lead-role { display: block; font-family: var(--font-mono); font-size: .74rem; color: var(--accent); margin-bottom: .7rem; }
.lead-bio { font-size: .92rem; margin: 0; }

.esp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }
.esp {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .esp:hover { box-shadow: var(--shadow-sm); border-color: var(--accent-line); }
}
.esp h3 { font-size: .96rem; color: var(--fg); margin-bottom: .4rem; }
.esp p { font-size: .84rem; margin: 0; }

.alianza-card {
  border: 1px solid var(--accent-line); border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
  padding: 1.8rem 2rem;
}
.alianza-card h3 { font-size: 1.05rem; color: var(--fg); margin-bottom: .5rem; }
.alianza-card p { font-size: .92rem; margin: 0; max-width: 72ch; }

@media (max-width: 720px) {
  .lead-card { flex-direction: column; }
}

/* ---------- filosofia (framing block between the hero and servicios) ---------- */
.filosofia {
  max-width: 760px; margin: 0 auto;
  padding: 6rem clamp(1.2rem, 4vw, 3rem) 1rem;
  text-align: center;
}
.filosofia h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); color: var(--fg); }
.filosofia-p { font-size: 1rem; }

/* ---------- confianza y cumplimiento (trust/compliance section) ---------- */
.confianza-wrap { padding: 5rem clamp(1.2rem, 4vw, 3rem) 6rem; max-width: 1260px; margin: 0 auto; background: var(--bg-alt); border-radius: 28px; }
.confianza-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.confianza-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.4rem;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
/* gated to real pointer devices — without this, touch screens "stick" the
   hover state (lifted + shadow) after a tap, since there's no mouseleave
   event to clear it, and it only resets on the next unrelated tap */
@media (hover: hover) {
  .confianza-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent-line); transform: translateY(-2px); }
}
.confianza-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.confianza-icon svg { width: 22px; height: 22px; }
.confianza-card h3 { font-size: .98rem; color: var(--fg); margin-bottom: .4rem; }
.confianza-card p { font-size: .86rem; margin: 0 0 .8rem; }
.confianza-card .confianza-link { font-size: .82rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .3rem; }
@media (hover: hover) {
  .confianza-card .confianza-link:hover { text-decoration: underline; }
}

/* ---------- servicios: tabbed selector ---------- */
.servicios-wrap { padding: 5rem clamp(1.2rem, 4vw, 3rem) 6.5rem; max-width: 1260px; margin: 0 auto; }
/* on soluciones.php this sits right under the shared .page-header banner
   (1rem bottom padding already), so it needs a much smaller top gap than
   when the same section follows the home page's filosofia block */
.servicios-wrap-standalone { padding-top: 1.5rem; }
.tabs-split .tabs-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; }
.tabs-split .tab-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  text-align: left; padding: 1rem 1.15rem; border-radius: var(--radius);
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .tabs-split .tab-btn:hover { transform: translateY(-2px); }
}
.tabs-split .tab-btn.is-active { box-shadow: var(--shadow-md); }
.tab-icon {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .2rem;
  transition: background .2s ease, color .2s ease;
}
.tab-icon svg { width: 16px; height: 16px; }
.tabs-split .tab-btn.is-active .tab-icon { background: rgba(255,255,255,.18); color: #fff; }
.tab-tag {
  font-family: var(--font-mono); font-size: .66rem; color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em;
}
.tabs-split .tab-btn.is-active .tab-tag { color: #fff; opacity: .85; }
.tab-title { font-size: .92rem; font-weight: 600; }

.service-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.6rem; align-items: center; }
.service-panel-photo { aspect-ratio: 4/3.1; }
.service-panel-heading { display: flex; align-items: center; gap: .8rem; }
.service-icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.service-icon svg { width: 22px; height: 22px; }
.service-panel-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--fg); margin: 0; }
.service-panel-body p { font-size: 1rem; }
.service-points { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.2rem; }
.service-points li {
  display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; color: var(--fg);
  transition: opacity .4s ease, transform .4s ease;
}
.service-points .check {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; margin-top: .05rem;
}
/* re-entrance cascade: bullets + code sample stagger in each time a
   solution tab becomes active (skipped on the very first paint, since
   the initial panel already renders with .in present server-side) */
.tab-panel:not(.in) .service-points li { opacity: 0; transform: translateX(-10px); }
.tab-panel.in .service-points li:nth-child(1) { transition-delay: .08s; }
.tab-panel.in .service-points li:nth-child(2) { transition-delay: .16s; }
.tab-panel.in .service-points li:nth-child(3) { transition-delay: .24s; }
.tab-panel:not(.in) .code-card { opacity: 0; transform: translateY(16px); }
.tab-panel.in .code-card { transition: opacity .45s ease .3s, transform .45s ease .3s; }

/* ---------- tabs-progress: "0X / 0Y" index + fill bar shown under a tabs
   nav with many entries (soluciones, casos de uso) — updated on tabchange
   by main.js, purely a "where am I in the catalog" cue, opt-in per markup
   (only present where the HTML includes it) ---------- */
.tabs-progress-row { display: flex; align-items: center; gap: .9rem; margin: -.4rem 0 1.8rem; }
.tabs-progress { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tabs-progress-fill { display: block; height: 100%; background: var(--accent); transition: width .35s ease; }
.tabs-progress-label { font-family: var(--font-mono); font-size: .72rem; color: var(--muted-2); white-space: nowrap; }

/* ---------- code-card: static, professional code sample (NOT animated —
   the old typing terminal was removed in Fase 12; this is a deliberate,
   restrained demonstration of technical capability for 3 solutions) ---------- */
.code-card {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-top: 1.4rem;
}
.code-card-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .9rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.code-dot { width: 9px; height: 9px; border-radius: 50%; background: #3a3a42; }
.code-card-title { margin-left: .4rem; font-family: var(--font-mono); font-size: .7rem; color: #8a909c; }
.code-card pre {
  margin: 0; padding: 1.1rem 1.2rem;
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.7;
  overflow-x: auto; color: #c9d1d9; white-space: pre;
}
.tok-kw { color: #ff7b72; }
.tok-fn { color: #d2a8ff; }
.tok-str { color: #a5d6ff; }
.tok-prop { color: #79c0ff; }
.tok-com { color: #8b949e; font-style: italic; }

/* ---------- casos de uso: industry tab switcher, portfolio-style ---------- */
.casos-wrap { padding: 5rem clamp(1.2rem, 4vw, 3rem) 6.5rem; max-width: 1180px; margin: 0 auto; }
.tabs-nav-pills { justify-content: center; }
.caso-panel {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.2rem; align-items: center;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem 2rem;
}
.caso-panel-photo { aspect-ratio: 4/3.2; }
.caso-panel-body h3 { font-size: 1.15rem; color: var(--fg); margin-bottom: 1.4rem; }
.caso-block { margin-bottom: 1.2rem; }
.caso-block:last-child { margin-bottom: 0; }
.caso-label {
  display: block; font-family: var(--font-mono); font-size: .7rem;
  color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .35rem;
}
.caso-block-sol .caso-label { color: var(--accent); }
.caso-block p { font-size: .98rem; margin: 0; }

@media (max-width: 900px) {
  .service-panel, .caso-panel { grid-template-columns: 1fr; }
  .service-panel-photo, .caso-panel-photo { order: -1; }
}
@media (max-width: 640px) {
  .caso-panel { padding: 1.6rem 1.7rem; }
}

/* ---------- ticker ---------- */
.ticker {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; white-space: nowrap;
  background: var(--bg-alt);
  padding: 1rem 0;
}
.ticker-track { display: inline-flex; gap: 1.4rem; }
@media (prefers-reduced-motion: no-preference) { .ticker-track { animation: marquee 30s linear infinite; } }
.ticker-track span {
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .03em; color: var(--muted);
}
.ticker-track span.dot { color: var(--accent); font-weight: 400; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- reveal ---------- */
.js-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--delay, 0ms); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .brand-cursor, .ticker-track, .eyebrow .dot { animation: none !important; }
}

/* ---------- sections ---------- */
.section-head { max-width: 640px; margin: 0 auto 3rem; }
.section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); color: var(--fg); }
.section-sub { font-size: 1.02rem; }

/* ---------- contacto: availability status pill ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: .8rem; color: var(--accent);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  padding: .5rem 1rem; border-radius: var(--radius-pill); margin-bottom: 1.6rem;
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
@media (prefers-reduced-motion: no-preference) { .pulse-dot { animation: pulse-dot 2.4s ease-in-out infinite; } }

.proceso { padding: 5rem clamp(1.2rem, 4vw, 3rem) 6.5rem; max-width: 1260px; margin: 0 auto; }

/* ---------- por que nezxu: antes/despues comparison tabs + stats ---------- */
.porque-wrap { padding: 5rem clamp(1.2rem, 4vw, 3rem) 6.5rem; max-width: 1260px; margin: 0 auto; }
.porque-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
  margin-bottom: 4rem;
}
.tabs-compare .tabs-nav { max-width: 420px; }
.tabs-compare .tab-btn { flex: 1; text-align: center; }
.showcase-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .6rem 0; color: var(--fg); font-size: 1rem; font-family: var(--font-body);
}
.showcase-list .check {
  color: var(--accent); font-weight: 700;
  border-radius: 50%;
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem;
  background: var(--accent-soft);
  margin-top: .1rem;
}
.showcase-list-bad .check.cross { color: var(--warn); background: rgba(194,59,59,.1); }
.showcase-photo { aspect-ratio: 4/3.3; }

/* ---------- stats ---------- */
.stats-wrap { max-width: 1100px; margin: 0 auto; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; padding: 2.6rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { text-align: center; }
.stat-num, .stat-suffix { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--fg); }
.stat-suffix { color: var(--accent); }
.stat-label { display: block; margin-top: .3rem; color: var(--muted); font-size: .9rem; }

/* ---------- timeline ---------- */
.timeline { position: relative; max-width: 780px; margin: 0 auto; border-left: 1px solid var(--line); }
.timeline-progress {
  position: absolute; left: -1px; top: 0; width: 1px; height: 0;
  background: var(--accent);
  transition: height .1s linear;
}
.tl-item { position: relative; padding: 0 0 2.5rem 2.1rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-num {
  position: absolute; left: -1px; top: 0; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: #fff;
  background: var(--accent);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.tl-item h3 { font-size: 1.08rem; color: var(--fg); }
.tl-item p { font-size: .92rem; max-width: 54ch; margin: 0; }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  margin: 6.5rem clamp(1.2rem, 4vw, 3rem);
  padding: 5rem 2rem;
  border-radius: 28px;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--bg-inverse);
  overflow: hidden;
}
.cta-banner h2, .cta-banner .grad { color: #fff; }
.cta-banner .btn-primary { background: var(--accent); }
@media (hover: hover) {
  .cta-banner .btn-primary:hover { background: #fff; color: var(--bg-inverse); }
}
.cta-banner .btn { margin-top: 1.2rem; }

/* ---------- contact ---------- */
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 3rem clamp(1.2rem, 4vw, 3rem) 7rem; max-width: 1150px; margin: 0 auto; }
.contact-channels { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.6rem; }
.contact-channel {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .8rem 1.1rem;
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--fg); font-weight: 500; width: fit-content;
  transition: border-color .2s ease, color .2s ease;
}
.contact-channel svg { width: 19px; height: 19px; color: var(--accent); }
@media (hover: hover) {
  .contact-channel:hover { border-color: var(--accent-line); color: var(--accent); }
}

.contact-form { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; }
.form-row { display: flex; flex-direction: column; gap: .4rem; }
.form-row label { font-size: .85rem; color: var(--muted); }
.form-row .optional { font-weight: 400; opacity: .7; }
.form-row input, .form-row textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  color: var(--fg);
  font-family: inherit; font-size: .95rem;
  min-height: 44px;
  resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-check { display: flex; flex-direction: row; align-items: flex-start; gap: .6rem; }
.form-check input { width: 17px; height: 17px; margin-top: .15rem; accent-color: var(--accent); flex: none; }
.form-check label { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.form-check a { color: var(--accent); font-weight: 600; }
@media (hover: hover) {
  .form-check a:hover { text-decoration: underline; }
}

/* ---------- solicitud.php: onboarding/KYC form (extra layout on top of
   .contact-form/.form-row above) ---------- */
.solicitud-wrap { max-width: 760px; margin: 0 auto; padding: 1rem clamp(1.2rem, 4vw, 3rem) 6.5rem; }
/* same [hidden] vs. own-display bug as Fase 10's .tab-panel — .field-natural/
   .field-juridica carry .form-grid-2's display:grid at equal specificity, so
   [hidden] needs an explicit override here to actually win. */
.field-natural[hidden], .field-juridica[hidden] { display: none; }
.form-section-title {
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2);
  margin: .6rem 0 -.2rem;
  padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
}
.solicitud-form > .form-section-title:first-child { padding-top: 0; border-top: none; margin-top: 0; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.radio-row { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.radio-option { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--fg); font-weight: 500; }
.radio-option input { width: 17px; height: 17px; accent-color: var(--accent); }
@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

.btn-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; display: none; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.contact-form.loading .btn-spinner { display: inline-block; }
.contact-form.loading .btn-label { opacity: .7; }

.form-feedback { font-size: .88rem; min-height: 1.2em; margin: 0; }
.form-feedback.ok { color: var(--ok); }
.form-feedback.err { color: var(--warn); }

/* ---------- legal pages (terminos, privacidad, cumplimiento) ---------- */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 1rem clamp(1.2rem, 4vw, 3rem) 6.5rem; }
.legal-updated { font-size: .84rem; color: var(--muted-2); margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.legal-section { margin-bottom: 2.4rem; }
.legal-section h2 { font-size: 1.18rem; color: var(--fg); display: flex; align-items: baseline; gap: .6rem; }
.legal-section h2 .legal-num { font-family: var(--font-mono); font-size: .82rem; color: var(--accent); font-weight: 600; }
.legal-section p { font-size: .96rem; }
.legal-section ul { margin: 0 0 1em; padding-left: 0; }
.legal-section li { position: relative; padding-left: 1.3rem; font-size: .96rem; color: var(--muted); margin-bottom: .5rem; }
.legal-section li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-line); }

.legal-pdf-link { margin-top: 2.5rem; text-align: right; }
.legal-pdf-link a { font-size: .72rem; color: var(--muted-2); opacity: .55; text-decoration: none; transition: opacity .2s; }
.legal-pdf-link a:hover { opacity: 1; color: var(--accent); text-decoration: underline; }
.legal-box { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.7rem; margin-bottom: 2.4rem; }
.legal-box p:last-child { margin-bottom: 0; }
.legal-toc { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-bottom: 3rem; padding: 1.2rem 1.4rem; background: var(--bg-alt); border-radius: var(--radius); }
.legal-toc a { font-size: .84rem; color: var(--muted); font-weight: 500; }
@media (hover: hover) {
  .legal-toc a:hover { color: var(--accent); }
}

/* ---------- onboarding block (cumplimiento.php, "como empezar") ---------- */
.onboard-wrap { background: var(--bg-alt); border-radius: 24px; padding: 3rem clamp(1.4rem, 4vw, 3rem); margin: 3rem 0 4rem; }
.onboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; margin-bottom: 2.2rem; }
.onboard-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.onboard-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  margin-bottom: .8rem;
}
.onboard-step h3 { font-size: .92rem; color: var(--fg); margin-bottom: .35rem; }
.onboard-step p { font-size: .82rem; margin: 0; }
.onboard-cta { text-align: center; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-alt); }
.footer-inner {
  max-width: 1260px; margin: 0 auto;
  padding: 4rem clamp(1.2rem, 4vw, 3rem) 2.4rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem;
}
.footer-brand p { font-size: .88rem; max-width: 32ch; margin: 1rem 0 0; }
.footer-col h4 { font-family: var(--font-display); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); margin: 0 0 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .7rem; }
.footer-col a, .footer-col span { font-size: .9rem; color: var(--muted); }
@media (hover: hover) {
  .footer-col a:hover { color: var(--accent); }
}
.footer-bottom {
  max-width: 1260px; margin: 0 auto;
  padding: 1.6rem clamp(1.2rem, 4vw, 3rem) 2.2rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem;
  font-size: .8rem; color: var(--muted-2);
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .porque-compare { grid-template-columns: 1fr; text-align: left; }
  .showcase-photo { order: -1; }
  .nosotros-intro { grid-template-columns: 1fr; text-align: left; }
  .nosotros-photo { order: -1; max-width: 420px; aspect-ratio: 16/10; }
  .contacto { grid-template-columns: 1fr; }
  .contact-info { text-align: center; }
  .contact-channels { align-items: center; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .nav-links, .btn-nav { display: none; }
  .nav-toggle { display: flex; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    padding: 1.5rem clamp(1.2rem, 4vw, 3rem) 2rem;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .nav.open .btn-nav { display: inline-flex; margin: 0 clamp(1.2rem, 4vw, 3rem) 1.2rem; }
  .nav.open { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .values-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .confianza-wrap { padding: 3.5rem 1.2rem 4rem; border-radius: 20px; }
}