/* =========================================================
   Chá do Autocuidado — landing page
   Paleta do convite: creme, azul-marinho e dourado.
   Ritmo do scroll: creme > azul > creme > azul profundo > creme > azul > creme > azul
   ========================================================= */

/* ---------- Fontes hospedadas no projeto ---------- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/pinyon-script-latin-400-normal.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
  --creme: #f7f1e1;
  --creme-claro: #fffcf5;
  --creme-escuro: #ece0c3;
  --marinho: #16283d;
  --marinho-profundo: #0e1c2c;
  --dourado: #c6a15b;
  --dourado-claro: #ddc48b;
  --dourado-escuro: #96732c;      /* dourado legível sobre creme */
  --texto: #1c2b3a;
  --texto-suave: #4a5a6b;
  --texto-sobre-azul: #cfc8b4;
  --linha-azul: rgba(198, 161, 91, 0.38);
  --erro: #b3402f;
  --verde: #1f7a4d;

  --fonte-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-script: 'Pinyon Script', 'Brush Script MT', cursive;
  --fonte-corpo: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --largura: 1160px;
  --margem: 24px;
  --secao: clamp(80px, 11vw, 150px);
  --altura-topo: 60px;
}

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

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--altura-topo);
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;   /* números alinhados: o "1" não vira "i" no código do ingresso e no endereço */
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 600;
  color: var(--marinho);
  text-wrap: balance;
}

h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; }
h3 { font-size: 1.5rem; line-height: 1.2; }

p { margin: 0; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
}

/* ---------- Revelação sutil ao rolar (só com JS) ---------- */

.js [data-revelar] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js [data-revelar].revelar--visivel { opacity: 1; transform: none; }

/* ---------- Botões ---------- */

.botao {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 18px 34px;
  border-radius: 2px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.botao:active { transform: scale(0.985); }

.botao--dourado { background: var(--dourado); color: var(--marinho-profundo); }
.botao--dourado:hover { background: #d4b36f; }

.botao--contorno { border-color: var(--marinho); color: var(--marinho); background: transparent; }
.botao--contorno:hover { background: var(--marinho); color: var(--creme); }

.botao--grande { font-size: 0.875rem; padding: 21px 40px; }

/* ---------- Cabeçalho ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--altura-topo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--margem);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.topo--solido {
  background: rgba(247, 241, 225, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom-color: var(--creme-escuro);
}

.topo__marca {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--marinho);
  text-decoration: none;
}

.topo__botao {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme);
  background: var(--marinho);
  padding: 11px 18px;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}
.topo__botao:hover { background: var(--marinho-profundo); }

/* =========================================================
   1. ABERTURA  (creme)
   ========================================================= */

.abertura {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 20px var(--margem) 0;
  align-items: end;
}

.abertura__texto {
  align-self: center;
  animation: entrada 0.9s ease both;
}

@keyframes entrada {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.abertura__xicara { width: 46px; color: var(--dourado-escuro); margin-bottom: 12px; }

.titulo { display: flex; flex-direction: column; align-items: flex-start; }

.titulo__cha {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: clamp(3.3rem, 11vw, 6rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--marinho);
}
.titulo__cha small { font-size: 0.45em; font-weight: 600; text-transform: lowercase; }

.titulo__script {
  font-family: var(--fonte-script);
  font-weight: 400;
  font-size: clamp(3.4rem, 12vw, 6.6rem);
  line-height: 1.05;
  color: var(--dourado-escuro);
  margin-top: -0.08em;
}

.abertura__tema {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.55rem, 3.6vw, 2.2rem);
  line-height: 1.18;
  color: var(--marinho);
  margin-top: 24px;
}

.abertura__sub {
  max-width: 40ch;
  margin-top: 8px;
  font-size: 1rem;
  color: var(--texto-suave);
}

.abertura__promessa {
  max-width: 46ch;
  margin-top: 20px;
  font-size: 1.0625rem;
  color: var(--texto);
}

.abertura__palestrantes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: 22px;
  font-size: 0.95rem;
  color: var(--texto-suave);
}
.abertura__palestrantes span + span { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--dourado); }
.abertura__palestrantes strong { color: var(--marinho); font-weight: 600; }

