/* =========================================================
   YAPP! ZERO - estilos do site
   Cores principais:
     verde        #39D51F
     verde escuro #144633
     cinza texto  #7A7A7A
     fundo claro  #F8F8F8
========================================================= */

:root {
  --verde: #39D51F;
  --verde-escuro: #144633;
  --cinza: #7A7A7A;
  --cinza-escuro: #474747;
  --fundo-claro: #F8F8F8;
  --largura: 1140px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  background: #ffffff;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 10px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* =========================================================
   TÍTULOS DAS SEÇÕES (linha verde + título verde escuro)
========================================================= */

.titulo-secao {
  --kicker: 26px;
  --titulo: 34px;
  --titulo-mt: 0px;
  text-align: center;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 600;
}

.titulo-secao__kicker {
  color: var(--verde);
  font-size: var(--kicker);
  font-weight: 600;
  line-height: 1.15;
}

.titulo-secao__titulo {
  margin-top: var(--titulo-mt);
  color: var(--verde-escuro);
  font-size: var(--titulo);
  font-weight: 600;
  line-height: 1.15;
}

.titulo-secao--beneficios  { --kicker: 35px; --titulo: 48px; --titulo-mt: -7px; }
.titulo-secao--sabores     { --kicker: 26px; --titulo: 34px; }
.titulo-secao--compartilhe { --kicker: 26px; --titulo: 36px; }
.titulo-secao--lifestyle   { --kicker: 30px; --titulo: 42px; --titulo-mt: -7px; }
.titulo-secao--eventos     { --kicker: 30px; --titulo: 42px; }
.titulo-secao--parceiro    { --kicker: 32px; --titulo: 50px; --titulo-mt: -10px; }

@media (max-width: 1024px) {
  .titulo-secao--beneficios  { --kicker: 40px; --titulo: 52px; }
  .titulo-secao--sabores     { --kicker: 35px; --titulo: 45px; }
  .titulo-secao--compartilhe { --kicker: 26px; --titulo: 37px; }
  .titulo-secao--lifestyle   { --kicker: 30px; --titulo: 45px; }
  .titulo-secao--parceiro    { --kicker: 35px; --titulo: 45px; }
}

@media (max-width: 767px) {
  .titulo-secao--beneficios  { --kicker: 26px; --titulo: 37px; }
  .titulo-secao--sabores     { --kicker: 22px; --titulo: 26px; }
  .titulo-secao--compartilhe { --kicker: 19px; --titulo: 28px; }
  .titulo-secao--lifestyle   { --kicker: 22px; --titulo: 32px; }
  .titulo-secao--eventos     { --kicker: 26px; --titulo: 36px; }
  .titulo-secao--parceiro    { --kicker: 23px; --titulo: 33px; }
}


/* =========================================================
   TOPO / MENU
========================================================= */

.site-header {
  position: relative;
  background: var(--fundo-claro);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--largura);
  min-height: 154px;
  margin: 0 auto;
  padding: 0 10px;
}

.site-header__logo {
  justify-self: center;
  width: 122px;
  margin-top: 40px;
}

.site-header__logo img {
  width: 100%;
  height: auto;
}

.main-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  position: relative;
  display: inline-block;
  padding: 0 16px;
  color: #6F6F6F;
  font-family: "Baloo 2", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.7px;
  text-decoration: none;
  transition: color .3s ease;
}

.main-nav a:hover {
  color: #000000;
}

/* linha verde animada */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--verde);
  transform: translateX(-50%);
  transition: width .35s ease;
}

.main-nav a:hover::after {
  width: 50%;
}

.btn-comprar {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 24px;
  border-radius: 30px;
  background: var(--verde-escuro);
  color: #ffffff;
  font-family: "Baloo 2", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  text-shadow: 0 0 10px rgba(0, 0, 0, .3);
  transition: transform .3s ease;
}

.btn-comprar:hover {
  transform: scale(1.1);
}

.btn-comprar svg {
  width: 15px;
  height: 20px;
  fill: currentColor;
}

.menu-toggle {
  display: none;
}

/* Menu em tela cheia (celular e tablet) */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 999999;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 120px 60px 60px;
  overflow-y: auto;
  background: #F5F5F5;
  animation: yappMenuFade .3s ease;
}

.menu-mobile[hidden] {
  display: none;
}

.menu-mobile ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-mobile a {
  display: block;
  padding: 8px 0;
  color: var(--verde-escuro);
  font-family: "Baloo 2", sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  transition: color .3s ease, transform .3s ease;
}

.menu-mobile a:hover,
.menu-mobile a.is-current {
  color: var(--verde);
}

.menu-mobile a:hover {
  transform: translateX(10px);
}

.menu-mobile__comprar {
  display: flex !important;
  align-items: center;
  margin-top: 165px;
}

.menu-mobile__comprar span {
  margin-left: 8px;
  font-size: 42px;
  line-height: 1;
  transition: transform .3s ease;
}

.menu-mobile__comprar:hover span {
  transform: translateX(8px);
}

html.menu-aberto,
html.menu-aberto body {
  overflow: hidden;
}

