:root {
  --black: #000000;
  --ink: #111113;
  --gray-70: #727276;
  --gray-30: #C4C5CA;
  --gray-soft: #E9EAEE;
  --green-dark: #26442D;
  --green-med: #6F956F;
  --white: #ffffff;
  --off-white: #f6f6f4;

  --ff: "Mulish", system-ui, sans-serif;
  --max: 1280px;
  --gutter: clamp(16px, 3vw, 48px);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Animation system (data-animate) ---------- */
[data-animate] {
  opacity: 0;
  transition:
    opacity 1.4s var(--ease),
    transform 1.4s var(--ease),
    clip-path 1.6s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-animate].in-view {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
}

/* Variantes de entrada */
[data-animate="up"]      { transform: translateY(14px); }
[data-animate="up-sm"]   { transform: translateY(10px); }
[data-animate="up-xs"]   { transform: translateY(6px); }
[data-animate="left"]    { transform: translateX(-14px); }
[data-animate="right"]   { transform: translateX(14px); }
[data-animate="scale"]   { transform: scale(.96); }
[data-animate="fade"]    { /* solo opacity */ }
[data-animate="tile-l"]  { transform: scaleX(.94); transform-origin: left; }
[data-animate="tile-r"]  { transform: scaleX(.94); transform-origin: right; }
[data-animate="sep"]     { transform: scaleX(0); transform-origin: left; opacity: 1; }
[data-animate="sep"].in-view { transform: scaleX(1); }

/* Image wipes (clip-path sobre el hijo para no engañar al IntersectionObserver) */
[data-animate="wipe-ltr"],
[data-animate="wipe-rtl"] { opacity: 1; }
[data-animate="wipe-ltr"] .ph-image { clip-path: inset(0 0 0 100%); transition: clip-path 1.8s var(--ease) var(--d, 0s); }
[data-animate="wipe-rtl"] .ph-image { clip-path: inset(0 100% 0 0); transition: clip-path 1.7s var(--ease) var(--d, 0s); }
[data-animate="wipe-ltr"].in-view .ph-image,
[data-animate="wipe-rtl"].in-view .ph-image { clip-path: inset(0); }

/* Progress bar segs (scaleX desde left) */
[data-animate="bar"] { opacity: 1; }
[data-animate="bar"] .seg {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease);
}
[data-animate="bar"] .seg.dark  { transition-delay: 0s; }
[data-animate="bar"] .seg.light { transition-delay: .25s; }
[data-animate="bar"].in-view .seg { transform: scaleX(1); }

/* Ken Burns — zoom único muy lento al entrar en viewport */
.kb-zoom {
  transform: scale(1);
  transition: transform 18s ease-in-out;
  will-change: transform;
}
.kb-zoom.in-view { transform: scale(1.06); }

/* AJ hover micro-detalle (sutil pulso de la barra) */
.aj .aj-bar { transition: transform .3s var(--ease); transform-origin: center; }
.site-logo:hover .aj-bar,
footer .right-col .aj:hover .aj-bar { transform: scaleY(1.1); }

/* Reduced motion — desactiva todo, deja estado final */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-animate], [data-animate="bar"] .seg, .kb-zoom {
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0) !important;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 300;
  letter-spacing: 0.01em;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px clamp(20px, 3vw, 40px);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

/* Site logo (A|J) — visible solo en mobile */
.site-logo {
  display: none;
  text-decoration: none;
  align-items: center;
  color: inherit;
}
.site-logo .aj { --aj-size: 32px; --aj-color: var(--ink); }
.site-header.on-dark .site-logo .aj { --aj-color: var(--white); }

