/* Seções da página, na ordem.
   v2 (28/10/2026): padrão visual da referência andreavermontpsicanalise.com (medido no DOM em
   1440, 1024 e 390): faixa corrida no topo, hero escuro limpo (#0F0F0F → preto quente), formulário
   em cartão de raio 22 com contorno interno fino, botão claro de raio 14, título de seção centralizado
   em cima de dois cartões, perguntas em linhas com fio fino, CTA final em forma de ingresso.
   Efeitos adaptados da biblioteca: traço que se desenha (css-22) e linha do tempo
   que se desenha (js-07), refeitos como correntinha de crochê (elos gerados no main.js).
   v3 (28/10/2026): foto real em moldura arredondada no topo e no fim, sem palavra BLACK, sem
   sublinhado e sem pontes de correntinha; transições por bloco de cantos arredondados que sobe
   sobre a seção anterior; ícones de traço fino; cartões animados (.bloco); textura fotográfica de crochê. */

/* =================== FAIXA CORRIDA (topo) =================== */
.faixa {
  background: var(--preto); overflow: hidden; height: 2.25rem; display: flex; align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--dourado) 45%, transparent);
  font: 700 .7rem/1 var(--fonte-texto); letter-spacing: .11em; text-transform: uppercase; color: var(--creme);
}
.faixa__trilho { display: flex; width: max-content; animation: correr 46s linear infinite; }
.faixa__grupo { display: flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; white-space: nowrap; }
.faixa b { color: var(--dourado); font-weight: 700; }
/* v3: separador limpo, um traço vertical fino em laranja vivo, no meio da altura do texto */
.faixa__sep { flex: none; width: 1.5px; height: .95em; border-radius: 1px; background: var(--laranja-vivo); }
/* ponte entre Perguntas (creme) e rodapé (preto): faixa areia, texto preto, inclinada de leve */
.faixa--ponte { position: relative; z-index: 2; height: 2.6rem; background: var(--dourado); color: var(--preto); border: 0;
  rotate: -1.2deg; width: 104%; margin: -1.3rem -2% ; }
.faixa--ponte b { color: var(--marrom); }
.faixa--ponte .faixa__sep { background: var(--preto); }
.faixa--ponte .faixa__trilho { animation-direction: reverse; }
@keyframes correr { to { translate: -50% 0; } }

/* =================== DOBRA 1 · TOPO =================== */
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--preto); padding: 1rem 0 calc(var(--e-4) + var(--raio-secao)); }
.hero__grade {
  display: grid; justify-items: center; text-align: center;
  grid-template-areas: "foto" "logo" "titulo" "form" "mapa";
}
.hero__texto, .hero__lado { display: contents; }

.hero__logo { grid-area: logo; width: min(69vw, 17.25rem); position: relative; z-index: 2; margin-top: -2rem; }

/* v3: foto de ponta a ponta. No celular começa logo abaixo da logo (o rosto nunca fica sob ela)
   e some no preto em cima e embaixo; o título e o formulário ficam sobre o degradê. */
.hero__grade { position: relative; z-index: 1; }
.hero__espaco { grid-area: foto; height: var(--foto-hero-alt); }
/* v4: a foto sobe por trás da logo; degradê longo, sem degrau entre o preto e a foto */
.hero__foto { position: absolute; z-index: 0; overflow: hidden; left: 0; right: 0; top: -1rem; height: calc(var(--foto-hero-alt) + 18rem); }
.hero__foto picture { display: contents; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; filter: brightness(.86) saturate(.92); }
.hero__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / .55) 0, rgb(0 0 0 / .2) 8%, transparent 16%,
    transparent 40%, rgb(0 0 0 / .3) 50%, rgb(0 0 0 / .7) 60%, rgb(0 0 0 / .92) 72%, var(--preto) 84%); }