@keyframes yappMenuFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Celular e tablet: logo à esquerda + botão de menu */
@media (max-width: 1024px) {
  .site-header {
    background: #ffffff;
  }

  .site-header__inner {
    display: flex;
    justify-content: space-between;
    min-height: 0;
    padding: 12px 20px 16px;
  }

  .site-header__logo {
    justify-self: auto;
    width: 180px;
    margin-top: 0;
  }

  .main-nav,
  .btn-comprar {
    display: none;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 10px;
    border: 0;
    background: transparent;
    color: var(--verde-escuro);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-toggle svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .menu-toggle__fechar {
    display: none;
  }

  /* com o menu aberto o botão vira um X fixo no canto */
  .menu-toggle[aria-expanded="true"] {
    position: fixed;
    top: 10px;
    right: clamp(16px, 5vw, 28px);
    z-index: 1000001;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__abrir {
    display: none;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__fechar {
    display: block;
  }
}

@media (max-width: 767px) {
  .site-header__logo {
    width: 118px;
  }

  .menu-mobile {
    padding: 100px 32px 48px;
  }

  .menu-mobile a {
    font-size: 32px;
    line-height: 1.4;
  }

  .menu-mobile__comprar {
    margin-top: 60px;
  }
}


/* =========================================================
   BANNER PRINCIPAL (vídeo + fotos arrastáveis)
========================================================= */

.yapp-coca-carousel {
  /* largura do banner central: deixa só uma ponta dos vizinhos aparecendo */
  --yapp-slide-width: calc(100vw - 230px);
  --yapp-slide-ratio: 16 / 9;
  --yapp-slide-gap: 24px;
  --yapp-slide-radius: 16px;

  position: relative;
  width: 100%;
  padding: 20px 0 10px;
  overflow: hidden;
  background: #ffffff;
}

.yapp-coca-carousel__viewport {
  position: relative;
  width: 100%;
  overflow: visible;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.yapp-coca-carousel__viewport.is-dragging {
  cursor: grabbing;
}

.yapp-coca-carousel__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--yapp-slide-gap);
  will-change: transform;
  transition: transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* um banner só: centralizado e sem arrastar */
.yapp-coca-carousel.is-unico .yapp-coca-carousel__viewport {
  cursor: default;
}

.yapp-coca-carousel.is-unico .yapp-coca-carousel__track {
  margin: 0 auto;
}

.yapp-coca-carousel.is-unico .yapp-coca-carousel__pagination {
  display: none;
}

.yapp-coca-carousel__track.is-dragging,
.yapp-coca-carousel__track.no-transition {
  transition: none !important;
}

.yapp-coca-carousel__slide {
  position: relative;
  flex: 0 0 var(--yapp-slide-width);
  aspect-ratio: var(--yapp-slide-ratio);
  overflow: hidden;
  border-radius: var(--yapp-slide-radius);
  background: #eeeeee;
  opacity: .82;
  transform: scale(.99);
  transition: opacity 450ms ease, transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
  isolation: isolate;
}

.yapp-coca-carousel__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.yapp-coca-carousel__media {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.yapp-coca-carousel__slide--video {
  background: #000000;
}

.yapp-coca-carousel__video {
  position: absolute;
  inset: 0;
  object-fit: cover;
  background: #000000;
}

.yapp-coca-carousel__image {
  object-fit: cover;
  background: #eeeeee;
}

.yapp-coca-carousel__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 26px;
  margin-top: 12px;
}

.yapp-coca-carousel__dot {
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #858585;
  cursor: pointer;
  transition: width 300ms ease, background 300ms ease, transform 200ms ease;
}

.yapp-coca-carousel__dot:hover {
  transform: scale(1.15);
}

.yapp-coca-carousel__dot.is-active {
  width: 31px;
  background: #000000;
}

@media (min-width: 1700px) {
  .yapp-coca-carousel { --yapp-slide-width: calc(100vw - 250px); }
}

@media (max-width: 1366px) {
  .yapp-coca-carousel {
    --yapp-slide-width: calc(100vw - 190px);
    --yapp-slide-gap: 20px;
    --yapp-slide-radius: 15px;
  }
}

@media (max-width: 1024px) {
  .yapp-coca-carousel {
    --yapp-slide-width: calc(100vw - 130px);
    --yapp-slide-gap: 14px;
    --yapp-slide-radius: 14px;
    padding-top: 14px;
  }
}

@media (max-width: 767px) {
  .yapp-coca-carousel {
    --yapp-slide-width: calc(100vw - 46px);
    --yapp-slide-gap: 10px;
    --yapp-slide-radius: 12px;
    padding-top: 10px;
  }

  .yapp-coca-carousel__pagination { margin-top: 10px; }
  .yapp-coca-carousel__dot { width: 7px; height: 7px; }
  .yapp-coca-carousel__dot.is-active { width: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .yapp-coca-carousel__track,
  .yapp-coca-carousel__slide,
  .yapp-coca-carousel__dot {
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   BANNERS EXTRAS (só no celular)
========================================================= */

.banner-mobile {
  display: none;
}

@media (max-width: 767px) {
  .banner-mobile {
    display: block;
    padding: 40px 10px 0;
  }

  .banner-mobile__viewport {
    overflow: hidden;
    border-radius: 20px;
    touch-action: pan-y;
  }

  .banner-mobile__track {
    display: flex;
    transition: transform 500ms ease;
  }

  .banner-mobile__slide {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    border-radius: 20px;
    user-select: none;
    -webkit-user-drag: none;
  }

  .banner-mobile__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }

  .banner-mobile__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #000000;
    opacity: .2;
    cursor: pointer;
  }

  .banner-mobile__dot.is-active {
    opacity: 1;
  }
}


/* =========================================================
   BENEFÍCIOS
========================================================= */

.beneficios {
  margin-top: 130px;
}

/* título e benefícios ficam na frente da mulher que sai do bloco da Limonada */
.beneficios {
  position: relative;
  z-index: 2;
}

/* benefícios (3 em cima, 3 embaixo) à esquerda e foto à direita */
.beneficios__conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  margin-top: 40px;
}

.beneficios__foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* no computador a mesma foto aparece saindo do bloco da Limonada (sabores),
   então aqui ela some mas a coluna continua reservando o espaço */
@media (min-width: 1025px) {
  .beneficios__foto {
    visibility: hidden;
  }
}

@media (max-width: 900px) {
  .beneficios__conteudo {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .beneficios__foto {
    max-width: 520px;
    margin: 0 auto;
  }
}

.beneficios__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 17px;
  margin-top: 40px;
}

.beneficio {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 260px;
  padding: 6px 8px 18px;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .14);
  text-align: center;
}

.beneficio__icone {
  width: var(--icone-l, 55%);
  height: var(--icone-a, 119px);
  max-height: 119px;
  object-fit: contain;
}

.beneficio__icone--vitaminas {
  margin: 26px 0;
}

.beneficio__titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: -14px;
  color: var(--verde-escuro);
  font-family: "Baloo 2", sans-serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 26px;
}

.beneficio__texto {
  margin-top: 22px;
  color: var(--cinza);
  font-family: "Baloo 2", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}

/* o carrossel do celular fica escondido no computador */
.yapp-beneficios-mobile-carousel {
  display: none;
}

@media (max-width: 1024px) {
  .beneficios {
    margin-top: 70px;
  }

  .beneficios__grid {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .beneficio__titulo { font-size: 22px; line-height: 1.1; }
  .beneficio__texto  { font-size: 17px; line-height: 1.1; }
}

@media (max-width: 767px) {
  .beneficios {
    margin-top: 70px;
  }

  .beneficios__grid {
    display: none;
  }

  .yapp-beneficios-mobile-carousel {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    padding: 16px 34px 34px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .yapp-beneficios-mobile-carousel::-webkit-scrollbar {
    display: none;
  }

  .yapp-beneficio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 72%;
    min-width: 72%;
    padding: 26px 18px 24px;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    text-align: center;
    scroll-snap-align: center;
    opacity: .75;
    transform: scale(.92);
    transition: all .28s ease;
  }

  .yapp-beneficio-card.ativo {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
  }

  .yapp-beneficio-card img {
    margin: 0 auto;
    object-fit: contain;
  }

  /* tamanho de cada ícone */
  .icone-acucar     { width: 150px; height: 150px; }
  .icone-fibras     { width: 150px; height: 150px; }
  .icone-vitaminas  { width: 60px;  height: 150px; transform: translateY(25px); }
  .icone-gas        { width: 110px; height: 150px; }
  .icone-probiotico { width: 120px; height: 150px; }

  .yapp-beneficio-card h3 {
    margin-bottom: 18px;
    color: var(--verde-escuro);
    font-family: "Baloo 2", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
  }

  /* altura de cada título (aumente o margin-top para descer o texto) */
  .titulo-acucar     { margin-top: -7px; }
  .titulo-fibras     { margin-top: -7px; }
  .titulo-vitaminas  { margin-top: 60px; }
  .titulo-gas        { margin-top: 10px; }
  .titulo-probiotico { margin-top: 20px; }

  .yapp-beneficio-card p {
    margin: 0;
    color: #54595F;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    line-height: 1.35;
  }
}


/* =========================================================
   SABORES
========================================================= */

.sabores {
  margin-top: 130px;
}

/* ---------- Painéis (computador) ----------
   Um painel fica aberto (fundo colorido, lata grande e texto);
   os outros ficam fechados (foto + nome). Passar o mouse abre outro. */

.sabores-paineis {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 1480px;
  height: 640px;
  margin: 65px auto 0;
  padding: 0 20px;
  container-type: inline-size; /* usado para fixar a largura do conteúdo aberto */
  position: relative;
}

/* mulher em cima do bloco da Limonada: a borda de baixo da foto (onde a calça
   é cortada) encosta no topo do bloco, parecendo que ela sai de dentro dele */
.sabores__mulher {
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 0;
  width: calc(((100cqw - 40px) * .2 + 20px) * 1.8);
  height: auto;
  pointer-events: none;
}

/* o título da seção fica na frente da foto, caso encostem */
.sabores > .container {
  position: relative;
  z-index: 1;
}

.sabor-painel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--fundo, #F5F5F5); /* tom leve da cor do sabor, aberto e fechado */
  cursor: pointer;
  outline: none;
  /* os blocos só começam a mudar de tamanho depois que o texto do bloco fechado sumiu (.15s) */
  transition: flex-grow .6s cubic-bezier(.22, .61, .36, 1) .15s, box-shadow .3s ease;
}

.sabor-painel.is-aberto {
  flex-grow: 3;
  cursor: default;
}

.sabor-painel:focus-visible {
  box-shadow: 0 0 0 3px var(--verde);
}

/* painel fechado */
.sabor-painel__fechado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* lata sempre na mesma altura: o texto quebrar em mais linhas não empurra a lata */
  justify-content: flex-start;
  padding-top: 50px;
  opacity: 1;
  /* ao fechar: o texto só aparece depois que o bloco parou de mudar de tamanho */
  transition: opacity .3s ease .75s;
}