/* Hamburger (3 líneas → X) */
.hamburger {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  background: transparent;
  border: 0;
  padding: 0 4px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin-left: auto;
}
.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transform-origin: center;
  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    width .45s cubic-bezier(.22,1,.36,1),
    opacity .25s ease,
    background-color .25s ease;
}
.hamburger span:nth-child(1) { width: 28px; }
.hamburger span:nth-child(2) { width: 20px; }
.hamburger span:nth-child(3) { width: 28px; }
.hamburger:hover span:nth-child(1) { width: 20px; }
.hamburger:hover span:nth-child(2) { width: 28px; }
.hamburger.on-dark span { background: var(--white); }
.hamburger.is-open span { background: var(--white); }
.hamburger.is-open span:nth-child(1) {
  width: 28px;
  transform: translateY(8.5px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: translateX(12px);
}
.hamburger.is-open span:nth-child(3) {
  width: 28px;
  transform: translateY(-8.5px) rotate(-45deg);
}

/* Nav overlay (fullscreen) */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  clip-path: circle(0% at calc(100% - 42px) 42px);
  transition:
    opacity .5s cubic-bezier(.22,1,.36,1),
    clip-path .7s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .7s;
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  clip-path: circle(160% at calc(100% - 42px) 42px);
  transition:
    opacity .5s cubic-bezier(.22,1,.36,1),
    clip-path .8s cubic-bezier(.22,1,.36,1),
    visibility 0s;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.4vh, 38px);
  text-align: center;
}
.nav-list a {
  font-family: var(--ff);
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding: 6px 4px;
  transition: letter-spacing .45s cubic-bezier(.22,1,.36,1);
}
.nav-list a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 1px;
  background: var(--green-med);
  transition: left .35s cubic-bezier(.22,1,.36,1), right .35s cubic-bezier(.22,1,.36,1), background-color .25s;
}
.nav-list a:hover { letter-spacing: 0.24em; }
.nav-list a:hover::after {
  left: 8%;
  right: 8%;
  background: var(--white);
}
.nav-list li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.nav-overlay.is-open .nav-list li { opacity: 1; transform: translateY(0); }
.nav-overlay.is-open .nav-list li:nth-child(1) { transition-delay: .25s; }
.nav-overlay.is-open .nav-list li:nth-child(2) { transition-delay: .32s; }
.nav-overlay.is-open .nav-list li:nth-child(3) { transition-delay: .39s; }
.nav-overlay.is-open .nav-list li:nth-child(4) { transition-delay: .46s; }

body.nav-locked { overflow: hidden; }

/* ---------- Monogram A | J ---------- */
.aj {
  --aj-size: 56px;
  --aj-color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--aj-size) * 0.18);
  color: var(--aj-color);
  font-family: var(--ff);
  font-weight: 300;
  font-size: var(--aj-size);
  line-height: 1;
  letter-spacing: 0;
  user-select: none;
}
.aj .aj-letter {
  display: inline-block;
  padding-top: calc(var(--aj-size) * 0.02);
}
.aj .aj-bar {
  width: 1.2px;
  height: calc(var(--aj-size) * 1.05);
  background: currentColor;
}

/* ---------- Vertical wordmark ---------- */
.vertical-wordmark {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 0;
  font-family: var(--ff);
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: clamp(20px, 2vw, 26px);
  color: #fff;
  mix-blend-mode: difference;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: center center;
  transition: transform 1.2s var(--ease);
  will-change: transform;
}
.vertical-wordmark.is-scrolled { transform: translateY(-18%) scale(0.7); }
.vertical-wordmark > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1.3s var(--ease),
    transform 1.3s var(--ease);
}
.vertical-wordmark.is-loaded > * {
  opacity: 1;
  transform: translateY(0);
}
/* flex-direction es column-reverse, así que el orden visual (de arriba a abajo)
   es: ABOGADOS, JARAMILLO, |, ASTE. Escalonamos la entrada en ese orden. */
