/* =========================================================
   BYMEDIA — "Revolucionario"
   Principios tomados de Orano (Immersive Garden / Awwwards SOTD):
   - Paleta disciplinada de 3 colores: negro, blanco hueso, 1 acento.
   - Visuales "wireframe" (líneas) en vez de fotos/gradientes.
   - Narrativa controlada por el scroll (pin + scrub), no solo fade-in.
   - Navegación no convencional: overlay a pantalla completa.
   - Tipografía enorme y editorial como protagonista visual.
   No es una copia: se aplica al contenido real de Bymedia.
   ========================================================= */

:root{
  --bg:      #060B18;
  --bg-alt:  #080E1E;
  --fg:      #F2F4FA;
  --fg-dim:  #8892AC;
  --line:    #1B2340;
  --accent:  #CFE035;
  --accent-blue: #1B5FE0;
  --accent-blue-deep: #0A2472;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --ease: cubic-bezier(.16,.84,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background: var(--bg); }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background: var(--accent); color:#070707; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.02; letter-spacing:-0.02em; font-weight:600; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.eyebrow{
  font-family: var(--font-mono);
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--fg-dim);
}

.link-arrow{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  font-size:.85rem;
  letter-spacing:.02em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  transition: border-color .3s var(--ease), color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow::after{ content:'→'; transition: transform .3s var(--ease); }
.link-arrow:hover{ color: var(--accent); border-color: var(--accent); gap:16px; }
.link-arrow--lg{ font-size:1.1rem; padding-bottom:10px; }
.link-arrow--submit{ border: 1px solid var(--line); border-radius:0; padding:16px 24px; width:fit-content; }
.link-arrow--submit:hover{ background: var(--accent); color:#070707; }

section{ position:relative; padding: 140px 6vw; }

/* =========================================================
   Section background image (imagen real detrás del texto)
   ========================================================= */
.section-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.section-bg ~ *{ position:relative; z-index:1; }
.section-bg img{
  width:100%; height:100%; object-fit:cover;
  object-position: center;
  opacity:.28;
  filter: grayscale(.15);
}
.section-bg::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(6,11,24,.45) 20%, rgba(6,11,24,.55) 80%, var(--bg) 100%);
}
.section-bg--right img{ object-position: 75% center; opacity:.55; }
.section-bg--right::after{
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 20%, rgba(6,11,24,.55) 45%, rgba(6,11,24,.25) 68%, rgba(6,11,24,.45) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%);
}

/* =========================================================
   Loader
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:300;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__word{ font-family: var(--font-display); font-size: 1.4rem; letter-spacing:.06em; }
.loader__bar{ width: 220px; height:1px; background: var(--line); }
.loader__fill{ width:0%; height:100%; background: var(--accent); }

/* =========================================================
   Custom cursor
   ========================================================= */
.cursor{
  position:fixed; top:0; left:0; width:18px; height:18px;
  border:1px solid var(--accent); border-radius:50%;
  pointer-events:none; z-index:250;
  transform: translate(-50%,-50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
  mix-blend-mode: difference;
}
.cursor.is-active{ width:44px; height:44px; background: var(--accent); }
@media (pointer: coarse){ .cursor{ display:none; } }

/* =========================================================
   Scroll progress
   ========================================================= */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background: var(--accent); z-index:220;
}

/* =========================================================
   Fixed chrome + overlay nav
   ========================================================= */
.chrome{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; justify-content:space-between; align-items:center;
  padding: 26px 6vw;
  mix-blend-mode: difference;
  pointer-events:none;
}
.chrome__logo, .chrome__menu{ pointer-events:auto; }
.chrome__logo{
  font-family: var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.02em;
  color: var(--fg);
  display:flex; align-items:center;
}
.chrome__logo span{ color: var(--accent); }
.chrome__logo-img{ height: 40px; width:auto; display:block; }
.chrome__menu{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--fg);
}
.chrome__menu i{
  width:26px; height:1px; background: var(--fg); position:relative;
}
.chrome__menu i::before, .chrome__menu i::after{
  content:''; position:absolute; left:0; width:100%; height:1px; background:var(--fg);
  transition: transform .3s var(--ease);
}
.chrome__menu i::before{ top:-7px; }
.chrome__menu i::after{ top:7px; }
.chrome__menu[aria-expanded="true"] i{ background:transparent; }
.chrome__menu[aria-expanded="true"] i::before{ top:0; transform:rotate(45deg); }
.chrome__menu[aria-expanded="true"] i::after{ top:0; transform:rotate(-45deg); }

