/* ==========================================================================
   Capi Fresh — Coming Soon
   Tokens: spec.md, seção 2
   ========================================================================== */

/* Fontes hospedadas no próprio site (sem Google Fonts — GDPR).
   WOFF2 com subset latino; Roboto Slab variável cobre os pesos 400 a 700. */
@font-face {
  font-family: 'Boldonse';
  src: url("fonts/boldonse-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url("fonts/roboto-slab-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores do projeto — extraídas do Figma */
  --color-01: #3F2C43;
  --color-02: #E8E4D8;
  --color-03: #C09CC4;
  --color-04: #D9EAAF;

  /* Escala de cinza — fixa em todos os projetos */
  --white:        #FFFFFF;
  --grayscale-01: #1C1C1C;
  --grayscale-02: #3D3D3D;
  --grayscale-03: #454545;
  --grayscale-04: #6D6D6D;
  --grayscale-05: #B0B0B0;
  --grayscale-06: #E7E7E7;

  /* Tipografia */
  --font-primary:   'Boldonse', system-ui, sans-serif;
  --font-secondary: 'Roboto Slab', Georgia, serif;

  --fs-h1:     78px;
  --fs-h2:     60px;
  --fs-h3:     40px;
  --fs-text-1: 16px;
  --fs-text-2: 18px;

  --lh-h1:     1.64;
  --lh-h2:     1.24;
  --lh-h3:     1.2;
  --lh-text-1: 1.7;
  --lh-text-2: 1.6;
  --lh-footer: 1.375;
  --lh-button: 1.3125;

  --fw-regular: 400;
  --fw-bold:    700;

  /* Espaçamento */
  --space-xs:  10px;
  --space-sm:  16px;
  --space-md:  23px;
  --space-lg:  40px;
  --space-xl:  72px;
  --space-2xl: 100px;

  /* Gaps exatos do Figma que não caem na escala */
  --gap-hero-nav:        38px;  /* .hero__nav desktop */
  --gap-footer:          11px;  /* .footer__content */
  --gap-join-mobile:     45px;  /* .join__content mobile */

  /* Medidas de layout */
  --container:          1140px;
  --join-width:         559px;
  --join-width-mobile:  328px;

  --section-height:     1080px;
  --hero-height-mobile: 844px;
  /* Hero sempre na altura da tela; espaços proporcionais aos do Figma (tela de 1080px) */
  --hero-height:            100vh;
  --hero-pad-top:           min(320px, 29.63vh);  /* 320 / 1080 */
  --hero-pad-bottom:        min(100px, 9.26vh);   /* 100 / 1080 */
  --hero-pad-bottom-mobile: min(114px, 13.5vh);   /* 114 / 844 */
  --footer-height:      200px;

  --button-width:        167px;
  --button-width-mobile: 234px;
  --join-button-width-mobile: 276px;
  --button-height:       53px;
  --join-button-height:  60px;

  --wave-width:          754px;
  --wave-height:         301px;
  --wave-height-mobile:  221px;
  --wave-overlap:        32px;
  --wave-overlap-join:   38px;
  --wave-overlap-join-mobile: 111px;
  --wave-strip-width:    1920px;           /* recorte exportado da faixa (3017px no Figma) */
  --wave-ratio:          calc(1920 / 301);

  /* "COMING SOON" (hero__title) posicionado sobre o copo — medidas do Figma.
     Largura/left em % da largura do copo; bottom em % da altura do copo. */
  --hero-title-left:          25.44%;  /* (698 − 426) / 1069 */
  --hero-title-width:         48.83%;  /* 522 / 1069 */
  --hero-title-bottom:        90.62%;  /* 100% − (376 − 320) / 597 */
  --hero-title-space:         15.53%;  /* altura acima do copo: (320 − 154) / 1069 */
  --hero-title-left-mobile:   16.92%;  /* 66 / 390 */
  --hero-title-width-mobile:  66.41%;  /* 259 / 390 */
  --hero-title-bottom-mobile: 88.59%;  /* 100% − (244 − 201) / 377 */
  --hero-title-space-mobile:  17.69%;  /* (201 − 132) / 390 */

  /* Tagline e join: no mínimo a altura da tela.
     O espaço de cima é fixo — é a área das ondas; encolher faria o conteúdo subir sobre elas.
     O de baixo é proporcional ao Figma (tela de 1080px). */
  --tagline-pad-top:        301px;
  --tagline-pad-bottom:     min(145px, 13.43vh);  /* 1080 − 301 − 634 */
  --join-pad-top:           263px;
  --join-pad-bottom:        min(30px, 2.78vh);    /* 1080 − 263 − 787 (altura real do conteúdo) */

  /* Tagline — desktop (posições relativas ao .tagline__content) */
  --tagline-content-height: 634px;
  --tagline-title-top:      125px;
  --tagline-title-width:    522px;
  --sticker-top-width:      178px;
  --sticker-top-x:          250px;   /* deslocamento a partir do centro (820 − 570) */
  --sticker-top-y:          42px;
  --sticker-bottom-width:   161px;
  --sticker-bottom-x:       -416px;  /* 154 − 570 */
  --sticker-bottom-y:       499px;

  /* Tagline — mobile (posições relativas ao topo do fundo roxo) */
  --tagline-height-mobile:       726px;
  --tagline-title-top-mobile:    280px;
  --tagline-title-width-mobile:  299px;
  --sticker-top-width-mobile:    96px;
  --sticker-top-x-mobile:        83px;    /* 278 − 195 */
  --sticker-top-y-mobile:        181px;
  --sticker-bottom-width-mobile: 100px;
  --sticker-bottom-x-mobile:     -190px;  /* 5 − 195 */
  --sticker-bottom-y-mobile:     540px;

  /* Join */
  --join-pad-top-mobile:    93px;
  --join-pad-bottom-mobile: 73px;
  --join-icon-width:        151px;
  --join-icon-width-mobile: 93px;
  --button-pad-x:           34px;

  /* Footer — mobile */
  --footer-pad-top-mobile:    47px;
  --footer-pad-bottom-mobile: 53px;

  /* Radius */
  --radius-pill: 999px;

  /* Páginas auxiliares (404, obrigado, termos) */
  --fs-display:  160px;   /* número do 404 */
  --lh-display:  1;
  --legal-width: 860px;   /* largura de leitura da política */

  /* Foco */
  --focus-width:  2px;
  --focus-offset: 3px;

  /* Animação de entrada (fade up) */
  --fade-distance: 24px;
  --fade-duration: .8s;
  --fade-ease:     cubic-bezier(.22, 1, .36, 1);
  --fade-delay-0:  0s;
  --fade-delay-1:  .1s;
  --fade-delay-2:  .35s;
  --fade-delay-3:  .5s;

  /* Hover dos botões — "copo enchendo": creme roxo-escuro com ondas sobe de baixo */
  --hover-duration:  .7s;
  --liquid-wave-w:   40px;   /* comprimento de uma onda */
  --liquid-wave-h:   10px;   /* altura da faixa ondulada no topo do líquido */
  --liquid-duration: 1.4s;   /* uma volta da ondulação */
  --liquid-foam-opacity: .45;
  --liquid-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q10 0 20 5T40 5V10H0Z'/%3E%3C/svg%3E");
}

/* svh: desconta as barras do navegador no mobile */
@supports (height: 100svh) {
  :root {
    --hero-height:            100svh;
    --hero-pad-top:           min(320px, 29.63svh);
    --hero-pad-bottom:        min(100px, 9.26svh);
    --hero-pad-bottom-mobile: min(114px, 13.5svh);
    --tagline-pad-bottom:     min(145px, 13.43svh);
    --join-pad-bottom:        min(30px, 2.78svh);
  }
}

@media (max-width: 768px) {
  :root {
    --fs-h1:     44px;
    --fs-h2:     32px;
    --fs-h3:     18px;
    --fs-text-1: 16px;
    --fs-text-2: 18px;

    --lh-h1:     1.67;
    --lh-h2:     1.36;
    --fs-display: 96px;
  }
}

/* Scroll customizado */
:root {
  --sbw: 8px;
  --sbc: var(--color-03);
}
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; }
#sb {
  position: fixed;
  top: 0;
  right: 2px;
  width: var(--sbw);
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}
#sb i {
  position: absolute;
  right: 0;
  width: 100%;
  border-radius: var(--radius-pill);
  background: var(--sbc);
  opacity: 0;
  transition: opacity .35s ease;
}
html.scrolling #sb i { opacity: 1; }
@media (max-width: 1024px) { #sb { display: none; } }

/* Seleção de texto */
::selection      { color: var(--white); background-color: var(--color-03); }
::-moz-selection { color: var(--white); background-color: var(--color-03); }

/* Smooth scroll — fallback nativo (o Lenis desliga quando assume) */
html { scroll-behavior: smooth; }


/* ==========================================================================
   Base
   ========================================================================== */

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

body {
  background-color: var(--color-02);
  color: var(--color-01);
  font-family: var(--font-secondary);
  font-size: var(--fs-text-1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-01);
  outline-offset: var(--focus-offset);
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Parallax — o script.js escreve --parallax-y nos elementos com [data-parallax] */
[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* Skip-link: escondido até receber foco pelo teclado */
.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 100000;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--color-01);
  color: var(--color-02);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-sm) * 2));
}

