/* ==========================================================================
   Bayres Green — styles.css

   Única hoja de estilos del sitio. Paleta: verde natural + crema
   (adaptada de joinspread.app).

   Cada sección de la página tiene su bloque acá abajo, marcado con un
   banner como este. El orden sigue al del HTML: variables y reset →
   compartido → botones → nav → hero → marquee → intro → servicios →
   stats → proceso → galería → clientes → contacto → footer →
   estados de animación → responsive → movimiento reducido.

   Convenciones:
   - Clases con nomenclatura BEM: .bloque, .bloque__elemento, .bloque--variante
   - Colores, fuentes y medidas repetidas viven como variables CSS en :root
   ========================================================================== */

:root {
  --bone: #f7f5f0;          /* fondo base color hueso */
  --bone-2: #efece4;        /* paneles apenas más oscuros */
  --ink: #1e2b1c;           /* verde-carbón (texto) */
  --ink-soft: #46503f;      /* texto secundario */
  --forest: #24361f;        /* bosque profundo (secciones oscuras) */
  --forest-2: #1a2817;      /* bosque aún más oscuro (footer) */
  --green: #6aaf08;         /* verde marca (acento) */
  --green-btn: #4f9406;     /* verde botón, algo más profundo para texto blanco */
  --green-bright: #85d132;  /* acento luminoso sobre fondos oscuros */
  --line: rgba(30, 43, 28, 0.12);        /* bordes finos sobre fondo claro */
  --line-light: rgba(247, 245, 240, 0.16); /* bordes finos sobre fondo oscuro */

  --font-display: "Satoshi", "General Sans", system-ui, sans-serif;
  --font-body: "General Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1240px;                     /* ancho máximo del contenido */
  --pad: clamp(1.25rem, 5vw, 5rem);   /* padding lateral fluido: clamp(mín, preferido, máx) */
  --radius: 20px;                     /* redondeo de tarjetas y paneles */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* curva compartida por las transiciones */
}

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

html { -webkit-font-smoothing: antialiased; }
/* Scroll suave solo con mouse/trackpad. En el celu (pointer: coarse) se
   desactiva: el navegador animaba también los ajustes internos de posición
   de ScrollTrigger y en iOS la página saltaba sola al final cerca del
   formulario de contacto (conflicto documentado por GSAP). */
@media (pointer: fine) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  background: var(--bone);
  color: var(--ink);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
sup { font-size: 0.5em; vertical-align: super; }

/* ---------- Shared ---------- */
.section { padding: clamp(4.5rem, 10vw, 9rem) var(--pad); max-width: var(--maxw); margin-inline: auto; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow--light { color: var(--green-bright); filter: drop-shadow(0 1px 10px rgba(10, 18, 6, 0.6)); }

.section__head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.2rem + 3.5vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 1.1rem 0;
}
.section__lead { color: var(--ink-soft); max-width: 55ch; font-size: 1.1rem; }
.accent-text { color: var(--green); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.9em 1.6em;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  will-change: transform;
}
.btn--solid { background: var(--green-btn); color: #fff; box-shadow: 0 10px 30px -12px rgba(79, 148, 6, 0.6); }
.btn--solid:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -14px rgba(79, 148, 6, 0.85); }
.btn--ghost { color: var(--ink); border-color: var(--line); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--bone); transform: translateY(-3px); }
.btn--pill { background: var(--ink); color: var(--bone); padding: 0.7em 1.35em; font-size: 0.9rem; }
.btn--pill:hover { background: var(--green-btn); color: #fff; }
.btn--block { width: 100%; }
.btn--wa { margin-top: 0.5rem; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  padding: 1rem var(--pad);
  transition: padding 0.4s var(--ease);
}
.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.6rem 0.5rem 0.9rem;
  border-radius: 100px;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.nav.is-scrolled .nav__inner {
  background: rgba(247, 245, 240, 0.65);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px -18px rgba(30, 43, 28, 0.5);
  border: 1px solid var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--bone); transition: color 0.4s var(--ease); }
