/* Monte seu plano, Limão Tênis.
   Só as 5 cores da marca (marca-limao). Erode nos títulos, Plein no texto. */

:root {
  --verde: #143124;
  --verde-2: #16392F;
  --pastel: #BBD8CB;
  --azul: #D4E9FA;
  --gelo: #EAF5FE;

  --erode: 'Erode', serif;
  --plein: 'Plein', sans-serif;

  --margem: 20px;
  --raio-foto: 20px;
  --raio-opcao: 14px;
  --toque: 56px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--gelo);
  color: var(--verde);
  font-family: var(--plein);
  font-size: 17px;
  line-height: 1.5;
}

h1, h2, legend { font-family: var(--erode); font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; margin: 0; }
img { display: block; max-width: 100%; }

.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(--verde); outline-offset: 3px; }

/* Capa ------------------------------------------------------------ */

.capa {
  position: relative;
  min-height: min(60svh, 500px);
  display: grid;
  color: var(--gelo);
  background: var(--verde);
  overflow: hidden;
}

.capa picture, .capa-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.capa-foto { object-fit: cover; object-position: 50% 50%; }

.capa::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(20 49 36 / .55) 0%, rgb(20 49 36 / 0) 30%, rgb(20 49 36 / .2) 50%, rgb(20 49 36 / .92) 82%);
}

.capa-conteudo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px var(--margem) 32px;
}

.logo { width: 200px; height: auto; }

.capa-texto { display: grid; gap: 14px; max-width: 30ch; }

.capa h1 {
  margin: 0;
  font-size: clamp(2.75rem, 12vw, 4.5rem);
  line-height: .98;
  font-weight: 600;
  letter-spacing: -.01em;
}

.capa p { font-size: 1.0625rem; color: var(--azul); max-width: 34ch; }

/* Passos ---------------------------------------------------------- */

.passos {
  display: grid;
  gap: 52px;
  padding: 44px var(--margem) calc(112px + env(safe-area-inset-bottom));
  max-width: 560px;
  margin: 0 auto;
}

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.passo > legend {
  display: block;
  font-size: 1.75rem;
  line-height: 1.15;
  margin-bottom: 18px;
  padding: 0;
}

.passo-num {
  display: block;
  font-family: var(--plein);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--verde-2);
  margin-bottom: 6px;
}

input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}

/* Unidades: a foto é a escolha */
.unidades { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.unidade {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 6px 6px 14px;
  border-radius: calc(var(--raio-foto) + 6px);
  border: 1.5px solid var(--verde);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.unidade img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--raio-foto);
  margin-bottom: 8px;
}
.unidade-nome { font-family: var(--erode); font-size: 1.3125rem; font-weight: 500; line-height: 1.15; padding: 0 6px; }
.unidade-sub { font-size: .9375rem; color: var(--verde-2); padding: 0 6px; }

.unidade:has(:checked) { background: var(--verde); color: var(--gelo); border-color: var(--verde); }
.unidade:has(:checked) .unidade-sub { color: var(--pastel); }
.unidade:has(:focus-visible) { outline: 3px solid var(--verde); outline-offset: 3px; }

