/* =============================================================
   Instituto Dr. Ronan Araujo — Landing Page
   01 Hero · 02 Tratamentos · 03 Corpo médico · 04 Na mídia · 05 O ambiente
   06 Tecnologias · 07 Endereço e contato
   ============================================================= */

/* -------------------------------------------------------------
   0. FONTE DA MARCA — Big Moore (hospedada aqui)
   Hoje só a romana é usada (subtítulo de Dermatologia & Tricologia),
   mas o itálico fica declarado: o navegador só baixa a que for usada.
   ------------------------------------------------------------- */
@font-face{
  font-family:"Big Moore";
  src:url("../fonts/big-moore.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Big Moore";
  src:url("../fonts/big-moore-italic.otf") format("opentype");
  font-weight:400; font-style:italic; font-display:swap;
}

/* -------------------------------------------------------------
   1. TOKENS — paleta oficial da marca
   ------------------------------------------------------------- */
:root{
  /* bronze / areia */
  --c-bronze:        #9e7c5a;
  --c-bronze-2:      #a58c66;
  --c-sand:          #e3c6a3;

  /* dourado */
  --c-gold:          #efb810;
  --c-gold-2:        #f6d63e;

  /* neutros claros */
  --c-grey:          #dbdada;
  --c-cream:         #ece7df;
  --c-off:           #f7f7f7;

  /* escuros (base preta da marca) */
  --c-ink:           #131313;
  --c-ink-2:         #1c1c1c;
  --c-text:          #2b2825;
  --c-muted:         #6f6862;

  /* layout */
  --wrap:            1260px;
  /* respiro vertical das seções. Como cada seção paga em cima e embaixo,
     a emenda entre duas vale o dobro deste valor — é o número que dá o
     ritmo da página inteira. */
  --sec-y:           clamp(60px, 6vw, 96px);
  --gutter:          clamp(26px, 4vw, 48px);
  --header-h:        clamp(84px, 8.6vw, 130px);

  /* tipografia */
  --ff:              "Raleway", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* efeitos */
  --hero-slide:      9s;     /* tempo de cada foto na hero */
  --hero-fade:       2.8s;   /* duração da transição entre as fotos */
  --entrada-h:       60px;   /* faixa de sobreposição da seção 02 sobre a hero */
  --ease:            cubic-bezier(.22, 1, .36, 1);
}

/* -------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff);
  font-weight:400;
  color:var(--c-text);
  background:var(--c-off);
  line-height:1.6;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
picture{ display:contents; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

section{ scroll-margin-top:var(--header-h); }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--c-ink); color:#fff; padding:12px 20px;
}
.skip-link:focus{ left:0; }

.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;
}

:where(a,button):focus-visible{
  outline:2px solid var(--c-gold);
  outline-offset:4px;
  border-radius:2px;
}

/* -------------------------------------------------------------
   3. COMPONENTES GERAIS
   ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 26px;
  border-radius:999px;
  font-size:clamp(12px,.85vw,14px);
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  transition:background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--solid{ background:var(--c-bronze); color:#fff; }
.btn--solid:hover{ background:var(--c-bronze-2); transform:translateY(-2px); }

.btn--outline{
  border:1px solid var(--c-bronze);
  color:var(--c-bronze);
  background:transparent;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.btn--outline:hover{ background:var(--c-bronze); color:#fff; transform:translateY(-2px); }

/* vazado para fundos escuros */
.btn--outline-claro{
  border:1px solid rgba(227,198,163,.55);
  color:var(--c-sand);
  background:transparent;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.btn--outline-claro:hover{
  background:var(--c-sand);
  border-color:var(--c-sand);
  color:var(--c-ink);
  transform:translateY(-2px);
}

/* largo, mas baixo: o respiro do botão vem da largura, não da altura */
.btn--lg{ padding:13px 40px; font-size:clamp(13px,1vw,15px); }

.btn__icon{
  display:inline-grid; place-items:center;
  width:22px; height:22px;
  border:1px solid currentColor; border-radius:50%;
}
.btn__icon svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; }

/* cabeçalho de seção -------------------------------------------------- */
.sec-head{ max-width:780px; margin-inline:auto; text-align:center; }

.sec-title{
  font-size:clamp(24px,2.35vw,38px);
  font-weight:300;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--c-ink);
}
.sec-title em{ font-style:italic; font-weight:400; color:var(--c-bronze); }
/* variante com a primeira linha mais encorpada */
.sec-title--forte{ font-weight:400; }
.sec-title--forte em{ font-weight:400; }

/* corpo médico, ambiente e tecnologias pedem um título mais contido */
.corpo__topo .sec-title,
.ambiente .sec-title,
.tec .sec-title{ font-size:clamp(21px,1.95vw,31px); }

.sec-text{
  margin-top:clamp(18px,1.8vw,26px);
  /* deixa as linhas com comprimentos parecidos, em vez de uma cheia e
     outra com duas palavras */
  text-wrap:balance;
  max-width:46em;
  margin-inline:auto;
  font-size:clamp(14px,1.05vw,17px);
  font-weight:300;
  color:var(--c-muted);
}
.sec-text strong{ font-weight:500; color:var(--c-text); }