.skip-link:focus-visible {
  transform: none;
  outline-color: var(--color-04);
}

main:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hover dos botões (.hero__nav-link, .join__button, .status__button, .legal__back) — "copo de açaí enchendo"
   ::before  = o creme: --color-01 com o topo ondulado (máscara SVG repetida).
   ::after   = a espuma: a mesma onda, mais clara e defasada, que sobe na frente
               e fica escondida atrás do creme quando o botão enche.
   As duas camadas nascem abaixo do botão (translateY 100%) e sobem até a onda
   passar do topo. Enquanto o mouse está em cima, as ondas correm na horizontal. */
.hero__nav-link,
.join__button,
.status__button,
.legal__back {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--hover-duration) var(--fade-ease);
}

.hero__nav-link::before,
.join__button::before,
.status__button::before,
.legal__back::before,
.hero__nav-link::after,
.join__button::after,
.status__button::after,
.legal__back::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + var(--liquid-wave-h));
  background-color: var(--color-01);
  -webkit-mask-image: var(--liquid-wave), linear-gradient(#000, #000);
          mask-image: var(--liquid-wave), linear-gradient(#000, #000);
  -webkit-mask-size: var(--liquid-wave-w) var(--liquid-wave-h), 100% calc(100% - var(--liquid-wave-h));
          mask-size: var(--liquid-wave-w) var(--liquid-wave-h), 100% calc(100% - var(--liquid-wave-h));
  -webkit-mask-position: 0 0, 0 var(--liquid-wave-h);
          mask-position: 0 0, 0 var(--liquid-wave-h);
  -webkit-mask-repeat: repeat-x, no-repeat;
          mask-repeat: repeat-x, no-repeat;
  transform: translateY(100%);
  transition: transform var(--hover-duration) var(--fade-ease);
  animation: liquid-wave var(--liquid-duration) linear infinite paused;
}

/* Creme */
.hero__nav-link::before,
.join__button::before,
.status__button::before,
.legal__back::before {
  z-index: -1;
}

/* Espuma: mais clara, onda na direção oposta, sobe um pouco antes */
.hero__nav-link::after,
.join__button::after,
.status__button::after,
.legal__back::after {
  z-index: -2;
  opacity: var(--liquid-foam-opacity);
  animation-direction: reverse;
  transition-duration: calc(var(--hover-duration) * .8);
}

.hero__nav-link:focus-visible,
.join__button:focus-visible,
.status__button:focus-visible,
.legal__back:focus-visible {
  color: var(--color-02);
}

.hero__nav-link:focus-visible::before,
.join__button:focus-visible::before,
.status__button:focus-visible::before,
.legal__back:focus-visible::before,
.hero__nav-link:focus-visible::after,
.join__button:focus-visible::after,
.status__button:focus-visible::after,
.legal__back:focus-visible::after {
  transform: translateY(calc(var(--liquid-wave-h) * -1));
  animation-play-state: running;
}

/* Só em dispositivos com mouse — no toque o hover ficaria "preso" */
@media (hover: hover) {
  .hero__nav-link:hover,
  .join__button:hover,
  .status__button:hover,
  .legal__back:hover {
    color: var(--color-02);
  }

  .hero__nav-link:hover::before,
  .join__button:hover::before,
  .status__button:hover::before,
  .legal__back:hover::before,
  .hero__nav-link:hover::after,
  .join__button:hover::after,
  .status__button:hover::after,
  .legal__back:hover::after {
    transform: translateY(calc(var(--liquid-wave-h) * -1));
    animation-play-state: running;
  }
}

@keyframes liquid-wave {
  from {
    -webkit-mask-position: 0 0, 0 var(--liquid-wave-h);
            mask-position: 0 0, 0 var(--liquid-wave-h);
  }
  to {
    -webkit-mask-position: var(--liquid-wave-w) 0, 0 var(--liquid-wave-h);
            mask-position: var(--liquid-wave-w) 0, 0 var(--liquid-wave-h);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--fade-distance));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Só movimento, sem opacidade — para o elemento de LCP (copo do hero).
   O Chrome não conta como LCP o que é pintado com opacity: 0; com o fade-up
   o PageSpeed dava "NO_LCP" e não calculava a nota de Desempenho. */
@keyframes rise {
  from {
    transform: translateY(var(--fade-distance));
  }
  to {
    transform: none;
  }
}


/* ==========================================================================
   Hero
   Figma: 3002-139 (desktop) · 3002-341 (mobile)
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--hero-height);
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
  /* Só as listras (uma linha do fundo do Figma esticada) — o "COMING SOON" é o .hero__title */
  background: var(--color-02) url("img/hero__stripes.png") center / 100% 100% no-repeat;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  max-width: var(--container);
}

