/* Landing K&A — Dra. Raquel Botelho. BASE (mobile/tablet, < 900px). Sem inline, sem CDN (CSP rígida).
   A partir de 900px, css/desktop.css reproduz a geometria exata do layout (PSD). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--marfim);
  color: var(--cafe);
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: 1.55;
  overflow-x: hidden; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }   /* o <picture> não cria caixa: o <img> continua posicionado pelos estilos de cada bloco */
h1, h2, h3, p, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
section[id], footer[id] { scroll-margin-top: 4.5rem; }
br.q { display: none; }   /* quebras de linha do layout: só no desktop */

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }

.icone { width: 1.25em; height: 1.25em; flex: none; }
/* ícones do layout (rasters do PSD) usados como máscara: herdam a cor do contexto */
.icone--wa, .icone--seta { display: inline-block; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.icone--wa { -webkit-mask-image: url("../img/ico-wa.webp"); mask-image: url("../img/ico-wa.webp"); }
.icone--seta { -webkit-mask-image: url("../img/ico-seta.webp"); mask-image: url("../img/ico-seta.webp"); }
.icone--baixo { transform: rotate(90deg); }
.icone--esq { transform: rotate(180deg); }

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 500; line-height: 1.1; letter-spacing: -0.005em; color: var(--cafe-texto); }
h2 { font-size: var(--t-h2); }

.rotulo {
  font-weight: 900;
  font-size: var(--t-micro);
  letter-spacing: 0.195em;
  text-transform: uppercase;
  color: var(--cafe-rotulo);
  margin-bottom: 0.75rem;
}
.rotulo--claro { color: var(--creme); }
.rotulo--verde { color: var(--verde-rotulo); }
.rotulo-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-weight: 400;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Botões (retângulo arredondado, como no layout) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--alvo);
  min-width: var(--alvo);
  max-width: 100%;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: var(--raio-botao-mobile);   /* no desktop o raio vem do desktop.css (28,5px em botões de 85px) */
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: var(--t-pequeno);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  line-height: 1.25;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--laranja { background: var(--laranja); color: var(--branco); }
.btn--laranja:hover { background: #e85d00; }
.btn--marfim { background: var(--marfim); color: var(--verde-rotulo); }
.btn--contorno { border: 1.5px solid var(--creme); color: var(--creme); background: transparent; }
.btn--contorno:hover { background: rgba(255, 250, 224, 0.12); }

/* ---------- Cabeçalho ---------- */
/* Sem JavaScript o cabeçalho fica no fluxo (não cobre o hero); com JS ele vira fixo e transparente. */
.topo { position: relative; z-index: 50; background: var(--verde); color: var(--creme); transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.js .topo { position: fixed; inset: 0 0 auto 0; background: transparent; }
.js .topo.is-scrolled, .js .topo.menu-aberto { background: var(--verde); box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.18); }
.topo__interno { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--largura-max); margin: 0 auto; padding: 0.6rem var(--gutter); }
.topo__selo { display: block; width: 4.25rem; flex: none; }
.topo__selo img { width: 100%; height: auto; }

.nav-toggle { display: none; align-items: center; justify-content: center; width: var(--alvo); height: var(--alvo); padding: 0; border: 0; background: transparent; color: var(--creme); cursor: pointer; }
.nav-toggle .icone { width: 1.75rem; height: 1.75rem; }

.nav { display: flex; flex-direction: column; gap: 0; }
.nav a:not(.btn), .nav-rodape a {
  display: flex;
  align-items: center;
  min-height: var(--alvo);
  min-width: var(--alvo);
  padding: 0 0.25rem;
  font-weight: 700;
  font-size: var(--t-pequeno);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a:not(.btn):hover, .nav a[aria-current="true"] { color: var(--laranja-nav); }

.js .nav-toggle { display: inline-flex; }
.js .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 0.5rem var(--gutter) 1.25rem; background: var(--verde); box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.18); }
.js .topo.menu-aberto .nav { display: flex; }
.js .nav .btn { margin-top: 0.75rem; align-self: flex-start; }

