/* ==========================================================================
   Inglês Abaixo de Zero · retrô moderno
   Conceito: a página é um termômetro. Começa congelada (−12°C) e
   esquenta seção a seção até derreter no CTA final (+25°C).
   ========================================================================== */

@font-face {
  font-family: "Hello Mogels";
  src: url("../fonts/Hello-Mogels.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* Paleta (herdada do site atual) */
  --noite: #0b1c2a;
  --azul: #1b4864;
  --azul-medio: #234e6d;
  --azul-vivo: #2b7dbc;
  --gelo: #c3e8e8;
  --neve: #eef3f1;
  --papel: #f3eee2;
  --manteiga: #f1e4ad;
  --salmao: #ffa594;
  --terracota: #c76350;
  --terracota-escuro: #70352a;
  --tv: #aed3d6;

  /* Tipografia */
  --f-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --f-poster: "Anton", "Impact", sans-serif;
  --f-mogels: "Hello Mogels", Georgia, serif;
  --f-pixel: "Silkscreen", ui-monospace, monospace;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand: "Caveat", "Comic Sans MS", cursive;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec-pad: clamp(88px, 11vw, 160px);
  --round: clamp(28px, 4vw, 48px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html { overflow-x: clip; }

body {
  font-family: var(--f-body);
  font-size: clamp(16px, .45vw + 14px, 18px);
  color: var(--noite);
  background: var(--noite);
  overflow-x: clip;
}

b, strong { font-weight: 700; }

.container {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.center { text-align: center; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--azul-vivo);
  outline-offset: 3px;
}

/* ==========================================================================
   Tipografia
   ========================================================================== */
.h-xl,
.h-giant {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 82, "opsz" 96;
  letter-spacing: -.018em;
  line-height: .94;
  color: var(--noite);
}

.h-xl { font-size: clamp(2.5rem, 5.8vw, 5.4rem); }

/* "O curso é pra quem…" em 1 linha no desktop */
#praquem-title {
  font-size: clamp(3.4rem, 9vw, 9.4rem);
  white-space: nowrap;
}

.br-mob { display: none; }
.h-xl--light { color: #fff; }

.h-giant {
  font-size: clamp(3.4rem, 11.5vw, 11rem);
  font-variation-settings: "wdth" 75, "opsz" 96;
  line-height: .86;
  letter-spacing: -.024em;
}

.h-giant--light { color: #fff; }

.mogels {
  font-family: var(--f-mogels);
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: 0;
}

.accent-gelo { color: var(--gelo); }
.accent-creme { color: var(--manteiga); }
.accent-terracota { color: var(--terracota); }

.hand {
  font-family: var(--f-hand);
  font-weight: 700;
}

/* Etiqueta de temperatura: marca em que ponto da jornada a pessoa está */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--f-pixel);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--azul);
}

.tag span {
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: var(--noite);
  color: var(--gelo);
}

.tag--light { color: var(--gelo); }
.tag--light span { background: var(--gelo); color: var(--noite); }

.center-tag {
  display: flex;
  justify-content: center;
}

/* Divisão das palavras para a animação de entrada */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}

.w > span { display: inline-block; }

/* Sublinhado rabiscado (uma linha por linha de texto) */
.scribble {
  padding-bottom: .14em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10C60 3 118 14 178 7s96-4 119 1' fill='none' stroke='%23c76350' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .38em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-size 1.1s var(--ease) .2s;
}

.js .scribble:not(.is-in) { background-size: 0% .38em; }

.scribble--creme {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10C60 3 118 14 178 7s96-4 119 1' fill='none' stroke='%23f1e4ad' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.statement {
  max-width: 780px;
  margin: clamp(56px, 7vw, 96px) auto 32px;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.statement--light { color: #fff; }

.note {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1;
  color: var(--noite);
}

/* ==========================================================================
   Botões
   ========================================================================== */
.btn {
  --btn-bg: var(--terracota);
  --btn-fg: #fff;
  --btn-edge: var(--noite);
  --chip-bg: var(--noite);
  --chip-fg: var(--manteiga);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 62px;
  max-width: 100%;
  padding: 10px 10px 10px clamp(22px, 3vw, 32px);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  letter-spacing: -.01em;
  line-height: 1.15;
  text-align: left;
  box-shadow: 0 6px 0 var(--btn-edge);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.btn__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--chip-fg);
  transition: transform .35s var(--ease);
}

.btn__arrow::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn:hover {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--btn-edge);
}

.btn:hover .btn__arrow { transform: rotate(-45deg); }

.btn:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--btn-edge);
}

.btn--light {
  --btn-bg: var(--manteiga);
  --btn-fg: var(--noite);
  --btn-edge: var(--terracota);
  --chip-bg: var(--terracota);
  --chip-fg: #fff;
}

.btn--big {
  min-height: 72px;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
}

.btn--block {
  width: 100%;
  justify-content: center;
  padding-inline: 24px;
  text-align: center;
}

