/* ==========================================================================
   TEC-LAR Ar Condicionado — style.css
   Base, tokens, componentes e seções (desktop-first, referência 1440px).
   Ajustes por breakpoint ficam em responsive.css.
   ========================================================================== */

/* 1. Fontes (self-hosted, variáveis) ------------------------------------- */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../assets/fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../assets/fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens ---------------------------------------------------------------- */

:root {
  /* Superfícies (dominantes) */
  --c-white: #FFFFFF;
  --c-bg: #FBFBFA;
  --c-bg-alt: #F4F5F7;
  --c-line: #E3E7EE;

  /* Azul-marinho: títulos, texto, ícones */
  --c-navy: #0B2358;
  --c-ink: #1D2B4F;
  --c-muted: #5B6683;

  /* Amarelo Tec-Lar: CTA, detalhes, ondas */
  --c-yellow: #FFC814;
  --c-yellow-300: #FFDA3D;
  --c-yellow-500: #FDB900;
  --c-yellow-100: #FFF5D6;

  /* Restritos */
  --c-red: #E3120B;        /* apenas identidade/logo */
  --c-royal: #1B3FD1;      /* logotipo e ícones pontuais */
  --c-whatsapp: #25D366;

  /* Tipografia */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --fs-h1: clamp(2.125rem, 1.1rem + 3.7vw, 4rem);          /* 34 → 64px */
  --fs-lead: clamp(1.0625rem, 0.9rem + 0.55vw, 1.375rem);  /* 17 → 22px */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* Escala tipográfica do celular (≤599px, aplicada em responsive.css):
     mesma função → mesmo tamanho em todas as seções */
  --t-h2: clamp(1.5625rem, 0.95rem + 3.1vw, 1.875rem);   /* títulos de seção 25 → 30px */
  --t-card: 1.0625rem;                                    /* títulos de serviço/cartão 17px */
  --t-body: clamp(0.9375rem, 0.8rem + 0.7vw, 1rem);       /* descrições 15 → 16px */
  --t-small: 0.875rem;                                    /* apoio 14px */
  --t-caption: 0.8125rem;                                 /* legendas 13px */
  --t-micro: 0.75rem;                                     /* subtítulos em caixa alta 12px */

  /* Layout */
  --container: 1260px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 78px;

  /* Ritmo vertical entre seções: distância VISUAL entre o fim do conteúdo
     de uma seção e o início do conteúdo da próxima (não soma de paddings).
     Fluida (distância medida): ~25px (320) → 31 (600) → 40 (900) → 53 (≥1340).
     Cada seção define só o espaço de cima (padding-top) descontando o que a
     anterior já deixa embaixo dentro do próprio conteúdo (--svc-row-pad). */
  --section-gap: clamp(26px, 14px + 3.2vw, 56px);
  --svc-row-pad: 0px;

  /* Forma */
  --radius-pill: 999px;
  --radius-lg: 24px;
  --radius-md: 16px;

  /* Sombras */
  --shadow-sm: 0 8px 20px -12px rgba(11, 35, 88, 0.22);
  --shadow-md: 0 18px 40px -22px rgba(11, 35, 88, 0.30);
  --shadow-yellow: 0 12px 24px -10px rgba(245, 170, 0, 0.55);
  --shadow-yellow-hover: 0 16px 30px -10px rgba(245, 170, 0, 0.65);

  /* Movimento */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 260ms;
  --dur-slow: 700ms;
}

/* 3. Reset ----------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-navy);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--c-navy);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 4. Utilitários ----------------------------------------------------------- */

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

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

.nowrap {
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}

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

/* 5. Botões ---------------------------------------------------------------- */

.btn {
  --btn-h: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: var(--btn-h);
  padding: 0 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    filter var(--dur) var(--ease-out);
}

.btn__icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.btn__arrow {
  width: 1.125em;
  height: 1.125em;
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(4px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}

.btn:focus-visible {
  outline: 3px solid var(--c-navy);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

/* Primário — amarelo Tec-Lar */
.btn--primary {
  color: var(--c-navy);
  background-color: var(--c-yellow);
  background-image: linear-gradient(180deg, var(--c-yellow-300) 0%, var(--c-yellow) 100%);
  box-shadow: var(--shadow-yellow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-yellow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: saturate(1.08) brightness(1.02);
}

/* Secundário — contorno branco */
.btn--outline {
  color: var(--c-navy);
  background-color: var(--c-white);
  border-color: #D5DBE6;
  box-shadow: var(--shadow-sm);
}

/* hover: mesma linguagem do botão do mapa (sobe, borda amarela, fundo
   amarelo bem claro) + o telefone "toca" uma vez, de leve */
.btn--outline:hover,
.btn--outline:focus-visible {
  transform: translateY(-2px);
  border-color: var(--c-yellow);
  background-color: #FFFBEC;
  box-shadow: 0 14px 28px -14px rgba(11, 35, 88, 0.3);
}

.btn--outline:hover .btn__icon,
.btn--outline:focus-visible .btn__icon {
  animation: btn-ring 700ms var(--ease-out) 1;
}

@keyframes btn-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); }
  30% { transform: rotate(11deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(5deg); }
  75% { transform: rotate(-2deg); }
}

/* Tamanhos */
.btn--lg {
  --btn-h: 62px;
  padding: 0 2.25rem;
  font-size: 1.0625rem;
}

.btn--sm {
  --btn-h: 46px;
  padding: 0 1.375rem;
  font-size: 0.9375rem;
}

/* 6. Componentes tipográficos compartilhados ------------------------------- */

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-navy);
}