.abertura__quando {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-top: 18px;
  font-weight: 600;
  color: var(--marinho);
}
.abertura__quando span + span { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--creme-escuro); border-left-color: var(--dourado); }

.abertura__acao {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin-top: 30px;
}

.abertura__oferta { display: flex; align-items: baseline; gap: 12px; }
.abertura__oferta > span { font-size: 0.9rem; color: var(--texto-suave); }
.abertura__oferta strong {
  font-family: var(--fonte-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dourado-escuro);
}

.abertura__micro { margin-top: 14px; font-size: 0.85rem; color: var(--texto-suave); }

/* foto da dupla: cartão em arco, encostada na base da seção */
.abertura__foto {
  margin: 0;
  width: 100%;
  padding-top: 36px;
  background: var(--creme-escuro);
  border-radius: 999px 999px 0 0;
}
.abertura__foto img { width: 100%; height: auto; }

/* =========================================================
   2. IDENTIFICAÇÃO  (azul)
   ========================================================= */

.identificacao {
  background: var(--marinho);
  color: var(--creme);
  padding: var(--secao) var(--margem) calc(var(--secao) * 1.05);
}

.identificacao__miolo {
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.identificacao__titulo {
  color: var(--creme);
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  line-height: 1.04;
}
.identificacao__titulo em { font-style: italic; font-weight: 500; color: var(--dourado-claro); }

.identificacao__lista { list-style: none; margin: 0; padding: 0; }

.identificacao__lista li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--linha-azul);
}
.identificacao__lista li:last-child { border-bottom: 1px solid var(--linha-azul); }

.identificacao__num {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--dourado);
}

.identificacao__lista p {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.22;
  color: var(--creme);
}

/* a frase de maior impacto da página */
.frase {
  max-width: var(--largura);
  margin: clamp(96px, 14vw, 210px) auto 0;
  padding: 0;
}
.frase::before {
  content: '';
  display: block;
  width: 72px;
  height: 1.5px;
  background: var(--dourado);
  margin-bottom: 36px;
}
.frase p {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 6.4vw, 5.2rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--creme);
}
.frase p span { color: var(--dourado-claro); }
.frase p .junto { white-space: nowrap; }

/* =========================================================
   3. UMA NOITE PRA VOLTAR A OLHAR PRA VOCÊ  (creme)
   ========================================================= */

.sobre { padding: var(--secao) var(--margem); }

.sobre__miolo { max-width: var(--largura); margin: 0 auto; }

.sobre__topo { display: grid; grid-template-columns: 1fr; gap: 36px; }

.sobre__rotina {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  color: var(--texto-suave);
}

.sobre__virada {
  margin-top: 22px;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.22;
  color: var(--marinho);
}
.sobre__virada em { font-style: italic; color: var(--dourado-escuro); }

.eixos { list-style: none; margin: clamp(56px, 8vw, 104px) 0 0; padding: 0; }

.eixos li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 30px 0;
  border-top: 1px solid var(--dourado);
}
.eixos li:last-child { border-bottom: 1px solid var(--dourado); }

.eixos h3 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.eixos p { color: var(--texto-suave); max-width: 46ch; }

/* =========================================================
   4. DUAS PERSPECTIVAS  (azul profundo)
   ========================================================= */

.perspectivas {
  background: var(--marinho-profundo);
  color: var(--creme);
  padding: var(--secao) var(--margem);
  text-align: center;
}

.perspectivas__miolo { max-width: var(--largura); margin: 0 auto; }

.perspectivas h2 { color: var(--creme); font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1.06; }

.perspectivas__sub {
  max-width: 44ch;
  margin: 24px auto 0;
  font-size: 1.1rem;
  color: var(--texto-sobre-azul);
}

.perspectivas__par {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(56px, 8vw, 100px);
}

.perspectivas__lado { padding: 38px 0; border-top: 1px solid var(--linha-azul); }
.perspectivas__lado:last-child { border-bottom: 1px solid var(--linha-azul); }