.vertical-wordmark .vm-sub            { transition-delay: .35s; }
.vertical-wordmark .vm-word:nth-of-type(2) { transition-delay: .55s; } /* JARAMILLO */
.vertical-wordmark .vm-pipe           { transition-delay: .75s; }
.vertical-wordmark .vm-word:nth-of-type(1) { transition-delay: .95s; } /* ASTE */
.vertical-wordmark.is-loaded .vm-word {
  transform: translateY(0) rotate(180deg);
}
.vertical-wordmark .vm-word {
  writing-mode: vertical-rl;
  transform: translateY(22px) rotate(180deg);
}
.vertical-wordmark .vm-pipe {
  width: 14px;
  height: 1.6px;
  background: currentColor;
}
.vertical-wordmark .vm-sub {
  writing-mode: vertical-rl;
  transform: translateY(22px) rotate(180deg);
  font-size: 0.42em;
  letter-spacing: 0.5em;
  font-weight: 700;
  margin-bottom: 6px;
}
.vertical-wordmark.is-loaded .vm-sub {
  transform: translateY(0) rotate(180deg);
}

/* ---------- Layout helpers ---------- */
.section { position: relative; }

/* ---------- Progress bar (shared) ---------- */
.progress-bar .seg { flex: 1; height: 100%; }
.progress-bar .seg.dark { background: var(--green-dark); }
.progress-bar .seg.light { background: var(--green-med); }

.quote {
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 280px;
  font-style: normal;
  letter-spacing: 0.01em;
}

/* ---------- Hero slider (hero ↔ band-green transition) ---------- */
.hero-slider {
  --progress: 0;      /* 0 → 1 mapeo lineal del scroll dentro del track   */
  --p-image: 0;       /* fase 1: imagen se desliza   (0 → 0.30)           */
  --p-bg: 0;          /* fase 2: bg verde + textos   (0.30 → 0.60)        */
  --p-bar-dark: 0;    /* fase 3a: segmento oscuro    (0.60 → 0.72)        */
  --p-bar-light: 0;   /* fase 3b: segmento claro     (0.67 → 0.80)        */
                      /* hold (0.80 → 1.00): estado estable antes de liberar */
  --transition-distance: 120vh; /* scroll total: fases + hold final */
  --gutter-left: 90px;           /* coincide con el wordmark vertical */
  position: relative;
}
.hero-slider .slider-track {
  position: relative;
  height: calc(100vh + var(--transition-distance));
}
.hero-slider .slider-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--white);      /* fondo base slide 1 */
}

/* Bg verde — fijo en la mitad izquierda, crece con scaleX una vez la imagen terminó */
.hero-slider .stage-green {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gutter-left);
  width: calc((100% - var(--gutter-left)) / 2);
  background: var(--green-med);
  transform: scaleX(var(--p-bg));
  transform-origin: left center;
  z-index: 1;
  will-change: transform;
}

/* Bloques de texto estáticos en su mitad correspondiente */
.hero-slider .stage-text {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vw, 52px);
  padding: 0 clamp(32px, 5vw, 80px);
  z-index: 2;
  will-change: transform, opacity;
}

/* Texto hero: mitad derecha. Se desvanece hacia la izquierda después de la imagen */
.hero-slider .text-hero {
  left: calc(var(--gutter-left) + (100% - var(--gutter-left)) / 2);
  right: 0;
  align-items: flex-end;
  text-align: right;
  color: var(--ink);
  opacity: calc(1 - var(--p-bg));
  transform: translateX(calc(var(--p-bg) * -48px));
}
.hero-slider .text-hero .quote {
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 280px;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Texto verde: mitad izquierda. Entra deslizándose desde la derecha tras la imagen */
.hero-slider .text-green {
  left: var(--gutter-left);
  width: calc((100% - var(--gutter-left)) / 2);
  align-items: center;
  text-align: center;
  color: var(--white);
  opacity: var(--p-bg);
  transform: translateX(calc((1 - var(--p-bg)) * 48px));
}
.hero-slider .text-green .quote {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--white);
  max-width: 340px;
}
.hero-slider .text-green .aj { --aj-color: var(--white); }