/* Frases manuscritas (Caveat) — discretas, sem exagero */
.handnote {
  position: relative;
  font-family: var(--font-hand);
  font-size: clamp(1.375rem, 0.85rem + 1.25vw, 1.9375rem);
  font-weight: 600;
  line-height: 0.98;
  text-align: right;
  color: var(--c-white);
  text-shadow: 0 1px 12px rgba(30, 20, 5, 0.3);
  transform: rotate(-10deg);
  transform-origin: right center;
}

.handnote__line {
  display: block;
}

.handnote__underline {
  width: 4.2em;
  height: 0.36em;
  margin: 0.12em 0 0 auto;
  color: var(--c-yellow);
  overflow: visible;
}

/* 7. Header ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.98);
  transition:
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 1px 0 rgba(11, 35, 88, 0.06),
    0 12px 30px -20px rgba(11, 35, 88, 0.35);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.75rem);
  min-height: var(--header-h);
}

/* Marca: símbolo oficial + logotipo em texto */
.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 10px;
}

/* O PNG tem fundo branco sólido: multiply o funde ao header claro */
.brand__symbol {
  width: 56px;
  height: auto;
  mix-blend-mode: multiply;
}

.brand__text {
  display: grid;
  line-height: 1;
}

.brand__name {
  font-size: 1.625rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--c-royal);
}

.brand__tagline {
  margin-top: 0.15rem;
  padding-left: 0.1rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-royal);
}

/* Navegação */
.main-nav {
  margin-inline: auto;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.main-nav__link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: 0.6875rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  color: var(--c-ink);
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

/* pílula de fundo: surge crescendo do centro (hover) ou fixa (ativo) */
.main-nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: #EDF0F6;
  opacity: 0;
  transform: scale(0.86);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

/* traço amarelo da marca: meio traço no hover, inteiro no ativo */
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 12px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--c-yellow-500);
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.main-nav__link:hover,
.main-nav__link:focus-visible {
  color: var(--c-navy);
}

.main-nav__link:hover::before,
.main-nav__link:focus-visible::before {
  opacity: 1;
  transform: none;
}

.main-nav__link:hover::after,
.main-nav__link:focus-visible::after {
  opacity: 0.7;
  transform: translateX(-50%) scaleX(0.6);
}

.main-nav__link:active {
  transform: scale(0.97);
}

.main-nav__link.is-active {
  font-weight: 700;
  color: var(--c-navy);
}

.main-nav__link.is-active::before {
  background-color: var(--c-yellow-100);
  opacity: 1;
  transform: none;
}

.main-nav__link.is-active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.main-nav__link.is-active:hover::after {
  transform: translateX(-50%) scaleX(1.5);
}

/* Atalhos do menu mobile (ocultos no desktop) */
.main-nav__extra {
  display: none;
}

/* Telefone */
.header-phone {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-navy);
  border-radius: 8px;
  transition: color var(--dur-fast) var(--ease-out);
}

.header-phone__icon {
  width: 20px;
  height: 20px;
  transition: transform var(--dur) var(--ease-out);
}

.header-phone:hover .header-phone__icon {
  transform: rotate(-12deg);
}

.header-cta {
  flex: none;
}

/* Hambúrguer (oculto no desktop) */
.nav-toggle {
  display: none;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--c-line);
  border-radius: 50%;
  background-color: var(--c-white);
  color: var(--c-navy);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.nav-toggle:hover {
  border-color: var(--c-navy);
}

.nav-toggle__icon {
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.nav-toggle__icon--close {
  opacity: 0;
  transform: rotate(-90deg);
}

.site-header.is-open .nav-toggle__icon--open {
  opacity: 0;
  transform: rotate(90deg);
}

.site-header.is-open .nav-toggle__icon--close {
  opacity: 1;
  transform: none;
}

/* 8. Hero ------------------------------------------------------------------ */

/* Conteúdo limitado ao container; foto, véu e onda vão até as bordas da tela.
   --edge = distância da borda da tela até a borda do container (qualquer viewport).
   --hero-focus = ponto focal da foto (object-position), ajustável por breakpoint. */
.hero {
  --edge: max(var(--gutter), (100% - var(--container)) / 2);
  --hero-focus: 70% 40%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(600px, 47.2vw, 680px);
  padding-top: clamp(48px, 4.7vw, 68px);
  padding-bottom: clamp(96px, 7.6vw, 110px);
  background-color: var(--c-bg);
}

.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__content {
  max-width: 640px;
}

.hero__eyebrow {
  margin-bottom: 0.875rem;
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--c-navy);
}

.hero__title-line {
  display: block;
}

.hero__title-line--accent {
  color: var(--c-yellow-500);
}

/* A Plus Jakarta Sans tem um recuo largo antes do ponto em pesos altos */
.kern-dot {
  margin-left: -0.07em;
}

