/* ══════════════════════════════════════════════════════════
   NEXO Labs — Versión fusionada 2026
   Diseño original (hero, números, servicios, proceso, porqué,
   CTA) + paleta, preloader, nav, marquee, ticker y footer de
   la versión recreada.
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-dark:  #1B4F8A;
  --blue-mid:   #2A7FC1;
  --teal:       #1A9E8F;
  --white:      #F2F5FA;
  --ink:        #060A14;
  --bg:         #0A0F1E;
  --bg-raise:   #0E1526;
  --line:       rgba(148, 178, 216, 0.13);
  --gray:       #8B96AB;
  --gray-soft:  #A9B4C8;
  --grad:       linear-gradient(135deg, #2A7FC1, #1A9E8F);
  --grad-text:  linear-gradient(92deg, #4FA3E3 0%, #2A7FC1 40%, #23C4B0 100%);
  --font-d:     'Syne', sans-serif;
  --font-b:     'DM Sans', sans-serif;
  --pad-x:      clamp(24px, 6vw, 88px);
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  /* Alineación logo hero ↔ wordmark del nav (original) */
  --nav-pad-y:  22px;
  --nav-wordmark-w: 168px;
  /* Duración base del ciclo del logo del hero (original) */
  --nexo-hero-logo-dur: calc(8s * 2 / 3);
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(42, 127, 193, 0.55); color: #fff; }

img { max-width: 100%; height: auto; display: block; }

/* ── Grano fino global ── */
#grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 9s steps(8) infinite;
}
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 3%); }
  50% { transform: translate(3%, -2%); }
  75% { transform: translate(-3%, -3%); }
}

/* ── Barra de progreso de scroll ── */
#scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  background: var(--grad);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1600;
}

/* ── Cursor custom (solo puntero fino, y solo cuando ya sigue al mouse) ── */
#cursor, #cursor-ring { display: none; }
a, button { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button { cursor: none; }
  body.has-custom-cursor input,
  body.has-custom-cursor textarea { cursor: text; }
  body.has-custom-cursor select { cursor: pointer; }
  body.has-custom-cursor #cursor {
    display: block;
    width: 8px; height: 8px;
    background: var(--teal);
    border-radius: 50%;
    position: fixed; top: 0; left: 0;
    pointer-events: none; z-index: 2100;
    transform: translate(-50%, -50%);
    transition: width .25s, height .25s, background .25s;
    mix-blend-mode: screen;
  }
  body.has-custom-cursor #cursor-ring {
    display: block;
    width: 34px; height: 34px;
    border: 1.5px solid rgba(26, 158, 143, 0.5);
    border-radius: 50%;
    position: fixed; top: 0; left: 0;
    pointer-events: none; z-index: 2090;
    transform: translate(-50%, -50%);
    transition: width .3s, height .3s, border-color .3s, opacity .3s;
  }
  body.has-custom-cursor.cursor-hover #cursor { width: 42px; height: 42px; background: rgba(42,127,193,.28); }
  body.has-custom-cursor.cursor-hover #cursor-ring { opacity: 0; }
}

/* ══ PRELOADER (recreada) ══ */
#preloader {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.preloader-logo { width: clamp(90px, 14vw, 150px); }
.pre-diamond, .pre-spoke {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: preDraw 1.1s var(--ease-out) forwards;
}
.pre-spoke { animation-delay: .35s; }
.pre-node, .pre-center {
  opacity: 0; transform-origin: center;
  scale: .4;
  animation: preNode .5s var(--ease-out) forwards;
}
.pre-node:nth-of-type(1) { animation-delay: .75s; }
.pre-node:nth-of-type(2) { animation-delay: .85s; }
.pre-node:nth-of-type(3) { animation-delay: .95s; }
.pre-node:nth-of-type(4) { animation-delay: 1.05s; }
.pre-center { animation-delay: 1.15s; }
@keyframes preDraw { to { stroke-dashoffset: 0; } }
@keyframes preNode { to { opacity: 1; scale: 1; } }
.preloader-word {
  font-family: var(--font-d);
  font-weight: 800; font-size: clamp(22px, 3vw, 30px);
  letter-spacing: .16em; display: flex;
}
.preloader-word span {
  opacity: 0; transform: translateY(14px);
  animation: preWord .45s var(--ease-out) forwards;
}
.preloader-word span:nth-child(1) { animation-delay: 1.2s; }
.preloader-word span:nth-child(2) { animation-delay: 1.28s; }
.preloader-word span:nth-child(3) { animation-delay: 1.36s; }
.preloader-word span:nth-child(4) { animation-delay: 1.44s; }
.preloader-word .pre-labs { animation-delay: 1.55s; color: var(--teal); font-weight: 500; }
@keyframes preWord { to { opacity: 1; transform: translateY(0); } }
#preloader.done { pointer-events: none; }
/* Visitas siguientes: sin preloader (ver preload-check.js) */
html.returning #preloader { display: none; }