/* ao abrir: some com um fade rápido, antes do bloco começar a se mexer */
.sabor-painel.is-aberto .sabor-painel__fechado {
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.sabor__imagem {
  align-self: center;
  width: auto;
  height: 350px;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .15));
}

.sabor__titulo {
  margin: 24px 0 0 28px;
  font-family: "Spicy Rice", cursive;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.05;
}

.sabor__texto {
  margin: 24px 0 0 28px;
  color: var(--cinza);
  font-family: "Baloo Paaji 2", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
}

/* painel aberto */
.sabor-painel__aberto {
  position: absolute;
  inset: 0;
  /* largura fixa do painel aberto (3 de 5 partes, menos os 2 espaços de 20px):
     o texto não se reorganiza enquanto o bloco abre ou fecha, só aparece/some */
  right: auto;
  width: calc((100cqw - 40px) * .6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: minmax(0, 1fr); /* a linha não cresce com o texto, então a lata não desce */
  align-items: center;
  column-gap: 16px;
  padding: 50px 56px 50px 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.sabor-painel.is-aberto .sabor-painel__aberto {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .45s ease .3s;
}

.sabor-painel__lata-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
}

/* Lata 3D (assets/js/lata-3d.js): quando o modelo carrega (classe .tem-3d) a lata 3D
   substitui as fotos. As fotos continuam no layout (invisíveis) só para marcar
   a posição e o tamanho da lata fechada e aberta. Sem 3D, ficam só as fotos. */
.sabor-painel__lata-3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .16));
}

.sabor-painel.tem-3d .sabor__imagem,
.sabor-painel.tem-3d .sabor-painel__lata {
  visibility: hidden;
  transition: none !important;
}

.sabor-painel.tem-3d .sabor-painel__lata {
  transform: none !important;
}

.sabor-painel__lata {
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: 440px;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .18));
  transform: translateY(50px) rotate(-4deg) scale(.9);
  opacity: 0;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1), opacity .5s ease;
}

.sabor-painel__info {
  opacity: 0;
  transition: opacity .15s ease;
}

.sabor-painel.is-aberto .sabor-painel__lata    { transform: rotate(-14deg); opacity: 1; transition-delay: .4s; }
.sabor-painel.is-aberto .sabor-painel__info    { opacity: 1; transition: opacity .5s ease .5s; }

.sabor-painel__titulo {
  margin: 0 0 24px;
  color: var(--verde-escuro);
  font-family: "Spicy Rice", cursive; /* mesma fonte do nome no bloco fechado */
  font-size: clamp(34px, 4vw, 62px);
  font-weight: 400;
  line-height: 1.08;
}

.sabor-painel__descricao {
  max-width: 420px;
  color: #2B3A33;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  line-height: 1.65;
}

/* botão Loja Oficial: fundo na cor forte do sabor + texto + seta */
.sabor-painel__loja {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--cor, var(--verde-escuro));
  color: #ffffff;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: filter .25s ease, transform .25s ease;
}

.sabor-painel__loja:hover,
.sabor-painel__loja:focus-visible {
  filter: brightness(.92);
  transform: translateY(-2px);
}

