/* ==========================================================================
   Luiza Vercezi · Nutricionista — landing page
   Mobile-first. Tokens extraídos do Figma "LP Luiza".
   ========================================================================== */

/* ── Fontes (Inter variável, hospedada localmente) ─────────────────────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-italic.woff2") format("woff2");
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* cores da marca (Figma) */
  --roxo: #6d2175;
  --roxo-escuro: #561a5c;
  --verde: #335327;          /* títulos */
  --verde-logo: #1b6132;
  --lima: #c4c73c;           /* botões */
  --lima-faixa: #c1c43a;     /* faixa do topo */
  --lima-hover: #b4b82e;
  --creme: #fdf8e8;
  --creme-claro: #fffcf3;
  --areia: #e3dbc3;
  --cinza-fundo: #fafafa;
  --branco: #fff;

  /* texto: o #7E7E7E do Figma não passa em contraste (3,9:1);
     este tom mantém a leveza com 6,3:1 */
  --texto: #5c5c5c;
  --texto-suave: #8a8a8a;
  /* texto dos botões lima: branco, como no Figma */
  --texto-botao-lima: #fff;

  /* tipografia */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-corpo: 1rem;
  --fs-titulo: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);          /* 26 → 36 */
  --fs-hero: clamp(2.125rem, 1.35rem + 2.9vw, 3.75rem);           /* 34 → 60 */

  /* layout */
  --gutter: 1.25rem;
  --largura: 74.5rem;                                              /* 1192px */
  --faixa: 130px;                                                  /* altura da faixa lima */
  --diagonal: 10.26vw;                                             /* 40/390 no mobile */
  --secao: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);

  /* forma */
  --raio-foto: clamp(1.5rem, 0.8rem + 3vw, 3.125rem);              /* 24 → 50 */
  /* sombras dos cards: alcance lateral ≤ 8px, cabe na folga do carrossel */
  --sombra-card: 0 1px 2px rgb(0 0 0 / .05), 0 6px 14px -8px rgb(0 0 0 / .16);
  --sombra-card-hover: 0 2px 4px rgb(0 0 0 / .06), 0 14px 20px -12px rgb(0 0 0 / .24);

  /* movimento */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-saida: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 900px) {
  :root {
    --gutter: 2rem;
    --faixa: 160px;
    --diagonal: 5.42vw;                                            /* 78/1440 no desktop */
    --fs-corpo: 1.125rem;
  }
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--fonte);
  font-size: var(--fs-corpo);
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
ul[role="list"] { list-style: none; padding: 0; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--roxo);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--roxo); color: var(--branco);
  font-weight: 700; border-radius: 999px; text-decoration: none;
  transition: top .2s var(--ease);
}
.pular:focus { top: 1rem; }

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

/* ── Títulos ───────────────────────────────────────────────────────────── */
.titulo {
  display: flex;
  align-items: center;
  gap: .35em;
  font-size: var(--fs-titulo);
  font-weight: 800;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.titulo--centro { justify-content: center; text-align: center; }
.titulo--roxo  { color: var(--roxo); }
.titulo--verde { color: var(--verde); }
.titulo--claro { color: var(--branco); }
.titulo__icone { width: 1.1em; height: 1.1em; flex: none; }

/* ── Botões ────────────────────────────────────────────────────────────── */
.botao {
  --altura: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  min-height: var(--altura);
  padding: .5em 1em .5em 1.15em;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .01em;
  white-space: nowrap;
  transition:
    transform .25s var(--ease-saida),
    background-color .2s var(--ease),
    box-shadow .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.97); transition-duration: .08s; }

.botao--roxo { background: var(--roxo); color: var(--branco); }
.botao--roxo:hover { background: var(--roxo-escuro); box-shadow: 0 10px 22px -10px rgb(109 33 117 / .7); }

.botao--lima { background: var(--lima); color: var(--texto-botao-lima); }
.botao--lima:hover { background: var(--lima-hover); box-shadow: 0 10px 22px -10px rgb(140 144 20 / .8); }

.botao--grande { font-size: clamp(1.125rem, .9rem + 1vw, 1.625rem); padding: .45em 1em .45em 1.2em; }
.botao--pequeno { font-size: .9375rem; }