/* ---------- 1. Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem var(--gutter) 0;
  background: var(--verde) url("../img/hero-fundo-960.webp") center / cover no-repeat;
  background-image: -webkit-image-set(url("../img/hero-fundo-960.webp") 1x, url("../img/hero-fundo-1600.webp") 2x);
  background-image: image-set(url("../img/hero-fundo-960.webp") 1x, url("../img/hero-fundo-1600.webp") 2x);
  color: var(--creme);
  overflow: hidden;
}
.js .hero { padding-top: 5.75rem; }
.hero__texto { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; max-width: 36rem; }
.hero h1 { font-size: var(--t-h1); color: var(--creme); }
.hero__lead { font-size: var(--t-lead); max-width: 28rem; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero .rotulo-linha { color: var(--creme); }
.rotulo-linha .sep { opacity: 0.9; }
.hero__retrato { position: relative; width: min(100%, 26rem); aspect-ratio: 1 / 1; margin: 0.5rem auto 0; overflow: hidden; }
/* a figura ocupa ~58% da largura da foto (alfa em 21,6%-79,4%): ampliada a 160% e centrada, como no desktop (rosto grande),
   com o cabelo (8,7% do topo da foto) encostado no topo da moldura para a cabeça aparecer já na primeira tela */
.hero__retrato img { position: absolute; left: -30%; top: -19%; width: 160%; height: auto; max-width: none; }

/* celular deitado e tablet (mini em pé ou deitado): mesma composição do desktop, texto à esquerda e a Dra. grande à direita */
@media (min-width: 37.5em) and (max-width: 56.24em), (orientation: landscape) and (min-width: 30em) and (max-width: 56.24em) {
  .js .hero, .hero { padding-top: 4.75rem; padding-bottom: 1.25rem; }
  .hero__texto { max-width: 54%; gap: 0.5rem; }
  .hero h1 { font-size: clamp(1.75rem, 5.2vw, 2.5rem); }
  .hero__lead { font-size: 1rem; }
  .hero__acoes { gap: 0.5rem; }
  .hero__retrato { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; max-width: none; aspect-ratio: auto; margin: 0; }
  .hero__retrato img { left: -30%; top: -8%; width: 160%; }
}

/* ---------- 2. Áreas de cuidado ---------- */
.areas { padding: var(--secao-y) var(--gutter); background: var(--marfim); }
.areas h2 { margin-bottom: 1.75rem; max-width: 18ch; }
.areas__grade { display: grid; grid-template-columns: 1fr; gap: 0.75rem; max-width: var(--largura-max); margin: 0 auto; }
.card-area { position: relative; display: block; aspect-ratio: 3 / 3.6; overflow: hidden; color: var(--creme); text-decoration: none; background: var(--verde); }
.card-area img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card-area:hover img { transform: scale(1.04); }
.card-area::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40, 30, 15, 0.72) 0%, rgba(40, 30, 15, 0) 55%); pointer-events: none; }
.card-area__nome { position: absolute; z-index: 1; left: 1rem; right: 3.5rem; bottom: 1rem; font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.375rem; letter-spacing: -0.005em; text-transform: uppercase; line-height: 1.1; overflow-wrap: anywhere; }
.card-area__seta { position: absolute; z-index: 1; right: 1rem; bottom: 1rem; width: 1.75rem; height: 1.75rem; }

/* ---------- 3. Como funciona ---------- */
.funciona { padding: var(--secao-y) var(--gutter); background: var(--laranja); color: var(--creme); }
.funciona__chamada { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.funciona h2 { max-width: 14ch; color: var(--creme); }
.funciona__passos { display: grid; grid-template-columns: 1fr; margin-top: 2rem; }
.passo { padding: 1.25rem 0; border-top: 1.6px solid rgba(255, 255, 255, 0.35); }
.passo__numero { display: block; font-family: var(--fonte-titulo); font-weight: 500; font-size: clamp(3rem, 2rem + 4vw, 4.75rem); line-height: 1; color: var(--laranja-numero); }
.passo h3 { margin-top: 0.25rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); text-transform: uppercase; color: var(--creme); }
.passo p { margin-top: 0.5rem; font-size: var(--t-base); max-width: 16rem; }

