/* ============================================================
   MYT SERVICE — Editorial Automotive Design System
   Paleta: papel creme + grafite + vermelho MYT
   Type: Saira Condensed (italic display) + Inter (UI)
   ============================================================ */

:root {
  /* — Surfaces — */
  --paper:      #f4f1ea;
  --paper-2:    #ebe6da;
  --paper-3:    #e0d9c7;
  --white:      #ffffff;
  --ink:        #14140f;
  --ink-2:      #1a1a14;
  --ink-3:      #2a2a22;

  /* — Text — */
  --text:       #1c1c16;
  --text-2:     #54544a;
  --text-3:     #8a8a7e;
  --text-mute:  #b3b3a6;
  --text-light: #f4f1ea;
  --text-light-2:#d9d4c5;
  --text-light-3:#8a8676;

  /* — Brand — */
  --red:        #d91528;
  --red-hot:    #ff1f33;
  --red-deep:   #a8101f;
  --red-glow:   rgba(217,21,40,.4);

  /* — Lines — */
  --line:       rgba(20,20,15,.12);
  --line-2:     rgba(20,20,15,.06);
  --line-dark:  rgba(255,255,255,.10);

  /* — Type — */
  --font:       "Inter", system-ui, sans-serif;
  --font-disp:  "Saira Condensed", "Inter", sans-serif;
  --font-mono:  "Saira", "Inter", sans-serif;

  /* — Layout — */
  --container:  1280px;
  --nav-h:      96px;
  --radius:     0;
  --radius-sm:  4px;
  --radius-lg:  2px;
  --ease:       cubic-bezier(.2,.8,.2,1);

  /* — Shadows — */
  --shadow-card: 0 30px 60px -20px rgba(20,20,15,.18), 0 8px 16px -8px rgba(20,20,15,.08);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }

::selection { background: var(--red); color: #fff; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 56px);
}

/* ============================================================
   Shared editorial primitives
   ============================================================ */
.snum {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.snum::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--red);
}
.snum--light { color: var(--red-hot); }

.kicker {
  font-family: var(--font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-2);
}
.kicker--light { color: var(--text-light-2); }

.display {
  font-family: var(--font-disp);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: .94;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 16px 0 0;
  text-transform: uppercase;
  text-wrap: balance;
}
.display em {
  color: var(--red);
  font-style: italic;
  font-weight: 900;
}
.display--light { color: var(--white); }

.diamond-red {
  display: inline-block;
  width: 10px; height: 16px;
  background: var(--red);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  flex-shrink: 0;
}

/* ============================================================
   Reveal animation (progressive enhancement)
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--ease) var(--delay, 0s),
    transform .9s var(--ease) var(--delay, 0s);
  will-change: transform, opacity;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero__media img,
  .hero__scroll-line::before,
  .ofc__hero-tag .dot,
  .map__pin-pulse,
  .fab__pulse {
    animation: none !important;
  }
  .marquee__track {
    animation-duration: 120s !important;
  }
}

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a08;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 0 24px;
  text-align: center;
  transition: opacity .7s cubic-bezier(.4,0,.2,1), visibility .7s;
}
.splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.splash-active {
  overflow: hidden;
}
body.splash-active .nav,
body.splash-active main,
body.splash-active footer {
  opacity: 0;
}
body.splash-done .nav,
body.splash-done main,
body.splash-done footer {
  opacity: 1;
  transition: opacity .8s ease .2s;
}
.splash__logo,
.splash__bar-wrap {
  position: relative;
  z-index: 2;
}
.splash__since {
  margin: 16px 0 0;
  font-family: 'Saira', sans-serif;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  transition: opacity .5s ease 1s;
}
.splash.is-visible .splash__since {
  opacity: 1;
}
.splash__logo {
  opacity: 0;
  transform: scale(1.35);
  transition: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.splash__logo img {
  width: clamp(280px, 55vw, 640px);
  display: block;
  margin-left: 18px;
  filter: drop-shadow(0 0 40px rgba(217,21,40,.35));
}
.splash.is-visible .splash__logo {
  animation: splashLogoReveal 2.4s cubic-bezier(.06,.9,.14,1) forwards;
  will-change: transform, opacity;
}
@keyframes splashLogoReveal {
  0%   { opacity: 0; transform: scale(5); }
  100% { opacity: 1; transform: scale(1); }
}
.splash__bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transition: opacity .4s ease .9s;
}
.splash.is-visible .splash__bar-wrap {
  opacity: 1;
}
.splash__bar-label {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}
/* Lottie wheel — segue a ponta da barra */
.splash__lottie {
  width: clamp(160px, 14vw, 220px);
  height: clamp(160px, 14vw, 220px);
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(-50%, -70%);
  filter: drop-shadow(0 0 16px rgba(217,21,40,.9));
  pointer-events: none;
  animation:
    splashWheelMove 3s cubic-bezier(.4,0,.2,1) 1.1s forwards,
    splashWheelGlow 1.2s ease-in-out 4.2s infinite alternate;
}
@keyframes splashWheelMove {
  0%   { left: calc(0% + 20px); }
  100% { left: calc(100% - 20px); }
}
@keyframes splashWheelGlow {
  0%   { filter: drop-shadow(0 0 12px rgba(217,21,40,.6)); }
  100% { filter: drop-shadow(0 0 32px rgba(217,21,40,1)) drop-shadow(0 0 8px rgba(255,60,60,.8)); }
}
/* Barra linear */
.splash__bar {
  width: clamp(280px, 80vw, 700px);
  height: clamp(3px, .3vw, 5px);
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: visible;
  position: relative;
}
.splash__bar-fill {
  height: 100%;
  width: 0%;
  background: #d91528;
  border-radius: 2px;
  animation: splashProgress 3s cubic-bezier(.4,0,.2,1) 1.1s forwards;
  box-shadow: 0 0 8px 2px rgba(217,21,40,.6);
  position: relative;
}
@keyframes splashProgress {
  0%   { width: 0%; }
  100% { width: 100%; }
}

