/* Tokens tomados de las variables del Figma "Website — VA" */
:root {
  --color-background-base: #f5f5f5;
  --color-background-subtle: #e6e6e6;
  --color-background-inverse: #202020;
  --color-background-accent: #4337ff;
  --color-text-primary: #202020;
  --color-text-inverse: #fafafa;
  --color-border-strong: #727272;
  --color-border-subtle: #e6e6e6;

  --padding-lg: 20px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-xl: 32px;

  /* Neue Haas Grotesk Text Pro, cargada desde Adobe Fonts (kit bva1ths) */
  --font-sans: "neue-haas-grotesk-text", sans-serif;
  /* DM Mono Medium, desde Google Fonts (numeración de pasos) */
  --font-mono: "DM Mono", ui-monospace, monospace;

  /* Distancia desde arriba de la pantalla a la que se quedan los elementos sticky */
  --sticky-top: var(--padding-lg);
}

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

html {
  scroll-behavior: smooth;
}

/* Con Lenis (smooth scroll, ver reveal.js) el navegador no debe suavizar por su cuenta */
html.lenis {
  scroll-behavior: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

body {
  margin: 0;
  background: var(--color-background-base);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
  font-weight: inherit;
}

ul {
  padding: 0;
  list-style: none;
}

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

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

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---- Tipografía (estilos del Figma; versión móvil al final) ---------- */
.display-xl {
  font-size: 72px;
  line-height: 80px;
  letter-spacing: -0.02em;
}
.display-l {
  font-size: 60px;
  line-height: 68px;
  letter-spacing: -0.02em;
}
.display-m {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.015em;
}
.headline-m {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.01em;
}
.headline-s {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.005em;
}
.body-l {
  font-size: 18px;
  line-height: 28px;
}
.body-l > p + p {
  margin-top: 8px;
}
.body-s {
  font-size: 14px;
  line-height: 20px;
}
.note-m {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
}

/* Capas "sticky" del Figma: se quedan fijas dentro de su celda mientras se hace scroll */
.sticky {
  position: sticky;
  top: var(--sticky-top);
}

/* ---- Hero ------------------------------------------------------------ */
/* El hero se queda fijo arriba y el resto de la página sube por encima (ver reveal.js) */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  background: var(--color-background-inverse);
  color: var(--color-text-inverse);
}

.hero__wordmark img {
  width: 100%;
  height: auto;
}

/* Display/L del Figma */
.hero__copy {
  padding: var(--padding-lg);
  font-size: 60px;
  line-height: 68px;
  letter-spacing: -0.02em;
}

.hero__divider {
  width: 100%;
  height: 1px;
}

.hero__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--padding-lg);
  font-size: 14px;
  line-height: 20px;
}

.hero__more img {
  width: 20px;
  height: 20px;
}

main,
.footer {
  position: relative;
  z-index: 1;
  background: var(--color-background-base);
}

/* ---- Piezas comunes -------------------------------------------------- */
/* Título de sección a todo lo ancho */
.section-title {
  padding: var(--padding-lg);
  border-bottom: 1px solid var(--title-border, var(--color-border-strong));
}

/* Dos columnas: texto a la izquierda (normalmente sticky) y lista a la derecha */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.split__aside {
  padding: var(--padding-lg);
  border-right: 1px solid var(--split-border, var(--color-border-strong));
}

.split__list > * {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--padding-lg);
}

.split__list > :not(:last-child) {
  border-bottom: 1px solid var(--split-border, var(--color-border-strong));
}

/* ---- Intro ----------------------------------------------------------- */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 401px;
  border-bottom: 1px solid var(--color-border-strong);
}

.intro__title {
  padding: var(--padding-lg);
  border-right: 1px solid var(--color-border-strong);
}

.intro__body {
  padding: var(--padding-lg);
}

/* ---- Frase en azul --------------------------------------------------- */
.statement {
  height: 833px;
  padding: var(--padding-lg);
  background: var(--color-background-accent);
  color: var(--color-text-inverse);
  border-bottom: 1px solid var(--color-border-strong);
}

/* ---- Nuestro proceso ------------------------------------------------- */
/* Escritorio: dos columnas desfasadas como en el Figma.
   Izquierda: intro (320) · 2. Lanzamiento (520) · nota (320)
   Derecha:   1. Arranque (520) · 3. Operación (resto)
   En el HTML van en orden de lectura (1, 2, 3) para móvil y lectores de pantalla. */
.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 321px 200px 320px 320px;
  background: var(--color-background-inverse);
  color: var(--color-text-inverse);
  border-bottom: 1px solid var(--color-border-subtle);
}

.process__intro,
.step,
.process__note {
  padding: var(--padding-lg);
}

.process__intro,
.step--2,
.process__note {
  grid-column: 1;
  border-right: 1px solid var(--color-border-strong);
}

.process__intro {
  grid-row: 1;
  background: var(--color-background-base);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-strong);
}

.step--1 {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: var(--color-background-base);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-strong);
}

