:root {
  color-scheme: dark;
  --paper: #000000;
  --surface: #0a0a0a;
  --surface-strong: #111111;
  --ink: #ffffff;
  --muted: #a1a1a1;
  --tertiary: #858585;
  --line: #2a2a2a;
  --green: #ffffff;
  --green-dark: #ffffff;
  --whatsapp: #25d366;
  --black: #000000;
  --radius-sm: 0.65rem;
  --radius: 1.25rem;
  --radius-lg: 1.75rem;
  --pad: clamp(1.1rem, 2.65vw, 3.2rem);
  --section-space: clamp(5rem, 10vw, 9rem);
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --transition-fast: 180ms var(--ease-out);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; }

body {
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

main section { scroll-margin-top: 4.7rem; }

body, button, a, summary { font-family: inherit; }

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

a { color: inherit; }

button, a, summary { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }

::selection { background: var(--green); color: var(--black); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: #000000;
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: 4.75rem;
  padding: 0.72rem var(--pad);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 680;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #111111;
}

.brand-mark img { width: 72%; height: 72%; }

.site-nav { display: flex; justify-content: center; gap: clamp(1rem, 2vw, 2.2rem); }

.site-nav a,
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-nav a:hover, .footer-links a:hover { color: var(--ink); }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; }
.header-contacts { display: flex; align-items: center; gap: .15rem; }
.header-contact {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  color: #bdbdbd;
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}
.header-contact:hover { background: #151515; color: #fff; transform: translateY(-1px); }
.header-contact svg { width: 1.12rem; height: 1.12rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.header-contact .icon-fill { fill: currentColor; stroke: none; }
.header-contact--whatsapp svg { fill: currentColor; stroke: none; }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.65rem;
  min-height: 2.9rem;
  padding: 0 1.1rem;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #000000;
  font-size: 0.72rem;
  font-weight: 650;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.header-cta:hover { background: #d8d8d8; transform: translateY(-1px); }

.mobile-menu { display: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(34rem, 1.08fr);
  gap: clamp(2.5rem, 4.5vw, 5.5rem);
  align-items: center;
  min-height: calc(100svh - 4.75rem);
  padding: clamp(3.25rem, 6vh, 5.5rem) var(--pad) clamp(2.5rem, 5vh, 4.5rem);
}

.hero-copy { position: relative; z-index: 2; max-width: 48rem; }

.hero-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.6rem, 3vh, 2.4rem);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-identity span:first-child { color: var(--ink); }
.hero-identity span + span { display: flex; align-items: center; gap: 0.75rem; }
.hero-identity span + span::before { content: ""; width: 0.32rem; height: 0.32rem; border: 1px solid #737373; border-radius: 50%; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow > span { width: 0.52rem; height: 0.52rem; border: 1px solid #ffffff; border-radius: 50%; background: transparent; }

.hero h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(3.4rem, 4.5vw, 5rem);
  font-weight: 580;
  line-height: 0.92;
  letter-spacing: -0.062em;
}

.hero h1 em { color: var(--muted); font-style: normal; }

.hero-lead {
  max-width: 42ch;
  margin: clamp(1.5rem, 3vh, 2rem) 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.22vw, 1.22rem);
  line-height: 1.52;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(1.5rem, 3vh, 2rem); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 3.35rem;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.button:hover { transform: translateY(-2px); }
.button--primary { min-width: 13.5rem; background: #ffffff; color: #000000; }
.button--primary:hover { background: #d8d8d8; }
.button--secondary { min-width: 11rem; border-color: var(--line); background: var(--surface); }
.button--secondary:hover { border-color: #727272; }

.hero-location { margin: clamp(1.4rem, 2.5vh, 1.9rem) 0 0; color: var(--tertiary); font-size: 0.68rem; letter-spacing: 0.04em; }

.hero-monogram {
  position: relative;
  min-width: 0;
  min-height: clamp(34rem, 69vh, 44rem);
  margin: 0;
  overflow: clip;
  padding-bottom: 2.6rem;
}

.hero-monogram__frame {
  --grid-x: 0px;
  --grid-y: 0px;
  --outer-x: 0px;
  --outer-y: 0px;
  --inner-x: 0px;
  --inner-y: 0px;
  position: absolute;
  inset: 0 0 2.6rem;
  overflow: visible;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.035), transparent 34%);
  perspective: 900px;
}

.hero-monogram__grid {
  --grid-opacity: .42;
  position: absolute;
  inset: 1% .75rem;
  background: linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: 18% 18%;
  opacity: var(--grid-opacity);
  transform: translate3d(var(--grid-x), var(--grid-y), 0);
  will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse 67% 67% at center, #000 0 38%, rgba(0,0,0,.72) 58%, transparent 82%);
  mask-image: radial-gradient(ellipse 67% 67% at center, #000 0 38%, rgba(0,0,0,.72) 58%, transparent 82%);
}

.hero-monogram__frame::before,
.hero-monogram__frame::after { display: none; content: none; }
.hero-monogram__axis { position: absolute; z-index: 1; display: block; background: #3e3e3e; opacity: .74; }
.hero-monogram__axis--horizontal { top: 50%; right: .75rem; left: .75rem; height: 1px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.hero-monogram__axis--vertical { top: -4%; bottom: -4%; left: 50%; width: 1px; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }

.hero-monogram__index,
.hero-monogram__scale { position: absolute; z-index: 3; color: #777; font-size: .55rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero-monogram__index { top: 7%; right: 2%; }
.hero-monogram__scale { bottom: 7%; left: 2%; }

.hero-monogram__mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(80%, 33.5rem);
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  isolation: isolate;
}

.hero-monogram__mark::before,
.hero-monogram__mark::after {
  --ring-plane: perspective(900px) rotateX(67deg) rotateZ(-8deg);
  position: absolute;
  z-index: 0;
  inset: 5%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  content: "";
  transform: var(--ring-plane);
}
.hero-monogram__mark::after {
  --ring-plane: perspective(900px) rotateY(63deg) rotateZ(11deg);
  inset: 10%;
  border-color: rgba(255,255,255,.11);
}

.hero-monogram__symbol {
  position: relative;
  z-index: 3;
  display: grid;
  width: 67%;
  aspect-ratio: 1;
  place-items: center;
  transform: none;
  transform-origin: center;
}

.hero-monogram__symbol::before {
  position: absolute;
  z-index: -1;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.085), rgba(255,255,255,.018) 46%, transparent 72%);
  filter: blur(12px);
  content: "";
}

.hero-monogram__mark img {
  display: block;
  width: 100%;
  height: 100%;
  transform: translate(-2%, .55%);
  transform-origin: center;
  filter: drop-shadow(0 1rem 1.5rem rgba(0,0,0,.72)) drop-shadow(0 0 1.4rem rgba(255,255,255,.035));
}

.hero-monogram__kinetic { position: absolute; z-index: 1; inset: -10%; pointer-events: none; transform-style: preserve-3d; }
.kinetic-layer { position: absolute; inset: 0; }
.kinetic-layer--outer { transform: translate3d(var(--outer-x), var(--outer-y), 0); will-change: transform; }
.kinetic-layer--inner { inset: 12%; transform: translate3d(var(--inner-x), var(--inner-y), 14px) rotateX(3deg) rotateY(-3deg); will-change: transform; }
.kinetic-orbit { display: block; width: 100%; height: 100%; overflow: visible; }
.kinetic-orbit__rotor { transform-box: view-box; transform-origin: center; }
.kinetic-orbit__arc,
.kinetic-orbit__bracket,
.kinetic-orbit__locks path { fill: none; vector-effect: non-scaling-stroke; }
.kinetic-orbit__arc { stroke: #737373; stroke-width: .7; }
.kinetic-orbit__arc--outer { stroke-dasharray: 18 5 3 7 12 9 22 24; opacity: .78; }
.kinetic-orbit__arc--guide { stroke: #424242; stroke-dasharray: 1 8; stroke-width: .6; opacity: .54; }
.kinetic-orbit__arc--inner { stroke: #777; stroke-dasharray: 10 4 25 7 6 8 15 25; opacity: .64; }
.kinetic-orbit__bracket { stroke: #8a8a8a; stroke-width: 1; opacity: .7; }
.kinetic-orbit__locks path { stroke: #5e5e5e; stroke-width: .75; opacity: .75; }

.kinetic-tracker { position: absolute; inset: 2%; border-radius: 50%; }
.kinetic-tracker--two { inset: 20%; }
.kinetic-tracker i { position: absolute; top: calc(50% - 1.5px); right: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: #d8d8d8; box-shadow: -5px 0 0 rgba(216,216,216,.18); }
.kinetic-tracker--two i { width: 2px; height: 2px; background: #969696; box-shadow: 4px 0 0 rgba(150,150,150,.14); }

.kinetic-sweep {
  position: absolute;
  inset: 1%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 332deg, rgba(255,255,255,.08) 336deg, rgba(255,255,255,.9) 348deg, transparent 359deg);
  mask: radial-gradient(circle, transparent calc(50% - 1.2px), #000 calc(50% - 1px), #000 50%, transparent calc(50% + 1px));
  opacity: 0;
}

.kinetic-signal-node { position: absolute; width: 4px; height: 4px; border: 1px solid #8b8b8b; border-radius: 50%; opacity: .32; }
.kinetic-signal-node--one { top: 10.5%; right: 20.5%; }
.kinetic-signal-node--two { right: 9%; bottom: 28%; width: 3px; height: 3px; }
.kinetic-core-energy { position: absolute; inset: 28%; border: 1px solid #505050; border-radius: 50%; opacity: .32; }

.hero-monogram figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--tertiary);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.contact-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 5.25rem;
  padding: 0 var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #050505;
}

.contact-rail > p {
  margin: 0;
  color: var(--tertiary);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-rail__links { display: flex; align-items: center; gap: 0.45rem; }

.contact-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.85rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.contact-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.contact-icon .icon-fill { fill: currentColor; stroke: none; }
.contact-icon small { color: var(--tertiary); font-size: 0.58rem; font-weight: 500; }
.contact-icon:hover { border-color: #666; color: #fff; transform: translateY(-1px); }
.contact-icon--pending { cursor: not-allowed; opacity: 0.52; }
.contact-icon--pending:hover { border-color: var(--line); color: var(--muted); transform: none; }

@media (hover: none) {
  .showroom-stage:hover .showroom-desktop { border-color: #343434; transform: rotateY(-2.5deg) translateZ(0); }
  .showroom-stage:hover .showroom-mobile { transform: translateZ(2rem); }
}

.benefits { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0a0a0a; }
.benefits-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr); gap: clamp(3rem, 7vw, 8rem); align-items: end; margin-bottom: clamp(3.5rem, 7vw, 7rem); }
.benefits-heading .eyebrow { margin-bottom: 1.5rem; }
.benefits-heading h2 { max-width: 12ch; margin: 0; font-size: clamp(3.2rem, 6vw, 7rem); font-weight: 560; line-height: .88; letter-spacing: -.068em; text-transform: uppercase; }
.benefits-heading > p { max-width: 31rem; margin: 0 0 .35rem; color: var(--muted); font-size: clamp(.95rem, 1.2vw, 1.12rem); }
.benefits-list { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.benefits-list li { display: grid; grid-template-rows: auto 1fr; gap: 2.8rem; min-height: 20rem; padding: clamp(1.35rem, 2.4vw, 2.25rem); border-bottom: 1px solid var(--line); transition: background-color var(--transition-fast); }
.benefits-list li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
.benefits-list li:hover { background: #0e0e0e; }
.benefit-number { color: #666666; font-size: clamp(2.7rem, 4.2vw, 5rem); font-weight: 560; line-height: .8; letter-spacing: -.07em; transition: color var(--transition-fast); }
.benefits-list li:hover .benefit-number { color: #777; }
.benefits-list li > div { align-self: end; }
.benefits-list li > div > p:first-child { margin: 0 0 .7rem; color: var(--tertiary); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.benefits-list h3 { max-width: 15ch; margin: 0 0 1rem; font-size: clamp(1.55rem, 2vw, 2.15rem); font-weight: 570; line-height: 1; letter-spacing: -.045em; }
.benefits-list li > div > p:last-child { max-width: 28rem; margin: 0; color: var(--muted); font-size: clamp(.9rem, 1vw, 1rem); line-height: 1.5; }

.section { padding: var(--section-space) var(--pad); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(17rem, .5fr); gap: 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.section-heading h2, .about h2, .faq h2, .contact h2 { max-width: 13ch; margin: 0; font-size: clamp(2.8rem, 5vw, 6rem); font-weight: 560; line-height: .95; letter-spacing: -.06em; }
.section-heading > p { max-width: 28rem; margin: 0 0 .35rem; color: var(--muted); font-size: 1rem; }
.section-heading--compact h2 { max-width: 11ch; }

.services { padding-top: clamp(5rem, 7vw, 7rem); background: var(--paper); }
.services-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); gap: clamp(3rem, 7vw, 8rem); align-items: end; margin-bottom: clamp(3rem, 5vw, 5rem); }
.services-heading h2 { max-width: 13ch; margin: 0; font-size: clamp(3rem, 4.5vw, 5rem); font-weight: 560; line-height: .92; letter-spacing: -.06em; text-transform: uppercase; }
.services-intro { align-self: end; max-width: 33rem; }
.services-intro p { margin: 0; color: var(--muted); font-size: clamp(.95rem, 1.15vw, 1.1rem); line-height: 1.5; }
.services-intro small { display: block; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--tertiary); font-size: .65rem; line-height: 1.45; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.service-grid > li { display: flex; min-width: 0; }
.service-card { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: clamp(25rem, 31vw, 31rem); padding: clamp(1.5rem, 2.25vw, 2.2rem); border: 1px solid #333; border-radius: .75rem; background: #101010; transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); }
.service-card:hover { border-color: #555; background: #121212; transform: translateY(-2px); }
.service-kicker { margin: 0; color: var(--tertiary); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.service-card__body { margin-top: clamp(2.75rem, 5vw, 5rem); }
.service-card h3 { max-width: 11ch; margin: 0; font-size: clamp(2rem, 3vw, 3.4rem); font-weight: 560; line-height: .92; letter-spacing: -.055em; }
.service-card__body > p { max-width: 34rem; margin: 1.3rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.service-scope { margin-top: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-scope summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; cursor: pointer; color: #d7d7d7; font-size: .66rem; font-weight: 700; letter-spacing: .08em; list-style: none; text-transform: uppercase; }
.service-scope summary::-webkit-details-marker { display: none; }
.service-scope summary i { font-style: normal; transition: transform var(--transition-fast); }
.service-scope[open] summary i { transform: rotate(45deg); }
.service-scope > div { padding: .15rem 0 1.15rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.service-scope ul, .maintenance-plan ul { margin: 0; padding-left: 1.05rem; }
.service-scope li + li, .maintenance-plan li + li { margin-top: .35rem; }
.service-scope > div > p { margin: .9rem 0 0; color: var(--tertiary); }
.service-card__footer { margin-top: auto; padding-top: 2.5rem; }
.service-price { display: grid; gap: .3rem; margin: 0 0 1.5rem; padding: 0; border: 0; }
.service-price span { color: var(--tertiary); font-size: .59rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.service-price strong { color: #fff; font-size: clamp(1.8rem, 2.3vw, 2.55rem); font-weight: 560; line-height: 1; letter-spacing: -.045em; }
.service-price small { margin-left: .3rem; color: var(--muted); font-size: .75rem; font-weight: 500; letter-spacing: 0; }
.service-card__footer > a, .maintenance-plan > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid #454545; border-radius: .55rem; background: #171717; font-size: .62rem; font-weight: 700; letter-spacing: .055em; text-decoration: none; text-transform: uppercase; transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); }
.service-card__footer > a span, .maintenance-plan > a span { transition: transform var(--transition-fast); }
.service-card__footer > a:hover, .maintenance-plan > a:hover { border-color: #888; background: #202020; color: #fff; transform: translateY(-2px); }
.service-card__footer > a:hover span, .maintenance-plan > a:hover span { transform: translate(.15rem, -.15rem); }
.service-card__footer > a:focus-visible, .maintenance-plan > a:focus-visible { border-color: #fff; background: #202020; }
.service-complements { display: grid; grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr); gap: 1rem; margin-top: 1rem; }
.service-card--compact, .service-card--maintenance { min-height: 0; }
.service-card--compact .service-card__body, .service-card--maintenance .service-card__body { margin-top: 2.75rem; }
.service-card--compact h3, .service-card--maintenance h3 { font-size: clamp(2rem, 3vw, 3rem); }
.service-note { margin-top: 1.25rem !important; color: var(--tertiary) !important; font-size: .75rem !important; }
.maintenance-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; }
.maintenance-plan { display: flex; flex-direction: column; min-width: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: .6rem; background: #0b0b0b; }
.maintenance-plan__name { margin: 0; color: #fff; font-size: 1.25rem; font-weight: 580; letter-spacing: -.03em; }
.maintenance-plan > div > p:last-child { min-height: 3.6em; margin: .6rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.maintenance-plan .service-price { margin: 1.25rem 0; }
.maintenance-plan ul { min-height: 7.2em; margin-bottom: 1.25rem; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.maintenance-plan > a { margin-top: auto; }
.service-note--maintenance { margin-bottom: 0 !important; }

.portfolio { background: var(--surface-strong); }
.project-card { overflow: hidden; border-radius: var(--radius); background: var(--black); color: white; }
.project-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 8.2; background: #111; }
.project-media picture, .project-media img { height: 100%; }
.project-media img { object-fit: cover; object-position: center; transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.project-media:hover img { transform: scale(1.025); }
.project-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.46)); pointer-events: none; }
.project-media > span { position: absolute; z-index: 2; right: 1.4rem; bottom: 1.4rem; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(0,0,0,.4); color: white; font-size: .68rem; backdrop-filter: blur(12px); }
.project-info { display: grid; grid-template-columns: 1.1fr .8fr auto; gap: 3rem; align-items: end; padding: clamp(1.5rem, 3vw, 3rem); }
.project-label { color: #ffffff; font-size: .64rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.project-info h3 { margin: .65rem 0 0; font-size: clamp(3.3rem, 6vw, 7rem); font-weight: 560; line-height: .8; letter-spacing: -.07em; }
.project-info p { max-width: 32rem; margin: 0; color: rgba(255,255,255,.67); font-size: .92rem; }
.project-info > a { display: inline-flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; padding-bottom: .45rem; border-bottom: 1px solid rgba(255,255,255,.5); font-size: .7rem; font-weight: 650; text-decoration: none; white-space: nowrap; }

.process { background: var(--paper); }
.process-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr); gap: clamp(3rem, 7vw, 8rem); align-items: end; margin-bottom: clamp(3.5rem, 7vw, 7rem); }
.process-heading h2 { max-width: 12ch; margin: 0; font-size: clamp(3.2rem, 6vw, 7rem); font-weight: 560; line-height: .88; letter-spacing: -.068em; }
.process-heading > p { max-width: 31rem; margin: 0 0 .35rem; color: var(--muted); font-size: clamp(.95rem, 1.2vw, 1.12rem); }
.process-legend { display: grid; grid-template-columns: 6rem minmax(15rem, 1.05fr) minmax(18rem, 1fr) minmax(9rem, .55fr); gap: clamp(1.5rem, 3vw, 4rem); padding: 0 0 .75rem; color: var(--tertiary); font-size: .55rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.process-legend span:nth-child(3) { padding-left: .1rem; }
.process-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.process-list li { display: grid; grid-template-columns: 6rem minmax(15rem, 1.05fr) minmax(18rem, 1fr) minmax(9rem, .55fr); gap: clamp(1.5rem, 3vw, 4rem); min-height: 16rem; padding: clamp(1.6rem, 2.8vw, 2.7rem) 0; border-bottom: 1px solid var(--line); transition: background-color var(--transition-fast); }
.process-list li:hover { background: #050505; }
.process-index { position: relative; min-height: 100%; }
.process-index span { color: #666666; font-size: clamp(2.7rem, 4vw, 4.8rem); font-weight: 560; line-height: .8; letter-spacing: -.07em; transition: color var(--transition-fast); }
.process-list li:hover .process-index span { color: #fff; }
.process-index i { position: absolute; top: 4.7rem; bottom: calc(-1 * clamp(1.6rem, 2.8vw, 2.7rem)); left: 1.15rem; width: 1px; background: var(--line); }
.process-list li:last-child .process-index i { bottom: 0; background: linear-gradient(#555, transparent); }
.process-step > p:first-child { margin: 0 0 .85rem; color: var(--tertiary); font-size: .58rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.process-step h3 { max-width: 13ch; margin: 0 0 1.1rem; font-size: clamp(1.8rem, 2.8vw, 3.2rem); font-weight: 570; line-height: .95; letter-spacing: -.055em; }
.process-step > p:last-child { max-width: 34rem; margin: 0; color: var(--muted); font-size: clamp(.9rem, 1vw, 1rem); line-height: 1.5; }
.process-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 0; }
.process-meta div { padding-top: .85rem; border-top: 1px solid #363636; }
.process-meta dt { margin: 0 0 .55rem; color: var(--tertiary); font-size: .55rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.process-meta dd { max-width: 16rem; margin: 0; color: #d0d0d0; font-size: .82rem; line-height: 1.4; }
.process-next { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-top: .85rem; border-top: 1px solid #363636; color: var(--muted); font-size: .58rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.process-next i { color: #fff; font-size: .8rem; font-style: normal; }
.process-next--final { color: #fff; }

.about { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(3rem, 8vw, 9rem); background: var(--black); color: white; }
.about-copy { align-self: center; }
.about .eyebrow { color: rgba(255,255,255,.5); }
.about h2 { max-width: 12ch; }
.about-lead { margin: 2rem 0 1rem; color: white !important; font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important; }
.about-copy > p { max-width: 38rem; color: rgba(255,255,255,.6); font-size: .95rem; }
.text-link { display: flex; justify-content: space-between; gap: 2rem; width: min(100%, 23rem); margin-top: 2rem; padding: 1rem 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-self: center; }
.founders article { min-width: 0; }
.founders figure { overflow: hidden; margin: 0; aspect-ratio: .78; border-radius: 1rem; background: #222; }
.founders img { height: 100%; object-fit: cover; filter: none; }
.founders article:first-child img { object-position: 50% center; }
.founders article:last-child img { object-position: center; }
.founders h3 { margin: 1rem 0 .25rem; font-size: clamp(1rem, 1.45vw, 1.35rem); font-weight: 550; letter-spacing: -.03em; }
.founders p { margin: 0; color: rgba(255,255,255,.48); font-size: .68rem; }

.faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(3rem, 8vw, 9rem); background: var(--surface-strong); }
.faq-heading { align-self: start; }
.faq h2 { max-width: 10ch; }
.faq-heading > p:not(.eyebrow) { max-width: 24rem; color: var(--muted); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: grid; grid-template-columns: 2rem 1fr auto; gap: 1rem; align-items: center; min-height: 5.6rem; cursor: pointer; list-style: none; font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 550; letter-spacing: -.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--green-dark); font-size: .62rem; letter-spacing: .1em; }
.faq-list summary i { font-style: normal; font-weight: 400; transition: transform 180ms ease; }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list details > p { max-width: 48rem; margin: -0.5rem 3rem 1.7rem; color: var(--muted); font-size: .92rem; }

.contact { display: grid; grid-template-columns: minmax(14rem, .42fr) minmax(0, 1.58fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; padding: clamp(4rem, 8vw, 8rem) var(--pad); border-top: 1px solid var(--line); background: #0a0a0a; color: #ffffff; }
.contact-mark { display: grid; width: min(100%, 24rem); aspect-ratio: 1; place-items: center; border: 1px solid #333; border-radius: 50%; background: #000000; }
.contact-mark img { width: 62%; }
.contact .eyebrow { color: var(--muted); }
.contact .eyebrow > span { border-color: #ffffff; }
.contact h2 { max-width: 13ch; font-size: clamp(3rem, 6vw, 7rem); }
.contact-copy > p:not(.eyebrow) { max-width: 42rem; margin: 1.5rem 0 2rem; font-size: 1rem; }
.button--light { min-width: min(100%, 22rem); background: #ffffff; color: #000000; }
.button--light:hover { background: #d8d8d8; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 2rem; align-items: end; padding: 3rem var(--pad); background: var(--black); color: white; }
.brand--footer { color: white; }
.site-footer > p { margin: 0; color: rgba(255,255,255,.48); font-size: .7rem; }
.footer-links { display: grid; gap: .45rem; }
.footer-links a { color: rgba(255,255,255,.68); }
.footer-links a:hover { color: white; }
.copyright { text-align: right; white-space: nowrap; }

.whatsapp-float {
  position: fixed;
  z-index: 95;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  width: 3.65rem;
  height: 3.65rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.34);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.whatsapp-float:hover { background: #31e477; transform: translateY(-2px); }
.whatsapp-float svg { width: 1.68rem; height: 1.68rem; fill: currentColor; stroke: none; }
.whatsapp-float span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.whatsapp-float span { color: var(--black); }
.whatsapp-float--collision-hidden { display: none; }

@media (max-width: 1100px) {
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: .7rem; }
  .header-actions { gap: .35rem; }
  .header-contact { width: 2.75rem; height: 2.75rem; }
  .header-cta { gap: 1rem; padding-inline: .9rem; }
  .hero { grid-template-columns: minmax(0, .95fr) minmax(27rem, 1.05fr); gap: 2.5rem; }
  .hero h1 { font-size: clamp(3.25rem, 5vw, 4.25rem); }
  .hero-monogram { min-height: 32rem; }
  .hero-monogram figcaption span:last-child { display: none; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid--primary > li:last-child { grid-column: 1 / -1; }
  .service-grid--primary > li:last-child .service-card { min-height: 25rem; }
  .service-complements { grid-template-columns: 1fr; }
  .project-info { grid-template-columns: 1fr 1fr; }
  .project-info > a { grid-column: 2; }
  .process-legend,
  .process-list li { grid-template-columns: 4.75rem minmax(13rem, 1.05fr) minmax(16rem, 1fr) minmax(8rem, .55fr); gap: 1.75rem; }
}

@media (max-width: 980px) {
  :root { --pad: 1rem; --section-space: 5rem; }
  main section { scroll-margin-top: 4.15rem; }
  .site-header { grid-template-columns: 1fr auto; min-height: 4.15rem; }
  .site-nav, .header-actions { display: none; }
  .brand-mark { width: 2rem; height: 2rem; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { display: flex; align-items: center; gap: .55rem; min-width: 2.75rem; min-height: 2.75rem; cursor: pointer; font-size: .72rem; font-weight: 700; list-style: none; text-transform: uppercase; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu[open] summary span { transform: rotate(45deg); }
  .mobile-menu nav { position: fixed; z-index: 110; top: 4.15rem; right: 0; left: 0; display: grid; padding: 1rem; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: 0 1.5rem 2rem rgba(0,0,0,.08); }
  .mobile-menu nav > a { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; font-weight: 550; text-decoration: none; }
  .mobile-menu nav > a:last-of-type { border-bottom: 0; }
  .mobile-menu__contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
  .mobile-menu__contacts a { display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--muted); font-size: .68rem; font-weight: 650; text-decoration: none; }
  .hero { grid-template-columns: 1fr; gap: 3.25rem; min-height: auto; padding-top: 3.5rem; }
  .hero-copy { max-width: 44rem; }
  .hero h1 { max-width: 13ch; font-size: clamp(3.25rem, 9.8vw, 5rem); }
  .hero-lead { max-width: 37rem; }
  .hero-monogram { min-height: clamp(29rem, 72vw, 36rem); }
  .benefits-heading,
  .process-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .benefits-heading > p,
  .process-heading > p { max-width: 40rem; }
  .benefits-list { grid-template-columns: repeat(2, 1fr); }
  .benefits-list li { min-height: 18rem; }
  .benefits-list li:not(:nth-child(3n + 1)) { border-left: 0; }
  .benefits-list li:nth-child(even) { border-left: 1px solid var(--line); }
  .section-heading,
  .services-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .services-intro { max-width: 42rem; }
  .section-heading h2, .about h2, .faq h2 { font-size: clamp(3rem, 9vw, 5rem); }
  .project-media { aspect-ratio: 16 / 10; }
  .project-info { grid-template-columns: 1fr; gap: 1.5rem; }
  .project-info > a { grid-column: auto; width: fit-content; }
  .process-legend { display: none; }
  .process-list li { grid-template-columns: 4.25rem minmax(0, 1fr); gap: 1.25rem; }
  .process-index { grid-row: 1 / 4; }
  .process-meta,
  .process-next { grid-column: 2; }
  .process-next { margin-top: .4rem; }
  .about, .faq { grid-template-columns: 1fr; }
  .founders { max-width: 46rem; }
  .contact { grid-template-columns: .35fr 1.65fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .copyright { text-align: left; }
}

@media (max-width: 560px) {
  .hero { gap: 1.5rem; padding-top: 1.5rem; padding-bottom: 3.5rem; }
  .hero-copy { grid-row: 2; }
  .hero-identity { display: grid; gap: .35rem; margin-bottom: 1.15rem; }
  .hero-identity span + span { gap: .55rem; }
  .hero h1 { max-width: 100%; font-size: clamp(2.65rem, 11.5vw, 3.25rem); line-height: .94; letter-spacing: -.058em; }
  .hero-lead { margin-top: 1.25rem; font-size: .98rem; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .hero-location { margin-top: 1.25rem; }
  .hero-monogram { grid-row: 1; min-height: 12.75rem; padding-bottom: 0; }
  .hero-monogram__frame { inset: 0; }
  .hero-monogram__grid { --grid-opacity: .34; inset: 0 .5rem; background-size: 25% 25%; }
  .hero-monogram__axis--horizontal { right: .5rem; left: .5rem; }
  .hero-monogram__axis--vertical { top: 0; bottom: 0; }
  .hero-monogram__mark { width: 11.25rem; }
  .hero-monogram__symbol { width: 66%; }
  .hero-monogram__index { top: .5rem; right: .25rem; }
  .hero-monogram__scale { bottom: .5rem; left: .25rem; }
  .hero-monogram figcaption { display: none; }
  .benefits-heading h2,
  .process-heading h2 { font-size: clamp(2.75rem, 12vw, 4.4rem); }
  .benefits-list { grid-template-columns: 1fr; }
  .benefits-list li { grid-template-columns: 3.25rem minmax(0, 1fr); grid-template-rows: auto; gap: 1rem; min-height: 0; padding: 1.7rem 0; }
  .benefits-list li:nth-child(even),
  .benefits-list li:not(:nth-child(3n + 1)) { border-left: 0; }
  .benefit-number { font-size: 2.6rem; }
  .benefits-list li > div { align-self: start; margin-right: 3.75rem; }
  .benefits-list h3 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .services-heading h2 { font-size: clamp(2.75rem, 12vw, 4.4rem); }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid--primary > li:last-child { grid-column: auto; }
  .service-card { min-height: 0; padding: 1.5rem; }
  .service-card__body { margin-top: 2.5rem; padding-right: 3.35rem; }
  .service-card h3 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .service-card__footer { padding-top: 2.4rem; padding-right: 3.35rem; }
  .maintenance-plans { grid-template-columns: 1fr; }
  .maintenance-plan > div > p:last-child, .maintenance-plan ul { min-height: 0; }
  .service-card--maintenance .service-card__body, .service-card--maintenance .service-note { padding-right: 3.35rem; }
  .project-card { border-radius: .85rem; }
  .project-media { aspect-ratio: .82; }
  .project-media img { object-position: center top; }
  .project-info h3 { font-size: 4rem; }
  .process-list li { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; min-height: 0; padding-block: 2rem; }
  .process-index span { font-size: 2.6rem; }
  .process-index i { top: 3.5rem; left: .7rem; }
  .process-step,
  .process-meta,
  .process-next { margin-right: 3.75rem; }
  .process-step h3 { font-size: clamp(1.9rem, 9vw, 2.7rem); }
  .process-meta { grid-template-columns: 1fr; gap: 1rem; margin-top: .75rem; }
  .about { gap: 4rem; }
  .founders { grid-template-columns: 1fr; gap: 2.5rem; }
  .founders figure { aspect-ratio: 1 / 1.13; }
  .faq { gap: 3rem; }
  .faq-list summary { grid-template-columns: 1.7rem 1fr auto; min-height: 5rem; font-size: 1rem; }
  .faq-list details > p { margin: -.25rem 0 1.5rem 2.7rem; }
  .contact { grid-template-columns: 1fr; gap: 3rem; }
  .contact-mark { width: 8rem; }
  .contact h2 { font-size: clamp(3rem, 13vw, 4.5rem); }
  .site-footer { grid-template-columns: 1fr; align-items: start; }
  .whatsapp-float { right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); width: 3.35rem; height: 3.35rem; }
  .whatsapp-float svg { width: 1.55rem; height: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}