/* ══ UTILIDADES ══ */
.grad-text {
  background: var(--grad-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradShift 6s ease-in-out infinite alternate;
}
@keyframes gradShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Títulos partidos por palabra (script.js → splitWords) */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sw-i { display: inline-block; transform-origin: 0 100%; will-change: transform; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-overline {
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}
.section-title {
  font-family: var(--font-d); font-weight: 800;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--white);
  margin-bottom: 12px;
}
.section-sub {
  font-size: 17px; line-height: 1.6;
  color: var(--gray-soft);
  margin-bottom: 56px;
  max-width: 600px;
}
.reveal, .reveal-stagger { opacity: 0; transform: translateY(38px); }
html.no-motion .reveal, html.no-motion .reveal-stagger { opacity: 1; transform: none; }

/* ══ NAV (recreada) ══ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--nav-pad-y) var(--pad-x);
  transition: background .45s, padding .45s, box-shadow .45s, backdrop-filter .45s;
}
#nav.scrolled {
  background: rgba(6, 10, 20, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  padding: 13px var(--pad-x);
  box-shadow: 0 1px 0 var(--line);
}
.nav-logo { display: flex; align-items: center; gap: 0; text-decoration: none; transition: gap .4s var(--ease-out); }
#nav.nav-show-logo .nav-logo { gap: 11px; }
.nav-logo-mark {
  width: 34px; height: 34px;
  filter: drop-shadow(0 4px 14px rgba(26,158,143,.35));
  opacity: 0; transform: scale(.8);
  max-width: 0; overflow: hidden; pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), max-width .4s var(--ease-out);
}
#nav.nav-show-logo .nav-logo-mark {
  opacity: 1; transform: scale(1);
  max-width: 34px; pointer-events: auto;
}
.nav-logo-text {
  font-family: var(--font-d); font-weight: 800; font-size: 19px;
  color: var(--white); letter-spacing: -0.01em;
}
.nav-logo-text span { color: var(--teal); font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.nav-links a {
  color: var(--gray-soft); text-decoration: none;
  font-size: 15px; font-weight: 500;
  position: relative; padding: 4px 0;
  transition: color .3s;
}
.nav-links a:not(.btn-nav)::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--ease-out);
}
.nav-links a:not(.btn-nav):hover { color: var(--white); }
.nav-links a:not(.btn-nav):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.btn-nav {
  border: 1px solid rgba(42,127,193,.5);
  border-radius: 100px;
  padding: 9px 22px !important;
  color: var(--white) !important;
  overflow: hidden; position: relative;
  transition: border-color .3s, box-shadow .3s;
}
.btn-nav::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad);
  opacity: 0; transition: opacity .35s;
}
.btn-nav span { position: relative; z-index: 1; }
.btn-nav:hover { border-color: transparent; box-shadow: 0 8px 30px rgba(26,158,143,.35); }
.btn-nav:hover::before { opacity: 1; }

.nav-hamburger {
  display: none;
  background: none; border: 0;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  z-index: 1600;
}
.ham-bar {
  width: 26px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .3s;
}

/* ══ HERO (diseño original) ══ */
#hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  background: var(--bg);
  padding: 120px 24px 80px;
}
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.5;
}

/* Logo animado del hero: bajo el wordmark del nav (original).
   opacity:0 por defecto — se revela por JS recién el preloader se va,
   para que el barrido de salida del preloader nunca lo deje "a la vista"
   (se confundía con una repetición de esa misma intro). No se toca
   `transform` aquí (solo opacity) para no pisar el translateX(-50%). */
.hero-logo-wrap {
  position: absolute; z-index: 3;
  left: calc(var(--pad-x) + var(--nav-wordmark-w) / 2);
  top: calc(2 * var(--nav-pad-y) + 22px + 12px);
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  opacity: 0;
}
.hero-logo-wrap svg.nexo-logo-anim { width: 110px; height: 113px; display: block; }
#hero .hero-logo-wrap .nexo-hero-node-hole-fill { fill: var(--bg); }
#hero .hero-logo-wrap .nexo-hero-rotates {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
#hero .hero-logo-wrap.nexo-first-run .nexo-hero-rotates {
  animation: nexoHeroRotateLogo var(--nexo-hero-logo-dur) 1 linear forwards;
}
#hero .hero-logo-wrap.nexo-first-run .nexo-hero-node-1 {
  animation: nexoHeroMoveCircle1 var(--nexo-hero-logo-dur) 1 cubic-bezier(0.45, 0.02, 0.55, 0.98) forwards;
}
#hero .hero-logo-wrap.nexo-first-run .nexo-hero-node-2 {
  animation: nexoHeroMoveCircle2 var(--nexo-hero-logo-dur) 1 cubic-bezier(0.45, 0.02, 0.55, 0.98) forwards;
}
#hero .hero-logo-wrap.nexo-first-run .nexo-hero-node-3 {
  animation: nexoHeroMoveCircle3 var(--nexo-hero-logo-dur) 1 cubic-bezier(0.45, 0.02, 0.55, 0.98) forwards;
}
#hero .hero-logo-wrap.nexo-first-run .nexo-hero-node-4 {
  animation: nexoHeroMoveCircle4 var(--nexo-hero-logo-dur) 1 cubic-bezier(0.45, 0.02, 0.55, 0.98) forwards;
}
#hero .hero-logo-wrap.nexo-first-done:not(:hover) .nexo-hero-rotates {
  animation: none;
  transform: rotate(180deg);
}
#hero .hero-logo-wrap.nexo-first-done:not(:hover) .nexo-hero-node-1 { animation: none; transform: translate(250px, 425px); }
#hero .hero-logo-wrap.nexo-first-done:not(:hover) .nexo-hero-node-2 { animation: none; transform: translate(75px, 250px); }
#hero .hero-logo-wrap.nexo-first-done:not(:hover) .nexo-hero-node-3 { animation: none; transform: translate(250px, 75px); }
#hero .hero-logo-wrap.nexo-first-done:not(:hover) .nexo-hero-node-4 { animation: none; transform: translate(425px, 250px); }
#hero .hero-logo-wrap.nexo-first-done:hover .nexo-hero-rotates {
  animation: nexoHeroRotateLogo var(--nexo-hero-logo-dur) infinite linear;
}
#hero .hero-logo-wrap.nexo-first-done:hover .nexo-hero-node-1 {
  animation: nexoHeroMoveCircle1 var(--nexo-hero-logo-dur) infinite cubic-bezier(0.45, 0.02, 0.55, 0.98);
}
#hero .hero-logo-wrap.nexo-first-done:hover .nexo-hero-node-2 {
  animation: nexoHeroMoveCircle2 var(--nexo-hero-logo-dur) infinite cubic-bezier(0.45, 0.02, 0.55, 0.98);
}
#hero .hero-logo-wrap.nexo-first-done:hover .nexo-hero-node-3 {
  animation: nexoHeroMoveCircle3 var(--nexo-hero-logo-dur) infinite cubic-bezier(0.45, 0.02, 0.55, 0.98);
}
#hero .hero-logo-wrap.nexo-first-done:hover .nexo-hero-node-4 {
  animation: nexoHeroMoveCircle4 var(--nexo-hero-logo-dur) infinite cubic-bezier(0.45, 0.02, 0.55, 0.98);
}
@keyframes nexoHeroMoveCircle1 {
  0%  { transform: translate(250px, 75px); }
  11% { transform: translate(425px, 250px); }
  22%, 100% { transform: translate(250px, 425px); }
}
@keyframes nexoHeroMoveCircle2 {
  0%  { transform: translate(425px, 250px); }
  11% { transform: translate(250px, 425px); }
  22%, 100% { transform: translate(75px, 250px); }
}
@keyframes nexoHeroMoveCircle3 {
  0%  { transform: translate(250px, 425px); }
  11% { transform: translate(75px, 250px); }
  22%, 100% { transform: translate(250px, 75px); }
}
@keyframes nexoHeroMoveCircle4 {
  0%  { transform: translate(75px, 250px); }
  11% { transform: translate(250px, 75px); }
  22%, 100% { transform: translate(425px, 250px); }
}
@keyframes nexoHeroRotateLogo {
  0%, 14% { transform: rotate(0deg); }
  34.85% { transform: rotate(480deg); }
  38.375% { transform: rotate(540deg); }
  100% { transform: rotate(540deg); }
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 900px;
  width: 100%;
}
.hero-pill {
  display: inline-block;
  border: 1px solid var(--teal); color: var(--teal);
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: 8px 20px;
  border-radius: 50px; margin-bottom: 32px;
}
.hero-h1 {
  font-family: var(--font-b); font-weight: 700;
  font-size: 38px;
  line-height: 1.2; letter-spacing: normal;
  color: var(--white); margin-bottom: 24px;
}
.hero-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--gray-soft); line-height: 1.65;
  max-width: 580px; margin: 0 auto 26px;
}
.hero-sub em { color: var(--white); font-style: normal; border-bottom: 1px solid rgba(26,158,143,.55); }

