/* ==========================================================================
   MARCA — YASMIN MARTINS · 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.
   ========================================================================== */

/* ---- Hero: ela à direita da foto, texto à esquerda ---------------------
   Diferente dos outros clientes, aqui o hero é CLARO (véu rosé sobre uma foto
   de fundo claro), então o texto é marrom e o botão é que fica escuro. */
.hero {
  /* Duas metades: o texto vive na metade ESQUERDA e é centralizado dentro
     dela (horizontal e verticalmente); a metade direita fica livre para a
     foto da cliente, que a imagem de fundo já posiciona ali. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 0;
  /* A altura acompanha a proporção da foto que a cliente enviou (2560x1080,
     ≈2.37:1 -> 1/2.37 = 42.2vw). Com isso o "cover" praticamente não corta
     nada e ela aparece inteira em tela de notebook/PC. O teto é a altura da
     janela (100svh): em telas baixas e largas ele é que manda, e o corte que
     sobra fica só na parede acima da cabeça dela, nunca nos pés. */
  min-height: min(42.2vw, 100svh);
}
/* O conteúdo ocupa só a primeira coluna (a metade esquerda) e se centraliza
   nela. O padding evita que o texto encoste na borda da tela em telas
   menores, e o max-width segura a medida de leitura. */
.hero__inner {
  grid-column: 1;
  max-width: min(100%, 680px);
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__logo { margin: 0 0 20px; }

/* A foto do hero é a versão larga enviada pela cliente (2560x1080), com a
   parede real prolongada à esquerda e ela na faixa direita (começa em ~71%
   da largura). Por ser larga, o "cover" preenche a tela sem emenda e sem
   cortá-la. Ancorada à direita para ela nunca sair do quadro. */
@media (min-width: 561px) {
  /* right BOTTOM: se ainda sobrar algum corte (tela larga e baixa), ele sai
     do topo — parede vazia — e nunca dos pés dela, que estão colados na base
     da foto. */
  .hero__bg { background-position: right bottom; }
}

.hero__title {
  font-size: clamp(3.4rem, 8vw, 8rem);
  max-width: 10ch;
  font-style: italic;    /* a EB Garamond tem itálico próprio, não oblíquo */
  line-height: 1.05;
}

/* ---- Botão "Conferir links": leva até os cards. Como o hero é claro, o
   botão é escuro (o inverso dos demais clientes) para ter contraste. */
.hero__btn {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--acao);
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  letter-spacing: .01em;
  padding: 18px 42px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(74, 59, 56, .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(74, 59, 56, .24);
  animation-play-state: paused;
}
@keyframes heroBtnPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(74, 59, 56, .28); }
  50%      { box-shadow: 0 8px 22px rgba(74, 59, 56, .28), 0 0 0 8px rgba(217, 155, 154, .35); }
}
@keyframes heroBtnArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__btn, .hero__btn svg { animation: none; }
}

@media (max-width: 560px) {
  .hero {
    /* No celular volta a UMA coluna: a divisão em metades é só do desktop,
       aqui o texto usa a largura toda e a foto dela fica abaixo. */
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: center;
    text-align: center;
    padding: 44px 24px 180px;
    min-height: 108svh;
  }
  /* A foto vertical dela é bem alta (1080x3320) e ela aparece só no terço de
     baixo. O enquadramento é ancorado abaixo do centro (65%) para ela
     COMEÇAR na metade inferior do hero: o topo fica livre para o título e o
     corte do "cover" tira o excesso de parede de cima, nunca a cabeça dela.
     O véu clareia o topo, onde o texto entra. */
  .hero__bg {
    background-image:
      linear-gradient(180deg, rgba(228,217,215,.92) 0%, rgba(228,217,215,.55) 34%, rgba(228,217,215,0) 62%),
      var(--hero-img-mobile);
    background-position: center 65%;
  }
  .hero__inner { grid-column: 1; max-width: 100%; width: 100%; padding-inline: 0; }
  .hero__title {
    font-size: clamp(2.6rem, 12vw, 3.4rem);
    max-width: 11ch;
    margin-inline: auto;
  }
  .hero__btn { margin: 26px auto 0; }
}

/* ---- Cards: 2 artes prontas, empilhadas, largas ------------------------
   As artes vieram em 1434x758 (~1.89:1), não no 2.4:1 do modelo — o CSS
   segue a proporção real do arquivo para não cortar o texto da arte.
   padding-bottom casa com o respiro depois do carrossel (.vitrine 40 +
   .cta 64 = 104px). */
