/* ==========================================================================
   MARCA — NUTRICIONISTA
   --------------------------------------------------------------------------
   Detalhes que são só desta marca. Carrega POR ÚLTIMO, depois do style.css.
   Mantenha curto: se um bloco daqui reaparecer em outro cliente, ele virou
   padrão e o lugar dele passa a ser o contrato + style.
   ========================================================================== */

/* Fonte da cliente para os títulos de destaque (hero + CTA) */
@font-face {
  font-family: "Right";
  src: url("../assets/righty.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* A referência visual dela usa a Right no destaque — é a assinatura
   da marca. Aplicada no hero e no título do CTA. */
.hero__title,
.cta__title {
  font-family: "Right", var(--fonte-display);
  font-style: normal;
  font-weight: 400;
}

/* Título da vitrine fica na fonte de display padrão, para não competir com o hero */
.vitrine__titulo {
  font-style: normal;
}

/* ---- Hero: foto dela ocupa a direita, texto centralizado na vertical,
   alinhado à esquerda, com respiro maior nas bordas ----------------------
   Cada formato de tela usa uma foto já enquadrada para aquele formato
   (assets/fundo-hero*.jpg), então não precisa mais de min-height nem
   background-position para compensar corte — a imagem certa já cobre
   sem cortar a cliente em cada breakpoint. */
.hero {
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding-left: clamp(64px, 12vw, 220px);
  padding-right: 64px;
  min-height: 620px;
}
.hero__inner { max-width: 60%; }
.hero__logo { margin: 0 0 20px; }

/* background-position: center bottom -> o corte do "cover" come o topo
   da imagem (parede/teto), nunca a base onde ela está, então o foco
   parte de baixo para cima em vez de centralizado. */
.hero__bg { background-position: center bottom; }

.hero__title {
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  max-width: 9ch;
}

/* ---- Botão "Conferir links": substitui o indicador de rolar, leva até
   os cards. Fundo na mesma cor do fundo da página (--bg), com leve
   respiração (pulso) para chamar atenção sem ser agressivo. */
.hero__btn {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  color: var(--texto);
  text-decoration: none;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: 14px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  animation: heroBtnPulse 2.6s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.hero__btn svg {
  width: 16px;
  height: 16px;
  animation: heroBtnArrow 1.6s ease-in-out infinite;
}
.hero__btn:hover {
  transform: translateY(3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
  animation-play-state: paused;
}
@keyframes heroBtnPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
  50%      { box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 0 0 8px rgba(244, 249, 226, .18); }
}
@keyframes heroBtnArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__btn, .hero__btn svg { animation: none; }
}

/* Widescreen: imagem própria (mais larga) para a foto não esticar/cortar */
@media (min-width: 1800px) {
  .hero { min-height: 40vw; max-height: 820px; }
  .hero__bg { background-image: var(--hero-overlay), url("../assets/fundo-hero-widescreen.jpg"); }
}

@media (max-width: 560px) {
  .hero {
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 40px 24px 200px;
    min-height: 120svh;   /* passa da tela cheia: mais respiro acima do
                             rosto dela, que fica bem mais abaixo do texto */
  }
  /* overlay do desktop é um gradiente horizontal (texto fica à esquerda);
     no mobile o texto centraliza sobre o topo da foto inteira, então aqui
     escurecemos o topo em vez da lateral — senão o título perde contraste
     em cima do rosto dela. */
  .hero__bg {
    background-image:
      linear-gradient(180deg, rgba(45,52,38,.65) 0%, rgba(45,52,38,.15) 32%, rgba(45,52,38,0) 55%),
      var(--hero-img-mobile);
  }
  .hero__inner { max-width: 100%; }
  .hero__title {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
    max-width: 11ch;   /* o 9ch do desktop quebrava cedo demais aqui */
    margin-inline: auto;
  }
  .hero__btn { margin: 24px auto 0; }
}

/* ---- Cards: 2 artes prontas, empilhadas, largas -------------------------
   padding-bottom igual ao espaço entre o carrossel e o CTA (.vitrine
   padding-bottom 40px + .cta padding-top 64px = 104px), para o respiro
   antes do carrossel ficar do mesmo tamanho que o respiro depois dele. */
.cards {
  grid-template-columns: 1fr;
  padding-bottom: 104px;
}

/* ---- Carrossel: só a foto, vertical, bordas arredondadas, sem sombra ---- */
.vitrine { padding: 0 0 40px; }
.slide {
  background: transparent;
  overflow: visible;
  border-radius: 0;
}
.slide__foto {
  aspect-ratio: 3 / 4;
  border-radius: var(--raio);
}
.slide__legenda { display: none; }

/* ---- CTA final: mais respiro acima/abaixo ------------------------------- */
.cta { padding: 64px 24px 72px; }