.overlay{
  position:fixed; inset:0; z-index:110;
  background: var(--bg);
  display:flex; align-items:center;
  clip-path: circle(0% at calc(100% - 60px) 40px);
  transition: clip-path .7s var(--ease);
}
.overlay.is-open{ clip-path: circle(150% at calc(100% - 60px) 40px); }
.overlay__grid{
  width:100%;
  display:grid; grid-template-columns: 1.4fr .6fr;
  gap: 40px;
  padding: 0 6vw;
}
.overlay__links li{ border-top:1px solid var(--line); }
.overlay__links li:last-child{ border-bottom:1px solid var(--line); }
.overlay__links a{
  display:flex; align-items:baseline; gap:22px;
  font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3.4rem);
  padding: 14px 0;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.overlay__links a::before{
  content: attr(data-idx);
  font-family: var(--font-mono); font-size:.85rem; color: var(--fg-dim);
}
.overlay__links a:hover{ color: var(--accent); padding-left: 14px; }
.overlay__side{ display:flex; flex-direction:column; justify-content:center; gap:8px; }
.overlay__label{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--fg-dim); margin-top:26px; }
.overlay__label--sp{ margin-top: 34px; }
.overlay__contact{ font-family: var(--font-body); font-size:1rem; }
.overlay__contact--static{ color: var(--fg-dim); }
a.overlay__contact:hover{ color: var(--accent); }

/* =========================================================
   Reveal helpers (driven by JS: adds .is-in)
   ========================================================= */
.reveal-line{ display:block; overflow:hidden; }
.reveal-line span{ display:inline-block; transform: translateY(110%); transition: transform .9s var(--ease); }
.reveal-line.is-in span{ transform: translateY(0); }
.reveal-up{ opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-up.is-in{ opacity:1; transform:translateY(0); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top: 120px;
  overflow:hidden;
}

.hero__inner{ position:relative; max-width: 1100px; }
.hero__title{ font-size: clamp(2.6rem, 6.4vw, 5.6rem); margin: 22px 0 40px; }
.hero__title .dot{ color: var(--accent); font-style:normal; }
.hero__foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.hero__subtitle{ max-width: 420px; color: var(--fg-dim); font-size:1.02rem; }
.hero__links{ display:flex; flex-direction:column; gap:14px; align-items:flex-end; }

.hero__scroll{
  position:absolute; bottom: 30px; left:6vw;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero__scroll span{
  width:1px; height:46px; background: var(--line); position:relative; overflow:hidden;
}
.hero__scroll span::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--accent);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{ to{ top:100%; } }
.hero__scroll p{ font-family: var(--font-mono); font-size:.7rem; color: var(--fg-dim); text-transform:uppercase; letter-spacing:.1em; }

/* =========================================================
   Marquee
   ========================================================= */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding: 18px 0; }
.marquee__track{ display:flex; width:max-content; animation: marquee 26s linear infinite; }
.marquee__track span{
  font-family: var(--font-mono); font-size:.95rem; color: var(--fg-dim); white-space:nowrap; padding-right: 6px;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   Trust
   ========================================================= */
.trust{
  display:grid; grid-template-columns: repeat(4,1fr);
  padding: 90px 6vw;
}
.trust__item{ border-left:1px solid var(--line); padding: 0 28px; }
.trust__item:first-child{ border-left:none; padding-left:0; }
.trust__num{ font-family: var(--font-display); font-size: clamp(2.4rem,4vw,3.6rem); }
.trust__plus{ font-family: var(--font-display); font-size: clamp(2.4rem,4vw,3.6rem); color: var(--accent); }
.trust__item p{ color: var(--fg-dim); font-size:.86rem; margin-top:10px; max-width:200px; }

/* =========================================================
   About
   ========================================================= */
.about{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px;
  border-top:1px solid var(--line);
}
.about__quote{ font-size: clamp(1.6rem,2.8vw,2.4rem); margin-top:20px; max-width:480px; }
.section-text{ color: var(--fg-dim); font-size:1.02rem; max-width:520px; }
.about__list{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.about__list li{
  position:relative; padding-left:22px; color: var(--fg-dim); font-size:.94rem;
}
.about__list li::before{ content:'—'; position:absolute; left:0; color: var(--accent); }

/* =========================================================
   Pillars (propuesta de valor)
   ========================================================= */
.pillars{ border-top:1px solid var(--line); }
.pillars h2{ font-size: clamp(2rem,3.4vw,3rem); margin-top:14px; }
.pillars__intro{ color: var(--fg-dim); font-size:1.02rem; max-width:640px; margin-top:20px; }
.pillars__grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  margin-top: 56px;
}
.pillar{
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.pillar__num{ font-family: var(--font-mono); color: var(--fg-dim); font-size:.8rem; }
.pillar h3{ font-size:1.2rem; margin: 16px 0 18px; }
.pillar ul{ display:flex; flex-direction:column; gap:12px; }
.pillar li{
  position:relative; padding-left:20px; color: var(--fg-dim); font-size:.88rem;
}
.pillar li::before{ content:'—'; position:absolute; left:0; color: var(--accent); }

/* =========================================================
   Results band (métricas documentadas)
   ========================================================= */
.results{ border-top:1px solid var(--line); text-align:center; }
.results__grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 50px;
}
.results__item{ border-left:1px solid var(--line); padding: 0 20px; }
.results__item:first-child{ border-left:none; }
.results__num, .results__suffix{
  font-family: var(--font-display); font-size: clamp(2.4rem,4.2vw,3.8rem);
}
.results__suffix{ color: var(--accent); }
.results__item p{ color: var(--fg-dim); font-size:.84rem; margin-top:10px; max-width:220px; margin-left:auto; margin-right:auto; }
.results__note{ margin-top:36px; color: var(--fg-dim); font-size:.74rem; font-family: var(--font-mono); }

/* =========================================================
   Payers (quién paga cada incapacidad)
   ========================================================= */
.payers{ border-top:1px solid var(--line); text-align:center; }
.payers__head h2{ font-size: clamp(1.9rem,3vw,2.6rem); margin: 14px 0 10px; }
.payers__tagline{ font-family: var(--font-mono); font-size:.85rem; color: var(--accent); letter-spacing:.03em; }
.payers__grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 56px;
}
.payers__item{ border-top: 1px solid var(--line); padding-top: 22px; }
.payers__num{ font-family: var(--font-mono); color: var(--accent-blue); font-size:.9rem; letter-spacing:.02em; }
.payers__item h3{ font-size: 1.1rem; margin: 14px 0 8px; }
.payers__item p{ color: var(--fg-dim); font-size:.9rem; }
.payers__note{ margin-top: 44px; color: var(--fg-dim); font-size:.92rem; max-width:560px; margin-left:auto; margin-right:auto; }

