/* ==========================================================================
   TEC-LAR Ar Condicionado — responsive.css
   Mudanças reais de composição (entre elas tudo é fluido: clamp/min/max,
   % e cqw):
     ≥1920   container cresce com a tela (até 2200px); foto do hero ancorada
     1280    curva longa de "Como podemos ajudar" (abaixo: curva ancorada)
     1180    navegação vira menu suspenso
     901     hero desktop (hero.webp) | ≤900 hero em grade com hero-mobile.webp
     601     tablet | ≤600 celular (sem aparelho decorativo; marcas 46/54)
     1024    serviços: conteúdo de cada coluna empilhado (901–1024)
   ========================================================================== */

/* ≥ 1920px — desktop amplo ------------------------------------------------
   Até 1919px a composição é a de 1440px (container 1260). Daqui em diante o
   container GLOBAL cresce com a tela (contínuo em 1920, máx. 2200px): header,
   hero e "Como podemos ajudar" usam o mesmo .container, então logo, título do
   hero e título dos serviços continuam na mesma coordenada X. Fundos, ondas e
   fotos seguem em largura total.
   Na seção de serviços tudo é medido a partir do container (cqw):
   --unit-w   largura do aparelho: 700px + 27% do que o container passar de 1260
              (cresce moderadamente; 954px no container de 2200px).
   As demais medidas são as de 1440px escaladas por --unit-w / 700px. */
@media (min-width: 1920px) {
  :root {
    --container: clamp(1260px, 1260px + (100vw - 1920px) * 0.75, 2200px);
  }

  /* A foto do hero (2103×748, ~2,8:1) cobre o hero até ~1930px. Daqui em
     diante "cover" cortaria o split em cima e o sofá embaixo: a foto mantém
     a altura total, ancora na borda direita e se dissolve no fundo à
     esquerda (o lado esquerdo dela já é a janela clara). */
  .hero__img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    max-width: none;
    height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  }

  /* A frase acompanha a foto (parede à direita do split) */
  .hero__handnote {
    right: 46px;
  }

  /* container-type cria contenção de layout: a margem -16px do título
     (≥1025px) deixa de passar para o container. Ela vai para o próprio
     container, e curva/aparelho mantêm a relação com o texto de 1440px. */
  .services__inner {
    margin-top: -16px;
    container-type: inline-size;
    --unit-w: calc(700px + (100cqw - 1260px) * 0.27);
  }

  .services__head {
    margin-top: 0;
  }

  /* 1440px: top -85, right -90 */
  .services__unit {
    top: calc(var(--unit-w) * -0.1214);
    right: calc(var(--unit-w) * -0.1286);
    width: var(--unit-w);
  }

  /* Curva: x vai da borda esquerda do container até o corpo do aparelho
     (viewBox x 700 = lateral do aparelho, como em 1440px); y escala com o
     aparelho. Assim ela sobe sempre até o mesmo ponto dele e some por trás. */
  .services__swoosh {
    width: calc(180% - var(--unit-w) * 1.44);
    max-width: none;
    height: calc(var(--unit-w) * 0.4286);
  }

  /* Colunas com a largura de 1440px; o espaço extra vai entre elas.
     Descida acompanha a base do aparelho (1440px: 56px). */
  .services__list {
    grid-template-columns: 438px 446px 376px;
    justify-content: space-between;
    margin-top: calc(var(--unit-w) * 0.44 - 252px);
  }
}

/* Como podemos ajudar — composição por faixa ------------------------------
   ≥1280px   título | aparelho grande, curva longa (.services__swoosh)
   601–1279  grade de uma linha: texto (48%) e aparelho (à direita) dividem a
             mesma linha; a altura dela é a do mais alto, e os serviços vêm na
             linha seguinte. Curva .services__curve ancorada no texto e no
             aparelho.
   ≤600px    sem aparelho nem curva */
@media (min-width: 1280px) {
  .services__swoosh {
    display: block;
  }
}

/* Variáveis da composição (em cqw = % da largura do container):
   --uw  largura do aparelho
   --ut  topo do aparelho em relação ao topo da linha (negativo = sobe sobre
         o hero). No tablet o aparelho desce um pouco abaixo de ~650px, onde
         o texto de apoio quebra em mais linhas.
   --hm  margem superior do cabeçalho (o desktop o sobe 16px)
   Altura do aparelho = 0,439 × largura (proporção do asset). */
