/* =========================================================================
   VIME — Landing
   Solo layout y composición. Tokens y componentes base: ds/colors_and_type.css
   ========================================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { text-wrap: pretty; }

/* Modo hueso: los tokens semánticos cambian de valor dentro de .light */
.light {
  --bg-1: var(--light-bg-1);
  --bg-2: var(--light-bg-2);
  --fg-1: var(--light-fg-1);
  --fg-2: var(--light-fg-2);
  --fg-3: var(--light-fg-2);
  --line-1: var(--light-line-1);
  --line-2: var(--n-200);
  --accent-text: var(--accent-active);
}
:root { --accent-text: var(--accent); --gutter: var(--sp-8); --nav-h: 88px; }

.skip { position: absolute; left: var(--sp-4); top: -80px; z-index: 20; padding: var(--sp-3) var(--sp-4); background: var(--c-hueso); color: var(--c-carbon); border: 0; }
.skip:focus { top: var(--sp-4); }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sp-9) 0; border-top: 1px solid var(--line-1); }
.section__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; margin-bottom: var(--sp-8); }
.section__head .label { margin-bottom: var(--sp-5); }
.lead { font-size: 20px; line-height: 1.5; color: var(--fg-2); max-width: 60ch; margin: 0; }
a.plain, .nav a, .footer a { border-bottom: 0; }

/* ------------------------------- Navegación ------------------------------ */
.nav { position: sticky; top: 0; z-index: 10; background: var(--bg-1); border-bottom: 1px solid var(--line-1); }
.nav__in { display: flex; justify-content: space-between; align-items: center; height: var(--nav-h); }
.nav__logo { display: inline-flex; align-items: center; height: 44px; }
.nav__logo img { width: 90px; height: 28px; }
.nav__links { display: flex; align-items: center; gap: var(--sp-6); font-size: 15px; font-weight: 500; }
.nav__links a:not(.btn) { display: inline-flex; align-items: center; height: 44px; }
.nav__toggle { display: none; height: 44px; padding: 0 var(--sp-4); background: transparent; color: var(--fg-1); border: 1px solid var(--line-2); border-radius: var(--r-0); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; cursor: pointer; }
.nav__toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------- Hero --------------------------------- */
.hero { padding: var(--sp-9) 0 var(--sp-9); min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; }
.hero::before, .hero::after, .hero > .mark-b::before, .hero > .mark-b::after { margin: var(--sp-3); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: end; }
.hero__title { font-size: clamp(56px, 8vw, 112px); font-weight: 600; letter-spacing: -0.045em; line-height: 0.92; margin: var(--sp-6) 0 0; }
.hero__lead { font-size: 22px; line-height: 1.45; color: var(--fg-2); margin: 0 0 var(--sp-6); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ------------------------------ Qué hacemos ------------------------------ */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr); align-items: stretch; }
.flow__col { display: flex; flex-direction: column; gap: var(--sp-3); justify-content: space-between; }
.flow__box { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--n-300); font-size: 15px; font-weight: 500; }
.flow__box small { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-2); font-weight: 400; }
.flow__box--out { border-color: var(--accent); border-width: 1px; }
.flow__core { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); padding: var(--sp-5); background: var(--c-carbon); color: var(--c-hueso); }
.flow__core img { width: 96px; height: 30px; }
.flow__core p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-gris); }
.flow__link { position: relative; }
.flow__link::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--n-300); }
.flow__link::after { content: ''; position: absolute; top: 50%; left: 50%; width: var(--node); height: var(--node); margin: -3px 0 0 -3px; background: var(--fg-1); }
.flow__link i { position: absolute; top: 28px; bottom: 28px; width: 1px; background: var(--n-300); }
.flow__link--in i { left: 0; }
.flow__link--out i { right: 0; }

.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-1); border: 1px solid var(--line-1); margin-top: var(--sp-8); }
.module { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); background: var(--bg-1); }
.module h3 { font-size: 20px; }
.module p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); }

/* --------------------------------- Método -------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.step { display: flex; flex-direction: column; }
.step__bar { height: 96px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--fg-1); }
.step__bar span { width: 100%; }
.step:nth-child(1) .step__bar span { height: 24px; background: var(--n-200); }
.step:nth-child(2) .step__bar span { height: 48px; background: var(--n-300); }
.step:nth-child(3) .step__bar span { height: 72px; background: var(--n-400); }
.step:nth-child(4) .step__bar span { height: 96px; background: var(--accent); }
.step__body { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-5); }
.step:nth-child(4) .label { color: var(--accent-text); }
.step h3 { font-size: 22px; }
.step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.step dl { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line-1); }
.step dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-2); margin-bottom: var(--sp-1); }
.step dd { margin: 0; font-size: 14px; line-height: 1.5; }

/* ---------------------------------- Casos -------------------------------- */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.case { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-8); min-height: 320px; padding: var(--sp-6); border: 1px solid var(--line-1); }
.case h3 { margin-top: var(--sp-4); }
.case__result { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line-1); }
.case__figure { font-size: 32px; font-weight: 600; letter-spacing: var(--ls-h2); line-height: 1.15; }
.case__result p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* ----------------------------------- Labs -------------------------------- */
.labs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
.labs__name { display: flex; align-items: baseline; gap: var(--sp-3); font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.04em; line-height: 1; }
.labs__name b { font-weight: 600; }
.labs__name span { font-weight: 400; letter-spacing: -0.02em; color: var(--fg-2); }
.labs__list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.labs__list li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-4) 0; border-top: 1px solid var(--line-1); font-size: 15px; line-height: 1.5; }
.labs__list li:last-child { border-bottom: 1px solid var(--line-1); }