/* Imagen: mitad izquierda al inicio, termina de deslizarse al 50% del scroll */
.hero-slider .panel-image {
  position: absolute;
  top: 0;
  height: 100%;
  left: var(--gutter-left);
  width: calc((100% - var(--gutter-left)) / 2);
  background: #0a0a0a;
  overflow: hidden;
  z-index: 3;
  transform: translate3d(calc(var(--p-image) * 100%), 0, 0);
  will-change: transform;
}

/* Progress bar: anclada al pie de la mitad derecha (donde termina la imagen) */
.hero-slider .progress-bar {
  position: absolute;
  left: calc(var(--gutter-left) + (100% - var(--gutter-left)) / 2);
  right: 0;
  bottom: 0;
  height: 14px;
  display: flex;
  z-index: 4;
  pointer-events: none;
}
/* Fase 3: las segs entran con scaleX L→R; dark primero, light con stagger */
.hero-slider .progress-bar .seg {
  transform-origin: left center;
  will-change: transform;
}
.hero-slider .progress-bar .seg.dark  { transform: scaleX(var(--p-bar-dark)); }
.hero-slider .progress-bar .seg.light { transform: scaleX(var(--p-bar-light)); }

/* Mobile-only: segunda imagen (oculta en desktop) */
.hero-slider .panel-image-mobile-2 { display: none; }

/* Reduced motion: estado slide 1 estable */
@media (prefers-reduced-motion: reduce) {
  .hero-slider .panel-image,
  .hero-slider .stage-text,
  .hero-slider .stage-green { transform: none !important; }
  .hero-slider .text-hero { opacity: 1 !important; }
  .hero-slider .text-green,
  .hero-slider .stage-green { opacity: 0 !important; }
}

/* ---------- Asesoría slider (asesoria-wrap ↔ aj-band transition) ---------- */
.asesoria-slider {
  --progress: 0;
  --p-entry: 0;        /* fase 1: barras verdes descienden desde el top (0 → 0.12) */
  --p-reveal: 0;       /* fase 2: barras verdes se retraen a 14px en bottom (0.12 → 0.22) */
  --p-swap: 0;         /* fase 3: slides cruzan (gris→izq, negro→der) + swap a negro+blanco (0.35 → 0.60) */
  --p-tiles-g: 0;      /* fase 4: entry-bars sube de bottom a top creando los 2 cuadrados verdes (0.65 → 0.82) */
  --p-tiles-y: 0;      /* fase 5: tiles grises crecen top→bottom en la mitad inferior (0.82 → 1.00) */
  --transition-distance: 250vh;
  --gutter-left: 90px;
  --half-w: calc((100% - var(--gutter-left)) / 2);
  --half-left: var(--gutter-left);
  --half-right: calc(var(--gutter-left) + var(--half-w));
  position: relative;
}
.asesoria-slider .slider-track {
  position: relative;
  height: calc(100vh + var(--transition-distance));
}
.asesoria-slider .slider-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--white);
}

/* ===== Slide izquierda (negra con texto) — se desliza a la derecha durante swap =====
   Movimiento en p-swap 0 → 0.7; el resto (0.7 → 1.0) es hold en su posición final. */
.asesoria-slider .slide-l {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--half-left);
  width: var(--half-w);
  background: var(--black);
  transform: translateX(calc(clamp(0, calc(var(--p-swap) / 0.7), 1) * 100%));
  will-change: transform;
  z-index: 3;
}
.asesoria-slider .slide-l .text-block {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: clamp(60px, 8vw, 120px) clamp(32px, 5vw, 90px);
  opacity: clamp(0, calc(1 - var(--p-swap) / 0.7), 1);
  transform: translateY(calc(clamp(0, calc(var(--p-swap) / 0.7), 1) * -20px));
}
.asesoria-slider .slide-l .text-block > * { max-width: 340px; }
.asesoria-slider .slide-l .text-block h2 {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: #fff;
}
.asesoria-slider .slide-l .text-block p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--gray-30);
}