/* moldura editorial: foto inteira em bloco arredondado, contorno interno fino e legenda em etiqueta */
.moldura { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--raio-foto); background: var(--preto); }
.moldura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.moldura::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--creme) 16%, transparent); }
.moldura__legenda {
  position: absolute; z-index: 2; left: .75rem; bottom: .75rem; padding: .45rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--preto) 66%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 700 .66rem/1 var(--fonte-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--creme); white-space: nowrap;
}
.moldura__legenda span { color: var(--dourado); }

.hero__titulo {
  grid-area: titulo; position: relative; z-index: 2;
  max-width: 21em; margin-top: var(--e-2);
  font-size: var(--t-h1); color: var(--creme);
}
.destaque { position: relative; color: var(--dourado); white-space: nowrap; }

.hero__form {
  grid-area: form; width: min(100%, 28rem); margin-top: var(--e-2); display: grid; gap: .85rem; text-align: left;
  padding: .9rem 1rem 1rem; border-radius: var(--raio-cartao);
  background: var(--preto); box-shadow: var(--hairline);
}
.hero__form .botao { justify-self: center; margin-top: .15rem; }
.hero__campos { display: grid; gap: .85rem; }
.hero__sucesso { display: flex; align-items: center; gap: .6rem; justify-content: center; font: 600 var(--t-texto)/1.3 var(--fonte-texto); color: var(--dourado); }
.hero__sucesso[hidden] { display: none; }

.ao-vivo { display: block; text-align: center; text-wrap: balance; font: 500 var(--t-texto)/1.35 var(--fonte-texto); color: var(--creme); }
.ao-vivo > span { display: inline; }
.ao-vivo strong { color: var(--dourado); }
.ao-vivo__icone { display: inline-block; vertical-align: -.38em; margin-right: .4rem; width: 1.5em; height: 1.5em; color: var(--laranja-vivo); stroke-width: 18; }
.ao-vivo__ponto { fill: currentColor; stroke: none; transform-origin: center; transform-box: fill-box; animation: pulso 1.6s var(--curva) infinite; }
.ao-vivo__ondas { animation: ondas 1.6s var(--curva) infinite; }
@keyframes pulso { 50% { scale: .7; } }
@keyframes ondas { 50% { opacity: .35; } }

.contagem { display: flex; justify-content: center; gap: .9rem; font: 500 var(--t-rotulo)/1 var(--fonte-texto); color: var(--creme-apagado); font-variant-numeric: tabular-nums; }
.contagem[hidden] { display: none; }
.contagem b { font: 700 1.15rem/1 var(--fonte-texto); color: var(--creme); margin-right: .15rem; }
/* v4: contagem do topo em 4 casas iguais, também no celular */
.hero .contagem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.hero .contagem[hidden] { display: none; }
.hero .contagem span { display: grid; justify-items: center; gap: .3rem; padding: .55rem .25rem .5rem; border-radius: 12px;
  background: var(--preto-quente); box-shadow: var(--hairline); font: 600 .62rem/1 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; }
.hero .contagem b { font: var(--peso-titulo) clamp(1.15rem, 1rem + .6vw, 1.45rem)/1 var(--fonte-titulo); color: var(--dourado); margin: 0; letter-spacing: -.01em; }

.hero__mapa { grid-area: mapa; width: min(100%, 34rem); margin-top: var(--e-5); display: grid; gap: var(--e-3); }
.hero__sub { font: 500 var(--t-lead)/1.45 var(--fonte-texto); color: var(--creme); }

/* v4: linha do tempo com a correntinha recortada da própria logo (textura real do fio),
   repetida sem emenda, do centro de Natal ao centro de Dia das mães, com o nó laranja da logo no fim.
   Ao entrar na tela o fio se tece da esquerda para a direita e as datas acendem em sequência. */