/* ==========================================================================
   Marca
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mogels);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  text-transform: uppercase;
  color: var(--azul);
}

.brand img { width: clamp(44px, 5vw, 56px); height: auto; }
.brand--light { color: var(--gelo); }

/* ==========================================================================
   Rolagem suave (Lenis) — o scroll-behavior nativo precisa ficar desligado
   ========================================================================== */
html.lenis,
html.lenis body { height: auto; }

html.lenis,
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ==========================================================================
   Barra de rolagem própria (só desktop com mouse)
   ========================================================================== */
.scrollbar { display: none; }

@media (min-width: 861px) and (pointer: fine) {
  /* esconde a barra nativa do navegador */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar { display: none; width: 0; height: 0; }

  .scrollbar {
    position: fixed;
    top: 50%;
    right: clamp(12px, 1.4vw, 22px);
    z-index: 60;
    display: block;
    width: 32px;
    height: clamp(220px, 38vh, 360px);
    padding: 3px 0;
    border-radius: 999px;
    background: rgba(11, 28, 42, .82);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(11, 28, 42, .2);
    translate: 0 -50%;
    transition: opacity .5s var(--ease);
  }

  .is-loading .scrollbar { opacity: 0; }

  .scrollbar__track {
    position: relative;
    height: 100%;
    cursor: pointer;
  }

  /* trilho fino no centro */
  .scrollbar__track::before,
  .scrollbar__fill {
    content: "";
    position: absolute;
    left: 50%;
    top: 13px;
    width: 2px;
    border-radius: 999px;
    translate: -50% 0;
  }

  .scrollbar__track::before {
    bottom: 13px;
    background: rgba(195, 232, 232, .22);
  }

  /* parte já percorrida */
  .scrollbar__fill {
    height: var(--sb-fill, 0px);
    background: var(--gelo);
  }

  .scrollbar__thumb {
    position: absolute;
    left: 50%;
    top: 0;
    width: 26px;
    height: auto;
    translate: -50% var(--sb-y, 0px);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: scale .25s var(--ease);
  }

  .scrollbar__thumb:hover { scale: 1.12; }

  .scrollbar.is-dragging .scrollbar__thumb {
    cursor: grabbing;
    scale: 1.18;
  }

  .scrollbar.is-dragging { cursor: grabbing; }
}

/* ==========================================================================
   Preloader: o frio antes da jornada (−40°C → −12°C)
   ========================================================================== */
.preloader { display: none; }

html.is-loading,
html.is-loading body { overflow: hidden; }

.is-loading .preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--noite);
  background-image:
    linear-gradient(rgba(195, 232, 232, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(195, 232, 232, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center;
  color: var(--gelo);
  transition: transform .8s cubic-bezier(.76, 0, .24, 1), border-radius .8s cubic-bezier(.76, 0, .24, 1);
}

/* cortina sobe com a base arredondada, como os blocos do site */
.preloader.is-leaving {
  transform: translateY(-100%);
  border-radius: 0 0 50% 50% / 0 0 120px 120px;
}

.preloader__inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  transition: transform .6s var(--ease), opacity .45s;
}

.preloader.is-leaving .preloader__inner {
  transform: translateY(-40px);
  opacity: 0;
}

.preloader__penguin {
  width: clamp(72px, 9vw, 96px);
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 22px rgba(195, 232, 232, .35));
  animation: shiver .14s steps(2) infinite alternate;
}

/* pinguim tremendo de frio; para de tremer quando "esquenta" */
@keyframes shiver {
  from { translate: -1.5px 0; rotate: -1.5deg; }
  to { translate: 1.5px 0; rotate: 1.5deg; }
}

.preloader.is-warm .preloader__penguin {
  animation: none;
  scale: 1.08;
  transition: scale .3s var(--ease);
}

.preloader__temp {
  font-family: var(--f-pixel);
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gelo);
  text-shadow: 0 0 40px rgba(195, 232, 232, .35);
}

.preloader__bar {
  position: relative;
  width: min(320px, 70vw);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(195, 232, 232, .14);
}

.preloader__bar span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--azul-vivo), var(--gelo));
  transform: scaleX(0);
  transform-origin: left;
}

.preloader__label {
  margin-top: 4px;
  font-family: var(--f-mogels);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--manteiga);
}

.preloader__hint {
  position: absolute;
  bottom: clamp(24px, 5vh, 48px);
  font-family: var(--f-pixel);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(195, 232, 232, .6);
}

.preloader__dots i {
  font-style: normal;
  animation: blink 1.2s infinite;
}

.preloader__dots i:nth-child(2) { animation-delay: .2s; }
.preloader__dots i:nth-child(3) { animation-delay: .4s; }

@keyframes blink {
  0%, 100% { opacity: .2; }
  40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__penguin,
  .preloader__dots i { animation: none; }
  .is-loading .preloader { transition: opacity .3s; }
  .preloader.is-leaving { transform: none; border-radius: 0; opacity: 0; }
}

/* ==========================================================================
   Termômetro fixo
   ========================================================================== */
.thermo {
  --t: 0;
  --t-color: var(--gelo);
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: rgba(11, 28, 42, .88);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 10px 30px rgba(11, 28, 42, .25);
  pointer-events: none;
  transition: opacity .4s, translate .4s var(--ease);
}

