/* Página do calendário: abertura, calendário de mesa em 3D, cadastro, vídeo do dia e oferta
   (foto do corretor em sangria). Sem gradiente de marca nesta página. */

/* ---------- abertura ---------- */

.abertura {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 2rem;
  max-width: var(--lp-largura);
  margin: 0 auto;
  padding: 1.25rem var(--lp-lateral) 3rem;
  /* o brilho azul atrás do calendário é fundo, e não um elemento: fundo não vaza da caixa,
     então a página não ganha rolagem lateral e nada precisa ser cortado (a sombra do calendário fica inteira) */
  background: radial-gradient(closest-side, var(--zr-accent-soft), transparent) right -14rem bottom 0 / 46rem 46rem no-repeat;
}

.abertura__titulo {
  margin: 0;
  font-size: clamp(2.75rem, 11.5vw, 5.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.abertura__titulo span, .abertura__titulo strong { display: block; }
.abertura__titulo strong { font-weight: 900; color: var(--zr-accent); }

.relogio { margin-top: 2rem; }
.relogio__rotulo { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 700; color: var(--zr-color-text-subtle); text-wrap: balance; }
.relogio__numeros { display: flex; flex-wrap: wrap; gap: .5rem; }
.relogio__numeros span {
  display: grid;
  justify-items: center;
  min-width: 4.5rem;
  padding: .75rem .5rem .5rem;
  border: 1px solid var(--zr-color-border);
  border-radius: var(--zr-radius-lg);
  background: var(--zr-color-surface);
  box-shadow: var(--zr-shadow-sm);
  font-size: .875rem;
  font-weight: 700;
  color: var(--zr-color-text-muted);
}
.relogio__numeros b {
  font-size: 2.375rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--zr-color-text);
}

.abertura__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.abertura__nota { margin: 0; font-size: 1rem; color: var(--zr-color-text-subtle); }

/* ---------- calendário de mesa ---------- */

.calendario { container-type: inline-size; width: 100%; max-width: 35rem; justify-self: center; }
.calendario:focus { outline: none; }

.mesa {
  position: relative;
  padding: 1.75rem .125rem 1.5rem;
  perspective: 1800px;
  perspective-origin: 50% -10%;
  touch-action: pan-y;
  animation: chega 1.1s var(--lp-ease-out) both;
}
@keyframes chega { from { opacity: 0; transform: translateY(1.5rem) scale(.96); } }

.cal {
  position: relative;
  transform-style: preserve-3d;
  /* a folha da frente se inclina para trás, como um calendário de mesa visto de três quartos */
  transform: rotateX(calc(12deg + var(--rx, 0deg))) rotateY(calc(var(--giro-lado, -5deg) + var(--ry, 0deg)));
}
.cal__folhas { display: grid; transform-style: preserve-3d; }

/* a base do calendário: a parte de trás da "tenda" */
.cal__costas {
  position: absolute;
  inset: 0 3%;
  transform-origin: 50% 0;
  transform: rotateX(320deg);
  border-radius: var(--zr-radius-lg);
  background: linear-gradient(var(--zr-graphite), var(--zr-ink));
}

/* aros da espiral, por cima dos furos */
.cal__aros {
  position: absolute;
  top: -1.1rem;
  left: 7%;
  right: 7%;
  height: 2.1rem;
  transform: translateZ(4px);
  background: linear-gradient(90deg, var(--zr-ink), var(--zr-color-text-muted) 30%, var(--zr-graphite) 55%, var(--zr-color-text-muted) 80%, var(--zr-ink));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' viewBox='0 0 22 34'%3E%3Crect x='7.5' y='1.5' width='7' height='31' rx='3.5' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") center / 1.375rem 100% space;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' viewBox='0 0 22 34'%3E%3Crect x='7.5' y='1.5' width='7' height='31' rx='3.5' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") center / 1.375rem 100% space;
}

.folha {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  transform-style: preserve-3d;
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--pos, 0) * -1.5px)) rotateX(0deg);
  transition: transform 1s cubic-bezier(.5, .05, .25, 1), visibility 0s;
}
/* virar: a folha sobe por cima dos aros, vai para trás e some quando termina (o JS atrasa o visibility) */
.folha.virada { visibility: hidden; transform: translateZ(0px) rotateX(calc(318deg - var(--k, 0) * .6deg)); }
.folha.sem-giro { transition: none; }