.hero__lead {
  max-width: 21em;
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.32;
  color: var(--c-ink);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.875rem;
}

.hero__actions .btn--primary {
  min-width: 20.5rem;
}

.hero__actions .btn--outline {
  min-width: 14.75rem;
}

/* Selos de confiança */
.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.75rem;
  margin-top: 3.25rem;
}

.trust-list__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.trust-list__icon {
  flex: none;
  width: 38px;
  height: 38px;
  color: var(--c-navy);
}

.trust-list__text {
  display: grid;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-ink);
}

.trust-list__text strong {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--c-navy);
}

/* Fotografia de fundo */
/* <picture> não gera caixa: a <img> continua dimensionada por .hero__media */
.hero__picture {
  display: contents;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus);
}

/* Véu claro para legibilidade do texto — ancorado ao container,
   não à largura da tela (em ultrawide a foto aparece à direita sem lavar). */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(251, 251, 250, 0.94) 0,
    rgba(251, 251, 250, 0.82) calc(var(--edge) + 342px),
    rgba(251, 251, 250, 0.45) calc(var(--edge) + 558px),
    rgba(251, 251, 250, 0) calc(var(--edge) + 774px)
  );
}

/* Folhagem decorativa na borda esquerda.
   Duas máscaras combinadas (intersect):
   – horizontal: dissolve as folhas antes da coluna de texto;
   – vertical: presença plena só nas extremidades superior e inferior,
     bem suave na faixa do título/parágrafo. */
.hero__foliage {
  position: absolute;
  top: 0;
  left: -40px;
  z-index: 1;
  width: auto;
  max-width: none;
  height: 100%;
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  --foliage-mask-x: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.5) 80px, transparent 170px);
  --foliage-mask-y: linear-gradient(180deg, #000 0, #000 16%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0.3) 66%, #000 86%);
  -webkit-mask-image: var(--foliage-mask-x), var(--foliage-mask-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--foliage-mask-x), var(--foliage-mask-y);
  mask-composite: intersect;
}

.hero__handnote {
  position: absolute;
  z-index: 1;
  top: clamp(200px, 18vw, 258px);
  right: max(24px, var(--edge) - 44px);
}

/* Transição Hero → próxima seção (amarelo + onda traseira + onda dianteira).
   Altura em px (não proporcional à largura): em ultrawide a curva só se alonga
   na horizontal, mantendo a mesma relação vertical com o conteúdo. */
.hero-transition {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 3;
  width: 100%;
  height: clamp(64px, 10.4vw, 150px);
  overflow: visible;
  pointer-events: none;
}

.hero-transition--phone {
  display: none;
}

.wave-back,
.wave-front {
  fill: var(--c-bg);
}

/* 9. Como podemos ajudar --------------------------------------------------
   Medidas tiradas do mockup (convertidas para 1440px). Composição compacta:
   título no topo esquerdo, aparelho grande no topo direito invadindo o hero,
   serviços logo abaixo em três colunas sem caixas. */

.services {
  position: relative;
  z-index: 1;
  padding-bottom: 0;
  background-color: var(--c-bg);
}

.services__inner {
  position: relative;
}

/* Fluxo de ar amarelo — ≥1280px: dentro do cabeçalho, abaixo do texto
   (z-index -1 no contexto do cabeçalho) e, com ele, abaixo do aparelho. */
.services__swoosh {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

/* Fluxo de ar amarelo — 601–1279px: caixa posicionada no cabeçalho
   (geometria em responsive.css), abaixo do texto e, com ele, do aparelho. */
.services__curve {
  position: absolute;
  z-index: -1;
  left: 0;
  display: none;
  pointer-events: none;
}

.services__curve svg {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  overflow: visible;
}

.services__head {
  position: relative;
  z-index: 1;
}

.services__title {
  font-size: clamp(2.125rem, 1.1rem + 2.9vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.services__title-line {
  display: block;
}

.services__lead {
  max-width: 19.6em;
  margin-top: 1.125rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.38;
  color: var(--c-ink);
}

/* Aparelho flutuante — grande, topo direito, sobe sobre a onda do hero.
   Coordenadas relativas ao container (.services__inner), como a curva SVG:
   em 1440px (container 1260) → 700px de largura e 90px além da borda
   direita, igual ao mockup. Acima disso a composição não muda; o espaço
   extra do ultrawide fica nas margens. O avanço sobre a margem é limitado
   à margem real (--edge), para nunca sair da viewport em telas menores. */
.services__unit {
  --edge: max(var(--gutter), (100vw - var(--container)) / 2);
  position: absolute;
  z-index: 2;
  top: -85px;
  right: calc(-1 * min(7.15%, var(--edge)));
  width: 55.55%;
  pointer-events: none;
}

/* Proporção original (2172×724), sem corte, sem fundo/borda/raio */
.services__ac-unit {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(11, 35, 88, 0.09));
}

/* Serviços: três colunas no container, larguras como no mockup */
.services__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.22fr 1.28fr 1.1fr;
  margin-top: clamp(36px, 3.4vw, 48px);
}

/*  (ícone)
    Título
    Texto            (→)
    Ícone dentro do círculo amarelo: os dois ocupam a mesma célula do grid. */
.service__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  grid-template-areas:
    "badge ."
    "title ."
    "text  arrow";
  --badge: 48px;
  --icon: 22px;
  padding-right: clamp(16px, 3.6vw, 52px);
  color: inherit;
  border-radius: 12px;
}