/* A imagem encolhe para o hero caber na tela: sobra o que não é espaço nem botão */
.hero__image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(var(--hero-height) - var(--hero-pad-top) - var(--hero-pad-bottom) - var(--space-xs) - var(--button-height));
}

.hero__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-hero-nav);
  width: 100%;
}

.hero__nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-width);
  height: var(--button-height);
  border-radius: var(--radius-pill);
  background-color: var(--color-03);
  color: var(--color-01);
  text-decoration: none;
}

.hero__nav-label {
  font-family: var(--font-secondary);
  font-size: var(--fs-text-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-button);
  text-align: center;
  white-space: nowrap;
}

/* Copo + "COMING SOON": o texto é posicionado em relação ao copo, então os
   dois escalam juntos e ficam alinhados como no Figma em qualquer tela */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 100%;
}

.hero__title {
  position: absolute;
  left: var(--hero-title-left);
  bottom: var(--hero-title-bottom);
  width: var(--hero-title-width);
}

.hero__title-image {
  width: 100%;
  height: auto;
}

/* Entrada: título → copo → Follow Us → Join Our Team */
.hero__title,
.hero__picture,
.hero__nav-link {
  animation: fade-up var(--fade-duration) var(--fade-ease) both;
}

.hero__title                { animation-delay: var(--fade-delay-0); }
.hero__picture              { animation-delay: var(--fade-delay-1); animation-name: rise; }
.hero__nav-link--follow     { animation-delay: var(--fade-delay-2); }
.hero__nav-link--join       { animation-delay: var(--fade-delay-3); }

