/* ==========================================================================
   Arquitectura y Gestión Técnica de Proyectos — site styles
   Mobile-first. Two layouts, switching at 1024px (same breakpoint as the
   original site):
     - below 1024px: stacked "mobile" layout, sizes scale with the page width
       up to a cap (unit --m)
     - 1024px and up: the desktop design scales proportionally with the page
       width (unit --u = 1/1425 of the page width)
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --green: #00675e;
  --paper: #f9f8f6;
  --sand: #eeedeb;
  --ink: #1a1a1a;
  --muted: #686867;

  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Instrument Sans", "Inter", system-ui, sans-serif;

  /* Length units. cqw resolves against the nearest size container (.page or
     .site-header), i.e. the page width without the scrollbar. */
  --u: calc(100cqw / 1425);
  --m: min(calc(100cqw / 375), 1.8267px);
  --pad: 6.133cqw; /* mobile side padding (23px at 375px) */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, address {
  margin: 0;
  padding: 0;
  font-weight: 400;
}
ul { list-style: none; }
address { font-style: normal; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--green);
  font: 400 14px/1.2 var(--font-text);
  transition: top 0.15s;
}
.skip-link:focus { top: 8px; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* ==========================================================================
   Header (fixed, overlays the page)
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0;
  z-index: 100;
  container-type: inline-size;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

/* Mobile: rounded pill, burger button, full-screen menu */
.site-header::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(15 * var(--m));
  left: calc(40 * var(--m));
  right: calc(40 * var(--m));
  height: calc(67.3 * var(--m));
  border-radius: calc(48.08 * var(--m));
  background: var(--paper);
  pointer-events: none;
}

.site-header__logo {
  display: none;
  position: absolute;
  z-index: 4;
  top: calc(211 * var(--m));
  left: 50%;
  width: calc(162 * var(--m));
  transform: translateX(-50%);
}
.site-header__logo img { width: 100%; height: auto; }
.site-header.is-open .site-header__logo { display: block; }