.thermo.is-off {
  opacity: 0;
  translate: 0 12px;
}

.thermo__bulb {
  position: relative;
  width: 10px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}

.thermo__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(12% + var(--t) * 88%);
  border-radius: inherit;
  background: var(--t-color);
  transition: height .5s var(--ease), background-color .5s;
}

.thermo__temp {
  min-width: 5ch;
  font-family: var(--f-pixel);
  font-size: 1.05rem;
  color: var(--t-color);
  transition: color .5s;
}

.thermo__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   Letreiro
   ========================================================================== */
.ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: 18px;
  background: var(--noite);
  color: var(--gelo);
  font-family: var(--f-pixel);
  font-size: clamp(.95rem, 1.5vw, 1.25rem);
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker__track {
  display: inline-flex;
  gap: 28px;
  animation: ticker 32s linear infinite;
}

/* Montado pelo JS: duas metades idênticas, cada uma mais larga que a tela */
.ticker__track.is-built {
  display: flex;
  gap: 0;
  width: max-content;
  animation-duration: var(--ticker-duration, 32s);
}

.ticker__group {
  display: flex;
  flex: none;
  gap: 28px;
  padding-right: 28px;
}

.ticker i {
  font-style: normal;
  color: var(--terracota);
}

@keyframes ticker { to { transform: translateX(-50%); } }

.ticker--light {
  margin-block: clamp(56px, 7vw, 96px);
  background: var(--noite);
  color: var(--manteiga);
  transform: rotate(-2deg) scale(1.04);
}

/* ==========================================================================
   Blocos (seções empilhadas com cantos arredondados)
   ========================================================================== */
.blk {
  --bg: var(--neve);
  position: relative;
  padding-block: var(--sec-pad);
  margin-top: calc(var(--round) * -1);
  border-radius: var(--round) var(--round) 0 0;
  background-color: var(--bg);
}

.blk--dark {
  --bg: var(--noite);
  color: #fff;
  background-image:
    linear-gradient(rgba(195, 232, 232, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(195, 232, 232, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
}

.blk--gelo { --bg: var(--gelo); }
.blk--terracota { --bg: var(--terracota); color: #fff; }
.blk--manteiga { --bg: var(--manteiga); }
.blk--colagem { --bg: #bddadd; }
.blk--tv {
  --bg: var(--tv);
  background-image: radial-gradient(ellipse at 50% 38%, #c2e0e2 0%, var(--tv) 55%, #95bfc3 100%);
}

/* Objetos 3D flutuantes */
.float {
  position: absolute;
  z-index: 4;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 24px 30px rgba(11, 28, 42, .22));
  animation: bob 6s ease-in-out infinite;
}

.float:nth-of-type(2n) { animation-duration: 7.5s; animation-delay: -2s; }

@keyframes bob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -14px; rotate: 4deg; }
}

/* ==========================================================================
   HERO (mantido, com papel)
   ========================================================================== */
.hero {
  position: relative;
  z-index: 1;
  padding-top: clamp(20px, 3vw, 36px);
  overflow: hidden;
  background-color: var(--gelo);
  background-image: url("../img/textura-papel.webp");
  background-size: 1800px auto;
  background-blend-mode: multiply;
}

.hero__top {
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.hero__aside {
  max-width: 363px;
  font-size: .78rem;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: .02em;
}

.hero__stage {
  position: relative;
  height: clamp(520px, 58vw, 860px);
}

.burst {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(1250px, 150vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, var(--terracota) 0 16%, transparent 16.2%),
    repeating-conic-gradient(from 3deg, var(--terracota) 0 5deg, transparent 5deg 15deg);
  -webkit-mask:
    radial-gradient(circle, #000 1.3px, transparent 1.9px) 0 0 / 7px 7px,
    radial-gradient(closest-side, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(circle, #000 1.3px, transparent 1.9px) 0 0 / 7px 7px,
    radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-composite: intersect;
  opacity: .9;
  animation: spin 160s linear infinite;
}

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.hero__giant {
  position: absolute;
  left: 50%;
  top: 4%;
  z-index: 1;
  width: 100%;
  transform: translateX(-50%);
  font-family: var(--f-poster);
  font-size: clamp(96px, 17.5vw, 290px);
  line-height: .84;
  text-transform: uppercase;
  text-align: center;
  color: var(--azul);
  white-space: nowrap;
}

.hero__giant span { display: block; }
.hero__giant span:last-child { color: var(--noite); }

.hero__rai {
  position: absolute;
  left: 50%;
  bottom: clamp(-150px, -9vw, -40px);
  z-index: 2;
  height: 96%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 20px 30px rgba(11, 28, 42, .18));
}

.hero__note {
  position: absolute;
  z-index: 3;
  left: max(var(--gutter), calc(50% - 560px));
  top: 38%;
  transform: rotate(-6deg);
}

.note__arrow {
  display: block;
  width: clamp(70px, 8vw, 120px);
  margin: 6px 0 0 40%;
  color: var(--terracota);
}

.hero__sticker {
  position: absolute;
  z-index: 3;
  right: max(var(--gutter), calc(50% - 580px));
  top: 30%;
  width: clamp(110px, 14vw, 210px);
  height: auto;
  filter: drop-shadow(0 6px 0 rgba(11, 28, 42, .18));
  animation: wobble 5s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { transform: rotate(9deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-10px); }
}

.hero__paper {
  position: relative;
  z-index: 4;
  margin-top: clamp(-24px, -1vw, -8px);
  padding-block: clamp(20px, 3vw, 36px) clamp(64px, 8vw, 110px);
  /* papel claro: a textura sem mistura, igual na borda rasgada e no bloco */
  background-color: #fff;
  background-image: url("../img/textura-papel.webp");
  background-size: 1800px auto;
}

.hero__paper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 2px);
  aspect-ratio: 1460 / 99; /* mesma proporção da máscara: o rasgo nunca é cortado */
  background-color: #fff;
  background-image: url("../img/textura-papel.webp");
  background-size: 1800px auto;
  background-position: 0 100%;
  -webkit-mask: url("../img/papel-rasgado.png") center / 100% 100% no-repeat;
          mask: url("../img/papel-rasgado.png") center / 100% 100% no-repeat;
}

.hero__paper-inner {
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vw, 44px);
  text-align: center;
}

.hero__title { display: grid; gap: 10px; }

.hero__kicker {
  font-family: var(--f-mogels);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.1;
  color: var(--azul);
}

.hero__kicker em { font-style: normal; color: var(--terracota); }

.hero__main {
  font-family: var(--f-poster);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  line-height: .95;
  text-transform: uppercase;
  justify-self: center;
  max-width: 9.6em; /* "O" desce para a 2ª linha: ESSE CURSO VAI AQUECER / O SEU CAMINHO. */
}

/* ==========================================================================
   VSL
   ========================================================================== */
.vsl {
  margin-top: 0;
  overflow: hidden;
  text-align: center;
}

.vsl .tag { justify-content: center; }

.vsl__type {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(3.2rem, 12vw, 12rem);
  line-height: .82;
  letter-spacing: -.028em;
  text-transform: uppercase;
  white-space: nowrap; /* APERTE O PLAY em 1 linha, visível acima do vídeo */
  color: var(--azul);
}

.vsl__device {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100% - 2 * var(--gutter)));
  margin: calc(clamp(-1rem, -.6vw, -.25rem) - 15px) auto 0; /* encosta só um pouquinho na base do título */
  padding: clamp(8px, 1.2vw, 14px);
  border-radius: clamp(20px, 2.6vw, 32px);
  background: var(--noite);
  box-shadow: 0 40px 80px -20px rgba(11, 28, 42, .45);
  transform: rotate(-2deg);
}

.yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(12px, 1.8vw, 22px);
  background: #000;
}