/* ---------- 4. Sobre ---------- */
.sobre { display: flex; flex-direction: column; background: var(--marfim); }
.sobre__foto { position: relative; aspect-ratio: 1 / 1.15; overflow: hidden; background: #8a5a2b; }
/* mesmo recorte do layout (cabeça aos joelhos): largura 126,9% e deslocamento do PSD */
.sobre__foto img { position: absolute; left: -10.6%; top: -11.8%; width: 127%; height: auto; max-width: none; }
.sobre__texto { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.5rem; padding: var(--secao-y) var(--gutter); }
.sobre h2 { max-width: 12ch; margin-bottom: 1rem; }
.sobre__nome { font-family: var(--fonte-titulo); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--cafe); }
.sobre__registro { font-size: var(--t-lead); color: var(--cafe); }
.sobre__especialidade { font-size: var(--t-base); margin-bottom: 1rem; color: var(--cafe-rotulo); }

/* ---------- 5. Depoimentos ---------- */
.casos { padding: var(--secao-y) var(--gutter); background: var(--branco); }
.casos h2 { margin-bottom: 0.75rem; }
.casos__ver { display: inline-flex; align-items: center; min-height: var(--alvo); margin-bottom: 1rem; font-weight: 900; font-size: var(--t-micro); letter-spacing: 0.195em; text-transform: uppercase; color: var(--cafe-rotulo); }
.carrossel { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "pista pista pista" "ant . prox"; align-items: center; gap: 1rem 0.75rem; max-width: var(--largura-max); margin: 0 auto; }
.carrossel__pista { grid-area: pista; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.25rem; min-width: 0; }
.carrossel__pista::-webkit-scrollbar { display: none; }
.carrossel__btn[data-dir="-1"] { grid-area: ant; }
.carrossel__btn[data-dir="1"] { grid-area: prox; }
.carrossel__btn { display: inline-flex; align-items: center; justify-content: center; width: var(--alvo); height: var(--alvo); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cafe-borda); cursor: pointer; }
.carrossel__btn .icone { width: 1.75rem; height: 1.75rem; }
.depoimento { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1.5px solid var(--cafe-borda); border-radius: var(--raio-card); background: var(--branco); }
.depoimento__aspas { width: 1.5rem; height: 1.5rem; color: var(--cafe); }
.depoimento blockquote { font-family: var(--fonte-titulo); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; color: var(--cafe-texto); }
.depoimento__autora { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.depoimento__nome { font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.25rem; color: var(--cafe-texto); }
.depoimento__idade { font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.25rem; color: var(--cafe-texto); }
.estrelas { width: 5.5rem; height: 0.894rem; background-color: var(--estrela); -webkit-mask: url("../img/estrelas.webp") center / contain no-repeat; mask: url("../img/estrelas.webp") center / contain no-repeat; }

/* avatar com o rosto coberto por tarja preta (placeholder — decisão do usuário) */
.avatar { position: relative; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; overflow: hidden; background: #c9a27a; }
.avatar img { position: absolute; left: -15.3%; top: -28.6%; width: 130.5%; height: auto; max-width: none; }
.avatar--tarja::after { content: ""; position: absolute; left: 0; right: 0; top: 33%; height: 20%; background: #000; }

/* ---------- 6. CTA final ---------- */
.cta { display: flex; flex-direction: column; background: var(--marfim); }
.cta__foto { position: relative; aspect-ratio: 1 / 1.12; overflow: hidden; background: transparent; }
/* mesmo recorte do layout: a foto exibe de 9,6% a 100% da largura, com a cabeça logo abaixo do topo */
.cta__foto img { position: absolute; left: -10.6%; top: -5.5%; width: 110.6%; height: auto; max-width: none; }
.cta__texto { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.5rem; padding: var(--secao-y) var(--gutter); }
.cta h2 { font-size: var(--t-h1); max-width: 14ch; color: var(--cafe); }
.cta .rotulo-linha { color: var(--verde-rotulo); }

/* ---------- Rodapé ---------- */
.rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; background: var(--branco); color: var(--verde-rotulo); padding: 1.5rem var(--gutter) 0; }
.rodape__selo { display: block; width: 5rem; }
.nav-rodape { display: flex; flex-wrap: wrap; column-gap: 1rem; }
.nav-rodape a { font-weight: 700; }
.rodape__legal { flex: 1 0 100%; padding: 0.5rem 0 1.25rem; font-size: var(--t-micro); color: var(--cafe-rotulo); }
.rodape__legal a { display: inline-block; padding: 0.875rem 0; margin: -0.875rem 0; text-underline-offset: 0.2em; } /* alvo >= 44px sem abrir vão na linha do texto */

/* ---------- Tablet ---------- */
@media (min-width: 30em) {          /* >= 480px */
  .areas__grade { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 36em) {          /* >= 576px: recorte horizontal, igual ao do layout */
  .sobre__foto { aspect-ratio: 814.6 / 635.9; }
  .sobre__foto img { left: -10.6%; top: -17.4%; width: 126.9%; }
  .cta__foto { aspect-ratio: 772.9 / 595.7; }
  .cta__foto img { left: -10.6%; top: -8.5%; width: 110.6%; }
}
@media (min-width: 48em) {          /* >= 768px */
  .funciona__passos { grid-template-columns: repeat(3, 1fr); }
  .passo { padding: 0 1.25rem; border-top: 0; border-left: 1.6px solid rgba(255, 255, 255, 0.35); }
  .depoimento { flex-basis: calc((100% - 1rem) / 2); }
}

/* celular deitado e tablet: CTA final com a foto à esquerda e o texto à direita, como no desktop */
@media (min-width: 37.5em) and (max-width: 56.24em), (orientation: landscape) and (min-width: 30em) and (max-width: 56.24em) {
  .cta { flex-direction: row; align-items: stretch; }
  .cta__foto { flex: 0 0 46%; aspect-ratio: auto; }
  .cta__foto img { left: -10.6%; top: -4%; width: 110.6%; }
  .cta__texto { flex: 1; gap: 0.75rem; padding: 1.5rem var(--gutter); }
  .cta h2 { font-size: clamp(1.75rem, 5.2vw, 2.5rem); max-width: none; }
}

@media (orientation: landscape) and (min-width: 30em) and (max-width: 56.24em) {
  .js .hero, .hero { min-height: 100svh; }
}

/* celular em pé: textos centralizados e harmonizados em todas as seções (vale só para a pilha de 1 coluna; o layout lado a lado
   de tablet/celular deitado e o desktop seguem alinhados à esquerda, como no layout) */
@media (max-width: 37.49em) and (orientation: portrait) {
  .hero__texto, .funciona__chamada, .sobre__texto, .cta__texto { align-items: center; text-align: center; }
  .areas, .casos, .rodape__legal { text-align: center; }
  .hero__lead { margin-inline: auto; }
  .hero__acoes { justify-content: center; }
  .rotulo-linha { justify-content: center; column-gap: 1.25rem; }
  .rotulo-linha .sep { display: none; }          /* sem o traço: ao quebrar em 2 linhas não sobra "-" pendurado */
  .areas h2, .funciona h2, .sobre h2, .casos h2, .cta h2 { margin-inline: auto; }
  .passo { text-align: center; }
  .passo p { margin-inline: auto; }
  .card-area__nome { text-align: left; }         /* legenda sobre a foto fica à esquerda, ao lado da seta */
  .casos__ver { justify-content: center; }
  .depoimento { align-items: center; text-align: center; }
  .depoimento__autora { justify-content: center; }
  .depoimento__quem { text-align: left; }
  .rodape { flex-direction: column; justify-content: center; text-align: center; }
  .rodape__selo { margin-inline: auto; }
  .nav-rodape { justify-content: center; }
}
/* ---------- Cabeçalho do celular/tablet: selo à esquerda, nome e CRM, botão Agendar e menu ---------- */
.topo__nome, .topo__agendar { display: none; }
@media (max-width: 56.24em) {
  .topo__interno { gap: 0.4rem; padding-block: 0.5rem; }
  .topo__selo { transition: width 0.3s ease; }
  .topo__selo { width: 2.75rem; }                                      /* 44px: alvo de toque */
  .nav-toggle { flex: none; }
  .topo__nome { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; margin-right: auto; color: var(--creme); line-height: 1.12; }
  .topo__nome-1 { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }   /* quebra em 2 linhas se faltar espaço */
  .topo__nome-2 { display: none; font-weight: 400; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; opacity: 0.78; }
  .topo__rqe { display: none; }
  /* botão fino (36px visíveis) com área de toque de 44px: a pílula é um pseudo-elemento menor que a caixa clicável */
  .btn.topo__agendar { display: inline-flex; position: relative; isolation: isolate; flex: none; padding: 0 0.95rem; background: transparent; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.07em; transform: none; }
  .topo__agendar::before { content: ""; position: absolute; inset: 4px 0; z-index: -1; border-radius: 0.75rem; background: var(--laranja); transition: background-color 0.2s ease; }
  .topo__agendar:hover::before { background: #e85d00; }
  .nav .btn--topo { display: none; }                                   /* o "Agendar" já está na barra */
  .js .hero { padding-top: 4.5rem; }
}
@media (min-width: 25em) and (max-width: 56.24em) { .topo__nome-2 { display: block; } }                 /* >= 400px: CRM sob o nome */
@media (min-width: 30em) and (max-width: 56.24em) {                                                      /* >= 480px: mais folga */
  .topo__interno { gap: 0.6rem; }
  .topo__nome-1 { font-size: 0.875rem; letter-spacing: 0.06em; white-space: nowrap; }
  .topo__rqe { display: inline; }
  .btn.topo__agendar { padding: 0 1.1rem; font-size: 0.8125rem; }
}
@media (min-width: 37.5em) and (min-height: 600px) and (max-width: 56.24em) { .topo__nome { display: none; } .btn.topo__agendar { margin-left: auto; } }   /* tablet (iPad mini etc.): sem os escritos no topo */
@media (max-width: 21.25em) { .topo__nome { display: none; } .topo__agendar { margin-left: auto; } }     /* <= 340px: só selo, Agendar e menu */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 56.24em) {   /* celular deitado: faixa baixa */
  .topo__interno { padding-block: 0.25rem; }
  .js .hero, .hero { padding-top: 3.75rem; }
  .js .nav { padding-top: 0.25rem; padding-bottom: 0.75rem; }
}
/* ---------- Movimento (só sem prefers-reduced-motion; nada fica escondido sem JS, e tudo tem rede de segurança por tempo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes quicar { 0%, 70%, 100% { transform: rotate(90deg); } 80% { transform: rotate(90deg) translateX(3px); } 90% { transform: rotate(90deg) translateX(-1px); } }   /* a seta já é girada 90deg */

  /* entrada do hero ao carregar (fill "backwards": depois da entrada o :hover volta a mandar no transform) */
  .js .hero__texto > * { animation: subir 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
  .js .hero__texto > :nth-child(1) { animation-delay: 0.05s; }
  .js .hero__texto > :nth-child(2) { animation-delay: 0.15s; }
  .js .hero__texto > :nth-child(3) { animation-delay: 0.27s; }
  .js .hero__texto > :nth-child(4) { animation-delay: 0.39s; }
  .js .hero__texto > :nth-child(5) { animation-delay: 0.5s; }
  .js .hero__retrato { animation: subir 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s backwards; }

  /* revelação ao rolar (classes postas pelo main.js; removidas ao terminar) */
  /* a transição fica só no estado final: esconder é instantâneo (sem "piscar" se o primeiro quadro sair antes do script) */
  .js .rv { opacity: 0; transform: translateY(20px); }
  .js .rv.rv-in { opacity: 1; transform: none; transition: opacity 0.8s ease var(--d, 0s), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s); }

  /* microinterações */
  .btn { transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }
  .btn--laranja:hover { box-shadow: 0 0.6rem 1.4rem rgba(253, 102, 0, 0.32); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn .icone--wa { transition: transform 0.3s ease; }
  .btn:hover .icone--wa { transform: rotate(-10deg) scale(1.1); }
  .btn--hero2 .icone--seta { animation: quicar 3.2s ease-in-out 2.2s infinite; }
  .card-area__seta { transition: transform 0.3s ease; }
  .card-area:hover .card-area__seta { transform: translateX(5px); }
  .card-area img { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .depoimento { transition: box-shadow 0.3s ease, transform 0.3s ease; }
  .depoimento:hover { box-shadow: 0 0.6rem 1.6rem rgba(61, 46, 34, 0.12); transform: translateY(-3px); }
  .carrossel__btn { transition: transform 0.2s ease; }
  .carrossel__btn:hover { transform: scale(1.12); }
  .passo__numero { transition: transform 0.4s ease; }
  .passo:hover .passo__numero { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:hover, .card-area:hover img { transform: none; }
}