.menu-toggle {
  position: absolute;
  z-index: 4;
  top: calc(28.5 * var(--m));
  right: calc(40 * var(--m) + 23.4 * var(--m));
  width: calc(40.4 * var(--m));
  height: calc(40.4 * var(--m));
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.menu-toggle svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.menu-toggle line {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: butt;
  transition: opacity 0.2s;
}
.menu-toggle .menu-toggle__close { opacity: 0; }
.site-header.is-open .menu-toggle {
  top: calc(1.8 * var(--m));
  right: calc(1.8 * var(--m));
}
.site-header.is-open .menu-toggle__bars { opacity: 0; }
.site-header.is-open .menu-toggle__close { opacity: 1; }

.site-nav {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.site-header.is-open .site-nav {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.site-nav__list {
  position: absolute;
  top: calc(87.8 * var(--m));
  right: calc(15.4 * var(--m));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.site-nav__list li { height: calc(34.5 * var(--m)); }
.site-nav__list a {
  color: var(--green);
  font-size: calc(13.4615 * var(--m));
  line-height: 1.35;
  text-decoration: none;
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] { text-decoration: underline; }

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}
.button:hover { text-decoration: underline; }
.site-nav .button {
  position: absolute;
  top: calc(290 * var(--m));
  left: 50%;
  width: calc(227 * var(--m));
  height: calc(44 * var(--m));
  border-radius: 999px;
  transform: translateX(-50%);
  font-size: calc(15.3846 * var(--m));
  line-height: 1.35;
}

/* Without JavaScript the mobile menu cannot open: show the links in the pill */
.no-js .menu-toggle,
.no-js .site-nav .button { display: none; }
.no-js .site-nav {
  inset: calc(15 * var(--m)) calc(40 * var(--m)) auto;
  height: calc(67.3 * var(--m));
  visibility: visible;
  opacity: 1;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-js .site-nav__list {
  position: static;
  flex-direction: row;
  gap: calc(20 * var(--m));
}
.no-js .site-nav__list li { height: auto; }

/* ==========================================================================
   Page structure
   ========================================================================== */
.page {
  container-type: inline-size;
  overflow: clip; /* also hides not-yet-revealed elements that sit below the page end */
}

main { display: block; }

/* Spacer under the fixed header on pages without a hero */
.page-title {
  margin-top: calc(97 * var(--m));
  height: calc(192 * var(--m));
  border-bottom: 1px solid var(--ink);
  padding: calc(23 * var(--m)) var(--pad) 0;
  background: var(--paper);
}
.page-title h1 {
  color: var(--green);
  font-family: var(--font-display);
  font-size: calc(28.8462 * var(--m));
  line-height: 1;
}

/* Typography helpers (mobile sizes) */
.eyebrow {
  color: var(--green);
  font-size: calc(15.3846 * var(--m));
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Entrance animation ---------- */
.js [data-reveal] {
  opacity: 0;
  translate: 0 calc(60 * var(--m));
  transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal="fade"] {
  translate: none;
  transition-duration: 1s;
}
.js [data-reveal].is-visible {
  opacity: 1;
  translate: none;
}
/* The contact block ends the page (overflow is clipped): fade only, no slide */
.js .contact [data-reveal] { translate: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .site-nav { transition: none; }
}

/* ==========================================================================
   Home
   ========================================================================== */
/* Below 1024px the hero grows with its content: the title wraps to a
   different number of lines depending on the width. */
.hero {
  position: relative;
  padding: calc(176 * var(--m)) var(--pad) calc(176.8 * var(--m));
  overflow: hidden;
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.37; /* washed-out look: image over the paper colour */
}
.hero__title {
  position: relative;
  color: var(--green);
  font-family: var(--font-display);
  font-size: calc(30.7692 * var(--m));
  line-height: 1;
}
.hero__lead {
  position: relative;
  margin-top: calc(11.2 * var(--m));
  font-size: calc(15.3846 * var(--m));
  line-height: 1.35;
}

.about {
  padding: calc(94 * var(--m)) var(--pad) calc(93.4 * var(--m));
  text-align: center;
}
.about__title {
  color: var(--green);
  font-family: var(--font-display);
  font-size: calc(28.8462 * var(--m));
  line-height: 1;
}
.about__col { margin-top: calc(38.5 * var(--m)); }
.about__col:first-of-type { margin-top: calc(38.2 * var(--m)); }
.about__col h3 {
  margin-bottom: calc(12.1 * var(--m));
  color: var(--green);
  font-family: var(--font-display);
  font-size: calc(15.3846 * var(--m));
  line-height: 1.1;
  text-transform: uppercase;
}
.about__col p {
  font-size: calc(15.3846 * var(--m));
  line-height: 1.35;
}
.about__divider { display: none; }

/* QG Ingeniería */
.associate {
  display: flex;
  flex-direction: column;
  padding: calc(77.3 * var(--m)) var(--pad) calc(73.1 * var(--m));
}
.associate__photo {
  order: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 328.8 / 288.5;
  object-fit: cover;
}
.associate__rule {
  order: 2;
  width: calc(77.9 * var(--m));
  height: 0;
  margin: calc(30.7 * var(--m)) 0 0;
  border: 0;
  border-top: 1px solid var(--ink);
}
.associate__label {
  order: 3;
  margin-top: calc(37.6 * var(--m));
}
.associate__logo {
  order: 4;
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(31.6 * var(--m));
  aspect-ratio: 376 / 129;
}
.associate__text {
  order: 5;
  margin-top: calc(22.2 * var(--m));
  font-size: calc(15.3846 * var(--m));
  line-height: 1.35;
}
.associate__text em { font-style: italic; }
.associate__address {
  order: 6;
  margin-top: calc(39.2 * var(--m));
  font-size: calc(13.4615 * var(--m));
  line-height: 1.35;
}
.associate__email,
.associate__phone {
  order: 7;
  margin-top: calc(11.5 * var(--m));
  font-size: calc(13.4615 * var(--m));
  line-height: 1.35;
}
.associate__email a { text-decoration: none; }

/* ==========================================================================
   Contact block (shared footer)
   ========================================================================== */
.contact {
  background: var(--sand);
  padding: calc(49.4 * var(--m)) var(--pad) calc(49.7 * var(--m));
  text-align: center;
  font-size: calc(13.4615 * var(--m));
  line-height: 1.35;
}
.contact--home { padding: calc(67.7 * var(--m)) var(--pad) calc(61.6 * var(--m)); }
.contact__title {
  color: var(--green);
  font-size: calc(17.3077 * var(--m));
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.1em;
}
.contact__company {
  margin-top: calc(38 * var(--m));
  color: var(--green);
  font-size: calc(15.3846 * var(--m));
  letter-spacing: 0.1em;
}
.contact--home .contact__company { margin-top: calc(52.6 * var(--m)); }
.contact__address { margin-top: calc(38.5 * var(--m)); }
.contact__email,
.contact__phone { margin-top: calc(11.5 * var(--m)); }
.contact__email a { text-decoration: underline; }
.contact__logo {
  width: 38.9cqw; /* a share of the page width, not capped like the type */
  height: auto;
  margin: calc(31 * var(--m)) auto 0;
}
.contact__rule {
  height: 0;
  margin: calc(43.4 * var(--m)) 0 0;
  border: 0;
  border-top: 1px solid var(--ink);
}
.contact__legal {
  margin-top: calc(25.5 * var(--m));
  color: var(--muted);
}

/* ==========================================================================
   Servicios
   ========================================================================== */
.services {
  background: var(--sand);
  border-bottom: 1px solid var(--ink);
}
.service-card {
  position: relative;
  padding: calc(23 * var(--m)) var(--pad) calc(41 * var(--m));
  background: var(--sand);
}
.service-card--1,
.service-card--4,
.service-card--5 { background: var(--paper); }
.service-card--5,
.service-card--6 { border-top: 1px solid var(--ink); }

.service-card--1 { --ix: 32; --iy: 31; --iw: 55; --ih: 56; --gx: 9; --gy: 9; --gw: 37; --gh: 37;
  --tx: 112; --ty: 31; --tw: 600; --sy: 7.6; --px: 32; --py: 113; --pw: 685; }
.service-card--2 { --ix: 30; --iy: 32; --iw: 56; --ih: 57; --gx: -3; --gy: 0; --gw: 61; --gh: 46;
  --tx: 115; --ty: 31; --tw: 570; --sy: 9.6; --px: 30; --py: 116; --pw: 641; }
.service-card--3 { --ix: 36; --iy: 31; --iw: 55; --ih: 57; --gx: 4; --gy: 4; --gw: 46; --gh: 49;
  --tx: 115; --ty: 31; --tw: 570; --sy: 9.6; --px: 36; --py: 117; --pw: 659; }
.service-card--4 { --ix: 32; --iy: 31; --iw: 56; --ih: 58; --gx: 9; --gy: 2; --gw: 38; --gh: 54;
  --tx: 112; --ty: 31; --tw: 570; --sy: 8.6; --px: 25; --py: 112; --pw: 642; }
.service-card--5 { --ix: 36; --iy: 43; --iw: 62; --ih: 59; --gx: 6; --gy: 8; --gw: 47; --gh: 47;
  --tx: 121; --ty: 44; --tw: 570; --sy: 9.6; --px: 36; --py: 127; --pw: 642; }
.service-card--6 { --ix: 32; --iy: 34; --iw: 61; --ih: 61; --gx: -2; --gy: 3; --gw: 63; --gh: 55;
  --tx: 113; --ty: 35; --tw: 570; --sy: 10.6; --px: 39; --py: 127; --pw: 632; }

.service-card__icon {
  position: relative;
  width: calc(56 * var(--m));
  height: calc(56 * var(--m));
  margin-bottom: calc(20 * var(--m));
  border-radius: 50%;
  background: var(--green);
}
.service-card__icon img,
.service-card__icon svg {
  position: absolute;
  max-width: none;
  /* glyph box, as a share of the circle (values come from the --g* / --i* vars) */
  left: calc(var(--gx) / var(--iw) * 100%);
  top: calc(var(--gy) / var(--ih) * 100%);
  width: calc(var(--gw) / var(--iw) * 100%);
  height: calc(var(--gh) / var(--ih) * 100%);
}
.service-card__icon svg {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-card__title { font-family: var(--font-display); }
.service-card__phase {
  display: block;
  color: var(--green);
  font-size: calc(19.2308 * var(--m));
  line-height: 1.1;
}
.service-card__name {
  display: block;
  margin-top: calc(10 * var(--m));
  font-size: calc(15.3846 * var(--m));
  line-height: 1.1;
  text-transform: uppercase;
}
.service-card p {
  margin-top: calc(11 * var(--m));
  font-size: calc(13.4615 * var(--m));
  line-height: 1.35;
}

.banner {
  padding: calc(39 * var(--m)) 0 calc(38 * var(--m));
}
.banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 375 / 384.6;
  object-fit: cover;
}

/* ==========================================================================
   Proyectos
   ========================================================================== */
.project { padding: calc(23 * var(--m)) var(--pad) calc(64 * var(--m)); }
.project__image {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 0.995;
  object-fit: cover;
}
.project__body {
  margin-top: calc(23 * var(--m));
  padding: calc(22 * var(--m)) calc(23 * var(--m)) 0;
  border-top: 1px solid var(--ink);
}
.project__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: calc(19.2308 * var(--m));
  line-height: 1.1;
}
.project__rule {
  height: 0;
  margin: calc(30.8 * var(--m)) 0 0;
  border: 0;
  border-top: 1px solid var(--ink);
}
.project__body p {
  margin-top: calc(32 * var(--m));
  font-size: calc(13.4615 * var(--m));
  line-height: 1.35;
}

/* ==========================================================================
   Desktop layout: proportional scaling (1 unit = 1/1425 of the page width)
   ========================================================================== */
@media (min-width: 1024px) {
  /* ---------- Header ---------- */
  .site-header::before {
    top: calc(15 * var(--u));
    left: calc(40 * var(--u));
    right: calc(40 * var(--u));
    height: calc(78.4 * var(--u));
    border-radius: calc(55.66 * var(--u));
  }
  .site-header__logo {
    display: block;
    top: calc(20.2 * var(--u));
    left: calc(77.7 * var(--u));
    width: calc(171.9 * var(--u));
    transform: none;
  }
  .menu-toggle { display: none; }

  .site-nav {
    display: contents;
    visibility: visible;
    opacity: 1;
  }
  .site-nav__list {
    top: calc(42 * var(--u));
    left: calc(560.2 * var(--u));
    right: auto;
    flex-direction: row;
    gap: calc(66.75 * var(--u));
    z-index: 3;
  }
  .site-nav__list li { height: auto; }
  .site-nav__list a { font-size: calc(15.5859 * var(--u)); }
  .site-nav .button {
    z-index: 3;
    top: calc(27.1 * var(--u));
    left: calc(1108.9 * var(--u));
    width: calc(235.4 * var(--u));
    height: calc(50.8 * var(--u));
    transform: none;
    font-size: calc(17.8125 * var(--u));
  }

  .no-js .site-nav { inset: auto; height: auto; display: contents; }
  .no-js .site-nav__list { gap: calc(66.75 * var(--u)); }
  .no-js .site-nav .button { display: flex; }

  /* ---------- Shared ---------- */
  .page-title {
    margin-top: calc(108 * var(--u));
    height: calc(169 * var(--u));
    padding: calc(50 * var(--u)) 0 0 calc(32 * var(--u));
  }
  .page-title h1 { font-size: calc(67.5889 * var(--u)); }

  .eyebrow { font-size: calc(20.2766 * var(--u)); }

  .js [data-reveal] { translate: 0 calc(120 * var(--u)); }
  .js [data-reveal="fade"] { translate: none; }
  .js [data-reveal].is-visible { translate: none; }
  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { translate: none; }
  }

  /* ---------- Home: hero ---------- */
  .hero { height: calc(830.7 * var(--u)); padding: 0; }
  .hero__title {
    position: absolute;
    left: calc(29.9 * var(--u));
    right: auto;
    top: calc(202.8 * var(--u));
    width: calc(1338.2 * var(--u));
    font-size: calc(80.1562 * var(--u));
  }
  .hero__lead {
    position: absolute;
    margin-top: 0;
    left: calc(40 * var(--u));
    right: auto;
    top: calc(406.3 * var(--u));
    width: calc(714.8 * var(--u));
    font-size: calc(20.0391 * var(--u));
  }

  /* ---------- Home: about ---------- */
  .about {
    position: relative;
    height: calc(747.3 * var(--u));
    padding: 0;
    text-align: left;
  }
  .about__title {
    position: absolute;
    left: calc(287.2 * var(--u));
    top: calc(110.3 * var(--u));
    width: calc(857.3 * var(--u));
    font-size: calc(62.3438 * var(--u));
    text-align: center;
  }
  .about__col {
    position: absolute;
    top: calc(268.9 * var(--u));
    width: calc(461.8 * var(--u));
    margin: 0;
  }
  .about__col:first-of-type { margin-top: 0; }
  .about__col--1 { left: calc(54.6 * var(--u)); }
  .about__col--2 { left: calc(516.5 * var(--u)); }
  .about__col--3 { left: calc(978.3 * var(--u)); }
  .about__col h3 {
    margin-bottom: calc(36.9 * var(--u));
    font-size: calc(20.2766 * var(--u));
  }
  .about__col p {
    width: calc(387.5 * var(--u));
    font-size: calc(17.8125 * var(--u));
  }
  .about__divider {
    display: block;
    position: absolute;
    top: calc(328.1 * var(--u));
    width: 1px;
    height: calc(115.4 * var(--u));
    background: var(--ink);
  }
  .about__divider--1 { left: calc(473.8 * var(--u)); }
  .about__divider--2 { left: calc(939.1 * var(--u)); }

  /* ---------- Home: QG Ingeniería ---------- */
  .associate {
    position: relative;
    display: block;
    height: calc(986 * var(--u));
    padding: 0;
  }
  .associate > * {
    position: absolute;
    margin: 0;
  }
  .associate__photo {
    left: calc(772.7 * var(--u));
    top: calc(91 * var(--u));
    width: calc(595.2 * var(--u));
    height: calc(793.6 * var(--u));
    aspect-ratio: auto;
  }
  .associate__rule {
    left: calc(53.5 * var(--u));
    top: calc(114.6 * var(--u));
    width: calc(91.3 * var(--u));
  }
  .associate__label {
    left: calc(49.4 * var(--u));
    top: calc(153.6 * var(--u));
    width: calc(625.7 * var(--u));
  }
  .associate__logo {
    left: calc(25.4 * var(--u));
    top: calc(164.1 * var(--u));
    width: calc(356.1 * var(--u));
    height: calc(122.2 * var(--u));
  }
  .associate__text {
    left: calc(49.4 * var(--u));
    top: calc(349.2 * var(--u));
    width: calc(563.4 * var(--u));
    font-size: calc(20.0391 * var(--u));
  }
  .associate__address {
    left: calc(49.4 * var(--u));
    top: calc(604.8 * var(--u));
    width: calc(443.3 * var(--u));
    font-size: calc(15.5859 * var(--u));
  }
  .associate__email {
    left: calc(49.4 * var(--u));
    top: calc(664.2 * var(--u));
    font-size: calc(15.5859 * var(--u));
  }
  .associate__phone {
    left: calc(49.4 * var(--u));
    top: calc(700 * var(--u));
    font-size: calc(15.5859 * var(--u));
  }

  /* ---------- Contact block ---------- */
  .contact {
    position: relative;
    height: calc(555 * var(--u));
    padding: 0;
    font-size: calc(15.5859 * var(--u));
  }
  .contact--home { height: calc(595 * var(--u)); padding: 0; }
  .contact > *,
  .contact--home > .contact__company {
    position: absolute;
    margin: 0;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .contact__title {
    left: calc(715 * var(--u));
    top: calc(57 * var(--u));
    font-size: calc(24.7826 * var(--u));
  }
  .contact__company {
    left: calc(732 * var(--u));
    top: calc(140 * var(--u));
    font-size: calc(20.0391 * var(--u));
  }
  .contact__address {
    left: calc(724.5 * var(--u));
    top: calc(203 * var(--u));
  }
  .contact__email {
    left: calc(725 * var(--u));
    top: calc(272 * var(--u));
  }
  .contact__phone {
    left: calc(718 * var(--u));
    top: calc(330 * var(--u));
  }
  .contact__logo {
    left: calc(42.3 * var(--u) + 85.35 * var(--u));
    top: calc(375.5 * var(--u));
    width: calc(170.7 * var(--u));
  }
  .contact__rule {
    left: calc(42.3 * var(--u) + 669.1 * var(--u));
    top: calc(454.4 * var(--u));
    width: calc(1338.2 * var(--u));
  }
  .contact__legal {
    left: calc(717 * var(--u));
    top: calc(492 * var(--u));
  }
  .contact--home .contact__title { left: calc(704.6 * var(--u)); top: calc(72.3 * var(--u)); }
  .contact--home .contact__company { left: calc(716 * var(--u)); top: calc(171.5 * var(--u)); font-size: calc(20.2766 * var(--u)); }
  .contact--home .contact__address { left: calc(708 * var(--u)); top: calc(233.6 * var(--u)); }
  .contact--home .contact__email { left: calc(708 * var(--u)); top: calc(305.3 * var(--u)); }
  .contact--home .contact__phone { left: calc(716 * var(--u)); top: calc(352.5 * var(--u)); }
  .contact--home .contact__logo { left: calc(38.9 * var(--u) + 85.35 * var(--u)); top: calc(434.8 * var(--u)); }
  .contact--home .contact__rule { left: calc(38.9 * var(--u) + 669.1 * var(--u)); top: calc(507.7 * var(--u)); }
  .contact--home .contact__legal { left: calc(719.4 * var(--u)); top: calc(543.1 * var(--u)); }

  /* ---------- Servicios ---------- */
  .services {
    display: grid;
    grid-template-columns: calc(734 * var(--u)) 1fr;
    grid-template-rows: calc(246 * var(--u)) calc(238 * var(--u)) calc(257 * var(--u));
  }
  .service-card {
    padding: 0;
    border-top: 0;
  }
  .service-card--5 { border-right: 1px solid var(--ink); }
  .service-card > *,
  .service-card > p {
    position: absolute;
    margin: 0;
  }
  .service-card__icon {
    left: calc(var(--ix) * var(--u));
    top: calc(var(--iy) * var(--u));
    width: calc(var(--iw) * var(--u));
    height: calc(var(--ih) * var(--u));
  }
  .service-card__title {
    left: calc(var(--tx) * var(--u));
    top: calc(var(--ty) * var(--u));
    width: calc(var(--tw) * var(--u));
  }
  .service-card__phase { font-size: calc(26.7188 * var(--u)); }
  .service-card__name {
    margin-top: calc(var(--sy) * var(--u));
    font-size: calc(18.0237 * var(--u));
  }
  .service-card p {
    left: calc(var(--px) * var(--u));
    top: calc(var(--py) * var(--u));
    width: calc(var(--pw) * var(--u));
    font-size: calc(15.5859 * var(--u));
  }
  .banner {
    height: calc(439.8 * var(--u));
    padding: 0;
  }
  .banner img {
    height: 100%;
    aspect-ratio: auto;
  }

  /* ---------- Proyectos ---------- */
  .page-title--projects {
    height: calc(203.8 * var(--u));
    padding-top: calc(66 * var(--u));
    padding-left: calc(26 * var(--u));
  }
  .projects {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: calc(563.2 * var(--u)) calc(601.7 * var(--u)) calc(556.3 * var(--u));
  }
  .project {
    position: relative;
    padding: 0;
    --img-h: 355.5;
    --h2-y: 22.8;
    --rule-y: 76.2;
    --p-y: 109;
  }
  .project:nth-child(n+3) { --img-h: 360; --h2-y: 22.5; --rule-y: 75.4; --p-y: 110; }
  .project:nth-child(n+5) { --img-h: 359.4; --h2-y: 21; --rule-y: 66.9; --p-y: 97.7; }
  .project:nth-child(-n+4) { border-bottom: 1px solid var(--ink); }
  .project__image {
    height: calc(var(--img-h) * var(--u));
    aspect-ratio: auto;
  }
  .project__body {
    position: relative;
    margin: 0;
    padding: 0;
    height: calc(100% - var(--img-h) * var(--u));
  }
  .project__title {
    position: absolute;
    left: calc(var(--tx) * var(--u));
    top: calc(var(--h2-y) * var(--u));
    width: calc(330 * var(--u));
    font-size: calc(26.7188 * var(--u));
  }
  .project__rule {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--rule-y) * var(--u));
    margin: 0;
  }
  .project__body p {
    position: absolute;
    left: calc(var(--tx) * var(--u));
    top: calc(var(--p-y) * var(--u));
    width: calc(491 * var(--u));
    margin: 0;
    font-size: calc(15.5859 * var(--u));
  }
  .project--1 { --tx: 20; }
  .project--2 { --tx: 18.5; }
  .project--3 { --tx: 22; }
  .project--4 { --tx: 25; --h2-y: 20.2; }
  .project--5 { --tx: 22; }
  .project--6 { --tx: 26.8; --h2-y: 17.7; }
  /* vertical divider between the two columns (rows 2 and 3) */
  .project--4::before,
  .project--6::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: calc(6.5 * var(--u));
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--ink);
  }
  .project--6::before { top: calc(359.4 * var(--u)); }
}