.datas { position: relative; --fio-alt: 11px; }
@media (min-width: 700px) { .datas { --fio-alt: 14px; } }
.corrente {
  position: absolute; top: 2px; left: calc(100% / 12); right: calc(100% / 12 + 10px); height: var(--fio-alt);
  background: url("/img/correntinha.png") left center / auto 100% repeat-x;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / .5));
  /* v5: o fio nasce e termina em degradê, sem ponta cortada; o fim some por baixo do nó */
  -webkit-mask: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 14px), transparent 100%);
          mask: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 14px), transparent 100%);
}
.corrente__no { position: absolute; top: calc(2px + var(--fio-alt) / 2); left: calc(100% * 11 / 12 - 20px); width: auto; height: calc(var(--fio-alt) * 1.3); z-index: 1; translate: 0 -50%; }
.datas__lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.datas__lista li {
  position: relative; padding: 2.35rem 0 0;
  font: 600 clamp(.64rem, .58rem + .3vw, .86rem)/1.15 var(--fonte-texto); letter-spacing: -.01em; color: var(--creme);
  text-align: center; text-wrap: balance;
}
.datas__lista li::before { /* nó pequeno pendurado no fio */
  content: ""; position: absolute; left: 50%; top: calc(2px + var(--fio-alt) + 11px); width: 6px; height: 6px; translate: -50% 0;
  border-radius: 50%; background: var(--dourado); box-shadow: 0 0 0 2px var(--preto), inset 0 -2px 0 color-mix(in srgb, var(--marrom) 70%, transparent);
}
.anim-pronta .corrente { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--curva); }
.anim-pronta .corrente__no { opacity: 0; scale: .5; transition: opacity .4s var(--curva) 1.5s, scale .5s var(--curva-saida) 1.5s; }
.anim-pronta .datas__lista li { opacity: .25; transition: opacity .5s var(--curva) calc(var(--i) * 260ms + 150ms); }
.anim-pronta .datas.visivel .corrente { clip-path: inset(0 0 0 0); }
.anim-pronta .datas.visivel .corrente__no { opacity: 1; scale: 1; }
.anim-pronta .datas.visivel li { opacity: 1; }
.datas__lista li:first-child, .datas__lista li:last-child { color: var(--dourado); }

/* =================== TRANSIÇÕES ENTRE SEÇÕES (v3) ===================
   Uma por divisa, sem enfeite desenhado:
   1. topo → Dobra 2: a seção creme entra como bloco de cantos superiores bem arredondados sobre o preto
      e sobe um pouco mais devagar que a rolagem (leve paralaxe, só sem prefers-reduced-motion).
   2. Dobra 2 → Dobra 3: curva larga e assimétrica em preto no pé da seção creme (.curva).
   3. "o que muda por dentro" → Perguntas: o painel da foto atravessa a divisa, metade em cada fundo.
   4. Perguntas → rodapé: faixa corrida areia, levemente inclinada, fazendo a ponte. */
.vem { position: relative; z-index: 1; border-radius: var(--raio-secao) var(--raio-secao) 0 0; margin-top: calc(-1 * var(--raio-secao)); }
.curva { position: absolute; left: 0; bottom: -1px; width: 100%; height: var(--curva-alt); fill: var(--preto); pointer-events: none; }

/* =================== SEÇÕES CLARAS =================== */
.secao-clara { background: var(--creme); color: var(--preto); }

/* =================== DOBRA 2 · O QUE VEM =================== */
.vem { padding: calc(var(--secao-y) * .8) 0 calc(var(--secao-y) * .7 + var(--curva-alt) * .6); }
.vem__grade { display: grid; gap: var(--e-4); }
.vem__titulo { font-size: min(clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem), 6.2vw); line-height: 1.2; color: var(--preto); text-align: center; max-width: 24em; margin-inline: auto; text-wrap: balance; }
.vem__mao { font-size: 1.75em; color: var(--laranja); white-space: nowrap; }
.so-pc { display: none; }
@media (min-width: 1024px) { .so-pc { display: inline; } }
.vem__cartoes { display: grid; gap: var(--e-2); width: min(100%, 36rem); margin-inline: auto; }
.cartao { position: relative; border-radius: var(--raio-cartao); padding: clamp(1.4rem, 1rem + 2vw, 2.2rem); }
.cartao--dois { overflow: hidden; }
.cartao--um { background: var(--preto-quente); color: var(--creme); box-shadow: var(--hairline); }
.cartao--dois { background: var(--marrom); color: var(--creme); }
.cartao__titulo { font: 700 var(--t-rotulo)/1.2 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--dourado); margin-bottom: var(--e-2); }
/* v4: itens separados por fio fino, com número acima do texto e ícone alinhado à 1ª linha */
.vem__lista { display: grid; }
.vem__lista li {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 1rem; row-gap: .3rem; align-items: start;
  padding-block: 1.15rem; font: 500 var(--t-lead)/1.4 var(--fonte-texto);
}
.vem__lista li + li { border-top: 1px solid color-mix(in srgb, var(--dourado) 18%, transparent); }
.vem__lista li:first-child { padding-top: .2rem; }
.vem__lista li:last-child { padding-bottom: 0; }
.vem__lista .ic { grid-row: 1 / 3; color: var(--dourado); margin-top: 1.05rem; }
.vem__lista .num { grid-column: 2; }
.vem__acao { display: flex; justify-content: center; }

