/* Corpo em Dia: página do app (mesma paleta do app: marinho, violeta, lavanda, laranja, rosa e água) */
:root {
  --marinho: #23264f;
  --marinho-2: #2e3266;
  --violeta: #5b4bdb;
  --violeta-escuro: #4335c2;
  --violeta-claro: #e6e1fd;
  --lavanda: #f1eefc;
  --laranja: #ff8a3d;
  --rosa: #e23e7e;
  --texto: #23264f;
  --texto-2: #565a80;
  --cartao: #fff;
  --faixa: #fff;
  --tag-violeta: #ece9ff; --tag-violeta-t: #4335c2;
  --tag-agua: #e3f0fc; --tag-agua-t: #1565c0;
  --tag-laranja: #fff1e6; --tag-laranja-t: #b4500f;
  --tag-rosa: #fde7ef; --tag-rosa-t: #b0255c;
  --tag-verde: #e8f7f1; --tag-verde-t: #12775a;
  --pad: clamp(16px, 4vw, 48px);
  --titulo: "Fredoka", system-ui, sans-serif;
  --corpo: "Nunito", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lavanda: #171936; --texto: #f1eefc; --texto-2: #b5b8dc; --cartao: #21244c; --faixa: #1c1f42; --violeta-claro: #2c2a6b;
    --tag-violeta: #2c2a6b; --tag-violeta-t: #c9c1ff;
    --tag-agua: #17345a; --tag-agua-t: #9fcdfa;
    --tag-laranja: #4a2a12; --tag-laranja-t: #ffc49b;
    --tag-rosa: #4a1a33; --tag-rosa-t: #ffb3cf;
    --tag-verde: #123b30; --tag-verde-t: #8fe0c2;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--lavanda); color: var(--texto); font: 500 17px/1.6 var(--corpo); }
img { max-width: 100%; display: block; }
a { color: var(--violeta); font-weight: 800; }
@media (prefers-color-scheme: dark) { a { color: #a99cff; } }
.pular { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--marinho); padding: 8px 14px; border-radius: 10px; z-index: 10; }
.pular:focus { left: 8px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.barra { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); }
.barra a { color: #fff; text-decoration: none; }
.voltar { font-weight: 700; opacity: .8; }
.voltar:hover { opacity: 1; }
.marca { display: flex; align-items: center; gap: 10px; font: 600 20px var(--titulo); }
.marca img { border-radius: 9px; }

/* abertura: como a tela de entrada do app */
.abertura { background: var(--marinho); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 110px clamp(16px, 5vw, 72px) 56px; min-height: 92vh; overflow: hidden; }
.selo { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-weight: 800; font-size: 14px; color: #c9cbea; }
.titulo { margin: 0; font: 600 clamp(52px, 7.4vw, 104px)/.95 var(--titulo); letter-spacing: -.01em; }
.chamada { margin: 14px 0 0; font: 600 clamp(22px, 2.6vw, 32px)/1.2 var(--titulo); color: #ffc49b; }
.lead { color: #d9daf3; max-width: 30em; font-size: 18px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border-radius: 18px; font: 800 17px var(--corpo); text-decoration: none; transition: transform .1s ease; }
.btn:active { transform: scale(.98); }
.btn-cheio { background: var(--violeta); color: #fff !important; }
.btn-cheio:hover { background: #4a3bc6; }
.btn-vidro { background: rgba(255, 255, 255, .1); color: #fff !important; border: 2px solid rgba(255, 255, 255, .25); }

/* baixar */
.baixar { padding: 0 clamp(16px, 5vw, 72px); margin-top: -36px; position: relative; z-index: 2; }
.cartao-baixar { max-width: 980px; margin: 0 auto; background: var(--cartao); border-radius: 28px; padding: 24px 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; box-shadow: 0 24px 60px -30px rgba(35, 38, 79, .45); }
.cartao-baixar img { border-radius: 22px; width: 84px; height: 84px; }
.cartao-baixar h2 { margin: 0; font: 600 28px var(--titulo); }
.acoes-baixar { display: flex; flex-direction: column; gap: 10px; }
.btn-claro { background: var(--violeta-claro); color: var(--texto) !important; }
.ficha { margin: 4px 0 0; font-weight: 800; color: var(--texto-2); }
.nota { margin: 4px 0 0; font-size: 15px; color: var(--texto-2); }

/* áreas do app: texto de um lado, as telas do outro (alternando); faixas brancas e a do cardio à noite */
.area { --fundo-area: transparent; position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1240px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--pad); }
#dia { padding-top: 88px; }
.area.faixa, .area.noite { max-width: none; padding-left: max(var(--pad), calc((100% - 1240px) / 2 + var(--pad))); padding-right: max(var(--pad), calc((100% - 1240px) / 2 + var(--pad))); }
.area.faixa { background: var(--faixa); }
.area.faixa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.area.faixa .area-texto { order: 2; }
.area.noite { background: var(--marinho); color: #fff; }
.area.noite .area-lead, .area.noite .feitos { color: #d9daf3; }
.area.noite .cel figcaption { color: #c9cbea; }
.area.noite .cel button { border-color: #3a3f78; }
.etiqueta { display: inline-block; margin: 0 0 12px; padding: 5px 13px; border-radius: 999px; font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.etiqueta.violeta { background: var(--tag-violeta); color: var(--tag-violeta-t); }
.etiqueta.agua { background: var(--tag-agua); color: var(--tag-agua-t); }
.etiqueta.laranja { background: var(--tag-laranja); color: var(--tag-laranja-t); }
.etiqueta.rosa { background: var(--tag-rosa); color: var(--tag-rosa-t); }
.etiqueta.verde { background: var(--tag-verde); color: var(--tag-verde-t); }
.area.noite .etiqueta.agua { background: #17345a; color: #9fcdfa; }
.area h2, .academia h2, .saber h2 { margin: 0; font: 600 clamp(32px, 4vw, 48px)/1.08 var(--titulo); letter-spacing: -.005em; }
.area-lead { margin: 12px 0 0; font-size: 19px; line-height: 1.5; color: var(--texto); font-weight: 700; }
.feitos { list-style: none; margin: 18px 0 0; padding: 0; color: var(--texto-2); }
.feitos li { position: relative; padding-left: 22px; margin: 10px 0; }
.feitos li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; border-radius: 3px; background: var(--marca, var(--violeta)); }
.area:has(.etiqueta.agua) { --marca: #1e88e5; }
.area:has(.etiqueta.laranja) { --marca: var(--laranja); }
.area:has(.etiqueta.rosa) { --marca: var(--rosa); }
.area:has(.etiqueta.verde) { --marca: #1fa37a; }
.area.noite { --marca: #5fb0f5; }

/* as telas: celulares lado a lado, o do meio mais alto */
.telas { display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 1.6vw, 22px); }
.cel { margin: 0; flex: 0 1 216px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.telas .cel:nth-child(2):not(:last-child) { margin-top: -28px; }
.telas:has(> .cel:nth-child(2):last-child) .cel, .telas .cel:only-child { flex-basis: 240px; }
.cel button { display: block; width: 100%; padding: 0; border: 6px solid var(--marinho); border-radius: 30px; overflow: hidden; background: var(--marinho); cursor: zoom-in; box-shadow: 0 30px 60px -34px rgba(35, 38, 79, .6); transition: transform .2s ease, box-shadow .2s ease; }
.cel button:hover { transform: translateY(-4px); box-shadow: 0 36px 70px -34px rgba(35, 38, 79, .7); }
.cel button:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }
.cel img { width: 100%; height: auto; }
.cel figcaption { font-weight: 800; font-size: 14px; color: var(--texto-2); text-align: center; }

.academia, .saber { max-width: 1080px; margin: 72px auto 0; padding: 32px clamp(20px, 4vw, 40px); background: var(--cartao); border-radius: 28px; }
.academia { background: var(--marinho); color: #fff; }
.academia p { color: #d9daf3; max-width: 46em; }
.saber ul { margin: 12px 0 0; padding-left: 20px; color: var(--texto-2); }
.saber li { margin: 6px 0; }
@media (max-width: 1120px) { .academia, .saber { margin-left: var(--pad); margin-right: var(--pad); } }

/* tela ampliada */
.zoom { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; color: #fff; }
.zoom[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.zoom::backdrop { background: rgba(18, 20, 46, .86); }
.zoom img { max-height: calc(100dvh - 120px); width: auto; max-width: calc(100vw - 32px); border-radius: 26px; border: 6px solid var(--marinho); background: var(--marinho); }
.zoom p { margin: 0; font-weight: 800; text-align: center; padding: 0 16px; }
.zoom-fechar { position: fixed; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font: 600 30px/1 var(--corpo); cursor: pointer; }
.zoom-fechar:hover { background: rgba(255, 255, 255, .24); }

.rodape { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; padding: 48px 16px; color: var(--texto-2); }
.rodape p { margin: 0; }

/* privacidade */
.texto-longo { max-width: 760px; margin: 0 auto; padding: 120px 20px 40px; }
.texto-longo h1 { font: 600 clamp(36px, 5vw, 52px)/1.1 var(--titulo); margin: 0 0 8px; }
.texto-longo h2 { font: 600 24px var(--titulo); margin: 36px 0 8px; }
.texto-longo p, .texto-longo li { color: var(--texto-2); }
.barra.clara { background: var(--marinho); position: fixed; }

@media (max-width: 900px) {
  .abertura { grid-template-columns: 1fr; padding-top: 96px; min-height: 0; }
  .cartao-baixar { grid-template-columns: auto 1fr; }
  .cartao-baixar .acoes-baixar { grid-column: 1 / -1; }
  .area, .area.faixa, .area.noite { grid-template-columns: 1fr; padding-left: var(--pad); padding-right: var(--pad); }
  .area.faixa .area-texto { order: 0; }
  /* no celular, as telas rolam de lado, encostando nas bordas */
  .telas { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--pad)); padding: 8px var(--pad) 18px; scrollbar-width: none; }
  .telas::-webkit-scrollbar { display: none; }
  .cel, .telas:has(> .cel:nth-child(2):last-child) .cel, .telas .cel:only-child { flex: 0 0 min(64vw, 260px); scroll-snap-align: center; }
  .telas .cel:nth-child(2):not(:last-child) { margin-top: 0; }
  .telas:has(.cel:only-child) { justify-content: center; }
}
@media (max-width: 520px) {
  .cartao-baixar { grid-template-columns: 56px 1fr; gap: 14px; padding: 20px; }
  .cartao-baixar img { width: 56px; height: 56px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cel button { transition: none; }
}

/* Página comercial */
.comercial-barra nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 32px); }
.comercial-barra nav a { display: inline-flex; align-items: center; min-height: 44px; }
.comercial-barra .menu-entrar { border: 1px solid #aaa7e0; padding: 0 18px; border-radius: 999px; }
.comercial-abertura {
  min-height: auto; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
  padding: 115px max(var(--pad), calc((100% - 1320px) / 2 + var(--pad))) clamp(44px, 6vw, 88px);
  background: radial-gradient(ellipse at 82% 62%, #3d397a 0, var(--marinho) 54%);
}
.comercial-abertura .titulo { font-size: clamp(46px, 6vw, 82px); line-height: .99; max-width: 13ch; }
.comercial-abertura .titulo em { font-style: normal; color: #bdb0ff; }
.entrada-nota { color: #dedcf6; font-size: 15px; margin-bottom: 0; }
.vitrine { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 28px 0; }
.vitrine-tela { margin: 0; width: min(45%, 235px); padding: 7px; background: #161833; border: 1px solid #726bb3; border-radius: clamp(15px, 2vw, 28px); box-shadow: 0 24px 50px #151637aa; }
.vitrine-tela img { width: 100%; height: auto; border-radius: clamp(11px, 1.5vw, 22px); }
.vitrine-tela figcaption { text-align: center; font-weight: 800; font-size: 13px; padding-top: 5px; }
.vitrine-frente { transform: rotate(-6deg) translateX(6%); z-index: 1; }
.vitrine-fundo { transform: rotate(7deg) translate(-3%, 4%); }
.comercial-bloco { max-width: 1240px; margin-inline: auto; padding: clamp(40px, 5vw, 78px) var(--pad); }
.comercial-bloco h2 { margin: 0 0 18px; font: 600 clamp(32px, 4vw, 52px)/1.08 var(--titulo); }
.comercial-bloco h3 { font: 600 25px/1.12 var(--titulo); margin: 0 0 8px; }
.comercial-bloco p:not(.etiqueta) { color: var(--texto-2); }
.grade-caminhos, .planos-grade { display: grid; gap: 16px; }
.grade-caminhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.planos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-caminhos article, .plano-card { background: var(--cartao); border-radius: 22px; padding: clamp(18px, 3vw, 30px); }
.grade-caminhos article { border-top: 4px solid var(--violeta); }
.grade-caminhos article:nth-child(2) { border-color: #218879; }
.grade-caminhos article:nth-child(3) { border-color: #e38447; }
.comercial-planos { padding-top: 12px; }
.plano-card { display: flex; flex-direction: column; align-items: flex-start; }
.plano-card p { margin: 0 0 16px; }
.plano-card .btn { margin-top: auto; }
.precos { list-style: none; margin: 0 0 20px; padding: 0; width: 100%; }
.precos li { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 3px 12px; padding: 9px 0; border-top: 1px solid var(--violeta-claro); }
.precos li small { grid-column: 1 / -1; color: var(--texto-2); }
.precos li b { text-align: right; }
.canais-acesso { margin-top: 0; }
.comercial-contato > p:not(.etiqueta) { max-width: 62ch; }
.comercial-contato .acoes { margin-top: 12px; }
@media (max-width: 759px) {
  .comercial-abertura { grid-template-columns: 1fr; padding-top: 105px; gap: 4px; }
  .comercial-abertura .titulo { max-width: 13ch; }
  .comercial-barra .menu-recurso { display: none; }
  .vitrine-tela { width: min(39%, 190px); }
  .grade-caminhos { grid-template-columns: 1fr; }
}
@media (max-width: 630px) {
  .planos-grade { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .comercial-barra .marca { font-size: 16px; gap: 6px; }
  .comercial-barra .menu-entrar { padding: 0 10px; }
}