/* ============================================================
   PAGE LOAD ANIMATION
   ============================================================ */
.page-load [data-load] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.page-load [data-load="fade"] {
  transform: translateY(0) scale(.97);
  transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.page-loaded [data-load] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-load-delay="1"] { transition-delay: .08s !important; }
[data-load-delay="2"] { transition-delay: .18s !important; }
[data-load-delay="3"] { transition-delay: .30s !important; }
[data-load-delay="4"] { transition-delay: .44s !important; }
[data-load-delay="5"] { transition-delay: .60s !important; }
[data-load-delay="6"] { transition-delay: .78s !important; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(244, 241, 234, 0);
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(20, 20, 15, .9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line-dark);
}
.nav.is-scrolled .nav__links a { color: var(--text-light-2); }
.nav.is-scrolled .nav__links a:hover { color: var(--white); }
.nav.is-scrolled .nav__cta {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav.is-scrolled .nav__cta:hover {
  background: var(--red-hot);
  border-color: var(--red-hot);
}
.nav.is-scrolled .nav__burger { border-color: rgba(255,255,255,.35); }
.nav.is-scrolled .nav__burger span { background: var(--white); }

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 56px);
  display: flex;
  align-items: center;
  gap: 32px;
  overflow: visible;
}

.nav__brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  flex-shrink: 0;
  height: 100%;
}
.nav__logo {
  height: 80px;
  width: auto;
  display: block;
  max-width: 340px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  transition: opacity .25s var(--ease);
}

.nav__links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 8px 2px;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
  transition: color .2s var(--ease);
}
.nav__links a span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--red-hot);
  letter-spacing: .08em;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 4px;
  height: 1.5px;
  background: var(--red);
  transition: right .3s var(--ease);
}
.nav__links a:hover { color: var(--red); }
.nav__links a:hover::after { right: 0; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  font-size: 13px;
  padding: 12px 20px;
  letter-spacing: .02em;
  border: 1px solid var(--ink);
  transition: all .25s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}
.nav__cta:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-1px);
}

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  position: relative;
  padding: 0;
}
.nav__burger span {
  position: absolute;
  left: 11px; right: 11px;
  height: 1.5px;
  background: var(--white);
  transition: transform .3s var(--ease), top .3s var(--ease), opacity .2s var(--ease);
}
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 25px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 16px clamp(20px, 4.5vw, 56px) 28px;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(-100% - var(--nav-h) - 8px));
  transition: transform .45s var(--ease);
  z-index: 99;
  visibility: hidden;
}
.mobile-menu.is-open {
  transform: none;
  visibility: visible;
}
.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu a span {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
  color: var(--red);
  width: 24px;
}
.mobile-menu__cta {
  margin-top: 16px;
  background: var(--ink);
  color: var(--white) !important;
  padding: 18px !important;
  justify-content: center;
  border-bottom: 0 !important;
}
.mobile-menu__cta span { display: none; }
.mobile-menu__cta i { color: var(--white) !important; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + 32px);
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05);
  transform: scale(1);
  animation: heroZoom 22s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.03); }
  to { transform: scale(1); }
}
.hero__media-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,20,15,.1) 0%, transparent 30%, rgba(20,20,15,.5) 100%),
    linear-gradient(90deg, rgba(20,20,15,.35) 0%, rgba(20,20,15,.05) 50%, transparent 80%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding: 0 clamp(20px, 4.5vw, 56px);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-light-2);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
.hero__eyebrow .sep { color: var(--text-light-3); }

.hero__title {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: clamp(56px, 9vw, 132px);
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--white);
  margin: 0 0 32px;
  text-transform: uppercase;
}
.hero__title .line {
  display: block;
}
.hero__title em {
  font-style: italic;
  color: var(--red);
  font-weight: 900;
}
.hero__title .line--accent em,
.hero__title .line--accent {
  color: var(--red);
  font-style: italic;
}