/* Ticker "HACEMOS" (recreada, con alturas fijas para que nunca se corte) */
.hero-ticker {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-b);
  color: var(--gray);
  margin-bottom: 40px;
}
.ticker-static { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; line-height: 26px; }
.ticker-mask {
  display: inline-block; overflow: hidden;
  height: 26px;
}
.ticker-words {
  display: flex; flex-direction: column;
  animation: tickerRoll 10s var(--ease-out) infinite;
}
.ticker-words span {
  display: block;
  height: 26px; line-height: 26px;
  color: var(--white); font-weight: 500; font-size: 15px;
  white-space: nowrap;
  text-align: left;
}
@keyframes tickerRoll {
  0%, 20%   { transform: translateY(0); }
  25%, 45%  { transform: translateY(-26px); }
  50%, 70%  { transform: translateY(-52px); }
  75%, 95%  { transform: translateY(-78px); }
  100%      { transform: translateY(-104px); }
}

/* Botones (recreada) */
.hero-ctas { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.btn-primary-lg, .btn-ghost-lg {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-b); font-weight: 600; font-size: 15.5px;
  padding: 16px 32px; border-radius: 100px;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .3s;
  will-change: transform;
}
.btn-primary-lg {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 10px 34px rgba(26,158,143,.3);
}
.btn-primary-lg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, #3B93D8, #22BBA8);
  opacity: 0; transition: opacity .35s;
}
.btn-primary-lg > * { position: relative; z-index: 1; }
.btn-primary-lg svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
.btn-primary-lg:hover { box-shadow: 0 16px 44px rgba(26,158,143,.45); }
.btn-primary-lg:hover::before { opacity: 1; }
.btn-primary-lg:hover svg { transform: translateX(5px); }
.btn-ghost-lg {
  color: var(--white);
  border: 1px solid rgba(148,178,216,.3);
  background: rgba(14,21,38,.4);
  backdrop-filter: blur(6px);
}
.btn-ghost-lg:hover { border-color: rgba(42,127,193,.7); background: rgba(42,127,193,.1); }

/* Scroll indicator (original) */
.scroll-indicator {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 2;
}
.scroll-line {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, rgba(26,158,143,0.8), transparent);
  animation: scrollLineAnim 2s ease-in-out infinite;
}
.scroll-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.3); }
@keyframes scrollLineAnim {
  0%,100% { transform: scaleY(0.7); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ══ MARQUEE (recreada) ══ */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(6,10,20,.5);
  overflow: hidden;
  padding: 18px 0;
  position: relative; z-index: 2;
}
.marquee-track {
  display: flex; align-items: center; gap: 42px;
  width: max-content;
  animation: marqueeMove 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-d); font-weight: 700;
  font-size: 17px; letter-spacing: .04em;
  color: rgba(169,180,200,.75);
  white-space: nowrap;
  transition: color .3s;
}
.marquee-track span:hover { color: var(--white); }
.marquee-track i { color: var(--teal); font-style: normal; font-size: 11px; opacity: .8; }
@keyframes marqueeMove { to { transform: translateX(-50%); } }