@media (min-width: 601px) and (max-width: 1279px) {
  .services {
    overflow-x: clip;
  }

  .services__inner {
    --uw: calc(54cqw + var(--gutter));
    --ut: clamp(-0.75rem, calc(32px - (100vw - 601px) * 0.45), 32px);
    --hm: 0px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    container-type: inline-size;
  }

  .services__head {
    grid-area: 1 / 1;
    max-width: 48%;
  }

  /* Na mesma célula do texto, encostado à direita e entrando na margem
     lateral; a margem superior negativa só o faz subir sobre o hero */
  .services__unit {
    position: relative;
    grid-area: 1 / 1;
    justify-self: end;
    top: auto;
    right: auto;
    width: var(--uw);
    margin: var(--ut) calc(-1 * var(--gutter)) 0 0;
  }

  /* Caixa da curva, no cabeçalho:
     - base: 1,25rem abaixo do texto (cauda sempre próxima ao texto). O
       traço fica quase plano até ~66% da caixa, então não sobe ao lado do
       texto; a subida acontece rente ao aparelho e atrás dele;
     - topo/direita: ponto do corpo do aparelho a 45% da largura e 58% da
       altura dele (dentro do corpo opaco; a ponta some atrás).
       58% × 0,439 = 0,2546; 1 − 0,45 = 0,55. */
  .services__curve {
    display: block;
    top: calc(var(--ut) - var(--hm) + var(--uw) * 0.2546);
    bottom: -1.25rem;
    width: calc(100cqw + var(--gutter) - var(--uw) * 0.55);
  }

  /* começa depois do mais baixo entre texto+curva e aparelho */
  .services__inner .services__list {
    grid-area: 2 / 1;
    margin-top: 2.5rem;
  }
}

/* Desktop compacto: hero desktop, aparelho sobe sobre a onda como em 1440px */
@media (min-width: 901px) and (max-width: 1279px) {
  .services__inner {
    --ut: -85px;
    --hm: -16px;
  }
}

/* Atendimento especializado — foto acima do texto (<960px) ---------------
   Abaixo de ~960px a coluna de texto (53%) fica mais estreita que o botão
   "Falar com nosso time no WhatsApp" e a foto ao lado fica pequena.
   Foto de borda a borda (recorte com topo e base em onda), texto abaixo no
   container. A faixa amarela desce para a base da foto (onde ela termina
   em onda, à direita); o fio dourado fica na base da seção. */
@media (max-width: 959px) {
  /* faixa amarela do topo: altura proporcional à largura da tela (no
     desktop ela segue --C); o topo da seção abre espaço para ela */
  .team {
    --wave-h: calc(100vw * 0.12);
  }

  .team__top-wave {
    height: var(--wave-h);
  }

  /* Abaixo de 960px foto e texto continuam lado a lado: foto à esquerda
     (da borda da tela) numa moldura lateral própria — topo ondulado, arco
     direito largo, base curva, com filete dourado da mesma geometria — e
     texto à direita. A foto estica até a altura do texto (cover). */
  .team {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr) var(--edge);
    align-items: center;
    padding-block: calc(var(--wave-h) * 0.5) clamp(0.5rem, 2.5vw, 2rem);
  }

  .team__photo {
    --photo-ratio: 0.95;
    grid-column: 1;
    grid-row: 1;
  }

  .team__media {
    --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 0.06C0.3 0 0.6 0.03 0.78 0.06C0.95 0.1 1 0.32 1 0.52C1 0.75 0.9 0.93 0.72 0.97C0.5 1 0.25 0.96 0 0.98Z'/%3E%3C/svg%3E");
  }

  .team__img {
    --focus: 80% 40%;
  }

  .team__edge-m {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .team__content {
    grid-column: 2;
    grid-row: 1;
    padding: 1rem 0 1rem clamp(1.25rem, 3.5vw, 2.5rem);
  }

  /* descrição em quebra natural (coluna mais estreita que no desktop) */
  .team__lead .team__line {
    display: inline;
  }

  /* botão nunca passa da coluna: quebra em duas linhas se preciso */
  .team__cta {
    padding-block: 0.625rem;
    line-height: 1.2;
    white-space: normal;
    text-align: left;
  }
}

@media (max-width: 599px) {
  .team__line {
    display: inline;
  }

  .team__cta {
    width: 100%;
    padding-inline: 1rem;
    font-size: 0.9375rem;
  }

}

/* Marcas — empilhado abaixo de 768px: com duas colunas o carrossel ficaria
   com < 380px e o título espremido. Título e descrição em cima, carrossel
   na largura toda do container logo abaixo; logotipos ~20–34px de altura. */
@media (max-width: 767px) {
  .brands {
    --u: 0.8px;
    --brand-title-fs: clamp(1.375rem, 1rem + 1.6vw, 1.75rem);
  }

  .brands__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
  }

  .brands__marquee {
    justify-self: stretch;
    max-width: none;
  }

  .brands__lead-line {
    display: inline;
  }

  /* sequência mais curta: um pouco mais lenta em tempo, mesma sensação */
  .brands__track {
    --brand-speed: 26s;
  }
}

/* Rodapé 2 × 2 abaixo de 1200px (institucional | contato / localização |
   mapa): com quatro colunas o endereço e o botão quebrariam linha */