.folha__frente {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
  border-radius: var(--zr-radius-lg);
  background: var(--zr-color-surface);
  /* a borda das folhas de baixo aparecendo sob a da frente */
  box-shadow:
    0 2px 0 -1px var(--zr-color-surface), 0 3px 0 -1px var(--zr-color-border-strong),
    0 5px 0 -2px var(--zr-color-surface), 0 6px 0 -2px var(--zr-color-border-strong),
    var(--zr-shadow-lg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* furos da espiral */
.folha__frente::before {
  content: '';
  position: absolute;
  top: .55rem;
  left: 7%;
  right: 7%;
  height: .625rem;
  background: radial-gradient(circle, var(--zr-ink) 0 .19rem, transparent .22rem) center / 1.375rem 100% space;
  opacity: .8;
}
.folha__verso {
  position: absolute;
  inset: 0;
  transform: rotateX(180deg);
  border-radius: var(--zr-radius-lg);
  background: var(--zr-color-surface-muted);
  box-shadow: inset 0 0 0 1px var(--zr-color-border);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.folha--capa { cursor: pointer; }
.folha--capa .folha__frente {
  justify-content: flex-end;
  gap: .75rem;
  padding: 3rem 1.75rem 2rem;
  background: var(--zr-accent);
  color: var(--zr-accent-contrast);
}
.folha--capa img { position: absolute; top: 2.25rem; left: 1.75rem; height: 2.5rem; width: auto; }
.capa__mes { margin: 0; font-size: clamp(3.25rem, 16cqi, 5rem); font-weight: 900; line-height: .95; letter-spacing: -0.035em; }
.capa__serie { margin: 0; max-width: 21ch; text-wrap: balance; font-size: 1.375rem; font-weight: 700; line-height: 1.15; }

/* no celular a aba rosa já diz a semana e as datas: a faixa azul fica só para o leitor de tela */
.folha__topo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.folha__titulo { margin: 0; font-size: clamp(1.75rem, 8cqi, 2.375rem); font-weight: 900; line-height: 1; letter-spacing: -0.025em; }
.folha__datas { margin: 0; font-size: 1.1875rem; font-weight: 700; }

.dias {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: .75rem .375rem;
  margin: 0;
  padding: .75rem .5rem .625rem;
  list-style: none;
}

/* o dia: número e dia da semana em cima, a frase do vídeo embaixo, o ícone diz se abre (play) ou não (cadeado) */
.dia {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "num sem icone" "tema tema tema";
  align-items: baseline;
  column-gap: .375rem;
  row-gap: .25rem;
  width: 100%;
  height: 100%;
  min-height: 4.75rem;
  padding: .4375rem .4375rem .5rem .625rem;
  border: 1.5px solid var(--zr-color-border);
  border-radius: var(--zr-radius-md);
  background: var(--zr-color-surface);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .2s var(--lp-ease), box-shadow .25s var(--lp-ease), transform .3s var(--lp-ease-out);
}
.dia:active { transform: scale(.97); }
.dia__num { grid-area: num; font-size: 1.5rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.dia__sem { grid-area: sem; font-size: .8125rem; font-weight: 700; color: var(--zr-color-text-muted); }
.dia__tema { grid-area: tema; align-self: end; font-size: .875rem; font-weight: 700; line-height: 1.2; color: var(--zr-color-text); text-wrap: pretty; }
.dia__icone {
  grid-area: icone;
  align-self: start;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}
.dia__icone svg { width: .875rem; height: .875rem; }
.i-cheio { fill: currentColor; }
.i-traco { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* "hoje" e "oferta" são etiquetas na borda de cima: nunca cobrem o número */
.dia__selo:empty { display: none; }
.dia__selo {
  position: absolute;
  z-index: 1;
  top: 0;
  left: .5rem;
  padding: .0625rem .4375rem .125rem;
  border-radius: var(--zr-radius-pill);
  background: var(--zr-pink-strong);
  color: var(--zr-white);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  transform: translateY(-55%);
}

.dia.is-aberto .dia__num { color: var(--zr-accent); }
.dia.is-aberto .dia__icone { background: var(--zr-accent); color: var(--zr-accent-contrast); }
@media (hover: hover) {
  .dia.is-aberto:hover { border-color: var(--zr-accent); box-shadow: var(--zr-shadow-md); transform: translateY(-2px); }
}
.dia.is-futuro { border-color: transparent; background: var(--zr-color-surface-muted); }
.dia.is-futuro .dia__num, .dia.is-futuro .dia__icone { color: var(--zr-color-text-muted); }
.dia.is-futuro .dia__tema { color: var(--zr-color-text-subtle); }
.dia.is-hoje { border-color: var(--zr-pink-strong); box-shadow: 0 0 0 3px var(--zr-pink-soft); }
.dia.is-oferta .dia__num { color: var(--zr-pink-strong); }

.folha__pe { padding: 0 .5rem .625rem; }
.btn--folha { width: 100%; min-height: 3rem; padding: 0 1rem; font-size: 1.0625rem; box-shadow: none; }

@container (min-width: 30rem) {
  .cal { --giro-lado: -10deg; }
  .folha__frente { padding-top: 1.625rem; }
  .folha__topo {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin: 0 .75rem;
    padding: .875rem 1rem .75rem;
    border-radius: var(--zr-radius-md);
    background: var(--zr-accent);
    color: var(--zr-accent-contrast);
  }
  .dias { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem .5rem; padding: .875rem .75rem .75rem; }
  .dia {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "num icone" "sem sem" "tema tema";
    min-height: 7.5rem;
    padding: .625rem .5rem .75rem .75rem;
  }
  .dia__num { font-size: 2.125rem; }
  .dia__icone { width: 1.75rem; height: 1.75rem; }
  .dia__icone svg { width: 1rem; height: 1rem; }
  .folha__pe { padding: 0 .75rem .875rem; }
  .btn--folha { min-height: 3.25rem; }
}
.folha__trava {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.25rem;
  margin: 0;
  padding: .5rem 1rem;
  border: 1.5px dashed var(--zr-color-border-strong);
  border-radius: var(--zr-radius-pill);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--zr-color-text-subtle);
}
.folha__trava svg { flex: none; width: 1.125rem; height: 1.125rem; }

.mesa__sombra {
  position: absolute;
  z-index: -1;
  left: 6%;
  right: 6%;
  bottom: .75rem;
  height: 2.5rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--zr-ink) 30%, transparent), transparent);
}

/* as semanas: o primeiro toque, em rosa para não se confundir com o azul dos dias */
.abas {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .3125rem;
  min-height: 3.5rem; /* as abas entram pelo JS: o espaço já fica reservado e o calendário não pula */
}
.aba {
  position: relative;
  display: grid;
  align-content: center;
  gap: .125rem;
  min-height: 3.5rem;
  padding: .4375rem .125rem;
  border: 1.5px solid transparent;
  border-radius: var(--zr-radius-lg);
  background: var(--zr-pink-soft);
  color: var(--zr-color-text);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease), border-color .2s var(--lp-ease), transform .3s var(--lp-ease-out);
}
.aba:active { transform: scale(.96); }
.aba__nome { font-size: clamp(.75rem, 3.5cqi, 1rem); font-weight: 700; line-height: 1.1; }
.aba__datas { font-size: clamp(.75rem, 3.1cqi, .875rem); font-weight: 500; color: var(--zr-color-text-subtle); }
.aba[aria-selected="true"] {
  background: var(--zr-pink-strong);
  color: var(--zr-white);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--zr-pink) 32%, transparent);
}
.aba[aria-selected="true"] .aba__datas { color: var(--zr-white); }
/* a ponta liga a semana escolhida à folha aberta embaixo dela */
.aba[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -.375rem;
  width: .75rem;
  height: .75rem;
  border-radius: 0 0 .1875rem 0;
  background: var(--zr-pink-strong);
  transform: translateX(-50%) rotate(45deg);
}
@media (hover: hover) { .aba:not([aria-selected="true"]):hover { border-color: var(--zr-pink-light); } }