/* ==========================================================================
   Entrance animation presets (same motion as the original site)
   An element stays hidden until .is-visible is set. The backwards fill holds
   the first keyframe during the delay and the element ends in its natural
   state. Kept last so it overrides the generic [data-reveal] rules above.
   ========================================================================== */
.js [data-reveal="fade-in"],
.js [data-reveal="expand"],
.js [data-reveal="grow"],
.js [data-reveal="grow-quick"],
.js [data-reveal="expand-slow"],
.js [data-reveal="shutters"] {
  opacity: 0;
  translate: none;
  transition: none;
}
.js [data-reveal="fade-in"].is-visible,
.js [data-reveal="expand"].is-visible,
.js [data-reveal="grow"].is-visible,
.js [data-reveal="grow-quick"].is-visible,
.js [data-reveal="expand-slow"].is-visible,
.js [data-reveal="shutters"].is-visible {
  opacity: 1;
}

/* Fade only */
.js [data-reveal="fade-in"].is-visible {
  animation: reveal-fade 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) backwards;
}
/* Fade while scaling up in place */
.js [data-reveal="expand"].is-visible {
  animation:
    reveal-fade 1.2s linear backwards,
    reveal-expand 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) backwards;
}
/* Fade while rising 120px and scaling up */
.js [data-reveal="grow"].is-visible {
  animation:
    reveal-fade 0.96s cubic-bezier(0.645, 0.045, 0.355, 1) var(--reveal-delay, 0.5s) backwards,
    reveal-grow 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) var(--reveal-delay, 0.5s) backwards;
}
/* Same as grow, but shorter (0.8s fade, 1s move) and without a default delay */
.js [data-reveal="grow-quick"].is-visible {
  animation:
    reveal-fade 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) var(--reveal-delay, 0s) backwards,
    reveal-grow 1s cubic-bezier(0.645, 0.045, 0.355, 1) var(--reveal-delay, 0s) backwards;
}
/* Same as expand, but over 2s */
.js [data-reveal="expand-slow"].is-visible {
  animation:
    reveal-fade 2s linear backwards,
    reveal-expand 2s cubic-bezier(0.645, 0.045, 0.355, 1) backwards;
}
/* Twelve vertical slats opening from left to right */
.js [data-reveal="shutters"].is-visible {
  animation: reveal-shutters 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) var(--reveal-delay, 0.5s) backwards;
}