/* ══ NUMBERS (diseño original) ══ */
#numeros {
  background: var(--bg);
  padding: 72px 64px;
  text-align: center;
  border-top: 1px solid var(--line);
}
#numeros .section-overline { margin-bottom: 56px; font-family: "DM Sans", sans-serif; font-size: 13px; }
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 960px;
  margin: 0 auto 64px;
  align-items: stretch;
}
.number-item {
  padding: 0 48px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.number-item:last-child { border-right: none; }
.number-value {
  font-family: "DM Sans", sans-serif; font-weight: 800;
  font-size: clamp(48px, 5vw, 64px); line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 16px;
  display: block;
  font-variant-numeric: tabular-nums;
}
.number-label {
  font-size: 15.5px; color: var(--gray-soft); line-height: 1.55;
  max-width: 260px; margin: 0 auto;
}
.numbers-close {
  font-style: italic; color: var(--teal); font-size: 17px;
  max-width: 600px; margin: 0 auto; line-height: 1.65;
}

/* ══ SERVICIOS (diseño original) ══ */
#servicios {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--bg) 100%);
  padding: 72px 64px;
  position: relative;
  overflow: hidden;
  font-family: "DM Sans", sans-serif;
}
#servicios::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(26,158,143,0.15) 0%, transparent 70%);
  pointer-events: none;
}
#servicios .section-inner { position: relative; z-index: 1; }
#servicios .section-overline { font-family: "DM Sans", sans-serif; font-size: 12px; }
#servicios .section-title { font-family: "DM Sans", sans-serif; font-size: 40px; }

/* Halo de color detrás de la tarjeta: se dibuja fuera de su caja (box-shadow
   difuso, no un relleno), así nunca puede tapar el texto de adentro. */

/* Tilt 3D con puntero fino: GSAP maneja el transform, así que se quita
   la transición CSS de transform para que no pelee con quickTo. */

/* ══ PROCESO (diseño original) ══ */
#proceso {
  background: var(--bg);
  padding: 72px 64px;
  font-family: "DM Sans", sans-serif;
}
#proceso .section-overline { padding-top: 0; font-size: 12px; font-family: 'DM Sans', sans-serif; }
#proceso .section-title { font-family: "DM Sans", sans-serif; font-size: 40px; }

/* ══ POR QUÉ (diseño original) ══ */
#porque {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--bg) 100%);
  padding: 120px 64px;
  position: relative;
  overflow: hidden;
}
#porque::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(26,158,143,0.15) 0%, transparent 70%);
}
#porque .section-overline { font-size: 16px; font-family: "DM Sans", sans-serif; }
.porque-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  max-width: 1100px; margin: 0 auto;
  position: relative; z-index: 1;
}
.porque-big {
  font-family: "DM Sans", sans-serif; font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--white);
  display: flex; flex-direction: column;
  gap: 0.28em;
}
.porque-big-line { display: block; }
.porque-reasons { display: flex; flex-direction: column; gap: 36px; }
.reason { display: flex; gap: 20px; align-items: flex-start; }
.reason-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(42,127,193,0.15), rgba(26,158,143,0.15));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.reason-icon svg { width: 22px; height: 22px; }
.reason-text h3 {
  font-family: var(--font-d); font-weight: 700;
  font-size: 16px; color: var(--white); margin-bottom: 6px;
}
.reason-text p { font-size: 14px; color: var(--gray-soft); line-height: 1.6; }

/* ══ CTA (diseño original · botones recreada) ══ */
#cta {
  background: var(--bg);
  padding: 144px 64px;
  text-align: center;
  position: relative;
}
.cta-title {
  font-family: "DM Sans", sans-serif; font-weight: 800;
  font-size: clamp(34px, 4.6vw, 58px);
  letter-spacing: -0.02em; line-height: 1.08;
  color: var(--white);
  margin-bottom: 20px;
  position: relative; z-index: 1;
}
.cta-sub {
  font-size: 18px; color: var(--gray-soft);
  max-width: 560px; margin: 0 auto 48px;
  line-height: 1.6; position: relative; z-index: 1;
}

.cta-form-wrap {
  position: relative; z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

/* ══ Formulario de contacto ══ */
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form .field {
  display: flex; flex-direction: column; gap: 8px;
}
.contact-form .field-label {
  font-size: 13px; font-weight: 500;
  color: var(--gray-soft);
  letter-spacing: .02em;
}
.contact-form .field-optional {
  font-style: normal; font-weight: 400;
  font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray);
  margin-left: 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--white);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.45;
  outline: none;
  transition: border-color .3s, box-shadow .3s;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(139, 150, 171, 0.55); }
.contact-form textarea { min-height: 112px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(42, 127, 193, 0.7);
  box-shadow: 0 0 0 3px rgba(42, 127, 193, 0.15);
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: rgba(232, 93, 117, 0.7);
}
.contact-form .form-error {
  font-size: 14px; line-height: 1.45;
  color: #F07178;
  margin: 0;
}
.contact-form .btn-primary-lg {
  border: 0;
  width: 100%;
  margin-top: 4px;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 600px) {
  .contact-form-row { grid-template-columns: 1fr; }
}