.yt img,
.yt iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.yt__play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: clamp(76px, 9vw, 116px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--manteiga);
  color: var(--terracota);
  box-shadow: 0 0 0 10px rgba(241, 228, 173, .3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.yt__play svg { width: 44%; margin-left: 8%; }

.yt:hover .yt__play {
  transform: scale(1.08);
  box-shadow: 0 0 0 18px rgba(241, 228, 173, .25);
}

.float--vsl-a { width: clamp(110px, 14vw, 220px); left: 6%; top: 44%; }
.float--vsl-b { width: clamp(90px, 11vw, 170px); right: 7%; bottom: 10%; }

/* ==========================================================================
   DOR
   ========================================================================== */
.dor__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.dor .h-xl {
  color: #fff;
  font-size: clamp(2.5rem, 4.3vw, 4.3rem); /* cabe em 2 linhas no desktop */
  white-space: nowrap;
}
.dor .h-xl em { font-style: normal; }

.chat {
  display: grid;
  gap: 12px;
  margin-block: clamp(32px, 4vw, 48px);
}

.chat__msg {
  justify-self: start;
  max-width: 100%;
  white-space: nowrap;
  padding: 16px 22px;
  border: 1px solid rgba(195, 232, 232, .22);
  border-radius: 24px 24px 24px 6px;
  background: rgba(195, 232, 232, .08);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 500;
}

.chat__msg--alt {
  justify-self: end;
  border-radius: 24px 24px 6px 24px;
  border-color: transparent;
  background: var(--gelo);
  color: var(--noite);
}

.dor__answer {
  margin-bottom: 36px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}

.dor__answer .mogels { font-size: 1.1em; }

.dor__media { position: relative; }

.dor__video {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 100%;
  border-radius: clamp(20px, 2.6vw, 32px);
  background: var(--gelo);
}

.float--dor-a { width: clamp(110px, 13vw, 200px); left: -14%; top: 8%; }
.float--dor-b { width: clamp(90px, 10vw, 160px); right: -8%; bottom: 12%; }

/* ==========================================================================
   O QUE É
   ========================================================================== */
.oque__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.oque__lead {
  max-width: 21em; /* quebra: …que estão / …ou sentem / que nem chegaram… */
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.5;
}

.cards3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.card {
  padding: 10px 10px 26px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(11, 28, 42, .06), 0 20px 50px -30px rgba(11, 28, 42, .35);
  transition: transform .4s var(--ease);
}

.card:hover { transform: translateY(-8px); }

.card__img {
  overflow: hidden;
  aspect-ratio: 4 / 4.4;
  border-radius: 20px;
}

.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.card:hover .card__img img { transform: scale(1.05); }

.card__chip {
  display: inline-block;
  margin: 20px 14px 10px;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: var(--gelo);
  font-family: var(--f-pixel);
  font-size: .72rem;
  text-transform: uppercase;
}

.card h3 {
  margin: 0 14px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.015em;
}

.card h3 b { font-weight: 800; }

.manifesto {
  position: relative;
  margin-block: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 64px);
}