/* =================== DOBRA 3 · DO POST AO CLIENTE =================== */
.post { background: var(--preto); padding: var(--secao-y) 0 var(--e-4); }
.post__grade { display: grid; gap: var(--e-5); }
.post__titulo { font-size: var(--t-h2); color: var(--dourado); text-align: center; max-width: 15em; margin-inline: auto; }
.rotulo { font: 600 var(--t-lead)/1.3 var(--fonte-texto); color: var(--creme); }
.rotulo--centro { text-align: center; }
.post__conversa { display: grid; gap: var(--e-2); max-width: 30rem; width: 100%; margin-inline: auto; }
/* v4: mensagens como chat de verdade. Avatar em traço fino, rótulo, balão marrom com cauda
   desenhada e tiques de lida. Na entrada: "digitando…" e depois o texto (main.js marca .escrito). */
.chat { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .7rem; align-items: end; max-width: 26rem; }
.chat:nth-child(odd of .chat) { margin-left: clamp(0rem, 4vw, 2.5rem); }
.chat__avatar {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--preto-quente); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dourado) 40%, transparent); color: var(--dourado);
}
.chat__avatar .ic { width: 1.15rem; height: 1.15rem; }
.chat__quem { font: 600 .72rem/1 var(--fonte-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--creme-apagado); margin: 0 0 .45rem .9rem; }
.chat__balao {
  position: relative; display: grid; justify-self: start; min-height: 3rem;
  padding: .85rem 1.15rem .7rem; border-radius: 20px 20px 20px 6px;
  background: var(--marrom); color: var(--creme);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--creme) 14%, transparent);
  transform-origin: 0 100%;
}
.chat__balao::before { /* cauda */
  content: ""; position: absolute; left: -7px; bottom: 0; width: 14px; height: 14px; background: inherit;
  -webkit-mask: radial-gradient(circle at 0 0, transparent 13.5px, #000 14px); mask: radial-gradient(circle at 0 0, transparent 13.5px, #000 14px);
}
.chat__texto, .chat__digitando { grid-area: 1 / 1; }
.chat__texto { font: 500 var(--t-lead)/1.45 var(--fonte-texto); }
.chat__lida { display: inline-block; width: 1.05rem; height: .7rem; margin-left: .45rem; vertical-align: -.05em; fill: none; stroke: var(--laranja-vivo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chat__digitando { display: none; align-items: center; gap: 5px; height: 1.45em; }
.chat__digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--dourado); animation: digitar 1s var(--curva) infinite; }
.chat__digitando i:nth-child(2) { animation-delay: .15s; } .chat__digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digitar { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -4px; opacity: 1; } }
/* entrada (só com animação): o balão nasce do canto da cauda, digita e então mostra o texto */
.anim-pronta .chat { opacity: 0; translate: 0 14px; transition: opacity .5s var(--curva), translate .6s var(--curva-saida); transition-delay: calc((var(--i) - 1) * 1.1s); }
.anim-pronta .chat.visivel { opacity: 1; translate: 0 0; }
.anim-pronta .chat .chat__balao { scale: .9; transition: scale .5s var(--curva-saida); }
.anim-pronta .chat.visivel .chat__balao { scale: 1; }
.anim-pronta .chat .chat__digitando { display: flex; }
.anim-pronta .chat .chat__texto { opacity: 0; translate: 0 6px; transition: opacity .45s var(--curva), translate .45s var(--curva-saida); }
.anim-pronta .chat.escrito .chat__digitando { display: none; }
.anim-pronta .chat.escrito .chat__texto { opacity: 1; translate: 0 0; }