.step--2 {
  grid-row: 2 / span 2;
  background: var(--color-background-accent);
  border-bottom: 1px solid var(--color-border-strong);
}

.step--3 {
  grid-column: 2;
  grid-row: 3 / span 2;
}

.process__note {
  grid-row: 4;
}

.step__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ---- Resultados (fondo oscuro) --------------------------------------- */
.results {
  background: var(--color-background-inverse);
  color: var(--color-text-inverse);
  border-bottom: 1px solid var(--color-border-strong);
  --title-border: var(--color-border-subtle);
  --split-border: var(--color-border-subtle);
}

.results__title {
  padding: var(--padding-lg);
  border-bottom: 1px solid var(--title-border);
}

.results .split {
  border-bottom: 1px solid var(--split-border);
}

.stat {
  height: 240px;
}

/* ---- Con quién trabajamos -------------------------------------------- */
.clients {
  border-bottom: 1px solid var(--color-border-strong);
}

.client {
  height: 320px;
}

/* ---- Equipo ---------------------------------------------------------- */
/* Escritorio: intro + Rafa (sticky) a la izquierda; Alex y Jerry a la derecha */
.team {
  background: var(--color-background-subtle);
}

.team__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 320px 304px 320px 304px;
}

.team__intro {
  grid-column: 1;
  grid-row: 1;
  padding: var(--padding-lg);
  border-right: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
}

.member {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 624px;
  overflow: hidden;
  color: var(--color-text-inverse);
}

.member--alex {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* La foto de Rafa es sticky y se queda arriba mientras pasan las demás */
.member--rafa {
  position: sticky; /* .member pone position: relative; aquí gana sticky */
  --sticky-top: 0px;
  grid-column: 1;
  grid-row: 2 / span 3;
  align-self: start;
  border-right: 1px solid var(--color-border-strong);
}

.member--jerry {
  grid-column: 2;
  grid-row: 3 / span 2;
}

.member__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.member__caption {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--padding-lg);
  border-top: 1px solid var(--color-border-subtle);
}

.member__caption h3 {
  min-height: 32px;
}

/* ---- Empecemos por un diagnóstico ------------------------------------ */
.cta {
  background: var(--color-background-subtle);
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
}

/* ---- Logotipo por palabras ------------------------------------------- */
/* Dos copias del logotipo en la misma celda, cada una recortada a una palabra.
   44.86% es el punto medio del espacio entre "velari" y "antero" en los cuatro SVG. */
.wordmark {
  --word-split: 44.86%;
  display: grid;
}

.wordmark__word {
  grid-area: 1 / 1;
}

.wordmark__word--velari {
  clip-path: inset(0 calc(100% - var(--word-split)) 0 0);
}

.wordmark__word--antero {
  clip-path: inset(0 0 0 var(--word-split));
}

.wordmark__word img {
  width: 100%;
  height: auto;
}

/* ---- Footer ---------------------------------------------------------- */
.footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--padding-lg);
  background: var(--color-background-subtle);
}

.footer__wordmark {
  width: 100%;
  height: auto;
}

.footer__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
}

/* ---- Móvil (diseño de 390 px) ---------------------------------------- */
@media (max-width: 767px) {
  .display-xl {
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -0.015em;
  }
  .display-l {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.015em;
  }
  .display-m {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.01em;
  }
  .headline-s {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.0025em;
  }
  /* Los nombres del equipo se quedan en 24/32 en móvil */
  .member__caption .headline-s {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.005em;
  }

  /* Mobile/Display/L del Figma */
  .hero__copy {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.015em;
  }

  .section-title,
  .results__title {
    border-bottom: 0;
  }

  .intro,
  .split,
  .process__grid,
  .team__grid {
    display: flex;
    flex-direction: column;
  }

  .intro {
    min-height: 0;
  }

  .intro__title,
  .split__aside {
    border-right: 0;
  }

  .split__aside {
    border-bottom: 1px solid var(--split-border, var(--color-border-strong));
  }

  /* Proceso: una columna en orden 1, 2, 3 */
  .process__intro,
  .step,
  .process__note {
    border-right: 0;
    border-bottom: 0;
  }

  .process__intro {
    border-bottom: 1px solid var(--color-border-strong);
  }

  .step,
  .process__note {
    height: 320px;
  }

  .step--3 {
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .client {
    height: auto;
  }

  /* Equipo: Rafa se queda arriba y la foto de Jerry pasa por encima */
  .team__intro,
  .member--rafa {
    border-right: 0;
  }

  .member--rafa {
    align-self: stretch;
  }

  .member--jerry {
    z-index: 1;
  }
}

/* ---- Animaciones de entrada (ver reveal.js, con GSAP) --------------- */
/* Máscara para que los logotipos grandes suban "desde detrás" de una línea */
.js-reveal .hero__wordmark,
.js-reveal .footer__mark {
  overflow: hidden;
}

/* Estado inicial: escondidos hasta que GSAP los anima */
.js-reveal .wordmark img,
.js-reveal .hero__copy,
.js-reveal .hero__more,
.js-reveal .reveal {
  visibility: hidden;
}