.hero__picture {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Fundo do hero em WebP (o PNG acima fica como fallback) */
@supports (background-image: url("x.webp")) {
  .hero {
    background-image: url("img/hero__stripes.webp");
  }
}

@media (max-width: 900px) {
  .hero {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  /* Tablet: stickers no tamanho mobile para não cobrirem o título */
  .tagline {
    --sticker-top-width:    var(--sticker-top-width-mobile);
    --sticker-bottom-width: var(--sticker-bottom-width-mobile);
  }
}

@media (max-width: 768px) {
  .hero {
    justify-content: flex-end;
    height: auto;
    min-height: var(--hero-height);
    padding: var(--space-md) 0 var(--hero-pad-bottom-mobile);  /* respiro mínimo acima do "COMING SOON" em telas baixas */
    background-image: url("img/hero__stripes_mobile.png");
  }

  @supports (background-image: url("x.webp")) {
    .hero {
      background-image: url("img/hero__stripes_mobile.webp");
    }
  }

  .hero__content {
    gap: var(--space-md);
  }

  /* Até 480px o <picture> usa a imagem mobile (390px); de 481 a 768px, a desktop.
     O espaço acima do copo reserva a altura do "COMING SOON". */
  .hero__visual {
    width: 100%;
    margin-top: var(--hero-title-space);
  }

  .hero__image {
    width: 100%;
    max-height: none;
  }

  .hero__nav {
    flex-direction: column;
    gap: var(--space-md);
    width: var(--button-width-mobile);
  }

  .hero__nav-link {
    width: 100%;
  }
}


@media (max-width: 480px) {
  .hero__visual {
    margin-top: var(--hero-title-space-mobile);
  }

  .hero__title {
    left: var(--hero-title-left-mobile);
    bottom: var(--hero-title-bottom-mobile);
    width: var(--hero-title-width-mobile);
  }
}


/* ==========================================================================
   Tagline
   Figma: 3002-147 (desktop) · 3002-343 (mobile)
   ========================================================================== */

/* No mínimo a altura da tela; se sobrar espaço, o conteúdo fica centralizado.
   Em telas menores que o conteúdo, a seção cresce — tipografia não encolhe. */
.tagline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--hero-height);
  padding: var(--tagline-pad-top) 0 var(--tagline-pad-bottom);
  background-color: var(--color-01);
  overflow-x: clip;
}