.hero__sub {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--text-light-2);
  max-width: 50ch;
  margin: 0 0 36px;
  line-height: 1.6;
  text-wrap: balance;
}
.hero__sub strong { color: var(--white); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* — BUTTONS — */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn .arr {
  font-size: 14px;
  transition: transform .3s var(--ease);
}
.btn:hover .arr { transform: translateX(4px); }

.btn--solid {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--solid:hover {
  background: var(--red-hot);
  border-color: var(--red-hot);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px var(--red-glow);
}

.btn--outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.4);
}
.btn--outline:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

/* — HERO SIDE — */
.hero__side {
  align-self: end;
  margin-bottom: 12px;
}

.hero__rating {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(8px);
}
.hero__rating-stars {
  display: flex;
  gap: 3px;
  color: #ffbe1a;
  font-size: 17px;
}
.hero__rating-text strong {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 38px;
  color: var(--white);
  line-height: 1;
  letter-spacing: -.01em;
  display: block;
}
.hero__rating-text span {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-light-3);
  margin-top: 4px;
  display: block;
}

.hero__spec {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__spec-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-dark);
}
.hero__spec-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hero__spec-row .label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-light-3);
}
.hero__spec-row .value {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.hero__scroll {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-light-3);
}
.hero__scroll-line {
  width: 1px;
  height: 32px;
  background: var(--text-light-3);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::before {
  content: "";
  position: absolute;
  left: 0; top: -32px;
  width: 100%; height: 32px;
  background: var(--white);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { top: -32px; }
  100% { top: 32px; }
}
.hero__scroll-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(14,14,10,.15) 25%, rgba(14,14,10,.55) 55%, rgba(14,14,10,.92) 78%, var(--ink) 100%);
  border: none;
  padding: 100px 0 22px;
  overflow: hidden;
}
.marquee__inner {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marqueeRoll 48s linear infinite;
}
.marquee__item {
  font-family: var(--font-disp);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  letter-spacing: .005em;
}
.marquee__item .dot {
  display: inline-block;
  width: 10px; height: 16px;
  background: var(--red);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.marquee__logo {
  display: inline-block;
  width: 28px;
  height: 28px;
  min-width: 28px;
  flex-shrink: 0;
}
.marquee__logo--wide {
  width: auto;
  height: 60px;
}
@keyframes marqueeRoll {
  to { transform: translateX(-50%); }
}

/* ============================================================
   01 · SOBRE
   ============================================================ */
.sobre {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--paper);
  position: relative;
}

.sobre__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.sobre__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: start;
}

.sobre__copy h2 { margin-bottom: 28px; }
.sobre__copy p {
  font-size: 17px;
  color: var(--text-2);
  margin: 0 0 20px;
  max-width: 56ch;
  line-height: 1.65;
}
.sobre__copy p strong { color: var(--ink); font-weight: 600; }

.sobre__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.pillar { padding-right: 12px; }
.pillar__num {
  font-family: var(--font-disp);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
}
.pillar__num .acc { color: var(--red); }
.pillar__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.4;
}
.pillar__label span {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.sobre__visual {
  position: relative;
}
.sobre__photo {
  margin: 0;
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.sobre__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
  transition: transform 1.2s var(--ease);
}
.sobre__photo:hover img { transform: scale(1.04); }
.sobre__photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sobre__photo figcaption .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.sobre__stamp {
  position: absolute;
  bottom: -36px;
  right: -36px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 6px solid var(--paper);
}
.sobre__stamp-top, .sobre__stamp-bot {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text-light-2);
}
.sobre__stamp-bot { max-width: 110px; line-height: 1.4; margin-top: 6px; }
.sobre__stamp-year {
  font-family: var(--font-disp);
  font-weight: 900;
  font-style: italic;
  font-size: 48px;
  line-height: 1;
  color: var(--red);
  letter-spacing: -.01em;
  margin: 4px 0 4px;
}

/* ============================================================
   02 · ESPECIALIDADE (dark)
   ============================================================ */
.esp {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--ink-2);
  position: relative;
  color: var(--text-light-2);
  overflow: hidden;
}
.esp__pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(217,21,40,.18) 1px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(60% 80% at 50% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 80% at 50% 30%, #000, transparent 75%);
  opacity: .65;
  pointer-events: none;
}

.esp__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 64px;
  max-width: 820px;
}
.esp__head h2 { margin-top: 16px; margin-bottom: 18px; }
.esp__head p {
  font-size: 17px;
  color: var(--text-light-2);
  max-width: 60ch;
  line-height: 1.65;
  margin: 0;
}

.esp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
}

.esp__card {
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .3s var(--ease);
}
.esp__card:hover {
  transform: translateY(-4px);
  border-color: rgba(217,21,40,.5);
}
.esp__card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.esp__card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.05);
  transition: transform 1s var(--ease);
}
.esp__card:hover .esp__card-img img { transform: scale(1.05); }
.esp__card-body {
  padding: 32px 32px 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.esp__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-dark);
}
.brand-mark {
  width: 24px;
  height: 24px;
  color: var(--red);
  flex-shrink: 0;
}
.esp__card-brand {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
}
.esp__card-models {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-light-3);
}