/* Última coluna encosta a seta na borda do container */
.service:last-child .service__link {
  padding-right: 0;
}

.service__link:focus-visible {
  outline-offset: 8px;
}

.service__badge {
  grid-area: badge;
  justify-self: start;
  align-self: center;
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  background-color: #FFCC24;
  transition: background-color 220ms var(--ease-out);
}

/* 22px em viewBox 24 com traço 2 → ~1,8px na tela */
.service__icon {
  position: relative;
  grid-area: badge;
  justify-self: start;
  align-self: center;
  width: var(--icon);
  height: var(--icon);
  margin-left: calc((var(--badge) - var(--icon)) / 2);
  color: #0B2358;
  transition: transform 220ms var(--ease-out);
}

.service__title {
  grid-area: title;
  margin-top: 1.125rem;
  font-size: clamp(1.375rem, 1.15rem + 0.45vw, 1.625rem);
  letter-spacing: -0.015em;
}

.service__text {
  grid-area: text;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.42;
  color: var(--c-ink);
}

.service__line {
  display: block;
}

.service__arrow {
  grid-area: arrow;
  align-self: end;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #E3E6EB;
  border-radius: 50%;
  background-color: var(--c-white);
  color: var(--c-navy);
  transition: border-color 220ms var(--ease-out);
}

.service__arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 220ms var(--ease-out);
}

/* Microinterações (transições zeradas em prefers-reduced-motion, seção 11) */
@media (hover: hover) {
  .service__link:hover .service__badge {
    background-color: #F5BD0F;
  }

  .service__link:hover .service__icon {
    transform: translateY(-2px);
  }

  .service__link:hover .service__arrow {
    border-color: var(--c-yellow);
  }

  .service__link:hover .service__arrow svg {
    transform: translateX(2px);
  }
}

.service__link:focus-visible .service__arrow {
  border-color: var(--c-yellow);
}

/* Geometria do mockup no desktop (≥901px: mesma composição do hero
   desktop). Medida por sobreposição mockup × screenshot em 1440px. */
@media (min-width: 901px) {
  .services {
    overflow-x: clip;
  }

  /* Título sobe para logo após a curva do hero */
  .services__head {
    margin-top: -16px;
  }

  /* A sombra e o brilho já vêm no asset. A máscara só dissolve a base do
     fluxo de ar, que encosta na borda inferior do arquivo (evita corte reto). */
  /* Contato: sombra mínima e sem deslocamento só para a borda branca superior
     não se fundir ao fundo branco (no fluxo de ar, semitransparente, some). */
  .services__ac-unit {
    filter: drop-shadow(0 1px 4px rgba(22, 34, 54, 0.16));
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  }

  /* Profundidade: sombra separada, só do corpo do aparelho (drop-shadow no
     WebP sombrearia também o fluxo de ar). Retângulo arredondado no lugar e
     na inclinação do corpo, atrás da imagem (z-index -1 dentro do contexto de
     .services__unit, acima da curva). O corpo opaco esconde o centro; só o
     desfoque aparece nas bordas, mais à direita e abaixo:
     contato (destaca a borda branca) · próxima · distante. */
  .services__unit::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 7.9%;
    top: 45.5%;
    width: 85%;
    height: 42.3%;
    border-radius: 18px 18px 36px 28px;
    transform-origin: 0 0;
    /* paralelogramo: lateral esquerda e base do corpo (perspectiva do asset) */
    transform: matrix(1, -0.0639, 0.1538, 1, 0, 0);
    box-shadow:
      12px 14px 26px rgba(22, 34, 54, 0.22),
      32px 26px 64px rgba(22, 34, 54, 0.16);
  }

  /* Faixa sob a borda superior (TL → TR do corpo, inclinação do asset):
     sombra ambiente curta, mais à esquerda, para a borda branca se separar
     do fundo branco. */
  .services__unit::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 7.9%;
    top: 45.5%;
    width: 80%;
    height: 19.5%;
    border-radius: 16px 12px 0 0;
    transform-origin: 0 0;
    transform: matrix(1, -0.2286, 0, 1, 0, 0);
    box-shadow:
      -5px -4px 18px rgba(22, 34, 54, 0.22),
      0 -10px 44px rgba(22, 34, 54, 0.10);
  }

  /* Serviços acima do aparelho/fluxo (conteúdo sempre legível) */
  .services__list {
    z-index: 3;
    grid-template-columns: 438fr 446fr 376fr;
    margin-top: 56px;
  }
}

/* 10. Marcas ---------------------------------------------------------------
   Texto fixo à esquerda | carrossel infinito à direita, em todas as larguras
   (desktop ~27% | 73%; celular ~44% | 56%). Logotipos sem caixas; cada um
   com altura própria para a mesma massa visual: h = 42 / √(proporção / 2,27),
   em --u (1px no desktop → ~0,62px no celular: LG 42 → 26px). */
