/* =============================================================================
   components.css — peças reutilizadas nos dois breakpoints.

   Só entra aqui o que é idêntico em desktop e mobile. Tamanhos e posições que
   mudam por breakpoint ficam em desktop.css / mobile.css.
   ============================================================================= */

/* ----- CTA laranja --------------------------------------------------------- */

.cta {
  /* Tamanho do ícone: por padrão igual ao corpo do rótulo (21px). */
  --cta-icon: 1.3125rem;

  display: flex;
  height: 3.6875rem;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.5rem 2rem;
  border-radius: var(--r-cta);
  background-color: var(--c-orange);
  /* O ícone é irmão do rótulo, então não herda a cor de .cta__label. */
  color: var(--c-white);

  /* O brilho que atravessa o botão no hover mora no background, que é clipado
     pela border-box. Assim nada precisa de overflow:hidden — o rótulo é nowrap
     e não pode correr o risco de ser cortado. */
  background-image: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0.3) 46%,
    rgba(255, 255, 255, 0) 60%
  );
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: 170% 0;

  transition:
    background-position 0.6s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.cta__icon {
  font-size: var(--cta-icon);
  line-height: 1;
  flex-shrink: 0;
}

.cta__label {
  font-family: var(--font-poppins);
  font-weight: 800;
  font-style: normal;
  font-size: 1.3125rem;
  line-height: 1.75rem;
  letter-spacing: 0.03rem;
  color: var(--c-white);
  white-space: nowrap;
}

/* Variante mais baixa, usada na seção "O que é".
   O projeto original pedia px-24 aqui, mas a classe perdia para o px-32 do
   botão base na ordem da folha do Tailwind — ou seja, nunca teve efeito.
   Mantemos os 32px, que é o que a página realmente renderiza hoje. */
.cta--compact {
  height: auto;
}

/* O rótulo desta variante é 18px; o ícone acompanha. */
.cta--compact {
  --cta-icon: 1.125rem;
}

/* Roboto em peso 800 sem face real: negrito sintético, igual ao original. */
.cta__label--roboto {
  font-family: var(--font-roboto);
  font-weight: 800;
  font-size: 1.125rem;
}

@media (hover: hover) {
  .cta:hover {
    background-color: #ff6f12;
    background-position: -70% 0;
    transform: translateY(-0.1875rem);
    box-shadow: 0 0.75rem 1.5rem rgba(240, 98, 9, 0.38);
  }
}

.cta:active {
  transform: translateY(0);
  box-shadow: 0 0.1875rem 0.5rem rgba(240, 98, 9, 0.3);
  transition-duration: 0.08s;
}

.cta:focus-visible {
  outline: 3px solid var(--c-teal);
  outline-offset: 0.1875rem;
}

/* ----- Botão flutuante do WhatsApp ----------------------------------------
   Medidas em px de propósito: é cromo de interface, não faz parte do canvas do
   Figma, então não deve encolher junto com a escala proporcional da página.
   -------------------------------------------------------------------------- */

.wa-float {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 100;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  font-size: 32px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition:
    background-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Anel que pulsa atrás do botão. z-index negativo dentro do próprio contexto
   de empilhamento: só a parte que ultrapassa o círculo aparece. */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background-color: #25d366;
  animation: wa-pulse 2.6s ease-out infinite;
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

@media (hover: hover) {
  .wa-float:hover {
    background-color: #1fbe5a;
    transform: scale(1.09);
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.5);
  }
  .wa-float:hover::before {
    animation-play-state: paused;
  }
}

.wa-float:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}

.wa-float:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .wa-float {
    right: 14px;
    width: 54px;
    height: 54px;
    font-size: 29px;
  }
}

/* ----- Movimento reduzido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cta,
  .wa-float,
  .journey__marker {
    transition-duration: 0.01ms;
  }
  .cta:hover,
  .cta:active,
  .wa-float:hover,
  .wa-float:active,
  .journey__step:hover .journey__marker,
  .benefits__item:hover .benefits__icon,
  .card:hover .card__dot {
    transform: none;
  }
  .wa-float::before {
    animation: none;
  }
}

/* ----- Preloader ----------------------------------------------------------
   Cobre a página enquanto as imagens carregam e some no `window.load` (a lógica
   de esconder está em motion.js). Gated por `.js`: a regra base é `display:none`,
   então SEM JavaScript ele nunca aparece — a página abre inteira, igual ao resto
   do progressive enhancement. Chrome de interface, medido em px (fora do canvas
   do Figma, como o .wa-float). O fundo é o mesmo `--gradient-top` do hero, então
   o fade revela exatamente a mesma cor embaixo — sem salto. */

.preloader {
  display: none;
}

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 1000; /* acima de tudo, inclusive o .wa-float (100) */
  display: grid;
  place-items: center;
  background: var(--gradient-top);
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.preloader__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.preloader__logo {
  width: 172px;
  height: auto;
  animation: preloader-logo 2.4s ease-in-out infinite;
}