.esp__card h3 {
  font-family: var(--font-disp);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 14px;
}
.esp__card p {
  font-size: 15px;
  color: var(--text-light-2);
  line-height: 1.6;
  margin: 0 0 24px;
}
.esp__list {
  list-style: none;
  padding: 0; margin: 0 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.esp__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--white);
  padding: 12px 0;
  border-top: 1px solid var(--line-dark);
}
.esp__list li:last-child { border-bottom: 1px solid var(--line-dark); }
.esp__list li::before {
  content: "";
  width: 8px; height: 13px;
  background: var(--red);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  flex-shrink: 0;
}

/* ============================================================
   03 · SERVIÇOS
   ============================================================ */
.svc {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--paper);
}

.svc__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 64px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.svc__head-left { display: flex; flex-direction: column; gap: 8px; }
.svc__head-left .snum { margin-bottom: 4px; }
.svc__head-left h2 { margin-top: 16px; }
.svc__head-right {
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
  max-width: 48ch;
}

.svc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.svc__card {
  padding: 36px 30px 30px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .3s var(--ease);
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.svc__card:hover {
  background: var(--white);
}
.svc__card:hover .svc__icon i {
  color: var(--red);
  transform: rotate(-10deg) scale(1.1);
}
.svc__num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-3);
  display: inline-block;
  margin-bottom: 22px;
}
.svc__icon {
  margin-bottom: 18px;
}
.svc__icon i {
  font-size: 30px;
  color: var(--ink);
  display: inline-block;
  transition: transform .35s var(--ease), color .25s var(--ease);
}
.svc__icon-svg {
  width: 30px;
  height: 30px;
  color: var(--ink);
  display: inline-block;
  transition: transform .35s var(--ease), color .25s var(--ease);
}
.svc__card:hover .svc__icon-svg {
  color: var(--red);
  transform: scale(1.15) rotate(15deg);
}
.svc__card h3 {
  font-family: var(--font-disp);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}
.svc__card p {
  font-size: 14px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.55;
}

/* ============================================================
   04 · OFICINA — video hero + galeria
   ============================================================ */
.ofc {
  padding: clamp(70px, 9vw, 110px) 0;
  background: var(--ink-2);
  color: var(--text-light-2);
}
.ofc__head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-dark);
}
.ofc__head-left { display: flex; flex-direction: column; gap: 14px; }
.ofc__head-kicker { display: flex; align-items: center; gap: 14px; }
.ofc__head h2 {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 54px);
}
.ofc__head-right {
  font-size: 15px;
  color: var(--text-light-2);
  margin: 0;
  max-width: 40ch;
  line-height: 1.55;
}

/* —— FEATURE: vertical video (9:16) + info side —— */
.ofc__feature {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 36px;
  margin-bottom: 48px;
  align-items: stretch;
}

.ofc__hero {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  aspect-ratio: 9 / 16;
  border-radius: 0;
}
.ofc__video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ofc__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,15,.4) 0%, transparent 18%, transparent 80%, rgba(20,20,15,.5) 100%);
  pointer-events: none;
}

.ofc__hero-top {
  position: absolute;
  top: 14px; left: 14px;
}
.ofc__hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  background: rgba(20,20,15,.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-dark);
  color: var(--white);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ofc__hero-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(217,21,40,.25);
  animation: liveDot 1.6s ease-in-out infinite;
}
@keyframes liveDot {
  50% { opacity: .4; }
}

.ofc__hero-sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: rgba(20,20,15,.75);
  backdrop-filter: blur(10px);
  color: var(--white);
  border: 1px solid var(--line-dark);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.ofc__hero-sound:hover {
  background: var(--red);
  border-color: var(--red);
}
.ofc__hero-sound i { font-size: 15px; }
.ofc__hero-sound i[data-state="unmuted"] { display: none; }
.ofc__hero-sound[aria-pressed="true"] i[data-state="muted"] { display: none; }
.ofc__hero-sound[aria-pressed="true"] i[data-state="unmuted"] { display: inline-block; }

/* —— Feature side (info) —— */
.ofc__feature-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 8px 0;
}
.ofc__feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-hot);
}
.ofc__feature-title {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}
.ofc__feature-title em {
  font-style: italic;
  color: var(--red);
  font-weight: 900;
}
.ofc__feature-desc {
  font-size: 16px;
  color: var(--text-light-2);
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
}
.ofc__feature-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
}
.ofc__feature-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line-dark);
}
.ofc__feature-list li:last-child {
  border-bottom: 1px solid var(--line-dark);
}
.ofc__feature-list-num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  width: 36px;
  flex-shrink: 0;
}
.ofc__feature-list-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -.005em;
}
.ofc__feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid var(--line-dark);
  color: var(--white);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: all .25s var(--ease);
  align-self: flex-start;
}
.ofc__feature-cta:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.ofc__feature-cta .arr {
  font-size: 13px;
  transition: transform .3s var(--ease);
}
.ofc__feature-cta:hover .arr {
  transform: translate(2px, -2px);
}