/* v4: preto chapado, sem degradê entre as seções escuras */
.mentoria { background: var(--preto); padding: var(--e-4) 0 var(--secao-y); }
.pilares { display: grid; gap: .75rem; margin-top: var(--e-4); }
.pilar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: .2rem; align-items: start; align-content: start;
  padding: 1.25rem 1.3rem; border-radius: var(--raio-cartao);
  background: var(--preto); box-shadow: var(--hairline);
}
.pilar .ic { grid-row: 1 / 4; width: 1.75rem; height: 1.75rem; color: var(--dourado); margin-top: .1rem; }
.pilar strong { font: 700 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.2 var(--fonte-texto); color: var(--dourado); }
.pilar span:not(.num) { font: 400 var(--t-texto)/1.45 var(--fonte-texto); color: var(--creme); }
.num { font: 600 .7rem/1 var(--fonte-texto); letter-spacing: .16em; color: var(--creme-apagado); font-variant-numeric: tabular-nums; }
.mentoria__frase { font-size: var(--t-frase); line-height: 1.45; color: var(--creme); text-align: center; max-width: 19em; margin: var(--e-5) auto 0; }

.dentro { padding: var(--e-4) 0 0; background: linear-gradient(to bottom, var(--preto) calc(100% - var(--atravessa)), var(--creme) 0); }
.dentro__grade {
  display: grid; gap: var(--e-4); padding: .6rem .6rem var(--e-4);
  border-radius: calc(var(--raio-foto) + .6rem); background: var(--preto-quente); box-shadow: var(--hairline);
}
.dentro__foto { aspect-ratio: 4 / 5; max-height: 34rem; width: 100%; }
.dentro__foto img { object-position: 45% 20%; }
.dentro__texto { padding-inline: clamp(.6rem, 2vw, 1.2rem); }
.dentro__texto > .rotulo { text-align: center; }
.dentro__lista { display: grid; gap: .7rem; margin-top: var(--e-3); }
.dentro__lista li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; row-gap: .3rem; align-items: start;
  padding: 1.05rem 1.2rem; border-radius: var(--raio-cartao); background: var(--preto); box-shadow: var(--hairline);
  font: 500 var(--t-texto)/1.45 var(--fonte-texto);
}
.dentro__lista .ic { grid-row: 1 / 3; color: var(--dourado); }
/* v4: fecho centralizado; "sozinha" em linha própria, menor, para nunca passar da borda */
.dentro__frase { font-size: var(--t-frase); color: var(--dourado); margin-top: var(--e-5); text-align: center; text-wrap: balance; }
.dentro__sozinha { color: var(--laranja-vivo); } /* v4: frase numa fonte só, a pedido */
.dentro__assina { margin-top: var(--e-3); display: grid; justify-items: center; gap: .2rem; text-align: center; }
.dentro__assina p { font: 500 var(--t-lead)/1.3 var(--fonte-texto); color: var(--creme); }
.dentro__assina img { width: clamp(9rem, 8rem + 4vw, 12rem); }