/* =========================================================
   Team
   ========================================================= */
.team{ border-top:1px solid var(--line); }
.team__grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:center; }
.team__visual img{ width:100%; height:auto; border: 1px solid var(--line); }
.team__text h2{ font-size: clamp(1.9rem,3.2vw,2.8rem); margin: 14px 0 32px; }
.team__pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom: 32px; }
.team__pillars h3{ font-size:.98rem; margin-bottom:8px; }
.team__pillars p{ color: var(--fg-dim); font-size:.84rem; }
.team__signoff{ font-family: var(--font-display); font-size:1.2rem; color: var(--accent); }

/* =========================================================
   Intro videos (justo después del hero)
   ========================================================= */
.intro-videos{ padding: 60px 6vw; }
.intro-videos__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.video-frame{ border: 1px solid var(--line); background:#0A0E1C; overflow:hidden; }
.video-frame video{ width:100%; height:auto; display:block; }

/* =========================================================
   Process (pinned scroll scene)
   ========================================================= */
.process{ border-top:1px solid var(--line); padding:0; }
.process__pin{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding: 100px 6vw; }
.process__eyebrow{ margin-bottom:14px; }
.process__title{ font-size: clamp(2rem,3.4vw,3rem); margin-bottom: 60px; }
.process__svg{ width:100%; height:auto; margin-bottom: 20px; }
#processPathFill{ stroke-dasharray: 1220; stroke-dashoffset: 1220; }
.process__steps{
  display:grid; grid-template-columns: repeat(5,1fr); gap:20px;
}
.process__step{ opacity:.3; transition: opacity .4s var(--ease); }
.process__step.is-active{ opacity:1; }
.process__num{ font-family:var(--font-mono); color: var(--fg-dim); font-size:.8rem; }
.process__step h3{ font-size:1.05rem; margin: 10px 0 8px; }
.process__step p{ color: var(--fg-dim); font-size:.85rem; }

/* =========================================================
   Services (horizontal pinned panels)
   ========================================================= */
.services{ border-top:1px solid var(--line); padding:0; }
.services__pin{ min-height:100vh; overflow:hidden; padding: 100px 0 0; }
.services__head{ padding: 0 6vw; margin-bottom: 60px; }
.services__head h2{ font-size: clamp(2rem,3.4vw,3rem); margin-top:14px; }
.services__track{ display:flex; will-change: transform; }
.service-panel{
  flex: 0 0 100vw;
  max-width: 720px;
  padding: 0 6vw 100px;
  border-left: 1px solid var(--line);
}
.service-panel__num{ font-family: var(--font-mono); color: var(--fg-dim); font-size:.85rem; }
.service-panel__icon{ width:52px; height:52px; color: var(--accent); margin: 26px 0; }
.service-panel h3{ font-size: clamp(1.6rem,2.6vw,2.2rem); margin-bottom:18px; }
.service-panel p{ color: var(--fg-dim); font-size:1rem; max-width: 480px; }

/* =========================================================
   Products
   ========================================================= */
.products{ border-top:1px solid var(--line); }
.products__eyebrow{ margin-bottom: 50px; }
.product{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
  padding: 60px 0;
  border-top:1px solid var(--line);
}
.product--rev .product__text{ order:2; }
.product__text h2{ font-size: clamp(2rem,3.4vw,2.8rem); margin-bottom:20px; }
.product__text p{ color: var(--fg-dim); font-size:1rem; margin-bottom:26px; max-width:480px; }
.product__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 26px; }
.product__tags span{
  font-family: var(--font-mono); font-size:.72rem; color: var(--fg-dim);
  border: 1px solid var(--line); padding: 6px 12px;
}
.product__links{ display:flex; flex-wrap:wrap; gap:28px; }
.product__visual svg{ width:100%; height:auto; }
.browser-frame{
  border: 1px solid var(--line);
  background: #0A0E1C;
  overflow:hidden;
}
.browser-frame__bar{ display:flex; gap:6px; padding: 10px 14px; border-bottom:1px solid var(--line); }
.browser-frame__bar span{ width:8px; height:8px; border-radius:50%; background: var(--line); }
.browser-frame img, .browser-frame video{ width:100%; height:auto; display:block; }