@media (max-width: 1199px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ambientes, Brasília e rodapé — tablet e celular ------------------------ */
@media (max-width: 959px) {
  .city {
    margin-top: 0;
  }

  /* Ambientes abaixo de 960px: mesma estratégia da seção do técnico —
     foto à esquerda (da borda da tela) com moldura lateral (topo ondulado,
     arco direito, base curva) e arco dourado da mesma geometria; texto à
     direita. A foto estica até a altura do texto (cover). O celular
     (≤599px) volta a empilhar, no bloco próprio dele. */
  .places {
    margin-top: 0;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr) var(--edge);
    align-items: center;
    padding-block: clamp(0.5rem, 2.5vw, 2rem);
  }

  /* altura mínima proporcional à largura (espaçador, como no técnico);
     estica até a altura do texto. Sem aspect-ratio: com a linha esticada,
     ele alargaria a foto além da coluna. */
  .places__photo {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    aspect-ratio: auto;
  }

  .places__photo::before {
    content: "";
    display: block;
    padding-top: calc(100% / 1.05);
  }

  .places__media {
    --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.06C0.3 0 0.6 0.03 0.78 0.06C0.95 0.1 1 0.32 1 0.52C1 0.75 0.9 0.93 0.72 0.97C0.5 1 0.25 0.96 0 0.98Z'/%3E%3C/svg%3E");
  }

  .places__img {
    --focus: 35% 50%;
  }

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

  .places__content {
    grid-column: 2;
    grid-row: 1;
    padding: 1rem 0 1rem clamp(1.25rem, 3.5vw, 2.5rem);
  }

  /* frase manuscrita sobre a foto disputaria espaço com o texto */
  .city__handnote {
    display: none;
  }

}

@media (max-width: 599px) {
  .city::before {
    background: linear-gradient(180deg, rgba(8, 20, 48, 0.78) 0%, rgba(8, 20, 48, 0.6) 100%);
  }

  /* rodapé empilhado: institucional, contato, localização, mapa */
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* ≤ 1280px ---------------------------------------------------------------- */
@media (max-width: 1280px) {
  .main-nav__link {
    padding-inline: 0.8125rem;
  }

  .hero__content {
    max-width: 600px;
  }
}

/* ≤ 1180px — navegação vira menu suspenso --------------------------------- */
@media (max-width: 1180px) {
  .nav-toggle {
    display: grid;
  }

  .header-phone {
    margin-left: auto;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.75rem var(--gutter) 1.5rem;
    background-color: var(--c-white);
    border-top: 1px solid var(--c-line);
    box-shadow: 0 24px 40px -24px rgba(11, 35, 88, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      visibility 0s linear var(--dur);
  }

  .site-header.is-open .main-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      visibility 0s;
  }

  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    width: min(var(--container), 100%);
    margin-inline: auto;
  }

  .main-nav__link {
    display: flex;
    padding: 0.9375rem 1.125rem;
    font-size: 1.0625rem;
    border-radius: 14px;
  }

  .main-nav__link::after {
    left: 1.125rem;
    bottom: 8px;
    transform: scaleX(0);
    transform-origin: left;
  }

  .main-nav__link:hover::after,
  .main-nav__link:focus-visible::after {
    transform: scaleX(0.6);
  }

  .main-nav__link.is-active::after,
  .main-nav__link.is-active:hover::after {
    transform: scaleX(1);
  }

  /* no menu aberto, a pílula só escorrega de leve (sem encolher a linha) */
  .main-nav__link::before {
    transform: scaleX(0.97);
  }

  .main-nav__extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: min(var(--container), 100%);
    margin: 1rem auto 0;
  }
}

/* ≤ 1024px ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --header-h: 72px;
  }

  /* Como podemos ajudar: colunas estreitas → texto quebra livre,
     seta passa para baixo do texto */
  .service__link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "badge"
      "title"
      "text"
      "arrow";
  }

  .service__line {
    display: inline;
  }

  .service__arrow {
    justify-self: start;
    margin-top: 0.875rem;
  }
}