/* ---------- a Carteira Dourada em 3D (carteira3d.js desenha no canvas) ---------- */

.carteira {
  position: absolute;
  z-index: 3;
  right: -.75rem;
  bottom: -8.25rem;
  width: 11.5rem;
  height: 11.5rem;
  pointer-events: none;
}
.carteira canvas { display: block; width: 100%; height: 100%; }

@container (min-width: 30rem) {
  /* sai do calendário para a direita só até onde a tela deixa (--fora); em tela média desce para baixo dele */
  .carteira {
    --fora: clamp(1rem, calc((100vw - min(100vw, var(--lp-largura))) / 2 + var(--lp-lateral) - 1.5rem), 8.5rem);
    right: calc(var(--fora) * -1);
    bottom: calc(-7.5rem - (8.5rem - var(--fora)) * .7);
    width: 17.5rem;
    height: 17.5rem;
  }
}

/* no celular a carteira fica à direita, embaixo do calendário: o texto abre espaço para ela */
.calendario__ajuda { min-height: 7.5rem; margin: .5rem 10rem 0 .25rem; font-size: 1rem; line-height: 1.4; text-wrap: pretty; color: var(--zr-color-text-subtle); }
@container (min-width: 30rem) {
  .calendario__ajuda { --fora: clamp(1rem, calc((100vw - min(100vw, var(--lp-largura))) / 2 + var(--lp-lateral) - 1.5rem), 8.5rem); min-height: 0; margin: .5rem calc(17.5rem - var(--fora) + .5rem) 0 .75rem; }
}