.sec-head--light .sec-title{ color:#fff; }
.sec-head--light .sec-title em{ color:var(--c-sand); }
.sec-head--light .sec-text{ color:rgba(255,255,255,.72); }
.sec-head--light .sec-text strong{ color:#fff; }

/* subtítulo de bloco --------------------------------------------------- */
.sec-sub{
  display:flex; align-items:center; gap:20px;
  margin-top:clamp(52px,5.5vw,86px);
  margin-bottom:clamp(24px,2.6vw,40px);
}
.sec-sub__title{
  font-size:clamp(20px,1.9vw,29px);
  font-weight:300;
  color:#fff;
  white-space:nowrap;
}
.sec-sub__title em{ font-style:italic; color:var(--c-sand); }
.sec-sub__rule{ flex:1; height:1px; background:linear-gradient(90deg, rgba(227,198,163,.5), transparent); }

/* subtítulo em serifa, dentro de uma seção clara ---------------------- */
.sub-bloco{
  scroll-margin-top:120px;
  margin-top:clamp(56px,6vw,96px);
  margin-bottom:clamp(28px,3vw,44px);
  text-align:center;
}
.sub-bloco__titulo{
  font-family:"Big Moore", "Playfair Display", Georgia, serif;
  font-style:normal;
  font-size:clamp(23px,2.05vw,33px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:.005em;
  color:var(--c-bronze);
}
/* o fio vem antes do título. Em vez de um traço de ponta a ponta, um fio que
   nasce e morre no transparente — some nas bordas em vez de ser cortado. */
.sub-bloco__fio{
  display:block;
  width:min(560px, 68%); height:1px;
  margin:0 auto clamp(20px,2.1vw,30px);
  background:linear-gradient(90deg,
              transparent 0%,
              rgba(227,198,163,.85) 28%,
              rgba(227,198,163,.85) 72%,
              transparent 100%);
}

/* divisor entre seções -------------------------------------------------
   dois fios que nascem do transparente e, no meio, o símbolo da marca.
   O símbolo entra como máscara: assim ele assume a cor do bronze em vez
   de ficar preto. Sem suporte a mask, cai num losango — que é o desenho
   que sobra do próprio símbolo. */
.divisor{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(16px,1.8vw,26px);
  width:min(560px, 76%);
  margin:0 auto clamp(46px,4.8vw,74px);
}
.divisor__fio{ flex:1; height:1px; }
.divisor__fio:first-child{ background:linear-gradient(90deg, transparent, rgba(158,124,90,.42)); }
.divisor__fio:last-child { background:linear-gradient(90deg, rgba(158,124,90,.42), transparent); }
.divisor__marca{
  flex:0 0 auto;
  width:8px; height:8px; rotate:45deg;
  background:var(--c-bronze);
  opacity:.5;
}
@supports ((mask-image:url("a")) or (-webkit-mask-image:url("a"))){
  .divisor__marca{
    width:20px; height:24px; rotate:none;
    -webkit-mask:url("../img/simbolo-idra-mask.png") center/contain no-repeat;
            mask:url("../img/simbolo-idra-mask.png") center/contain no-repeat;
    opacity:.42;
  }
}

/* animação de entrada ------------------------------------------------- */
.js .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

/* entrada pelas laterais (corpo médico e equipe): cada card parte do lado
   em que ele está — os da esquerda vêm da esquerda, os da direita da direita —
   e a fileira se fecha do centro para as pontas. O --dx e o atraso são
   calculados no main.js a partir da posição real do card, então continuam
   certos quando a grade muda de 5 para 3 ou 2 colunas. */
.js .reveal--lado{
  opacity:0;
  transform:translate3d(var(--dx, 0px), 16px, 0) scale(.93);
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
.js .reveal--lado.is-visible{ opacity:1; transform:none; }

/* -------------------------------------------------------------
   4. HEADER
   ------------------------------------------------------------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background-color .45s var(--ease), height .45s var(--ease);
}
/* fio sutil separando o cabeçalho do conteúdo da hero */
.header::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:rgba(255,255,255,.22);
  transition:opacity .45s var(--ease);
}
.header.is-scrolled{
  height:clamp(70px,6.2vw,88px);
  background:rgba(19,19,19,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.header.is-scrolled::after{ opacity:0; }

/* Com o menu aberto o vidro fosco sai de cena. Não é estética: um elemento
   com backdrop-filter passa a ser o quadro de referência dos filhos
   position:fixed, e o menu (que é filho do cabeçalho) encolhia até a altura
   dele em vez de cobrir a tela. Debaixo do menu aberto o blur não faria
   falta nenhuma. */
.header.is-menu-open{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* passada a hero, o botão assume o degradê dourado da marca */
.header.is-past-hero .header__cta,
.header.is-past-hero .nav__cta{
  background:linear-gradient(100deg, var(--c-gold) 0%, var(--c-gold-2) 48%, var(--c-gold) 100%);
  color:var(--c-ink);
  box-shadow:0 6px 20px rgba(239,184,16,.20);
}
.header.is-past-hero .header__cta:hover,
.header.is-past-hero .nav__cta:hover{
  background:linear-gradient(100deg, var(--c-gold-2) 0%, var(--c-gold) 52%, var(--c-gold-2) 100%);
  color:var(--c-ink);
}

.header__inner{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,40px);
}

.header__logo img{
  width:auto; height:clamp(30px,2.2vw,42px);
  transition:height .45s var(--ease);
}
.header.is-scrolled .header__logo img{ height:clamp(26px,1.9vw,34px); }

.nav{
  flex:1;
  display:flex; align-items:center; justify-content:center;
}
.nav__list{
  display:flex; align-items:center;
  gap:clamp(10px,1.7vw,28px);
}
.nav__list a{
  position:relative;
  display:inline-block;
  font-size:clamp(11.5px,.83vw,14px);
  font-weight:400;
  letter-spacing:.01em;
  color:rgba(255,255,255,.88);
  padding-block:6px;
  transition:color .3s var(--ease);
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--c-gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__list a:hover{ color:#fff; }
.nav__list a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{ display:none; }
.header__cta{ margin-left:auto; }

.burger{ display:none; }

/* -------------------------------------------------------------
   5. SEÇÃO 01 · HERO
   fotos do ambiente em sequência, cada uma com um movimento diferente
   ------------------------------------------------------------- */
.hero{
  /* corpo da fonte da hero: o subtítulo é derivado dele, para os dois
     blocos de texto terem sempre a mesma largura */
  --hero-fs:clamp(21px, 1.92vw, 35px);
  /* largura do bloco de texto: a mesma para título e subtítulo */
  --hero-larg:calc(var(--hero-fs) * 16.6);
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--c-ink);
}
.hero__media{
  position:absolute; inset:0; z-index:0;
  will-change:transform;
}
.hero__slides{
  position:absolute; inset:0;
  will-change:transform;
}
.hero__slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  /* transição longa e sem aceleração brusca nas pontas */
  transition:opacity var(--hero-fade, 2.8s) cubic-bezier(.4,0,.5,1);
}
.hero__slide.is-active{ opacity:1; }

/* a foto que sai mantém o movimento até o fim do fade — sem ela o
   transform voltava ao início de uma vez, e era esse o salto */
.hero__slide.is-active,
.hero__slide.is-saindo{
  animation-duration:calc(var(--hero-slide, 9s) + var(--hero-fade, 2.8s));
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}

/* cada foto ganha um movimento próprio — é isso que tira a cara de slideshow */
.hero__slides > picture:nth-child(1) .hero__slide.is-active,
.hero__slides > picture:nth-child(1) .hero__slide.is-saindo{ animation-name:kbZoomIn; }
.hero__slides > picture:nth-child(2) .hero__slide.is-active,
.hero__slides > picture:nth-child(2) .hero__slide.is-saindo{ animation-name:kbDiagonal; }
.hero__slides > picture:nth-child(3) .hero__slide.is-active,
.hero__slides > picture:nth-child(3) .hero__slide.is-saindo{ animation-name:kbHorizontal; }
.hero__slides > picture:nth-child(4) .hero__slide.is-active,
.hero__slides > picture:nth-child(4) .hero__slide.is-saindo{ animation-name:kbZoomOut; }
.hero__slides > picture:nth-child(5) .hero__slide.is-active,
.hero__slides > picture:nth-child(5) .hero__slide.is-saindo{ animation-name:kbSobe; }
.hero__slides > picture:nth-child(6) .hero__slide.is-active,
.hero__slides > picture:nth-child(6) .hero__slide.is-saindo{ animation-name:kbSaiDiagonal; }

@keyframes kbZoomIn{      /* aproxima no centro */
  from{ transform:scale(1.05); }
  to  { transform:scale(1.15); }
}
@keyframes kbDiagonal{    /* aproxima descendo para a esquerda */
  from{ transform:scale(1.08) translate(1.4%, 1%); }
  to  { transform:scale(1.17) translate(-1.4%, -1%); }
}
@keyframes kbHorizontal{  /* corre na horizontal, quase sem zoom */
  from{ transform:scale(1.13) translateX(2%); }
  to  { transform:scale(1.16) translateX(-2%); }
}
@keyframes kbZoomOut{     /* afasta, revelando o ambiente */
  from{ transform:scale(1.17); }
  to  { transform:scale(1.06); }
}
@keyframes kbSobe{        /* aproxima subindo */
  from{ transform:scale(1.07) translateY(1.6%); }
  to  { transform:scale(1.16) translateY(-1.2%); }
}
@keyframes kbSaiDiagonal{ /* afasta voltando ao centro */
  from{ transform:scale(1.18) translate(-1.6%, 1.2%); }
  to  { transform:scale(1.07) translate(0, 0); }
}

/* película que escurece o fundo e dá contraste ao texto */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,9,7,.66) 0%, rgba(11,9,7,.46) 34%, rgba(11,9,7,.44) 62%, rgba(11,9,7,.64) 100%),
    radial-gradient(120% 78% at 50% 48%, rgba(11,9,7,.10) 0%, rgba(11,9,7,.52) 100%);
}

.hero__inner{
  position:relative; z-index:2;
  /* equilibra o cabeçalho em cima com a faixa de expressões embaixo */
  padding-top:var(--header-h);
  padding-bottom:calc(var(--entrada-h) + 46px);
}
.hero__content{
  margin-inline:auto;
  text-align:center;
}
.hero__title{
  max-width:var(--hero-larg);
  margin-inline:auto;
  font-size:var(--hero-fs);
  font-weight:300;
  line-height:1.34;
  letter-spacing:-.008em;
  color:#fff;
  text-shadow:0 2px 26px rgba(0,0,0,.45);
}
.hero__title em{
  font-style:italic;
  font-weight:300;
  color:var(--c-sand);
}
.hero__text{
  font-size:max(13px, calc(var(--hero-fs) * .42));
  max-width:var(--hero-larg);   /* nunca passa da largura do título */
  margin-inline:auto;
  margin-top:clamp(18px,1.9vw,28px);
  font-weight:300;
  line-height:1.75;
  color:rgba(255,255,255,.86);
  text-shadow:0 1px 18px rgba(0,0,0,.5);
}

/* faixa de expressões no rodapé da hero — carrossel infinito */
.marquee{
  /* fica logo acima da faixa que a seção 02 sobrepõe */
  position:absolute; left:0; right:0; bottom:var(--entrada-h); z-index:2;
  overflow:hidden;
  /* sem faixa: só um véu que nasce do nada e vai escurecendo de leve */
  padding-top:clamp(54px,6vw,92px);
  padding-bottom:clamp(11px,1.1vw,16px);
  /* o véu tem o pico atrás do texto e clareia de novo antes da borda,
     para não formar uma faixa escura encostada na transição */
  background:linear-gradient(180deg,
              rgba(15,13,11,0)   0%,
              rgba(15,13,11,.22) 62%,
              rgba(15,13,11,.06) 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee__grupo{
  display:flex; align-items:center;
  flex:0 0 auto;
}
.marquee__grupo li{
  display:flex; align-items:center;
  font-size:clamp(7px,.46vw,8px);
  font-weight:400;
  letter-spacing:.42em;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(0,0,0,.55), 0 0 26px rgba(0,0,0,.35);
}
.marquee__grupo li::after{
  content:"";
  width:4px; height:4px;
  margin-inline:clamp(16px,1.8vw,30px);
  border-radius:50%;
  background:var(--c-gold);
  opacity:.85;
}
@keyframes marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* -------------------------------------------------------------
   6. SEÇÃO 02 · TRATAMENTOS
   ------------------------------------------------------------- */
.tratamentos{
  position:relative;
  z-index:2;
  /* a seção sobe por cima da hero: o recorte deixa a foto aparecer */
  margin-top:calc(-1 * var(--entrada-h));
  padding-top:calc(var(--sec-y) + var(--entrada-h));
  padding-bottom:var(--sec-y);
  /* o fundo começa abaixo da faixa do recorte */
  background-image:linear-gradient(180deg, var(--c-cream) 0%, var(--c-off) 42%, #fff 100%);
  background-repeat:no-repeat;
  background-position:0 var(--entrada-h);
  background-size:100% calc(100% - var(--entrada-h));
}

/* entrada recortada: a borda da seção 02 é desenhada em SVG (medidas fixas,
   não mudam com o scroll) e a sombra acompanha o contorno do recorte */
.entrada-camada{
  position:absolute; top:0; left:0; right:0;
  height:var(--entrada-h);
  z-index:1;
  pointer-events:none;
  /* sombra de contato: curta e discreta, acompanha o contorno inteiro
     sem virar uma faixa escura ao longo da borda reta */
  filter:drop-shadow(0 0 3px rgba(16,11,7,.30)) drop-shadow(0 0 11px rgba(16,11,7,.20));
  /* deixa a sombra subir, mas corta o que ela borraria para baixo */
  clip-path:inset(-30px 0 0 0);
}
/* medidas absolutas: o recorte não depende de flex nem de nada dinâmico */
.entrada-camada__lado{
  position:absolute; top:0;
  height:var(--entrada-h);
  background:var(--c-cream);
}
.entrada-camada__lado:first-child{ left:0;  right:calc(50% + 120px); }
.entrada-camada__lado:last-child { right:0; left:calc(50% + 120px); }

.entrada-forma{
  position:absolute; top:0; left:50%;
  margin-left:-120px;
  width:240px; height:var(--entrada-h);
  display:block;
}
.entrada-forma path{ fill:var(--c-cream); }

.entrada-link{
  position:absolute; top:0; left:50%; z-index:2;
  transform:translateX(-50%);
  width:104px; height:46px;              /* área do vão */
  display:grid; place-items:center;
}
.entrada-link__seta{
  display:grid; place-items:center;
  filter:drop-shadow(0 1px 7px rgba(0,0,0,.6));
  transition:transform .45s var(--ease);
}
.entrada-link__seta svg{
  width:18px; height:18px;
  fill:none; stroke:#fff; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.entrada-link:hover .entrada-link__seta{ transform:translateY(3px); }
.entrada-link:hover .entrada-link__seta svg{ stroke:var(--c-gold); }

.carousel{
  position:relative;
  margin-top:clamp(38px,4.4vw,66px);
}
.carousel__track{
  display:flex;
  gap:clamp(16px,1.8vw,28px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* folga vertical suficiente para a sombra dos cards não ser cortada
     pelo próprio contêiner de rolagem */
  padding-block:clamp(36px,3.6vw,54px);
  scrollbar-width:none;
  /* esmaecimento longo e suave nas bordas */
  -webkit-mask-image:linear-gradient(90deg,
              transparent 0%, rgba(0,0,0,.12) 6%, rgba(0,0,0,.5) 14%,
              #000 26%, #000 74%,
              rgba(0,0,0,.5) 86%, rgba(0,0,0,.12) 94%, transparent 100%);
          mask-image:linear-gradient(90deg,
              transparent 0%, rgba(0,0,0,.12) 6%, rgba(0,0,0,.5) 14%,
              #000 26%, #000 74%,
              rgba(0,0,0,.5) 86%, rgba(0,0,0,.12) 94%, transparent 100%);
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel.is-looping .carousel__track{ scroll-behavior:auto; }

/* slots no mesmo padrão da seção de Tecnologias */
.trat-card{
  position:relative;
  flex:0 0 clamp(240px, 28%, 340px);
  scroll-snap-align:center;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid rgba(158,124,90,.16);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(60,42,28,.10);
  transition:transform .7s var(--ease), box-shadow .7s var(--ease), border-color .6s var(--ease);
}
.trat-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; z-index:2;
  width:2px; background:var(--c-gold);
  transform:scaleY(0); transform-origin:top;
  transition:transform .6s var(--ease);
}
.trat-card:hover{ border-color:rgba(158,124,90,.34); }
.trat-card:hover::before{ transform:scaleY(1); }

.trat-card__foto{
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--c-cream);
}
.trat-card__foto img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.trat-card:hover .trat-card__foto img{ transform:scale(1.05); }

.trat-card__corpo{
  padding:clamp(18px,1.9vw,28px) clamp(18px,1.8vw,26px) clamp(22px,2.2vw,32px);
}
.trat-card__title{
  font-size:clamp(15px,1.25vw,19px);
  font-weight:500;
  line-height:1.3;
  color:var(--c-ink);
  margin-bottom:9px;
}
.trat-card__text{
  text-wrap:pretty;   /* evita palavra sozinha na última linha */
  font-size:clamp(12px,.88vw,14px);
  font-weight:300;
  line-height:1.55;
  color:var(--c-muted);
}

/* card central em destaque */
.trat-card.is-active{
  z-index:2;
  transform:scale(1.06);
  box-shadow:0 16px 34px rgba(60,42,28,.16);
}
.carousel__arrow{
  position:absolute; top:50%; z-index:3;
  transform:translateY(-50%);
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(158,124,90,.35);
  box-shadow:0 8px 22px rgba(60,42,28,.12);
  transition:background-color .35s var(--ease), transform .35s var(--ease);
}
.carousel__arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.carousel__arrow svg{ width:20px; height:20px; fill:none; stroke:var(--c-bronze); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.carousel__arrow--prev{ left:calc(var(--gutter) * -.4); }
.carousel__arrow--next{ right:calc(var(--gutter) * -.4); }

/* barra de navegação: discreta, só pontinhos redondos.
   flex:0 0 auto para o flex não achatar o círculo em elipse */
.carousel__dots{
  display:flex; justify-content:center; align-items:center; gap:9px;
  margin-top:clamp(18px,2vw,30px);
}
.carousel__dot{
  flex:0 0 auto;
  /* o <button> herda um padding lateral do navegador e vira elipse */
  padding:0; -webkit-appearance:none; appearance:none;
  width:5px; height:5px; border-radius:50%;
  background:rgba(158,124,90,.22);
  transition:background-color .35s var(--ease);
}
.carousel__dot.is-active{ background:rgba(158,124,90,.6); }

.tratamentos__cta{
  margin-top:clamp(30px,3.6vw,56px);
  text-align:center;
}
/* -------------------------------------------------------------
   7. SEÇÃO 05 · O AMBIENTE
   texto → faixa em tela cheia com paralaxe → galeria de 6 fotos
   ------------------------------------------------------------- */
.ambiente{
  position:relative;
  /* a faixa abre a seção, então o topo pede pouco respiro */
  padding:clamp(34px,3.4vw,52px) 0 var(--sec-y);
  background:linear-gradient(180deg, #ffffff 0%, var(--c-off) 30%, var(--c-cream) 100%);
  overflow:hidden;
}

/* faixa em tela cheia */
/* paralaxe de verdade: a foto é meia vez mais alta que a janela e corre
   mais devagar que a página, revelando partes diferentes conforme o scroll.
   A amplitude vem do data-parallax no HTML (em % da altura da camada) e o
   -26% de folga em cima e embaixo é o que sobra para ela se deslocar. */
.amb-band{
  position:relative;
  margin-top:0;
  height:clamp(320px,64vh,620px);
  overflow:hidden;
}
.amb-band__media{
  position:absolute; inset:-26% 0;
  will-change:transform;
}
.amb-band__media img{
  width:100%; height:100%;
  object-fit:cover;
}

/* o título agora vem depois da faixa */
.sec-head--depois-da-faixa{ margin-top:clamp(44px,4.8vw,76px); }

/* galeria */
.amb-grid{
  margin-top:clamp(40px,4.6vw,74px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,34px);
}

.amb-card{ margin:0; }

.amb-card__frame{
  position:relative;
  overflow:hidden;
  border-radius:4px;
  aspect-ratio:4/3;
  background:var(--c-grey);
}
.amb-card__frame img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease), filter .5s var(--ease);
}

/* o hover age só dentro do quadro da imagem — legendas não se movem */
@media (hover:hover){
  .amb-card__frame:hover img{ transform:scale(1.05); }

  .amb-grid:has(.amb-card__frame:hover) .amb-card__frame:not(:hover) img{
    filter:blur(1.5px) brightness(.82);
  }
}


/* -------------------------------------------------------------
   8. SEÇÃO 03 · CORPO MÉDICO
   ------------------------------------------------------------- */
.corpo{
  --corpo-avanco:clamp(86px,9.5vw,150px);   /* quanto os cards sobem sobre a faixa preta */
  position:relative;
  padding-bottom:var(--sec-y);
  background:
    /* iluminação sutil em areia */
    radial-gradient(62% 48% at 50% 30%, rgba(227,198,163,.46) 0%, rgba(227,198,163,.13) 45%, rgba(227,198,163,0) 72%),
    /* degradê entre os dois bronzes da paleta */
    linear-gradient(160deg, var(--c-bronze-2) 0%, var(--c-bronze) 100%);
}

/* faixa areia com o fio dourado */
.corpo__faixa{
  position:relative;
  height:clamp(26px,2.8vw,42px);
  background:var(--c-sand);
}
.corpo__faixa::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  width:min(58%, 760px); height:3px;
  background:var(--c-gold);
}

/* faixa preta com o título */
.corpo__topo{
  background:var(--c-ink);
  padding-top:clamp(52px,6vw,96px);
  padding-bottom:calc(var(--corpo-avanco) + clamp(44px,4.8vw,84px));
}
.corpo__topo .sec-title{ color:#fff; }

/* os cards sobem e sobrepõem a faixa preta */
.corpo__conteudo{
  position:relative;
  margin-top:calc(-1 * var(--corpo-avanco));
}
.corpo__conteudo > .equipe-grid:first-child{ margin-top:0; }

/* sobre o bronze o texto vai escuro — é o que dá contraste de verdade */
.corpo .sec-sub__title,
.corpo .sec-sub__title em{ color:var(--c-sand); font-weight:400; }
.corpo .sec-sub__rule{ background:linear-gradient(90deg, rgba(43,30,20,.45), transparent); }
/* faixa mais larga só aqui, para os cards ficarem maiores */
.corpo > .wrap{ max-width:1560px; }

/* os dois blocos usam a mesma largura de card (1/5 da faixa);
   a linha com 4 cards fica centralizada. */
.equipe-grid{
  --gap:clamp(14px,1.6vw,26px);
  --por-linha:5;
  margin-top:clamp(40px,4.6vw,72px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap);
}
.equipe-card{
  flex:0 1 calc((100% - (var(--por-linha) - 1) * var(--gap)) / var(--por-linha));
}

.equipe-card{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  background:#0d0d0d;
  box-shadow:0 18px 42px rgba(52,34,18,.34);
}
.equipe-card::after{
  content:""; position:absolute; inset:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:6px;
  pointer-events:none;
  transition:border-color .5s var(--ease);
}
.equipe-card img{
  width:100%; height:auto;     /* card inteiro, no 9:16 original */
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
  filter:saturate(.96);
}
.equipe-card:hover img{ transform:scale(1.035); filter:saturate(1.06); }
.equipe-card:hover::after{ border-color:rgba(239,184,16,.42); }

/* -------------------------------------------------------------
   8b. SEÇÃO 04 · NA MÍDIA
   4 cards de entrevista em formato de vídeo + faixa de veículos
   ------------------------------------------------------------- */
.midia{
  position:relative;
  /* o rodapé é mais curto: a faixa de logos já traz o próprio respiro */
  padding:var(--sec-y) 0 clamp(40px,4vw,60px);
  background:linear-gradient(180deg, var(--c-cream) 0%, var(--c-off) 46%, #ffffff 100%);
  overflow:hidden;
}
.midia .sec-title{ font-size:clamp(21px,1.95vw,31px); }

.midia-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(18px,1.9vw,28px);
  margin-top:clamp(40px,4.4vw,68px);
}

.midia-card__link{
  display:flex; flex-direction:column;
  height:100%;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(43,40,37,.04), 0 14px 34px rgba(43,40,37,.07);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.midia-card__link:hover{
  transform:translateY(-5px);
  box-shadow:0 4px 8px rgba(43,40,37,.05), 0 22px 48px rgba(43,40,37,.12);
}

.midia-card__foto{
  position:relative; display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:var(--c-cream);
}
.midia-card__foto img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease), filter .45s var(--ease);
}
.midia-card__link:hover .midia-card__foto img{ transform:scale(1.05); }

/* um véu discreto para o play e o selo do veículo sempre lerem */
.midia-card__foto::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,19,19,.34) 0%, rgba(19,19,19,.06) 45%, rgba(19,19,19,.22) 100%);
  transition:opacity .45s var(--ease);
}
.midia-card__link:hover .midia-card__foto::after{ opacity:.72; }

.midia-card__play{
  position:absolute; top:50%; left:50%;
  translate:-50% -50%;
  z-index:2;
  display:grid; place-items:center;
  width:clamp(46px,3.6vw,58px); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;
  background:rgba(19,19,19,.22);
  backdrop-filter:blur(2px);
  transition:background-color .45s var(--ease), border-color .45s var(--ease), scale .45s var(--ease);
}
.midia-card__play svg{
  width:44%; height:44%;
  fill:#fff; translate:6% 0;   /* o triângulo pede um respiro à direita */
}
.midia-card__link:hover .midia-card__play{
  background:var(--c-bronze);
  border-color:var(--c-bronze);
  scale:1.08;
}

.midia-card__veiculo{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  font-size:clamp(9px,.62vw,10px);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-text);
}

.midia-card__corpo{
  display:flex; flex-direction:column; gap:12px;
  flex:1;
  padding:clamp(18px,1.5vw,24px) clamp(18px,1.5vw,24px) clamp(20px,1.7vw,26px);
}
.midia-card__title{
  font-size:clamp(13px,.95vw,15px);
  font-weight:400;
  line-height:1.5;
  color:var(--c-text);
}
.midia-card__cta{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:7px;
  font-size:clamp(10px,.72vw,11px);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-bronze);
}
.midia-card__cta::after{
  content:"";
  width:14px; height:1px;
  background:currentColor;
  transition:width .45s var(--ease);
}
.midia-card__link:hover .midia-card__cta::after{ width:26px; }