/* Autorización de tratamiento de datos (Ley 1581 de 2012) */
.contact-form .field-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--gray-soft);
  cursor: pointer;
}
.contact-form .field-consent input {
  flex: none; width: 18px; height: 18px; margin: 2px 0 0; padding: 0;
  border-radius: 4px; -webkit-appearance: auto; appearance: auto;
  accent-color: var(--teal); cursor: pointer;
}
.contact-form .field-consent a { color: var(--white); }
.contact-form .field-consent.is-invalid span { color: #F07178; }
/* Campo trampa para bots: fuera de la vista y del lector de pantalla */
.contact-form .field-trap {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.contact-form .form-success {
  font-size: 14px; line-height: 1.45; color: #23C4B0; margin: 0;
}
.contact-form .btn-primary-lg[disabled] { opacity: .6; cursor: progress; }
.footer-copy a { color: var(--gray-soft); }

/* ══ FOOTER (recreada) ══ */
footer {
  border-top: 1px solid var(--line);
  background: var(--ink);
  padding: clamp(56px, 7vw, 84px) var(--pad-x) 30px;
}
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 60px);
  padding-bottom: 52px;
}
.footer-brand-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer-logo-mark { width: 36px; height: 36px; filter: drop-shadow(0 4px 12px rgba(26,158,143,0.25)); }
.footer-logo-text { font-family: var(--font-d); font-weight: 800; font-size: 21px; }
.footer-logo-text span { color: var(--teal); font-weight: 500; }
.footer-tagline { color: var(--gray); font-size: 14.5px; line-height: 1.7; }
.footer-col h4 {
  font-family: var(--font-d); font-weight: 700;
  font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 20px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  color: var(--gray-soft); text-decoration: none; font-size: 14.5px;
  transition: color .3s, padding-left .3s;
}
.footer-col a:hover { color: var(--white); padding-left: 5px; }
.footer-bottom {
  max-width: 1100px; margin: 0 auto;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.footer-copy, .footer-made { color: var(--gray); font-size: 13px; }
.footer-made { font-family: var(--font-b); font-size: 11.5px; letter-spacing: .1em; }

/* ══ RESPONSIVE ══ */
@media (max-width: 980px) {
  #numeros, #servicios, #proceso { padding-left: 32px; padding-right: 32px; }
  #porque { padding: 80px 32px; }
  #cta { padding: 100px 32px; }

  
  
  
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }

  .nav-hamburger { display: flex; }
  .nav-links {
    position: fixed; inset: 0; z-index: 1550;
    height: 100vh; height: 100dvh;
    background: rgba(6,10,20,.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 34px;
    overscroll-behavior: contain;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  /* Los enlaces entran escalonados una vez que el fondo ya cubre la página */
  .nav-links a {
    font-size: 24px; font-family: var(--font-d); font-weight: 700;
    opacity: 0; transform: translateY(14px);
    transition: opacity .3s ease, transform .4s var(--ease-out);
  }
  #nav.nav-open .nav-links {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .35s ease, visibility 0s;
  }
  #nav.nav-open .nav-links a { opacity: 1; transform: none; }
  #nav.nav-open .nav-links a:nth-child(1) { transition-delay: .12s; }
  #nav.nav-open .nav-links a:nth-child(2) { transition-delay: .18s; }
  #nav.nav-open .nav-links a:nth-child(3) { transition-delay: .24s; }
  /* El desenfoque de la barra "scrolled" encerraba al menú (position: fixed)
     dentro de los 70 px de la barra: con el menú abierto se desactiva. */
  #nav.nav-open {
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  /* Logo y botón quedan por encima del menú abierto */
  .nav-logo, .nav-hamburger { position: relative; z-index: 1600; }
  #nav.nav-open .ham-bar:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  #nav.nav-open .ham-bar:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
}

@media (max-width: 767px) {
  /* Hero: logo centrado arriba, contenido debajo (original mobile) */
  .hero-logo-wrap {
    left: 50%;
    top: 104px;
    transform: translateX(-50%);
  }
  .hero-logo-wrap svg.nexo-logo-anim { width: 124px; height: 128px; }
  #hero {
    align-items: flex-start;
    padding-top: clamp(240px, 34vh, 300px);
    min-height: 100svh;
  }
  .hero-pill { font-size: 10.5px; padding: 7px 16px; margin-bottom: 24px; }
  .hero-sub { font-size: 15.5px; margin-bottom: 22px; }
  .hero-ctas { flex-direction: column; align-items: stretch; max-width: 360px; margin: 0 auto; }
  .btn-primary-lg, .btn-ghost-lg { justify-content: center; }
  .scroll-indicator { display: none; }

  /* Números */
  #numeros { padding: 52px 20px; }
  #numeros .section-overline { margin-bottom: 36px; }
  .numbers-grid { grid-template-columns: 1fr; margin-bottom: 44px; }
  .number-item {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 32px;
  }
  .number-item:nth-child(n+2) { padding-top: 32px; }
  .number-item:last-child { border-bottom: none; padding-bottom: 0; }
  .numbers-close { font-size: 15px; }

  /* Servicios */
  #servicios { padding: 52px 20px; }
  #servicios .section-title { font-size: 28px; }
  #servicios .section-sub { font-size: 15px; margin-bottom: 32px; }
  

  /* Proceso: diorama izquierda + texto derecha (original mobile) */
  #proceso { padding: 52px 20px; }
  #proceso .section-title { font-size: 28px; }
  #proceso .section-sub { font-size: 15px; margin-bottom: 32px; }
  
  
  
  
  
  
  
  
  

  /* Por qué */
  #porque { padding: 52px 20px 60px; }
  .porque-inner { grid-template-columns: 1fr; gap: 40px; }
  .porque-big { font-size: clamp(32px, 10vw, 52px); }

  /* CTA */
  #cta { padding: 80px 20px; }
  #cta .cta-sub { font-size: 16px; margin-bottom: 32px; }
  
  .contact-form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; }

  /* Grano estático (rendimiento) */
  #grain { animation: none; inset: 0; width: 100%; height: 100%; }
}