/* Marca de escolhido: não depende só de cor */
.unidade::after, .opcao::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--verde);
  background: var(--gelo);
}
.unidade::after { top: 14px; right: 14px; }
.unidade:has(:checked)::after, .opcao:has(:checked)::after {
  border-color: var(--pastel);
  background: var(--pastel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23143124' 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 / 15px no-repeat;
}

/* Lista de opções */
.lista { display: grid; gap: 8px; }

.opcao {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  align-items: baseline;
  min-height: var(--toque);
  padding: 14px 48px 14px 16px;
  border: 1.5px solid var(--verde);
  border-radius: var(--raio-opcao);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.opcao::after { top: 50%; right: 16px; transform: translateY(-50%); }
.opcao-nome { font-family: var(--erode); font-size: 1.3125rem; font-weight: 500; line-height: 1.2; }
.opcao-sub { grid-column: 1; font-size: .90625rem; color: var(--verde-2); }
.opcao-preco { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opcao-preco:empty { display: none; }

.opcao:has(:checked) { background: var(--verde); color: var(--gelo); }
.opcao:has(:checked) .opcao-sub { color: var(--pastel); }
.opcao:has(:focus-visible) { outline: 3px solid var(--verde); outline-offset: 3px; }

/* Pergunta que abre logo abaixo */
.sub { margin-top: 16px; padding: 18px; border-radius: var(--raio-opcao); background: var(--azul); }
.sub > legend { float: left; width: 100%; font-size: 1.25rem; line-height: 1.2; margin-bottom: 12px; padding: 0; }
.sub > .segmento { clear: both; }

.segmento { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.segmento label { position: relative; cursor: pointer; }
.segmento span {
  display: grid; place-items: center;
  min-height: 52px;
  padding: 8px 12px;
  border: 1.5px solid var(--verde);
  border-radius: 999px;
  background: var(--gelo);
  font-weight: 500;
  text-align: center;
  transition: background-color .15s, color .15s;
}
.segmento :checked + span { background: var(--verde); color: var(--gelo); }
.segmento :focus-visible + span { outline: 3px solid var(--verde); outline-offset: 3px; }
.segmento-grande span { min-height: 64px; font-family: var(--erode); font-size: 1.3125rem; line-height: 1.15; }
.segmento-grande small { display: block; font-family: var(--plein); font-size: .875rem; font-weight: 400; }

[hidden] { display: none !important; }

/* Resultado ------------------------------------------------------- */

.resultado {
  background: var(--verde);
  color: var(--gelo);
  border-radius: 32px 32px 0 0;
  padding: 44px var(--margem) calc(48px + env(safe-area-inset-bottom));
}
.resultado > * { max-width: 520px; margin-inline: auto; }

.resultado-titulo { margin: 0; font-size: 2rem; line-height: 1.1; font-weight: 500; }
.resultado-vazio { display: grid; gap: 10px; }
.resultado-vazio p { color: var(--azul); }

.resultado-cheio { display: grid; gap: 0; }
.resultado-lugar { color: var(--pastel); font-size: .9375rem; margin-bottom: 6px; }

.preco {
  display: flex; align-items: baseline; gap: 8px;
  margin: 26px 0 6px;
  font-family: var(--erode);
  font-variant-numeric: lining-nums tabular-nums;
}
.preco-moeda { font-size: 1.5rem; font-weight: 500; }
.preco-valor {
  font-size: clamp(5rem, 26vw, 7.5rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.03em;
  view-transition-name: preco;
}
.preco-mes { font-family: var(--plein); font-size: 1.0625rem; color: var(--azul); }

.preco-pagamento { font-size: .875rem; color: var(--pastel); margin-bottom: 18px; }
.por-aula { font-size: 1.125rem; color: var(--azul); }
.por-aula strong { color: var(--gelo); font-weight: 700; }
.economia { margin-top: 10px; font-size: 1.125rem; color: var(--azul); }
.economia strong { color: var(--gelo); font-weight: 700; }

/* As aulas como bolinhas: cada uma é uma semana de jogo */
.aulas { margin: 30px 0 0; display: grid; gap: 12px; }
.aulas-bolas {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 7px;
  max-width: 360px;
}
.aulas-bolas[data-colunas='4'] { grid-template-columns: repeat(4, 18px); }
.aulas-bolas[data-colunas='8'] { grid-template-columns: repeat(8, 18px); }
.aulas-bolas i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pastel);
}
.aulas-bolas i.extra {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--gelo);
}
.aulas figcaption { font-size: .9375rem; color: var(--azul); }
.aulas figcaption strong { color: var(--gelo); }

.formato {
  margin-top: 36px;
  font-size: 1rem;
  color: var(--azul);
}

.vem-junto { margin-top: 28px; }
.vem-junto h3 { margin: 0 0 10px; font-family: var(--erode); font-size: 1.25rem; font-weight: 500; }
.vem-junto ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vem-junto li { position: relative; padding-left: 22px; color: var(--azul); }
.vem-junto li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--pastel); }
.vem-junto li.depois::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pastel); }

.botao {
  display: grid; place-items: center;
  min-height: 58px;
  margin-top: 28px;
  border-radius: 999px;
  background: var(--pastel);
  color: var(--verde);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: background-color .15s;
}
.botao:hover { background: var(--azul); }
.botao:focus-visible { outline-color: var(--gelo); }
.botao-nota { margin-top: 12px; font-size: .875rem; color: var(--azul); text-align: center; }

.selo { margin-top: 40px; font-size: .875rem; color: var(--pastel); }

/* Barra fixa com o preço ------------------------------------------- */

.barra {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px;
  border-radius: 999px;
  background: var(--verde);
  color: var(--gelo);
  box-shadow: 0 10px 30px rgb(20 49 36 / .35);
  max-width: 560px; margin-inline: auto;
}
.barra.fora { display: none; }
.barra-texto { display: grid; line-height: 1.25; font-size: .875rem; color: var(--pastel); min-width: 0; }
.barra-texto span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-texto strong { color: var(--gelo); font-size: 1.0625rem; font-weight: 700; }
.barra-botao {
  flex: none;
  display: grid; place-items: center;
  min-height: 48px; padding: 0 20px;
  border-radius: 999px;
  background: var(--pastel); color: var(--verde);
  font-weight: 700; text-decoration: none;
}
.barra-botao:focus-visible { outline-color: var(--gelo); }

/* Movimento -------------------------------------------------------- */

::view-transition-old(preco) { animation: .18s ease-in both sai; }
::view-transition-new(preco) { animation: .26s ease-out both entra; }
@keyframes sai { to { opacity: 0; transform: translateY(-18%); } }
@keyframes entra { from { opacity: 0; transform: translateY(18%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important; transition: none !important;
  }
}

/* Telas maiores ---------------------------------------------------- */

@media (min-width: 720px) {
  :root { --margem: 40px; }
  .capa { min-height: 560px; }
  .capa-conteudo { padding: 36px var(--margem) 56px; max-width: 1120px; width: 100%; margin: 0 auto; }
  .passos { padding-top: 64px; }
  .resultado { border-radius: 40px; max-width: 640px; margin: 0 auto 40px; }
}