.sabor-painel__loja-seta {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.sabor-painel__loja:hover .sabor-painel__loja-seta,
.sabor-painel__loja:focus-visible .sabor-painel__loja-seta {
  transform: translateX(4px);
}

@media (max-width: 1200px) {
  .sabores-paineis { height: 480px; }

  .sabor-painel__aberto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    padding: 32px 30px 32px 16px;
  }

  .sabor-painel__fechado { padding-top: 36px; }

  .sabor-painel__lata { height: 300px; }
  .sabor-painel.tem-3d .sabor-painel__lata { height: 320px; }
  .sabor-painel__descricao { font-size: 14px; }
  .sabor__imagem { height: 240px; }
  .sabor__titulo { font-size: 25px; }
  .sabor__texto { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sabor-painel,
  .sabor-painel * {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

.yapp-sabores-mobile-carousel {
  display: none;
}

/* Tablet e celular: carrossel de cartões no lugar dos painéis */
@media (max-width: 1024px) {
  .sabores {
    margin-top: 70px;
    margin-bottom: 30px;
  }

  .sabores-paineis {
    display: none;
  }

  .yapp-sabores-mobile-carousel {
    display: flex;
    gap: 2px;
    padding: 24px 38px 42px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  .yapp-sabores-mobile-carousel::-webkit-scrollbar {
    display: none;
  }

  .yapp-sabor-card {
    position: relative;
    flex: 0 0 82%;
    min-width: 82%;
    padding: 22px 22px 44px;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
    text-align: left;
    scroll-snap-align: center;
    opacity: .58;
    transform: scale(.86);
    transition: transform .32s ease, opacity .32s ease, box-shadow .32s ease;
    touch-action: pan-x pan-y;
  }

  .yapp-sabor-card.ativo {
    opacity: 1;
    transform: scale(1.04);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  }

  .sabor-img {
    width: 100%;
    height: 340px;
    margin: 0 auto;
    object-fit: contain;
    pointer-events: none;
  }

  .img-limonada { transform: scale(1.22) translateY(18px); }

  .yapp-sabor-card h3 {
    display: flex;
    align-items: flex-end;
    min-height: 60px;
    margin: 8px 0 18px;
    font-family: "Baloo 2", sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.08;
  }

  .titulo-melancia { color: #EF2F4F; }
  .titulo-limonada { color: var(--verde-escuro); transform: translateY(43px); }
  .titulo-manga    { color: #F28C00; }

  .yapp-sabor-card p {
    max-width: 68%;
    min-height: 42px;
    margin: 0;
    color: var(--cinza);
    font-family: "Roboto", sans-serif;
    font-size: 17px;
    line-height: 1.25;
  }

  .texto-limonada { transform: translateY(40px); }

  .sabor-seta {
    position: absolute;
    top: 84%;
    right: 22px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .seta-melancia { color: #EF2F4F; }
  .seta-limonada { color: var(--verde-escuro); }
  .seta-manga    { color: #F28C00; }
}


/* =========================================================
   COMPARTILHE BONS MOMENTOS
========================================================= */

.compartilhe {
  margin-top: 130px;
}

@media (max-width: 1024px) {
  .compartilhe { margin-top: 70px; }
}

/* foto de ponta a ponta da página */
.compartilhe__imagem {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 30px;
}

/* no celular a foto fica mais alta, recortando as laterais e mantendo a moça com a lata */
@media (max-width: 767px) {
  .compartilhe__imagem {
    height: 340px;
    object-fit: cover;
    object-position: 68% center;
  }
}


/* =========================================================
   LIFESTYLE
========================================================= */

.lifestyle {
  margin-top: 130px;
}

@media (max-width: 1024px) {
  .lifestyle { margin-top: 70px; }
}

.lifestyle__grid {
  display: grid;
  grid-template-columns: 1fr 1fr .6fr;
  gap: 40px;
  margin-top: 60px;
}

.lifestyle__video {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 15px;
  background: #eeeeee;
}

.lifestyle__video video {
  width: 102%;
  max-width: 102%;
  height: 102%;
  object-fit: cover;
  transform: translate(-1%, -1%);
}

.lifestyle__fotos {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.lifestyle__fotos img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

@media (max-width: 1024px) {
  .lifestyle__grid { gap: 20px; }
}

@media (max-width: 767px) {
  .lifestyle__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
    padding-left: 10px;
  }

  .lifestyle__video {
    aspect-ratio: 5 / 6;
  }

  .lifestyle__fotos {
    gap: 24px;
  }

  .lifestyle__fotos img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}


/* =========================================================
   EVENTOS - cards
========================================================= */

.eventos {
  margin-top: 125px;
}

.uni-novidades,
.uni-novidades *,
.uni-novidades *::before,
.uni-novidades *::after {
  font-family: "Open Sans", Arial, sans-serif;
}

.uni-novidades {
  width: 100%;
  padding: 35px 24px;
  background: #ffffff;
}

.uni-novidades__container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.uni-novidades__carrossel {
  position: relative;
  width: 100%;
}

.uni-novidades__viewport {
  width: 100%;
  overflow: hidden;
  padding: 4px 0;
}

.uni-novidades__grid {
  display: flex;
  gap: 30px;
  align-items: stretch;
  width: 100%;
  transition: transform .62s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.uni-novidade-card {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  column-gap: 34px;
  align-items: center;
  flex: 0 0 calc((100% - 30px) / 2);
  min-width: 0;
  min-height: 278px;
  padding: 20px;
  border: 1px solid rgba(71, 71, 71, .12);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .035);
  transition: opacity .42s ease, transform .62s cubic-bezier(.22, .61, .36, 1);
}

.uni-novidades__carrossel.is-next .uni-novidades__grid {
  transform: translateX(calc(-100% - 30px));
}

.uni-novidades__carrossel.is-next .uni-novidade-card:nth-child(1),
.uni-novidades__carrossel.is-next .uni-novidade-card:nth-child(2) {
  opacity: .18;
  transform: translateX(-12px) scale(.965);
}

.uni-novidades__navegacao {
  position: absolute;
  top: 50%;
  right: -22px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid var(--verde);
  border-radius: 50%;
  background: #ffffff;
  color: var(--verde);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
  cursor: pointer;
  transform: translateY(-50%);
  transition: left .28s ease, right .28s ease, box-shadow .2s ease;
}

.uni-novidades__navegacao:hover,
.uni-novidades__navegacao:focus {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .09);
}

.uni-novidades__navegacao-seta {
  display: inline-flex;
  width: 15px;
  height: 15px;
}

.uni-novidades__navegacao-seta svg,
.uni-novidade-card__seta svg,
.uni-evento-viewer__voltar-seta svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.uni-novidades__carrossel.is-next .uni-novidades__navegacao {
  left: -22px;
  right: auto;
}

.uni-novidades__carrossel.is-next .uni-novidades__navegacao-seta {
  transform: rotate(180deg);
}

.uni-novidade-card__imagem {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 14px;
  background: #f2f2f2;
}

.uni-novidade-card__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uni-novidade-card__conteudo {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  align-self: stretch;
  min-width: 0;
  min-height: 230px;
  padding: 8px 12px 8px 8px;
}

.uni-novidade-card__titulo {
  margin: 0 0 16px;
  color: var(--cinza-escuro);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.3px;
}

.uni-novidade-card__descricao {
  max-width: 390px;
  padding-bottom: 20px;
  color: var(--cinza-escuro);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

.uni-novidade-card__link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--verde);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.uni-novidade-card__seta {
  display: inline-flex;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  transition: transform .2s ease;
}

.uni-novidade-card__link:hover .uni-novidade-card__seta,
.uni-novidade-card__link:focus .uni-novidade-card__seta {
  transform: translateX(4px);
}

.uni-novidade-card__link:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
}

@media (max-width: 1250px) {
  .uni-novidades__grid { gap: 22px; }

  .uni-novidade-card {
    flex-basis: calc((100% - 22px) / 2);
    min-height: 240px;
    padding: 17px;
    grid-template-columns: 195px minmax(0, 1fr);
    column-gap: 26px;
  }

  .uni-novidades__carrossel.is-next .uni-novidades__grid {
    transform: translateX(calc(-100% - 22px));
  }

  .uni-novidade-card__imagem { width: 195px; height: 195px; }
  .uni-novidade-card__conteudo { min-height: 195px; padding-left: 5px; }
  .uni-novidade-card__titulo { margin-bottom: 13px; font-size: 20px; }
  .uni-novidade-card__descricao { padding-bottom: 16px; font-size: 13px; line-height: 1.65; }
  .uni-novidade-card__link { font-size: 11px; }
}

@media (max-width: 950px) {
  .uni-novidades__viewport {
    max-width: 780px;
    margin: 0 auto;
  }

  .uni-novidades__grid { gap: 18px; }

  .uni-novidade-card {
    flex-basis: 100%;
    min-height: 280px;
    grid-template-columns: 230px minmax(0, 1fr);
    column-gap: 34px;
  }

  .uni-novidades__carrossel.is-next .uni-novidades__grid {
    transform: translateX(calc(-200% - 36px));
  }

  .uni-novidades__navegacao { right: 4px; }
  .uni-novidades__carrossel.is-next .uni-novidades__navegacao { left: 4px; right: auto; }

  .uni-novidade-card__imagem { width: 230px; height: 230px; }
  .uni-novidade-card__conteudo { min-height: 230px; }
  .uni-novidade-card__titulo { font-size: 24px; }
  .uni-novidade-card__descricao { font-size: 15px; }
  .uni-novidade-card__link { font-size: 12px; }
}

@media (max-width: 650px) {
  .uni-novidades { padding: 25px 15px; }

  .uni-novidade-card {
    min-height: 205px;
    padding: 14px;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 18px;
    border-radius: 15px;
  }

  .uni-novidade-card__imagem { width: 150px; height: 150px; border-radius: 12px; }
  .uni-novidade-card__conteudo { min-height: 175px; padding: 3px 0; }
  .uni-novidade-card__titulo { margin-bottom: 10px; font-size: 17px; line-height: 1.35; }
  .uni-novidade-card__descricao { padding-bottom: 13px; font-size: 11px; line-height: 1.55; }
  .uni-novidade-card__link { gap: 7px; font-size: 10px; }
  .uni-novidade-card__seta { width: 10px; height: 10px; }

  .uni-novidades__navegacao { width: 40px; height: 40px; right: 0; }
  .uni-novidades__carrossel.is-next .uni-novidades__navegacao { left: 0; right: auto; }
  .uni-novidades__navegacao-seta { width: 13px; height: 13px; }
}

@media (max-width: 430px) {
  .uni-novidade-card {
    min-height: 175px;
    padding: 12px;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 14px;
  }

  .uni-novidade-card__imagem { width: 120px; height: 120px; }
  .uni-novidade-card__conteudo { min-height: 145px; }
  .uni-novidade-card__titulo { margin-bottom: 8px; font-size: 14px; }
  .uni-novidade-card__descricao { padding-bottom: 10px; font-size: 10px; line-height: 1.5; }
  .uni-novidade-card__link { font-size: 9px; }
  .uni-novidade-card__seta { width: 9px; height: 9px; }
}


/* =========================================================
   EVENTOS - janela "LER MAIS"
========================================================= */

.uni-evento-viewer,
.uni-evento-viewer * {
  font-family: "Open Sans", Arial, sans-serif;
}

.uni-evento-viewer {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 34px 24px;
  background: rgba(20, 70, 51, .14);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.uni-evento-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.uni-evento-viewer-aberto {
  overflow: hidden;
}

.uni-evento-viewer__conteudo {
  position: relative;
  width: min(1080px, 92vw);
  max-height: 82vh;
  padding: 78px 42px 44px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(20, 70, 51, .08);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .16);
  transform: translateY(18px) scale(.985);
  transition: transform .25s ease;
}

.uni-evento-viewer.is-open .uni-evento-viewer__conteudo {
  transform: translateY(0) scale(1);
}

.uni-evento-viewer__topo {
  position: absolute;
  top: calc(9vh + 34px);
  left: 50%;
  z-index: 1000000;
  width: min(1080px, 92vw);
  padding: 0 42px;
  pointer-events: none;
  transform: translateX(-50%);
}

.uni-evento-viewer__voltar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--verde);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: left center;
  transition: transform .2s ease;
}

.uni-evento-viewer__voltar:hover,
.uni-evento-viewer__voltar:focus {
  transform: scale(1.06);
}

.uni-evento-viewer__voltar-seta {
  display: inline-flex;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  transition: transform .2s ease;
}

.uni-evento-viewer__voltar:hover .uni-evento-viewer__voltar-seta,
.uni-evento-viewer__voltar:focus .uni-evento-viewer__voltar-seta {
  transform: translateX(-4px);
}

.uni-evento-pagina__cabecalho {
  max-width: 780px;
  margin: 0 auto 36px;
  text-align: center;
}

.uni-evento-pagina__kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--verde);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .2px;
}

.uni-evento-pagina__titulo {
  margin: 0 0 14px;
  color: var(--verde-escuro);
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.8px;
}

.uni-evento-pagina__intro {
  color: #6d6d6d;
  font-size: 16px;
  line-height: 1.7;
}

.uni-evento-pagina__destaque {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  gap: 34px;
  align-items: center;
  margin-bottom: 46px;
}

.uni-evento-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 30px;
  background: #000000;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .07);
}

.uni-evento-media--video {
  height: 687px;
}

.uni-evento-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* vídeos dos eventos: sem controles, só rodando */
.uni-evento-video {
  pointer-events: none;
}

.uni-evento-video::-webkit-media-controls,
.uni-evento-video::-webkit-media-controls-enclosure,
.uni-evento-video::-webkit-media-controls-panel {
  display: none !important;
}

.uni-evento-pagina__texto h3 {
  margin: 0 0 16px;
  color: var(--verde-escuro);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.4px;
}

.uni-evento-pagina__texto p {
  margin: 0 0 13px;
  color: var(--cinza-escuro);
  font-size: 15px;
  line-height: 1.7;
}

.uni-evento-pagina__texto p:last-child {
  margin-bottom: 0;
}

.uni-evento-galeria__cabecalho {
  margin-bottom: 18px;
}

.uni-evento-galeria__titulo {
  color: var(--verde-escuro);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.2;
}

.uni-evento-galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.uni-evento-galeria--nxfit {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.uni-evento-galeria__item {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 15px;
  background: #f2f2f2;
}

.uni-evento-galeria__item img,
.uni-evento-galeria__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.uni-evento-galeria__item:hover img {
  transform: scale(1.03);
}

@media (max-width: 950px) {
  .uni-evento-viewer { padding: 24px 18px; }

  .uni-evento-viewer__conteudo {
    width: min(760px, 94vw);
    max-height: 86vh;
    padding: 72px 28px 34px;
    border-radius: 24px;
  }

  .uni-evento-viewer__topo {
    top: calc(7vh + 24px);
    width: min(760px, 94vw);
    padding: 0 28px;
  }

  .uni-evento-pagina__cabecalho { margin-bottom: 30px; }

  .uni-evento-pagina__destaque {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 38px;
  }
}

@media (max-width: 650px) {
  .uni-evento-viewer { padding: 14px; }

  .uni-evento-viewer__conteudo {
    width: 100%;
    max-height: 92vh;
    padding: 68px 18px 26px;
    border-radius: 20px;
  }

  .uni-evento-viewer__topo {
    top: 28px;
    width: calc(100% - 28px);
    padding: 0 18px;
  }

  .uni-evento-viewer__voltar { font-size: 11px; }

  .uni-evento-pagina__cabecalho { margin-bottom: 26px; text-align: left; }
  .uni-evento-pagina__kicker { margin-bottom: 10px; font-size: 16px; }
  .uni-evento-pagina__titulo { font-size: 32px; }
  .uni-evento-pagina__intro { font-size: 15px; }
  .uni-evento-pagina__destaque { gap: 22px; margin-bottom: 34px; }

  .uni-evento-media--video { height: 560px; border-radius: 20px; }
  .uni-evento-pagina__texto h3 { font-size: 26px; }

  .uni-evento-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
}


/* =========================================================
   SEJA UM PARCEIRO (chamada + janela com o formulário)
========================================================= */

.parceiro {
  margin-top: 75px;
}

/* ---------- chamada ----------
   ocupa a largura toda da página e o conteúdo vai quase até as laterais;
   textos, botão e latas crescem junto com a largura da tela */
.parceiro-cta {
  --lateral: clamp(24px, 5vw, 110px);
  --lata: clamp(230px, 20vw, 340px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 80px);
  width: 100%;
  min-height: clamp(240px, 22vw, 360px);
  padding: clamp(44px, 4.5vw, 80px) calc(var(--lateral) + var(--lata) * 1.3 + 40px) clamp(44px, 4.5vw, 80px) var(--lateral);
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 30%, rgba(57, 213, 31, .18), transparent 55%),
    linear-gradient(120deg, #F1FAE6 0%, #E4F5D2 100%);
}

.parceiro-cta__titulo {
  color: var(--verde-escuro);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(32px, 4vw, 68px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.parceiro-cta__subtitulo {
  margin-top: clamp(10px, 1vw, 18px);
  color: var(--cinza-escuro);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.4;
}

.parceiro-cta__botao {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: clamp(16px, 1.4vw, 24px) clamp(28px, 2.6vw, 46px);
  border: 0;
  border-radius: 999px;
  background: var(--verde-escuro);
  color: #ffffff;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(20, 70, 51, .25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.parceiro-cta__botao svg,
.form-parceiro__enviar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.parceiro-cta__botao:hover,
.parceiro-cta__botao:focus-visible {
  background: #0E3526;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(20, 70, 51, .3);
}

.parceiro-cta__botao:hover svg,
.parceiro-cta__botao:focus-visible svg {
  transform: translateX(4px);
}

.parceiro-cta__botao:focus-visible,
.form-parceiro__enviar:focus-visible,
.parceiro-modal__fechar:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
}

/* latas decorativas no canto direito */
.parceiro-cta__latas {
  position: absolute;
  right: var(--lateral);
  bottom: calc(var(--lata) * -.16);
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.parceiro-cta__latas img {
  width: auto;
  height: var(--lata);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .15));
}

.parceiro-cta__latas img:nth-child(1) { transform: rotate(-14deg) translate(14%, 4%); }
.parceiro-cta__latas img:nth-child(2) { position: relative; z-index: 1; height: calc(var(--lata) * 1.13); }
.parceiro-cta__latas img:nth-child(3) { transform: rotate(14deg) translate(-14%, 4%); }

/* ---------- janela ---------- */
.parceiro-modal {
  width: min(920px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: transparent;
}

.parceiro-modal::backdrop {
  background: rgba(10, 30, 22, .55);
  backdrop-filter: blur(4px);
}

.parceiro-modal[open] {
  animation: parceiroModalEntra .35s cubic-bezier(.22, .61, .36, 1);
}

.parceiro-modal[open]::backdrop {
  animation: parceiroFundoEntra .35s ease;
}

@keyframes parceiroModalEntra {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes parceiroFundoEntra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.parceiro-modal__caixa {
  position: relative;
  max-height: calc(100dvh - 32px);
  padding: 40px 44px 36px;
  overflow-y: auto;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}

.parceiro-modal__fechar {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #F1F4F2;
  color: var(--verde-escuro);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.parceiro-modal__fechar:hover {
  background: #E2EAE5;
  transform: rotate(90deg);
}

.parceiro-modal__fechar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.parceiro-modal__cabecalho {
  max-width: 560px;
  margin-bottom: 28px;
  font-family: "Open Sans", Arial, sans-serif;
}

.parceiro-modal__kicker {
  color: var(--verde);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
}

.parceiro-modal__titulo {
  margin-top: 6px;
  color: var(--verde-escuro);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
}

.parceiro-modal__intro {
  margin-top: 8px;
  color: var(--cinza);
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- formulário ---------- */
.form-parceiro {
  position: relative;
  font-family: "Open Sans", Arial, sans-serif;
}

.form-parceiro__armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-parceiro__grupo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--verde-escuro);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.form-parceiro__grupo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E3EAE6;
}

.form-parceiro__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin-bottom: 26px;
}

.form-parceiro__grade--tres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.campo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo > label:not(.opcao),
.campo > legend {
  display: block;
  padding: 0 0 7px;
  color: var(--cinza-escuro);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"] {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid #DCE4DF;
  border-radius: 12px;
  background: #F7FAF8;
  color: #1F2B26;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.campo input[type="text"]:hover,
.campo input[type="email"]:hover,
.campo input[type="tel"]:hover {
  border-color: #BFCDC5;
}

.campo input:focus {
  border-color: var(--verde-escuro);
  background: #ffffff;
}

.campo input::placeholder {
  color: #A3ADA8;
}

.campo input[readonly] {
  background: #EEF1EF;
  color: var(--cinza);
  cursor: not-allowed;
}

/* campo preenchido corretamente */
.campo.is-valido input[type="text"],
.campo.is-valido input[type="email"],
.campo.is-valido input[type="tel"] {
  border-color: #7BCB6A;
  padding-right: 40px;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339D51F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
}

.campo.tem-erro input[type="text"],
.campo.tem-erro input[type="email"],
.campo.tem-erro input[type="tel"] {
  border-color: #d63638;
  background: #FFF8F8;
}

.campo__dica {
  display: block;
  margin-top: 6px;
  color: #98A29D;
  font-size: 12px;
  line-height: 1.3;
}

.campo__erro {
  margin-top: 6px;
  color: #d63638;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

/* a mensagem de erro toma o lugar da dica */
.campo.tem-erro .campo__dica {
  display: none;
}

.opcao {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--cinza-escuro);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.opcao input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--verde-escuro);
  cursor: pointer;
}

.opcao--pequena {
  margin-top: 9px;
  font-size: 13px;
}

.opcao--pequena input {
  width: 16px;
  height: 16px;
}

/* segmento: opções em formato de etiqueta */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
  cursor: pointer;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid #DCE4DF;
  border-radius: 12px;
  background: #F7FAF8;
  color: var(--cinza-escuro);
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.chip:hover span {
  border-color: #BFCDC5;
}

.chip input:checked + span {
  border-color: var(--verde-escuro);
  background: var(--verde-escuro);
  color: #ffffff;
}

.chip input:focus-visible + span {
  border-color: var(--verde-escuro);
}

.campo--segmento.tem-erro .chip span {
  border-color: #d63638;
}

.form-parceiro__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid #E3EAE6;
}

.campo--lgpd {
  max-width: 520px;
}

.form-parceiro__enviar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--verde);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(57, 213, 31, .3);
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}

.form-parceiro__enviar:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(57, 213, 31, .35);
}

.form-parceiro__enviar:hover svg {
  transform: translateX(4px);
}

.form-parceiro__enviar:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}