/* ══ REDUCED MOTION ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger, .anim-hero { opacity: 1 !important; transform: none !important; }
  .hero-logo-wrap { opacity: 1 !important; }
  #preloader { display: none; }
  .ticker-words { animation: none; }
  .grad-text { animation: none; }
  #grain { animation: none; }
  
  #cursor, #cursor-ring { display: none !important; }
  #hero .hero-logo-wrap .nexo-hero-rotates { animation: none !important; transform: rotate(0deg) !important; }
  #hero .hero-logo-wrap .nexo-hero-node-1 { animation: none !important; transform: translate(250px, 75px) !important; }
  #hero .hero-logo-wrap .nexo-hero-node-2 { animation: none !important; transform: translate(425px, 250px) !important; }
  #hero .hero-logo-wrap .nexo-hero-node-3 { animation: none !important; transform: translate(250px, 425px) !important; }
  #hero .hero-logo-wrap .nexo-hero-node-4 { animation: none !important; transform: translate(75px, 250px) !important; }
}

/* ══ CIFRAS: fuente ══ */
.number-source {
  margin-top: 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray); opacity: .75;
}

/* ══ NOSOTROS (identidad corporativa) ══ */
#nosotros {
  background: var(--bg);
  padding: 72px 64px;
  border-top: 1px solid var(--line);
}
#nosotros .section-overline { font-size: 12px; font-family: 'DM Sans', sans-serif; }
#nosotros .section-title { font-family: "DM Sans", sans-serif; font-size: 40px; }
.mv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 28px;
}
.mv-card {
  padding: 28px 26px; border-radius: 14px;
  background: var(--bg-raise); border: 1px solid var(--line);
  transition: border-color .35s ease;
}
.mv-card:hover { border-color: rgba(26,158,143,.45); }
.mv-kicker {
  display: block; margin-bottom: 10px;
  font-family: var(--font-d); font-weight: 700; font-size: 18px; color: var(--white);
}
.mv-card p { font-size: 15px; line-height: 1.65; color: var(--gray-soft); }
.values-row {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.values-row li {
  font-size: 13px; font-weight: 500; color: var(--white);
  padding: 8px 16px; border-radius: 50px;
  border: 1px solid rgba(26,158,143,.45);
}

@media (max-width: 767px) {
  #nosotros { padding: 52px 20px; }
  #nosotros .section-title { font-size: 28px; }
  #nosotros .section-sub { font-size: 15px; margin-bottom: 32px; }
  .mv-grid { grid-template-columns: 1fr; }
}

/* ══ FORMULARIO: select y nota ══ */
.contact-form select {
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B96AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
.contact-form select option { background: var(--bg-raise); color: var(--white); }
.contact-form .form-note {
  font-size: 13px; line-height: 1.5; color: var(--gray); text-align: center; margin: 10px 0 0;
}
.contact-form .form-note a { color: var(--gray-soft); }

/* ══ PROCESO: 3 etapas con título ══ */

/* Separación entre "Quiénes somos" y el CTA (ambas sobre fondo oscuro) */
#cta { border-top: 1px solid var(--line); }

/* ══ ESCRITORIO: ajustes de jerarquía y composición ══ */
@media (min-width: 768px) {
  /* El H1 del hero escala con la pantalla y nunca queda más chico que los títulos de sección */
  .hero-h1 { font-size: clamp(40px, 3.6vw, 60px); line-height: 1.12; }
  .hero-sub { max-width: 620px; }
}
@media (min-width: 981px) {
  /* Quiénes somos: intro a la izquierda, misión y visión a la derecha */
  .about-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 64px; align-items: center;
    margin-bottom: 36px;
  }
  .about-head .section-sub { margin-bottom: 0; }
  .about-layout .mv-grid { grid-template-columns: 1fr; margin-bottom: 0; }
  #nosotros { padding: 96px 64px; }
  #cta { padding-bottom: 112px; }
}
/* El fragmento subrayado del hero no se parte entre líneas */
.hero-sub em { white-space: nowrap; }

/* Servicios: nombre interno bajo el nombre comercial */

/* Servicios: contraste del texto sobre tarjetas blancas (≥ 4.5:1) */

/* Datos que hablan: título centrado (pregunta de la presentación comercial) */
#numeros .section-overline { margin-bottom: 14px; }
#numeros .section-title {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  max-width: 760px; margin: 0 auto 56px;
}
@media (max-width: 767px) {
  #numeros .section-title { font-size: 26px; margin-bottom: 36px; }
}

/* ══ DEL PROBLEMA AL PRODUCTO: recorrido de 6 soluciones con dioramas ══
   Los dioramas traen fondo negro: el marco usa el mismo fondo de la
   sección y mix-blend-mode: lighten funde el negro, sin bordes visibles. */
.journey-grid {
  --jgap: 28px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--jgap); row-gap: 48px;
}
.journey-item { text-align: center; }
.journey-art {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg);
  margin-bottom: 18px;
  transition: transform .45s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.journey-art img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten; }
.journey-item:hover .journey-art { transform: scale(1.06) translateY(-6px); }
/* Línea conectora entre dioramas de la misma fila */
.journey-item:not(:nth-child(3n)) .journey-art::after {
  content: ''; position: absolute; top: 58%; left: 100%;
  width: var(--jgap); height: 2px;
  background: linear-gradient(90deg, var(--blue-mid), var(--teal));
  transform-origin: left center;
  transition: transform .8s var(--ease-out);
}
.journey-grid.will-animate .journey-art::after { transform: scaleX(0); }
.journey-grid.will-animate.is-on .journey-art::after { transform: scaleX(1); }
.journey-title {
  font-family: var(--font-d); font-weight: 700; font-size: 17px;
  color: var(--white); margin-bottom: 8px;
}
.journey-title span { color: var(--teal); font-size: 13px; letter-spacing: .1em; margin-right: 6px; }
.journey-desc { font-size: 14px; line-height: 1.6; color: var(--gray-soft); max-width: 300px; margin: 0 auto; }