.brands {
  --u: clamp(0.62px, 0.45px + 0.04vw, 1px);
  --brand-title-fs: clamp(1rem, 0.55rem + 2.2vw, 2.125rem);
  --brand-gap: clamp(1.5rem, 0.9rem + 2.4vw, 3.5rem);
  padding-top: max(0px, var(--section-gap) - var(--svc-row-pad));
  /* curto: a borda ondulada da foto da seção seguinte faz a transição
     (no mockup a foto quase encosta no texto das marcas) */
  padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
  background-color: var(--c-bg);
}

.brands__inner {
  display: grid;
  /* ~27%, mas nunca menos que a linha mais longa do título
     ("as melhores marcas" ≈ 9,4em do tamanho do título) */
  grid-template-columns: minmax(0, max(27%, var(--brand-title-fs) * 9.4)) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(0.75rem, 3vw, 3rem);
}

.brands__title {
  font-size: var(--brand-title-fs);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.brands__title-line,
.brands__lead-line {
  display: block;
}

.brands__lead {
  margin-top: 0.5em;
  font-size: clamp(0.6875rem, 0.6rem + 0.35vw, 0.875rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-ink);
}

/* Área visível: corta só na horizontal (o trilho), com as pontas esmaecidas.
   Em ultrawide não passa de ~60rem, para os logotipos não se espalharem. */
.brands__marquee {
  min-width: 0;
  width: 100%;
  max-width: 60rem;
  justify-self: end;
  overflow: hidden;
  padding-block: 0.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.brands__track {
  display: flex;
  width: max-content;
  animation: brands-marquee var(--brand-speed, 34s) linear infinite;
}

.brands__list {
  display: flex;
  flex: none;
  align-items: center;
  padding: 0;
  list-style: none;
}

/* O espaçamento é do item (não "gap"): as duas sequências ficam idênticas */
.brands__item {
  flex: none;
  display: flex;
  align-items: center;
  padding-inline-end: var(--brand-gap);
}

.brands__item img {
  display: block;
  width: auto;
  max-width: none;
  height: calc(var(--h) * var(--u));
}

.brands__item--lg      { --h: 42; }
.brands__item--gree    { --h: 28; }
.brands__item--hitachi { --h: 25; }
.brands__item--midea   { --h: 39; }
.brands__item--elgin   { --h: 35; }
.brands__item--samsung { --h: 25; }

@keyframes brands-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Movimento reduzido: sem animação; a faixa vira rolagem horizontal manual
   (a cópia fica oculta) */
@media (prefers-reduced-motion: reduce) {
  .brands__track {
    animation: none;
  }

  .brands__list[aria-hidden="true"] {
    display: none;
  }

  .brands__marquee {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* 11. Atendimento especializado -------------------------------------------
   Grade da seção: margem | coluna da foto (47%) | coluna do texto (53%) |
   margem — as colunas internas somam a largura do .container, então o texto
   alinha com as demais seções. A foto ocupa margem esquerda + coluna 1
   (encosta na borda da tela, como no mockup) com recorte orgânico em
   clip-path (unidades da própria caixa: o desenho acompanha qualquer
   largura). Altura da linha = a maior entre foto (proporção fixa) e texto.
   Abaixo de 900px a foto vai para cima do texto (responsive.css). */
.team {
  --edge: max(var(--gutter), (100% - var(--container)) / 2);
  position: relative;
  display: grid;
  /* medidas do mockup (1440px): faixa 133px no topo; foto 20px abaixo do
     topo; texto 109px abaixo do topo; fio dourado nos ~106px de baixo */
  --band-h: clamp(5rem, 9.2vw, 8.5rem);
  --line-h: clamp(3.5rem, 7.4vw, 7rem);
  grid-template-columns: var(--edge) minmax(0, 44fr) minmax(0, 56fr) var(--edge);
  align-items: start;
  overflow-x: clip;
  padding-bottom: 0;
  /* Fundo branco contínuo para as três fotografias. */
  background-color: var(--c-bg);
}

.team__top-wave {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 100%;
  max-width: none;
  /* altura em C (largura do container): o sobretítulo fica sempre em y≈69
     desta escala, então as curvas não descem sobre o texto */
  height: calc(var(--C, 1260px) * 200 / 1260);
  /* a ponta direita sobe acima do topo da seção (até o fim das marcas),
     como no mockup */
  overflow: visible;
  pointer-events: none;
}

/* Superfícies (desktop): ocupa a seção inteira, atrás de foto e texto */
/* Altura mínima proporcional à largura (espaçador ::before, 1 : 1,48) e
   estica até a altura do texto quando ele for maior. Sem aspect-ratio:
   com a linha esticada, ele alargaria a foto além da coluna. */
.team__photo {
  --photo-ratio: 1.42;
  z-index: 2;
  position: relative;
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: stretch;
  min-width: 0;
  margin: 0;
}

/* em telas largas a foto (que vai até a borda da tela) não passa de 36rem
   de altura mínima: o cover recorta mais na vertical */
.team__photo::before {
  content: "";
  display: block;
  padding-top: min(100% / var(--photo-ratio), 44rem);
}

/* Moldura fixa: o recorte orgânico pertence a esta camada, não à foto.
   A forma (máscara SVG, unidades 0–1 da caixa) não muda ao trocar a imagem. */
.team__media {
  position: absolute;
  inset: 0;
  --team-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0C0.041 0.0268 0.0742 0.0631 0.1231 0.0804C0.1817 0.1012 0.2598 0.1022 0.3329 0.1022C0.413 0.1022 0.5069 0.0735 0.5846 0.0761C0.6522 0.0784 0.7182 0.0805 0.7734 0.1087C0.8306 0.1379 0.8851 0.1935 0.9203 0.2522C0.958 0.3151 0.9736 0.4072 0.986 0.4783C0.9967 0.5394 0.9997 0.5911 0.9972 0.6522C0.9944 0.7207 0.9821 0.8072 0.965 0.8696C0.9514 0.9195 0.9296 0.9565 0.9119 1C0.8494 0.9841 0.7902 0.9764 0.7245 0.9522C0.6453 0.9229 0.5554 0.8616 0.4727 0.8283C0.3971 0.7977 0.3265 0.7659 0.249 0.7565C0.1691 0.7469 0.083 0.7681 0 0.7739Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--team-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--team-mask) 0 0 / 100% 100% no-repeat;
}

.team__img {
  /* foto substituível: só preenche a moldura; o ponto focal fica em --focus */
  --focus: 74% 35%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus);
}

/* Texto: coluna 2, com container próprio para os diferenciais */
.team__content {
  position: relative;
  z-index: 1;
  grid-column: 3;
  grid-row: 1;
  /* começa logo abaixo da faixa amarela (topo da seção + altura da faixa
     menos ~18%, onde a faixa já subiu para a direita) */
  padding-top: calc(var(--band-h) * 0.8);
  padding-bottom: calc(var(--line-h) * 0.55);
  /* texto começa a ~52% da largura em 1440 (mockup) */
  padding-left: clamp(1.25rem, 4.4vw, 4.75rem);
  /* em ultrawide o bloco não se espalha pela coluna inteira */
  max-width: calc(48rem + clamp(1.25rem, 4.4vw, 4.75rem));
  container-type: inline-size;
}

/* Marca-texto amarelo atrás do sobretítulo */
.team__eyebrow span {
  padding: 0.05em 0.2em;
  background: linear-gradient(transparent 52%, rgba(255, 200, 20, 0.45) 52%, rgba(255, 200, 20, 0.45) 92%, transparent 92%);
}

.team__title {
  margin-top: 0.875rem;
  font-size: clamp(1.625rem, 0.75rem + 1.95vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.team__line {
  display: block;
}

.team__lead {
  margin-top: 1rem;
  font-size: clamp(1rem, 0.85rem + 0.55vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.38;
  color: var(--c-ink);
}

/* Diferenciais: 4 numa linha quando a coluna comporta (~34rem), senão 2×2 */
.team__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin-top: clamp(1.5rem, 1rem + 1vw, 2rem);
  padding: 0;
  list-style: none;
}

@container (min-width: 34rem) {
  .team__features {
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: space-between;
    max-width: 44rem;
  }
}

.team__feature {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: clamp(0.8125rem, 0.75rem + 0.15vw, 0.9375rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-navy);
}

.team__feature span {
  max-width: 7.5em;
}

.team__icon {
  flex: none;
  width: clamp(32px, 1.6rem + 0.6vw, 40px);
  height: clamp(32px, 1.6rem + 0.6vw, 40px);
  color: var(--c-navy);
}

.team__cta {
  margin-top: clamp(1.5rem, 1rem + 1vw, 2.125rem);
  max-width: 100%;
}

/* 12. Ambientes (residências, empresas e comércios) ------------------------
   Mesma grade da seção de atendimento: foto à esquerda até a borda da tela,
   texto na coluna da direita alinhado ao container. */
.places {
  --edge: max(var(--gutter), (100% - var(--container)) / 2);
  display: grid;
  grid-template-columns: var(--edge) minmax(0, 44fr) minmax(0, 56fr) var(--edge);
  align-items: center;
  /* As fotografias ocupam faixas próprias; as curvas aproximam as bordas sem
     colocar uma imagem por cima da outra. */
  margin-top: 0;
  padding-block: 0;
  background-color: var(--c-bg);
  overflow-x: clip;
}

.places__photo {
  position: relative;
  z-index: 1;
  grid-column: 1 / 3;
  grid-row: 1;
  margin: 0;
  aspect-ratio: 2.1;
}

/* Moldura fixa: o recorte orgânico pertence a esta camada, não à foto.
   A forma (máscara SVG, unidades 0–1 da caixa) não muda ao trocar a imagem. */
.places__media {
  position: absolute;
  inset: 0;
  --places-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0.0069C0.0673 0.0077 0.1314 -0.0015 0.2018 0.0092C0.2827 0.0215 0.3737 0.0515 0.4572 0.0855C0.5441 0.1208 0.6351 0.1785 0.7126 0.2194C0.7776 0.2536 0.8458 0.2725 0.8914 0.3141C0.9324 0.3514 0.9635 0.403 0.9808 0.4503C0.9967 0.4934 0.9991 0.5398 0.9974 0.5843C0.9958 0.6291 0.9789 0.6748 0.9706 0.7182C0.9628 0.7593 0.9531 0.7994 0.9489 0.8383C0.945 0.8747 0.9464 0.9092 0.9451 0.9446C0.8591 0.9338 0.7747 0.926 0.6871 0.9122C0.5952 0.8978 0.4954 0.8702 0.4061 0.8591C0.326 0.8492 0.2477 0.8423 0.1762 0.8453C0.1135 0.8479 0.0587 0.8622 0 0.8707Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--places-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--places-mask) 0 0 / 100% 100% no-repeat;
}

.places__img {
  /* foto substituível: só preenche a moldura; o ponto focal fica em --focus */
  --focus: 40% 50%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus);
}

.places__edge {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.places__content {
  position: relative;
  z-index: 2;
  padding-top: 0;
  grid-column: 3;
  grid-row: 1;
  padding-left: clamp(1.25rem, 4vw, 4.5rem);
  container-type: inline-size;
}

.places__eyebrow span {
  padding: 0.05em 0.2em;
  background: linear-gradient(transparent 52%, rgba(255, 200, 20, 0.45) 52%, rgba(255, 200, 20, 0.45) 92%, transparent 92%);
}

.places__title {
  max-width: 14em;
  margin-top: 0.875rem;
  font-size: clamp(1.75rem, 0.9rem + 2vw, 2.625rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.places__lead {
  max-width: 30em;
  margin-top: 1rem;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink);
}

.places__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.875rem;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  padding: 0;
  list-style: none;
}

.place-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  background-color: var(--c-white);
  box-shadow: var(--shadow-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-navy);
}

.place-card__icon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--c-navy);
}