/* Ondas: sobem sobre o .hero; o que é transparente mostra a seção de baixo */
.tagline__waves,
.join__waves {
  position: absolute;
  left: 50%;
  width: max(100%, var(--wave-strip-width));
  height: auto;
  aspect-ratio: var(--wave-ratio);
  transform: translateX(-50%);
  pointer-events: none;
}

.tagline__waves {
  top: calc(var(--wave-overlap) * -1);
  color: var(--color-03);
}

.tagline__content {
  position: relative;
  flex: none;
  width: 100%;
  max-width: var(--container);
  height: var(--tagline-content-height);
  margin: 0 auto;
  padding-top: var(--tagline-title-top);
}

.tagline__title {
  position: relative;
  width: var(--tagline-title-width);
  max-width: 100%;
  margin: 0 auto;
  font-family: var(--font-primary);
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h1);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-02);
}

.tagline__title-highlight {
  color: var(--color-03);
}

.tagline__sticker {
  position: absolute;
  height: auto;
}

.tagline__sticker--top {
  top: var(--sticker-top-y);
  left: clamp(0px, calc(50% + var(--sticker-top-x)), calc(100% - var(--sticker-top-width)));
  width: var(--sticker-top-width);
}

.tagline__sticker--bottom {
  z-index: 1;
  top: var(--sticker-bottom-y);
  left: clamp(0px, calc(50% + var(--sticker-bottom-x)), calc(100% - var(--sticker-bottom-width)));
  width: var(--sticker-bottom-width);
}


/* ==========================================================================
   Join
   Figma: 3002-157 (desktop) · 3002-346 (mobile)
   ========================================================================== */

.join {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--hero-height);
  padding: var(--join-pad-top) 0 var(--join-pad-bottom);
  background-color: var(--color-03);
  overflow-x: clip;
}

.join__waves {
  top: calc(var(--wave-overlap-join) * -1);
  color: var(--color-02);
}

.join__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  width: var(--join-width);
  max-width: 100%;
  margin: 0 auto;
}

.join__icon {
  width: var(--join-icon-width);
  height: auto;
}

.join__title {
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-01);
}

.join__text {
  font-family: var(--font-secondary);
  font-size: var(--fs-text-1);
  line-height: var(--lh-text-1);
  text-align: center;
  color: var(--color-01);
}

/* Parágrafos separados por uma linha em branco, como no Figma */
.join__text p + p {
  margin-top: calc(var(--lh-text-1) * 1em);
}