/* Anel de marca: arco em gradiente laranja->teal com uma folga transparente,
   recortado num anel fino de 4px por um mask radial, girando. */
.preloader__ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      var(--c-orange), var(--c-teal) 250deg, transparent 250deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 calc(100% - 4px));
  animation: preloader-spin 0.9s linear infinite;
}

/* Estado de saída, adicionado pelo motion.js quando a página termina de carregar. */
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes preloader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes preloader-logo {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.78;
    transform: scale(0.97);
  }
}

/* Movimento reduzido: o logo fica parado e o anel troca o giro por um pulso de
   opacidade (sem rotação); o fade de saída fica quase instantâneo. */
@media (prefers-reduced-motion: reduce) {
  .preloader__logo {
    animation: none;
  }
  .preloader__ring {
    animation: preloader-pulse 1.3s ease-in-out infinite;
  }
  .js .preloader {
    transition-duration: 0.01ms;
  }
}

@keyframes preloader-pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* ----- Cartões de preço do hero -------------------------------------------
   Dois boxes lado a lado. O primeiro (unidade) leva o sotaque teal do preço
   original; o segundo (6 unidades) é o destaque — sotaque laranja, badge e uma
   sombra um pouco mais forte. Mesma linguagem dos cards da página: fundo
   branco, cantos --r-card, borda fina e sombra suave. Tamanhos (fontes,
   paddings, gaps) vivem em desktop.css/mobile.css; aqui fica só a estrutura, a
   cor e o comportamento. A entrada de hero anima a linha inteira (.hero__prices,
   em motion.css), então o hover pode usar `transform` sem conflito. */

.hero__prices {
  display: flex;
  align-items: stretch; /* os dois boxes ficam com a mesma altura */
}

.price-card {
  position: relative;
  display: flex;
  flex: 0 0 auto; /* cada box só a largura do próprio conteúdo, sem esticar */
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-card);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
  transition:
    transform 0.3s cubic-bezier(0.22, 0.75, 0.3, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.price-card--featured {
  border-color: var(--c-orange);
  box-shadow: 0 0.75rem 1.75rem rgba(240, 98, 9, 0.18);
}

@media (hover: hover) {
  .price-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12);
  }
  .price-card--featured:hover {
    box-shadow: 0 1rem 2.25rem rgba(240, 98, 9, 0.26);
  }
}

@media (prefers-reduced-motion: reduce) {
  .price-card {
    transition-duration: 0.01ms;
  }
  .price-card:hover {
    transform: none;
  }
}

/* Pill de destaque, meia altura para fora da borda de cima. */
.price-card__badge {
  position: absolute;
  top: 0;
  translate: 0 -50%;
  border-radius: 9999px;
  background-color: var(--c-orange);
  color: var(--c-white);
  font-family: var(--font-poppins);
  font-weight: 800;
  font-style: normal;
  white-space: nowrap;
  box-shadow: 0 0.25rem 0.625rem rgba(240, 98, 9, 0.3);
}

.price-card__amount {
  display: flex;
  align-items: baseline;
  font-family: var(--font-poppins);
  line-height: 1;
  color: var(--c-teal);
}

.price-card--featured .price-card__amount {
  color: var(--c-orange);
}

.price-card__cur {
  font-weight: 800;
}

.price-card__val {
  font-weight: 900;
}

.price-card__unit {
  font-family: var(--font-poppins);
  font-weight: 400;
  font-style: normal;
  color: var(--c-muted);
}

/* ----- Card com borda laranja (seção "Por que escolher") ------------------- */

.card {
  position: relative;
  display: flex;
  width: 100%;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5625rem 1.875rem;
  border-radius: var(--r-benefit);
}

.card__border {
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-orange);
  border-radius: var(--r-benefit);
  pointer-events: none;
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background-color 0.28s ease;
}

/* O realce do hover é sombra e cor, sem `transform`: a animação de entrada do
   card usa fill `both`, e o valor final dela venceria um transform aqui. */
@media (hover: hover) {
  .card:hover .card__border {
    border-color: var(--c-orange);
    background-color: rgba(240, 98, 9, 0.04);
    box-shadow: 0 0.625rem 1.75rem rgba(240, 98, 9, 0.16);
  }
  .card:hover .card__dot {
    transform: scale(1.12);
  }
}

.card__dot {
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.card__dot {
  display: block;
  width: 2.875rem;
  height: 2.875rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--c-orange);
}

.card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0;
}

/* Roboto em peso 900 sem face real: negrito sintético, igual ao original. */
.card__title {
  font-family: var(--font-roboto);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.96875rem;
  color: var(--c-green);
  font-variation-settings: "wdth" 100;
}

.card__desc {
  font-family: var(--font-poppins);
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: var(--c-text);
}

/* ----- Linha do tempo da jornada (ANTES / DURANTE / DEPOIS) ----------------
   Cada etapa carrega a sua cor em --stage, e marcador, rótulo e conector a
   consomem. Trocar a cor de uma etapa é mudar uma linha só.
   -------------------------------------------------------------------------- */