/* --------------------------------- Contacto ------------------------------ */
.contact { padding: var(--sp-9) 0; border-top: 1px solid var(--line-1); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: end; }
.contact__title { font-size: clamp(40px, 6vw, 80px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; margin: var(--sp-5) 0 var(--sp-6); }
.contact__data { margin: 0; }
.contact__data div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; padding: var(--sp-4) 0; border-top: 1px solid var(--line-1); }
.contact__data div:last-child { border-bottom: 1px solid var(--line-1); }
.contact__data dd { margin: 0; font-size: 17px; }

/* ---------------------------------- Footer ------------------------------- */
.footer { padding: var(--sp-7) 0; border-top: 1px solid var(--line-1); }
.footer__in { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); flex-wrap: wrap; }
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__brand img { width: 77px; height: 24px; }
.footer__brand p { margin: 0; font-size: 14px; color: var(--fg-2); }
.footer__links { display: flex; gap: var(--sp-5); font-size: 14px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-2); }
.footer__links a:hover { color: var(--fg-1); }

/* -------------------------------- Movimiento ----------------------------- */
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------- Responsive ----------------------------- */
@media (max-width: 1080px) {
  :root { --gutter: var(--sp-6); }
  .section__head, .hero__grid, .labs, .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .modules, .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-7); }
  .hero { min-height: 0; }
}
@media (max-width: 720px) {
  :root { --gutter: var(--sp-4); --nav-h: 72px; }
  html { scroll-padding-top: 72px; }
  .section, .contact { padding: var(--sp-8) 0; }
  .hero { padding: var(--sp-9) 0; }
  .nav__toggle { display: inline-flex; align-items: center; }
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: var(--nav-h); flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-2) var(--gutter) var(--sp-5); background: var(--bg-1); border-bottom: 1px solid var(--line-1); }
  .nav__links.is-open { display: flex; }
  .nav__links a:not(.btn) { height: 52px; border-bottom: 1px solid var(--line-1); }
  .nav__links .btn { margin-top: var(--sp-4); }
  .hero__lead { font-size: 19px; }
  .lead { font-size: 18px; }
  .modules, .cases, .steps { grid-template-columns: minmax(0, 1fr); }
  .step__bar { height: auto; border-bottom: 0; }
  .step__bar span { height: 5px !important; }
  .case { min-height: 0; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__link { height: 40px; }
  .flow__link::before { top: 0; bottom: 0; left: 50%; right: auto; width: 1px; height: auto; }
  .flow__link i { display: none; }
  .labs__list li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .actions .btn { flex: 1 1 100%; }
  .footer__in { align-items: flex-start; flex-direction: column; }
  .footer__links { flex-wrap: wrap; gap: 0 var(--sp-5); }
}

/* ------------------- Movimiento: el diagrama se dibuja ------------------- */
/* Un solo gesto: entradas, linea, VIME, linea, resultados. El naranja llega al final. */
.js .reveal--draw { opacity: 1; transform: none; }
.js .reveal--draw .flow__box,
.js .reveal--draw .flow__core,
.js .reveal--draw .step { opacity: 0; transform: translateY(8px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js .reveal--draw .flow__link::before { transform: scaleX(0); transform-origin: left center; transition: transform 320ms var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js .reveal--draw .flow__link i { transform: scaleY(0); transform-origin: center; transition: transform 320ms var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js .reveal--draw .flow__link::after { opacity: 0; transition: opacity var(--t-fast) var(--ease); transition-delay: calc((var(--d, 0) + 160) * 1ms); }

.js .reveal--draw.is-in .flow__box,
.js .reveal--draw.is-in .flow__core,
.js .reveal--draw.is-in .step { opacity: 1; transform: none; }
.js .reveal--draw.is-in .flow__link::before,
.js .reveal--draw.is-in .flow__link i { transform: none; }
.js .reveal--draw.is-in .flow__link::after { opacity: 1; }

.flow__col:first-child .flow__box:nth-child(1) { --d: 0; }
.flow__col:first-child .flow__box:nth-child(2) { --d: 80; }
.flow__col:first-child .flow__box:nth-child(3) { --d: 160; }
.flow__col:first-child .flow__box:nth-child(4) { --d: 240; }
.flow__link--in { --d: 400; }
.flow__core { --d: 720; }
.flow__link--out { --d: 920; }
.flow__col:last-child .flow__box:nth-child(1) { --d: 1240; }
.flow__col:last-child .flow__box:nth-child(2) { --d: 1320; }
.flow__col:last-child .flow__box:nth-child(3) { --d: 1480; }
.step:nth-child(1) { --d: 0; }
.step:nth-child(2) { --d: 120; }
.step:nth-child(3) { --d: 240; }
.step:nth-child(4) { --d: 400; }

@media (max-width: 720px) {
  .js .reveal--draw .flow__link::before { transform: scaleY(0); transform-origin: center top; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal--draw .flow__box, .js .reveal--draw .flow__core, .js .reveal--draw .step,
  .js .reveal--draw .flow__link::before, .js .reveal--draw .flow__link i, .js .reveal--draw .flow__link::after { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------- Pagina 404 ------------------------------ */
.notfound { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; padding: var(--sp-9) 0; }
.notfound h1 { font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.04em; line-height: 0.95; margin: var(--sp-5) 0 var(--sp-6); }
.notfound .nav__links { display: flex; position: static; flex-direction: row; padding: 0; border: 0; }