/* —— DIVIDER —— */
.ofc__divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 16px;
  margin-bottom: 16px;
  border-top: 1px solid var(--line-dark);
}
.ofc__divider-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ofc__divider-label::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--red);
}
.ofc__divider-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-light-3);
}

/* —— GALERIA —— */
.ofc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ofc__item {
  margin: 0;
  cursor: zoom-in;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ofc__item-img {
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 4/5;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.ofc__item-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
  transition: transform .9s var(--ease), filter .4s var(--ease);
}
.ofc__item:hover .ofc__item-img img {
  transform: scale(1.06);
  filter: contrast(1.15) saturate(1.1);
}
.ofc__item figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 2px;
}
.ofc__item-num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ofc__item-label {
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.005em;
  color: var(--white);
  line-height: 1.3;
}

/* ============================================================
   05 · CONTATO
   ============================================================ */
.ctc {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--paper);
}
.ctc__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  max-width: 820px;
}
.ctc__head h2 { margin: 12px 0 18px; }
.ctc__head p {
  font-size: 17px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.65;
  max-width: 56ch;
}

.ctc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.ctc__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ctc__form {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: var(--shadow-card);
}

.ctc__form-head {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}

.ctc__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ctc__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ctc__field span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ctc__field input,
.ctc__field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  padding: 15px 16px;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  resize: vertical;
}

.ctc__field input::placeholder,
.ctc__field textarea::placeholder {
  color: var(--text-3);
}

.ctc__field input:focus,
.ctc__field textarea:focus {
  outline: none;
  border-color: rgba(217,21,40,.42);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(217,21,40,.08);
}

.ctc__field--full {
  grid-column: 1 / -1;
}

.ctc__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.ctc__form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ctc__submit {
  min-width: 260px;
  justify-content: center;
}

.ctc__submit[disabled] {
  opacity: .7;
  cursor: wait;
}

.ctc__form-status {
  margin: 0;
  min-height: 22px;
  font-size: 14px;
  color: var(--text-2);
}

.ctc__form-status.is-error {
  color: var(--red-deep);
}

.ctc__form-status.is-success {
  color: #1e7a46;
}

.quote-cta {
  padding: 0 0 110px;
}

.quote-cta__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 36px;
  background:
    linear-gradient(135deg, rgba(217,21,40,.08) 0%, rgba(217,21,40,0) 44%),
    var(--ink);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.quote-cta__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 85% 50%, rgba(217,21,40,.18), transparent 34%);
  pointer-events: none;
}

.quote-cta__copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.quote-cta__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.quote-cta__copy h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  line-height: .96;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--white);
}

.quote-cta__copy p {
  margin: 0;
  max-width: 620px;
  color: rgba(255,255,255,.72);
}

.quote-cta__button {
  position: relative;
  z-index: 1;
  min-width: 280px;
  justify-content: center;
}

.quote-cta__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.quote-cta__button--ghost {
  border-color: rgba(255,255,255,.2);
  color: var(--white);
  background: rgba(255,255,255,.02);
}

.quote-cta__button--ghost:hover {
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.06);
}

.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s var(--ease);
}

.quote-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.quote-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,11,10,.7);
  backdrop-filter: blur(12px);
}

.quote-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(88vh, 920px);
  overflow: auto;
  background: linear-gradient(180deg, #ffffff 0%, #f4f1eb 100%);
  border: 1px solid rgba(16,16,16,.08);
  box-shadow: 0 40px 90px rgba(0,0,0,.28);
}

.quote-modal__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 28px 0;
}

.quote-modal__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
}

.quote-modal__title-wrap h3 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: .96;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.quote-modal__notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 14px;
  background: rgba(var(--accent-rgb, 220, 160, 60), .08);
  border-left: 3px solid var(--accent, #DCA03C);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2, #666);
}

.quote-modal__notice i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent, #DCA03C);
  font-size: 14px;
}

.quote-modal__notice strong {
  color: var(--ink);
}


.quote-modal__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  color: var(--ink);
  padding: 13px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}

.quote-modal__close:hover {
  border-color: var(--ink);
  background: var(--white);
  transform: translateY(-1px);
}

.quote-modal__form {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.ctc__card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: all .25s var(--ease);
}
.ctc__card-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 20px;
  flex-shrink: 0;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.ctc__card-body { flex: 1; min-width: 0; }
