/* Carregar css/tokens.css antes deste arquivo. */

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

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 16px;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--fonte);
  font-style: normal;
  font-synthesis: none;
  letter-spacing: 0;
}

.hero :where(h1, p) {
  margin: 0;
}

.hero img {
  display: block;
}

.hero :where(a, button, summary):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 4px;
}

/* Menu: 80px = padding 16px + barra 48px + padding 16px. */

.hero__menu {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 80px;
  padding: 12px 16px;
  border-radius: var(--raio-cartao);
  background: var(--papel);
}

.hero__logo {
  /* Figma: 113 × 36px. */
  flex: 0 0 113px;
  width: 113px;
  height: 36px;
}

.hero__navegacao,
.hero .hero__botao-menu {
  display: none;
}

.hero__acoes-menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: #474b66;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  transition: color 200ms ease-out;
}

.hero__link:hover,
.hero__link:focus-visible {
  color: var(--azul);
  text-decoration: underline;
  text-underline-position: under;
}

.hero__menu-recolhido {
  position: relative;
}

.hero__abrir-menu {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #e7c03f;
  border-radius: 12px;
  background: linear-gradient(to top, #ffcd00, #f4db90);
  cursor: pointer;
  list-style: none;
}

.hero__abrir-menu::-webkit-details-marker {
  display: none;
}

.hero__abrir-menu img {
  width: 24px;
  height: 24px;
  transition: transform 240ms ease-out;
}

.hero__abrir-menu[aria-expanded="true"] img {
  transform: rotate(180deg);
}

/* Painel 279:1193: margens e geometria medidas no Figma. */
.hero__submenu {
  position: fixed;
  left: var(--menu-esquerda, 16px);
  top: var(--menu-topo, 114px);
  bottom: 23px;
  width: var(--menu-largura, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 24px 1px;
  border: 2px solid #c1cfff;
  border-right-color: #b0c1ff;
  border-radius: 24px 0 24px 24px;
  background: linear-gradient(90deg, rgb(244 246 254 / 90%), rgb(235 240 255 / 90%));
  backdrop-filter: blur(4px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}

.hero__menu-recolhido[data-aberto] .hero__submenu,
.hero__menu-recolhido:not([data-menu-pronto])[open] .hero__submenu {
  opacity: 1;
  transform: none;
}

.hero__submenu > * { flex-shrink: 0; }
.hero__midia, .hero__redes { display: flex; align-items: center; }
.hero__midia {
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .08em;
}
.hero__redes { gap: 24px; }
.hero__rede { display: block; position: relative; width: 24px; height: 24px; }
.hero__rede::before { content: ""; position: absolute; inset: -8px; }
.hero__rede::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: var(--tinta);
  mask: var(--icone-rede) center / contain no-repeat;
}
.hero__rede--instagram { --icone-rede: url("../../assets/img/rodape/icone-instagram.svg"); }
.hero__rede--whatsapp { --icone-rede: url("../../assets/img/rodape/icone-whatsapp.svg"); }
.hero__atalhos, .hero__links-celular {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.hero__atalhos { gap: 56px; }
.hero__links-celular { gap: 8px; }
.hero__submenu .hero__todos-temas { width: 262px; max-width: 100%; }
.hero__fechar-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding-inline: 24px;
  color: var(--cinza-700);
  font-size: 12px;
  line-height: 24px;
}
.hero__fechar-menu span { width: 12px; color: var(--tinta); font-size: 16px; }

/* Bloqueio temporário do modal; não mascara overflow da página fechada. */
html.menu-aberto { overflow: hidden; }
html.menu-aberto body {
  position: fixed;
  top: var(--menu-rolagem);
  width: var(--menu-pagina);
}

@media (prefers-reduced-motion: reduce) {
  .hero__submenu, .hero__abrir-menu img { transition: none; }
}

/* Cartão: o raio lido é 24px nos três frames. */

.hero__cartao {
  --base: 358;

  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  overflow: hidden;
  border-radius: var(--raio-cartao);
  background-color: #f4f6fe;

  /*
   * Gradiente radial do Figma, com sua transformação afim preservada.
   * O SVG contém somente o preenchimento geométrico, sem imagens ou textos.
   * As duas cores não existem nos tokens fornecidos.
   */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='1' gradientTransform='matrix(.9914434963 .9862905115 -.3145156775 1.4856639778 .0085565333 .0137095179)'%3E%3Cstop offset='.475961566' stop-color='%23f4f6fe'/%3E%3Cstop offset='1' stop-color='%23d1dbfe'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 0H1V1H0Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.hero__conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-width: 0;
  padding: 16px;
}

.hero__cabecalho,
.hero__selo-titulo,
.hero__conversao,
.hero__botoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.hero__cabecalho {
  gap: 16px;
}

.hero__selo-titulo {
  gap: 24px;
}

.hero__selo,
.hero__prova {
  border: 2px solid transparent;
  background:
    linear-gradient(to right, #f4f6fe, #ebf0ff) padding-box,
    linear-gradient(to right, #c1cfff, #b0c1ff) border-box;
}

.hero__selo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;

  /* Figma: selo HUG 327px dentro de um contêiner de 326px. */
  max-width: calc(100% + 1px);
  padding: 8px;
  border-radius: var(--raio-cartao);
  color: #5e637f;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.hero__selo img {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.hero__selo span {
  min-width: 0;
}

.hero__titulo {
  /* Figma celular: largura 294px, fonte 36px e tracking -1,5px. */
  width: calc(100% - 32px);
  color: var(--tinta);
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -1.5px;
  text-align: center;
}

.hero__subtitulo {
  width: 100%;
  color: #5e637f;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
}

.hero__espaco {
  font-weight: 400;
}

.hero__preco {
  /* No celular, o preço também é Medium. */
  font-weight: 500;
}

.hero__conversao,
.hero__botoes {
  gap: 8px;
}

/* Botões: borda incluída nas dimensões, conforme o auto-layout. */

.hero .botao {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 56px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte);

  /* Figma: tamanho de texto 17px. */
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 200ms ease-out,
    background-color 200ms ease-out,
    border-color 200ms ease-out,
    box-shadow 200ms ease-out;
}

.hero .botao--principal {
  border-color: #e7c03f;
  background: linear-gradient(to top, #ffcd00, #f4db90);
  color: #474b66;
}

.hero .botao--principal::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, #fcf0cd, #fef7e2);
  opacity: 0;
  content: "";
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

.hero .botao--principal:hover,
.hero .botao--principal:focus-visible {
  border-color: var(--estrela);
  box-shadow: 0 0 20px rgb(0 0 0 / 10%);
}

.hero .botao--principal:hover::before,
.hero .botao--principal:focus-visible::before {
  opacity: 1;
}

.hero .botao--secundario {
  border-color: var(--tinta);
  background-color: transparent;
  color: var(--tinta);
}

.hero .botao--secundario:hover,
.hero .botao--secundario:focus-visible {
  background-color: var(--tinta);
  color: var(--branco);
}

.hero .hero__botao-principal {
  width: 100%;
}

.hero .hero__pedido {
  width: 100%;
  padding: 16px 8px;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.hero__prova {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 4px;
  border-radius: 16px;
}

.hero__estrelas {
  display: flex;
  flex: 0 0 auto;
}

.hero__estrelas img {
  width: 16px;
  height: 16px;
}

.hero__nota {
  width: 100%;
  color: #474b66;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

.hero__nota strong {
  font-weight: 700;
}

/*
 * Ilustração: coordenadas e dimensões lidas do Figma.
 * Os números fracionários são intencionais.
 * cqw escala a composição proporcionalmente entre os breakpoints.
 */

.hero__visual {
  position: relative;
  z-index: 0;
  container-type: inline-size;
  width: 100%;
  margin-top: 24px;

  /* Figma celular: 358 × 301px. */
  aspect-ratio: 358 / 301;
  overflow: hidden;
  border-radius: 0 0 var(--raio-cartao) var(--raio-cartao);
}

.hero__visual picture {
  display: contents;
}

.hero__imagem,
.hero__anotacao {
  position: absolute;
  left: calc(var(--x) * 100cqw / var(--base));
  top: calc(var(--y) * 100cqw / var(--base));
  width: calc(var(--w) * 100cqw / var(--base));
  height: calc(var(--h) * 100cqw / var(--base));
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
}

.hero__imagem {
  object-fit: cover;
}

.hero__nuvens {
  --x: 0;
  --y: 0;
  --w: 358;
  --h: 360;

  filter: blur(calc(1.1151079 * 100cqw / var(--base)));
}

.hero__astronauta {
  --x: 217.422607;
  --y: 167.308418;
  --w: 135.150330;
  --h: 184.949203;

  filter: blur(calc(.5575539 * 100cqw / var(--base)));
}

.hero__bailarina {
  --x: 202.273117;
  --y: 151.527771;
  --w: 197.573715;
  --h: 264.483673;

  transform: scaleX(-1);
  filter: blur(calc(.2787770 * 100cqw / var(--base)));
}

.hero__menino {
  --x: 337.986877;
  --y: 60;
  --w: 306.775787;
  --h: 410.928070;

  transform: scaleX(-1);
}

.hero__seta {
  /* Recorte renderizado: rotação e traço já incorporados ao arquivo. */
  --x: 17.758545;
  --y: 49.051971;
  --w: 51.190918;
  --h: 96.301727;

  object-fit: fill;
}

.hero__anotacao {
  --x: 43.010742;
  --y: 37.201770;
  --w: 120;
  --h: 72;

  color: var(--azul);
  font-family: var(--fonte-anotacao);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  transform: matrix(.9975640774, -.0697564706, .0697564706, .9975640774, 0, 0);
}

.hero .hero__mao--desktop { display: none; }

.hero__mao {
  --x: 195.166260;
  --w: 162.805756;
  --h: 162.805756;

  z-index: 3;
  top: auto;

  /* Equivale a y=510 no cartão de 889px do celular. */
  bottom: calc(216.194244 * 100cqw / var(--base));
  transform: matrix(.9999743700, .0071641328, -.0071641328, .9999743700, 0, 0);
}

@media (min-width: 768px) {
  .hero {
    padding: 24px 32px 32px;
  }

  .hero__menu,
  .hero__cartao {
    /*
     * Figma: 696px, embora 768 - 32 - 32 = 704px.
     * Preserva os 8px adicionais à direita.
     */
    width: calc(100% - 8px);
  }

  .hero .hero__botao-menu {
    display: inline-flex;

    /* Figma: botão HUG com largura resultante de 260px. */
    width: 260px;
  }

  .hero__cartao {
    --base: 696;
  }

  .hero__conteudo {
    gap: 32px;
    padding: 24px;
  }

  .hero__selo-titulo {
    gap: 32px;
  }

  .hero__titulo {
    /* Figma: 640px em 768; fonte 54px, tracking -2px. */
    width: calc(100% - 8px);
    font-size: 54px;
    line-height: 56px;
    letter-spacing: -2px;
  }

  .hero__preco {
    font-weight: 800;
  }

  .hero__conversao {
    gap: 32px;
  }

  .hero__botoes {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }

  .hero .hero__botao-principal {
    /* Mantém o espaço de 260px mesmo com o texto solicitado mais curto. */
    width: 260px;
  }

  .hero .hero__pedido {
    /* Figma: HUG 224px, incluindo padding horizontal de 8px. */
    width: 224px;
  }

  .hero__prova {
    flex-direction: row;
    width: max-content;
    max-width: 100%;
    padding: 8px;
    border-radius: var(--raio-cartao);
  }

  .hero__nota {
    width: auto;
  }

  .hero__visual {
    margin-top: 0;

    /* Figma tablet: 696 × 439px. */
    aspect-ratio: 696 / 439;
  }

  .hero__nuvens {
    --x: 0;
    --y: -102;
    --w: 696;
    --h: 556;

    filter: blur(calc(1.6202532 * 100cqw / var(--base)));
  }

  .hero__astronauta {
    --x: 390.936523;
    --y: 215.076736;
    --w: 214.073593;
    --h: 292.953308;

    filter: blur(calc(.8101266 * 100cqw / var(--base)));
  }

  .hero__bailarina {
    --x: 366.962830;
    --y: 190.080719;
    --w: 312.972839;
    --h: 418.933197;

    filter: blur(calc(.4050633 * 100cqw / var(--base)));
  }

  .hero__menino {
    --x: 581.986084;
    --y: 45.103752;
    --w: 486.002533;
    --h: 650.896301;
  }

  .hero__seta {
    --x: 87.396240;
    --y: 58.144379;
    --w: 69.770752;
    --h: 131.319611;
  }

  .hero__anotacao {
    --x: 126.305420;
    --y: 25.796570;
    --w: 128.940000;
    --h: 59.240559;
  }

  .hero__mao {
    --x: 474.383606;
    --w: 236.556961;
    --h: 236.556961;

    /* Equivale a y=-54 em relação ao visual. */
    bottom: calc(256.443039 * 100cqw / var(--base));
    transform: matrix(.9927755594, .1199863330, -.1199863330, .9927755594, 0, 0);
  }
}

@media (min-width: 1280px) {
  .hero {
    padding: 32px 48px 48px;
  }

  .hero__menu,
  .hero__cartao {
    width: 100%;
  }

  .hero__navegacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 512px;
    width: 512px;
  }

  .hero__navegacao .hero__link:nth-child(1) {
    width: 64px;
  }

  .hero__navegacao .hero__link:nth-child(2) {
    /* Figma: 50px. */
    width: 50px;
  }

  .hero__navegacao .hero__link:nth-child(3) {
    width: 132px;
  }

  .hero__navegacao .hero__link:nth-child(4) {
    width: 76px;
  }

  .hero__menu-recolhido {
    display: none;
  }

  .hero__cartao {
    --base: 1344;

    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px;
  }

  .hero__conteudo {
    align-items: flex-start;
    gap: 48px;

    /* Figma: 648px dos 1264px internos; reduz fluidamente até 1280. */
    width: calc(100% * 648 / 1264);
    padding: 24px 0;
  }

  .hero__cabecalho,
  .hero__selo-titulo,
  .hero__conversao {
    align-items: flex-start;
  }

  .hero__titulo {
    width: min(600px, 100%);
    font-size: 72px;
    line-height: 64px;

    /* Figma: -2,5%, equivalente a -1,8px em 72px. */
    letter-spacing: -.025em;
    text-align: left;
  }

  .hero__subtitulo {
    text-align: left;
  }

  .hero__conversao {
    gap: 24px;
  }

  .hero__botoes {
    justify-content: flex-start;
  }

  .hero__visual {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    /* Figma: 1344 × 632px, a 4px do topo do cartão de 636px. */
    aspect-ratio: 1344 / 632;
    border-radius: var(--raio-cartao);
  }

  .hero__nuvens {
    --x: -11;
    --y: 0;
    --w: 1366;
    --h: 632;

    filter: blur(calc(2 * 100cqw / var(--base)));
  }

  .hero__astronauta {
    --x: 1069;
    --y: 417;
    --w: 214;
    --h: 293;

    filter: blur(calc(1 * 100cqw / var(--base)));
  }

  .hero__bailarina {
    --x: 1061;
    --y: 368;
    --w: 313;
    --h: 419;

    filter: blur(calc(.5 * 100cqw / var(--base)));
  }

  .hero__menino {
    --x: 1276;
    --y: 223;
    --w: 486;
    --h: 651;
  }

  .hero__seta {
    --x: 803.708740;
    --y: 201.641602;
    --w: 91.813232;
    --h: 172.721771;
  }

  .hero__anotacao {
    --x: 849;
    --y: 180.387695;
    --w: 130.628067;
    --h: 48;
  }

  .hero__mao {
    --x: 1069.036011;
    --w: 292;
    --h: 292;

    /* Dentro do visual, cqw usa 1344px, sem descontar o padding do cartão. */
    bottom: calc(404 * 100cqw / var(--base));
  }

  .hero__cartao > .hero__mao { display: none; }

  .hero .hero__mao--desktop {
    display: block;
    /* Ordem do Figma: nuvens, mão, personagens, anotação; texto acima. */
    z-index: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero *::before,
  .hero *::after {
    transition: none !important;
  }
}

.hero .botao.hero__botao-menu{display:none}
.hero__nuvens{object-fit:cover;object-position:top}
@media (max-width:1279px){.hero__nuvens{filter:none}}
@media (min-width:768px){.hero .botao.hero__botao-menu{display:inline-flex}}
@media (min-width:1280px){.hero__nuvens{filter:blur(calc(2 * 100cqw / var(--base)))}}