/* 901–1024px — hero desktop em tela estreita ------------------------------ */
@media (min-width: 901px) and (max-width: 1024px) {
  .hero {
    min-height: 600px;
  }

  .hero__content {
    max-width: 540px;
  }

  .hero__lead {
    max-width: 26rem;
  }

  .hero__actions .btn--primary,
  .hero__actions .btn--outline {
    min-width: 0;
  }

  .trust-list {
    gap: 1rem 2rem;
    margin-top: 2.75rem;
  }

  .hero__media::after {
    background: linear-gradient(
      90deg,
      rgba(251, 251, 250, 0.97) 0%,
      rgba(251, 251, 250, 0.92) 38%,
      rgba(251, 251, 250, 0.6) 55%,
      rgba(251, 251, 250, 0) 72%
    );
  }

  .hero__handnote {
    top: auto;
    bottom: clamp(120px, 16vw, 170px);
  }

  /* Margem lateral menor: folhagem mais discreta e mais curta */
  .hero__foliage {
    left: -60px;
    opacity: 0.6;
    --foliage-mask-x: linear-gradient(90deg, #000 0, transparent 120px);
  }
}

/* ≤ 900px — tablet e celular (partes comuns) ------------------------------
   Header: logo + WhatsApp + menu. Abaixo de ~900px o telefone deixa de caber
   com folga ao lado do botão do WhatsApp e passa para o menu (já está em
   .main-nav__extra) e para o CTA "Ligar agora" do hero.
   Hero: foto em retrato (hero-mobile.webp, via <picture>) atrás do conteúdo;
   ondas SVG (.hero-transition--phone) dentro do container da foto, presas
   à sua borda inferior; selos logo abaixo, no branco.
   A geometria (larguras/posições) fica nos blocos de tablet e de celular. */
@media (max-width: 900px) {
  :root {
    --svc-row-pad: 18px;
  }

  .header-phone {
    display: none;
  }

  .header-cta {
    margin-left: auto;
  }

  /* Hero em grade. Colunas: margem | conteúdo (mesma largura do .container)
     | margem. Linhas: subtítulo, título, texto, botões, sobra (1fr) e selos.
     .hero__inner e .hero__content ficam "display: contents": os textos são
     itens da grade. A foto ocupa as linhas 1–5, então a base dela — e as
     ondas — termina exatamente no topo dos selos, qualquer que seja a
     altura deles (sem estimativa). --hero-pt: respiro acima do subtítulo. */
  .hero {
    --hero-focus: 100% 0%;
    display: grid;
    grid-template-columns: 1fr min(var(--container), 100% - 2 * var(--gutter)) 1fr;
    /* a linha de sobra tem no mínimo a altura da faixa amarela (borda
       esquerda: 27% da altura das ondas) + respiro: os botões nunca ficam
       na altura dela, mesmo quando o texto ocupa mais linhas */
    grid-template-rows: auto auto auto auto minmax(var(--wave-clear, 0px), 1fr) auto;
    padding-top: 0;
  }

  .hero__inner,
  .hero__content {
    display: contents;
  }

  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__actions,
  .trust-list {
    grid-column: 2;
    z-index: 1;
  }

  .hero__eyebrow { grid-row: 1; margin-top: var(--hero-pt); }
  .hero__title   { grid-row: 2; }
  .hero__lead    { grid-row: 3; }
  .hero__actions { grid-row: 4; }
  .trust-list    { grid-row: 6; }

  .hero__media {
    position: relative;
    z-index: 0;
    grid-column: 1 / -1;
    grid-row: 1 / 6;
    inset: auto;
    margin: 0;
  }

  /* A foto em si: largura --photo-w à direita, sempre na proporção 2:3
     (nunca cresce pela altura do hero, então o aparelho fica sempre no
     mesmo lugar em relação à largura e aos textos). O container corta a
     base quando é mais baixo; quando é mais alto (texto quebrando em mais
     linhas), a base da foto se dissolve no fundo. Borda esquerda também. */
  .hero__media {
    overflow: hidden;
  }

  .hero__img {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--photo-w);
    max-width: none;
    height: auto;
    aspect-ratio: 2 / 3;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 30%),
      linear-gradient(180deg, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0, #000 30%),
      linear-gradient(180deg, #000 88%, transparent 100%);
    mask-composite: intersect;
  }

  /* O degradê lateral já está na imagem */
  .hero__media::after {
    content: none;
  }

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

  /* overflow hidden só na própria SVG: a onda dianteira passa da base e o
     desfoque da sombra (que também vaza para baixo) fica cortado; acima,
     a sombra cabe dentro da caixa (topo da onda em y 32 de 109). */
  .hero-transition--phone {
    display: block;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
  }

  /* Frase manuscrita e folhagem sairiam sobre o texto nesta composição */
  .hero__handnote,
  .hero__foliage {
    display: none;
  }

  /* Selos: uma linha, ícone à esquerda do texto, logo abaixo das ondas */
  .trust-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top: 0;
  }

  /* o texto quebra dentro do selo, a linha não */
  .trust-list__item {
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }

  .trust-list__text strong {
    white-space: nowrap;
  }

  /* Como podemos ajudar: serviços em linhas horizontais
      (ícone)  Título            (→)
               Descrição
     Linha inteira clicável (o <a>), separadores suaves, sem cards. */
  .services {
    padding-top: 1.5rem;
  }

  .services__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    margin-top: 2rem;
  }

  .service + .service {
    border-top: 1px solid #EEF0F3;
  }

  .service__link {
    grid-template-columns: var(--badge) minmax(0, 1fr) 40px;
    grid-template-areas:
      "badge title arrow"
      "badge text  arrow";
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
    /* área de toque/hover sai 8px para os lados sem deslocar o alinhamento */
    margin-inline: -8px;
    padding: var(--svc-row-pad) 8px;
    transition: background-color 220ms var(--ease-out);
  }

  /* desfaz o "encosta na borda" da última coluna do desktop */
  .service:last-child .service__link {
    padding-right: 8px;
  }

  .service__icon {
    justify-self: center;
    margin-left: 0;
  }

  .service__title {
    align-self: end;
    margin: 0;
  }

  .service__text {
    align-self: start;
    margin: 0;
  }

  .service__arrow {
    justify-self: end;
    align-self: center;
    margin: 0;
  }

  /* Toque: leve realce enquanto pressionado */
  .service__link:active {
    background-color: rgba(11, 35, 88, 0.04);
  }
}

/* Hover discreto nas linhas (tablet/celular com mouse) */
@media (max-width: 900px) and (hover: hover) {
  .service__link:hover {
    background-color: rgba(11, 35, 88, 0.03);
  }
}

/* 601–900px — tablet --------------------------------------------------------
   Mesma foto em retrato do celular, à direita, com largura P = 50vw até
   392px (784px de tela; acima disso o texto já não cresce, então a foto
   também não e o espaço extra fica no lado claro do texto). Proporção 2:3
   mantida, sem distorção. Ondas com altura 0,39P na base do container
   da foto (a SVG tem 100vw de largura: a curva só se alonga na horizontal),
   selos logo abaixo. Texto e botões na metade esquerda, clara; o título
   termina antes do aparelho (que começa a ~76% da largura). */