/* ===== Slide derecha (gris con A|J oscuro) — se desliza a la izquierda SIN fade durante el movimiento =====
   Movimiento (translateX) ocurre en p-swap 0 → 0.7 con el bloque gris intacto (bg gris + A|J oscuro visible).
   Transformación gris→negro + A|J blanco ocurre después del movimiento, en p-swap 0.7 → 1.0. */
.asesoria-slider .slide-r {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--half-right);
  width: var(--half-w);
  background: var(--gray-30);
  transform: translateX(calc(clamp(0, calc(var(--p-swap) / 0.7), 1) * -100%));
  will-change: transform;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Overlay negro: fade-in al terminar el movimiento (p-swap 0.7 → 1.0) */
.asesoria-slider .slide-r::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: clamp(0, calc((var(--p-swap) - 0.7) / 0.3), 1);
  pointer-events: none;
  z-index: 0;
}
.asesoria-slider .slide-r .aj {
  position: absolute;
  z-index: 1;
}
/* A|J oscuro: 100% visible durante todo el movimiento; solo fade-out después (0.7 → 1.0) */
.asesoria-slider .slide-r .aj-dark {
  --aj-size: 160px;
  --aj-color: var(--ink);
  opacity: clamp(0, calc(1 - (var(--p-swap) - 0.7) / 0.3), 1);
}
.asesoria-slider .slide-r .aj-white {
  --aj-size: 180px;
  --aj-color: #fff;
  opacity: clamp(0, calc((var(--p-swap) - 0.7) / 0.3), 1);
}

/* ===== Entry bars =====
   Fase 1 (entry): descienden del top ocupando toda la mitad derecha.
   Fase 2 (reveal): se retraen a 14px anclados al bottom.
   Fase 4 (tiles-g): suben y ocupan solo la mitad superior (top: 0, bottom: 50%)
   para que los labels queden centrados en su cuadrante final. */
.asesoria-slider .entry-bars {
  position: absolute;
  left: var(--half-right);
  right: 0;
  top: calc(var(--p-reveal) * (100% - 14px) * (1 - var(--p-tiles-g)));
  bottom: calc((1 - var(--p-entry)) * 100% + var(--p-tiles-g) * 50%);
  display: flex;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.asesoria-slider .entry-bars .bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--white);
}
.asesoria-slider .entry-bars .bar.dark  { background: var(--green-dark); }
.asesoria-slider .entry-bars .bar.light { background: var(--green-med); }
.asesoria-slider .entry-bars .bar .label {
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.45;
  opacity: var(--p-tiles-g);
}

/* ===== Gray tiles (c3, c4) — mitad inferior derecha; crecen de abajo hacia arriba con scaleY en fase 5 ===== */
.asesoria-slider .gray-tiles {
  position: absolute;
  left: var(--half-right);
  right: 0;
  top: 50%;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 5; /* sobre slide-l y entry-bars para cubrir la mitad inferior al final */
}
.asesoria-slider .gray-tiles .tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
  transform: scaleY(var(--p-tiles-y));
  transform-origin: bottom center;
  will-change: transform;
}
.asesoria-slider .gray-tiles .tile.c3 { background: var(--gray-70); color: var(--white); }
.asesoria-slider .gray-tiles .tile.c4 { background: var(--gray-30); color: var(--ink); }
.asesoria-slider .gray-tiles .tile .label {
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.45;
}

/* Reduced motion: mostrar estado final (aj-band) */
@media (prefers-reduced-motion: reduce) {
  .asesoria-slider .slide-l { transform: translateX(100%) !important; }
  .asesoria-slider .slide-l .text-block { opacity: 0 !important; }
  .asesoria-slider .slide-r { transform: translateX(-100%) !important; }
  .asesoria-slider .slide-r::after { opacity: 1 !important; }
  .asesoria-slider .slide-r .aj-dark { opacity: 0 !important; }
  .asesoria-slider .slide-r .aj-white { opacity: 1 !important; }
  .asesoria-slider .entry-bars { top: 0 !important; bottom: 0 !important; }
  .asesoria-slider .entry-bars .bar .label { opacity: 1 !important; }
  .asesoria-slider .gray-tiles .tile { transform: scaleY(1) !important; }
}