.nav__logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.nav__links { display: flex; gap: 1.7rem; font-size: 0.92rem; font-weight: 500; }
.nav__links a { position: relative; color: rgba(247, 245, 240, 0.85); transition: color 0.25s; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1.5px; background: var(--green-bright); transition: width 0.3s var(--ease); }
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { width: 100%; }
/* sobre la foto del hero: texto claro + sombra suave para legibilidad */
.nav:not(.is-scrolled) .nav__brand,
.nav:not(.is-scrolled) .nav__links { text-shadow: 0 1px 12px rgba(10, 18, 6, 0.4); }
/* sobre la barra clara (ya scrolleada): volver al texto oscuro */
.nav.is-scrolled .nav__brand { color: var(--ink); }
.nav.is-scrolled .nav__links a { color: var(--ink-soft); }
.nav.is-scrolled .nav__links a:hover { color: var(--ink); }
.nav.is-scrolled .nav__links a::after { background: var(--green); }

/* ---- mobile toggle + panel (hidden on desktop, see RESPONSIVE) ---- */
.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--bone);
  filter: drop-shadow(0 1px 8px rgba(10, 18, 6, 0.4));
}
.nav__toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); }
.nav.is-scrolled .nav__toggle { color: var(--ink); filter: none; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: var(--pad);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  color: var(--bone);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 120%;
  object-fit: cover;
  /* ancla el zoom abajo para priorizar la pileta/deck y recortar el cielo gris de la foto */
  transform-origin: 50% 100%;
  transform: scale(1.35);
  /* realce sutil, verdes vivos */
  filter: saturate(1.12) contrast(1.05) brightness(0.92);
  will-change: transform;
}
/* Video de fondo del hero — existe solo en móvil: main.js lo inyecta sobre la
   foto (que hace de "poster" mientras descarga) y le agrega .is-playing al
   arrancar, disparando el fade. La escala 1.15 (menor que el 1.35 de la foto,
   el video ya es vertical) deja margen arriba para el parallax, igual que la
   foto: 120% de alto + escala anclada abajo. */
.hero__video {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 120%;
  object-fit: cover;
  transform-origin: 50% 100%;
  transform: scale(1.15);
  filter: saturate(1.12) contrast(1.05) brightness(0.92);
  will-change: transform;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero__video.is-playing { opacity: 1; }
/* overlay verde -> transparente para legibilidad, sin lavar el color */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,35,15,0.35) 0%, rgba(20,35,15,0) 30%, rgba(20,35,15,0.25) 55%, rgba(16,26,12,0.9) 100%),
    linear-gradient(90deg, rgba(16,26,12,0.55) 0%, rgba(16,26,12,0) 60%);
}
.hero__content { position: relative; z-index: 2; max-width: 900px; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.9rem, 1.5rem + 6.4vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 1.3rem 0 1.6rem;
}
/* padding + margen negativo: lugar para los trazos descendentes (g, p, j, y)
   que el line-height ajustado recortaría contra el overflow:hidden */
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero__title .line--accent { color: var(--green-bright); }
.hero__sub { max-width: 46ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: rgba(247,245,240,0.86); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.hero__actions .btn--ghost { color: var(--bone); border-color: rgba(247,245,240,0.4); }
.hero__actions .btn--ghost:hover { background: var(--bone); color: var(--ink); }
.hero__scroll {
  position: absolute; z-index: 2; right: var(--pad); bottom: clamp(3rem, 8vw, 6rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(247,245,240,0.7);
}
.hero__scroll span { width: 1px; height: 46px; background: rgba(247,245,240,0.5); position: relative; overflow: hidden; }
.hero__scroll span::after { content: ""; position: absolute; inset: 0; background: var(--green-bright); transform: translateY(-100%); animation: scrollcue 2s var(--ease) infinite; }
@keyframes scrollcue { 0% { transform: translateY(-100%);} 50%{transform: translateY(0);} 100%{transform: translateY(100%);} }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  background: var(--forest);
  color: var(--bone);
  padding: 1.15rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track { display: inline-flex; will-change: transform; }
.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  padding-right: 1rem;
}

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro { text-align: left; padding-top: clamp(5rem, 11vw, 10rem); padding-bottom: clamp(5rem, 11vw, 10rem); }
.intro__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 1rem + 3.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 20ch;
  margin: 1.5rem 0 2rem;
}
.intro__body { max-width: 58ch; color: var(--ink-soft); font-size: 1.15rem; }

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.service-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  color: var(--bone);
  isolation: isolate;
}
.service-card__media { position: absolute; inset: 0; z-index: -2; }
.service-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.04);
  transition: transform 0.9s var(--ease);
}
.service-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,26,12,0) 30%, rgba(16,26,12,0.55) 62%, rgba(12,20,8,0.94) 100%);
  transition: background 0.5s var(--ease);
}
.service-card:hover .service-card__media img { transform: scale(1.07); }
.service-card__body { position: relative; padding: 1.6rem; }
.service-card__num { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.15em; color: var(--green-bright); }
.service-card__body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0.5rem 0 0.4rem; }
.service-card__body p { font-size: 0.98rem; color: rgba(247,245,240,0.82); max-width: 34ch; }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stat { background: var(--bone); padding: clamp(1.8rem, 4vw, 3rem) 1.4rem; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--green);
  display: block;
}
.stat__num--text { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); color: var(--ink); }
.stat__label { display: block; margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.95rem; }