.form-parceiro__mensagem {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.4;
  text-align: right;
}

.form-parceiro__mensagem:empty {
  display: none;
}

.form-parceiro__mensagem.is-sucesso { color: var(--verde-escuro); }
.form-parceiro__mensagem.is-erro    { color: #d63638; }

/* ---------- tela de sucesso ---------- */
.parceiro-modal__sucesso {
  padding: 30px 0 10px;
  font-family: "Open Sans", Arial, sans-serif;
  text-align: center;
}

.parceiro-modal__sucesso[hidden] {
  display: none;
}

.parceiro-modal__sucesso-icone {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #E4F5D2;
  animation: parceiroModalEntra .5s cubic-bezier(.34, 1.56, .64, 1);
}

.parceiro-modal__sucesso-icone svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--verde-escuro);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.parceiro-modal__sucesso h3 {
  color: var(--verde-escuro);
  font-size: 26px;
  font-weight: 600;
}

.parceiro-modal__sucesso p {
  max-width: 380px;
  margin: 8px auto 24px;
  color: var(--cinza);
  font-size: 15px;
  line-height: 1.5;
}

/* com o formulário concluído, some o cabeçalho */
.parceiro-modal.is-enviado .parceiro-modal__cabecalho,
.parceiro-modal.is-enviado .form-parceiro {
  display: none;
}