/* =================== DOBRA 5 · PERGUNTAS =================== */
/* referência: título centralizado e perguntas em linhas com fio fino, coluna de ~46rem */
.perguntas { padding: var(--secao-y) 0 calc(var(--secao-y) + 1rem); }
.perguntas__grade { display: grid; gap: var(--e-4); max-width: 46rem; }
.perguntas__titulo { font-size: var(--t-h2); color: var(--preto); text-align: center; }
.perguntas__lista { display: grid; border-top: var(--borda-claro); }
.pergunta { border-bottom: var(--borda-claro); }
.pergunta summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem .25rem;
  font: 600 var(--t-lead)/1.35 var(--fonte-texto); color: var(--preto);
  transition: color var(--rapido) var(--curva), padding var(--medio) var(--curva-saida);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary .icone { color: var(--marrom); transition: rotate var(--medio) var(--curva-saida); }
.pergunta summary:hover { color: var(--marrom); padding-left: .6rem; }
.pergunta summary:focus-visible { outline: 2px solid var(--marrom); outline-offset: 2px; border-radius: 6px; }
.pergunta[open] summary .icone { rotate: 45deg; }
.pergunta p { padding: 0 .25rem 1.3rem; font: 400 var(--t-texto)/1.55 var(--fonte-texto); color: var(--marrom); max-width: 40rem; }

/* =================== RODAPÉ =================== */
.rodape { background: var(--preto); padding: calc(var(--e-4) + 1.3rem) 0 var(--e-3); text-align: center; }
.rodape__grade { display: grid; justify-items: center; gap: var(--e-5); }
.rodape__logo { width: clamp(10.5rem, 8rem + 5vw, 13.75rem); }

/* ingresso: CTA final como entrada de evento (referência: cartão + canhoto), canhoto em laranja vivo */
.ingresso {
  display: grid; width: min(100%, 56rem); border-radius: var(--raio-cartao); overflow: hidden;
  background: var(--preto-quente); box-shadow: var(--hairline); text-align: center;
}
.ingresso__corpo { display: grid; justify-items: center; align-content: center; gap: var(--e-3); padding: clamp(1.6rem, 1rem + 3vw, 3rem) var(--e-2); }
.ingresso__canhoto {
  position: relative; display: grid; justify-items: center; align-content: center; gap: .15rem;
  padding: 1.5rem 1rem 1.6rem; background: var(--laranja-vivo); color: var(--preto);
  border-top: 2px dashed color-mix(in srgb, var(--preto) 45%, transparent);
}
.ingresso__canhoto::before, .ingresso__canhoto::after { /* picotes */
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--preto);
}
.ingresso__canhoto::before { left: -10px; } .ingresso__canhoto::after { right: -10px; }
/* v4: canhoto detalhado como ingresso de verdade (só dados da copy): tipo, logo, data em destaque,
   horário e onde em colunas com rótulo, o que é, código de barras desenhado e grão de papel */
.ingresso__canhoto { gap: .9rem; padding: 1.7rem 1.25rem 1.5rem; }
.ingresso__canhoto > * { position: relative; z-index: 1; }
.ingresso__canhoto { background:
    radial-gradient(circle at 20% 10%, rgb(255 255 255 / .12), transparent 55%),
    repeating-linear-gradient(115deg, rgb(0 0 0 / .025) 0 2px, transparent 2px 5px),
    var(--laranja-vivo); }