@media (min-width: 601px) and (max-width: 900px) {
  .hero {
    --P: min(50vw, 392px);
    --hero-pt: 2rem;
    --wave-clear: calc(var(--P) * 0.39 * 0.27 + 0.75rem);
    min-height: calc(var(--P) * 1.3 + 4.5rem);
    padding-bottom: 1.5rem;
  }

  .hero__img {
    --photo-w: var(--P);
  }

  .hero-transition--phone {
    height: calc(var(--P) * 0.39);
  }

  .hero__eyebrow {
    margin-bottom: 0.75rem;
  }

  .hero__title {
    font-size: clamp(2.25rem, 1rem + 3.6vw, 2.75rem);
  }

  .hero__lead {
    max-width: min(56vw, 30rem);
    margin-top: 0.875rem;
    font-size: clamp(0.9375rem, 0.8rem + 0.4vw, 1.0625rem);
  }

  .hero__actions {
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .hero__actions .btn {
    --btn-h: 52px;
    min-width: 0;
    padding-inline: 1.375rem;
    font-size: 1rem;
  }

  .trust-list {
    gap: 1rem;
    padding-top: 0.75rem;
  }

  .trust-list__item {
    gap: 0.625rem;
  }

  .trust-list__icon {
    width: 32px;
    height: 32px;
  }

}

/* ≤ 600px — celular ---------------------------------------------------------
   Fundo: hero-mobile.webp (1024×1536, 2:3, só o ambiente).
   Pontos da imagem (fração da altura): aparelho 17–37%, almofadas 63–75%,
   assento 75–83%, mesa 83–90%.
   --hv = 1vw até 430px e fixo acima disso: a composição aprovada (320–430px)
   não continua crescendo até 600px, já que o texto não cresce junto.
   - Foto: 72hv de largura à direita: aparelho no topo à direita do título,
     sofá ao lado dos botões.
   - Ondas: 100vw × 28hv na base do container da foto (bloco ≤900px);
     a faixa amarela passa entre os botões e os selos.
   - Selos no branco abaixo das ondas (hero com no mínimo 110hv). */
@media (max-width: 600px) {
  :root {
    --header-h: 58px;
    --svc-row-pad: 16px;
  }

  .site-header__inner {
    gap: 0.5rem;
  }

  .brand__symbol {
    width: 40px;
  }

  .brand__name {
    font-size: 1.25rem;
  }

  .brand__tagline {
    font-size: 0.5rem;
  }

  /* CTA do header vira botão circular de WhatsApp */
  .header-cta,
  .nav-toggle {
    width: 40px;
    height: 40px;
  }

  .header-cta {
    --btn-h: 40px;
    padding: 0;
  }

  .header-cta .btn__icon {
    width: 20px;
    height: 20px;
  }

  .header-cta__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .main-nav__extra {
    grid-template-columns: 1fr;
  }

  .hero {
    --hv: min(1vw, 4.3px);
    --hero-pt: 0.875rem;
    --wave-clear: calc(28 * var(--hv) * 0.27 + 0.75rem);
    min-height: calc(110 * var(--hv));
    padding-bottom: 1.25rem;
  }

  .hero__img {
    --photo-w: calc(72 * var(--hv));
  }

  .hero-transition--phone {
    height: calc(28 * var(--hv));
  }

  .hero__eyebrow {
    max-width: 16em;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    line-height: 1.35;
  }

  .hero__title {
    /* "temperatura certa." (~8,75em) termina antes do aparelho da foto, que
       começa em 66% da largura (foto 72hv à direita, aparelho a 53% dela):
       fonte ≤ (0,66 × largura − 20px − respiro) / 8,75 ≈ 7,2vw − 4px */
    font-size: clamp(1.25rem, 7.2vw - 4px, 2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }

  .hero__lead {
    /* termina onde começa a parte escura da foto (cortina/planta, a 45% da
       foto): borda direita da tela − 0,55 × 72hv, menos respiro */
    max-width: calc(100% + var(--gutter) - 39.6 * var(--hv) - 0.25rem);
    margin-top: 0.625rem;
    /* legenda (13px): a largura útil termina antes da parte escura da foto */
    font-size: var(--t-caption);
    line-height: 1.4;
  }

  /* Empilhados à esquerda, compactos e com a mesma largura */
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .hero__actions .btn {
    --btn-h: 44px;
    width: 15rem;
    max-width: 100%;
    min-width: 0;
    padding-inline: 1.125rem;
    font-size: 0.9375rem;
  }

  /* Espaço entre os botões e os selos: é onde passa a faixa amarela
     (telas estreitas, onde o texto ocupa mais altura que a foto) */
  .trust-list {
    gap: 0.5rem;
    padding-top: 0.5rem;
  }

  .trust-list__item {
    gap: 0.375rem;
  }

  .trust-list__icon {
    width: 24px;
    height: 24px;
  }

  .trust-list__text {
    font-size: 0.6875rem;
    line-height: 1.3;
  }

  .trust-list__text strong {
    font-size: var(--t-micro);
  }

  /* Como podemos ajudar: aparelho decorativo sai (display:none: sem espaço
     reservado; as sombras são pseudo-elementos dele e somem junto); linhas
     de serviço mais compactas */
  .services__unit {
    display: none;
  }

  .services__list {
    margin-top: 1.25rem;
  }

  .service__link {
    --badge: 42px;
    grid-template-columns: var(--badge) minmax(0, 1fr) 30px;
    column-gap: 12px;
    row-gap: 2px;
    padding: var(--svc-row-pad) 8px;
  }


  .service__title {
    font-size: var(--t-card);
    font-weight: 700;
    line-height: 1.25;
  }

  .service__text {
    font-size: var(--t-small);
    line-height: 1.45;
  }

  .service__arrow {
    width: 30px;
    height: 30px;
  }

  .service__arrow svg {
    width: 13px;
    height: 13px;
  }
}

/* Composição técnico → sala → Brasília (≥960px) ---------------------------
   Geometria extraída das linhas vermelhas do mockup anotado (pixel a pixel,
   C = largura do container = 1366px na imagem). As caixas das fotos se
   encostam/encaixam; as fotos não se cobrem — o branco entre elas é o fundo
   entre as máscaras:
   técnico  caixa da borda da tela até 0,446C; altura 0,337C
   sala     caixa até 0,496C; altura 0,317C; começa 0,061C antes do fim da
            caixa do técnico (o topo dela fica abaixo da base do técnico)
   Brasília começa 0,037C antes do fim da caixa da sala; altura 0,242C */
@media (min-width: 960px) {
  :root {
    --C: min(var(--container), 100vw - 2 * var(--gutter));
    /* costuras: quanto a foto seguinte entra sob a anterior (aproxima as
       fotos sem mudar as curvas) */
    --seam-1: calc(var(--C) * 0.076);
    --seam-2: calc(var(--C) * 0.05);
  }

  /* altura da linha = altura da foto no mockup (o texto não estica a foto) */
  .team {
    grid-template-columns: var(--edge) calc(var(--C) * 0.446) minmax(0, 1fr) var(--edge);
    grid-template-rows: minmax(calc(var(--C) * 0.337), auto);
  }

  .team__photo::before {
    padding-top: 0;
  }

  .team__content {
    grid-column: 3;
    grid-row: 1;
    padding-top: calc(var(--C) * 0.055);
    padding-bottom: 0;
    padding-left: calc(var(--C) * 0.058);
  }

  .places {
    margin-top: calc(-1 * var(--seam-1));
    grid-template-columns: var(--edge) calc(var(--C) * 0.496) minmax(0, 1fr) var(--edge);
    grid-template-rows: minmax(calc(var(--C) * 0.317), auto);
    align-items: start;
  }

  .places__photo {
    align-self: stretch;
    aspect-ratio: auto;
  }

  /* topo: além da sobreposição com o técnico (botão de WhatsApp acima);
     base: cards acima da curva do topo de Brasília */
  .places__content {
    padding-top: max(var(--C) * 0.077, var(--seam-1) + 1.5rem);
    padding-bottom: calc(var(--seam-2) + var(--C) * 0.035);
    padding-left: calc(var(--C) * 0.07);
  }

  /* cards acima da curva do topo de Brasília (no mockup eles a tocam) */
  .places__list {
    margin-top: clamp(1rem, 0.6rem + 0.8vw, 1.5rem);
  }

  .city {
    margin-top: calc(-1 * var(--seam-2));
  }

  .city__inner {
    min-height: calc(var(--C) * 0.242);
    padding-block: calc(var(--C) * 0.03) calc(var(--C) * 0.045);
  }

  .city__title {
    font-size: max(2rem, var(--C) * 0.037);
  }

  .city__top-wave {
    height: calc(var(--C) * 70 / 1366);
  }

  .city__wave {
    height: calc(var(--C) * 100 / 1366);
  }
}

@media (max-width: 959px) {
  .team__edge {
    display: none;
  }
}

@media (max-width: 959px) {
  .places__edge {
    display: none;
  }
}

/* Atendimento no celular (≤599px): mesma moldura lateral do tablet
   (bloco ≤959px), com foto 40% / texto 60%, tipografia compacta e a
   descrição oculta — os quatro diferenciais ocupam o lugar dela. */
@media (min-width: 960px) {
  .team__edge-m {
    display: none;
  }
}

@media (max-width: 599px) {
  /* foto 40% / texto 60%: a coluna de texto comporta os diferenciais */
  .team {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr) var(--gutter);
    align-items: center;
    padding-block: calc(var(--wave-h) * 0.5) 0.5rem;
    background:
      radial-gradient(70% 80% at 85% 45%, rgba(255, 246, 225, 0.7) 0, rgba(255, 246, 225, 0) 70%),
      var(--c-bg);
  }

  .team__photo {
    --photo-ratio: 0.95;
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    margin: 0;
  }

  .team__img {
    --focus: 86% 40%;
  }

  .team__content {
    grid-column: 2;
    grid-row: 1;
    padding: 0.5rem 0 0.5rem clamp(0.5rem, 2.5vw, 0.875rem);
  }

  .team__eyebrow {
    font-size: clamp(0.625rem, 0.5rem + 0.6vw, 0.6875rem);
    letter-spacing: 0.03em;
  }

  .team__title {
    margin-top: 0.3rem;
    font-size: clamp(1.0625rem, 0.6rem + 2.4vw, 1.25rem);
    line-height: 1.12;
  }

  /* no celular a descrição dá lugar aos quatro diferenciais */
  .team__lead {
    display: none;
  }

  /* diferenciais 2×2 entre o título e o botão; em coluna estreita o ícone
     fica acima do texto, quando comporta fica à esquerda (container query
     abaixo) */
  .team__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem 0.5rem;
    margin-top: 0.75rem;
  }

  .team__feature {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.6875rem;
  }

  .team__icon {
    width: 20px;
    height: 20px;
  }

  /* botão compacto: ícone + texto + seta, sem ocupar a coluna inteira */
  .team__cta {
    --btn-h: auto;
    width: auto;
    max-width: 100%;
    min-height: 2rem;
    margin-top: 0.6rem;
    padding: 0.4rem 0.7rem;
    gap: 0.35rem;
    font-size: clamp(0.6875rem, 0.45rem + 1.2vw, 0.75rem);
    line-height: 1.25;
    white-space: normal;
    text-align: left;
  }

  .team__cta .btn__icon {
    width: 13px;
    height: 13px;
  }
}