@keyframes reveal-fade { from { opacity: 0; } }
@keyframes reveal-expand { from { transform: scale(0.8); } }
@keyframes reveal-grow { from { transform: translateY(120px) scale(0.8); } }
@keyframes reveal-shutters {
  from {
    clip-path: polygon(
      0% 0%, 0% 100%, 0% 100%, 0% 0%,
      8% 0%, 8% 100%, 8% 100%, 8% 0%,
      16% 0%, 16% 100%, 16% 100%, 16% 0%,
      25% 0%, 25% 100%, 25% 100%, 25% 0%,
      33% 0%, 33% 100%, 33% 100%, 33% 0%,
      41% 0%, 41% 100%, 41% 100%, 41% 0%,
      50% 0%, 50% 100%, 50% 100%, 50% 0%,
      58% 0%, 58% 100%, 58% 100%, 58% 0%,
      66% 0%, 66% 100%, 66% 100%, 66% 0%,
      75% 0%, 75% 100%, 75% 100%, 75% 0%,
      83% 0%, 83% 100%, 83% 100%, 83% 0%,
      91% 0%, 91% 100%, 91% 100%, 91% 0%
    );
  }
  to {
    clip-path: polygon(
      0% 0%, 0% 100%, 8% 100%, 8% 0%,
      8% 0%, 8% 100%, 18% 100%, 18% 0%,
      16% 0%, 16% 100%, 29% 100%, 29% 0%,
      25% 0%, 25% 100%, 41% 100%, 41% 0%,
      33% 0%, 33% 100%, 55% 100%, 55% 0%,
      41% 0%, 41% 100%, 70% 100%, 70% 0%,
      50% 0%, 50% 100%, 87% 100%, 87% 0%,
      58% 0%, 58% 100%, 105% 100%, 105% 0%,
      66% 0%, 66% 100%, 124% 100%, 124% 0%,
      75% 0%, 75% 100%, 145% 100%, 145% 0%,
      83% 0%, 83% 100%, 168% 100%, 168% 0%,
      91% 0%, 91% 100%, 191% 100%, 191% 0%
    );
  }
}

