/* ============================================================
   BRANDYX — "Technical Precision" design system
   Origen: proyecto Stitch validado (DESIGN.md). Grafito + naranja
   quemado, Space Grotesk + Inter, esquinas rectas, sin sombras ni
   gradientes, motivo de "corte diagonal" como único elemento decorativo.
============================================================ */
:root {
  --color-black:        #000000;  /* primary — botones, headings de máximo peso */
  --color-ink:           #1a1b22; /* on-surface — texto principal */
  --color-ink-muted:      #444748; /* on-surface-variant — cuerpo de texto */
  --color-accent:        #904d00; /* secondary — único acento de color, úsalo con moderación */
  --color-ink-blue:       #1e293b; /* acento técnico secundario (specs, iconos) */
  --color-white:          #ffffff;
  --color-bg-muted:       #f5f5f5;
  --color-bg-dark:        #1c1b1a; /* tertiary-container — secciones oscuras (marquee, proceso) */
  --color-border:         #e5e7eb;
  --color-border-strong:  #c4c7c7;

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1280px;
  --margin-desktop: 64px;
  --margin-mobile: 20px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  /* `clip`, no `hidden`: overflow-x:hidden en body rompe position:sticky
     (bug de Chromium/WebKit) — ver NOTAS-EQUIPO.md, aprendido en QA de la v1. */
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: var(--color-black);
}

p { line-height: 1.6; color: var(--color-ink-muted); margin: 0; }
a { color: inherit; text-decoration: none; }

/* Sistema estrictamente anguloso: nada de radios salvo el corte diagonal */
button, input, textarea { font-family: inherit; border-radius: 0; }

.eyebrow {
  font: 700 12px/16px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(var(--margin-mobile), 6vw, var(--margin-desktop));
}

/* Motivo de marca: corte diagonal de 40px en la esquina indicada.
   Único elemento decorativo permitido por el sistema (sin sombras/radios). */
.brand-cut {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}
.brand-cut-sm {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 1.1em 2em;
  font: 700 12px/16px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: background-color 260ms ease, color 260ms ease, transform 260ms ease;
}
.btn--primary {
  background: var(--color-black);
  color: var(--color-white);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--color-accent);
}
/* Para usar sobre fondos oscuros (hero con vídeo): blanco sólido, nunca se
   confunde con el fondo como pasaría con el botón negro por defecto. */
.btn--light {
  background: var(--color-white);
  color: var(--color-black);
}
.btn--light:hover, .btn--light:focus-visible {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   NAV — blanca, fija, sin blend-mode (aprendido en QA v1: un logo
   con fondo opaco rompe mix-blend-mode; más simple y robusto que la
   barra sea siempre blanca, como en el diseño validado).
============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px clamp(var(--margin-mobile), 6vw, var(--margin-desktop)); /* menos padding vertical: el logo ha crecido, mantiene la altura total de la barra a raya */
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: transform 320ms ease;
}
.nav__logo { display: inline-flex; align-items: center; gap: 14px; }
.nav__logo-mark { height: 42px; width: auto; } /* AJUSTA AQUÍ: tamaño del monograma */
.nav__logo-word { height: 22px; width: auto; } /* AJUSTA AQUÍ: tamaño del wordmark */
@media (max-width: 640px) {
  .nav__logo-mark { height: 34px; }
  .nav__logo-word { height: 18px; }
}
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__links a {
  position: relative;
  padding-bottom: 4px;
  font: 700 12px/16px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  transition: color 200ms ease;
}
.nav__links a:hover { color: var(--color-black); }
/* Subrayado en acento: crece desde la izquierda al pasar el ratón (preview)
   y se queda fijo en la sección activa (scrollspy, ver initScrollSpy en
   js/main.js) — mismo indicador, dos formas de activarlo, sin desplazar layout. */
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms ease;
}
.nav__links a.is-active { color: var(--color-black); }
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__cta {
  background: var(--color-black);
  color: var(--color-white);
  padding: 0.9em 1.6em;
  font: 700 12px/16px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 260ms ease;
}
.nav__cta:hover { background: var(--color-accent); }
@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
}