.botao__seta { width: 1.1em; height: auto; transition: transform .3s var(--ease-saida); }
.botao--roxo:hover .botao__seta { transform: translateY(3px); }
/* seta dos CTAs do WhatsApp aponta para frente (é saída, não rolagem) */
.botao__seta--lado { transform: rotate(-90deg); }
.botao:hover .botao__seta--lado { transform: rotate(-90deg) translateY(3px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--creme) 0%, var(--areia) 100%);
  overflow: hidden;
}

.hero__faixa {
  position: relative;
  z-index: 1;
  height: var(--faixa);
  background: var(--lima-faixa);
  display: grid;
  place-items: start center;
  padding-top: 24px;
}
.hero__logo { display: block; border-radius: 8px; }
.hero__logo img { width: 103px; height: auto; }

.hero__grafismo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 215px;
  width: 455px;
  max-width: none;
  translate: -50% 0;
  pointer-events: none;
}

/* mobile: foto em cima, texto no painel creme com diagonal */
.hero__foto {
  order: 1;
  position: relative;
  z-index: 2;
  width: 91.8%;
  margin: -7px 3.6% 0 4.6%;
}
.hero__foto img { width: 100%; }

.hero__texto {
  order: 2;
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--diagonal) - 2.5rem);
  padding: 1.5rem var(--gutter) 2.25rem;
  background: var(--creme-claro);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.hero__texto::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - 1px);
  height: var(--diagonal);
  background: inherit;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.hero__titulo {
  width: auto;
  text-align: center;
  /* 8.8vw mantém as duas linhas inteiras mesmo em telas de 320px */
  font-size: min(var(--fs-hero), 8.8vw);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--verde);
}
.hero__titulo em { font-style: italic; font-weight: 800; }
/* cada linha é um bloco que não quebra: sempre "Nutrição para viver" /
   "e performar melhor." */
.hero__linha { display: block; white-space: nowrap; }

@media (min-width: 900px) {
  .hero {
    display: block;
    height: clamp(640px, 71vw, 1030px);
  }
  .hero__logo img { width: 145px; }
  .hero__faixa { padding-top: 29px; }

  .hero__grafismo {
    left: 3.9vw;
    top: auto;
    bottom: -5.2vw;
    width: 48.2vw;
    translate: none;
  }

  .hero__foto {
    position: absolute;
    top: calc(var(--faixa) - 2.65vw);
    bottom: 0;
    right: 5.5vw;
    width: auto;
    margin: 0;
  }
  .hero__foto img { width: auto; height: 100%; }

  .hero__texto {
    position: absolute;
    z-index: 3;
    top: calc(var(--faixa) + 10vw);
    left: 9.6vw;
    width: max-content;
    max-width: 46vw;
    margin: 0;
    padding: 0;
    background: none;
    /* a coluna tem a largura do título, então o botão centraliza no
       bloco inteiro do texto, não só na segunda linha */
    align-items: center;
    gap: 2.2vw;
  }
  .hero__texto::before { display: none; }

  .hero__titulo { width: auto; line-height: 1.17; text-align: left; font-size: var(--fs-hero); }
  .hero__linha--recuo { padding-left: 1.1em; }
  .hero__texto .botao { font-size: clamp(1rem, .6rem + .6vw, 1.25rem); }

  /* diagonal creme que corta a foto na base do hero */
  .hero::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: 0; right: 0; bottom: -1px;
    height: var(--diagonal);
    background: var(--creme-claro);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
  }
}

/* ==========================================================================
   SOBRE
   ========================================================================== */
.sobre {
  background: var(--creme-claro);
  padding-block: 1rem var(--secao);
}