/* =========================================================
   AI (activation scene)
   ========================================================= */
.ai{ border-top:1px solid var(--line); background: var(--bg-alt); text-align:center; }
.ai__title{ font-size: clamp(1.9rem,3vw,2.6rem); max-width: 720px; margin: 16px auto 14px; }
.ai__subtitle{ color: var(--fg-dim); font-size:1rem; max-width: 560px; margin: 0 auto 56px; }
.ai__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align:left; }
.ai__card{
  border-top: 1px solid var(--line); padding-top: 22px;
  transition: transform .3s var(--ease);
}
.ai__card:hover{ transform: translateY(-4px); }
.ai__card-num{ font-family: var(--font-mono); color: var(--accent-blue); font-size:.8rem; }
.ai__card h3{ font-size: 1rem; margin: 14px 0 8px; }
.ai__card p{ color: var(--fg-dim); font-size:.86rem; }

/* =========================================================
   Clients
   ========================================================= */
.clients{ border-top:1px solid var(--line); text-align:center; }
.clients h2{ font-size: clamp(1.8rem,2.8vw,2.4rem); margin: 14px 0 50px; }
.clients__card{
  background: #F4F6FB;
  border: 1px solid var(--line);
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.clients__card img{ width:100%; height:auto; display:block; }

/* =========================================================
   CTA
   ========================================================= */
.cta{
  border-top:1px solid var(--line);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 40px;
}
.cta__title{ font-size: clamp(2.4rem,6vw,5rem); }
.cta__title i{ color: var(--accent); font-style:normal; }

/* =========================================================
   Contact
   ========================================================= */
.contact{ border-top:1px solid var(--line); display:grid; grid-template-columns: 1.3fr .8fr; gap:60px; }
.contact__col h2{ font-size: clamp(2.2rem,4vw,3.4rem); margin:14px 0 44px; }
.contact__form{ display:flex; flex-direction:column; gap: 26px; max-width:520px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--fg-dim); }
.field input, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding: 10px 2px; color: var(--fg); font-family: var(--font-body); font-size:1rem;
  transition: border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--accent); }