.journey__step--antes   { --stage: var(--c-teal); }
.journey__step--durante { --stage: var(--c-orange); }
.journey__step--depois  { --stage: var(--c-green); }

.journey__title {
  font-family: var(--font-poppins);
  font-weight: 400;
  font-style: normal;
  color: var(--c-text);
}

.journey__title-em {
  font-family: var(--font-poppins);
  font-weight: 800;
  color: var(--c-teal);
}

.journey__track {
  position: relative;
}

.journey__steps {
  display: grid;
}

.journey__step {
  position: relative;
  display: flex;
}

/* O marcador precisa ser posicionado e opaco: o trilho passa por trás dele. */
.journey__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 2px solid var(--stage);
  background-color: var(--c-white);
  background-color: color-mix(in srgb, var(--stage) 8%, #fff);
  color: var(--stage);
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.journey__icon {
  display: block;
  height: auto;
}

.journey__stage {
  font-family: var(--font-poppins);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  color: var(--stage);
  transition: letter-spacing 0.28s ease;
}

.journey__desc {
  font-family: var(--font-poppins);
  font-weight: 400;
  font-style: normal;
  color: var(--c-text);
}

@media (hover: hover) {
  .journey__step:hover .journey__marker {
    background-color: var(--stage);
    color: var(--c-white);
    transform: translateY(-0.5rem) scale(1.05);
    box-shadow: 0 0.875rem 1.75rem color-mix(in srgb, var(--stage) 38%, transparent);
  }
}

/* A revelação ao rolar desta seção vive em motion.css, junto com o
   restante das animações da página. */

/* ----- Molduras de imagem com canto arredondado --------------------------- */

.about__card-clip,
.why__figure-clip {
  position: absolute;
  inset: 0;
  overflow: clip;
  border-radius: var(--r-card);
}

.about__card-border,
.why__figure-border {
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  border: 1px solid var(--c-border-soft);
}

.why__figure-border {
  border-color: var(--c-border-softer);
}

/* Zoom suave na foto ao passar o mouse. O recorte arredondado já existe, então
   o excesso é aparado pela moldura — nada vaza e o layout não se mexe. */
.about__photo,
.why__photo {
  transition: transform 0.5s cubic-bezier(0.22, 0.75, 0.3, 1);
}

@media (hover: hover) {
  .about__card:hover .about__photo,
  .why__figure:hover .why__photo {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about__photo,
  .why__photo {
    transition: none;
  }
  .about__card:hover .about__photo,
  .why__figure:hover .why__photo {
    transform: none;
  }
}

/* ----- Blocos de benefício da seção laranja ------------------------------- */

.benefits__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* O disco cinza é o do desenho original; o ícone entrou dentro dele, sem
   mexer na caixa — mesmo tamanho, mesma posição. */
.benefits__icon {
  display: grid;
  place-items: center;
  width: 6.8125rem;
  height: 6.8125rem;
  border-radius: 9999px;
  background-color: var(--c-circle);
  color: var(--c-teal-dark);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.3s ease;
}

.benefits__icon-art {
  width: 3.375rem;
  height: auto;
  stroke-width: 1.6;
}

@media (hover: hover) {
  .benefits__item:hover .benefits__icon {
    background-color: var(--c-white);
    color: var(--c-orange);
    transform: translateY(-0.375rem) scale(1.06);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
  }
}

/* ----- Setas desenhadas à mão (seção "Como ajudar") -----------------------
   Camada única sobre a seção inteira, no sistema de coordenadas do canvas.
   Fica sob o conteúdo (.benefits__inner é posicionado) e acima do fundo.
   -------------------------------------------------------------------------- */

.benefits__arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  stroke: var(--c-white);
  opacity: 0.72;
}

.benefits__arrow-line,
.benefits__arrow-head {
  fill: none;
  stroke: inherit;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefits__item-title {
  font-family: var(--font-poppins);
  font-weight: 800;
  font-style: normal;
  font-size: 1.75rem;
  line-height: 2.45rem;
  color: var(--c-teal-dark);
}

.benefits__item-desc {
  font-family: var(--font-roboto);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: var(--c-white);
  font-variation-settings: "wdth" 100;
}

/* ----- Seção da oferta: marcadores e preços ------------------------------- */

.offer__dot {
  position: absolute;
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: var(--c-white);
}

.offer__price {
  position: absolute;
  font-family: var(--font-poppins);
  font-weight: 400;
  font-style: normal;
  color: var(--c-white);
  white-space: nowrap;
  line-height: 0;
  translate: 0 -50%;
}

.offer__price-row {
  white-space: pre;
}

.offer__cur {
  font-size: 1.5rem;
  line-height: 3.75rem;
}

.offer__val {
  font-family: var(--font-poppins);
  font-weight: 900;
  font-size: 3rem;
  line-height: 3.75rem;
}

.offer__val--lg {
  font-size: 3.875rem;
}

.offer__unit {
  display: block;
  font-size: 1.5rem;
  line-height: 2rem;
}