/* 13. Brasília (panorâmica) --------------------------------------------------
   Foto de fundo na largura toda, véu escuro da esquerda para a direita;
   texto branco à esquerda no container; frase manuscrita à direita. */
.city {
  --city-mask: linear-gradient(#000, #000);
  margin-top: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--c-bg);
}

.city__img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  -webkit-mask: var(--city-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--city-mask) 0 0 / 100% 100% no-repeat;
}

.city::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 20, 48, 0.82) 0%, rgba(8, 20, 48, 0.55) 45%, rgba(8, 20, 48, 0.1) 75%);
  -webkit-mask: var(--city-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--city-mask) 0 0 / 100% 100% no-repeat;
}

.city__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: clamp(20rem, 32vw, 30rem);
  padding-block: calc(clamp(2rem, 4vw, 4rem) + clamp(3rem, 5vw, 5rem)) clamp(6rem, 10vw, 9rem);
}

.city__content {
  max-width: 34rem;
  color: var(--c-white);
}

.city__eyebrow {
  color: var(--c-yellow);
  letter-spacing: 0.3em;
}

.city__title {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 1rem + 2.8vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--c-white);
}

.city__line {
  display: block;
}

.city__lead {
  margin-top: 1rem;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.city__handnote {
  flex: none;
  color: var(--c-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.city__handnote .handnote__underline {
  color: var(--c-yellow);
}

.city__top-wave {
  position: absolute;
  z-index: 0;
  top: -1px;
  left: 0;
  width: 100%;
  max-width: none;
  height: clamp(2rem, 4vw, 4rem);
  pointer-events: none;
}

.city__wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  max-width: none;
  height: clamp(3rem, 7vw, 7rem);
}

.city__wave-fill {
  fill: #F4F5F7;
}

/* 14. Rodapé ----------------------------------------------------------------
   Quatro colunas alinhadas pelo topo: institucional | contato | localização |
   mapa horizontal. Medidas do mockup (1290px): ~22% · 19% · 18% · 28%. */
.site-footer {
  background-color: #F4F5F7;
  color: var(--c-ink);
}

.site-footer__inner {
  display: grid;
  /* localização na largura do endereço (2 linhas, sem quebra extra) */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) max-content minmax(0, 1.5fr);
  align-items: start;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.75rem, 2.5vw, 2.25rem);
}