.perspectivas__area {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  line-height: 1;
  color: var(--creme);
}

.perspectivas__nome {
  margin-top: 14px;
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--dourado-claro);
}

/* =========================================================
   5. PALESTRANTES  (creme)
   ========================================================= */

.palestrantes { padding: var(--secao) var(--margem); }

.palestrantes__miolo { max-width: var(--largura); margin: 0 auto; }

.palestrantes__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  margin-top: clamp(40px, 6vw, 72px);
}

.palestrante__foto {
  margin: 0 0 26px;
  aspect-ratio: 4 / 5;
  background: var(--creme-escuro);
  border-radius: 999px 999px 0 0;
  overflow: hidden;
}
.palestrante__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.palestrante__cargo {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--dourado-escuro);
}

.palestrante h3 { font-size: clamp(2rem, 3.4vw, 2.7rem); margin-top: 2px; }

.palestrante__bio { max-width: 40ch; margin-top: 14px; color: var(--texto-suave); }

/* =========================================================
   6. A EXPERIÊNCIA  (azul)
   ========================================================= */

.experiencia {
  background: var(--marinho);
  color: var(--creme);
  padding: var(--secao) var(--margem);
}

.experiencia__miolo { max-width: var(--largura); margin: 0 auto; }

.experiencia h2 { color: var(--creme); font-size: clamp(2.2rem, 5.2vw, 3.9rem); line-height: 1.06; }

.experiencia__lista {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  margin: clamp(48px, 7vw, 88px) 0 0;
  padding: 0;
}

.experiencia__lista li { padding: 28px 0; border-top: 1px solid var(--linha-azul); }

.experiencia__lista h3 {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  color: var(--dourado-claro);
}

.experiencia__lista p { margin-top: 8px; max-width: 34ch; color: var(--texto-sobre-azul); }

/* =========================================================
   7. PROVA SOCIAL (escondida até ter material real)
   ========================================================= */

.depoimentos { background: var(--creme-claro); padding: var(--secao) var(--margem); }
.depoimentos__miolo { max-width: var(--largura); margin: 0 auto; }
.depoimentos__lista { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
.depoimentos blockquote { margin: 0; padding-left: 20px; border-left: 2px solid var(--dourado); }
.depoimentos blockquote p {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.32;
  color: var(--marinho);
}
.depoimentos footer { margin-top: 12px; font-size: 0.9rem; font-weight: 600; color: var(--dourado-escuro); }

/* =========================================================
   8. LOCAL  (creme, discreto)
   ========================================================= */

.local { padding: clamp(64px, 8vw, 104px) var(--margem); }

.local__miolo {
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

.local h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }

.local__endereco {
  margin-top: 20px;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.25;
  color: var(--marinho);
}

.local__quando { margin: 12px 0 26px; color: var(--texto-suave); }

.local__mapa iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  border-radius: 2px;
  background: var(--creme-escuro);
}

/* =========================================================
   9. INGRESSO  (azul)
   ========================================================= */

.ingresso {
  background: var(--marinho);
  color: var(--creme);
  padding: var(--secao) var(--margem);
  scroll-margin-top: var(--altura-topo);
}

.ingresso__miolo {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
}

.ingresso h2 { color: var(--creme); font-size: clamp(2.2rem, 4.8vw, 3.5rem); line-height: 1.06; }

.ingresso__intro p {
  margin-top: 18px;
  max-width: 30ch;
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--texto-sobre-azul);
}

.cartao {
  background: var(--creme-claro);
  color: var(--texto);
  border-top: 3px solid var(--dourado);
  border-radius: 2px;
  padding: 34px 28px 30px;
}
.cartao--escondido { display: none; }

.cartao__rotulo {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.cartao__preco {
  margin-top: 6px;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--dourado-escuro);
  white-space: nowrap;
}

.cartao__detalhe {
  margin-top: 14px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--creme-escuro);
  font-size: 0.95rem;
  color: var(--texto-suave);
}

form { display: flex; flex-direction: column; }

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--marinho);
  margin-top: 18px;
  margin-bottom: 6px;
}