/* título de ponta a ponta do container */
.manifesto__big {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 82, "opsz" 96;
  font-size: clamp(2.2rem, 6.2vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.018em;
  text-align: center;
}

/* gelinho preso ao "pra", pousado por cima do "a" */
.manifesto__anchor { position: relative; }

.float--oque {
  width: 1em;
  left: .95em;
  bottom: .6em;
  z-index: 2;
}

/* ==========================================================================
   CONQUISTAS
   ========================================================================== */
.ganhos { overflow: hidden; }

.stripes {
  position: absolute;
  top: 18%;
  display: grid;
  width: 9vw;
  height: 44%;
}

.stripes i:nth-child(1) { background: var(--azul-vivo); }
.stripes i:nth-child(2) { background: var(--gelo); }
.stripes i:nth-child(3) { background: var(--manteiga); }
.stripes i:nth-child(4) { background: var(--salmao); }
.stripes i:nth-child(5) { background: var(--terracota); }

.stripes--l { left: 0; border-radius: 0 20px 20px 0; overflow: hidden; }
.stripes--r { right: 0; border-radius: 20px 0 0 20px; overflow: hidden; }

.wins {
  max-width: 980px;
  margin: 12px auto 0;
}

.wins__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 18px;
  padding-block: clamp(14px, 1.8vw, 22px);
  border-bottom: 1px solid rgba(195, 232, 232, .16);
  text-align: center;
}

.wins__row strong {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 78, "opsz" 96;
  font-size: clamp(2.2rem, 6.2vw, 5.6rem);
  line-height: .95;
  letter-spacing: -.022em;
  color: #fff;
  transition: color .3s;
}

.wins__row span {
  max-width: 260px;
  font-size: .95rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .65);
  text-align: left;
}

.wins__row:hover strong { color: var(--gelo); }

/* ==========================================================================
   PRA QUEM É
   ========================================================================== */
.praquem__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(48px, 6vw, 80px);
}

.polaroid {
  position: relative;
  margin: 0;
  padding: 14px 14px 18px;
  background: #fffdf8;
  box-shadow: 0 30px 60px -24px rgba(11, 28, 42, .4);
  transform: rotate(var(--tilt, 0deg));
}

.polaroid img { width: 100%; height: auto; }

.polaroid figcaption {
  margin-top: 12px;
  font-size: 1.7rem;
  text-align: center;
  color: var(--terracota);
}

.tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 120px;
  height: 32px;
  background: rgba(241, 228, 173, .8);
  transform: translateX(-50%) rotate(-3deg);
}

.checklist { counter-reset: none; }

.checklist li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 18px;
  padding-block: 18px;
  border-bottom: 1px solid var(--noite);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.checklist li:first-child { border-top: 1px solid var(--noite); }

.checklist li::before {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--noite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3e8e8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 60% no-repeat;
}

.float--praquem-a { width: clamp(120px, 13vw, 210px); left: 26%; top: -12%; }
.float--praquem-b { width: clamp(80px, 8vw, 130px); left: -3%; bottom: -6%; }

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.depo__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  max-width: 1040px;
  margin: clamp(48px, 6vw, 72px) auto;
}

.phone { margin: 0; }

.phone__screen {
  overflow: hidden;
  aspect-ratio: 9 / 16;
  padding: 8px;
  border-radius: 36px;
  background: #1a2e3f;
  box-shadow: inset 0 0 0 1px rgba(195, 232, 232, .18);
}

.phone__screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 28px;
  background: var(--azul);
}

.phone figcaption {
  margin-top: 16px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  text-align: center;
}

.phone:nth-child(2) { translate: 0 40px; }

/* ==========================================================================
   SOBRE A RAI
   ========================================================================== */
.sobre { overflow: hidden; }

.sobre__vert {
  position: absolute;
  top: 50%;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: .8;
  letter-spacing: -.022em;
  text-transform: uppercase;
  color: var(--terracota-escuro);
  writing-mode: vertical-rl;
}

.sobre__vert--l { left: -.08em; transform: translateY(-50%) rotate(180deg); }
.sobre__vert--r { right: -.08em; transform: translateY(-50%); }

.sobre__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1040px;
  margin: clamp(40px, 5vw, 64px) auto 0;
}