/* Proyectos: the second row's text and the third row's photos start later */
.project:nth-child(n+3):nth-child(-n+4) .project__body,
.project:nth-child(n+5) .project__image { --reveal-delay: 1s; }

/* Home: hero title opens straight away, the lead follows; the about columns
   (heading, text and the dividers beside them) stagger 1s / 1.5s / 2s */
.hero__title { --reveal-delay: 0s; }
.about__col--1, .about__divider--1 { --reveal-delay: 1s; }
.about__col--2 { --reveal-delay: 1.5s; }
.about__col--3, .about__divider--2 { --reveal-delay: 2s; }
/* Home: QG Ingeniería text first, its contact lines next, the photo last */
.associate__text { --reveal-delay: 1s; }
.associate__address, .associate__email, .associate__phone { --reveal-delay: 1.5s; }
.associate__photo { --reveal-delay: 2s; }
/* Home: the contact block starts 1s in (Servicios and Proyectos use 0.5s) */
.contact--home { --reveal-delay: 1s; }
/* Servicios: the cards come in row by row (two cards per row) */
.service-card:nth-child(-n+2) { --reveal-delay: 0s; }
.service-card:nth-child(n+5) { --reveal-delay: 0.8s; }
/* Servicios: the banner photo opens after the cards */
.banner img { --reveal-delay: 1s; }