/* ---------- oferta do dia 30 ---------- */

.oferta {
  display: grid;
  gap: 2rem;
  margin: 2rem 0 0;
  padding: 0 0 5rem;
}
.oferta__corpo { padding: 0 var(--lp-lateral); }

/* a foto do corretor em sangria: no celular de borda a borda, no computador da borda esquerda até o meio.
   Só o canto que fica dentro da página é arredondado. A maquete do radar fica por cima, no canto de baixo à direita */
.oferta__midia { position: relative; height: min(30rem, 120vw); }
.oferta__foto { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 0 0 var(--zr-radius-xl) var(--zr-radius-xl); }
/* a imagem não dita a altura: quem dita é a caixa (no computador, a altura do texto ao lado) */
.oferta__foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }

/* a maquete da região: prédios azuis, os imóveis para captar em rosa com pino, e o radar no miolo.
   No celular ela fica metade sobre a foto e metade ao lado das primeiras linhas do título, que são curtas */
@property --cresce { syntax: '<number>'; inherits: true; initial-value: 0; }

.mapa {
  --lado: 6.75rem;
  --cel: calc(var(--lado) / 6);
  position: absolute;
  z-index: 2;
  right: .5rem;
  bottom: -4.75rem;
  width: calc(var(--lado) * 1.45);
  height: calc(var(--lado) * 1.12);
  perspective: 1600px;
}
.mapa__cena {
  position: absolute;
  left: 50%;
  top: 60%;
  width: var(--lado);
  height: var(--lado);
  margin: calc(var(--lado) / -2) 0 0 calc(var(--lado) / -2);
  transform-style: preserve-3d;
  transform: rotateX(calc(56deg + var(--rx, 0deg))) rotateZ(calc(40deg + var(--ry, 0deg)));
}
.mapa__chao {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  border-radius: var(--zr-radius-sm);
  background-color: var(--zr-color-surface);
  background-image: linear-gradient(var(--zr-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--zr-color-border) 1px, transparent 1px);
  background-size: var(--cel) var(--cel);
  box-shadow: inset 0 0 0 1px var(--zr-color-border-strong);
}
/* a espessura da base */
.mapa__chao::before, .mapa__chao::after { content: ''; position: absolute; }
.mapa__chao::before { left: 0; top: 100%; width: 100%; height: calc(var(--cel) * .22); transform-origin: 50% 0; transform: rotateX(-90deg); background: var(--zr-color-border-strong); }
.mapa__chao::after { left: 100%; top: 0; width: calc(var(--cel) * .22); height: 100%; transform-origin: 0 50%; transform: rotateY(90deg); background: var(--zr-color-text-muted); }