/* ---------------- Menú móvil (hamburguesa + panel desplegable) ---------------- */
.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  position: relative;
  cursor: pointer;
}
@media (max-width: 860px) { .nav__toggle { display: block; } }
.nav__toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: var(--color-black);
  transition: transform 250ms ease, opacity 200ms ease;
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 20px; }
.nav__toggle span:nth-child(3) { top: 25px; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav__mobile {
  display: none;
}
@media (max-width: 860px) {
  .nav__mobile {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms ease;
  }
  .nav__mobile.is-open { max-height: 420px; }
}
.nav__mobile a {
  padding: 18px clamp(var(--margin-mobile), 6vw, var(--margin-desktop));
  border-top: 1px solid var(--color-border);
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.nav__mobile a.is-active { color: var(--color-accent); }
.nav__mobile-cta { background: var(--color-black); color: var(--color-white) !important; }

/* ============================================================
   HERO — vídeo a pantalla completa ligado al scroll.
   La sección se pinnea con ScrollTrigger (js/main.js: pin + scrub) y el
   scroll avanza video.currentTime directamente; sin autoplay, si no
   scrolleas el vídeo no se mueve. Fondo oscuro para que el texto en blanco
   funcione desde el primer frame, con o sin JS.
============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--color-bg-dark);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Degradado permanente que garantiza la legibilidad del texto sobre el
   vídeo — ver AJUSTA AQUÍ, JS lo atenúa aún más una vez el texto se ha ido.
   En pantallas estrechas el texto ocupa proporcionalmente más ancho, así
   que el velo cubre más terreno antes de empezar a desvanecerse. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(12,10,9,0.78) 0%, rgba(12,10,9,0.55) 40%, rgba(12,10,9,0.15) 75%); /* AJUSTA AQUÍ: intensidad del velo */
}
@media (max-width: 640px) {
  /* El texto pasa a ocupar casi todo el ancho (una sola columna), así que
     en vez de perseguir dónde cae exactamente, se oscurece de forma más
     pareja en todo el fotograma — más fiable que un degradado direccional. */
  .hero__scrim { background: rgba(12, 10, 9, 0.6); }
}

.hero__copy {
  position: relative;
  z-index: 3;
  max-width: 640px;
  padding: 0 clamp(var(--margin-mobile), 6vw, var(--margin-desktop));
}
.hero__copy h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  color: var(--color-white); /* sobre el vídeo/scrim oscuro */
}
.hero__copy h1 .accent { color: var(--color-accent); }
.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.hero__facts p:first-child { margin-bottom: 8px; }
.hero__facts p:last-child { color: rgba(250,249,246,0.82); }
@media (max-width: 640px) { .hero__facts { grid-template-columns: 1fr; gap: 16px; } }

@media (max-width: 1023px) {
  /* `svh` evita el salto al aparecer/ocultarse la barra de direcciones del
     navegador móvil durante el pin — con `vh` a secas el hero "bailaría"
     verticalmente en cada scroll. Con fallback a `vh` para navegadores que
     no soporten aún las unidades de viewport pequeño. */
  .hero { height: 100vh; height: 100svh; min-height: 560px; }
  .hero__copy { padding-top: 90px; } /* deja aire bajo la nav fija */
}

/* ============================================================
   MARQUEE — cinta tipográfica con movimiento propio (autoplay).
============================================================ */
.marquee {
  background: var(--color-bg-dark);
  overflow: hidden;
  padding: 48px 0;
}
.marquee__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  animation: marquee 26s linear infinite; /* AJUSTA AQUÍ: velocidad del bucle */
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* el contenido está duplicado x2 en el HTML */
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 140px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-white);
}
.marquee__track span.dot { color: var(--color-accent); }

/* ============================================================
   SERVICIOS — grid de 3 tarjetas, esquinas rectas, sin sombra.
============================================================ */
.services {
  padding: clamp(80px, 10vw, 160px) 0;
  background: var(--color-white);
}
.services__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 64px;
}
.services__head h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 32ch; }
.services__head .tag {
  font: 700 12px/16px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 8px;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
@media (max-width: 900px) {
  .services__grid { grid-template-columns: 1fr; }
}
.service-card {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  padding: 8px;
  transition: border-color 300ms ease;
}
/* .is-active: equivalente táctil del :hover, activado por JS al tocar la
   tarjeta en dispositivos sin hover real (ver initServiceCardTap en main.js). */
.service-card:hover,
.service-card.is-active { border-color: var(--color-black); }
.service-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--color-bg-muted);
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.22); /* estado inicial — JS hace scrub hasta 1, hover hasta 1.06 */
  transition: transform 500ms ease, opacity 400ms ease;
  will-change: transform;
}
.service-card:hover .service-card__media img,
.service-card.is-active .service-card__media img { transform: scale(1.06) !important; opacity: 0.14; }

/* Explicación larga en hover (o al tocar, en móvil) — la foto queda de
   textura de fondo, casi transparente (ver opacity de la img arriba), y el
   texto largo la sustituye. */
.service-card__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 28px;
  opacity: 0;
  transition: opacity 350ms ease;
}
.service-card:hover .service-card__more,
.service-card.is-active .service-card__more { opacity: 1; }
.service-card__more p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-ink);
}
@media (hover: none) {
  .service-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
}
.service-card__body { padding: 0 16px 16px; }
.service-card__index {
  font: 700 12px/16px var(--font-body);
  letter-spacing: 0.1em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 8px;
}
.service-card__body h3 { font-size: 1.7rem; margin-bottom: 8px; }