.join__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--join-button-height);
  padding: 0 var(--button-pad-x);
  border-radius: var(--radius-pill);
  background-color: var(--color-04);
  color: var(--color-01);
  text-decoration: none;
}

.join__button-label {
  font-family: var(--font-secondary);
  font-size: var(--fs-text-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text-1);
  white-space: nowrap;
}


/* ==========================================================================
   Footer
   Figma: 3002-169 (desktop) · 3002-348 (mobile)
   ========================================================================== */

.footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--footer-height);
  background-color: var(--color-01);
}

.footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-footer);
}

/* Privacy Policy + Impressum lado a lado (o Impressum é obrigatório na Alemanha) */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-footer) var(--space-md);
}

.footer__privacy,
.footer__impressum,
.footer__copyright {
  font-family: var(--font-secondary);
  font-size: var(--fs-text-1);
  line-height: var(--lh-footer);
  text-align: center;
  color: var(--color-02);
}

.footer__privacy,
.footer__impressum {
  text-decoration: none;
  transition: color var(--hover-duration) var(--fade-ease);
}

.footer__privacy:focus-visible,
.footer__impressum:focus-visible {
  color: var(--color-04);
  outline-color: var(--color-04);
}

@media (hover: hover) {
  .footer__privacy:hover,
  .footer__impressum:hover {
    color: var(--color-04);
  }
}


/* ==========================================================================
   Tagline, join e footer — mobile
   ========================================================================== */

@media (max-width: 768px) {
  .tagline {
    padding: 0;
  }

  .tagline__waves,
  .join__waves {
    width: calc(var(--wave-height-mobile) * var(--wave-ratio));
    height: var(--wave-height-mobile);
  }

  .tagline__content {
    height: var(--tagline-height-mobile);
    padding-top: var(--tagline-title-top-mobile);
  }

  .tagline__title {
    width: var(--tagline-title-width-mobile);
  }

  .tagline__sticker--top {
    top: var(--sticker-top-y-mobile);
    left: clamp(0px, calc(50% + var(--sticker-top-x-mobile)), calc(100% - var(--sticker-top-width-mobile)));
    width: var(--sticker-top-width-mobile);
  }

  .tagline__sticker--bottom {
    top: var(--sticker-bottom-y-mobile);
    left: clamp(0px, calc(50% + var(--sticker-bottom-x-mobile)), calc(100% - var(--sticker-bottom-width-mobile)));
    width: var(--sticker-bottom-width-mobile);
  }

  .join {
    padding: var(--join-pad-top-mobile) 0 var(--join-pad-bottom-mobile);
  }

  .join__waves {
    top: calc(var(--wave-overlap-join-mobile) * -1);
  }

  .join__content {
    gap: var(--gap-join-mobile);
    width: var(--join-width-mobile);
    max-width: calc(100% - var(--space-sm) * 2);
  }

  .join__icon {
    width: var(--join-icon-width-mobile);
  }

  .join__button {
    width: var(--join-button-width-mobile);
    height: var(--button-height);
  }

  .join__button-label {
    line-height: var(--lh-button);
  }

  .footer {
    align-items: flex-start;
    height: auto;
    padding: var(--footer-pad-top-mobile) 0 var(--footer-pad-bottom-mobile);
  }
}


/* ==========================================================================
   Páginas auxiliares — 404, obrigado (.status) e política de privacidade (.legal)
   Mesma linguagem do hero e do join: listras, Boldonse, botões pílula
   ========================================================================== */

/* 404 e obrigado: tela cheia sobre as listras do hero */
.status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-height);
  padding: var(--space-2xl) var(--space-lg);
  background: var(--color-02) url("img/hero__stripes.png") center / 100% 100% no-repeat;
}

@supports (background-image: url("x.webp")) {
  .status {
    background-image: url("img/hero__stripes.webp");
  }
}

.status__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: var(--join-width);
  text-align: center;
}

.status__sticker {
  width: var(--join-icon-width);
  height: auto;
}

.status__title {
  font-family: var(--font-primary);
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2);
  text-transform: uppercase;
  color: var(--color-01);
}

