/* MR+ Group · INICIO. Page-local styles. Tokens first, then the markup.
   Do not restyle .sc-stage, .sc-copy or any [data-sc-*]: that is the engine. */

/* Self-hosted, latin subset only (Spanish needs nothing above U+00FF).
   Montserrat upright is one variable file covering 300-700; the italic is a
   second variable file. Newsreader ships at 300 because that is the only
   weight this system uses. Served from our own origin, so no third-party DNS,
   TLS or CSS round trip sits in front of first paint. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/montserrat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:100 900;font-display:swap;src:url('assets/fonts/montserrat-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/newsreader-300.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root {
  --sc-canvas:      #0B0B0A;   /* Figma Negro */
  --sc-surface:     #161615;
  --sc-ink:         #FFFFFD;   /* Figma Heading OB */
  --sc-ink-soft:    #CCCCCA;   /* Figma caption ink */
  --sc-accent:      #FDFBEE;   /* Figma Hueso 500. The one accent: the CTA. */
  --sc-accent-ink:  #0B0B0A;
  --sc-font-display: "Montserrat", system-ui, sans-serif;
  --sc-font-text:    "Montserrat", system-ui, sans-serif;
  --sc-shadow-color: 40 6% 4%;

  --bone:   #FDFBEE;
  --paper-ink: #0E0E0D;        /* Figma Heading, on bone */
  --grey:   #E9E9E9;           /* Figma Negro 50 */
  --serif:  "Newsreader", "Georgia", serif;

  --gutter: clamp(1.25rem, 7.64vw, 110px);   /* 110px at 1440 */
  --content: 1220px;

  --t-display: clamp(2.25rem, 1.35rem + 3vw, 3.75rem);   /* 60 */
  --t-h1:      clamp(2rem, 1.3rem + 2.3vw, 3.25rem);      /* 52 */
  --t-h2:      clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);     /* 40 */
  --t-h3:      clamp(1.35rem, 1.1rem + 0.9vw, 2rem);      /* 32 */
  --t-num:     clamp(4.25rem, 2.6rem + 5.6vw, 8rem);      /* 128 */
  --t-ord:     clamp(3.25rem, 2.2rem + 3.6vw, 6rem);      /* 96 */
  --t-year:    clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);   /* 52 */
  --t-body:    1rem;                                      /* 16 */
  --t-small:   0.875rem;                                  /* 14 */
  --t-caption: 0.75rem;                                   /* 12 */

  /* Absolute inks. Unlike --sc-ink these never flip with the ground, so they
     are safe inside a bone section. The warm rule: no pure #fff, no pure #000. */
  --white:      #FFFFFD;
  --near-black: #0B0B0A;
  --ink-graphite:  #1B1B1A;   /* dark CTA fill, ink on bone */
  --ink-charcoal:  #222220;   /* dark buttons, ghost-button stroke */
  --ink-tile:      #131312;   /* method tile ink */
  --ink-soft-bone: #4A463C;   /* secondary copy on bone */
  --field:         #EDECEB;   /* input and select fill */
  --ink-placeholder: #5C5C58; /* placeholder + select ink on --field. 5.7:1 */

  /* Radius scale. Anything pill-shaped uses --r-pill; the browser clamps it to
     half the box, so one value covers every height. */
  --r-xs:   6px;
  --r-sm:   12px;
  --r-md:   20px;    /* image frames, tiles */
  --r-lg:   25px;    /* editorial images */
  --r-xl:   30px;    /* wide photo panels */
  --r-pill: 999px;
}

html { scroll-padding-top: 6rem; }
body { line-height: 1.2; }
.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: fixed; top: -100%; left: var(--gutter); z-index: 100;
  padding: 0.6rem 1rem; background: var(--sc-accent); color: var(--sc-accent-ink);
  border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-small);
}
.skip:focus-visible { top: 1rem; }

/* Light grounds: restate the ink and the colour, or the text keeps the body's
   ink (colour inherits as a computed value). */
.ground-bone  { --sc-ink: var(--paper-ink); --sc-ink-soft: var(--ink-soft-bone); background: var(--bone); color: var(--sc-ink); }
.ground-black { background: var(--sc-canvas); color: var(--sc-ink); }

.sc-grain { opacity: 0.035; }

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem var(--gutter);
  transition: background-color 240ms var(--sc-ease-out), backdrop-filter 240ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.nav.is-scrolled {
  background: color-mix(in oklab, var(--sc-canvas) 72%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* Hide on scroll down, return on scroll up. Transform only: offsetHeight
   stays honest for the snap arithmetic in site.js. */
.nav.is-hidden { transform: translateY(-105%); }
.nav__brand { display: block; line-height: 0; border-radius: var(--r-xs); }
.nav__brand img { width: 81px; height: 58px; }
.nav__menu { display: flex; gap: 17px; align-items: center; }
.nav__pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px; min-height: 39px; line-height: 1.2;
  border-radius: var(--r-pill); border: 0;
  /* Figma VIDRIO MR (glass effect): no stroke, no fill. The blur and a soft inner light
     are what the effect renders, so that is all we draw. */
  background: rgba(20, 20, 20, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  color: var(--white); text-decoration: none; font-size: var(--t-body); white-space: nowrap;
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__pill:hover { background: rgba(20, 20, 20, 0.45); }
}
.nav__pill:active { transform: scale(0.97); }
.nav__toggle {
  display: none; min-height: 44px; padding: 10px 16px; border-radius: var(--r-pill); line-height: 1.2;
  border: 0; color: var(--white); cursor: pointer; font: inherit;
  background: rgba(20, 20, 20, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}

/* ----------------------------------------------------------------- hero -- */
.hero { background: var(--sc-canvas); }
/* Depth: the film pushes in slowly while the copy rides at 1x. */
@media (prefers-reduced-motion: no-preference) {
  .hero video[data-sc-scrub], .hero .sc-stage__poster {
    transform: scale(calc(1 + var(--sc-p, 0) * 0.06));
    transform-origin: 50% 60%;
  }
}
.hero__haze {
  position: absolute; inset: auto -10% -20% -10%; height: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, color-mix(in oklab, #E8B27A 34%, transparent), transparent 70%);
}
/* The scrims exist to keep the copy readable, so they only need to be there
   while the copy is. Each one rides the cue of the block it protects: full
   strength under a line, gone in the gap between lines, which hands the sunset
   grade of the clip back to the reader for the beat where nothing is written
   over it. 0.35 is the strength that measured readable in lab/hero-tint-preview.
   The fallback of 1 keeps the old fixed scrim if the script never runs. */
.hero__scrim--head { opacity: calc(0.35 * var(--sc-cue-copy, 1)); }
.hero__scrim--foot { opacity: calc(0.35 * max(var(--sc-cue-beat, 0), var(--sc-cue-line, 1))); }
.hero__haze       { opacity: calc(0.19 * max(var(--sc-cue-beat, 0), var(--sc-cue-line, 1))); }  /* 0.55 x 0.35 */
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__scrim--head {
  background: linear-gradient(to bottom right,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 76%, transparent) 26%,
    color-mix(in oklab, var(--sc-canvas) 36%, transparent) 48%,
    transparent 66%);
}
.hero__copy {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--gutter); top: clamp(7.5rem, 20vh, 12rem);
  max-width: min(44rem, 74vw);
  will-change: opacity, transform;
}
.hero__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.25rem);
  line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; color: var(--white);
  text-shadow: 0 2px 18px rgba(0,0,0,0.25);
}
.hero__sub {
  margin: 1.1rem 0 0; font-weight: 400; max-width: 34ch; font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
  line-height: 1.4; color: var(--white); letter-spacing: 0.01em;
}
.hero__line p {
  margin: 0; font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.75rem); font-weight: 500;
  line-height: 1.25; color: var(--white); max-width: 22ch; text-wrap: balance;
}