.sobre__arch {
  position: relative;
  width: clamp(260px, 28vw, 400px);
  aspect-ratio: 3 / 4.1;
  border-radius: 999px 999px 26px 26px;
  background: var(--azul);
  box-shadow: 0 0 0 8px var(--manteiga), 0 50px 80px -30px rgba(11, 28, 42, .55);
}

.sobre__arch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 20%;
  border-radius: inherit;
}

.sobre__seal {
  position: absolute;
  left: -38px;
  bottom: 40px;
  width: 110px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--manteiga);
  animation: spin-plain 22s linear infinite;
}

.sobre__seal text {
  font: 700 11.5px var(--f-body);
  letter-spacing: .1em;
  fill: var(--noite);
}

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

.sobre__quote {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
}

.sobre__small {
  margin-bottom: 16px;
  font-size: .98rem;
  line-height: 1.45;
}

.sobre__list { display: grid; gap: 8px; }

.sobre__list li {
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(11, 28, 42, .16);
  font-weight: 600;
  line-height: 1.3;
}

.sobre__years {
  display: flex;
  justify-content: space-between;
  max-width: 1040px;
  margin: clamp(-80px, -6vw, -32px) auto 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(3.6rem, 11vw, 10rem);
  line-height: .8;
  letter-spacing: -.028em;
  text-transform: uppercase;
  color: var(--noite);
  pointer-events: none;
}

/* ==========================================================================
   PINGUIM WIMBERG
   ========================================================================== */
.quotes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

.quotes li {
  padding: 14px 26px;
  border: 2px solid var(--noite);
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}

.quotes li:nth-child(2) { background: var(--noite); color: var(--manteiga); }

.pinguim__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  margin-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px);
}

.pinguim__big {
  margin-bottom: 24px;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(3.4rem, 9vw, 8.4rem);
  line-height: .84;
  letter-spacing: -.028em;
  text-transform: uppercase;
  color: var(--azul);
}

.pinguim__text {
  max-width: 480px;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
}

.pinguim__media {
  position: relative;
  display: grid;
  place-items: end center;
}

.pinguim__disc {
  position: absolute;
  inset: 12% 6% 0;
  border-radius: 50%;
  background: var(--azul);
}

.pinguim__rai {
  position: relative;
  width: min(100%, 460px);
  height: auto;
  -webkit-mask: linear-gradient(180deg, #000 82%, transparent);
          mask: linear-gradient(180deg, #000 82%, transparent);
}

.float--pinguim { width: clamp(120px, 14vw, 220px); left: -4%; bottom: -4%; }

.pinguim__note {
  position: absolute;
  z-index: 5;
  right: 0;
  top: 6%;
  transform: rotate(8deg);
  color: var(--terracota-escuro);
}

/* ==========================================================================
   O QUE VOCÊ RECEBE
   ========================================================================== */
.recebe__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 50vw, 680px);
}

.recebe__video {
  width: min(720px, 92vw);
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask: radial-gradient(circle, #000 58%, transparent 71%);
          mask: radial-gradient(circle, #000 58%, transparent 71%);
}

.recebe__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 78, "opsz" 96;
  font-size: clamp(3rem, 9vw, 8.4rem);
  line-height: .86;
  letter-spacing: -.024em;
  text-align: center;
  color: #fff;
  text-shadow: 5px 5px 0 var(--noite);
  pointer-events: none;
}

/* folga nas "caixas" das palavras para a sombra não ser cortada */
.recebe__title .w {
  padding: 0 8px 12px 0;
  margin: 0 -8px -12px 0;
}

/* Colagem no centro, 2 itens de cada lado */
.recebe__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  /* linhas do meio seguem o item mais alto: topos alinhados dos dois lados */
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: clamp(32px, 4vw, 56px);
}

.recebe__layout .recebe__stage {
  grid-column: 2;
  grid-row: 1 / -1;
  min-height: 0;
}

.recebe__layout .recebe__video { width: 100%; }

.recebe__layout .recebe__title { font-size: clamp(2.8rem, 6.4vw, 6.2rem); }

.recebe__layout .specs { display: contents; }

.recebe__layout .spec:nth-child(1),
.recebe__layout .spec:nth-child(2) {
  grid-column: 1;
  text-align: right;
}

.recebe__layout .spec:nth-child(3),
.recebe__layout .spec:nth-child(4) { grid-column: 3; }

.recebe__layout .spec:nth-child(odd) { grid-row: 2; }
.recebe__layout .spec:nth-child(even) { grid-row: 3; }

.specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 56px);
}

.spec {
  padding-top: 18px;
  border-top: 1px solid var(--noite);
}

.spec__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: var(--noite);
  color: var(--gelo);
  font-family: var(--f-pixel);
  font-size: .72rem;
  text-transform: uppercase;
}