.status__title--code {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

.status__text {
  font-size: var(--fs-text-2);
  line-height: var(--lh-text-1);
  color: var(--color-01);
}

.status__button,
.legal__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  padding: 0 var(--button-pad-x);
  border-radius: var(--radius-pill);
  background-color: var(--color-03);
  color: var(--color-01);
  text-decoration: none;
}

.status__button-label,
.legal__back-label {
  font-family: var(--font-secondary);
  font-size: var(--fs-text-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-button);
  white-space: nowrap;
}

/* Entrada: mesmo fade up do hero */
.status__sticker,
.status__title,
.status__text,
.status__button {
  animation: fade-up var(--fade-duration) var(--fade-ease) both;
}

.status__sticker { animation-delay: var(--fade-delay-0); }
.status__title   { animation-delay: var(--fade-delay-1); }
.status__text    { animation-delay: var(--fade-delay-2); }
.status__button  { animation-delay: var(--fade-delay-3); }

/* Política de privacidade: cabeçalho lilás (como o join) + texto sobre o creme */
.legal__header {
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-03);
}

.legal__header-content,
.legal__body {
  width: 100%;
  max-width: var(--legal-width);
  margin: 0 auto;
}

.legal__header-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.legal__back {
  background-color: var(--color-02);
}

.legal__title {
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2);
  text-transform: uppercase;
  color: var(--color-01);
}

.legal__intro {
  font-size: var(--fs-text-2);
  line-height: var(--lh-text-1);
  color: var(--color-01);
}

/* Soma o padding lateral para o texto alinhar com o cabeçalho */
.legal__body {
  max-width: calc(var(--legal-width) + var(--space-lg) * 2);
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

.legal__section + .legal__section {
  margin-top: var(--space-lg);
}

.legal__section-title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-secondary);
  font-size: var(--fs-text-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text-2);
  color: var(--color-01);
}

.legal__text {
  font-size: var(--fs-text-1);
  line-height: var(--lh-text-1);
  color: var(--color-01);
}

.legal__text + .legal__text,
.legal__text + .legal__list,
.legal__list + .legal__text {
  margin-top: var(--space-sm);
}

.legal__list {
  padding-left: var(--space-md);
  font-size: var(--fs-text-1);
  line-height: var(--lh-text-1);
  color: var(--color-01);
}

.legal__link {
  color: var(--color-01);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--hover-duration) var(--fade-ease);
}

@media (hover: hover) {
  .legal__link:hover {
    color: var(--color-03);
  }
}

/* Dado a preencher pelo cliente — destacado para não ir ao ar por engano */
.legal__pending {
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-04);
  color: var(--color-01);
  font-weight: var(--fw-bold);
}

@media (max-width: 768px) {
  .status {
    padding: var(--space-xl) var(--space-md);
  }

  .status__sticker {
    width: var(--join-icon-width-mobile);
  }

  .legal__header {
    padding: var(--space-lg) var(--space-md);
  }

  .legal__body {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }
}


/* ==========================================================================
   Movimento reduzido — manter no fim do arquivo (cascata)
   ========================================================================== */

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

  .hero__title,
  .hero__picture,
  .hero__nav-link,
  .status__sticker,
  .status__title,
  .status__text,
  .status__button {
    animation: none;
  }

  [data-parallax] {
    transform: none;
    will-change: auto;
  }

  /* Hover sem movimento: o creme aparece por opacidade, sem subir nem ondular */
  .hero__nav-link::before,
  .join__button::before,
  .status__button::before,
  .legal__back::before {
    transform: translateY(calc(var(--liquid-wave-h) * -1));
    opacity: 0;
    animation: none;
    transition: opacity var(--hover-duration) var(--fade-ease);
  }

  .hero__nav-link::after,
  .join__button::after,
  .status__button::after,
  .legal__back::after {
    display: none;
  }

  .hero__nav-link:hover::before,
  .join__button:hover::before,
  .status__button:hover::before,
  .legal__back:hover::before,
  .hero__nav-link:focus-visible::before,
  .join__button:focus-visible::before,
  .status__button:focus-visible::before,
  .legal__back:focus-visible::before {
    transform: translateY(calc(var(--liquid-wave-h) * -1));
    opacity: 1;
  }
}