/* ---------- Services list + office image ---------- */
.services-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding-left: 90px;
}
.services-row .list {
  background: var(--green-dark);
  color: var(--white);
  padding: 80px 60px 80px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 22px;
}
.services-row .list a {
  text-decoration: none;
  color: var(--white);
  font-size: 17px;
  letter-spacing: 0.22em;
  font-weight: 500;
  text-transform: uppercase;
  transition:
    opacity .7s var(--ease),
    transform .8s var(--ease);
  transition-delay: var(--d, 0s);
  position: relative;
}
.services-row .list a:hover {
  opacity: 0.7;
  transition-delay: 0s;
}

/* TranslateY más pronunciado (28px vs 10px del up-sm base) para un efecto visible */
.services-row .list a[data-animate="up-sm"] { transform: translateY(28px); }
.services-row .list a[data-animate="up-sm"].in-view { transform: none; }

/* Línea de acento horizontal a la izquierda de cada ítem — se desliza scaleX(0→1) */
.services-row .list a::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 18px);
  width: 48px;
  height: 1.5px;
  background: var(--green-med);
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  opacity: 0;
  transition:
    transform .7s var(--ease),
    opacity .5s var(--ease);
  transition-delay: calc(var(--d, 0s) + .35s);
}
.services-row .list a.in-view::before {
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
}
.services-row .list .sep {
  margin-top: 16px;
  width: 220px;
  height: 1px;
  background: rgba(255,255,255,0.35);
}
.services-row .image-wall {
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 100px clamp(24px, 5vw, 80px) 100px 110px;
  gap: 80px;
  background: var(--white);
}
.contact .title-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding-top: 20px;
}
.contact h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: 0.32em;
  font-weight: 300;
  color: var(--ink);
}
.btn-work {
  margin-top: 20px;
  background-color: var(--green-dark);
  background-image: linear-gradient(#1a2f20, #1a2f20);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  color: var(--white);
  border: 0;
  padding: 16px 32px;
  font-size: 13px;
  letter-spacing: 0.24em;
  font-weight: 500;
  text-transform: uppercase;
  transition: background-size .35s linear;
}
.btn-work:hover { background-size: 100% 100%; }

.form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gray-70);
  font-weight: 500;
  text-transform: uppercase;
}
.field label .req { color: var(--green-med); margin-right: 4px; }
.field input,
.field textarea {
  border: 1px solid var(--gray-30);
  background: var(--white);
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  font-weight: 300;
  transition: border-color .2s;
}
.field input:focus,
.field textarea:focus { border-color: var(--green-dark); }
.field textarea { min-height: 110px; resize: vertical; }
.field.error input,
.field.error textarea { border-color: #b33a3a; }
.form-actions {
  display: flex;
  justify-content: flex-end;
}
.btn-send {
  background-color: transparent;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  border: 1px solid var(--gray-70);
  color: var(--ink);
  padding: 12px 26px;
  font-size: 12px;
  letter-spacing: 0.26em;
  font-weight: 500;
  text-transform: uppercase;
  transition:
    background-size .35s linear,
    color .35s linear,
    border-color .35s linear;
}
.btn-send:hover {
  background-size: 100% 100%;
  color: var(--white);
  border-color: var(--ink);
}
.btn-send:disabled { opacity: 0.5; cursor: not-allowed; }
.form-success {
  padding: 16px;
  background: var(--green-med);
  color: var(--white);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-align: center;
}

/* ---------- Footer ---------- */
footer {
  background: var(--black);
  color: var(--white);
  padding: 64px clamp(24px, 5vw, 80px) 64px 110px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: relative;
}
footer .col h4 {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: 0.28em;
  font-weight: 500;
}
footer .col p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--gray-30);
}
footer .col .email { margin-top: 20px; color: var(--gray-30); }
footer .right-col {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-left: 40px;
  border-left: 1px solid rgba(255,255,255,0.2);
}
footer .right-col .legal {
  font-size: 12px;
  color: var(--gray-30);
  line-height: 1.8;
  font-weight: 300;
}
footer .right-col .aj { --aj-size: 54px; --aj-color: var(--white); }
.footer-stripe {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--green-med);
}