.sobre__grade {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.sobre__foto { order: -1; }
.sobre__foto img {
  width: 100%;
  aspect-ratio: 567 / 613;
  object-fit: cover;
  border-radius: var(--raio-foto);
}

.sobre__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.sobre__corpo p + p { margin-top: 1em; }
.sobre__corpo strong { font-weight: 800; color: #4a4a4a; }
.sobre__assinatura {
  font-weight: 800;
  font-style: italic;
  color: var(--roxo);
}

@media (min-width: 900px) {
  .sobre { padding-block: calc(5.5rem - var(--diagonal) + 3rem) 6rem; }
  .sobre__grade {
    display: grid;
    grid-template-columns: minmax(0, 584fr) minmax(0, 567fr);
    column-gap: clamp(3rem, 7vw, 8rem);
    align-items: start;
  }
  .sobre__foto { order: 0; margin-top: -1rem; }
  .sobre__texto { padding-top: 1rem; gap: 1.75rem; }
  .sobre__corpo { line-height: 1.56; }
}

/* ==========================================================================
   COMO POSSO AJUDAR
   ========================================================================== */
.ajuda {
  background: var(--roxo);
  color: var(--branco);
  padding-block: var(--secao);
}
.ajuda__lista {
  margin-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
}
.ajuda__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ajuda__icone {
  display: grid;
  place-items: center;
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--branco);
  margin-bottom: 1.25rem;
  transition: transform .45s var(--ease-saida), box-shadow .45s var(--ease-saida);
}
.ajuda__icone img { width: 58%; height: 62%; object-fit: contain; transition: transform .45s var(--ease-saida); }
.ajuda__item:hover .ajuda__icone {
  transform: translateY(-6px);
  box-shadow: 0 18px 30px -14px rgb(0 0 0 / .45);
}
.ajuda__item:hover .ajuda__icone img { transform: scale(1.08) rotate(-4deg); }

.ajuda__item h3 {
  font-size: clamp(1.25rem, 1rem + .7vw, 1.5625rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
  color: var(--creme);
}
.ajuda__item p {
  margin-top: .4rem;
  max-width: 16.5rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: rgb(255 255 255 / .92);
}

@media (min-width: 640px) {
  .ajuda__lista { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .ajuda { padding-block: 4.4rem 4.6rem; }
  .ajuda__lista { grid-template-columns: repeat(4, 1fr); margin-top: 4.5rem; }
  .ajuda__icone { width: 142px; }
  .ajuda__item p { font-size: 1.125rem; }
}

/* ==========================================================================
   VÍDEO
   ========================================================================== */
.video {
  background: var(--cinza-fundo);
  padding-block: var(--secao);
  text-align: center;
}
.video .envolto { display: flex; flex-direction: column; align-items: center; }

/* Largura limitada também pela ALTURA da tela: o player (9:16) sempre cabe
   inteiro na janela, com --folga-player de respiro somando cima + baixo.
   svh = altura visível no celular com a barra do navegador aparecendo. */
.player {
  --folga-player: 96px;
  position: relative;
  width: min(82vw, 514px, (100vh - var(--folga-player)) * 9 / 16);
  width: min(82vw, 514px, (100svh - var(--folga-player)) * 9 / 16);
  aspect-ratio: 9 / 16;
  margin-block: 2rem 2.25rem;
  border-radius: clamp(1.75rem, 1rem + 3vw, 3.3rem);
  overflow: hidden;
  background: #d9d9d9;
  box-shadow: 0 30px 60px -30px rgb(51 83 39 / .45);
  isolation: isolate;
  /* camada própria: garante que o recorte arredondado também valha para a
     camada do <video> (sem isso, Chrome/Safari em tela Retina deixam um fio
     escuro na borda) */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* durante o vídeo, sem fundo cinza: a suavização da borda mistura com a página */
.player--tocando { background: transparent; }
.player__capa, .player__capa img, .player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player__capa img { transition: transform .8s var(--ease-saida); }
/* degradê na base: esconde a legenda queimada do frame e dá leitura ao rótulo */
.player::after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgb(27 40 20 / .55) 35%, rgb(27 40 20 / .88) 100%);
  pointer-events: none;
  transition: opacity .4s var(--ease);
}

.player__play {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.player__play svg {
  width: clamp(76px, 18vw, 112px);
  filter: drop-shadow(0 12px 24px rgb(0 0 0 / .3));
  transition: transform .35s var(--ease-saida);
}
.player__play circle { fill: rgb(255 255 255 / .94); }
.player__play path { fill: var(--roxo); }
/* anel pulsante discreto chamando para o play */
.player__play::before {
  content: "";
  position: absolute;
  width: clamp(76px, 18vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .8);
  animation: pulso 2.4s var(--ease) infinite;
}
.player:hover .player__play svg { transform: scale(1.08); }
.player:hover .player__capa img { transform: scale(1.03); }
.player__play:focus-visible { outline-offset: -6px; border-radius: inherit; }


/* estado tocando */
.player--tocando::after,
.player--tocando .player__play,
.player--tocando .player__capa { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
/* enquanto pré-carrega, o <video> fica ATRÁS da capa e não recebe cliques;
   só sobe para frente quando começa a tocar */
.player video {
  z-index: 0;
  pointer-events: none;
  background: transparent;
  /* sangra 2px além do shape: a borda arredondada corta sempre a imagem,
     nunca a beirada da caixa do vídeo (que é onde aparecia o fio) */
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  max-width: none;
  transition: opacity .3s var(--ease);
}
.player--tocando video { z-index: 3; pointer-events: auto; }
.player--carregando .player__play svg { animation: respira 1s var(--ease) infinite alternate; }

@keyframes pulso {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes respira { to { transform: scale(.92); } }

/* ==========================================================================
   ATENDIMENTO
   ========================================================================== */
.atendimento {
  background: var(--branco);
  padding-block: var(--secao) 1rem;
}
.atendimento__grade {
  margin-top: 2rem;
  display: grid;
  gap: 2.5rem;
  justify-items: center;
}
.atendimento__locais { display: grid; gap: 2.25rem; }
.local {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
}
.local__cidade {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: clamp(1.25rem, 1rem + .7vw, 1.5rem);
  font-weight: 700;
  color: var(--verde);
}
.local__cidade img { width: 1.4em; height: 1.4em; }
.local p { font-weight: 500; line-height: 1.4; }
.local .botao { margin-top: .35rem; }

/* no mobile o layout do Figma não mostra a foto (e ela nem é baixada) */
.atendimento__foto { display: none; }

@media (min-width: 900px) {
  .atendimento { padding-block: 4.4rem 2rem; }
  .atendimento__grade {
    margin-top: 4.4rem;
    grid-template-columns: 1fr minmax(0, 481px);
    align-items: center;
    column-gap: clamp(3rem, 8vw, 9rem);
    max-width: 62rem;
    margin-inline: auto;
  }
  .atendimento__locais { gap: 3.5rem; }
  .local p { font-size: 1.2rem; }
  .atendimento__foto { display: block; }
  .atendimento__foto img {
    width: 481px;
    aspect-ratio: 481 / 601;
    object-fit: cover;
    border-radius: 3rem;
  }
}

/* ==========================================================================
   AVALIAÇÕES
   ========================================================================== */
.avaliacoes {
  background: var(--branco);
  padding-block: 3rem 2rem;
}
.avaliacoes__grade { display: grid; gap: 2rem; }

.avaliacoes__resumo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  color: #3c4043;
}
.avaliacoes__nota { font-size: 1.25rem; font-weight: 600; line-height: 1; }
.avaliacoes__nota span { font-size: 1.75rem; font-weight: 800; }
.avaliacoes__total { font-size: .9375rem; }
.avaliacoes__total a {
  font-weight: 700;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: #bdc1c6;
}
.avaliacoes__total a:hover { text-decoration-color: currentColor; }
.avaliacoes__selo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .25rem;
  padding: .45rem .85rem .45rem .55rem;
  border: 1px solid #dadce0;
  border-radius: .75rem;
  font-weight: 600;
  font-size: .9375rem;
}

/* estrelas desenhadas em CSS (máscara) para não pesar */
.estrelas { display: flex; gap: 2px; }
.estrelas span {
  width: 18px;
  aspect-ratio: 1;
  background: #fbbc04;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.estrelas--grande span { width: 28px; }

/* carrossel: scroll-snap nativo (swipe no celular) + setas */
.carrossel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
/* --respiro: espaço para a borda, o levantar do hover e a sombra não serem cortados.
   Precisa ser MENOR que o gap, senão uma fatia do próximo card aparece na borda. */
.carrossel ul.carrossel__trilho {
  --respiro: 16px;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--respiro);
  padding: var(--respiro) var(--respiro) calc(var(--respiro) + 10px);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho:focus-visible { outline-offset: -2px; }

.carrossel__seta {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #dadce0;
  border-radius: 50%;
  background: var(--branco);
  color: #5f6368;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s, transform .2s var(--ease-saida);
}
.carrossel__seta svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carrossel__seta:hover:not(:disabled) { background: var(--roxo); border-color: var(--roxo); color: var(--branco); transform: scale(1.06); }
.carrossel__seta:disabled { opacity: .35; cursor: default; }

.avaliacao {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid #e3e3e3;
  border-radius: 1rem;
  background: var(--branco);
  box-shadow: var(--sombra-card);
  color: #3c4043;
  transition: transform .35s var(--ease-saida), box-shadow .35s var(--ease-saida);
}
.avaliacao:hover { transform: translateY(-3px); box-shadow: var(--sombra-card-hover); border-color: #d6d6d6; }
.avaliacao__topo { display: flex; justify-content: space-between; align-items: center; }
.avaliacao__g { width: 20px; height: 20px; }
.avaliacao__texto {
  font-size: .9375rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
.avaliacao--aberta .avaliacao__texto { -webkit-line-clamp: unset; line-clamp: unset; }
.avaliacao__mais {
  align-self: flex-start;
  margin-top: -.35rem;
  padding: .35rem 0;
  border: 0;
  background: none;
  color: var(--roxo);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.avaliacao__autor {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-top: .5rem;
}
.avaliacao__autor img { width: 40px; height: 40px; border-radius: 50%; background: #eee; }
.avaliacao__autor span { display: flex; flex-direction: column; line-height: 1.3; }
.avaliacao__autor strong { font-size: .9375rem; font-weight: 700; color: #202124; }
.avaliacao__autor small { font-size: .8125rem; color: #70757a; }

@media (min-width: 640px) {
  .avaliacao { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (min-width: 1024px) {
  .carrossel { gap: 1rem; }
  .avaliacoes { padding-block: 4rem 2rem; }
  .avaliacoes__grade {
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
  }
  .avaliacao { flex-basis: calc((100% - 2.5rem) / 3); }
}

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */
.insta {
  background: var(--branco);
  padding-block: 2.5rem 4rem;
  display: grid;
  place-items: center;
}
.insta__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  border-radius: 1.5rem;
  padding: .5rem 1rem;
}
.insta__avatar {
  display: block;
  width: clamp(130px, 100px + 8vw, 200px);
  aspect-ratio: 1;
  margin-bottom: 1rem;
  border-radius: 50%;
  transition: transform .5s var(--ease-saida);
}
.insta__avatar img { width: 100%; height: 100%; }
.insta__link:hover .insta__avatar { transform: rotate(-4deg) scale(1.04); }
.insta__titulo {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.875rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1.15;
  color: var(--roxo);
}
.insta__arroba {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: clamp(1.125rem, .85rem + 1.1vw, 2.2rem);
  font-weight: 500;
  color: #8f8f8f;
  transition: color .2s;
}
.insta__arroba img { width: 1.15em; height: 1.15em; }
.insta__link:hover .insta__arroba { color: var(--roxo); }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape {
  background: var(--creme);
  padding: 2.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
.rodape__logo { width: clamp(118px, 90px + 6vw, 168px); }
.rodape__info { font-size: .8125rem; line-height: 1.6; color: #6b6b5c; }

/* ==========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================== */
.whats-flutuante {
  position: fixed;
  z-index: 50;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: var(--branco);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.9);
  transition: opacity .35s var(--ease), transform .45s var(--ease-saida), visibility 0s .35s;
}
.whats-flutuante svg { width: 30px; fill: currentColor; }
.whats-flutuante.visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease-saida), visibility 0s;
}
.whats-flutuante:hover { transform: scale(1.08); }

/* ==========================================================================
   MOVIMENTO
   ========================================================================== */
/* entrada do hero */
.hero__titulo .hero__linha,
.hero__texto .botao,
.hero__foto {
  animation: surgir .9s var(--ease-saida) both;
}
.hero__linha--recuo { animation-delay: .08s !important; }
.hero__texto .botao  { animation-delay: .2s !important; }
.hero__foto { animation-name: surgir-foto; animation-duration: 1.1s; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(18px); }
}
@keyframes surgir-foto {
  from { opacity: 0; transform: translateY(24px) scale(.985); }
}

/* revelar ao rolar (só com JS ativo: sem JS tudo aparece normalmente) */
/* usa `translate` (e não transform) para não brigar com o hover dos botões/cards */
.js [data-revelar] {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity .7s var(--ease) var(--atraso, 0s),
    translate .8s var(--ease-saida) var(--atraso, 0s),
    transform .25s var(--ease-saida),
    background-color .2s var(--ease),
    box-shadow .25s var(--ease);
}
.js [data-revelar].revelado { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-revelar] { opacity: 1; translate: none; }
}