.ingresso__tipo { font: 700 .66rem/1 var(--fonte-texto); letter-spacing: .2em; text-transform: uppercase; padding: .45rem .8rem; border: 1.5px solid var(--preto); border-radius: 999px; }
.ingresso__logo { width: 7.5rem; height: auto; }
.ingresso__dados { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 15rem; border-block: 1.5px dashed color-mix(in srgb, var(--preto) 55%, transparent); }
.ingresso__dado { padding: .6rem .3rem; display: grid; gap: .25rem; align-content: start; }
.ingresso__dado--data { grid-column: 1 / -1; border-bottom: 1.5px dashed color-mix(in srgb, var(--preto) 55%, transparent); }
.ingresso__dado + .ingresso__dado + .ingresso__dado { border-left: 1.5px dashed color-mix(in srgb, var(--preto) 55%, transparent); }
.ingresso__dado dt { font: 700 .6rem/1 var(--fonte-texto); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.ingresso__dado dd { font: 600 .82rem/1.25 var(--fonte-texto); }
.ingresso__data { font: var(--peso-titulo) clamp(2.8rem, 2rem + 3vw, 4rem)/.95 var(--fonte-titulo) !important; letter-spacing: -.03em; }
.ingresso__hora { font: 700 1.1rem/1.2 var(--fonte-texto) !important; }
.ingresso__oque { display: flex; align-items: center; justify-content: center; gap: .45rem; font: 700 .74rem/1.3 var(--fonte-texto); letter-spacing: .1em; text-transform: uppercase; text-align: left; max-width: 14rem; }
.ingresso__barras { width: 100%; max-width: 12rem; height: 2.2rem; opacity: .85;
  background: repeating-linear-gradient(90deg, var(--preto) 0 2px, transparent 2px 4px, var(--preto) 4px 5px, transparent 5px 8px, var(--preto) 8px 11px, transparent 11px 12px, var(--preto) 12px 13px, transparent 13px 16px); }
.contagem--grande { gap: clamp(1rem, .5rem + 2.5vw, 2.5rem); align-items: baseline; }
.contagem--grande span { display: grid; justify-items: center; gap: .35rem; }
.contagem--grande b { font: var(--peso-titulo) clamp(2.2rem, 1.6rem + 3vw, 4rem)/1 var(--fonte-titulo); color: var(--dourado); margin: 0; letter-spacing: -.02em; }
.rodape__base {
  margin-top: var(--e-5); padding-top: var(--e-3); border-top: var(--borda-escuro);
  font: 400 var(--t-rotulo)/1.6 var(--fonte-texto); color: var(--creme-apagado);
}
.rodape__base a { white-space: nowrap; transition: color var(--rapido) var(--curva); }
.rodape__base a:hover, .rodape__base a:focus-visible { color: var(--laranja-vivo); }

/* =================== BOTÃO FIXO =================== */
.fixo {
  position: fixed; z-index: 50; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  translate: -50% 160%; opacity: 0; pointer-events: none;
  box-shadow: var(--sombra-1);
  transition: translate var(--medio) var(--curva-saida), opacity var(--medio) var(--curva);
}
.fixo.ativo { translate: -50% 0; opacity: 1; pointer-events: auto; }
/* v6: só o botão fixo no verde do WhatsApp, a pedido (fora da paleta Dagabi de propósito) */
.fixo { background: #25D366; color: #0B141A; }
.fixo .botao__icone { background: #0B141A; color: #25D366; }
.fixo:hover .botao__icone, .fixo:focus-visible .botao__icone { background: #0B141A; color: #FFFFFF; }

/* =================== TABLET =================== */
@media (min-width: 700px) {
  .pilares { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pilar { grid-column: span 2; grid-template-columns: auto minmax(0, 1fr); row-gap: .5rem; }
  .pilar .ic { grid-row: auto; margin: 0 0 .35rem; }
  .pilar .num { align-self: center; margin-bottom: .35rem; }
  .pilar strong, .pilar span:not(.num) { grid-column: 1 / -1; }
  .pilar:nth-child(4) { grid-column: 2 / span 2; }
  .dentro__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =================== COMPUTADOR =================== */
@media (min-width: 1024px) {
  /* referência: texto + formulário à esquerda, expert grande à direita encostada no pé do topo,
     barra fina embaixo atravessando a largura (aqui: o mapa das 6 datas) */
  .hero { padding: 1.25rem 0 var(--raio-secao); }
  .hero__grade {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: ". ." "logo ." "titulo ." "form ." ". ." "mapa mapa";
    grid-template-rows: minmax(1rem, 1fr) auto auto auto minmax(1.5rem, 1fr) auto;
    column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: 1rem;
    justify-items: start; text-align: left;
    min-height: calc(100svh - 3.5rem - var(--raio-secao));
  }
  .hero__logo { width: clamp(17rem, 21vw, 21rem); margin-top: .5rem; }
  .hero__titulo { margin-top: 0; max-width: 17em; font-size: clamp(1.8rem, .9rem + 1.6vw, 2.65rem); }
  /* computador: a foto cobre o topo inteiro, rosto na metade direita, degradê vindo da esquerda */
  .hero__espaco { display: none; }
  .hero__foto { top: 0; bottom: 0; height: auto; }
  .hero__foto img { position: absolute; right: 0; top: 0; width: 58%; height: calc(100% - 6rem); object-position: 50% 14%; scale: 1;
    /* v4: a foto some sozinha na borda esquerda e no pé, sem linha marcada */
    -webkit-mask: linear-gradient(to right, transparent 0, rgb(0 0 0 / .25) 14%, rgb(0 0 0 / .7) 28%, #000 44%), linear-gradient(to top, transparent 0, #000 22%);
    -webkit-mask-composite: source-in; mask: linear-gradient(to right, transparent 0, rgb(0 0 0 / .25) 14%, rgb(0 0 0 / .7) 28%, #000 44%) intersect, linear-gradient(to top, transparent 0, #000 22%); }
  .hero__foto::after { background:
      linear-gradient(to right, rgb(0 0 0 / .35) 40%, transparent 62%),
      linear-gradient(to top, var(--preto) 0, var(--preto) calc(var(--raio-secao) + 5.5rem), transparent calc(var(--raio-secao) + 13rem)),
      linear-gradient(to bottom, color-mix(in srgb, var(--preto) 70%, transparent), transparent 26%); }
  .hero__form { align-self: start; width: min(100%, 33rem); margin: .25rem 0 0; padding: 1.2rem; background: color-mix(in srgb, var(--preto) 70%, var(--preto-quente)); }
  .hero__form .ao-vivo { text-align: left; }
  .hero__form .botao { justify-self: stretch; justify-content: space-between; }
  .hero__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__mapa {
    grid-column: 1 / -1; width: 100%; max-width: none; margin: 0; padding: 1.1rem 0 1.4rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--e-5);
    padding: 1.6rem 0 1.9rem;
    border-top: var(--borda-escuro); position: relative; z-index: 3;
  }
  .hero__sub { font-size: 1.05rem; line-height: 1.55; color: var(--creme-apagado); max-width: 30rem; }
  .datas { --fio-alt: 16px; }
  .datas__lista li { padding-top: 2.9rem; font-size: .92rem; }

  .vem__cartoes { width: 100%; max-width: 62rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }

  .post__grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: var(--e-6); }
  .post__titulo { text-align: left; margin: 0; }

  .dentro__grade { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: var(--e-5); padding: .75rem; }
  .dentro__foto { height: 100%; max-height: none; aspect-ratio: auto; min-height: 36rem; }
  .dentro__texto { padding: var(--e-4) var(--e-5) var(--e-4) 0; }

  .ingresso { grid-template-columns: minmax(0, 1fr) 19rem; }
  .ingresso__canhoto { border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--preto) 45%, transparent); }
  .ingresso__canhoto::before, .ingresso__canhoto::after { top: auto; left: -11px; right: auto; }
  .ingresso__canhoto::before { top: -10px; } .ingresso__canhoto::after { bottom: -10px; }

  .fixo { left: auto; right: var(--lateral); translate: 0 160%; }
  .fixo.ativo { translate: 0 0; }
}

@media (min-width: 1180px) {
  .pilares { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pilar, .pilar:nth-child(4) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ao-vivo__ponto, .ao-vivo__ondas, .faixa__trilho { animation: none; }
}

/* celular: o botão grande do ingresso volta ao tamanho normal para caber no cartão (360 px) */
@media (max-width: 520px) {
  .ingresso__corpo { padding-inline: .75rem; }
  .ingresso .botao--grande { font-size: .84rem; letter-spacing: .03em; gap: .7rem; padding: .45rem .45rem .45rem 1.05rem; }
  .ingresso .botao--grande .botao__icone { width: 2.6rem; height: 2.6rem; }
}

/* v4: a faixa inclinada não pode gerar rolagem lateral */
body { overflow-x: clip; }