/* Brasília no celular: bordas próprias, rasas (as do desktop, comprimidas
   em 390px, viram "morros") */
.city__top-wave--m,
.city__wave--m {
  display: none;
}

@media (max-width: 599px) {
  .city__top-wave:not(.city__top-wave--m),
  .city__wave:not(.city__wave--m) {
    display: none;
  }

  .city__top-wave--m {
    display: block;
    height: calc(100vw * 28 / 390);
  }

  .city__wave--m {
    display: block;
    height: calc(100vw * 30 / 390);
  }
}

/* Rodapé — celular (≤599px) ----------------------------------------------
   Fundo cinza muito suave (#F4F5F7, herdado) com cartões brancos: o
   contraste discreto + sombra difusa + cantos arredondados dão profundidade.
   Institucional centralizado; "Contato" e "Nossa localização" (com o mapa)
   em cartões. Desktop/tablet não mudam (rótulos e seta ocultos lá). */
.site-footer__loc {
  display: contents;
}

.site-footer__label {
  display: none;
}

@media (max-width: 599px) {
  .site-footer__inner {
    gap: 1rem;
    padding-block: 2.25rem 1.5rem;
  }

  /* institucional */
  .site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
    text-align: center;
  }

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

  .site-footer__about {
    max-width: 23rem;
    margin-top: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.55;
  }

  .site-footer__social {
    justify-content: center;
    gap: 0.875rem;
    margin-top: 1.125rem;
  }

  .site-footer__social-link {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #E9ECF1;
  }

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

  /* cartões brancos sobre o fundo cinza */
  .site-footer__inner > .site-footer__col,
  .site-footer__loc {
    display: block;
    padding: clamp(1.125rem, 5.5vw, 1.5rem);
    border: 1px solid #ECEEF2;
    border-radius: 20px;
    background-color: var(--c-white);
    box-shadow: 0 12px 32px -14px rgba(11, 35, 88, 0.16), 0 2px 6px -2px rgba(11, 35, 88, 0.05);
  }

  .site-footer__title {
    font-size: 1.25rem;
    color: var(--c-navy);
  }

  /* contato: ícone em círculo claro + rótulo em negrito + valor */
  .site-footer__list {
    gap: 1rem;
    margin-top: 1.125rem;
  }

  .site-footer__list li,
  .site-footer__list .site-footer__hours {
    align-items: center;
    gap: 0.875rem;
  }

  .site-footer__icon {
    width: 42px;
    height: 42px;
    padding: 11px;
    border-radius: 50%;
    background-color: #EEF1F6;
  }

  .site-footer__icon--wa {
    background-color: #E6F8EE;
  }

  .site-footer__text {
    min-width: 0;
    line-height: 1.45;
  }

  .site-footer__label {
    display: block;
    font-weight: 700;
    color: var(--c-navy);
  }

  .site-footer__line {
    line-height: 1.45;
  }

  /* localização: pino à esquerda do título, endereço, botão, mapa */
  .site-footer__loc .site-footer__col {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.625rem;
  }

  .site-footer__place {
    display: contents;
    white-space: normal;
  }

  .site-footer__icon--pin {
    grid-row: 1;
    grid-column: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .site-footer__loc .site-footer__title {
    grid-row: 1;
    grid-column: 2;
  }

  .site-footer__place > span {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
  }

  .site-footer__maps {
    grid-column: 1 / -1;
    gap: 0.625rem;
    width: 100%;
    margin-top: 1rem;
    padding-inline: 1.25rem;
    border-radius: 14px;
    box-shadow: 0 4px 12px -8px rgba(11, 35, 88, 0.2);
  }

  /* celular: seta sempre visível; no toque/hover ela avança um pouco */
  .site-footer .site-footer__maps-arrow,
  .site-footer__maps:hover .site-footer__maps-arrow,
  .site-footer__maps:focus-visible .site-footer__maps-arrow {
    width: 18px;
    height: 18px;
    max-width: 18px;
    margin-left: 0;
    opacity: 1;
    transform: none;
  }

  .site-footer__maps:hover .site-footer__maps-arrow,
  .site-footer__maps:focus-visible .site-footer__maps-arrow {
    transform: translateX(4px);
  }

  .site-footer__map {
    margin-top: 1rem;
    aspect-ratio: 1.75;
    border-radius: 14px;
    box-shadow: none;
  }

  .site-footer__bar-inner {
    padding-block: 1rem;
  }
}