/* ---------- Placeholder images (ahora con imágenes reales) ---------- */
.ph-image {
  position: absolute; inset: 0;
  background-color: #0c0c0e;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ph-containers { background-image: url("img/img-decorativo-1.jpg"); }
.ph-office     { background-image: url("img/img-decorativo-2.jpg"); }

/* ---------- Responsive: tablet ---------- */
@media (max-width: 820px) {
  .vertical-wordmark { width: 64px; font-size: 14px; }
  .services-row, .contact, footer {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
  .services-row .list { padding: 60px 40px; align-items: center; }
  .services-row .image-wall { min-height: 360px; }
  .contact { gap: 40px; padding: 60px 24px; }
  footer { padding: 48px 24px; }
  footer .right-col { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 24px; }

  /* Hero slider: desactivar sticky/transforms, apilar verticalmente */
  .hero-slider { --gutter-left: 0px; }
  .hero-slider .slider-track { height: auto; }
  .hero-slider .slider-stage {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: transparent;
  }
  .hero-slider .stage-green { display: none; }
  .hero-slider .panel-image {
    order: 1;
    position: relative;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 56vh;
    transform: none !important;
  }
  .hero-slider .stage-text {
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
    opacity: 1 !important;
    transform: none !important;
    padding: 72px 24px;
    min-height: auto;
    bottom: auto;
    top: auto;
  }
  .hero-slider .text-hero {
    order: 2;
    background: var(--white);
    align-items: center;
    text-align: center;
  }
  .hero-slider .text-green {
    order: 3;
    background: var(--green-med);
  }
  .hero-slider .text-green .quote { font-size: 16px; }
  .hero-slider .panel-image-mobile-2 {
    order: 4;
    display: block;
    position: relative;
    width: 100%;
    min-height: 320px;
  }
  .hero-slider .panel-image-mobile-2 .ph-image { position: absolute; inset: 0; }
  .hero-slider .progress-bar {
    order: 5;
    position: relative;
    left: auto;
    right: auto;
    height: 10px;
  }
  .hero-slider .progress-bar .seg { transform: scaleX(1) !important; }

  /* Asesoría slider: apilar verticalmente sin sticky */
  .asesoria-slider { --gutter-left: 0px; }
  .asesoria-slider .slider-track { height: auto; }
  .asesoria-slider .slider-stage {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: transparent;
  }

  /* Slide izquierda: bloque estático con texto */
  .asesoria-slider .slide-l {
    position: relative;
    width: 100%;
    height: auto;
    left: auto;
    transform: none !important;
    padding: 56px 24px;
    order: 1;
  }
  .asesoria-slider .slide-l .text-block {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    align-items: center;
    text-align: center;
    padding: 0;
  }
  .asesoria-slider .slide-l .text-block h2 { font-size: 17px; letter-spacing: 0.24em; }

  /* Slide derecha: estado intermedio con A|J — ocultamos en móvil */
  .asesoria-slider .slide-r { display: none; }

  /* Entry bars: fila estática con los 2 cuadrados verdes */
  .asesoria-slider .entry-bars {
    position: relative;
    width: 100%;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: auto;
    overflow: visible;
    order: 2;
  }
  .asesoria-slider .entry-bars .bar {
    min-height: 120px;
    padding: 26px 18px;
  }
  .asesoria-slider .entry-bars .bar .label {
    opacity: 1 !important;
    font-size: 11px;
    letter-spacing: 0.22em;
  }

  /* Gray tiles: fila estática debajo de los verdes */
  .asesoria-slider .gray-tiles {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: auto;
    order: 3;
  }
  .asesoria-slider .gray-tiles .tile {
    transform: none !important;
    min-height: 120px;
    padding: 26px 18px;
  }
  .asesoria-slider .gray-tiles .tile .label { font-size: 11px; letter-spacing: 0.22em; }
}

/* ---------- Responsive: phone ---------- */
@media (max-width: 640px) {
  /* 1. Ocultar el sidebar vertical — se superponía con formularios y texto */
  .vertical-wordmark { display: none; }

  /* 2. Header: padding, logo visible, fondo blanco sólido al scrollear */
  .site-header {
    padding: 16px 20px;
    background: transparent;
    transition: background-color .3s ease, box-shadow .3s ease;
  }
  .site-header.is-scrolled {
    background: var(--white);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06);
  }
  /* Sobre fondo blanco sólido, forzar items oscuros (ignora on-dark) */
  .site-header.is-scrolled .site-logo .aj { --aj-color: var(--ink); }
  .site-header.is-scrolled .hamburger:not(.is-open) span { background: var(--ink); }
  /* Cuando el menú está abierto, el overlay verde debe cubrir también el header */
  body.nav-locked .site-header,
  body.nav-locked .site-header.is-scrolled {
    background: transparent;
    box-shadow: none;
  }
  body.nav-locked .site-logo { visibility: hidden; }
  .site-logo { display: inline-flex; }

  /* 3. Hero slider en móvil — imagen compacta, textos legibles */
  .hero-slider .panel-image { min-height: 56vh; }
  .hero-slider .stage-text { padding: 56px 24px; gap: 28px; }
  .hero-slider .text-hero { padding-top: 88px; }
  .hero-slider .text-hero .quote { font-size: 16px; max-width: 100%; }
  .hero-slider .text-green .quote { font-size: 16px; }
  .hero-slider .panel-image-mobile-2 { min-height: 320px; }
  .hero-slider .progress-bar { height: 10px; }

  /* 5. Asesoría slider — ajustes móvil (resto vive en el media query de 820px) */
  .asesoria-slider .slide-l { padding: 40px 24px; }
  .asesoria-slider .slide-l .text-block h2 { font-size: 17px; letter-spacing: 0.24em; }
  .asesoria-slider .entry-bars .bar,
  .asesoria-slider .gray-tiles .tile { min-height: 100px; padding: 22px 16px; }
  .asesoria-slider .entry-bars .bar .label,
  .asesoria-slider .gray-tiles .tile .label { font-size: 11px; letter-spacing: 0.22em; }

  /* 7. Services — lista centrada, imagen más alta */
  .services-row .list { padding: 56px 24px; gap: 18px; }
  .services-row .list a { font-size: 15px; letter-spacing: 0.2em; }
  .services-row .list .sep { width: 160px; }
  .services-row .image-wall { min-height: 320px; }

  /* 8. Contact — título a la izquierda, botón inline-start */
  .contact { padding: 64px 24px; gap: 28px; }
  .contact .title-col {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    gap: 16px;
    flex-wrap: wrap;
  }
  .contact h2 { font-size: 26px; letter-spacing: 0.28em; }
  .btn-work { margin-top: 0; padding: 14px 22px; font-size: 11px; }
  .field input, .field textarea { font-size: 16px; } /* >=16px evita zoom auto en iOS */

  /* 9. Footer — legal pill chico, A|J más discreto */
  footer { padding: 44px 24px 56px; gap: 28px; }
  footer .right-col .aj { --aj-size: 42px !important; }
  footer .col h4 { font-size: 12px; letter-spacing: 0.24em; }
  footer .col p { font-size: 13px; }
}