/* ==========================================================================
   PROCESO
   ========================================================================== */
.proceso { background: var(--forest); color: var(--bone); max-width: none; }
.proceso > * { max-width: var(--maxw); margin-inline: auto; }
.proceso .eyebrow { color: var(--green-bright); }
.proceso .section__title { color: var(--bone); }
.proceso__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  counter-reset: step;
}
.proceso__step { border-top: 1px solid var(--line-light); padding-top: 1.4rem; }
.proceso__num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--green-bright); letter-spacing: 0.1em; }
.proceso__step h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 1.2rem 0 0.6rem; letter-spacing: -0.02em; }
.proceso__step p { color: rgba(247,245,240,0.74); font-size: 1rem; }

/* ==========================================================================
   GALERÍA
   ========================================================================== */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.gallery__item {
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 1;
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.03);
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
.gallery__item:hover img { transform: scale(1.08); filter: saturate(1.2) contrast(1.06); }
/* Ritmo editorial: 1 destacado 2×2, 1 alto y 3 anchos — las 14 fotos llenan
   7 filas exactas. El destacado conserva aspect-ratio 1 y define la altura de
   las filas 1-2; los tiles con span se estiran a las filas que marcan sus
   vecinos cuadrados, con la imagen en position:absolute para que su altura
   propia no infle la fila.
   OJO: si se agregan o reordenan fotos, revisar estos nth-child. */
.gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery__item:nth-child(2) { grid-row: span 2; }
.gallery__item:nth-child(3),
.gallery__item:nth-child(9),
.gallery__item:nth-child(13) { grid-column: span 2; }
.gallery__item:nth-child(2),
.gallery__item:nth-child(3),
.gallery__item:nth-child(9),
.gallery__item:nth-child(13) { aspect-ratio: auto; position: relative; }
.gallery__item:nth-child(2) img,
.gallery__item:nth-child(3) img,
.gallery__item:nth-child(9) img,
.gallery__item:nth-child(13) img { position: absolute; inset: 0; }

/* ==========================================================================
   CLIENTES
   ========================================================================== */