/* ---------- telas menores ---------- */
@media (max-width: 1024px) {
  .parceiro-cta {
    padding-right: var(--lateral);
  }

  .parceiro-cta__latas {
    display: none;
  }
}

@media (max-width: 860px) {
  .form-parceiro__grade--tres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .parceiro {
    margin-top: 50px;
  }

  .parceiro-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 34px 24px;
  }

  .parceiro-cta__subtitulo {
    font-size: 16px;
  }

  .parceiro-modal__caixa {
    padding: 30px 20px 24px;
  }

  .parceiro-modal__titulo {
    padding-right: 40px;
    font-size: 24px;
  }

  .form-parceiro__grade,
  .form-parceiro__grade--tres {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-parceiro__rodape {
    flex-direction: column;
    align-items: stretch;
  }

  .form-parceiro__enviar {
    justify-content: center;
  }

  .form-parceiro__mensagem {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parceiro-modal[open],
  .parceiro-modal[open]::backdrop,
  .parceiro-modal__sucesso-icone {
    animation: none;
  }
}


/* =========================================================
   RODAPÉ
   Tamanhos, grossuras e cores iguais ao rodapé do site
   Uni Alimentação (UNIALIMENTACAO/assets/css/style.css)
========================================================= */

.site-footer {
  margin-top: 40px;
  border-top: 1px solid #ECE7DE;
  background: #ffffff;
  color: #474747;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.rodape {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 28px;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 48px 0 32px;
}

/* marca: Uni Soluções | YAPP! */
.rodape__marca {
  display: grid;
  gap: 14px;
  align-content: start;
}

.rodape__logos {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}

.rodape__uni {
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 172px;
}

.rodape__uni img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 60px;
  object-fit: contain;
}