/* ============================================================
   PROCESO — franja oscura, línea superior de progreso + 4 pasos.
============================================================ */
.process {
  padding: clamp(80px, 10vw, 160px) 0;
  background: var(--color-bg-dark);
  color: var(--color-white);
}
.process__eyebrow { margin-bottom: 32px; }
.process__line {
  position: relative;
  height: 1px;
  background: rgba(255,255,255,0.2);
}
.process__line-fill {
  position: absolute; inset: 0;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0); /* JS: scrub 0 -> 1 */
}
.process__steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.process__step {
  padding: 48px 24px 0 0;
  opacity: 0;
  transform: translateY(20px);
}
.process__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  opacity: 0.25;
  color: var(--color-white);
  margin-bottom: 16px;
  transition: opacity 300ms ease, color 300ms ease;
}
.process__step:hover .process__num { opacity: 1; color: var(--color-accent); }
.process__step h4 { color: var(--color-white); font-size: 1.3rem; margin-bottom: 12px; }
.process__step p { color: rgba(255,255,255,0.65); font-size: 14.5px; }
@media (max-width: 720px) {
  .process__steps { grid-template-columns: 1fr; gap: 32px; }
  .process__step { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); }
}

/* ============================================================
   PARTNERS
============================================================ */
.partners {
  padding: 96px 0;
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border);
}
.partners__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.partners__label .bar {
  width: 48px; height: 4px;
  background: var(--color-accent);
  margin-top: 16px;
}
.partners__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}
/* Sin iconos: el acabado "profesional" viene de la tipografía y un simple
   filete de acento, no de ilustración — más cerca de un logotipo/letterhead
   que de una tarjeta de icono decorativa. */
.partner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
  border-left: 2px solid var(--color-accent);
}
.partner__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--color-black);
}
.partner__role {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* ============================================================
   FILOSOFÍA / ABOUT
============================================================ */
.about {
  padding: clamp(80px, 10vw, 160px) 0;
  background: var(--color-white);
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 1024px) {
  .about__grid { grid-template-columns: 4fr 8fr; }
}
.about__head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 16px; }
.about__lead {
  font-size: 18px;
  color: var(--color-ink);
  line-height: 1.6;
  margin-bottom: 48px;
  max-width: 68ch;
}
.about__points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 640px) {
  .about__points { grid-template-columns: 1fr; }
}
.about__points h4 {
  font-size: 1.2rem;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

/* ============================================================
   CONTACTO
============================================================ */
.contact { padding: clamp(80px, 10vw, 160px) 0; background: var(--color-white); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: start;
}
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: 1fr 1fr; }
}
.contact h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 48px; }
.contact__email {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.9rem); /* AJUSTA AQUÍ: cabía en dos líneas a 4.2rem — baja para que quepa siempre en una */
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color 200ms ease;
}
@media (max-width: 1023px) {
  .contact__email { white-space: normal; word-break: break-word; } /* en una sola columna sí hay sitio de sobra */
}
.contact__email:hover { color: var(--color-accent); }
.contact__meta { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; }
.contact__meta div { display: flex; align-items: center; gap: 14px; color: var(--color-ink-muted); }
.contact__meta svg { width: 20px; height: 20px; flex-shrink: 0; }

.contact__form {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.field label {
  display: block;
  font: 700 12px/16px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-strong);
  padding: 8px 0;
  font: 400 16px/1.4 var(--font-body);
  color: var(--color-ink);
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}
.contact__form .btn { width: 100%; justify-content: center; }

/* ============================================================
   FOOTER
============================================================ */
/* Fondo oscuro (igual que hero/proceso): antes heredaba el blanco de
   .contact y solo se notaba un hairline — sin contraste real. Con esto la
   página cierra con el mismo "bookend" oscuro con el que abre en el hero. */
.footer {
  padding: 56px clamp(var(--margin-mobile), 6vw, var(--margin-desktop));
  background: var(--color-bg-dark);
  color: rgba(250, 249, 246, 0.7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 860px) {
  .footer { grid-template-columns: 1fr 1fr; align-items: end; }
}
.footer__logo {
  height: 26px;
  width: auto;
  margin-bottom: 16px;
  /* logo-wordmark.png es negro sobre blanco sólido (sin alfa) — se invierte
     para leerse en claro sobre el fondo oscuro del footer. */
  filter: invert(1);
}
.footer__tagline { max-width: 42ch; margin-bottom: 24px; color: rgba(250, 249, 246, 0.6); }
.footer__legal { font: 700 12px/16px var(--font-body); letter-spacing: 0.06em; color: rgba(250, 249, 246, 0.85); }
.footer__right { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
@media (min-width: 860px) { .footer__right { align-items: flex-end; } }
.footer__links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer__links a {
  font: 700 12px/16px var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.65);
}
.footer__links a:hover { color: var(--color-accent); }
.footer__icons { display: flex; gap: 12px; }
.footer__icons button {
  width: 40px; height: 40px;
  border: 1px solid rgba(250, 249, 246, 0.25);
  background: transparent;
  color: rgba(250, 249, 246, 0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.footer__icons button:hover { background: rgba(250, 249, 246, 0.08); }
.footer__icons svg { width: 18px; height: 18px; }

/* ============================================================
   TEXTO: estado inicial para reveals (JS anima a opacity:1 / y:0)
============================================================ */
.reveal-text { opacity: 0; transform: translateY(16px); }