/* =============================================================================
   desktop.css — canvas de 1920px (Figma "1920Px").

   Todas as medidas são as do Figma. As seções de arte (hero, "Como ajudar",
   oferta) são telas de tamanho fixo com filhos absolutos, porque os elementos
   se sobrepõem — flex/grid não expressa isso. As seções de conteúdo
   ("O que é", "Por que escolher") usam flex de verdade.
   ============================================================================= */

@media (min-width: 1024px) {

  /* O canvas ocupa a largura disponível e nunca passa das 120rem desenhadas.
     Acima de 1920px de viewport ele para de crescer e fica centralizado. */
  .page {
    width: 100%;
    max-width: 120rem;
    margin-inline: auto;
  }

  /* ======================= HERO ======================= */

  .hero {
    position: relative;
    height: 61.5625rem;
    width: 120.3125rem;
    flex-shrink: 0;
    overflow: clip;
    /* Sobe todo o conteúdo do hero em 5% da altura da seção (3.078125rem).
       A altura da seção NÃO muda, então o layout abaixo fica no lugar; só os
       filhos absolutos abaixo subtraem este valor do seu `top` do Figma.
       Só no desktop — o mobile mantém as medidas originais. */
    --hero-lift: 3.078125rem;
  }

  .hero__wordmark {
    position: absolute;
    left: calc(50% - 42.84375rem);
    top: calc(20.9375rem - var(--hero-lift));
    translate: 0 -50%;
    font-family: var(--font-poppins);
    font-weight: 900;
    font-style: normal;
    font-size: 19.0625rem;
    line-height: 4.2rem;
    letter-spacing: -0.5rem;
    color: var(--c-orange);
    white-space: nowrap;
  }

  .hero__logo {
    position: absolute;
    left: 18.125rem;
    top: calc(5.6875rem - var(--hero-lift));
    width: 15.875rem;
    height: 5.375rem;
    object-fit: contain;
  }

  .hero__copy {
    position: absolute;
    left: 18.0625rem;
    top: calc(30.5rem - var(--hero-lift));
    display: flex;
    width: 36.625rem;
    flex-direction: column;
    gap: 1.6875rem;
    align-items: flex-start;
  }

  .hero__intro {
    display: flex;
    flex-direction: column;
    gap: 1.1875rem;
    align-items: flex-start;
    width: 100%;
    line-height: 0;
  }

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

  .hero__headline-a {
    display: block;
    font-size: 2.625rem;
    line-height: 3.75rem;
  }

  .hero__headline-b {
    display: block;
    font-family: var(--font-poppins);
    font-weight: 800;
    font-size: 3.0625rem;
    line-height: 3.75rem;
    color: var(--c-teal);
    text-transform: uppercase;
  }

  .hero__prices {
    gap: 1rem;
  }

  .price-card {
    gap: 0.25rem;
    padding: 1.25rem 1.5rem;
  }

  .price-card__badge {
    right: 1.25rem;
    padding: 0.25rem 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
  }

  .price-card__amount {
    gap: 0.25rem;
  }

  .price-card__cur {
    font-size: 1.375rem;
  }

  .price-card__val {
    font-size: 2.75rem;
  }

  .price-card__unit {
    margin-top: 0.125rem;
    font-size: 1.0625rem;
    line-height: 1.375rem;
  }

  .hero__cta {
    min-width: 24.1875rem;
  }

  /* O frasco é o quadro 470.359x855.432 do Figma com a arte de 412x828
     centralizada e girada — resolvido aqui em um único elemento. */
  .hero__bottle {
    position: absolute;
    left: 56.511219rem;
    top: calc(7.37475rem - var(--hero-lift));
    width: 25.75rem;
    height: 51.75rem;
    object-fit: cover;
    rotate: 4.12deg;
    filter: drop-shadow(1.5rem 1.125rem 2.5rem rgba(0, 0, 0, 0.2));
  }

  .hero__orange {
    position: absolute;
    left: 69.375rem;
    top: calc(26.375rem - var(--hero-lift));
    width: 31.875rem;
    height: 29.875rem;
    object-fit: cover;
    filter: drop-shadow(0.6875rem 0.4375rem 1.44375rem rgba(0, 0, 0, 0.1));
  }

  /* ======================= O QUE É ======================= */

  .about {
    display: flex;
    width: 120rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 3.125rem;
    padding: 6.25rem 12.5rem;
  }

  .about__media {
    position: relative;
    flex-shrink: 0;
  }

  .about__card {
    position: relative;
    height: 33.25rem;
    width: 34.5625rem;
    border-radius: var(--r-card);
  }

  .about__photo {
    position: absolute;
    top: 0;
    left: -37.02%;
    height: 100%;
    width: 144.3%;
    max-width: none;
    object-fit: cover;
  }

  .about__slice {
    position: absolute;
    left: 20.6875rem;
    top: 20.6875rem;
    height: 15.375rem;
    width: 17.625rem;
    object-fit: cover;
  }

  .about__content {
    display: flex;
    height: 34.625rem;
    width: 41.75rem;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-inline: 1.25rem;
  }

  .about__stack {
    display: flex;
    flex-direction: column;
    gap: 2.1875rem;
    align-items: flex-start;
    padding-bottom: 0.9375rem;
    width: 100%;
  }

  .about__text {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    align-items: flex-start;
  }

  .about__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 0.9375rem;
    padding-right: 0.625rem;
    width: 39.25rem;
    line-height: 0;
  }

  .about__title {
    font-family: var(--font-poppins);
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    line-height: 4.2rem;
    color: var(--c-text);
  }

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

  .about__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
    padding-right: 1.5rem;
    padding-top: 0.25rem;
    width: 39.25rem;
    font-family: var(--font-roboto);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 0;
    color: var(--c-muted);
    font-variation-settings: "wdth" 100;
  }

  .about__body p {
    line-height: 1.96875rem;
  }

  /* ======================= COMO AJUDAR ======================= */

  .benefits {
    position: relative;
    height: 74.375rem;
    width: 120rem;
    flex-shrink: 0;
    overflow: clip;
  }

  .benefits__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
  }

  /* Coordenadas já somadas ao deslocamento da camada de conteúdo (265 / 120). */
  .benefits__title {
    position: absolute;
    left: 33.9375rem;
    top: 7.5rem;
    text-align: center;
    line-height: 5.125rem;
    color: var(--c-white);
    white-space: nowrap;
  }

  /* Sem família própria no projeto original: cai na pilha do sistema.
     Ver relatório — provável engano de origem, preservado por fidelidade. */
  .benefits__title-a {
    font-family: var(--font-system);
    font-size: 3.5rem;
  }

  .benefits__title-em {
    font-family: var(--font-poppins);
    font-weight: 800;
    font-size: 3.5rem;
  }

  .benefits__title-b {
    font-family: var(--font-poppins);
    font-weight: 800;
    font-size: 4.6875rem;
    text-transform: uppercase;
  }

  .benefits__photo {
    position: absolute;
    left: 41.8125rem;
    top: 13.75rem;
    height: 64.125rem;
    width: 35.8125rem;
    object-fit: cover;
    pointer-events: none;
  }

  .benefits__item {
    position: absolute;
    width: 25rem;
  }

  .benefits__item--1 { left: 16.5625rem; top: 24rem; }
  .benefits__item--2 { left: 16.5625rem; top: 46.25rem; }
  .benefits__item--3 { left: 78.25rem; top: 24.625rem; }
  .benefits__item--4 { left: 78.25rem; top: 46.875rem; }

  .benefits__item-title {
    white-space: nowrap;
  }

  .benefits__item-desc {
    width: 24.3125rem;
  }

  /* ======================= POR QUE ESCOLHER ======================= */

  .why {
    display: flex;
    width: 120rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    padding: 9.375rem 12.5rem;
  }

  .why__figure {
    position: relative;
    height: 50.75rem;
    width: 38.125rem;
    flex-shrink: 0;
    border-radius: var(--r-card);
  }

  .why__photo {
    position: absolute;
    top: -7.21%;
    left: 0;
    height: 112.75%;
    width: 100%;
    max-width: none;
    object-fit: cover;
  }

  .why__content {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    padding-inline: 1.25rem;
  }

  .why__stack {
    display: flex;
    width: 41rem;
    flex-direction: column;
    gap: 1.5625rem;
    align-items: flex-start;
  }

  .why__title {
    width: 40.75rem;
    font-family: var(--font-poppins);
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    line-height: 4.2rem;
    color: var(--c-text);
  }

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

  .why__cards {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.9375rem;
    align-items: flex-start;
  }

  .card__body {
    width: 33.125rem;
  }

  .why__closing {
    width: 100%;
    font-family: var(--font-poppins);
    font-weight: 800;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--c-text);
  }

  /* ======================= JORNADA (LINHA DO TEMPO) ======================= */

  /* Sem padding no topo: os 9.375rem inferiores de .why já são o respiro entre
     as duas seções. */
  .journey {
    width: 120rem;
    flex-shrink: 0;
    padding: 0 12.5rem 9.375rem;
  }

  /* 86.625rem centrados em uma caixa de 95rem dão exatamente a mesma margem
     lateral do conteúdo de "Por que escolher" (x = 267px em 1920). */
  .journey__inner {
    max-width: 86.625rem;
    margin-inline: auto;
  }

  .journey__title {
    max-width: 55rem;
    margin-inline: auto;
    text-align: center;
    font-size: 2.75rem;
    line-height: 3.5rem;
  }

  .journey__track {
    margin-top: 4.375rem;
  }

  /* O trilho vai do centro da primeira etapa ao centro da última. Com o gap
     entre colunas, esse centro NÃO é 1/6 da largura: cada coluna mede
     (100% - 2*gap)/3, então o centro da primeira fica em (100% - 5rem)/6. */
  .journey__rail {
    position: absolute;
    left: calc((100% - 5rem) / 6);
    right: calc((100% - 5rem) / 6);
    top: 3.5rem;
    height: 0.1875rem;
    translate: 0 -50%;
    border-radius: 9999px;
    background-color: var(--c-border-soft);
    /* `clip` pelo mesmo motivo de .page: não pode virar contêiner de rolagem. */
    overflow: clip;
  }

  .journey__rail-fill {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    transform-origin: left center;
    background-image: linear-gradient(
      90deg,
      var(--c-teal) 0%,
      var(--c-orange) 50%,
      var(--c-green) 100%
    );
  }

  .journey__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .journey__step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .journey__marker {
    width: 7rem;
    height: 7rem;
  }

  .journey__icon {
    width: 3rem;
    stroke-width: 1.6;
  }

  .journey__stage {
    margin-top: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.5rem;
    letter-spacing: 0.125rem;
  }

  .journey__desc {
    margin-top: 0.75rem;
    max-width: 19rem;
    font-size: 1.375rem;
    line-height: 1.875rem;
  }

  @media (hover: hover) {
    .journey__step:hover .journey__stage {
      letter-spacing: 0.1875rem;
    }
  }

  /* ======================= MELHOR VERSÃO / OFERTA ======================= */

  .offer {
    position: relative;
    height: 59.4375rem;
    width: 120.3125rem;
    flex-shrink: 0;
  }

  .offer__bg-clip {
    position: absolute;
    inset: 0;
    overflow: clip;
    pointer-events: none;
  }

  .offer__bg {
    position: absolute;
    top: -0.03%;
    left: 0.04%;
    height: 121.55%;
    width: 100%;
    max-width: none;
    object-fit: cover;
  }

  .offer__bottles {
    position: absolute;
    left: calc(50% + 2.28125rem);
    top: 7.5rem;
    height: 45.3125rem;
    width: 39.125rem;
    translate: -50% 0;
    object-fit: cover;
    pointer-events: none;
  }

  .offer__orange {
    position: absolute;
    left: 63.6875rem;
    top: 33.125rem;
    height: 19.125rem;
    width: 19.8125rem;
    object-fit: cover;
    pointer-events: none;
  }

  .offer__title {
    position: absolute;
    left: 18.5625rem;
    top: 23.71875rem;
    width: 44.875rem;
    translate: 0 -50%;
    font-family: var(--font-poppins);
    font-weight: 400;
    font-style: normal;
    color: var(--c-white);
  }

  .offer__title-a {
    display: block;
    font-size: 4rem;
    line-height: 4.5rem;
  }

  .offer__title-b {
    display: block;
    font-family: var(--font-poppins);
    font-weight: 900;
    font-size: 4.5rem;
    line-height: 5.375rem;
    text-transform: uppercase;
  }

  .offer__pointer {
    position: absolute;
    left: 78.1875rem;
    top: 15.75rem;
    height: 1.1875rem;
    width: 6rem;
  }

  .offer__pointer svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .offer__claim {
    position: absolute;
    left: 85.25rem;
    top: 16.90625rem;
    width: 21.375rem;
    translate: 0 -50%;
    font-style: normal;
    font-size: 1.3125rem;
    color: var(--c-white);
  }

  .offer__claim-a,
  .offer__claim-b {
    display: block;
    font-family: var(--font-poppins);
    line-height: 1.575rem;
  }

  .offer__claim-a { font-weight: 400; }
  .offer__claim-b { font-weight: 800; }

  .offer__dot--1 { left: 84.5625rem; top: 20.875rem; }
  .offer__price--1 { left: 88.4375rem; top: 23.09375rem; }
  .offer__dot--2 { left: 84.5625rem; top: 29.875rem; }
  .offer__price--2 { left: 88.4375rem; top: 33.15625rem; }

  .offer__cta {
    position: absolute;
    left: 18.6875rem;
    top: 36.5625rem;
    min-width: 18.875rem;
  }

  /* ======================= PÍLULAS DECORATIVAS =======================
     Cada item é o quadro girado do Figma resolvido em um elemento só:
     left/top = canto do quadro + (quadro - arte) / 2. */

  .pill--1 {
    left: 3.493844rem; top: 46.209219rem;
    width: 10.70825rem; height: 9.487063rem;
    rotate: -96.1deg;
  }

  .pill--2 {
    left: 99.785813rem; top: 52.693063rem;
    width: 16.1875rem; height: 14.341375rem;
    rotate: -14.9deg;
    filter: drop-shadow(0.4375rem 0.25rem 1.5875rem rgba(0, 0, 0, 0.15));
  }

  .pill--3 {
    left: -8.314063rem; top: 106.721719rem;
    width: 24.199437rem; height: 23.28575rem;
    rotate: 97.71deg;
    filter: blur(0.4125rem);
  }

  .pill--4 {
    left: 99.58575rem; top: 174.649188rem;
    width: 19.211375rem; height: 18.486rem;
    rotate: 0.14deg;
    filter: drop-shadow(1.6875rem 1.125rem 1.575rem rgba(0, 0, 0, 0.2));
  }

  .pill--5 {
    left: 42.533906rem; top: 328.054969rem;
    width: 12.508688rem; height: 11.082187rem;
    rotate: 82.9deg;
    filter: drop-shadow(0.4375rem 0.25rem 1.5875rem rgba(0, 0, 0, 0.15));
  }

  .pill--6 {
    left: 98.559219rem; top: 330.42025rem;
    width: 8.40625rem; height: 7.447563rem;
    rotate: -9.34deg;
    filter: drop-shadow(0.4375rem 0.25rem 1.5875rem rgba(0, 0, 0, 0.15));
  }

  .pill--7 {
    left: 6.042406rem; top: 304.602562rem;
    width: 6.705125rem; height: 5.940437rem;
    rotate: 81.33deg;
    filter: drop-shadow(0.4375rem 0.25rem 1.5875rem rgba(0, 0, 0, 0.15));
  }

  .pill--8 {
    left: 29.302906rem; top: 338.384156rem;
    width: 6.705125rem; height: 5.940437rem;
    rotate: -167.18deg;
    filter: drop-shadow(0.4375rem 0.25rem 1.5875rem rgba(0, 0, 0, 0.15));
  }

}