.rodape__divisor {
  flex: 0 0 1px;
  width: 1px;
  height: 56px;
  background: currentColor;
  opacity: .35;
}

.rodape__yapp {
  display: inline-block;
  max-width: 138px;
}

.rodape__yapp img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 48px;
  object-fit: contain;
}

.rodape__frase {
  margin: 0;
  max-width: 38ch;
  color: #54595F;
  font-size: .98rem;
  font-weight: 400;
  line-height: 1.55;
}

.rodape__redes {
  display: flex;
  gap: 10px;
}

.rodape__redes a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #E3E3E3;
  border-radius: 50%;
  color: #474747;
  transition: transform .2s ease, color .2s ease;
}

.rodape__redes a:hover,
.rodape__redes a:focus-visible {
  color: #FE0000;
  transform: scale(1.1);
}

.rodape__redes svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* colunas */
.rodape__coluna h4 {
  margin: 0 0 6px;
  color: #474747;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rodape__coluna ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape__coluna a,
.rodape__coluna p,
.rodape__coluna span {
  color: #54595F;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.rodape__coluna a {
  transition: color .2s ease;
}

.rodape__coluna a:hover,
.rodape__coluna a:focus-visible {
  color: #FE0000;
}

.rodape__coluna .rodape__loja {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  color: #FE0000;
  font-weight: 700;
}

.rodape__coluna .rodape__loja:hover,
.rodape__coluna .rodape__loja:focus-visible {
  color: #C80000;
}

.rodape__loja img {
  display: block;
  width: auto;
  height: 20px;
}

.rodape__coluna p {
  margin: 0;
}

.rodape__coluna .rodape__social-titulo {
  margin-top: 14px;
}

.rodape__instituto {
  display: block;
  width: auto;
  height: 37px;
  margin-top: 8px;
}

/* faixa final */
.rodape__base {
  padding: 16px 0;
  border-top: 1px solid #ECE7DE;
}

.rodape__base p {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  color: #54595F;
  font-size: .95rem;
}

@media (max-width: 1024px) {
  .rodape {
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-areas:
      "marca nav contato"
      "marca empresa empresa";
  }

  .rodape__marca                  { grid-area: marca; }
  .rodape__coluna--nav            { grid-area: nav; }
  .rodape__coluna--contato        { grid-area: contato; }
  .rodape__coluna--empresa        { grid-area: empresa; }
}

@media (max-width: 700px) {
  .rodape {
    grid-template-columns: 1fr;
    grid-template-areas:
      "marca"
      "nav"
      "contato"
      "empresa";
  }
}


/* =========================================================
   FAIXA DE DESTAQUES NUTRICIONAIS (fim da página)
========================================================= */

.yapp-beneficios,
.yapp-beneficios * {
  font-family: "Open Sans", Arial, sans-serif;
}

.yapp-beneficios {
  width: 100%;
  padding: 10px 0;
}

/* grade 3 x 2 */
.yapp-beneficios__container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  row-gap: 44px;
  width: 100%;
  margin: 0 auto;
}