.cards {
  grid-template-columns: 1fr;
  padding-bottom: 104px;
}

/* ---- Vitrine: depoimentos com foto e nome ----------------------------- */
.vitrine { padding: 0 0 40px; }

.depoimentos .trilho {
  padding-top: 18px;
  padding-bottom: 26px;
}

.depoimentos .slide {
  background: transparent;
  overflow: visible;
  border-radius: var(--raio);
}

.depoimento-card {
  min-height: 430px;
  padding: 26px 22px 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 250, 247, .96)),
    var(--superficie);
  border: 1px solid rgba(var(--acao-rgb), .12);
  box-shadow: 0 10px 26px rgba(var(--sombra-rgb), .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.depoimento-card__foto {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  margin: 0 auto 18px;
  border: 4px solid rgba(255, 255, 255, .86);
  box-shadow: 0 10px 24px rgba(var(--sombra-rgb), .16);
}

.depoimento-card__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.depoimento-card__conteudo strong {
  color: var(--texto);
  font-family: var(--fonte-display);
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.05;
  text-transform: capitalize;
}

.depoimento-card__conteudo blockquote {
  color: var(--texto-suave);
  font-family: var(--fonte-corpo);
  font-size: .98rem;
  line-height: 1.52;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.depoimento-card__conteudo blockquote::before {
  content: "“";
}

.depoimento-card__conteudo blockquote::after {
  content: "”";
}
.slide__legenda { display: none; }

.depoimento-card__btn {
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--acao-rgb), .10);
  color: var(--acao);
  cursor: pointer;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: 0;
  padding: 10px 18px;
  transition: background-color .2s ease, transform .2s ease;
}

.depoimento-card__btn:hover {
  background: rgba(var(--acao-rgb), .16);
  transform: translateY(-1px);
}

.depoimento-modal[hidden] {
  display: none;
}

.depoimento-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 22px;
}

.depoimento-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(42, 32, 30, .48);
  backdrop-filter: blur(3px);
}

.depoimento-modal__panel {
  position: relative;
  z-index: 1;
  width: min(620px, 92vw);
  max-height: 86vh;
  overflow: auto;
  border-radius: 28px;
  background: rgba(255, 250, 247, .98);
  padding: 34px 30px 30px;
  text-align: center;
  box-shadow: 0 22px 70px rgba(42, 32, 30, .24);
}

.depoimento-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--acao-rgb), .12);
  color: var(--acao);
  cursor: pointer;
  font: 600 1.35rem/1 var(--fonte-corpo);
}

.depoimento-modal__foto {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  margin: 0 auto 16px;
  border: 4px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 24px rgba(var(--sombra-rgb), .14);
}

.depoimento-modal__nome {
  margin: 0 0 18px;
  color: var(--texto);
  font-family: var(--fonte-display);
  font-size: clamp(1.75rem, 5vw, 2.3rem);
  font-style: italic;
  line-height: 1;
}

.depoimento-modal__texto {
  color: var(--texto-suave);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.65;
  text-align: left;
}

.depoimento-modal__texto p + p {
  margin-top: 14px;
}

/* Título da vitrine sem itálico, para não competir com o hero. */
.vitrine__titulo { font-style: normal; }

/* No celular o padrão do núcleo mostra 1 slide (84vw). Aqui a cliente quer
   2 por vez — e maiores. Para ganhar largura sem perder o segundo slide,
   aperta-se o respiro lateral do trilho (20px -> 10px) e o gap entre eles
   (16px -> 10px); a conta abaixo desconta exatamente esses valores. */
@media (max-width: 560px) {
  .trilho {
    padding-left: 18px;
    padding-right: 18px;
    gap: 14px;
  }
  .depoimentos .slide { width: 82vw; }
  .depoimento-card {
    min-height: 410px;
    padding: 24px 20px;
  }
  .depoimento-card__conteudo blockquote {
    font-size: .95rem;
  }
  .depoimento-modal__panel {
    padding: 32px 22px 26px;
  }
}

/* ---- CTA final ---------------------------------------------------------
   Os dois lados foram igualados medindo no navegador (não pela soma dos
   paddings): acima conta o padding-bottom da vitrine + a margem dos pontinhos
   + a entrelinha do título; abaixo, só o padding daqui. Com estes valores o
   respiro fica ~72px dos dois lados. */
.cta { padding: 4px 24px 100px; }
.cta__title {
  font-style: italic;
  font-weight: 700;      /* bold, a pedido da cliente */
}