.spec--hot .spec__tag { background: var(--terracota); color: #fff; }

.spec p {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}

.spec p b { font-weight: 800; }

/* ==========================================================================
   OFERTA
   ========================================================================== */
.oferta { overflow: hidden; }

.price {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}

.price__label {
  margin-top: clamp(28px, 3vw, 40px);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

/* TV em cartão inclinado (o fundo do vídeo é o estúdio azul) */
.price__tv {
  position: relative;
  z-index: 2;
  width: clamp(250px, 30vw, 420px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 32px;
  box-shadow: 0 40px 70px -30px rgba(11, 28, 42, .55);
}

.price__tv video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price__giant {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(5rem, 22vw, 21rem);
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--noite);
  white-space: nowrap;
}

.price__cash {
  margin-top: 18px;
  font-family: var(--f-pixel);
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  text-transform: uppercase;
}

.price__cta {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: clamp(36px, 4vw, 56px);
}

.price__day {
  max-width: 440px;
  line-height: 1.45;
}

.garantia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 64px);
  max-width: 900px;
  margin-inline: auto;
}

.stamp {
  flex: none;
  width: clamp(160px, 18vw, 220px);
  rotate: -10deg;
}

.stamp__bg { fill: var(--terracota); }
.stamp__ring { fill: none; stroke: var(--manteiga); stroke-width: 2; stroke-dasharray: 3 5; }
.stamp__text { fill: #fff; font: 700 15.5px var(--f-body); letter-spacing: .12em; }
.stamp__num { fill: var(--manteiga); font: 800 64px var(--f-display); }

.stamp text:first-of-type {
  transform-origin: 100px 100px;
  animation: spin-plain 28s linear infinite;
}

.garantia__text {
  max-width: 480px;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.45;
}

.garantia__text b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.35em;
  line-height: 1.05;
  letter-spacing: -.02em;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
}

.faq__head {
  position: sticky;
  top: 48px;
}

.qa { border-bottom: 1px solid var(--noite); }
.qa:first-child { border-top: 1px solid var(--noite); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 26px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gelo);
  font-family: var(--f-body);
  font-size: 1.4rem;
  transition: transform .35s var(--ease), background-color .3s;
}

.qa[open] summary::after {
  transform: rotate(45deg);
  background: var(--terracota);
  color: #fff;
}

/* enquanto fecha, o ícone já volta ao "+" */
.qa.is-closing summary::after {
  transform: none;
  background: var(--gelo);
  color: inherit;
}

.qa p {
  max-width: 560px;
  padding-bottom: 26px;
  font-size: 1.08rem;
  line-height: 1.55;
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.final {
  --bg: #10263a;
  overflow: hidden;
  color: #fff;
  padding-block: calc(var(--sec-pad) + 20px);
}

.final__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 50%;
}

.final__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 28, 42, .1), rgba(11, 28, 42, .35) 32%, rgba(11, 28, 42, .9) 58%);
}

.final__inner {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}

.final__art { position: relative; }

.final__sticker {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-inline: auto;
  rotate: -6deg;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .2));
}

.float--final { width: clamp(90px, 10vw, 150px); right: 0; top: -10%; }

.final__title {
  margin-bottom: 24px;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 80, "opsz" 96;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.022em;
}

.final__text {
  max-width: 600px;
  margin-bottom: 16px;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
}

.final .btn { margin-top: 20px; }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  padding-bottom: 36px;
  background: var(--noite);
  color: rgba(255, 255, 255, .6);
  font-size: .85rem;
}

.footer__stripes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 14px;
}

.footer__stripes i:nth-child(1) { background: var(--azul-vivo); }
.footer__stripes i:nth-child(2) { background: var(--gelo); }
.footer__stripes i:nth-child(3) { background: var(--manteiga); }
.footer__stripes i:nth-child(4) { background: var(--salmao); }
.footer__stripes i:nth-child(5) { background: var(--terracota); }

.footer__word {
  margin-block: clamp(40px, 6vw, 80px) clamp(24px, 3vw, 40px);
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(3.6rem, 13.5vw, 13rem);
  line-height: .8;
  letter-spacing: -.03em;
  text-align: center;
  text-transform: uppercase;
  color: var(--gelo);
  white-space: nowrap;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(195, 232, 232, .14);
}

/* ==========================================================================
   Popup (com papel)
   ========================================================================== */
.modal {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.modal::backdrop {
  background: rgba(11, 28, 42, .72);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.modal[open] { animation: pop .4s var(--ease); }

@keyframes pop {
  from { opacity: 0; transform: translateY(24px) rotate(-1.5deg) scale(.96); }
  to { opacity: 1; transform: none; }
}

.modal__card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: clamp(28px, 5vw, 40px);
  border-radius: 28px;
  background-color: var(--gelo);
  background-image: url("../img/textura-papel.webp");
  background-size: 1200px auto;
  background-blend-mode: multiply;
  box-shadow: 10px 10px 0 var(--terracota);
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--noite);
  transition: background-color .2s;
}

.modal__close:hover { background: rgba(11, 28, 42, .08); }

.modal__close svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.modal__eyebrow {
  justify-self: start;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--terracota);
  rotate: -3deg;
}