/* The desktop contact block centres its children with a transform, so the
   moving presets there have to carry that centring in their first keyframe. */
@media (min-width: 1024px) {
  .js .contact [data-reveal="expand"].is-visible { animation-name: reveal-fade, reveal-expand-centered; }
  .js .contact [data-reveal="grow"].is-visible { animation-name: reveal-fade, reveal-grow-centered; }
}
@keyframes reveal-expand-centered { from { transform: translateX(-50%) scale(0.8); } }
@keyframes reveal-grow-centered { from { transform: translateX(-50%) translateY(120px) scale(0.8); } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal="fade-in"],
  .js [data-reveal="expand"],
  .js [data-reveal="grow"],
  .js [data-reveal="grow-quick"],
  .js [data-reveal="expand-slow"],
  .js [data-reveal="shutters"] { opacity: 1; }
  .js [data-reveal="fade-in"].is-visible,
  .js [data-reveal="expand"].is-visible,
  .js [data-reveal="grow"].is-visible,
  .js [data-reveal="grow-quick"].is-visible,
  .js [data-reveal="expand-slow"].is-visible,
  .js [data-reveal="shutters"].is-visible,
  .js .contact [data-reveal="expand"].is-visible,
  .js .contact [data-reveal="grow"].is-visible { animation: none; }
}