.ctc__card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.ctc__card-val {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
}
.ctc__card .arr {
  color: var(--text-3);
  font-size: 14px;
  transition: transform .3s var(--ease), color .25s var(--ease);
}
.ctc__card:hover {
  border-color: var(--ink);
  transform: translateX(4px);
}
.ctc__card:hover .ctc__card-ico {
  background: var(--ink);
  color: var(--white);
}
.ctc__card:hover .arr {
  transform: translate(3px, -3px);
  color: var(--ink);
}
.ctc__card--wpp .ctc__card-ico { background: #25d36622; color: #25d366; }
.ctc__card--wpp:hover .ctc__card-ico { background: #25d366; color: #fff; }

/* Horários */
.ctc__hours {
  margin-top: 22px;
  padding: 26px 28px;
  background: var(--ink);
  color: var(--white);
}
.ctc__hours-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: 16px;
}
.ctc__hours-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  font-size: 14px;
}
.ctc__hours-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-dark);
}
.ctc__hours-list span { color: var(--text-light-2); }
.ctc__hours-list strong {
  font-weight: 600;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.ctc__hours-list .closed strong { color: var(--text-light-3); font-weight: 400; }

/* Mapa */
.ctc__map { position: sticky; top: calc(var(--nav-h) + 24px); }
.map {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(217,21,40,.18);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.45);
}
.map__placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, #20201c 0%, #131310 100%);
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(92%) contrast(1.08) brightness(.88);
}
.map__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,15,.08) 0%, rgba(20,20,15,.22) 100%);
}
.map__pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  pointer-events: none;
}
.map__pin-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 10px 28px rgba(0,0,0,.42), 0 0 0 10px rgba(217,21,40,.16);
  background: #0f0f10;
}
.map__pin-pulse {
  position: absolute; inset: 8px;
  border-radius: 50%;
  background: var(--red);
  opacity: .28;
  animation: pinPulse 2s ease-out infinite;
}
.map--loaded .map__placeholder { display: none; }
@keyframes pinPulse {
  0%   { transform: scale(1); opacity: .4; }
  100% { transform: scale(5); opacity: 0; }
}

.ctc__map-info {
  margin-top: 16px;
  padding: 22px 24px;
  background: linear-gradient(180deg, #1a1a14, #12120f);
  border: 1px solid rgba(217,21,40,.16);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ctc__map-info strong {
  font-family: var(--font-disp);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  color: var(--white);
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.ctc__map-info span {
  font-size: 14px;
  color: var(--text-light-2);
  line-height: 1.5;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: var(--ink);
  color: var(--text-light-2);
  padding: 80px 0 28px;
  border-top: 1px solid var(--line-dark);
}
.foot__top {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.foot__logo {
  height: 64px;
  width: auto;
}
.foot__tag {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-light-3);
  margin-left: auto;
  text-align: right;
  line-height: 1.6;
}

.foot__cols {
  padding: 56px 0 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.foot__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--text-light-2);
}
.foot__col a {
  color: var(--text-light-2);
  transition: color .2s var(--ease);
}
.foot__col a:hover { color: var(--white); }
.foot__col span:not(.foot__col-label) {
  color: var(--text-light-3);
}
.foot__col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}

.foot__legal {
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-light-3);
  flex-wrap: wrap;
  gap: 12px;
}

.foot__credit {
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 11px;
  text-align: center;
  color: var(--text-light-3);
}