/* Reduced motion: one still composition, no pin. */
.hero--still .hero { position: relative; }
.hero--still .hero__copy, .hero--still .hero__line { opacity: 1; }


/* --------------------------------------------------------------- banner -- */
/* Figma 328:53: 602px tall at 1440, padding 122/191, title 52, figures 128. */
.banner { position: relative; padding-block: clamp(4rem, 8.5vw, 122px); overflow: clip; }
.banner__inner { max-width: 1400px; margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: clamp(2.5rem, 5.2vw, 75px); }
.banner__title {
  margin: 0; font-weight: 400; font-size: var(--t-h1); line-height: 1.2; letter-spacing: -0.01em;
  max-width: none; text-wrap: pretty;
}
.banner__title em { font-style: italic; font-weight: 600; }
.banner__row { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; gap: clamp(1.25rem, 3.4vw, 64px); flex-wrap: nowrap; }
.stat { display: grid; justify-items: center; text-align: center; flex: 1 1 0; min-width: 0; max-width: 320px; }
.stat__figure { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 0.15em; line-height: 1; }
.stat__num { font-family: var(--serif); font-weight: 300; font-size: var(--t-num); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat__plus { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: 400; align-self: center; }
.stat__unit { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); font-weight: 400; margin-left: 0.15em; }
.stat__label { margin: 0.35rem 0 0; font-size: var(--t-body); font-weight: 500; line-height: 1.2; color: var(--sc-ink); max-width: 20rem; text-wrap: pretty; }
/* A hairline that draws across the banner as it enters. */
.banner__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--paper-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--sc-ease-out) 120ms; }
.banner.sc-in .banner__rule { transform: scaleX(1); }

/* ------------------------------------------------------------- services -- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--sc-canvas); }
.service {
  position: relative; overflow: hidden; margin: 0;
  height: clamp(560px, 70.3vw, 1012px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(1rem, 3.1vw, 45px) clamp(2.5rem, 6.3vw, 91px);
}
.service--link { text-decoration: none; color: inherit; }
.service--link:focus-visible { outline-offset: -4px; }
.service__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service__img--zoom { object-position: 18% 50%; }   /* Figma: 179.6% width, left -14.51% */
.service::after {                                       /* Figma SOMBRA MR */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 5px 19px 46.4px rgba(0, 0, 0, 0.47);
}
.service__card {
  position: relative; z-index: 1; display: grid; gap: 10px; padding: 18px; border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.34); color: var(--white);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, var(--white) 16%, transparent);
}
.service__title { margin: 0; font-size: var(--t-h3); font-weight: 500; line-height: 1.2; }
.service__text { margin: 0; font-size: var(--t-body); line-height: 1.2; text-wrap: pretty; }

/* --------------------------------------------------------------- method -- */
.display { margin: 0; font-size: var(--t-display); font-weight: 500; line-height: 0.9; letter-spacing: -0.01em; color: var(--grey); max-width: 11ch; text-wrap: balance; }
.method { padding-block: clamp(4rem, 6.9vw, 100px); }
.method__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 11vw, 160px); align-items: center; margin-top: clamp(2.5rem, 4.6vw, 66px); }
.method__left { display: grid; gap: 26px; }
.method__img { width: 100%; height: auto; aspect-ratio: 530 / 498; object-fit: cover; border-radius: var(--r-lg); }
.method__caption { margin: 0; font-size: var(--t-caption); font-weight: 500; line-height: 1.2; color: var(--sc-ink-soft); max-width: 62ch; }
.cta {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 28px;
  border-radius: var(--r-pill); background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 700; font-size: var(--t-body); text-decoration: none; white-space: nowrap;
  transition: transform 120ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .cta:hover { background: var(--white); } }
.cta:active { transform: translateY(1px); }
.method__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
.principle { display: grid; grid-template-columns: minmax(6rem, 130px) 1fr; gap: clamp(2rem, 7vw, 107px); align-items: start; color: var(--grey); }
.principle + .principle { border-top: 1px solid var(--grey); padding-top: 36px; }
.principle__num { font-size: var(--t-ord); font-weight: 300; line-height: 0.9; }
.principle__body { display: grid; gap: 18px; }
.principle__title { margin: 0; font-size: var(--t-h2); font-weight: 400; line-height: 1.2; }
.principle__text { margin: 0; font-size: var(--t-body); line-height: 1.2; }

/* --------------------------------------------------------------- family -- */
.family { position: relative; overflow: clip; min-height: clamp(560px, 55vw, 796px); background: var(--sc-canvas); color: var(--white); }
.family__bg { position: absolute; inset: 0; z-index: 0; }
.family__bg img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; max-width: none; object-fit: cover; }
.family__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 42%, color-mix(in oklab, var(--sc-canvas) 25%, transparent) 100%); }
.family__inner { position: relative; z-index: 2; padding-top: clamp(3.5rem, 6.25vw, 90px); padding-bottom: clamp(3rem, 6vw, 90px); display: grid; gap: clamp(2rem, 3.9vw, 56px); }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(2rem, 4.2vw, 60px); }
.milestone { display: grid; gap: 6px; width: clamp(16rem, 23vw, 337px); }
.milestone__dot { width: 31px; height: 31px; }
.milestone__year { margin: 0; font-size: var(--t-year); font-weight: 300; line-height: 1.2; }
.milestone__name { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.milestone__text { margin: 0; font-size: var(--t-body); line-height: 1.2; color: var(--grey); max-width: 290px; }

/* ----------------------------------------------------------------- foot -- */
.foot { padding: clamp(2rem, 2.3vw, 33px) var(--gutter); min-height: 206px; display: grid; place-items: center; }
.foot__cols { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2.5rem, 24vw, 352px); }
.foot__col { display: grid; gap: 12px; align-content: start; }
.foot__title { margin: 0; font-size: var(--t-body); font-weight: 700; line-height: 1.2; }
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-small); line-height: 1.2; }
.foot__social { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 21px; align-items: center; }
.foot__social a { display: inline-flex; padding: 6px; margin: -6px; border-radius: var(--r-xs); line-height: 0; }
.foot__social img { width: 20px; height: 20px; }
.foot__social img[height="16"] { height: 16px; }