.clients__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.client {
  background: var(--bone);
  padding: clamp(1.6rem, 3vw, 2.4rem) 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  transition: background 0.4s var(--ease);
}
.client:hover { background: var(--bone-2); }
.client img {
  height: 54px; width: auto; object-fit: contain;
  filter: grayscale(1) opacity(0.65);
  transition: filter 0.4s var(--ease);
}
.client:hover img { filter: grayscale(0) opacity(1); }
.client figcaption { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.4; }
.client figcaption strong { display: block; color: var(--ink); font-size: 0.92rem; margin-bottom: 0.15rem; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact__cta { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.contact__cta h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 1.2rem + 5vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact__info { display: flex; flex-direction: column; gap: 1.6rem; }
.contact__block p { color: var(--ink-soft); margin-top: 0.5rem; line-height: 1.7; }
.contact__block a:hover { color: var(--green); }
.contact__socials { display: flex; gap: 1.2rem; font-weight: 600; }
.contact__socials a { position: relative; display: inline-flex; align-items: center; gap: 0.5em; transition: color 0.25s; }
.contact__socials a:hover { color: var(--green); }
.contact__socials svg { width: 19px; height: 19px; flex-shrink: 0; }

.contact__form {
  background: var(--forest);
  color: var(--bone);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.form__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-bright); margin-bottom: 0.4rem; }
.contact__form label { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.85rem; font-weight: 500; }
.contact__form input, .contact__form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--bone);
  background: rgba(247,245,240,0.06);
  border: 1px solid var(--line-light);
  border-radius: 12px;
  padding: 0.85em 1em;
  transition: border-color 0.3s, background 0.3s;
  resize: vertical;
}
.contact__form input::placeholder, .contact__form textarea::placeholder { color: rgba(247,245,240,0.4); }
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--green-bright); background: rgba(247,245,240,0.1); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--forest-2); color: var(--bone); padding: clamp(3rem, 7vw, 5rem) var(--pad) 2rem; }
.footer__inner { max-width: var(--maxw); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; justify-content: space-between; }
.footer__brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.footer__brand img { width: 34px; height: 34px; border-radius: 50%; }
.footer__tagline { color: rgba(247,245,240,0.6); font-size: 0.95rem; max-width: 30ch; }
.footer__links { display: flex; gap: 1.4rem; font-size: 0.92rem; }
.footer__links a { color: rgba(247,245,240,0.75); }
.footer__links a:hover { color: var(--green-bright); }
.footer__bottom { max-width: var(--maxw); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line-light); font-size: 0.82rem; color: rgba(247,245,240,0.5); }

/* ==========================================================================
   ESTADOS INICIALES DE ANIMACIÓN
   La clase "js" en <html> la agrega main.js apenas corre: los elementos
   animables solo se ocultan si hay JavaScript para revelarlos después.
   Sin JS, la página se ve completa igual (mejora progresiva).
   ========================================================================== */
.js [data-reveal], .js [data-service], .js [data-step], .js [data-gallery] { opacity: 0; }

/* ==========================================================================
   RESPONSIVE
   Los 960px deben coincidir con MOBILE_BREAKPOINT en main.js.
   ========================================================================== */
@media (max-width: 960px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__mobile {
    display: grid;
    grid-template-rows: 0fr;
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 0 var(--pad);
    transition: grid-template-rows 0.4s var(--ease);
  }
  .nav__mobile-inner { overflow: hidden; }
  .nav.is-open .nav__mobile { grid-template-rows: 1fr; }
  .nav__mobile-card {
    margin-top: 0.6rem;
    padding: 1.1rem 1.3rem 1.4rem;
    border-radius: var(--radius);
    background: rgba(26, 40, 23, 0.94);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line-light);
    box-shadow: 0 20px 45px -20px rgba(10, 18, 6, 0.55);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .nav__mobile-card nav { display: flex; flex-direction: column; }
  .nav__mobile-card nav a {
    padding: 0.85rem 0.1rem;
    color: var(--bone);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line-light);
    transition: color 0.25s;
  }
  .nav__mobile-card nav a:last-child { border-bottom: none; }
  .nav__mobile-card nav a:hover { color: var(--green-bright); }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .proceso__list { grid-template-columns: repeat(2, 1fr); }
  .clients__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .services__grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 1; }
  .clients__grid { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   Respeta la preferencia de accesibilidad "reducir movimiento" del sistema:
   nada se anima. (main.js hace lo mismo con las animaciones de GSAP.)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-service], .js [data-step], .js [data-gallery] { opacity: 1 !important; }
  .marquee__track, .hero__scroll span::after { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}