.mapa__radar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cel) * 3.4);
  aspect-ratio: 1;
  margin: calc(var(--cel) * -1.7) 0 0 calc(var(--cel) * -1.7);
  border-radius: 50%;
  transform: translateZ(1px);
  background: repeating-radial-gradient(circle, transparent 0 calc(var(--cel) * .55 - 1.5px), var(--zr-accent-ring) calc(var(--cel) * .55 - 1.5px) calc(var(--cel) * .55));
}
.mapa__radar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(transparent 0 70%, color-mix(in srgb, var(--zr-accent) 42%, transparent));
  animation: varre 4s linear infinite;
}
.mapa__radar::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cel) * .3);
  aspect-ratio: 1;
  margin: calc(var(--cel) * -.15) 0 0 calc(var(--cel) * -.15);
  border-radius: 50%;
  background: var(--zr-accent);
  box-shadow: 0 0 0 calc(var(--cel) * .12) var(--zr-accent-ring);
}
@keyframes varre { to { transform: rotate(1turn); } }

.predio {
  --cresce: 0;
  --h: calc(var(--alto) * var(--cel) * var(--cresce));
  position: absolute;
  left: calc((var(--x) + .16) * var(--cel));
  top: calc((var(--y) + .16) * var(--cel));
  width: calc(var(--cel) * .68);
  height: calc(var(--cel) * .68);
  transform-style: preserve-3d;
  transition: --cresce 1.1s var(--lp-ease-out) calc(var(--i) * 45ms);
}
.mapa.is-visto .predio { --cresce: 1; }
.predio i { position: absolute; display: block; }
.predio__topo { inset: 0; transform: translateZ(var(--h)); background: var(--zr-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zr-accent) 30%, transparent); }
.predio__sul { left: 0; top: 100%; width: 100%; height: var(--h); transform-origin: 50% 0; transform: rotateX(90deg); background: var(--zr-accent-light); }
.predio__leste { left: 100%; top: 0; width: var(--h); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); background: var(--zr-accent); }
.predio--alvo .predio__topo { background: var(--zr-pink-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zr-pink) 35%, transparent); }
.predio--alvo .predio__sul { background: var(--zr-pink-light); }
.predio--alvo .predio__leste { background: var(--zr-pink); }
/* a onda no chão em volta do imóvel para captar */
.predio--alvo::before {
  content: '';
  position: absolute;
  inset: -45%;
  border: 2px solid var(--zr-pink);
  border-radius: 50%;
  transform: translateZ(1px);
  animation: onda 2.4s ease-out infinite;
  animation-delay: calc(var(--i) * -.5s);
}
@keyframes onda { from { opacity: .9; scale: .55; } to { opacity: 0; scale: 1.35; } }