.site-footer__logo .brand__symbol {
  width: 48px;
}

.site-footer__about {
  max-width: 21rem;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.site-footer__social {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.site-footer__social-link {
  display: block;
  color: var(--c-navy);
}

.site-footer__social-link {
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  color: #E8B53A;
  transform: translateY(-2px);
}

.site-footer__social-link svg {
  width: 26px;
  height: 26px;
}

.site-footer__title {
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.site-footer__list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.site-footer__list li,
.site-footer__place {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-footer__list .site-footer__hours,
.site-footer__place {
  align-items: flex-start;
}

.site-footer__line {
  display: block;
  line-height: 1.5;
}

.site-footer__list a {
  color: inherit;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--c-navy);
  text-decoration: underline;
}

.site-footer__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--c-navy);
}

.site-footer__icon--wa {
  color: #25D366;
}

.site-footer__icon--pin {
  width: 26px;
  height: 26px;
}

.site-footer__place {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* botão branco pill, borda clara, sombra discreta. Hover: sobe 2px, borda
   amarela, fundo amarelo bem claro e a seta entra deslizando */
.site-footer__maps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0 1.75rem;
  border: 1px solid #E3E6EB;
  border-radius: var(--radius-pill);
  background-color: var(--c-white);
  box-shadow: 0 6px 14px -8px rgba(11, 35, 88, 0.25);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-navy);
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.site-footer__maps:hover,
.site-footer__maps:focus-visible {
  border-color: var(--c-yellow);
  background-color: #FFFBEC;
  box-shadow: 0 12px 22px -12px rgba(11, 35, 88, 0.32);
  transform: translateY(-2px);
}

.site-footer__maps:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 10px -8px rgba(11, 35, 88, 0.3);
}