/* faixa de veículos ---------------------------------------------------
   provisoriamente em tipografia: cinza, e cada nome assume a cor da
   marca (--cor, definida no HTML) quando o mouse passa por cima.
   O movimento não para: o hover só troca a cor. */
.veiculos{
  margin-top:clamp(46px,4.8vw,72px);
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.veiculos__track{
  display:flex;
  width:max-content;
  animation:veiculos 42s linear infinite;
}
.veiculos__grupo{ flex:0 0 auto; }
.veiculos__grupo ul{ display:flex; align-items:center; }

.veiculos__item{
  flex:0 0 auto;
  display:flex; align-items:center;
  padding-inline:clamp(20px,2.4vw,38px);
  cursor:default;
}
.veiculos__item img{
  /* --h é a altura óptica de cada logo, definida item a item no HTML.
     O multiply apaga o fundo branco dos arquivos que não têm transparência
     — funciona porque a faixa fica na parte clara da seção. */
  height:var(--h,24px);
  width:auto;
  mix-blend-mode:multiply;
  filter:grayscale(1) opacity(.7);
  transition:filter .4s var(--ease);
}
.veiculos__item:hover img{ filter:grayscale(0) opacity(1); }

@keyframes veiculos{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
/* -------------------------------------------------------------
   9. SEÇÃO 06 · TECNOLOGIAS
   ------------------------------------------------------------- */
.tec{
  /* o topo é menor porque o divisor já abre a seção */
  padding:clamp(46px,4.8vw,74px) 0 var(--sec-y);
  background:linear-gradient(180deg, var(--c-cream) 0%, #ffffff 100%);
}

.tec-grid{
  margin-top:clamp(40px,4.6vw,72px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,32px);
}

.tec-card{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid rgba(158,124,90,.16);
  border-radius:6px;
  overflow:hidden;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.tec-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; z-index:2;
  width:2px; background:var(--c-gold);
  transform:scaleY(0); transform-origin:top;
  transition:transform .6s var(--ease);
}
.tec-card:hover{
  transform:translateY(-4px);
  border-color:rgba(158,124,90,.34);
  box-shadow:0 20px 44px rgba(60,42,28,.12);
}
.tec-card:hover::before{ transform:scaleY(1); }

.tec-card__foto{
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--c-cream);
}
.tec-card__foto img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.tec-card:hover .tec-card__foto img{ transform:scale(1.05); }

.tec-card__corpo{
  padding:clamp(22px,2.2vw,34px) clamp(22px,2.2vw,34px) clamp(26px,2.6vw,40px);
}
.tec-card__title{
  font-size:clamp(19px,1.6vw,25px);
  font-weight:400;
  color:var(--c-ink);
  margin-bottom:10px;
}
.tec-card__text{
  font-size:clamp(13px,.95vw,15px);
  font-weight:300;
  color:var(--c-muted);
}
/* -------------------------------------------------------------
   10. SEÇÃO 07 · ENDEREÇO E CONTATO
   ------------------------------------------------------------- */
.contato{
  position:relative;
  /* Raleway usa algarismos de altura variável por padrão;
     lining + tabular alinha todos na mesma altura e largura */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
  padding-block:var(--sec-y);
  background:
    radial-gradient(90% 60% at 50% 0%, #1d1d1d 0%, var(--c-ink) 70%),
    var(--c-ink);
}

.contato-grid{
  margin-top:clamp(42px,4.8vw,76px);
  display:grid;
  grid-template-columns:1.35fr 1fr .9fr;
  gap:clamp(26px,3.2vw,56px);
  align-items:start;
}

.contato-col__titulo{
  font-size:clamp(15px,1.15vw,18px);
  font-weight:500;
  letter-spacing:.02em;
  color:#fff;
  padding-bottom:14px;
  margin-bottom:22px;
  border-bottom:1px solid rgba(227,198,163,.22);
}

/* mapa ---------------------------------------------------------------- */
.mapa{
  position:relative;
  aspect-ratio:4/3;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(227,198,163,.20);
  background:#242424;
}
.mapa iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  filter:saturate(.9);
}

.endereco{
  margin-top:22px;
  font-style:normal;
  font-size:clamp(14px,1.02vw,16px);
  font-weight:300;
  line-height:1.75;
  color:rgba(255,255,255,.72);
}
.endereco strong{ font-weight:500; color:#fff; }

.link-seta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:18px;
  font-size:clamp(12px,.85vw,14px);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c-sand);
  transition:color .35s var(--ease), gap .35s var(--ease);
}
.link-seta:hover{ color:var(--c-gold); gap:14px; }

/* lista de contatos ---------------------------------------------------- */
.contato-lista li + li{ margin-top:6px; }

.contato-lista a{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px;
  margin-inline:-14px;
  border-radius:6px;
  transition:background-color .35s var(--ease);
}
.contato-lista a:hover{ background:rgba(255,255,255,.05); }

.contato-ico{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:22px; height:22px;
  color:var(--c-gold);          /* o ponto do ícone do Instagram usa currentColor */
}
.contato-ico svg{
  width:20px; height:20px;
  fill:none; stroke:var(--c-gold); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .35s var(--ease);
}
.contato-ico svg .ico-cheio{ fill:currentColor; stroke:none; }
.contato-lista a:hover .contato-ico svg{ stroke:var(--c-gold-2); }
.contato-lista a:hover .contato-ico{ color:var(--c-gold-2); }

.contato-txt{ display:flex; min-width:0; }
.contato-valor{
  font-size:clamp(13px,.98vw,16px);
  font-weight:300;
  line-height:1.4;
  color:rgba(255,255,255,.9);
  overflow-wrap:anywhere;
}

/* horários ------------------------------------------------------------- */
.horarios li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-block:12px;
  border-bottom:1px dashed rgba(255,255,255,.10);
}
.horarios__dia{
  font-size:clamp(13px,.98vw,15px);
  font-weight:300;
  color:rgba(255,255,255,.72);
}
.horarios__hora{
  font-size:clamp(13px,.98vw,15px);
  font-weight:500;
  color:var(--c-sand);
  white-space:nowrap;
}
.horarios__obs{
  margin-top:18px;
  font-size:clamp(12px,.88vw,14px);
  font-weight:300;
  line-height:1.65;
  color:rgba(255,255,255,.5);
}