/* o pino gira ao contrário da cena para ficar sempre de frente */
.pino {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cel) * .6);
  height: calc(var(--cel) * .8);
  margin: calc(var(--cel) * -.8) 0 0 calc(var(--cel) * -.3);
  transform-origin: 50% 100%;
  transform: translateZ(calc(var(--h) + 2px)) rotateZ(calc(-40deg - var(--ry, 0deg))) rotateX(calc(-56deg - var(--rx, 0deg)));
  opacity: var(--cresce);
}
.pino svg { display: block; width: 100%; height: 100%; overflow: visible; animation: quica 1.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.35s); }
.pino path { fill: var(--zr-pink); }
.pino circle { fill: var(--zr-white); }
@keyframes quica { to { transform: translateY(-22%); } }

.mapa__sombra {
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--zr-ink) 30%, transparent), transparent);
}

.oferta__titulo { margin: 0; font-size: clamp(2rem, 7.5vw, 3.25rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.oferta__titulo span, .oferta__titulo strong { display: block; }
.oferta__titulo strong { font-weight: 900; }
.oferta__texto { max-width: 34ch; margin: 1.25rem 0 0; font-size: 1.25rem; color: var(--zr-color-text-subtle); }
/* a condição do lançamento: o número grande em rosa, o acento da marca, e a frase ao lado */
.oferta__destaque {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 30rem;
  margin: 1.5rem 0 0;
  padding: .875rem 1.25rem .875rem 1rem;
  border-radius: var(--zr-radius-xl);
  background: var(--zr-pink-soft);
}
.oferta__destaque strong {
  flex: none;
  font-size: clamp(3rem, 14vw, 4rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--zr-pink-strong);
}
.oferta__destaque span { font-size: 1.125rem; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.oferta__estado { display: grid; justify-items: start; gap: 1rem; margin-top: 2rem; }
.oferta__quando { margin: 0; font-size: 1.125rem; font-weight: 700; }
.relogio--oferta { margin: 0; }
.oferta__preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin: .5rem 0 0; }
.oferta__preco s { font-size: 1.375rem; color: var(--zr-color-text-muted); }
.oferta__preco strong { font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--zr-accent); }
.oferta__preco span { padding: .25rem .75rem; border: 1.5px dashed var(--zr-accent); border-radius: var(--zr-radius-pill); font-size: 1rem; font-weight: 700; color: var(--zr-accent-strong); }

/* ---------- fim da página: os 30 vídeos no Instagram ---------- */

/* faixa azul: o texto branco aqui é só grande e bold, e o botão inverte para branco */
.insta {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  width: min(calc(100% - 2 * var(--lp-lateral)), calc(var(--lp-largura) - 2 * var(--lp-lateral)));
  margin: 0 auto 3rem;
  padding: 2.5rem 1.5rem;
  border-radius: var(--zr-radius-xl);
  background: var(--zr-accent);
  color: var(--zr-accent-contrast);
}
.insta__perfil { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.375rem; font-weight: 900; letter-spacing: -0.01em; }
.insta__logo { flex: none; width: 3rem; height: 3rem; fill: none; stroke: currentColor; stroke-width: 2; }
.insta__ponto { fill: currentColor; stroke: none; }
.insta__titulo { margin: 0; font-size: clamp(2rem, 7.5vw, 3.25rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.insta__titulo span, .insta__titulo strong { display: block; }
.insta__titulo strong { font-weight: 900; }
.insta__btn { background: var(--zr-accent-contrast); color: var(--zr-accent-strong); box-shadow: none; }
@media (hover: hover) { .insta__btn:hover { background: var(--zr-accent-soft); } }

@media (min-width: 56rem) {
  .insta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.25rem 3rem;
    margin-bottom: 4rem;
    padding: 3.5rem 4rem;
  }
  .insta__perfil { grid-column: 1 / -1; }
}

/* ---------- barra fixa no celular ---------- */

.barra-cta {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem var(--lp-lateral) calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, var(--zr-color-bg) 40%);
  animation: sobe .4s var(--lp-ease-out);
}
.barra-cta .btn { width: 100%; }

/* ---------- janelas: cadastro, entrar e vídeo ---------- */

.janela {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--zr-color-surface);
  color: inherit;
}
.janela[open] { display: flex; flex-direction: column; animation: sobe .45s var(--lp-ease-out); }
.janela::backdrop { background: color-mix(in srgb, var(--zr-ink) 55%, transparent); }
@keyframes sobe { from { opacity: 0; transform: translateY(1.5rem); } }