/* Ambientes no celular (≤599px): foto de borda a borda com moldura própria
   (topo em curva suave com filete amarelo à direita; base em onda que sobe
   à direita, acompanhada de faixa amarela), texto compacto logo abaixo e os
   três cartões na mesma linha (ícone em cima, texto centralizado). */
.places__edge-m {
  display: none;
}

@media (min-width: 960px) {
  .places__edge-t {
    display: none;
  }
}

@media (max-width: 599px) {
  /* foto de borda a borda em cima, texto abaixo */
  .places {
    grid-template-columns: var(--edge) minmax(0, 1fr) var(--edge);
    padding-block: 0;
  }

  /* no celular a foto da sala não aparece: a seção abre direto no texto */
  .places__photo {
    display: none;
  }

  .places__edge-t {
    display: none;
  }

  .places__media {
    --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.035C0.3 0 0.65 0.005 1 0.075L1 0.8C0.84 0.93 0.58 0.975 0.32 0.965C0.19 0.96 0.09 0.95 0 0.955Z'/%3E%3C/svg%3E");
  }

  .places__img {
    --focus: 30% 50%;
  }

  .places__edge-m {
    display: block;
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .places__content {
    grid-column: 2;
    grid-row: 1;
    padding: 1.75rem 0 0;
  }

  .places__eyebrow {
    font-size: var(--t-micro);
  }

  .places__title {
    max-width: none;
    margin-top: 0.5rem;
    font-size: var(--t-h2);
    line-height: 1.08;
  }

  .places__lead {
    margin-top: 0.5rem;
    font-size: var(--t-body);
    line-height: 1.45;
  }

  .places__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.5rem, 2.5vw, 0.875rem);
    margin-top: clamp(0.875rem, 4vw, 1.25rem);
  }

  .place-card {
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(0.75rem, 3.5vw, 1.125rem) 0.35rem;
    box-shadow: 0 4px 14px rgba(11, 35, 88, 0.06);
    font-size: var(--t-caption);
    text-align: center;
  }

  /* texto sempre em duas linhas, como no mockup */
  .place-card span {
    max-width: 7em;
  }

  .place-card__icon {
    width: clamp(26px, 8vw, 34px);
    height: clamp(26px, 8vw, 34px);
    color: var(--c-royal);
  }
}