/* ------------------------------------------------------------ motion -- */
/* Service cards: rise in after the column wipe; lift on hover (fine pointer only). */
.service__card.sc-in { transition: transform 180ms var(--sc-ease-out), background-color 180ms var(--sc-ease-out); }
.service__img { transition: transform 600ms var(--sc-ease-out); transform-origin: 50% 60%; }
@media (hover: hover) and (pointer: fine) {
  .service:hover .service__card { transform: translateY(-4px); background: rgba(0, 0, 0, 0.44); }
  .service:hover .service__img { transform: scale(1.03); }
}
/* Method: the hairlines between principles draw once the list has entered. */
.principle + .principle { border-top: 0; position: relative; }
.principle + .principle::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--grey); transform: scaleX(0); transform-origin: 0 50%; transition: transform 800ms var(--sc-ease-out); }
.method__list.sc-in .principle:nth-child(2)::before { transform: scaleX(1); transition-delay: 260ms; }
.method__list.sc-in .principle:nth-child(3)::before { transform: scaleX(1); transition-delay: 420ms; }
/* Timeline: a track draws left to right through the dots, dots settle from 0.6. */
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; right: 0; top: 15px; height: 1px; background: color-mix(in oklab, var(--white) 40%, transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1100ms var(--sc-ease-out) 80ms; }
.timeline.sc-in::before { transform: scaleX(1); }
.milestone__dot { transform: scale(0.6); transition: transform 520ms var(--sc-ease-out); }
.timeline.sc-in .milestone__dot { transform: scale(1); }
.timeline.sc-in .milestone:nth-child(2) .milestone__dot { transition-delay: 240ms; }
.timeline.sc-in .milestone:nth-child(3) .milestone__dot { transition-delay: 480ms; }
/* Footer links: underline slides in. */
.foot__list a { position: relative; text-decoration: none; }
.foot__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .foot__list a:hover::after, .foot__list a:focus-visible::after { transform: scaleX(1); } }
.foot__social a { transition: transform 120ms var(--sc-ease-out); }
.foot__social a:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .banner__rule, .timeline::before, .principle + .principle::before { transform: none; transition: none; }
  .milestone__dot { transform: none; transition: none; }
  .service__img, .service__card.sc-in { transition: none; }
  .service:hover .service__card, .service:hover .service__img { transform: none; }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .nav { padding: 0.9rem var(--gutter); }
  .nav__brand img { width: 62px; height: 44px; }
  .nav__toggle { display: inline-flex; align-items: center; }
  .nav__menu {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 0.25rem);
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px; border-radius: 18px;
    background: color-mix(in oklab, var(--sc-canvas) 86%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .nav__menu:not(.is-open) { display: none; }
  .nav__pill { min-height: 44px; }

  .hero__copy { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(clamp(9rem, 26vh, 15rem) + var(--sc-urlbar, 0px)); max-width: none; }
  .hero__title { font-size: clamp(2.2rem, 1.4rem + 5.2vw, 3rem); }
  .hero__scrim--head {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 30%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
      transparent 68%);
  }
  .hero__line { bottom: calc(clamp(2.5rem, 8vh, 5rem) + var(--sc-urlbar, 0px)); }
  .banner__row { flex-wrap: wrap; }
  .stat { flex: 1 1 100%; max-width: none; }
  .services { grid-template-columns: 1fr; }
  .service { height: clamp(420px, 92vh, 640px); padding: 0 var(--gutter) 2rem; }
  .display { max-width: 14ch; }
  .method__grid { grid-template-columns: 1fr; gap: 3rem; }
  .principle { grid-template-columns: 4.5rem 1fr; gap: 1.25rem; }
  .milestone { width: 100%; }
  .foot__cols { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .foot { place-items: start; padding-block: 2.5rem; }
}
/* ------------------------------------- timeline: vertical on mobile/tablet -- */
@media (max-width: 960px) {
  .timeline {
    --tl-gap: clamp(2rem, 4.2vw, 60px);
    --tl-dot-center: calc((var(--t-year) * 1.2 - 31px) / 2 + 15.5px);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--tl-gap);
  }
  .timeline::before { content: none; }
  .milestone {
    width: 100%;
    position: relative;
    grid-template-columns: 31px minmax(0, 1fr);
    column-gap: clamp(0.9rem, 3vw, 1.5rem);
    row-gap: 6px;
    align-items: start;
  }
  .milestone__dot {
    grid-column: 1;
    grid-row: 1;
    margin-top: calc((var(--t-year) * 1.2 - 31px) / 2);
  }
  .milestone__year,
  .milestone__name,
  .milestone__text { grid-column: 2; }
  .milestone__text { max-width: 46ch; }
  /* The track now runs down: one segment per milestone, dot centre to dot centre. */
  .milestone:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: var(--tl-dot-center);
    bottom: calc(-1 * (var(--tl-gap) + var(--tl-dot-center)));
    width: 1px;
    background: color-mix(in oklab, var(--white) 40%, transparent);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform 900ms var(--sc-ease-out) 80ms;
  }
  .timeline.sc-in .milestone:not(:last-child)::before { transform: scaleY(1); }
  .timeline.sc-in .milestone:nth-child(2)::before { transition-delay: 320ms; }
  @media (prefers-reduced-motion: reduce) {
    .milestone:not(:last-child)::before { transform: none; transition: none; }
  }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .nav, .nav__pill, .cta { transition: none; }
}


/* ========================================================== PROYECTOS pages == */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Light nav variant. Figma 430:317: bone ground, dark outlined pills, dark logo. */
.nav--light .nav__pill { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-charcoal); color: var(--near-black); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav--light .nav__toggle { color: var(--near-black); background: transparent; box-shadow: inset 0 0 0 1px var(--ink-charcoal); }
.nav--light .nav__pill.is-current { background: var(--ink-charcoal); color: var(--bone); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .nav--light .nav__pill:hover { background: rgba(34, 34, 32, 0.08); } }
.nav--light.is-scrolled { background: rgba(253, 251, 238, 0.86); }
@media (max-width: 860px) { .nav--light .nav__menu { background: rgba(253, 251, 238, 0.96); } }

/* Step buttons. Figma Frame 185/187: 58px square, radius 10, #D9D9D9, dim at 25%. */
.stepbtn { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 10px; background: #D9D9D9; color: var(--ink-graphite); border: 0; cursor: pointer; text-decoration: none; transition: transform 120ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out); }
.stepbtn.is-off { opacity: 0.25; pointer-events: none; }
.stepbtn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .stepbtn:hover { background: var(--white); } }
.stepbtn--dark { background: var(--ink-charcoal); color: var(--bone); }
@media (hover: hover) and (pointer: fine) { .stepbtn--dark:hover { background: var(--near-black); } }
.stepbtn[disabled] { opacity: 0.25; cursor: default; }

/* Category panels. Figma 130:606: 900px black panels, 123px gap between columns. */
.page-proyectos { background: var(--near-black); }
.catpanel { background: var(--near-black); color: var(--white); min-height: clamp(640px, 100vh, 900px); display: flex; align-items: center; padding-block: clamp(3rem, 8.5vw, 123px); scroll-margin-top: 0; }
.catpanel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 8.5vw, 123px); align-items: start; }
.catpanel__copy { display: grid; gap: 28px; }
.catpanel__num { margin: 0 0 -10px; font-size: clamp(5rem, 3rem + 7vw, 9.5rem); font-weight: 300; line-height: 1.2; }
.catpanel__title { margin: 0 0 16px; font-size: var(--t-display); font-weight: 400; line-height: 1.2; }
.catpanel__text { margin: 0; padding-top: 28px; border-top: 1px solid var(--white); font-size: var(--t-body); line-height: 1.2; max-width: 62ch; }
.catpanel__copy .btn { margin-top: 0; }
.catpanel__copy .btn::before { content: none; }
.catpanel__copy > .btn { position: relative; }
.catpanel__copy::after { content: none; }
/* VER PROYECTOS. Figma 421:103: 184 x 39 bone pill, 10px padding and gap,
   Montserrat Bold 16/1.2 in #0E0E0D, 12 x 8 arrow at 1px. Two classes so the
   base .btn further down (500 weight, 26px padding, 44px height) cannot win. */