.janela__topo {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: .75rem;
  padding: calc(.75rem + env(safe-area-inset-top, 0px)) 1rem .75rem;
}
.janela__voltar, .janela__fechar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--zr-color-surface-muted);
  cursor: pointer;
}
.janela__voltar { grid-column: 1; }
.janela__fechar { grid-column: 3; }
.janela__voltar svg, .janela__fechar svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .janela__voltar:hover, .janela__fechar:hover { background: var(--zr-color-surface-sunken); } }

.progresso { grid-column: 2; height: .375rem; overflow: hidden; border-radius: var(--zr-radius-pill); background: var(--zr-color-surface-sunken); }
.progresso i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--zr-accent); transition: width .6s var(--lp-ease-out); }

.janela__palco, .janela--entrar .passo { flex: 1; overflow-y: auto; padding: .5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }

.passo { display: flex; flex-direction: column; gap: 1.25rem; }
.passo__titulo { margin: .5rem 0 .25rem; font-size: clamp(1.875rem, 7.5vw, 2.25rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.passo__titulo:focus { outline: none; }
.passo__titulo label { cursor: text; }
.passo__texto { margin: 0; font-size: 1.25rem; line-height: 1.45; text-wrap: pretty; }
.passo__ajuda { margin: 0; font-size: 1rem; color: var(--zr-color-text-subtle); }
.passo .btn { width: 100%; margin-top: .25rem; }

.lista { display: grid; gap: .75rem; }
.opcao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 4.25rem;
  padding: .75rem 1rem .75rem 1.375rem;
  border: 2px solid var(--zr-color-border);
  border-radius: var(--zr-radius-lg);
  background: var(--zr-color-surface);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .25s var(--lp-ease), box-shadow .25s var(--lp-ease), transform .3s var(--lp-ease-out);
}
/* o preenchimento nasce no ponto do toque */
.opcao::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--zr-accent-soft);
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
  transition: clip-path .6s var(--lp-ease-out);
}
.opcao[aria-pressed="true"] { border-color: var(--zr-accent); }
.opcao[aria-pressed="true"]::before { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
.opcao:active { transform: scale(.98); }
@media (hover: hover) {
  .opcao:hover { border-color: var(--zr-accent-light); box-shadow: var(--zr-shadow-md); }
  .opcao[aria-pressed="true"]:hover { border-color: var(--zr-accent); }
}
.opcao__marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  border: 2px solid var(--zr-color-border-strong);
  border-radius: 50%;
  background: var(--zr-color-surface);
  transition: background .25s var(--lp-ease), border-color .25s var(--lp-ease), transform .45s var(--lp-ease-pop);
}
.opcao__marca svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: var(--zr-accent-contrast);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .35s .12s var(--lp-ease);
}
.opcao[aria-pressed="true"] .opcao__marca { background: var(--zr-accent); border-color: var(--zr-accent); transform: scale(1.1); }
.opcao[aria-pressed="true"] .opcao__marca svg { stroke-dashoffset: 0; }