.yapp-beneficios__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 65px;
  padding: 5px 14px;
  text-align: center;
}

/* bolinha verde separadora (não aparece no fim de cada linha) */
.yapp-beneficios__item:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #79D600;
  transform: translate(50%, -50%);
}

.yapp-beneficios__pre,
.yapp-beneficios__pos {
  display: block;
  color: var(--cinza-escuro);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.15;
  text-transform: uppercase;
}

.yapp-beneficios__pre { margin-bottom: 2px; }
.yapp-beneficios__pos { margin-top: 2px; }

.yapp-beneficios__destaque {
  display: block;
  color: var(--verde-escuro);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.4px;
  text-transform: uppercase;
}

.yapp-beneficios__destaque--grande     { font-size: 25px; }
.yapp-beneficios__destaque--vitaminas  { font-size: 16px; }
.yapp-beneficios__destaque--natural    { font-size: 14px; }

.yapp-beneficios__pos--medio {
  font-size: 12.5px;
  font-weight: 500;
}

/* itens maiores (todos menos INGREDIENTES NATURAIS) */
.yapp-beneficios__item--maior .yapp-beneficios__pre,
.yapp-beneficios__item--maior .yapp-beneficios__pos                { font-size: 16px; }
.yapp-beneficios__item--maior .yapp-beneficios__destaque           { font-size: 31px; }
.yapp-beneficios__item--maior .yapp-beneficios__destaque--grande   { font-size: 43px; }
.yapp-beneficios__item--maior .yapp-beneficios__destaque--vitaminas { font-size: 27px; }
.yapp-beneficios__item--maior .yapp-beneficios__pos--medio         { font-size: 21px; }

.yapp-beneficios__pos--natural {
  color: var(--verde-escuro);
  font-size: 12px;
  font-weight: 600;
}

/* INGREDIENTES NATURAIS também maior, mas cabendo na coluna */
.beneficios__faixa .yapp-beneficios__item:not(.yapp-beneficios__item--maior) .yapp-beneficios__pre { font-size: 14px; }
.beneficios__faixa .yapp-beneficios__destaque--natural { font-size: 20px; }
.beneficios__faixa .yapp-beneficios__pos--natural      { font-size: 17px; }

.beneficios__faixa .yapp-beneficios__container { row-gap: 56px; }
.beneficios__faixa .yapp-beneficios__item      { min-height: 100px; }

@media (max-width: 1200px) {
  .yapp-beneficios__container { row-gap: 32px; }
  .beneficios__faixa .yapp-beneficios__container { row-gap: 40px; }
  .yapp-beneficios__item--maior .yapp-beneficios__destaque           { font-size: 26px; }
  .yapp-beneficios__item--maior .yapp-beneficios__destaque--grande   { font-size: 36px; }
  .yapp-beneficios__item--maior .yapp-beneficios__destaque--vitaminas { font-size: 22px; }
}

@media (max-width: 520px) {
  .yapp-beneficios { padding: 6px 0; }
  .yapp-beneficios__container { row-gap: 20px; }
  .yapp-beneficios__item { min-height: 58px; padding: 4px 6px; }
  .yapp-beneficios__item:not(:nth-child(3n))::after { width: 4px; height: 4px; }
  .yapp-beneficios__pre, .yapp-beneficios__pos { font-size: 8.5px; }
  .yapp-beneficios__destaque { font-size: 15px; }
  .yapp-beneficios__destaque--grande { font-size: 21px; }
  .yapp-beneficios__destaque--vitaminas { font-size: 13px; }
  .yapp-beneficios__destaque--natural { font-size: 12px; }
  .yapp-beneficios__pos--medio { font-size: 11px; }
  .yapp-beneficios__pos--natural { font-size: 10px; }
  .yapp-beneficios__item--maior .yapp-beneficios__pre,
  .yapp-beneficios__item--maior .yapp-beneficios__pos                { font-size: 11px; }
  .yapp-beneficios__item--maior .yapp-beneficios__destaque           { font-size: 20px; }
  .yapp-beneficios__item--maior .yapp-beneficios__destaque--grande   { font-size: 27px; }
  .yapp-beneficios__item--maior .yapp-beneficios__destaque--vitaminas { font-size: 17px; }
  .yapp-beneficios__item--maior .yapp-beneficios__pos--medio         { font-size: 14px; }
  .beneficios__faixa .yapp-beneficios__item:not(.yapp-beneficios__item--maior) .yapp-beneficios__pre { font-size: 10px; }
  .beneficios__faixa .yapp-beneficios__destaque--natural { font-size: 13px; }
  .beneficios__faixa .yapp-beneficios__pos--natural      { font-size: 11px; }
  .beneficios__faixa .yapp-beneficios__container { row-gap: 24px; }
  .beneficios__faixa .yapp-beneficios__item      { min-height: 70px; }
}


/* =========================================================
   BOTÃO FLUTUANTE DO WHATSAPP
========================================================= */

.whatsapp-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform .3s ease;
}

.whatsapp-flutuante:hover {
  transform: scale(1.08);
}

.whatsapp-flutuante svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}


/* =========================================================
   ANIMAÇÕES AO ROLAR A PÁGINA
========================================================= */

.js-anim .revelar:not(.is-visivel) {
  opacity: 0;
}

.revelar--fade.is-visivel {
  animation: yappFadeIn 1.25s ease both;
}

.revelar--zoom.is-visivel {
  animation: yappZoomIn 1.25s ease both;
}

/* grow: os itens de dentro crescem um por vez */
.revelar--grow.is-visivel > * > * {
  animation: yappGrow 1.1s cubic-bezier(.34, 1.56, .64, 1) both;
}

.revelar--grow.is-visivel > * > :nth-child(2) { animation-delay: .35s; }
.revelar--grow.is-visivel > * > :nth-child(3) { animation-delay: .7s; }
.revelar--grow.is-visivel > * > :nth-child(4) { animation-delay: 1.05s; }
.revelar--grow.is-visivel > * > :nth-child(5) { animation-delay: 1.4s; }
.revelar--grow.is-visivel > * > :nth-child(6) { animation-delay: 1.75s; }

@keyframes yappGrow {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* escrita: letras aparecem uma por vez */
.digitar__leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.digitar__palavra {
  white-space: nowrap;
}

.digitar__letra {
  position: relative;
  white-space: pre;
}

.is-digitando .digitar__letra {
  opacity: 0;
}

.is-digitando .digitar__letra.is-visivel {
  opacity: 1;
}

@keyframes yappFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes yappZoomIn {
  from { opacity: 0; transform: scale3d(.3, .3, .3); }
  50%  { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .revelar.is-visivel,
  .revelar--grow.is-visivel > * > * {
    animation: none;
  }
}