@media (max-width: 767px) {
  .journey-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .journey-item {
    display: grid; grid-template-columns: 150px 1fr;
    column-gap: 16px; row-gap: 4px; align-items: center; text-align: left;
  }
  .journey-art { grid-row: 1 / 3; margin-bottom: 0; }
  .journey-title { align-self: end; margin: 0; font-size: 16px; }
  .journey-title span { display: block; margin-bottom: 2px; }
  .journey-desc { align-self: start; margin: 0; }
  .journey-item .journey-art::after { display: none; }
  .journey-item:hover .journey-art { transform: none; }
}

/* ══ SOLUCIONES UNIFICADAS (#servicios = "Del problema al producto") ══
   Prioriza el diseño del recorrido: fondo oscuro de la sección (los
   dioramas se funden con él), sin el degradado azul ni el halo anterior. */
#servicios {
  background: var(--bg);
  border-top: 1px solid var(--line);
}
#servicios::before { display: none; }
.journey-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 10px;
}
@media (max-width: 767px) {
  .journey-art { grid-row: 1 / span 4; align-self: start; }
  .journey-kicker { margin: 0; }
}
/* Sin capa aislada: así el negro de los dioramas se funde con el fondo
   de la sección también cuando flotan por encima de su marco. */
#servicios .section-inner { z-index: auto; }

/* Hover de los dioramas: el marco siempre forma su propio grupo de mezcla
   y su fondo se extiende más allá del borde. Así, cuando el diorama flota
   o se agranda, el negro de la imagen nunca queda sin fondo con el que
   fundirse (era la línea negra que aparecía arriba). */
.journey-art { isolation: isolate; }
.journey-art::before {
  content: ''; position: absolute; inset: -24px; z-index: -1;
  background: var(--bg);
  pointer-events: none;
}

/* ══ QUIÉNES SOMOS: texto institucional ══ */
#nosotros .about-lead {
  font-size: 17px; line-height: 1.65; color: var(--white);
  margin: 4px 0 14px; max-width: 560px;
}
#nosotros .about-text {
  font-size: 15px; line-height: 1.7; color: var(--gray-soft);
  margin-bottom: 12px; max-width: 560px;
}
.mv-card p + p { margin-top: 12px; }
.philosophy {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.philosophy-label {
  display: block; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal);
}
.philosophy-steps {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.philosophy-steps li {
  font-family: var(--font-d); font-weight: 700; font-size: 16px; color: var(--white);
}
.philosophy-steps span {
  font-family: "DM Sans", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .1em; color: var(--teal); margin-right: 6px;
}
@media (min-width: 981px) {
  /* Con más texto, ambas columnas arrancan arriba en vez de centrarse */
  .about-layout { align-items: start; }
  .about-layout .mv-grid { gap: 20px; }
}
@media (max-width: 767px) {
  #nosotros .about-lead { font-size: 16px; }
  .philosophy-steps { flex-direction: column; gap: 8px; }
  .philosophy-steps li { font-size: 15px; }
}
#nosotros .section-title { margin-bottom: 18px; }
@media (min-width: 768px) {
  .philosophy-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .philosophy-steps li { font-size: 15px; line-height: 1.3; }
  .philosophy-steps span { display: block; margin: 0 0 4px; }
}

/* ══ CTA "El primer paso es simple": mismo fondo que "Por qué elegirnos" ══ */
#cta {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--bg) 100%);
  border-top: none;
  overflow: hidden;
}
#cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(26,158,143,0.15) 0%, transparent 70%);
  pointer-events: none;
}
#cta .cta-form-wrap { position: relative; z-index: 1; }

/* ══ DIORAMAS CLICABLES → VIDEO DEMO ══ */
button.journey-art {
  display: block; width: 100%; padding: 0; border: 0;
  font: inherit; color: inherit; cursor: pointer;
  border-radius: 18px;
}
button.journey-art,
button.journey-art:focus,
button.journey-art:focus-visible,
.video-modal-player:focus,
.video-modal-close:focus { outline: none; }
.journey-play {
  position: absolute; left: 50%; bottom: 10%;
  transform: translate(-50%, 8px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px 9px 14px; border-radius: 40px;
  background: var(--grad); color: #fff;
  font-family: var(--font-b); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 8px 26px rgba(26,158,143,.45);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .35s var(--ease-out);
  z-index: 2;
}
.journey-item:hover .journey-play { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) {
  .journey-play { opacity: 1; transform: translate(-50%, 0); font-size: 12px; padding: 5px 11px 5px 8px; gap: 5px; bottom: 4%; }
  .journey-play svg { width: 13px; height: 13px; }
}

.video-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; padding: 24px;
}
.video-modal[hidden] { display: none; }
.video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 7, 15, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: vmFade .3s ease both;
}
.video-modal-panel {
  position: relative; width: min(1100px, 100%);
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 60px rgba(26,158,143,.15);
  animation: vmIn .4s var(--ease-out) both;
}
.video-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--line);
}
.video-modal-head h3 { font-family: var(--font-d); font-size: 18px; font-weight: 700; color: var(--white); margin: 0; }
.video-modal-close {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); color: var(--gray-soft);
  cursor: pointer; transition: background .2s, color .2s;
}
.video-modal-close:hover { background: rgba(255,255,255,.06); color: var(--white); }
.video-modal-player { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
@keyframes vmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vmIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .video-modal { padding: 12px; }
  .video-modal-head h3 { font-size: 16px; }
}