.campo { display: grid; gap: .5rem; }
.campo label { font-size: 1rem; font-weight: 700; }
.campo input {
  width: 100%;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--zr-radius-pill);
  background: var(--zr-color-surface-muted);
  font-size: 1.1875rem;
  transition: border-color .2s var(--lp-ease), box-shadow .2s var(--lp-ease), background .2s var(--lp-ease);
}
.campo input::placeholder { color: var(--zr-color-text-muted); opacity: 1; }
.campo input:focus { outline: none; border-color: var(--zr-accent); background: var(--zr-color-surface); box-shadow: 0 0 0 4px var(--zr-accent-ring); }
.campo input[aria-invalid="true"] { border-color: var(--zr-color-danger); }
.erro { margin: 0 0 0 1.25rem; font-size: 1rem; color: var(--zr-color-danger); }
.legal { margin: 0; font-size: .9375rem; color: var(--zr-color-text-subtle); }

.passo--ok { align-items: flex-start; padding-top: 1rem; }
.ok__selo { width: 5rem; height: 5rem; }
.ok__selo circle { fill: var(--zr-accent); }
.ok__selo path { fill: none; stroke: var(--zr-accent-contrast); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: traca .6s .35s var(--lp-ease) forwards; }
@keyframes traca { to { stroke-dashoffset: 0; } }

.video__titulo { grid-column: 2; margin: 0; font-size: 1.125rem; font-weight: 900; line-height: 1.2; text-align: center; text-wrap: balance; }
.video__titulo:focus { outline: none; }
.video__corpo { flex: 1; overflow-y: auto; padding: 0 1rem; }
.video__corpo .instagram-media { width: 100% !important; min-width: 0 !important; max-width: 30rem !important; margin: 0 auto !important; }
.video__vazio { display: grid; justify-items: center; gap: 1.25rem; padding: 4rem 1rem; text-align: center; }
.video__vazio p { max-width: 24ch; margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.video__pe { display: flex; justify-content: center; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
.video__pe .btn { min-width: 14rem; }

.aviso {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: .875rem 1.25rem;
  border-radius: var(--zr-radius-lg);
  background: var(--zr-ink);
  color: var(--zr-white);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: var(--zr-shadow-lg);
  transform: translateX(-50%);
  animation: sobe .35s var(--lp-ease-out);
}

.semjs { max-width: 36rem; margin: 2rem auto; padding: 0 var(--lp-lateral); font-size: 1.25rem; }

/* ---------- telas maiores ---------- */

@media (min-width: 40rem) {
  .janela {
    width: min(34rem, calc(100% - 2rem));
    height: auto;
    max-height: calc(100dvh - 4rem);
    margin: auto;
    border-radius: var(--zr-radius-xl);
    box-shadow: var(--zr-shadow-xl);
  }
  .janela--cadastro { min-height: min(44rem, calc(100dvh - 4rem)); }
  .janela--video { width: min(36rem, calc(100% - 2rem)); height: calc(100dvh - 4rem); }
}

@media (min-width: 56rem) {
  .oferta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; margin-top: 4rem; padding-bottom: 8rem; }
  .oferta__midia { align-self: stretch; height: auto; min-height: 44rem; }
  .oferta__foto { border-radius: 0 var(--zr-radius-xl) var(--zr-radius-xl) 0; }
  .oferta__foto img { object-position: 50% 56%; }
  /* no computador a maquete cruza o canto de baixo da foto: parte sobre ela, parte sobre o fundo branco.
     Para a direita sai só metade do vão entre a foto e o texto, para não encostar no relógio */
  .mapa { --lado: 13.5rem; right: -2rem; bottom: -4.5rem; }
  /* o texto alinha com a margem direita do resto da página */
  .oferta__corpo { padding: 3rem max(var(--lp-lateral), calc((100vw - var(--lp-largura)) / 2 + var(--lp-lateral))) 3rem 4rem; }
}

@media (min-width: 64rem) {
  .abertura {
    grid-template-columns: minmax(0, 1fr) minmax(0, 35rem);
    align-items: center;
    gap: 3rem;
    min-height: min(54rem, calc(100dvh - 5.5rem));
    padding-top: 2rem;
  }
  .abertura { background-position: right -6rem bottom 4rem; }
  .barra-cta { display: none !important; }
}

html:has(dialog[open]) .barra-cta { display: none; }