.contato-cta{ margin-top:26px; }

/* linha legal ---------------------------------------------------------- */
.contato-legal{
  margin-top:clamp(46px,5vw,80px);
  padding-top:clamp(22px,2.4vw,34px);
  border-top:1px solid rgba(255,255,255,.10);
  text-align:center;
  font-size:clamp(11px,.8vw,13px);
  font-weight:300;
  letter-spacing:.02em;
  color:rgba(255,255,255,.42);
}


/* -------------------------------------------------------------
   11. RODAPÉ
   ------------------------------------------------------------- */
.rodape{
  background:#0d0c0b;
  padding-block:clamp(30px,3.4vw,46px);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
}
.rodape__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(22px,3vw,48px);
  flex-wrap:wrap;
}
.rodape__dados{
  font-size:clamp(11.5px,.82vw,13px);
  font-weight:300;
  line-height:1.9;
  color:rgba(255,255,255,.5);
}
.rodape__direitos{ color:rgba(255,255,255,.34); }

.rodape__redes{
  display:flex; align-items:center;
  gap:clamp(10px,1.2vw,18px);
}
.rodape__redes a{
  display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid rgba(227,198,163,.26);
  border-radius:50%;
  color:var(--c-sand);
  transition:color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.rodape__redes a:hover{
  color:var(--c-ink);
  background:var(--c-sand);
  border-color:var(--c-sand);
}
.rodape__redes svg{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.rodape__redes svg .ico-cheio{ fill:currentColor; stroke:none; }

/* -------------------------------------------------------------
   12. AMPLIAR IMAGEM (corpo médico e ambiente)
   ------------------------------------------------------------- */
.ampliavel{ cursor:zoom-in; }

.lightbox{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(18px,4vw,64px);
  background:rgba(10,8,6,.90);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }

.lightbox img{
  /* medida em unidades de viewport: garante que a imagem caiba inteira */
  max-width:min(92vw, 1080px);
  max-height:84vh;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:scale(.965);
  transition:transform .45s var(--ease);
}
.lightbox.is-open img{ transform:none; }

.lightbox__fechar{
  position:absolute; top:clamp(14px,2vw,30px); right:clamp(14px,2vw,30px);
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  color:#fff;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__fechar:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); }
.lightbox__fechar svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }

/* -------------------------------------------------------------
   13. RESPONSIVO
   ------------------------------------------------------------- */
@media (max-width:1180px){
  .header__cta{ display:none; }
  .burger{
    /* precisa de position para o z-index valer — sem isso o menu
       aberto passava por cima e o botão de fechar ficava inacessível */
    position:relative; z-index:3;
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    margin-left:auto;
    width:44px; height:44px;
  }
  /* a marca também fica acima do menu aberto */
  .header__logo{ position:relative; z-index:3; }
  .burger span{
    display:block; height:1.5px; width:24px; margin-inline:auto;
    background:#fff; border-radius:2px;
    transition:transform .4s var(--ease), opacity .3s var(--ease);
  }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  .nav{
    position:fixed; inset:0;
    flex-direction:column; justify-content:center;
    gap:34px;
    background:rgba(15,14,13,.97);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    opacity:0; visibility:hidden;
    transition:opacity .45s var(--ease), visibility .45s var(--ease);
  }
  .nav.is-open{ opacity:1; visibility:visible; }

  .nav__list{ flex-direction:column; gap:22px; text-align:center; }
  .nav__list a{
    font-size:19px;
    padding-block:8px;
    /* entram em cascata quando o menu abre */
    opacity:0; transform:translateY(14px);
    transition:opacity .45s var(--ease), transform .45s var(--ease), color .3s var(--ease);
  }
  .nav__list a::after{ display:none; }   /* o sublinhado não faz sentido aqui */
  .nav.is-open .nav__list a{ opacity:1; transform:none; }
  .nav.is-open .nav__list li:nth-child(1) a{ transition-delay:.10s; }
  .nav.is-open .nav__list li:nth-child(2) a{ transition-delay:.15s; }
  .nav.is-open .nav__list li:nth-child(3) a{ transition-delay:.20s; }
  .nav.is-open .nav__list li:nth-child(4) a{ transition-delay:.25s; }
  .nav.is-open .nav__list li:nth-child(5) a{ transition-delay:.30s; }
  .nav.is-open .nav__list li:nth-child(6) a{ transition-delay:.35s; }
  .nav.is-open .nav__list li:nth-child(7) a{ transition-delay:.40s; }

  .nav__cta{
    display:inline-flex;
    padding:16px 34px; font-size:14px;
    opacity:0; transform:translateY(14px);
    transition:opacity .45s var(--ease), transform .45s var(--ease), background-color .35s var(--ease);
  }
  .nav.is-open .nav__cta{ opacity:1; transform:none; transition-delay:.46s; }

  .hero__content{ margin-left:0; }
}

@media (max-width:1180px){
  .equipe-grid{ --por-linha:3; }
  .midia-grid{ grid-template-columns:repeat(2, 1fr); }

  .contato-grid{ grid-template-columns:1fr 1fr; }
  .contato-col--mapa{ grid-column:1 / -1; }
  .mapa{ aspect-ratio:16/7; }
}

@media (max-width:900px){
  .equipe-grid{ --por-linha:2; }
  .tec-grid{ grid-template-columns:1fr; }
  :root{ --entrada-h:50px; }
  .entrada-forma{ width:200px; margin-left:-100px; }
  .entrada-camada__lado:first-child{ right:calc(50% + 100px); }
  .entrada-camada__lado:last-child { left:calc(50% + 100px); }
  .entrada-link{ width:88px; height:38px; }
  .entrada-link__seta svg{ width:16px; height:16px; }
  .marquee__grupo li::after{ margin-inline:18px; }
}

@media (max-width:760px){
  :root{ --hero-slide:8s; }

  /* as entrevistas viram carrossel, como a galeria do ambiente */
  .midia-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    padding-block:2px;
    scroll-padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .midia-grid::-webkit-scrollbar{ display:none; }
  .midia-card{ flex:0 0 78%; scroll-snap-align:center; }
  /* sem mouse não há hover: no celular os logos já entram coloridos */
  .veiculos__item img{ filter:none; }

  /* a galeria vira carrossel: no celular, 6 fotos empilhadas viravam
     uma sequência longa demais de scroll */
  .amb-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    /* sangra até as bordas, mas o primeiro e o último card respeitam a margem */
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    padding-block:2px;
    scroll-padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .amb-grid::-webkit-scrollbar{ display:none; }
  .amb-card{
    flex:0 0 78%;
    scroll-snap-align:center;
  }
  .sec-head{ text-align:center; }
  .sec-sub{ justify-content:center; }
  .carousel__arrow{ display:none; }
  .trat-card{ flex:0 0 74%; }
  .trat-card.is-active{ transform:none; }
  .sec-sub__title{ white-space:normal; }
}

@media (max-width:700px){
  .contato-grid{ grid-template-columns:1fr; }
  .mapa{ aspect-ratio:4/3; }
  .contato-legal{ text-align:left; }
}

@media (max-width:520px){
  .amb-card{ flex-basis:84%; }
}

/* -------------------------------------------------------------
   14. ACESSIBILIDADE — movimento reduzido
   ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .marquee__track,
  .veiculos__track{ animation:none; }
  /* sem movimento: a faixa do ambiente fica parada, sem paralaxe */
  .amb-band__media{ inset:0; transform:none !important; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}