.field--consent{ margin-top: 4px; }
.consent{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.consent input{ margin-top:3px; width:16px; height:16px; accent-color: var(--accent); flex-shrink:0; }
.consent span{ color: var(--fg-dim); font-size:.82rem; line-height:1.5; }
.consent a{ color: var(--accent-blue); text-decoration: underline; }
.consent a:hover{ color: var(--accent); }
.form-note{ font-family: var(--font-mono); font-size:.8rem; color: var(--accent); min-height:1.2em; }

.contact__col--info{ display:flex; flex-direction:column; gap:12px; justify-content:center; }
.contact__big{ font-family: var(--font-display); font-size: clamp(1.3rem,2vw,1.7rem); margin-top:8px; }
.contact__big:hover{ color: var(--accent); }
.contact__loc{ color: var(--fg-dim); margin-top:10px; }
.contact__hours{ border-top:1px solid var(--line); margin-top: 30px; padding-top: 22px; display:flex; flex-direction:column; gap:6px; }
.contact__hours p{ color: var(--fg-dim); font-size:.88rem; }
.contact__support{ color: var(--accent) !important; font-weight:600; margin-top:6px; }
.contact__policy-link{
  display:inline-block; margin-top: 28px;
  font-family: var(--font-mono); font-size:.78rem; color: var(--fg-dim);
  border-bottom: 1px solid var(--line); padding-bottom:4px; width:fit-content;
}
.contact__policy-link:hover{ color: var(--accent); border-color: var(--accent); }

/* =========================================================
   Footer
   ========================================================= */
.footer{ border-top:1px solid var(--line); padding: 80px 6vw 30px; text-align:center; }
.footer__word{ font-family: var(--font-display); font-size: clamp(3rem,9vw,7rem); display:block; margin-bottom:60px; }
.footer__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:30px; max-width:800px; margin:0 auto 60px; text-align:left; }
.footer__grid h4{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--fg-dim); margin-bottom:16px; }
.footer__grid a{ display:block; font-size:.92rem; margin-bottom:10px; color: var(--fg-dim); transition: color .2s var(--ease); }
.footer__grid a:hover{ color: var(--accent); }
.footer__copy{ color: var(--fg-dim); font-size:.76rem; border-top:1px solid var(--line); padding-top:26px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1000px){
  .about{ grid-template-columns:1fr; gap:30px; }
  .trust{ grid-template-columns: repeat(2,1fr); row-gap:36px; }
  .trust__item:nth-child(3){ border-left:none; padding-left:0; }
  .pillars__grid{ grid-template-columns:1fr; gap:36px; }
  .payers__grid{ grid-template-columns:1fr; gap:30px; }
  .results__grid{ grid-template-columns: repeat(2,1fr); row-gap:36px; }
  .results__item:nth-child(3){ border-left:none; padding-left:0; }
  .team__grid{ grid-template-columns:1fr; gap:36px; }
  .team__pillars{ grid-template-columns:1fr; gap:16px; }
  .intro-videos__grid{ grid-template-columns:1fr; }
  .ai__grid{ grid-template-columns: repeat(2,1fr); }
  .product, .product--rev{ grid-template-columns:1fr; }
  .product--rev .product__text{ order:0; }
  .product--rev .product__visual{ order:1; }
  .contact{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  section{ padding: 90px 6vw; }
  .overlay__grid{ grid-template-columns:1fr; }
  .overlay__side{ margin-top:40px; }
  .hero__foot{ flex-direction:column; align-items:flex-start; }
  .hero__links{ align-items:flex-start; }
  .process__steps{ grid-template-columns:1fr; gap:26px; }
  .process__svg{ display:none; }
  .services__pin{ padding-top: 70px; }
  .services__track{ flex-direction:column; transform:none !important; }
  .service-panel{ flex:none; max-width:100%; padding: 0 0 60px; border-left:none; border-top:1px solid var(--line); padding-top: 40px; }
  .ai__grid{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns:1fr; text-align:center; }
}

/* Refinamiento editorial y funcionamiento sin dependencias de animación. */
:root{--fg-dim:#a6afc5;--line:#28324a}
html{scroll-behavior:smooth;scroll-padding-top:100px}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.skip-link{position:fixed;left:20px;top:-100px;z-index:500;background:var(--accent);color:var(--bg);padding:14px}.skip-link:focus{top:20px}
.chrome{mix-blend-mode:normal;background:rgba(6,11,24,.94);border-bottom:1px solid var(--line);padding:18px 6vw;gap:30px;backdrop-filter:blur(14px)}
.header-demo{margin-left:auto;pointer-events:auto;font-size:.8rem;color:var(--accent)}
.chrome__logo-img{height:34px}.chrome__menu{min-height:44px}
.overlay{visibility:hidden;pointer-events:none;overflow-y:auto;align-items:flex-start;padding:110px 0 40px}.overlay.is-open{visibility:visible;pointer-events:auto}.overlay__links{padding:0;list-style:none}.overlay__links a{font-size:clamp(1.3rem,3vw,2.3rem);padding:10px 0}.overlay__side{align-self:start}
.reveal-up{opacity:1;transform:none}.reveal-line span{transform:none}.cursor{display:none}
section{padding:100px 6vw}section[id],article[id]{scroll-margin-top:100px}
.hero{display:grid;grid-template-columns:1.45fr 1fr;align-items:center;gap:5vw;min-height:850px;min-height:100svh;padding:150px 6vw 110px;background:radial-gradient(ellipse at 95% 30%,#102448 0%,transparent 52%)}
.hero__title{font-size:clamp(2.7rem,5.1vw,5.5rem);line-height:1.07;letter-spacing:-.045em;margin:28px 0}.hero__title .reveal-line{overflow:visible}.hero__foot{align-items:flex-start;gap:28px}.hero__subtitle{max-width:510px}.hero__links{align-items:flex-start;gap:20px}.button-primary{background:var(--accent);color:var(--bg);padding:16px 24px;border:1px solid var(--accent);font-weight:600}.button-primary:hover{background:#e2ee76;color:var(--bg)}
.hero-map{position:relative;padding:35px;border:1px solid #344460;border-radius:50% 50% 8px 8px;background:linear-gradient(140deg,#0f1c34aa,#070e1a);text-align:center;box-shadow:0 35px 100px #0004}.hero-map>.eyebrow{display:block;margin-top:30px}.map-core{margin:65px auto 45px;font:600 clamp(2rem,4vw,4rem) var(--font-display);letter-spacing:-.06em}.map-core>span{color:var(--accent)}.map-core small{display:block;font:400 .72rem var(--font-mono);letter-spacing:.03em;color:var(--fg-dim);margin-top:12px}.map-orbit{display:grid;gap:10px;text-align:left}.map-orbit a{display:flex;justify-content:space-between;border:1px solid var(--line);padding:13px 18px;background:#0c1527;transition:background .2s,transform .2s}.map-orbit a:hover{background:#192a41;transform:translateX(4px)}.map-orbit a span{color:var(--accent)}.hero-map>p{margin:25px 0 8px;font-size:.8rem;color:var(--fg-dim)}
.finder{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;border-top:1px solid var(--line);background:#0b1425}.finder h2,.section-heading h2,.faq h2,.results h2{font-size:clamp(2rem,4vw,3.5rem);margin:18px 0 22px;letter-spacing:-.035em}.finder>div>p:not(.eyebrow),.section-heading>p:not(.eyebrow){color:var(--fg-dim);max-width:410px}.finder-options a{display:flex;align-items:center;gap:25px;border-bottom:1px solid var(--line);padding:26px 8px;transition:background .2s,padding .2s}.finder-options a:first-child{border-top:1px solid var(--line)}.finder-options a:hover{background:#111f35;padding-left:18px}.finder-options a>span{font: .75rem var(--font-mono);color:var(--accent)}.finder-options h3{font-size:1.2rem;line-height:1.3}.finder-options p{font-size:.85rem;color:var(--fg-dim);margin-top:8px}.finder-options b{margin-left:auto;color:var(--accent);font-size:1.5rem;font-weight:400}
.section-heading{margin-bottom:40px}.video-frame{border-radius:8px}.video-frame video{aspect-ratio:16/9;background:#03070e;object-fit:contain}.video-caption{padding:18px 22px;display:flex;gap:15px;align-items:center;font-size:.9rem;border-top:1px solid var(--line)}.video-caption span{font: .72rem var(--font-mono);color:var(--accent)}
.trust{padding:65px 6vw}.trust__num,.trust__plus{font-size:clamp(2rem,4vw,3rem)}
.pillar,.ai__card{background:#0c1628aa;padding:28px;border:1px solid var(--line);border-radius:4px}.pillars__grid{gap:16px}
.process__pin{min-height:auto;padding:90px 6vw}.process__svg{max-height:130px;margin:0}.process__step{opacity:1;border-top:1px solid var(--line);padding-top:22px}.process__title{margin-bottom:28px}#processPathFill{stroke-dashoffset:0}
.services__pin{min-height:0;overflow:visible;padding:90px 6vw}.services__head{padding:0;margin-bottom:40px}.services__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;transform:none!important;will-change:auto}.service-panel{max-width:none;min-width:0;padding:30px;border:1px solid var(--line);background:#0b1322;transition:border-color .2s,background .2s}.service-panel:hover{border-color:#748532;background:#111e30}.service-panel h3{font-size:1.5rem}.service-panel p{font-size:.92rem}.service-panel__icon{margin:24px 0;width:40px;height:40px}
.product{gap:50px}.product__text p{max-width:560px}.browser-frame{border-radius:9px;box-shadow:0 18px 60px #0005}.browser-frame__bar span:first-child{background:var(--accent)}.product__visual video{aspect-ratio:16/9;object-fit:contain}.product__tags span{border-radius:30px}.payers>.link-arrow{margin-top:35px}.value-word{font:500 clamp(1.3rem,2.3vw,2rem) var(--font-display);color:var(--accent)}.results{background:linear-gradient(110deg,#0a1830,#080e1e)}
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:70px;border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:24px 0}summary{cursor:pointer;font-family:var(--font-display);font-size:1.15rem;line-height:1.45}details p{color:var(--fg-dim);padding:18px 0 0;max-width:650px}.cta{background:radial-gradient(ellipse at bottom,#13294a,transparent 70%)}.contact-explainer{font-size:.85rem;color:var(--fg-dim)}.contact__big,.footer__grid a{overflow-wrap:anywhere}.consent a,.payers__num,.ai__card-num{color:var(--accent)}.link-arrow--submit{background:var(--accent);color:var(--bg)}.footer{padding-top:65px}.footer__word{color:var(--fg);letter-spacing:-.05em}.footer__grid{max-width:1100px}
@media(min-width:1100px){.hero__links{flex-direction:row;align-items:center}.hero__links a:first-child{order:2}.hero__links a:last-child{order:1}}
@media(max-width:1000px){.hero{grid-template-columns:1fr;min-height:auto}.hero-map{display:none}.hero__title{font-size:clamp(2.6rem,7.5vw,5rem)}.finder,.faq{gap:35px}.services__track{grid-template-columns:repeat(2,minmax(0,1fr))}.process__steps{grid-template-columns:repeat(2,minmax(0,1fr))}.process__svg{display:none}}
@media(max-width:760px){section{padding:65px 6vw}.chrome{padding:12px 6vw;gap:16px}.header-demo{display:none}.chrome__menu{margin-left:auto}.hero{padding:145px 6vw 95px}.hero__title{font-size:clamp(2.4rem,8.5vw,4rem)}.hero__scroll{bottom:20px}.hero__scroll span{height:25px}.finder,.faq{grid-template-columns:1fr;gap:28px}.finder-options a{gap:16px}.services__pin,.process__pin{padding:65px 6vw}.services__track{grid-template-columns:1fr}.service-panel{padding:28px}.process__steps{grid-template-columns:1fr}.results__item{padding:0 8px}.results__grid{gap:26px 8px}.overlay__side{margin-top:0}.overlay__grid{gap:10px}.overlay__links a{font-size:1.4rem;overflow-wrap:anywhere}.team__visual img{border-radius:6px}.contact{gap:45px}.intro-videos{padding-top:65px;padding-bottom:65px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Portada con ilustración conceptual original. */
.hero{grid-template-columns:1.05fr 1fr;gap:2vw;padding-right:3vw;min-height:90svh}
.hero__inner{z-index:2}.hero__title{font-size:clamp(2.7rem,4.7vw,5.3rem)}
.hero-art{position:relative;min-width:0;align-self:center;margin-left:-35px}
.hero-art>img{width:100%;height:590px;object-fit:cover;border-radius:12px;mask-image:linear-gradient(to right,transparent,#000 12%,#000 96%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 96%,transparent)}
.hero-art__caption{position:absolute;left:13%;top:24px;display:flex;flex-direction:column;gap:8px;text-shadow:0 2px 10px #000;font-family:var(--font-mono)}
.hero-art__caption>span{font-size:.7rem;letter-spacing:.14em;color:var(--accent)}.hero-art__caption small{font-size:.68rem;color:var(--fg-dim)}
.hero-art__links{display:flex;justify-content:center;gap:8px;position:relative;margin-top:-30px;flex-wrap:wrap}
.hero-art__links a{background:#0b1529eb;border:1px solid #35435b;border-radius:30px;padding:11px 16px;font-size:.75rem;backdrop-filter:blur(10px)}.hero-art__links a:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:1000px){.hero{grid-template-columns:1fr;padding-right:6vw;padding-bottom:90px;gap:25px}.hero-art{margin:0;width:100%}.hero-art>img{height:390px;object-position:center;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 94%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 94%,transparent)}.hero-art__caption{left:6%;top:20px}.hero__title{font-size:clamp(2.6rem,7.5vw,5rem)}}
@media(max-width:760px){.hero{padding-top:115px;gap:25px}.hero-art>img{height:310px}.hero-art__links a{padding:9px 12px;font-size:.7rem}.hero__title{font-size:clamp(2.4rem,8.5vw,4rem)}}
/* Cerebro digital: impulsos decorativos, sin simular actividad del producto. */
.hero-art--brain{margin-left:0}.neural-visual{position:relative}.neural-visual>img{display:block;width:100%;height:auto;object-fit:contain;mask-image:linear-gradient(to bottom,#000 85%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 85%,transparent)}
.neural-signals{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.neural-signals path{fill:none;stroke:#d9f65c;stroke-width:3;stroke-linecap:round;stroke-dasharray:14 1250;animation:neuralFlow 4s linear infinite;filter:drop-shadow(0 0 6px #d9f65c)}.neural-signals path:nth-child(2){animation-delay:-1s}.neural-signals path:nth-child(3){animation-delay:-2s}.neural-signals path:nth-child(4){animation-delay:-3s}.neural-signals circle{fill:#d9f65c;opacity:.5;animation:neuralPulse 3s ease-in-out infinite;transform-origin:760px 510px}
@keyframes neuralFlow{from{stroke-dashoffset:1264}to{stroke-dashoffset:0}}@keyframes neuralPulse{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.6;transform:scale(1.3)}}
.brain-story{padding:0 25px 20px;border-left:1px solid #52652c;margin:0 20px}.brain-story h2{font-size:clamp(1.4rem,2.1vw,2rem);line-height:1.15;margin:12px 0}.brain-story>p:not(.eyebrow){font-size:.88rem;color:var(--fg-dim);max-width:480px}.brain-story .link-arrow{margin-top:18px}.brain-story small{display:block;font-size:.65rem;color:var(--fg-dim);margin-top:16px;max-width:400px}
@media(max-width:1000px){.hero-art--brain{max-width:650px;margin:0 auto}.brain-story{margin:0 10px}}
@media(prefers-reduced-motion:reduce){.neural-signals path,.neural-signals circle{animation:none!important}.neural-signals path{stroke-dasharray:none;opacity:.25}}
/* Cerebro integrado como fondo de toda la portada. */
.hero.hero--brain-background{display:flex;position:relative;isolation:isolate;min-height:94svh;padding:155px 6vw 110px;background:#060b18;overflow:hidden}
.hero-background{position:absolute;inset:0;z-index:-2;pointer-events:none}
.hero-background .neural-visual{position:absolute;inset:0;width:100%;height:100%}
.hero-background .neural-visual>img{width:100%;height:100%;object-fit:cover;object-position:78% center;mask-image:none;-webkit-mask-image:none;opacity:.85}
.hero-background .neural-signals{opacity:.35}
.hero--brain-background::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,11,24,.96) 0%,rgba(6,11,24,.84) 32%,rgba(6,11,24,.4) 65%,rgba(6,11,24,.12) 100%),linear-gradient(0deg,#060b18 0%,transparent 25%,transparent 80%,rgba(6,11,24,.35) 100%);pointer-events:none}
.hero--brain-background .hero__inner{width:100%;max-width:1000px;align-self:flex-start}
.hero--brain-background .hero__title{font-size:clamp(2.7rem,6vw,5.8rem);max-width:950px;text-shadow:0 3px 24px #060b1866}
.hero--brain-background .hero__subtitle{max-width:520px;color:#d1d8e6}
.hero--brain-background .hero__foot{max-width:620px}
@media(max-width:1000px){.hero.hero--brain-background{min-height:85svh;padding:140px 6vw 100px}.hero-background .neural-visual>img{object-position:65% center}.hero--brain-background::after{background:linear-gradient(90deg,rgba(6,11,24,.9),rgba(6,11,24,.5)),linear-gradient(0deg,#060b18,transparent 30%)}.hero--brain-background .hero__title{font-size:clamp(2.6rem,7vw,5rem)}}
@media(max-width:760px){.hero.hero--brain-background{min-height:90svh;padding:125px 6vw 90px}.hero--brain-background .hero__title{font-size:clamp(2.4rem,8.5vw,4rem)}.hero-background .neural-visual>img{object-position:58% center}.hero--brain-background::after{background:linear-gradient(90deg,rgba(6,11,24,.86),rgba(6,11,24,.58)),linear-gradient(0deg,#060b18,transparent 35%)}.hero--brain-background .hero__subtitle{font-size:.96rem}}
/* Explorador de soluciones y portadas sobre fotogramas reales. */
.finder--interactive{grid-template-columns:.75fr 1.4fr;align-items:start;gap:55px}.finder-intro{padding-top:15px}.solution-explorer{min-width:0;border:1px solid #36425a;background:linear-gradient(130deg,#13233b,#080f1e);border-radius:12px;overflow:hidden}.solution-tabs{display:flex;border-bottom:1px solid #36425a;background:#060d1b}.solution-tabs button{flex:1;padding:20px 13px;font-size:.78rem;line-height:1.5;color:var(--fg-dim);border-bottom:3px solid transparent;transition:color .2s,background .2s}.solution-tabs button[aria-selected="true"]{color:var(--accent);background:#152238;border-bottom-color:var(--accent)}.solution-tabs button:hover{color:var(--fg)}.solution-tabs button:focus-visible{outline-offset:-5px}.solution-panel{padding:36px;min-height:370px;animation:panelEnter .25s ease-out}.solution-label{font:.73rem var(--font-mono);letter-spacing:.07em;color:var(--accent);text-transform:uppercase}.solution-panel h3{font-size:clamp(1.5rem,2.6vw,2.3rem);margin:20px 0;line-height:1.15}.solution-panel>p{font-size:.93rem;color:var(--fg-dim);max-width:580px}.solution-features{display:flex;gap:9px;flex-wrap:wrap;margin:24px 0 30px}.solution-features li{border:1px solid #38465c;border-radius:30px;padding:7px 11px;font-size:.72rem;color:#d7dfed}.solution-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}.solution-actions .link-arrow{font-size:.75rem}.solution-actions .button-primary{padding:13px 17px}@keyframes panelEnter{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.video-stage{position:relative;background:#050a14;isolation:isolate}.video-stage video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain}.video-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;width:100%;background:linear-gradient(0deg,rgba(3,8,18,.94),rgba(3,8,18,.22) 75%);padding:24px;cursor:pointer}.play-disc{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;border:1px solid #e0ee79;background:var(--accent);color:#071020;font-size:22px;padding-left:4px;box-shadow:0 0 0 10px #cfe03515;transition:transform .2s,box-shadow .2s}.video-cover:hover .play-disc{transform:scale(1.08);box-shadow:0 0 0 16px #cfe03518}.video-cover__copy{display:flex;flex-direction:column;gap:8px;text-align:center}.video-cover__copy strong{font:500 clamp(1.05rem,1.8vw,1.5rem) var(--font-display)}.video-cover__copy>span{font-size:.8rem;color:#c5cde0}.video-duration{position:absolute;right:15px;top:15px;font:.7rem var(--font-mono);padding:5px 9px;background:#060b18c9;border:1px solid #526078;border-radius:4px}.video-duration:empty{display:none}.video-cover:focus-visible{outline-offset:-5px}.video-stage.is-playing .video-cover{display:none}
@media(max-width:1000px){.finder--interactive{grid-template-columns:1fr}.finder-intro h2 br{display:none}}
@media(max-width:600px){.solution-tabs{flex-direction:column}.solution-tabs button{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);border-left:3px solid transparent}.solution-tabs button[aria-selected="true"]{border-left-color:var(--accent);border-bottom-color:var(--line)}.solution-panel{padding:26px 20px;min-height:0}.solution-panel h3{font-size:1.65rem}.solution-actions{align-items:flex-start;flex-direction:column}.play-disc{width:48px;height:48px;font-size:17px}.video-cover{gap:13px;padding:16px}.video-cover__copy>span{font-size:.72rem}.video-cover__copy strong{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.solution-panel{animation:none}}