input {
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  padding: 14px;
  border: 1.5px solid var(--creme-escuro);
  border-radius: 2px;
  background: var(--creme);
  color: var(--texto);
}
input:focus { border-color: var(--dourado); }

#botao-comprar {
  margin-top: 26px;
  background: var(--marinho);
  color: var(--creme);
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 19px 16px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
#botao-comprar:hover { background: var(--marinho-profundo); }
#botao-comprar:active { transform: scale(0.985); }
#botao-comprar:disabled { opacity: 0.6; cursor: not-allowed; }

.erro { color: var(--erro); font-size: 0.9rem; min-height: 1.3em; margin-top: 10px; }

.cartao__confianca { margin-top: 8px; font-size: 0.82rem; line-height: 1.5; color: var(--texto-suave); }

/* etapa do Pix */

#etapa-pix h3, #etapa-confirmado h3 { margin-bottom: 10px; color: var(--marinho); }

.pix__instrucao { color: var(--texto-suave); font-size: 0.97rem; margin-bottom: 20px; }

.pix__qrcode {
  width: 220px;
  height: 220px;
  margin: 0 auto 20px;
  border: 1px solid var(--creme-escuro);
  border-radius: 2px;
  background: #fff;
}

.botao-copiar {
  display: block;
  width: 100%;
  background: var(--dourado);
  color: var(--marinho-profundo);
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 17px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.botao-copiar:hover { background: #d4b36f; }

.pix__aguardando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 0.92rem;
  color: var(--marinho);
}

.pix__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--creme-escuro);
  border-top-color: var(--dourado);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* etapa confirmado */

#etapa-confirmado { text-align: center; }

.confirmado__selo {
  width: 54px;
  height: 54px;
  line-height: 54px;
  margin: 0 auto 16px;
  background: var(--marinho);
  color: var(--dourado-claro);
  border-radius: 50%;
  font-size: 1.6rem;
}

#confirmado-nome { color: var(--texto-suave); margin-bottom: 20px; }

.confirmado__codigo {
  background: var(--creme);
  border: 1.5px dashed var(--dourado);
  border-radius: 2px;
  padding: 18px;
  margin-bottom: 16px;
}
.confirmado__codigo-rotulo { display: block; font-size: 0.82rem; color: var(--texto-suave); margin-bottom: 4px; }
.confirmado__codigo-valor {
  display: block;
  font-family: var(--fonte-display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--marinho);
}

.confirmado__aviso { font-size: 0.92rem; color: var(--texto-suave); margin-bottom: 22px; }

.botao-whatsapp {
  display: block;
  background: var(--verde);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 17px;
  border-radius: 2px;
  transition: opacity 0.2s ease;
}
.botao-whatsapp:hover { opacity: 0.92; }

/* =========================================================
   10. DÚVIDAS  (creme)
   ========================================================= */

.duvidas { padding: var(--secao) var(--margem); }

.duvidas__miolo { max-width: 780px; margin: 0 auto; }

.duvidas h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 32px; }

details { border-bottom: 1px solid var(--creme-escuro); }
details:first-of-type { border-top: 1px solid var(--creme-escuro); }

summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  font-weight: 600;
  color: var(--marinho);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 1.5rem; line-height: 1; color: var(--dourado-escuro); flex: none; }
details[open] summary::after { content: '−'; }

details p { padding: 0 0 24px; max-width: 60ch; color: var(--texto-suave); }
details a { color: var(--dourado-escuro); font-weight: 600; }

/* =========================================================
   11. FECHAMENTO  (azul)
   ========================================================= */

.fechamento {
  background: var(--marinho);
  color: var(--creme);
  padding: clamp(96px, 13vw, 180px) var(--margem);
  text-align: center;
}

.fechamento__miolo { max-width: 860px; margin: 0 auto; }

.fechamento h2 { color: var(--creme); font-size: clamp(2.3rem, 6.2vw, 4.6rem); line-height: 1.05; }

.fechamento__texto {
  margin: 26px auto 44px;
  max-width: 34ch;
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--texto-sobre-azul);
}