.modal__title {
  margin-bottom: 6px;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 78, "opsz" 96;
  font-size: clamp(2.2rem, 6vw, 3rem);
  line-height: .9;
  letter-spacing: -.022em;
  text-transform: uppercase;
}

.field { display: grid; gap: 8px; }

.field span {
  font-family: var(--f-pixel);
  font-size: .78rem;
  text-transform: uppercase;
  color: var(--azul);
}

.field input {
  width: 100%;
  min-height: 54px;
  padding: 12px 18px;
  border: 2px solid var(--azul);
  border-radius: 14px;
  background: #f7fcfc;
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}

.field input::placeholder { color: #7a8e9c; }

.field input:focus {
  outline: none;
  border-color: var(--terracota);
  box-shadow: 0 0 0 4px rgba(199, 99, 80, .2);
}

.modal .btn { margin-top: 10px; }

.modal__note {
  font-size: .85rem;
  text-align: center;
  color: var(--terracota-escuro);
}

/* ==========================================================================
   Entrada (fallback sem GSAP)
   ========================================================================== */
.js .reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .7s var(--ease), translate .7s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1100px) {
  .stripes { display: none; }
  .sobre__vert { display: none; }
}

@media (max-width: 1024px) {
  .cards3 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* em telas menores a colagem volta para cima e os itens para baixo */
  .recebe__layout { display: block; }
  .recebe__layout .recebe__stage { min-height: clamp(320px, 50vw, 680px); }
  .recebe__layout .recebe__video { width: min(640px, 92vw); }
  .recebe__layout .specs { display: grid; }
  .recebe__layout .spec:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    text-align: left;
  }
}

@media (max-width: 860px) {
  .hero__top { flex-direction: column; align-items: center; text-align: center; }
  .hero__aside { max-width: 420px; text-align: center; }
  .hero__stage { height: clamp(440px, 118vw, 640px); }
  .hero__giant { top: 6%; font-size: clamp(76px, 23vw, 200px); }
  .hero__rai { height: 86%; bottom: -40px; }
  .hero__note { top: auto; bottom: 26%; left: var(--gutter); font-size: 1.25rem; }
  .note__arrow { width: 56px; }
  .hero__sticker { top: auto; bottom: 30%; width: 96px; }

  .vsl__device { margin-top: -.4rem; }
  .float--vsl-a { width: 60px; left: 3%; top: 4%; }
  .float--vsl-b { width: 64px; right: 4%; bottom: 5%; }
  .pinguim__note { right: 4%; }

  /* no celular o termômetro sobe para não cobrir os botões */
  .thermo {
    top: 12px;
    bottom: auto;
    left: auto;
    right: 12px;
    padding: 7px 14px 7px 10px;
  }

  .thermo__bulb { height: 24px; width: 8px; }
  .thermo__temp { font-size: .9rem; }

  .dor__grid,
  .oque__head,
  .praquem__grid,
  .pinguim__grid,
  .faq__grid,
  .final__inner { grid-template-columns: 1fr; }

  .dor__media { max-width: 440px; margin-inline: auto; }
  .dor .h-xl { white-space: normal; }
  .float--oque { display: none; } /* no celular o "pra" vai pro início da linha e o gelo cobriria a linha de cima */
  .chat__msg { white-space: normal; }
  .br-desk { display: none; }
  .br-mob { display: inline; }
  #praquem-title { white-space: normal; font-size: clamp(3.4rem, 15vw, 6rem); }
  .float--dor-a { left: -6%; }
  .float--dor-b { right: -4%; }


  .wins__row span { text-align: center; }

  .praquem__photo { max-width: 340px; margin-inline: auto; }
  .float--praquem-a { left: auto; right: 0; top: -8%; }

  .depo__grid {
    grid-template-columns: repeat(3, 74%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: 8px var(--gutter) 24px;
  }

  .phone { scroll-snap-align: center; }
  .phone:nth-child(2) { translate: none; }

  .sobre__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sobre__grid > .sobre__arch { order: -1; }
  .sobre__list li { text-align: left; }
  .sobre__years { margin-top: 32px; }

  .pinguim__grid > div:first-child { text-align: center; }
  .pinguim__text { margin-inline: auto; }
  .pinguim__media { max-width: 420px; margin-inline: auto; }

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

  .faq__head { position: static; }

  .final__inner { text-align: center; }
  .final__sticker { max-width: 200px; }
  .final__text { margin-inline: auto; }
  .final .tag { justify-content: center; }
  .final__shade { background: linear-gradient(180deg, rgba(11, 28, 42, .2), rgba(11, 28, 42, .85) 38%); }

  .thermo__label { display: none; }
}

@media (max-width: 560px) {
  .specs { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: space-between; }
  .price__tv { width: 78vw; }
  .checklist li { grid-template-columns: 36px 1fr; gap: 14px; }
  .checklist li::before { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .burst,
  .hero__sticker,
  .float,
  .ticker__track,
  .sobre__seal,
  .stamp text:first-of-type { animation: none; }
  .js .reveal { opacity: 1; translate: none; }
  .js .scribble:not(.is-in) { background-size: 100% .38em; }
  .scribble { transition: none; }
}