/* ══ CURSOR: sobre los dioramas y con el video abierto ══ */
/* El cursor propio de la página siempre queda por encima del video demo */
body.has-custom-cursor #cursor { z-index: 4010; }
body.has-custom-cursor #cursor-ring { z-index: 4000; }

/* ══ ENLACE "SALTAR AL CONTENIDO" (accesibilidad: solo visible con teclado) ══ */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 5000;
  padding: 10px 18px; border-radius: 10px;
  background: var(--grad); color: #fff;
  font-family: var(--font-b); font-weight: 600; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

/* Soluciones: 5 elementos → 3 arriba y 2 centrados abajo (solo escritorio/tablet) */
@media (min-width: 768px) {
  .journey-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .journey-item { flex: 0 0 calc((100% - 2 * var(--jgap)) / 3); }
  .journey-item:last-child .journey-art::after { display: none; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVO · ajustes por ancho de pantalla
   ══════════════════════════════════════════════════════════ */

/* Legibilidad: ninguna etiqueta por debajo de 12 px */
.scroll-label { font-size: 11px; }
.number-source,
.journey-kicker,
.philosophy-label,
.contact-form .field-optional,
.footer-col h4 { font-size: 12px; }
@media (max-width: 767px) {
  .hero-pill { font-size: 12px; letter-spacing: .1em; }
}

/* Celular pequeño (< 480 px): el diorama va arriba y el texto debajo, centrado.
   Al lado del texto dejaba una columna de ~120 px con palabras partidas. */
@media (max-width: 479px) {
  .journey-grid { row-gap: 40px; }
  .journey-item {
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .journey-art { width: min(100%, 300px); margin: 0 auto 14px; }
  .journey-title { margin-bottom: 6px; font-size: 18px; }
  .journey-title span { display: inline; margin: 0 6px 0 0; }
  .journey-kicker { margin-bottom: 8px; }
  .journey-desc { max-width: 320px; }
}

/* Tablet (768–1023 px): soluciones en 2 columnas en vez de 3 apretadas */
@media (min-width: 768px) and (max-width: 1023px) {
  .journey-item { flex-basis: calc((100% - var(--jgap)) / 2); }
  .journey-item .journey-art::after { display: none; }
  .journey-desc { max-width: 340px; }
}

/* Pantallas grandes (≥ 1600 px): más ancho útil y texto más grande,
   para que el contenido no quede como una franja pequeña en el centro */
@media (min-width: 1600px) {
  .section-inner,
  .porque-inner,
  .footer-inner,
  .footer-bottom { max-width: 1320px; }
  .numbers-grid { max-width: 1180px; }
  .hero-content { max-width: 1060px; }
  .hero-h1 { font-size: clamp(60px, 3.6vw, 80px); }
  .hero-sub { font-size: 21px; max-width: 720px; }
  .section-title { font-size: clamp(44px, 2.6vw, 56px); }
  #servicios .section-title, #nosotros .section-title, #numeros .section-title { font-size: clamp(44px, 2.4vw, 52px); }
  .section-sub, .about-lead { font-size: 19px; }
  .section-sub { max-width: 720px; }
  .journey-grid { --jgap: 40px; row-gap: 64px; }
  .journey-title { font-size: 20px; }
  .journey-desc { font-size: 16px; max-width: 360px; }
  .number-value { font-size: 76px; }
  .number-label { font-size: 17px; max-width: 300px; }
  .porque-big { font-size: 76px; }
  .reason-text h3 { font-size: 20px; }
  .reason-text p, .mv-card p, #nosotros .about-text { font-size: 16px; }
  .about-lead, #nosotros .about-text { max-width: 640px; }
  .cta-title { font-size: 64px; }
  .cta-sub { font-size: 20px; max-width: 640px; }
  .cta-form-wrap { max-width: 640px; }
}
@media (min-width: 2200px) {
  .section-inner,
  .porque-inner,
  .footer-inner,
  .footer-bottom { max-width: 1480px; }
  .hero-h1 { font-size: 88px; }
  .journey-desc { font-size: 17px; max-width: 400px; }
}
.scroll-label, .footer-made { font-size: 12px; }
@media (min-width: 1600px) {
  .nav-links a { font-size: 17px; }
  .nav-logo-text { font-size: 22px; }
  .nav-logo-mark { width: 40px; height: 40px; }
  .hero-pill { font-size: 13px; padding: 9px 22px; }
  .hero-ctas .btn-primary-lg, .hero-ctas .btn-ghost-lg { font-size: 17px; padding: 17px 34px; }
  .ticker-static, .ticker-words span { font-size: 16px; }
  .values-row li { font-size: 15px; }
  .footer-col a, .footer-tagline { font-size: 15px; }
}

/* Datos que hablan: solución a la que corresponde cada cifra */
.number-kicker {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 12px; border-radius: 40px;
  border: 1px solid rgba(26,158,143,.45);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal);
}
@media (min-width: 1600px) { .number-kicker { font-size: 13px; } }
.number-kicker { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1100px) {
  /* Columnas angostas: la etiqueta puede ir en 2 líneas, con la misma
     altura en las tres columnas para que las cifras queden alineadas */
  .number-kicker {
    white-space: normal; text-align: center; line-height: 1.3;
    min-height: calc(3 * 1.3em + 12px); display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 12px; border-radius: 14px; letter-spacing: .05em;
  }
}