/* seta: recolhida no desktop, aparece no hover sem deslocar o texto bruscamente */
.site-footer .site-footer__maps-arrow {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    max-width var(--dur) var(--ease-out),
    margin-left var(--dur) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.site-footer__maps:hover .site-footer__maps-arrow,
.site-footer__maps:focus-visible .site-footer__maps-arrow {
  max-width: 16px;
  margin-left: 0.5rem;
  opacity: 1;
  transform: none;
}

/* mapa horizontal (~2,2:1 no mockup) */
.site-footer__map {
  overflow: hidden;
  aspect-ratio: 2.2;
  border-radius: var(--radius-md);
  background-color: #E6E9EE;
  box-shadow: var(--shadow-sm);
}

.site-footer__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.site-footer__bar {
  border-top: 1px solid #E6E8EC;
}

.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 0.875rem;
  font-size: 0.8125rem;
}

/* 15. Movimento ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Entrada do hero: CSS puro (sem depender de JS, sem flash) */
  .hero__content > *,
  .hero__handnote {
    animation: rise-in var(--dur-slow) var(--ease-out) both;
  }

  .hero__title { animation-delay: 80ms; }
  .hero__lead { animation-delay: 160ms; }
  .hero__actions { animation-delay: 240ms; }
  .trust-list { animation-delay: 320ms; }
  .hero__handnote { animation-delay: 480ms; }

  /* Revelação durante o scroll (seções seguintes). Só ativa com JS. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal-delay="1"] { transition-delay: 80ms; }
  .js [data-reveal-delay="2"] { transition-delay: 160ms; }
  .js [data-reveal-delay="3"] { transition-delay: 240ms; }
}

@keyframes rise-in {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Fotos técnico/sala: superfícies brancas e brilho dourado (preenchidas) */
.team__edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.photo-white {
  fill: #FFFFFF;
}

/* Acabamentos amarelos/dourados das molduras (formas preenchidas derivadas
   das máscaras; filetes finos com espessura constante) */
.accent-gold {
  fill: #E8B53A;
  opacity: 0.85;
}

.accent-yellow {
  fill: #FFC814;
}

.accent-yellow-grad {
  fill: url(#city-top-fade);
}

.accent-line {
  fill: none;
  stroke: #E8B53A;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.75;
  vector-effect: non-scaling-stroke;
}

.accent-line--soft {
  opacity: 0.4;
}


/* faixa lateral da sala atrás da foto (a borda interna fica escondida) */
.places__edge--behind {
  z-index: 0;
}

.places__media {
  z-index: 1;
}

/* Superfície tonalizada da seção de atendimento (todas as larguras): branco com leve
   cinza no alto, creme discreto à direita e retorno ao branco embaixo —
   degradês radiais de baixa intensidade, recortados por uma forma orgânica
   (topo sob a faixa amarela, base subindo à direita). Fica na camada mais
   baixa da seção: faixas amarelas, foto e texto continuam por cima, sem
   opacidade aplicada ao conteúdo. */
.team::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 70% at 82% 42%, rgba(255, 246, 225, 0.75) 0, rgba(255, 246, 225, 0) 70%),
    radial-gradient(60% 45% at 40% 0%, rgba(240, 242, 246, 0.9) 0, rgba(240, 242, 246, 0) 75%),
    radial-gradient(45% 55% at 55% 60%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #F7F8FA 0%, #FFFCF6 55%, #FFFFFF 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0.035C0.25 0.06 0.5 0.02 0.72 0.05C0.86 0.07 0.94 0.04 1 0.02V0.86C0.9 0.93 0.78 0.97 0.6 0.985C0.4 1 0.2 0.99 0 0.995Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0.035C0.25 0.06 0.5 0.02 0.72 0.05C0.86 0.07 0.94 0.04 1 0.02V0.86C0.9 0.93 0.78 0.97 0.6 0.985C0.4 1 0.2 0.99 0 0.995Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* faixa branca técnico→sala bem marcada sobre as fotos */
.team__edge .photo-white {
  filter: drop-shadow(0 2px 4px rgba(11, 35, 88, 0.12));
}

/* fio dourado da faixa branca técnico→sala */
.accent-line--seam {
  opacity: 0.6;
}

/* linha dourada na base da seção de atendimento (desktop) */
/* fica logo abaixo da seção, no espaço entre o botão e o título da sala */
.team__base-line {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 100%;
  display: none;
  width: 100%;
  max-width: none;
  height: 24px;
  overflow: visible;
  pointer-events: none;
}

@media (min-width: 600px) {
  .team__base-line {
    display: block;
  }
}

/* barra inferior do rodapé: só o copyright, centralizado */
.site-footer__bar-inner {
  justify-content: center;
  text-align: center;
}