.foot__credit-name {
  letter-spacing: .03em;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8,9,11,.96);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox__stage {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__stage img,
.lightbox__stage video {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  background: var(--ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,.08);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.18);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .25s var(--ease);
  backdrop-filter: blur(10px);
  z-index: 2;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.05);
}
.lightbox__close {
  top: 24px;
  right: 24px;
}
.lightbox__close i {
  font-size: 18px;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__nav:hover {
  transform: translateY(-50%) scale(1.05);
}
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__nav i { font-size: 22px; }

.lightbox__caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(20,20,15,.7);
  border: 1px solid rgba(255,255,255,.1);
  padding: 10px 18px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.lightbox__counter {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(20,20,15,.7);
  border: 1px solid rgba(255,255,255,.1);
  padding: 10px 14px;
  backdrop-filter: blur(10px);
}

/* Make media trigger elements show "expand" affordance */
.media-trigger {
  position: relative;
  cursor: zoom-in;
}
.media-trigger::after {
  content: "\e937"; /* primeicons expand */
  font-family: 'primeicons';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(20,20,15,.7);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.15);
  font-size: 13px;
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s var(--ease);
  pointer-events: none;
}
.media-trigger:hover::after,
.media-trigger:focus-visible::after {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .lightbox__close { top: 14px; right: 14px; width: 42px; height: 42px; }
  .lightbox__counter { top: 14px; left: 14px; padding: 8px 12px; font-size: 11px; }
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__caption { bottom: 14px; font-size: 11px; padding: 8px 14px; }
  .media-trigger::after { opacity: 1; } /* always visible on touch */

  .quote-cta__panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .quote-cta__button {
    min-width: 0;
  }
  .quote-cta__actions {
    width: 100%;
  }
}
.fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 58px;
  height: 58px;
  background: #25d366;
  color: var(--white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  z-index: 90;
  box-shadow: 0 16px 36px -8px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.25);
  transition: transform .3s var(--ease), opacity .8s cubic-bezier(.22,1,.36,1), visibility .8s, bottom .8s cubic-bezier(.22,1,.36,1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  bottom: 0;
}
body.scrolled .fab {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  bottom: 22px;
}
.fab:hover { transform: scale(1.08); }
.fab__pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #25d366;
  opacity: .4;
  animation: pinPulse 2.5s ease-out infinite;
  z-index: -1;
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }

  .hero__grid { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .hero__side { margin-bottom: 0; align-self: start; }
  .hero__rating { width: max-content; max-width: 100%; }

  .sobre__grid { grid-template-columns: 1fr; gap: 60px; }
  .sobre__visual { max-width: 520px; }

  .esp__grid { grid-template-columns: 1fr; }
  .svc__grid { grid-template-columns: repeat(2, 1fr); }
  .svc__head { grid-template-columns: 1fr; gap: 28px; }
  .ofc__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .ofc__feature {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 600px;
    margin-inline: auto;
  }
  .ofc__hero { max-width: 320px; margin-inline: auto; width: 100%; }
  .ofc__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .ofc__item-img { aspect-ratio: 4/5; }
  .ctc__grid { grid-template-columns: 1fr; gap: 40px; }
  .ctc__map { position: static; max-width: 600px; }

  .foot__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 640px) {
  :root { --nav-h: 76px; }

  .nav__logo { height: 56px; max-width: 240px; }

  .hero { padding-bottom: 0; min-height: 100svh; }
  .hero__grid { padding-bottom: 120px; }
  .marquee { padding: 36px 0 14px; }
  .hero__media img { object-position: center top; }
  .hero__title {
    font-size: clamp(50px, 14vw, 74px);
    margin-bottom: 22px;
  }
  .hero__title .line { white-space: normal; }
  .hero__title .line--keep { white-space: nowrap; }
  .hero__title .line--accent br { display: inline; }
  .hero__sub {
    font-size: 14px;
    max-width: none;
    margin-bottom: 28px;
    line-height: 1.58;
  }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; justify-content: center; padding: 18px; font-size: 12px; }
  .hero__side { width: 100%; }
  .hero__rating { width: 100%; }
  .hero__scroll { display: none; }

  .marquee__item { font-size: 16px; padding: 0 6px; gap: 6px; letter-spacing: 0; }
  .marquee__logo--wide { height: 60px; }
  .marquee__track { animation-duration: 28s; }

  .sobre__pillars { grid-template-columns: 1fr; gap: 22px; }
  .pillar { padding: 20px 0; border-top: 1px solid var(--line); }
  .pillar:first-child { padding-top: 0; border-top: 0; }
  .sobre__stamp {
    width: 130px; height: 130px;
    bottom: -24px; right: -16px;
    border-width: 4px;
  }
  .sobre__stamp-year { font-size: 36px; }
  .sobre__stamp-top, .sobre__stamp-bot { font-size: 8px; }

  .esp__card-body { padding: 24px 22px 26px; }
  .esp__card-head { flex-wrap: wrap; }
  .esp__card-models { margin-left: 0; width: 100%; }

  .svc__grid { grid-template-columns: 1fr 1fr; }
  .svc__card { padding: 24px 18px 22px; min-height: 180px; }
  .svc__card h3 { font-size: 18px; }
  .svc__card p { font-size: 13px; }

  .ofc__hero { max-width: 280px; }
  .ofc__hero-top { top: 10px; left: 10px; }
  .ofc__feature-title { font-size: 26px; }
  .ofc__hero-sound { right: 10px; bottom: 10px; width: 36px; height: 36px; }
  .ofc__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ofc__item-img { aspect-ratio: 4/5; }
  .ofc__divider-count { display: none; }

  .quote-cta {
    padding-bottom: 84px;
  }
  .quote-cta__panel {
    padding: 24px 20px;
    gap: 22px;
  }
  .quote-cta__copy h2 {
    font-size: clamp(24px, 10vw, 40px);
  }
  .quote-cta__button {
    width: 100%;
  }
  .quote-cta__actions {
    width: 100%;
  }

  .ctc__card { padding: 18px 18px; gap: 14px; }
  .ctc__card-val { font-size: 14px; }
  .ctc__hours-list { grid-template-columns: 1fr; gap: 0; }
  .ctc__form { padding: 22px 18px; }
  .ctc__form-grid { grid-template-columns: 1fr; gap: 14px; }
  .ctc__submit { width: 100%; min-width: 0; }
  .quote-modal {
    padding: 0;
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .quote-modal__backdrop {
    display: none;
  }
  .quote-modal__dialog {
    width: 100%;
    max-height: none;
    min-height: 100svh;
    border: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .quote-modal__top {
    position: static;
    padding: 18px 18px 24px;
    background: #f4f1eb;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .quote-modal__title-wrap h3 {
    font-size: 26px;
  }
  .quote-modal__close {
    flex-shrink: 0;
    padding: 10px 12px;
    font-size: 10px;
  }
  .quote-modal__form {
    flex: 1;
    border: 0;
    box-shadow: none;
  }
  .foot__top { flex-direction: column; align-items: flex-start; }
  .foot__tag { margin-left: 0; text-align: left; font-size: 11px; }
  .foot__logo { height: 48px; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot__legal { flex-direction: column; align-items: center; text-align: center; }
  .foot__credit { text-align: center; }

  .fab {
    width: 54px;
    height: 54px;
    bottom: 16px;
    right: 16px;
    font-size: 24px;
  }
}

@media (max-width: 380px) {
  .svc__grid { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   SUCCESS SPLASH OVERLAY
   ============================================================ */
.success-splash {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.success-splash.is-active {
  opacity: 1;
  pointer-events: auto;
}

.success-splash__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 10, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.success-splash__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 440px;
  width: 100%;
  padding: 48px 32px;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  transform: scale(0.85) translateY(30px);
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.success-splash.is-active .success-splash__content {
  transform: scale(1) translateY(0);
}

.success-splash__icon-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.success-splash__circle {
  position: absolute;
  inset: 0;
  border: 3px solid var(--red);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
}

.success-splash.is-active .success-splash__circle {
  animation: success-circle 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards, success-glow 2s ease-out 0.6s infinite;
}

.success-splash__icon {
  font-size: 36px;
  color: var(--white);
  opacity: 0;
  transform: scale(0.4) rotate(-15deg);
  z-index: 2;
}

.success-splash.is-active .success-splash__icon {
  animation: success-check 0.45s cubic-bezier(0.19, 1, 0.22, 1) 0.3s forwards;
}

.success-splash__title {
  font-family: var(--font-disp);
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 12px 0;
  opacity: 0;
  transform: translateY(15px);
}

.success-splash.is-active .success-splash__title {
  animation: success-fade-up 0.5s var(--ease) 0.4s forwards;
}

.success-splash__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0;
  opacity: 0;
  transform: translateY(15px);
}

.success-splash.is-active .success-splash__text {
  animation: success-fade-up 0.5s var(--ease) 0.5s forwards;
}

/* Animations */
@keyframes success-circle {
  0% { transform: scale(0.4); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes success-check {
  0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  70% { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes success-glow {
  0% { box-shadow: 0 0 0 0 rgba(217, 21, 40, 0.4); }
  100% { box-shadow: 0 0 0 24px rgba(217, 21, 40, 0); }
}

@keyframes success-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ============ MODAL · INAUGURAÇÃO MULTIMARCAS ============ */
.modal-inaug {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.modal-inaug[hidden] { display: none; }

.modal-inaug__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(6px);
  animation: modal-fade-in .3s ease;
}

.modal-inaug__box {
  position: relative;
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 2rem 2rem 1.75rem;
  width: 100%;
  max-width: min(94vw, 1160px);
  max-height: 92dvh;
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0,0,0,.8);
  animation: modal-slide-up .35s cubic-bezier(.22,1,.36,1);
}

.modal-inaug__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  font-size: .8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  z-index: 1;
}
.modal-inaug__close:hover { background: rgba(255,255,255,.14); color: #fff; }

.modal-inaug__tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-hot);
  margin-bottom: 1rem;
}

.modal-inaug__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-hot);
  animation: pulse-dot 1.6s ease infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,31,51,.6); }
  50%       { box-shadow: 0 0 0 5px rgba(255,31,51,0); }
}


/* images */
.modal-inaug__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.modal-inaug__card {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}

.modal-inaug__card img {
  display: block;
  width: 100%;
  height: auto;
}

/* actions */
.modal-inaug__actions {
  display: flex;
  gap: .75rem;
  align-items: center;
}

.modal-inaug__btn-close {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border: none;
  border-radius: 8px;
  padding: .85em 1.4em;
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
  box-shadow: 0 0 0 0 rgba(217,21,40,0);
}

.modal-inaug__btn-close::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: btn-shine 2.4s ease infinite;
}

@keyframes btn-shine {
  0%   { left: -100%; }
  40%  { left: 140%; }
  100% { left: 140%; }
}

.modal-inaug__btn-close:hover {
  background: var(--red-hot);
  box-shadow: 0 0 24px rgba(255,31,51,.5);
}
.modal-inaug__btn-close:active { transform: scale(.97); }

/* animations */
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
  .modal-inaug { padding: .5rem; }

  .modal-inaug__box {
    padding: 1.25rem .875rem 1rem;
    border-radius: 14px;
    max-height: 93dvh;
  }

  .modal-inaug__cards {
    gap: .4rem;
    margin-bottom: 1rem;
  }

  .modal-inaug__card img {
    max-height: calc(93dvh - 110px);
    object-fit: cover;
    object-position: top center;
  }
}