.btn.btn--bone { gap: 10px; min-height: 39px; padding: 10px; border-radius: var(--r-pill); background: var(--bone); color: var(--paper-ink); font-size: var(--t-body); font-weight: 700; line-height: 1.2; justify-self: end; }
.btn.btn--bone svg { color: #1A1919; }
.btn.btn--bone svg path { stroke-width: 1; }
@media (hover: hover) and (pointer: fine) { .btn.btn--bone:hover { background: var(--white); } }
.catpanel__copy .btn--bone { justify-self: end; margin-top: 0; }
.catpanel__rule { height: 1px; background: var(--white); }
.catpanel__media { display: grid; gap: 38px; justify-items: end; }
.catpanel__img { width: 100%; height: auto; aspect-ratio: 548 / 485; object-fit: cover; border-radius: var(--r-md); }
.catpanel__progress { width: 100%; display: grid; gap: 12px; }
.catpanel__bars { display: flex; gap: 20px; }
.catpanel__bars i { flex: 1; height: 3px; background: var(--white); }
.catpanel__bars i.is-current { background: #4E4E4D; }
.catpanel__count { font-size: var(--t-body); }
.catpanel__nav { display: flex; gap: 20px; }

/* Listing pages. Figma 130:514: bone, 60 Light centred title, coverflow rail 600px. */
.listing { padding: clamp(6rem, 12vw, 181px) 0 clamp(3rem, 5.5vw, 80px); }
.listing__title { margin: 0 auto clamp(2.5rem, 4.9vw, 70px); font-size: var(--t-display); font-weight: 300; line-height: 1.2; text-align: center; color: var(--near-black); }
.coverflow { position: relative; }
.coverflow__rail {
  list-style: none; margin: 0; padding: 30px calc(50% - 222px) 40px;
  display: flex; align-items: center; gap: 36px; height: 600px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.coverflow__rail::-webkit-scrollbar { display: none; }
.coverflow__rail.is-js { scroll-snap-type: none; cursor: grab; }
.coverflow__rail.is-grabbing { cursor: grabbing; user-select: none; }
.coverflow__rail.is-js .pcard__img { pointer-events: none; }
.coverflow__rail:focus-visible { outline: 2px solid var(--ink-charcoal); outline-offset: -2px; }
.pcard { flex: 0 0 445px; scroll-snap-align: center; transform-origin: 50% 50%; will-change: transform, opacity; }
.pcard__link { position: relative; display: flex; align-items: flex-end; height: 550px; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 14.4px rgba(0, 0, 0, 0.35); text-decoration: none; color: var(--white); padding: 24px 23px; }
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sc-ease-out); }
.pcard__label { position: relative; z-index: 1; padding: 5px 30px; border-radius: var(--r-pill); font-size: 1.25rem; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
@media (hover: hover) and (pointer: fine) { .pcard__link:hover .pcard__img { transform: scale(1.03); } }
.pcard__link:focus-visible { outline: 3px solid var(--ink-charcoal); outline-offset: 3px; }
.coverflow__nav { display: flex; justify-content: center; gap: 20px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .pcard { transform: none !important; opacity: 1 !important; } .pcard__img { transition: none; } }

/* Detail pages. Figma 130:549: bone, padding 110, gap 30, radius 25. */
.pdetail { padding-block: clamp(6.5rem, 12vw, 180px) clamp(3rem, 7.6vw, 110px); }
.pdetail__wrap { max-width: calc(1220px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 30px; }
.pdetail figure, .lcollage figure { margin: 0; }
.pdetail__hero img, .pdetail__shot img, .pdetail__tall img { display: block; width: 100%; height: auto; aspect-ratio: 1220 / 612; object-fit: cover; border-radius: var(--r-lg); }
.pdetail__shot img { aspect-ratio: 802 / 354; }
.pdetail__tall img { aspect-ratio: 802 / 738; height: 100%; }
.pdetail__col--pair { grid-template-columns: 406fr 371fr; gap: 30px; }
.pdetail__col--pair .pdetail__tall img { aspect-ratio: auto; height: 100%; min-height: 420px; }
.pdetail__col > figure, .pdetail__col > figure img { height: 100%; }
@media (max-width: 960px) { .pdetail__col--pair { grid-template-columns: 1fr 1fr; } .pdetail__tall img { aspect-ratio: 802 / 738; height: auto; } }
.pdetail__row { display: grid; grid-template-columns: 1fr 398px; gap: 20px; align-items: stretch; }
.pdetail__col { display: grid; gap: 30px; align-content: stretch; }
.pdetail__card { border: 2px solid var(--near-black); border-radius: var(--r-lg); padding: clamp(2rem, 4.5vw, 65px) 20px; display: flex; flex-direction: column; justify-content: center; gap: 24px; color: var(--near-black); }
.pdetail__num { margin: 0; font-size: var(--t-display); font-weight: 300; line-height: 1.2; }
.pdetail__title { margin: -8px 0 0; font-size: var(--t-h3); font-weight: 500; line-height: 1.2; }
.pdetail__text { margin: 0; font-size: var(--t-body); line-height: 1.2; }
.pdetail__tags { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 16px; justify-items: start; }
.pdetail__tags li { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--near-black); color: var(--white); font-size: var(--t-body); line-height: 1; white-space: nowrap; }
.pdetail__pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 10px; }
.btn--outline { border: 1px solid var(--ink-charcoal); color: var(--ink-charcoal); background: transparent; font-size: var(--t-small); }
@media (hover: hover) and (pointer: fine) { .btn--outline:hover { background: var(--ink-charcoal); color: var(--bone); } }
@media (max-width: 960px) {
  .pdetail__row { grid-template-columns: 1fr; }
  .catpanel__grid { grid-template-columns: 1fr; }
  .catpanel__media { justify-items: stretch; }
  .catpanel__copy .btn--bone { justify-self: start; }
}
@media (max-width: 860px) {
  .catpanel { padding-top: 6.5rem; }
  .catpanel + .catpanel { padding-top: 3rem; }
  .coverflow__rail { height: auto; padding: 20px calc(50% - min(39vw, 222px)) 30px; gap: 20px; scroll-snap-type: x mandatory; }
  .pcard { flex: 0 0 min(78vw, 445px); transform: none !important; opacity: 1 !important; }
  .pcard__link { height: min(96vw, 550px); }
  .listing { padding-top: 7rem; }
}


/* ========================================================= CONSTRUCCION pages == */
.arq-hero--con { height: clamp(560px, 52vw, 750px); border-radius: 0 0 30px 30px; }
.arq-card--light { background: rgba(53, 50, 50, 0.18); width: min(598px, 100%); }
.btn--bold { font-weight: 700; }
.catpanel--brown, .page-obras { background: #2B241F; }
.catpanel--brown { background: #2B241F; }

/* Process. Figma 375:295: 106/74 padding, copy + 2x2 tiles #E6E4D9 radius 19. */
.process { padding-block: clamp(4rem, 7.4vw, 106px); }
.process__inner { max-width: calc(1292px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 3.75vw, 54px); align-items: start; }
.process__copy { display: grid; gap: 15px; }
.process__copy .display { max-width: 14ch; }
.process__text { margin: 0; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.44; color: var(--ink-tile); max-width: 52ch; text-wrap: pretty; }
.process__copy .btn { margin-top: 10px; }
.process__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 15px; }
.tile { background: #E6E4D9; border-radius: var(--r-md); padding: 26px; display: grid; gap: 14px; align-content: center; min-height: 240px; color: var(--ink-tile); }
.tile__num { font-size: 1.5rem; line-height: 1.2; }
.tile__title { margin: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.tile__text { margin: 0; font-size: var(--t-body); line-height: 1.2; }

/* Gestión integral. Figma 375:391. */
.gestion { padding-block: clamp(3rem, 7.4vw, 106px); }
.gestion__inner { display: grid; gap: 36px; }
.gestion__fig { margin: 0; }
.gestion__fig img { width: 100%; height: auto; aspect-ratio: 1220 / 476; object-fit: cover; border-radius: var(--r-xl); }
.gestion__copy { display: grid; gap: 26px; }
.gestion__title { margin: 0; font-size: var(--t-h1); font-weight: 500; line-height: 1.2; color: var(--near-black); max-width: 14ch; text-wrap: balance; }
.gestion__text { margin: 0; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.44; color: var(--ink-tile); text-wrap: pretty; }

/* Detail extras: three tall photos in a row. Figma 465:367. */
.pdetail__triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pdetail__triple figure { margin: 0; }
.pdetail__triple img { display: block; width: 100%; height: auto; aspect-ratio: 386 / 626; object-fit: cover; border-radius: var(--r-lg); }
@media (max-width: 960px) { .process__inner { grid-template-columns: 1fr; } .pdetail__triple { grid-template-columns: 1fr; } .pdetail__triple img { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .process__grid { grid-template-columns: 1fr; } .tile { min-height: 0; } }


/* ========================================================== MAQUINARIAS pages == */
/* Hero. Figma 329:174: 810px photo with a multiply overlay, 803px centred column. */
/* The photo clips in its own layer, so the open search menu can hang past the
   bottom of the hero over the next section. */
.mq-hero { position: relative; z-index: 2; min-height: clamp(600px, 56vw, 810px); display: flex; align-items: center; justify-content: center; background: var(--ink-graphite); color: var(--white); padding: 7rem var(--gutter) 3rem; }
.mq-hero__media { position: absolute; inset: 0; overflow: clip; }
.mq-hero__img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.mq-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.6)); }
.mq-hero__inner { position: relative; z-index: 1; width: min(803px, 100%); display: grid; gap: 28px; justify-items: center; text-align: center; }
.mq-hero__title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; }
.mq-hero__sub { margin: -20px 0 0; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.44; }

/* Search. Figma 329:182: a 737px glass bar, Categoría 201px, Maquinaria 223px,
   BUSCAR 181px. The native selects show only without script. */
.mq-search { width: min(737px, 100%); display: flex; gap: 12px; align-items: center; justify-content: center; padding: 12px 18px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mq-search__select { flex: 0 0 201px; height: 44px; border: 0; border-radius: var(--r-pill); font-size: 0.75rem; min-width: 0; padding: 0 44px 0 18px; color: var(--ink-placeholder); appearance: none; -webkit-appearance: none; background: var(--field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235C5C58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center; cursor: pointer; }
.mq-search__select--wide { flex-basis: 223px; }
.mq-search__btn { flex: 0 0 181px; height: 34px; padding: 0 26px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: var(--field); font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: background-color 140ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .mq-search__btn:hover { background: rgba(255, 255, 255, 0.14); } }
.mq-search__btn:active { transform: translateY(1px); }
.mq-search__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* Drop-down. Figma component 334:460. Closed: field grey. Open: the button goes
   warm grey and the list drops 8px below in a 21px-radius card. The Figma inks
   (#B2B2B1 on #EDECEB, white on #C8C4C1) are too faint to read, so the text
   uses the placeholder and graphite inks instead. */
.dd { position: relative; flex: 0 0 201px; min-width: 0; text-align: left; }
.dd--wide { flex-basis: 223px; }
.dd__btn { width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--field); color: var(--ink-placeholder); font: inherit; font-size: 0.75rem; line-height: 1.15; text-align: left; cursor: pointer; transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
.dd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd.is-set .dd__btn { color: var(--ink-graphite); }
.dd.is-open .dd__btn { background: #C8C4C1; color: var(--ink-graphite); }
.dd__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.dd__chev { flex: 0 0 auto; color: #6E6E6C; transition: transform 200ms var(--sc-ease-out); }
.dd.is-open .dd__chev { transform: rotate(180deg); color: var(--ink-graphite); }
.dd__list { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 100%; min-width: 220px; max-height: min(374px, 56vh); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 16px 8px; list-style: none; display: grid; gap: 8px; align-content: start; border-radius: 21px; background: var(--field); box-shadow: 0 18px 40px -12px rgba(11, 11, 10, 0.45); }
.dd--wide .dd__list { min-width: 300px; }
.dd__list[hidden] { display: none; }
.dd__list:focus { outline: none; }
.dd__list:focus-visible { box-shadow: 0 18px 40px -12px rgba(11, 11, 10, 0.45), 0 0 0 2px var(--white); }
.dd__opt { padding: 10px 18px; border-radius: var(--r-pill); color: var(--ink-placeholder); font-size: 0.75rem; line-height: 1.2; text-align: center; cursor: pointer; }
.dd__opt.is-active { background: #DEDAD5; color: var(--ink-graphite); }
.dd__opt[aria-selected="true"] { color: var(--ink-graphite); font-weight: 700; }
.dd__opt[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .dd__chev, .dd__btn { transition: none; } }
.mq-hero__alt { margin: 18px 0 0; font-size: var(--t-body); line-height: 1.2; }
.mq-hero__wa { color: #34C759; text-decoration: none; }
.mq-hero__wa:hover { text-decoration: underline; }

/* Grids. Figma 329:218 / 332:53: 1014px column, 4 tiles per row, 187px image, 16px label. */
.mq-cats, .mgrid { padding-block: clamp(4rem, 8.5vw, 123px); }
.mgrid { padding-top: clamp(7rem, 12vw, 181px); }
.mgrid__inner { max-width: calc(1014px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 38px; }
.mgrid__title { margin: 0; font-size: var(--t-h3); font-weight: 700; line-height: 1.2; color: var(--ink-tile); }
.mq-cats .mgrid__title { margin-bottom: 8px; }
.mgrid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 46px 24px; }
.mtile { display: grid; gap: 6px; justify-items: center; text-align: center; color: var(--near-black); }
.mtile__link { display: grid; gap: 6px; justify-items: center; text-decoration: none; color: inherit; width: 100%; border-radius: var(--r-sm); }
.mtile__fig { margin: 0; width: 100%; aspect-ratio: 235.5 / 187; border-radius: var(--r-md); overflow: hidden; background: #EAE6DD; }
.mtile__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .mtile__link:hover img { transform: scale(1.04); } }
.mtile__link:focus-visible { outline: 2px solid var(--ink-graphite); outline-offset: 4px; }
.mtile__label { margin: 0; font-size: var(--t-body); line-height: 1.2; text-wrap: balance; }
.mtile--back { align-self: start; }
.mtile__back { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: var(--r-md); background: #EAE6DD; transition: background-color 140ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .mtile__back:hover { background: #E0DBCF; } }
.mtile__back:focus-visible { outline: 2px solid var(--ink-graphite); outline-offset: 4px; }
.mtile[hidden] { display: none; }
.mgrid__hint { margin: -20px 0 0; font-size: var(--t-body); color: var(--ink-soft-bone); }
.mgrid__hint a { color: inherit; }

/* Condiciones. Figma 329:291: 108/91 padding, 778px copy + image. */
.mq-cond { padding-block: clamp(4rem, 7.5vw, 108px); }
.mq-cond__inner { max-width: calc(1220px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 778fr) minmax(0, 393fr); gap: 49px; align-items: start; }
.mq-cond__copy { display: grid; gap: 16px; }
.mq-cond__eyebrow { margin: 0 0 -9px; font-size: var(--t-caption); color: var(--near-black); }
.mq-cond__title { margin: 0; font-size: var(--t-h2); font-weight: 700; line-height: 1.2; color: var(--ink-tile); max-width: 14ch; }
.mq-cond__lede { margin: 0; font-size: var(--t-body); line-height: 1.2; color: var(--near-black); max-width: 62ch; }
.mq-cond__list { margin: 64px 0 0; padding: 0; list-style: none; counter-reset: cond; display: grid; grid-template-columns: 1fr 1fr; gap: 44px 45px; color: var(--near-black); }
.mq-cond__list li { counter-increment: cond; display: grid; gap: 8px; }
.mq-cond__list h3 { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.mq-cond__list h3::before { content: counter(cond) ". "; }
.mq-cond__list p { margin: 0; font-size: var(--t-body); line-height: 1.2; max-width: 40ch; }
.mq-cond__fig { margin: 0; }
.mq-cond__fig img { width: 100%; height: auto; aspect-ratio: 393 / 494; object-fit: cover; object-position: 27% 50%; border-radius: var(--r-xl); }
@media (max-width: 960px) { .mgrid__list { grid-template-columns: repeat(3, 1fr); gap: 32px 18px; } .mq-cond__inner { grid-template-columns: 1fr; } .mq-cond__fig img { aspect-ratio: 4 / 3; } }
@media (max-width: 860px) { .mq-search { flex-wrap: wrap; border-radius: 28px; } .mq-search .dd, .mq-search__select { flex: 1 1 100%; } .mq-search__btn { flex: 1 1 100%; height: 44px; } .dd__list, .dd--wide .dd__list { min-width: 0; } .mq-cond__list { grid-template-columns: 1fr; margin-top: 32px; } }
@media (max-width: 600px) { .mgrid__list { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; } }
@media (prefers-reduced-motion: reduce) { .mtile__fig img { transition: none; } .mtile__link:hover img { transform: none; } }


/* Snap pages (proyectos.html, obras.html): one panel per screen, wheel jumps. */
.snap-page { scroll-snap-type: y mandatory; }
.page-proyectos .catpanel { position: relative; height: 100vh; height: 100svh; min-height: 0; padding-block: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.page-proyectos .catpanel__grid { align-items: center; padding-top: 4rem; padding-bottom: 6rem; }
.page-proyectos .catpanel__num { font-size: clamp(4rem, 10vh + 2vw, 9.5rem); margin-bottom: -6px; }
.page-proyectos .catpanel { --cp-w: min(100%, 548px, calc(46vh * 1.13)); }
.page-proyectos .catpanel__img { width: var(--cp-w); max-width: 100%; height: auto; }
.page-proyectos .catpanel__progress { width: var(--cp-w); max-width: 100%; }
.page-proyectos .catpanel__media { justify-items: end; }
.page-proyectos .catpanel__nav { position: absolute; right: var(--gutter); bottom: clamp(1.25rem, 4vh, 40px); display: grid; grid-template-columns: 58px 58px; gap: 20px; }
.page-proyectos .stepbtn.is-hidden { visibility: hidden; }
.page-proyectos .foot { scroll-snap-align: end; }
@media (max-width: 960px) {
  .page-proyectos .catpanel { height: auto; min-height: 100svh; overflow: visible; }
  .page-proyectos .catpanel__grid { padding-top: 6.5rem; padding-bottom: 7rem; }
  .page-proyectos .catpanel__img { max-height: none; width: 100%; }
}

/* ======================================================= ARQUITECTURA page == */
/* Hero. Figma 380:578: photo 1440x733 with a glass card 380:549 at 110/142, 581 wide. */
.arq-hero { position: relative; overflow: clip; height: clamp(560px, 50.9vw, 733px); background: var(--sc-canvas); display: flex; align-items: center; }
.arq-hero__img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; max-width: none; object-fit: cover; object-position: 50% 45%; }
.arq-hero__wrap { position: relative; z-index: 2; padding-top: clamp(4.5rem, 7vw, 101px); }
.arq-card {
  width: min(581px, 100%); padding: clamp(1.5rem, 2.8vw, 40px) clamp(1.25rem, 1.8vw, 26px);
  border-radius: var(--r-xl); background: rgba(53, 50, 50, 0.33);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);          /* Figma VIDRIO MR */
  color: var(--white); display: grid; gap: 12px;
}
.arq-card__title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem); font-weight: 500; line-height: 1.2; text-wrap: balance; max-width: 16ch; }
.arq-card__text { margin: 0; font-size: var(--t-body); line-height: 1.2; max-width: 52ch; text-wrap: pretty; }
.arq-card__tags { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.arq-card__tags li { min-width: 168px; padding: 10px 22px; border: 1px solid var(--white); border-radius: var(--r-pill); font-size: var(--t-caption); font-weight: 500; text-align: center; white-space: nowrap; }
.arq-card .btn { margin-top: calc(70px - 24px); }
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 26px; min-height: 44px; border-radius: var(--r-pill); text-decoration: none; font-weight: 500; white-space: nowrap; justify-self: start;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
.btn svg { transition: transform 160ms var(--sc-ease-out); }
.btn:active { transform: translateY(1px); }
.btn--white { background: var(--white); color: var(--near-black); font-size: var(--t-caption); }
.btn--dark { background: var(--ink-charcoal); color: var(--white); font-size: var(--t-body); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(4px); }
  .btn--white:hover { background: var(--bone); }
  .btn--dark:hover { background: var(--near-black); }
}
.nav__pill.is-current { background: rgba(253, 251, 238, 0.92); box-shadow: none; color: var(--sc-accent-ink); }

/* Del concepto al espacio: the INICIO spread on a bone ground. Figma 383:581. */
.method--bone { --sc-ink: var(--ink-graphite); --sc-ink-soft: var(--ink-soft-bone); color: var(--sc-ink); }
.display--dark { color: var(--ink-graphite); }
.method--bone .principle { color: var(--ink-graphite); }
.method--bone .principle + .principle::before { background: var(--ink-graphite); }
.method__img--wide { aspect-ratio: 530 / 302; }
.method__lede { margin: 0; font-size: var(--t-body); line-height: 1.2; color: var(--grey); max-width: 62ch; text-wrap: pretty; }
.method__lede--soft { color: var(--ink-soft-bone); }
.cta--dark { background: var(--ink-graphite); color: var(--field); }                        /* var(--ink-charcoal) under 20% black */
@media (hover: hover) and (pointer: fine) { .cta--dark:hover { background: var(--near-black); } }

/* Nuestros proyectos. Figma 383:617: 1014px column centred, 78px top. */
.projects { padding-block: clamp(3.5rem, 5.4vw, 78px); }
.projects__inner { max-width: calc(1014px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: clamp(3rem, 5.5vw, 80px); }
.projects__head { display: grid; gap: 12px; max-width: 872px; }
.projects__eyebrow { margin: 0 0 -5px; font-size: var(--t-caption); font-weight: 500; letter-spacing: 0.02em; color: var(--near-black); }
.projects__title { margin: 0; font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 0.97; letter-spacing: -0.01em; color: var(--near-black); text-wrap: balance; }
.projects__text { margin: 0; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.44; color: var(--ink-tile); max-width: 62ch; text-wrap: pretty; }
.projects__head .btn { margin-top: 20px; }
.projects__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3.3vw, 34px); }
.project__link { display: grid; gap: 14px; text-decoration: none; color: var(--ink-graphite); border-radius: var(--r-sm); }
.project__frame { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 315 / 261; }
.project__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 24.5px 11px rgba(0, 0, 0, 0.25); }  /* SOMBRA MR 2 */
.project__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sc-ease-out); }
.project__badge { position: absolute; top: 18px; right: 11px; width: 41px; height: 41px; z-index: 1; transition: transform 200ms var(--sc-ease-out); }
.project__label { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 25px; min-height: 33px; border-radius: var(--r-pill); background: #C7C1B9; font-size: var(--t-body); font-weight: 700; color: var(--ink-graphite); transition: background-color 140ms var(--sc-ease-out); }
.project__label svg { transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .project__link:hover .project__label { background: #b9b2a8; }
  .project__link:hover .project__label svg { transform: translateX(4px); }
  .project__link:hover .project__img { transform: scale(1.03); }
  .project__link:hover .project__badge { transform: translateX(2px); }
}
.project__link:focus-visible { outline: 2px solid var(--ink-graphite); outline-offset: 4px; }
@media (max-width: 860px) {
  .arq-hero { height: auto; min-height: clamp(560px, 100svh, 760px); align-items: flex-end; padding-bottom: 2rem; }
  .arq-hero__img { top: 0; height: 100%; }
  .arq-card__tags li { min-width: 0; flex: 1 1 auto; }
  .projects__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .project__img, .btn svg, .project__label svg, .project__badge { transition: none; }
  .project__link:hover .project__img { transform: none; }
}

/* Detail pager buttons. Figma 620:174 / 620:186 / 620:199: one dark pill in four
   states. Pressed and disabled are the warm greys from the component set. */
.pdetail__steps { display: flex; gap: 19px; flex-wrap: wrap; }
.btn--step { background: var(--ink-charcoal); color: var(--white); font-size: var(--t-body); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .btn--step:hover { background: var(--paper-ink); } }
.btn--step:active { background: #9C9489; color: var(--ink-charcoal); }
.btn--step.is-disabled { background: #999998; color: var(--bone); cursor: default; }
.btn--step.is-disabled:active { transform: none; }
@media (hover: hover) and (pointer: fine) { .btn--step.is-disabled:hover { background: #999998; } .btn--step.is-disabled:hover svg { transform: none; } }
.btn--step:focus-visible { outline: 2px solid var(--ink-charcoal); outline-offset: 3px; }

/* Home: machinery band under the services. Figma 605:71. */
.maq-band { background: var(--bone); color: var(--near-black); padding: clamp(4rem, 7.6vw, 109px) var(--gutter); }
.maq-band__grid { max-width: 1199px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 589fr) minmax(0, 476fr); gap: clamp(2rem, 9.3vw, 134px); align-items: center; }
.maq-band__copy { display: grid; gap: 18px; justify-items: start; }
.maq-band__title { margin: 0; font-size: var(--t-h2); font-weight: 400; line-height: 1.2; text-wrap: balance; }
.maq-band__title strong { font-weight: 700; }
.maq-band__text { margin: 0; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.2; color: #72716C; max-width: 36ch; text-wrap: pretty; }  /* Figma #999998, darkened to 4.6:1 on bone */
.maq-band__img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .maq-band__grid { grid-template-columns: 1fr; }
  .maq-band__media { order: -1; max-width: 476px; }
}

/* Inmobiliaria "en proceso". Figma 601:762. */
.soon { position: relative; overflow: hidden; display: grid; place-items: center; min-height: clamp(600px, 56.25vw, 810px); padding: 7rem var(--gutter) 5rem; background: var(--bone); }
.soon__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.soon__copy { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; max-width: 440px; color: #181817; }
.soon__mark { display: block; width: 108px; height: 71px; overflow: hidden; margin-bottom: 62px; }   /* crops the "MR+ GROUP" line off the lockup */
.soon__mark img { display: block; width: 108px; height: 77px; }
.soon__kicker { margin: 0 0 32px; font-size: 1.25rem; line-height: 1.45; letter-spacing: 0.29em; text-transform: uppercase; color: var(--ink-charcoal); }
.soon__title { margin: 0 0 28px; font-size: var(--t-h2); font-weight: 400; line-height: 1.2; }
.soon__text { margin: 0; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.45; color: #72716C; text-wrap: balance; }
@media (max-width: 860px) {
  .soon::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(253, 251, 238, 0.9), rgba(253, 251, 238, 0.55)); }
  .soon__bg { object-position: 78% 50%; }
  .soon__mark { margin-bottom: 40px; }
}

/* Machine tiles open the rental pop-up, so the tile is a button. */
button.mtile__link { padding: 0; border: 0; background: none; font: inherit; text-align: center; cursor: pointer; }

/* Rental pop-up. Figma 611:107: 1200 x 720, 30px radius, #F7F6F5. Photo 579 x 653
   on the left, a 493px form column on the right, 50px apart. */
.rent { width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 30px; background: #F7F6F5; color: var(--ink-charcoal); overflow: hidden; }
.rent::backdrop { background: rgba(11, 11, 10, 0.58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rent[open] { animation: rent-in 240ms var(--sc-ease-out); }
@keyframes rent-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
.rent__grid { max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 579fr) minmax(0, 493fr); gap: clamp(24px, 4.2vw, 50px); align-items: center; padding: 33px 40px 34px 38px; }
.rent__media { margin: 0; aspect-ratio: 579 / 653; border-radius: 23px; overflow: hidden; background: #EAE6DD; }
.rent__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rent.is-cutout .rent__img { object-fit: contain; padding: 10%; }
.rent__body { display: grid; align-content: center; padding-block: 23px 0; }
.rent__cat { margin: 0; font-size: var(--t-caption); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; }
.rent__title { margin: 16px 0 0; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1.2; text-wrap: balance; }
.rent__form { display: grid; gap: 16px; margin-top: 32px; }
.rent__intro { display: grid; gap: 8px; margin-bottom: 12px; }
.rent__h { margin: 0; font-size: var(--t-body); font-weight: 500; line-height: 1.2; color: var(--near-black); }
.rent__lede { margin: 0; max-width: 351px; font-size: var(--t-caption); line-height: 1.2; color: #72716C; }   /* Figma #999998, darkened to read */
.rent__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 17px; }
.rent__field { display: grid; gap: 6px; min-width: 0; }
.rent__field label, .rent__period legend { font-size: var(--t-caption); line-height: 1.2; color: #181817; }
.rent__field input { width: 100%; height: 41px; padding: 0 18px; border: 0.75px solid #CFCCC3; border-radius: 8px; background: transparent; color: var(--near-black); font: inherit; font-size: var(--t-caption); }
.rent__field input::placeholder { color: var(--ink-placeholder); opacity: 1; }
.rent__period { margin: 0; padding: 0; border: 0; min-width: 0; }
.rent__period legend { padding: 0; margin-bottom: 6px; }
.rent__date { position: relative; display: grid; gap: 2px; min-height: 64px; padding: 10px 10px 10px 18px; border: 0.75px solid #CFCCC3; border-radius: 8px; }
.rent__date label { font-size: var(--t-caption); font-weight: 500; line-height: 1.2; color: var(--near-black); }
.rent__dateline { display: flex; align-items: center; gap: 6px; }
.rent__date input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: var(--near-black); font: inherit; font-size: var(--t-caption); font-variant-numeric: tabular-nums; }
.rent__date input::placeholder { color: var(--ink-placeholder); opacity: 1; }
.rent__cal { flex: 0 0 auto; width: 30px; height: 30px; margin: -6px 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink-charcoal); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .rent__cal:hover { background: #ECE9E1; } }
.rent__cal:focus-visible { outline: 2px solid var(--ink-charcoal); outline-offset: 0; }
.rent__field input:focus-visible, .rent__date:has(input:focus-visible) { outline: 2px solid var(--ink-charcoal); outline-offset: 1px; }
.rent__date input:focus-visible { outline: none; }
.rent [aria-invalid="true"], .rent__date:has([aria-invalid="true"]) { border-color: #A1301F; }

/* Spanish calendar for the date fields. Weeks start on Monday. */
.cal { position: absolute; z-index: 5; top: calc(100% + 6px); left: -1px; width: 286px; padding: 12px 12px 10px; border-radius: 16px; background: var(--white); color: var(--ink-charcoal); box-shadow: 0 18px 44px -14px rgba(11, 11, 10, 0.35), 0 0 0 1px rgba(11, 11, 10, 0.06); }
.cal[hidden] { display: none; }
.rent__period .rent__row > [data-date]:last-child .cal { left: auto; right: -1px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cal__month { margin: 0; font-size: 0.8125rem; font-weight: 700; }
.cal__nav { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.cal__nav:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .cal__nav:not(:disabled):hover { background: #F0EDE6; } }
.cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__grid th { padding: 4px 0 6px; font-size: 0.6875rem; font-weight: 500; color: #72716C; text-transform: capitalize; }
.cal__grid td { padding: 1px; text-align: center; }
.cal__day { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-charcoal); font: inherit; font-size: var(--t-caption); font-variant-numeric: tabular-nums; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .cal__day:not(:disabled):hover { background: #F0EDE6; } }
.cal__day.is-today { box-shadow: inset 0 0 0 1px #9C9489; }
.cal__day[aria-pressed="true"] { background: var(--ink-charcoal); color: var(--white); box-shadow: none; }
.cal__day:disabled { color: #BDBAB2; cursor: default; }
.cal__day:focus-visible, .cal__nav:focus-visible { outline: 2px solid var(--ink-charcoal); outline-offset: 1px; }
@media (max-width: 480px) { .cal { width: min(286px, calc(100vw - 72px)); } .cal__day { width: 30px; height: 30px; } }
.rent__error { margin: 0; font-size: var(--t-caption); line-height: 1.3; color: #A1301F; }
.rent__send { display: grid; gap: 7px; margin-top: 16px; }
.rent__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 49px; border: 0; border-radius: var(--r-pill); background: var(--ink-charcoal); color: var(--white); font: inherit; font-size: var(--t-body); font-weight: 500; cursor: pointer; transition: background-color 140ms var(--sc-ease-out); }
.rent__submit svg { transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .rent__submit:hover { background: var(--near-black); } .rent__submit:hover svg { transform: translateX(4px); } }
.rent__submit:active { transform: translateY(1px); }
.rent__submit:focus-visible { outline: 2px solid var(--ink-charcoal); outline-offset: 3px; }
.rent__note { margin: 0; font-size: 0.625rem; line-height: 1.2; text-align: center; color: #72716C; }
.rent__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(247, 246, 245, 0.92); color: var(--ink-charcoal); cursor: pointer; transition: background-color 140ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .rent__close:hover { background: #E6E3DC; } }
.rent__close:focus-visible { outline: 2px solid var(--ink-charcoal); outline-offset: 2px; }
@media (max-width: 860px) {
  .rent { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 22px; }
  .rent__grid { max-height: calc(100dvh - 24px); grid-template-columns: 1fr; gap: 20px; padding: 14px 14px 22px; }
  .rent__media { aspect-ratio: 16 / 10; border-radius: 16px; }
  .rent__body { padding: 0 6px; }
  .rent__form { margin-top: 22px; }
}
@media (max-width: 480px) { .rent__row:not(.rent__period .rent__row) { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rent[open] { animation: none; } .rent__submit, .rent__submit svg, .rent__close { transition: none; } }

/* Pop-up specs. Figma 611:70: three 29px line icons with their value, 42px
   under the title. The small label under each value says what it measures,
   since "height" means reach for one machine and cutting width for another. */
.rent__specs { list-style: none; margin: 42px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: flex-start; }
.rent__specs[hidden], .rent__spec[hidden] { display: none; }
.rent__spec { display: flex; align-items: center; gap: 9px; color: var(--near-black); }
.rent__spec svg { flex: 0 0 auto; }
.rent__specv { display: grid; gap: 1px; }
.rent__specv > span:first-child { font-size: 1rem; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rent__specl { font-size: 0.6875rem; line-height: 1.2; color: #72716C; }
.rent__specs:not([hidden]) + .rent__form { margin-top: 32px; }
@media (max-width: 860px) { .rent__specs { margin-top: 24px; gap: 16px 28px; } }

/* Listing pages: the project collage unfolds under the carousel (Figma
   comment on 430:290). Same blocks as the detail page. Its parts rise in one
   after another; the open card's label turns into a solid pill. */
.lcollage { padding-top: clamp(2.5rem, 5vw, 70px); scroll-margin-top: clamp(76px, 8vw, 110px); }
.lcollage[hidden] { display: none; }
.lcollage__bar { max-width: calc(1220px + 2 * var(--gutter)); margin: 0 auto 30px; padding-inline: var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lcollage__close svg { transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .lcollage__close:hover svg { transform: rotate(90deg); } }
.lcollage__body:focus { outline: none; }
.lcollage.is-in .lcollage__body > *, .lcollage.is-in .lcollage__bar { animation: lc-in 560ms var(--sc-ease-out) both; }
.lcollage.is-in .lcollage__body > :nth-child(2) { animation-delay: 90ms; }
.lcollage.is-in .lcollage__body > :nth-child(3) { animation-delay: 180ms; }
@keyframes lc-in { from { opacity: 0; transform: translateY(18px); } }
.pcard.is-open .pcard__label { background: rgba(253, 251, 238, 0.94); color: var(--near-black); text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .lcollage.is-in .lcollage__body > *, .lcollage.is-in .lcollage__bar { animation: none; } .lcollage__close svg { transition: none; } }