/* Tipografia do celular (≤599px): seções sem regra mobile própria passam a
   usar a escala global (tokens --t-* em style.css). */
@media (max-width: 599px) {
  .services__title,
  .brands__title,
  .city__title {
    font-size: var(--t-h2);
    line-height: 1.08;
  }

  .brands {
    --brand-title-fs: var(--t-h2);
  }

  .services__lead,
  .city__lead {
    font-size: var(--t-body);
    line-height: 1.45;
  }

  .brands__lead {
    font-size: var(--t-small);
    line-height: 1.45;
  }

  .city__eyebrow {
    font-size: var(--t-micro);
  }

  /* rodapé: dados de contato e localização com leitura confortável */
  .site-footer__about,
  .site-footer__text,
  .site-footer__label,
  .site-footer__line,
  .site-footer__maps {
    font-size: 0.9375rem;
  }

  .site-footer__copy {
    font-size: var(--t-caption);
  }
}

/* Equipe no celular: ícone à esquerda quando a célula comporta ícone +
   "Equipamentos" */
@media (max-width: 599px) {
  @container (min-width: 13rem) {
    .team__feature {
      flex-direction: row;
      align-items: center;
      gap: 0.375rem;
    }
  }
}

/* Ambientes no tablet: três cartões lado a lado (ícone em cima) quando a
   coluna comporta; em coluna estreita, lista com ícone à esquerda */
@media (min-width: 600px) and (max-width: 959px) {
  .places__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    margin-top: 1.25rem;
  }

  .place-card {
    padding: 0.625rem 0.875rem;
  }

  @container (min-width: 24rem) {
    .places__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
    }

    .place-card {
      flex-direction: column;
      justify-content: center;
      gap: 0.5rem;
      padding: 1rem 0.5rem;
      text-align: center;
    }

    .place-card span {
      max-width: 7em;
    }
  }
}

/* Brasília no tablet: ondas na mesma proporção do desktop (lá seguem --C),
   contínuas na passagem para 960px */
@media (min-width: 600px) and (max-width: 959px) {
  .city__top-wave {
    height: calc(100vw * 70 / 1440);
  }

  .city__wave {
    height: calc(100vw * 100 / 1440);
  }
}

/* Ambientes no desktop: sempre três cartões numa linha; em coluna de texto
   estreita (960–~1270px) o ícone fica acima do texto */
@media (min-width: 960px) {
  .places__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @container (max-width: 32rem) {
    .place-card {
      flex-direction: column;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.875rem 0.5rem;
      text-align: center;
    }

    .place-card span {
      max-width: 7em;
    }
  }
}