.fechamento__quando { margin-top: 28px; line-height: 1.7; color: var(--texto-sobre-azul); }

/* ---------- Rodapé ---------- */

.rodape {
  background: var(--marinho-profundo);
  color: var(--texto-sobre-azul);
  text-align: center;
  padding: 44px var(--margem);
  font-size: 0.92rem;
}
.rodape__marca { font-family: var(--fonte-display); font-size: 1.5rem; font-weight: 700; color: var(--creme); margin-bottom: 4px; }

/* ---------- Barra fixa de compra (celular) ---------- */

.barra-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--margem) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--marinho);
  color: var(--creme);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.barra-compra--visivel { transform: none; }

.barra-compra__preco { display: flex; flex-direction: column; line-height: 1.15; }
.barra-compra__preco > span { font-size: 0.72rem; color: var(--texto-sobre-azul); }
.barra-compra__preco strong { font-family: var(--fonte-display); font-size: 1.55rem; font-weight: 700; color: var(--creme); }

.barra-compra .botao { padding: 14px 22px; font-size: 0.75rem; }

/* =========================================================
   Telas maiores
   ========================================================= */

@media (min-width: 860px) {
  :root { --margem: 32px; }

  .abertura {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 56px;
    padding-top: 28px;
    min-height: min(880px, calc(100svh - var(--altura-topo)));
  }
  .abertura__texto { padding-bottom: 72px; }
  .abertura__foto {
    align-self: end;
    display: flex;
    align-items: flex-end;
    min-height: 620px;
    padding-top: 0;
  }
  .abertura__acao { flex-direction: row; align-items: center; gap: 28px; }
  .abertura__acao .botao { white-space: nowrap; flex: none; }
  .abertura__oferta { flex-direction: column; align-items: flex-start; gap: 0; white-space: nowrap; flex: none; }

  .identificacao__miolo { grid-template-columns: 5fr 7fr; gap: 88px; align-items: start; }
  .identificacao__titulo { position: sticky; top: 112px; }
  .identificacao__lista li:nth-child(even) { padding-left: 9%; }

  .sobre__topo { grid-template-columns: 5fr 7fr; gap: 88px; align-items: start; }

  .eixos li { grid-template-columns: 5fr 7fr; gap: 88px; align-items: baseline; padding: 36px 0; }

  .perspectivas__par { grid-template-columns: 1fr 1fr; }
  .perspectivas__lado { padding: 56px 24px; border-bottom: 1px solid var(--linha-azul); }
  .perspectivas__lado + .perspectivas__lado { border-left: 1px solid var(--linha-azul); }

  .palestrantes__lista { grid-template-columns: 1fr 1fr; gap: 72px; }

  .experiencia__lista { grid-template-columns: 1fr 1fr; column-gap: 88px; }

  .depoimentos__lista { grid-template-columns: repeat(3, 1fr); gap: 40px; }

  .local__miolo { grid-template-columns: 1fr 1fr; gap: 72px; }

  .ingresso__miolo { grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center; }
  .cartao { padding: 40px 36px 34px; }
}

@media (max-width: 859px) {
  .barra-compra { display: flex; }
  body { padding-bottom: 76px; }
  .abertura__acao .botao { width: 100%; }

  .abertura__palestrantes { flex-direction: column; gap: 2px; }
  .abertura__palestrantes span + span { margin-left: 0; padding-left: 0; border-left: 0; }

  .abertura__quando { display: grid; grid-template-columns: auto auto; justify-content: start; }
  .abertura__quando span:nth-child(2) { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--dourado); }
  .abertura__quando span:nth-child(3) { grid-column: 1 / -1; margin: 2px 0 0; padding-left: 0; border-left: 0; }

  #botao-comprar { font-size: 0.75rem; letter-spacing: 0.07em; padding: 19px 10px; }
}

@media (max-width: 420px) {
  .cartao { padding: 28px 22px 26px; }
  .topo__marca { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .abertura__texto { animation: none; }
  .js [data-revelar] { opacity: 1; transform: none; transition: none; }
  .barra-compra, .botao, #botao-comprar, .topo { transition: none; }
}