.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 15px var(--pad);
  background: rgba(10, 10, 11, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.brand img { width: 156px; height: auto; }
.site-nav { display: flex; gap: clamp(14px, 2vw, 28px); margin-left: auto; }
.site-nav a, .mobile-menu a { color: var(--grey); font: .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.site-nav a:hover, .mobile-menu a:hover { color: var(--white); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.mobile-menu { display: none; }

.hero {
  position: relative;
  min-height: min(880px, 88vh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__media, .hero__scrim { position: absolute; inset: 0; }
.hero__media { /* background: var(--carbon); */ }
.hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .82; }
.hero__scrim { background: linear-gradient(180deg, rgba(10, 10, 11, .2), rgba(10, 10, 11, .9) 82%, var(--black)); }
.hero__tag { position: absolute; top: 30px; left: var(--pad); color: #c6cad1; }
.hero__tag::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--red); }
.hero__body { position: relative; padding: 96px var(--pad) 46px; }
.hero h1 { max-width: 14ch; font-size: clamp(3.1rem, 4.8vw, 7.8rem); line-height: .9; }
.hero__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 30px; margin-top: 28px; }
.hero__row p { max-width: 48ch; color: #c6cad1; font: 400 1.08rem/1.25 var(--sans); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); /* background: rgba(10, 10, 11, .72); */ }
.hero__stat { padding: 18px var(--pad); border-right: 1px solid var(--line-strong); }
.hero__stat:last-child { border-right: 0; }
.hero__stat strong { display: block; font: clamp(1.4rem, 3vw, 2.2rem) var(--display); }

.section { padding: clamp(72px, 0vw, 130px) var(--pad); border-top: 1px solid var(--line); }
.section--paper { background: var(--paper); color: var(--ink); border-top: 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 42px; }
.section h2 { max-width: 16ch; margin-top: 12px; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .94; }
.section__intro { max-width: 48ch; color: var(--ink-2); }
.section:not(.section--paper) .section__intro { color: var(--grey); }

.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--paper-line); }
.services-intro { grid-column: 1; grid-row: 1; display: grid; align-content: space-around; align-items: start; gap: 28px; min-height: 500px; margin-bottom: 0; padding: 140px 0 140px; background: var(--paper); }
.services-intro .section__intro { margin-top: auto; }
.service-card { min-height: 270px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 28px; background: var(--paper-2); }
.service-card--dark { color: var(--white); background: var(--carbon); }
.service-card--special { color: var(--white); background: linear-gradient(135deg, var(--violet), var(--magenta)); }
.service-card--featured { grid-column: 2; grid-row: 1; /* display: grid; */ grid-template-columns: minmax(0, 1.65fr) minmax(150px, 1fr); min-height: 500px; gap: 0; padding: 0; }
.service-card--featured .service-card__content { padding: 48px; color: var(--white); background: linear-gradient(135deg, var(--violet), var(--magenta)); }
.service-card--featured .service-card__media { height: 100%; min-height: 0; }
.service-card--full { grid-column: 1 / -1; }
.service-card__media { min-height: 150px; overflow: hidden; background: var(--carbon-2); }
.service-card:not(.service-card--featured) .service-card__media { width: calc(100% + 56px); margin-inline: -28px; margin-bottom: -28px; }
.service-card__media img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.service-card__content { display: grid; gap: 12px; align-content: start; }
.service-card h3 { max-width: 18ch; font-size: clamp(1.45rem, 2.8vw, 2.2rem); line-height: .98; }
.service-card p { max-width: 46ch; color: var(--ink-2); }
.service-card--dark p, .service-card--special p, .service-card--featured p { color: var(--grey); }

.projects-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.section#capacidad { padding-block: 0; background: rgba(123, 0, 255, .27); }
.capability { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: clamp(30px, 7vw, 100px); align-items: center; }
.capability__media { overflow: hidden; border: 1px solid var(--line); }
.capability__media img { width: 100%; height: auto; object-fit: contain; }
.capability__copy { display: grid; gap: 20px; }
.capability__copy p { max-width: 56ch; color: var(--grey); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px dashed var(--line-strong); }
.process-step { display: grid; align-content: start; gap: 18px; min-height: 190px; padding: 24px 20px 24px 20px; border-right: 1px dashed var(--line-strong); }
.process-step:not(:first-child) { padding-left: 20px; }
.process-step:last-child { border-right: 0; }
.process-step h3 { font-size: 1.6rem; }
.process-step p { color: var(--grey); }

.contact-grid { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); gap: clamp(30px, 8vw, 120px); }
.section#contacto { background: var(--carbon-2); }
.contact-copy { display: grid; align-content: start; gap: 20px; }
.contact-copy p { color: var(--grey); }
.contact-links { display: grid; gap: 9px; margin-top: 12px; font-family: var(--mono); font-size: .8rem; }
.contact-links a { color: var(--white); }
.contact-links a:hover { color: var(--red); }
.privacy-note { max-width: 42ch; color: var(--grey-2); font: .72rem/1.45 var(--mono); }
.contact-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.contact-form label { display: grid; gap: 7px; }
.contact-form .full, .contact-form .form-foot { grid-column: 1 / -1; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 0; padding: 13px 14px; color: var(--white); background: var(--carbon); }
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.form-foot small { color: var(--grey-2); }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 26px var(--pad) 42px; color: var(--grey-2); font: .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 880px) {
  .site-nav, .header-actions > .button { display: none; }
  .menu-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); color: var(--white); background: transparent; }
  .mobile-menu { position: fixed; inset: 71px 0 auto; z-index: 19; display: grid; gap: 28px; padding: 30px var(--pad); background: var(--black); border-bottom: 1px solid var(--line); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu nav { display: grid; gap: 20px; }
  #servicios { padding: 0; }
  #servicios > .wrap { width: 100%; margin: 0; }
  .services-intro { grid-column: 1 / -1; grid-row: auto; min-height: 360px; padding: 72px 0 48px; }
  .service-card--featured { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1.65fr) minmax(150px, 1fr); min-height: 420px; }
  .capability, .contact-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2) { border-right: 0; }
  .process-step:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
}

@media (max-width: 560px) {
  .hero__stats, .services-grid, .projects-grid, .process-grid, .contact-form { grid-template-columns: 1fr; }
  .projects-grid { gap: 0; }
  .projects-grid > project-card { height: auto; }
  project-card:not(:last-child) { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .projects-grid .project-card { height: auto; overflow: visible; }
  .project-card__media { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
  .project-card__separator { display: block; width: 100vw; height: 0; margin: 0px 0; margin-left: calc(50% - 50vw); border-top: 1px dashed rgba(250, 250, 248, 1); }
  project-card:last-child .project-card__separator { display: none; }
  .services-intro { min-height: auto; padding: 4%; }
  .service-card--featured { display: flex; min-height: 0; }
  .service-card--featured .service-card__content { padding: 28px; }
  .service-card--featured .service-card__media { height: auto; min-height: 220px; }
  .hero__stat { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .hero__stat:last-child { border-bottom: 0; }
  .process-step, .process-step:not(:first-child) { min-height: auto; padding: 22px 0 22px 20px; border-right: 0; border-top: 1px solid var(--line-strong); }
  .process-step:first-child { border-top: 0; }
  .contact-form .full, .contact-form .form-foot { grid-column: auto; }
}
