/* =========================================================
   Mindful Institute — Dr. Marcelo Csermák
   Tema: "Da noite ao amanhecer"
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* cor */
  --noite:        #0A1826;
  --noite-2:      #0F2438;
  --noite-3:      #16344E;
  --creme:        #FBF8F3;
  --areia:        #F2EADF;
  --areia-2:      #E7DCCC;
  --tinta:        #1B2733;
  --tinta-suave:  #4A5866;
  --agua:         #3E9E97;
  --agua-clara:   #6FCFC5;
  --alvorada:     #E39A4A;
  --alvorada-cl:  #F3C58A;
  --alerta:       #B4553F;

  --superficie:   #FFFFFF;
  --borda:        #E2D8C9;
  --borda-escura: rgba(255,255,255,.14);

  /* tipografia — base propositalmente grande */
  --fonte-base: 19px;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --p1: clamp(2.4rem, 5.4vw, 4rem);
  --p2: clamp(2rem, 4vw, 3.1rem);
  --p3: clamp(1.35rem, 2.2vw, 1.75rem);

  /* espaço */
  --gap: clamp(1.5rem, 3vw, 2.75rem);
  --secao: clamp(4.5rem, 9vw, 8rem);
  --wrap: 1220px;

  /* forma */
  --raio: 18px;
  --raio-g: 28px;
  --sombra: 0 2px 4px rgba(20,30,42,.04), 0 14px 40px -12px rgba(20,30,42,.16);
  --sombra-g: 0 30px 70px -28px rgba(10,24,38,.45);

  --transicao: 380ms cubic-bezier(.22,.68,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  font-size: var(--fonte-base);
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--texto);
  line-height: 1.72;
  color: var(--tinta);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

::selection { background: var(--alvorada-cl); color: var(--noite); }

:focus-visible {
  outline: 3px solid var(--agua);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px;
  z-index: 200; background: var(--noite); color: #fff;
  padding: .8rem 1.4rem; border-radius: 0 0 12px 12px;
  text-decoration: none; font-weight: 600;
  transition: top var(--transicao);
}
.skip-link:focus { top: 0; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

/* ---------- 3. Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  font-family: var(--texto);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform var(--transicao), background var(--transicao),
              color var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--agua) 0%, #2F8880 100%);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(62,158,151,.75);
}
.btn-primary:hover { box-shadow: 0 16px 34px -12px rgba(62,158,151,.85); }

.btn-ghost {
  border-color: currentColor;
  color: inherit;
  opacity: .92;
}
.btn-ghost:hover { background: rgba(127,127,127,.1); opacity: 1; }

.btn-sm  { padding: .6rem 1.15rem; font-size: .85rem; }
.btn-lg  { padding: 1.1rem 2.2rem; font-size: 1.02rem; }
.btn-bloco { display: flex; width: 100%; }

.link-inline {
  background: none; border: 0; padding: 0;
  color: var(--agua); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.link-inline:hover { color: var(--alvorada); }

/* ---------- 4. Cabeçalho ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: background var(--transicao), box-shadow var(--transicao), backdrop-filter var(--transicao);
}
.site-header.compacto {
  background: rgba(251,248,243,.9);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--borda), 0 10px 34px -22px rgba(10,24,38,.5);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem;
  padding: 1rem 0;
  position: relative; z-index: 2;
}

.brand {
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; color: #fff;
  transition: color var(--transicao);
  position: relative; z-index: 3; flex-shrink: 0;
}
.site-header.compacto .brand { color: var(--noite); }
.brand-mark { color: var(--agua-clara); flex-shrink: 0; }
.site-header.compacto .brand-mark { color: var(--agua); }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.brand-text strong { font-family: var(--display); font-size: 1.02rem; font-weight: 600; }
.brand-text em { font-style: normal; font-size: .76rem; opacity: .78; letter-spacing: .06em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 1.2rem; flex-wrap: nowrap; flex-shrink: 0; }
.nav a {
  color: #fff; text-decoration: none; white-space: nowrap;
  font-size: .84rem; font-weight: 500;
  position: relative; padding: .25rem 0;
  transition: color var(--transicao), opacity var(--transicao);
}
.site-header.compacto .nav a { color: var(--tinta); }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--transicao);
}
.nav a:not(.btn):hover::after,
.nav a.ativo::after { transform: scaleX(1); transform-origin: left; }
.nav a.ativo:not(.btn) { color: var(--agua-clara); }
.site-header.compacto .nav a.ativo:not(.btn) { color: var(--agua); }
.nav .btn-primary, .site-header.compacto .nav .btn-primary { color: #fff; }

.header-tools { display: flex; align-items: center; gap: .5rem; position: relative; z-index: 3; flex-shrink: 0; }
.icon-btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.site-header.compacto .icon-btn { border-color: var(--borda); color: var(--noite); }
.icon-btn:hover { background: rgba(255,255,255,.16); }
.site-header.compacto .icon-btn:hover { background: var(--areia); }

.burger { display: none; }
.burger-bars { display: grid; gap: 5px; width: 20px; }
.burger-bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--transicao), opacity var(--transicao); }
.burger[aria-expanded="true"] .burger-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-bars i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 8rem 0 5rem;
  color: #fff;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%;
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,24,38,.96) 0%, rgba(10,24,38,.82) 38%, rgba(10,24,38,.35) 70%, rgba(10,24,38,.6) 100%),
    linear-gradient(to top, rgba(10,24,38,.9) 0%, transparent 40%);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }

.hero-inner { position: relative; z-index: 2; max-width: 60ch; }

.eyebrow {
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--agua-clara); font-weight: 600; margin-bottom: 1.6rem;
  display: flex; align-items: center; gap: .8rem;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1.5px; background: var(--agua-clara); flex-shrink: 0;
}

.hero h1 { font-size: var(--p1); margin-bottom: 1.6rem; }
.hero h1 em {
  font-style: italic;
  color: var(--alvorada-cl);
}
.hero-lead {
  font-size: 1.08rem; max-width: 54ch; color: rgba(255,255,255,.86);
  margin-bottom: 2.1rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.8rem; }

.hero-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
  padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.18);
  max-width: 46rem;
}
.hero-facts dt {
  font-family: var(--display); font-size: 1.95rem; line-height: 1;
  color: var(--alvorada-cl); margin-bottom: .3rem;
}
.hero-facts dd { font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.7); margin: 0; }

.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 3; color: rgba(255,255,255,.55);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transicao);
}
.scroll-hint:hover { color: #fff; }
.scroll-dot {
  width: 24px; height: 40px; border: 1.5px solid currentColor; border-radius: 999px;
  position: relative;
}
.scroll-dot::after {
  content: ""; position: absolute; left: 50%; top: 8px;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
  transform: translateX(-50%);
  animation: descer 2.4s ease-in-out infinite;
}
@keyframes descer {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  50%      { transform: translate(-50%, 16px); opacity: .2; }
}

/* ---------- 6. Faixa de autoridade ---------- */
.strip {
  background: var(--noite);
  color: rgba(255,255,255,.55);
  padding: 1.4rem 0;
  overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.08);
}
.strip-inner {
  display: flex; gap: 3.5rem; width: max-content;
  animation: deslizar 46s linear infinite;
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
}
.strip:hover .strip-inner { animation-play-state: paused; }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* ---------- 7. Seções genéricas ---------- */
.section { padding: var(--secao) 0; position: relative; }
#pilares { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
#para-quem { padding-top: clamp(2.5rem, 5vw, 4.5rem); }

.section-escura {
  background: var(--noite);
  color: rgba(255,255,255,.82);
}
.section-escura h2, .section-escura h3, .section-escura h4 { color: #fff; }
.section-escura .kicker { color: var(--agua-clara); }
.section-escura .lead { color: rgba(255,255,255,.78); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.centralizado { margin-inline: auto; text-align: center; }
.section-head.centralizado .kicker { justify-content: center; }

.kicker {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--agua); margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: .7rem;
}
.kicker::before { content: ""; width: 26px; height: 1.5px; background: currentColor; }

h2 { font-size: var(--p2); margin-bottom: 1.2rem; }
.titulo-menor { font-size: var(--p3); margin-bottom: 1.4rem; }

.lead { font-size: 1.09rem; color: var(--tinta-suave); }
.section p + p { margin-top: 1.1rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.gap-grande { gap: clamp(2rem, 5vw, 4.5rem); }
.align-center { align-items: center; }
.align-start { align-items: start; }

/* ---------- 8. Empatia ---------- */
.section-empatia { background: var(--areia); }

.relacao-lista {
  list-style: none; padding: 0; margin: 2rem 0 1.4rem;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.relacao-lista li {
  background: var(--superficie);
  border: 1px solid var(--borda);
  padding: .5rem 1.15rem; border-radius: 999px;
  font-size: .88rem; font-weight: 500;
  transition: transform var(--transicao), border-color var(--transicao);
}
.relacao-lista li:hover { transform: translateY(-2px); border-color: var(--agua); }

.assinatura-frase {
  font-family: var(--display); font-style: italic;
  font-size: 1.25rem; color: var(--agua);
}

.figura-solta img {
  width: 100%; border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
}

/* ---------- 9. Cards de ciência ---------- */
.cards-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.card {
  padding: 2.2rem; border-radius: var(--raio);
  transition: transform var(--transicao), border-color var(--transicao), background var(--transicao);
}
.card-vidro {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.card-vidro:hover { transform: translateY(-5px); border-color: var(--agua-clara); background: rgba(255,255,255,.08); }
.card-num {
  font-family: var(--display); font-size: 2.4rem; line-height: 1;
  color: var(--alvorada); opacity: .55; display: block; margin-bottom: 1rem;
}
.card h3 { font-size: 1.22rem; margin-bottom: .7rem; }
.card p { font-size: .96rem; }

.figura-infografico {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.figura-infografico img {
  width: 100%; border-radius: var(--raio);
  border: 1px solid rgba(255,255,255,.14);
}
figcaption {
  margin-top: .9rem; font-size: .84rem; opacity: .62; font-style: italic;
}

/* ---------- 10. Pilares ---------- */
.pilares { list-style: none; padding: 0; display: grid; gap: 1.2rem; counter-reset: p; }
.pilar {
  display: grid; grid-template-columns: auto 1fr; gap: 1.8rem; align-items: start;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.pilar:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--agua); }
.pilar-icone {
  width: 68px; height: 68px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--areia), #fff);
  border: 1px solid var(--borda);
  color: var(--agua);
}
.pilar-icone svg { width: 34px; height: 34px; }
.pilar-tag {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--alvorada); font-weight: 700; margin-bottom: .5rem;
}
.pilar h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.pilar p { color: var(--tinta-suave); font-size: 1rem; }

/* ---------- 12. Para quem ---------- */
.bloco {
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  border-radius: var(--raio-g);
  height: 100%;
}
.bloco-sim { background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); }
.bloco-nao { background: #FBF1EC; border: 1px solid #E8CFC4; }
.bloco h3 {
  font-size: 1.28rem; margin-bottom: 1.4rem;
  display: flex; align-items: center; gap: .8rem;
}
.bloco-selo {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--texto); font-size: 1rem; font-weight: 700;
}
.bloco-sim .bloco-selo { background: var(--agua); color: #fff; }
.bloco-nao .bloco-selo { background: var(--alerta); color: #fff; }

.lista-check, .lista-alerta { list-style: none; padding: 0; display: grid; gap: 1rem; }
.lista-check li, .lista-alerta li {
  position: relative; padding-left: 1.9rem; font-size: 1rem; color: var(--tinta-suave);
}
.lista-check li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--agua); font-weight: 700;
}
.lista-alerta li::before {
  content: "—"; position: absolute; left: 0; top: 0; color: var(--alerta); font-weight: 700;
}
.sub-titulo { font-size: 1.05rem; margin: 1.8rem 0 .7rem; }
.bloco-nao p { font-size: .97rem; color: var(--tinta-suave); }
.citacao-curta {
  margin-top: 1.4rem; padding-left: 1.1rem;
  border-left: 3px solid var(--alerta);
  font-family: var(--display); font-style: italic; font-size: 1.08rem;
  color: var(--tinta);
}

.aviso-clinico {
  margin-top: 2.5rem; padding: 1.4rem 1.8rem;
  background: var(--areia); border-radius: var(--raio);
  border-left: 4px solid var(--alvorada);
  font-size: .95rem; color: var(--tinta-suave);
}

/* ---------- 13. Listas do programa ---------- */
.lista-numerada { list-style: none; padding: 0; counter-reset: n; display: grid; gap: 1.2rem; }
.lista-numerada li {
  counter-increment: n; position: relative; padding-left: 3rem; font-size: 1rem;
}
.lista-numerada li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  font-family: var(--display); font-size: 1rem;
  color: var(--alvorada); font-weight: 600;
}

.acordeao { display: grid; gap: .6rem; }
.acordeao details {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.04);
  transition: border-color var(--transicao), background var(--transicao);
}
.acordeao details[open] { border-color: var(--agua-clara); background: rgba(255,255,255,.07); }
.acordeao summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 3rem 1.1rem 1.4rem;
  font-weight: 600; font-size: .98rem; color: #fff;
  position: relative;
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after {
  content: "+"; position: absolute; right: 1.4rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; color: var(--agua-clara); line-height: 1;
  transition: transform var(--transicao);
}
.acordeao details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.acordeao details p { padding: 0 1.4rem 1.3rem; font-size: .95rem; color: rgba(255,255,255,.72); }

.figura-larga { margin-top: clamp(2.5rem, 5vw, 4rem); }
.figura-larga img { width: 100%; border-radius: var(--raio); }

/* ---------- 14. Benefícios ---------- */
.beneficios {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.beneficios li {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.8rem;
  position: relative; overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.beneficios li::before {
  content: ""; position: absolute; inset: auto auto 0 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--agua), var(--alvorada));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transicao);
}
.beneficios li:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.beneficios li:hover::before { transform: scaleX(1); }
.beneficios h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.beneficios p { font-size: .92rem; color: var(--tinta-suave); }

/* ---------- 15. Mídia ---------- */
.section-midia { background: var(--areia); }

/* Fachada de vídeo: o player de terceiros só é injetado após o clique. */
.video-facade { position: relative; margin: 0; }
.video-facade img,
.video-facade iframe,
.video-facade video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; border-radius: var(--raio-g); box-shadow: var(--sombra-g);
  object-fit: cover; background: var(--noite);
}
.video-facade figcaption {
  margin-top: .9rem; font-size: .88rem; color: var(--tinta-suave); line-height: 1.5;
}
.video-play {
  position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(10,24,38,.05), rgba(10,24,38,.45));
  border: 0; border-radius: var(--raio-g); cursor: pointer;
  padding: 0; transition: background var(--transicao);
}
.video-play:hover { background: linear-gradient(180deg, rgba(10,24,38,.15), rgba(10,24,38,.55)); }
.video-play-icone {
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: rgba(251,248,243,.94);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(10,24,38,.35);
  transition: transform var(--transicao), background var(--transicao);
}
.video-play-icone::before {
  content: ""; width: 0; height: 0; margin-left: .3rem;
  border-left: 1.1rem solid var(--noite);
  border-top: .7rem solid transparent;
  border-bottom: .7rem solid transparent;
}
.video-play:hover .video-play-icone { transform: scale(1.08); background: var(--agua-clara); }
.video-play:focus-visible { outline: 3px solid var(--alvorada); outline-offset: 4px; }

.videos-bloco { margin-top: 5rem; }
.videos-titulo { font-family: var(--display); font-size: var(--p3); line-height: 1.25; }
.videos-nota { margin-top: .9rem; font-size: .86rem; color: var(--tinta-suave); max-width: 52ch; }
.videos-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2rem;
}

/* Galeria de imprensa e palestras — mural em colunas (masonry). */
.galeria-bloco { margin-top: 5rem; }
.galeria-masonry {
  column-count: 3; column-gap: 1.6rem;
}
.galeria-item {
  break-inside: avoid; margin: 0 0 1.6rem;
  background: #fff; border-radius: var(--raio);
  box-shadow: var(--sombra); overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.galeria-item:hover { transform: translateY(-4px); box-shadow: var(--sombra-g); }
.galeria-item img { display: block; width: 100%; height: auto; }
.galeria-item figcaption {
  padding: 1rem 1.15rem 1.2rem;
  font-size: .86rem; line-height: 1.55; color: var(--tinta-suave);
}
.galeria-item figcaption strong {
  display: block; margin-bottom: .3rem;
  font-family: var(--display); font-size: 1rem; color: var(--tinta); font-weight: 600;
}
.galeria-link { position: relative; display: block; text-decoration: none; }
.galeria-selo {
  position: absolute; top: .8rem; right: .8rem;
  background: rgba(10,24,38,.82); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
  opacity: 0; transform: translateY(-4px); transition: all var(--transicao);
}
.galeria-link:hover .galeria-selo,
.galeria-link:focus-visible .galeria-selo { opacity: 1; transform: none; }
.galeria-link:focus-visible { outline: 3px solid var(--alvorada); outline-offset: 3px; border-radius: var(--raio); }

@media (max-width: 900px) { .galeria-masonry { column-count: 2; } }
@media (max-width: 560px) { .galeria-masonry { column-count: 1; } }
.lista-midia { list-style: none; padding: 0; display: grid; gap: .9rem; margin-bottom: 2rem; }
.lista-midia li {
  padding-left: 1.6rem; position: relative; font-size: 1rem; color: var(--tinta-suave);
}
.lista-midia li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--alvorada);
}

.audio-card {
  background: var(--noite); color: #fff;
  border-radius: var(--raio); padding: 1.5rem;
}
.audio-titulo { font-family: var(--display); font-size: 1.1rem; margin-bottom: .2rem; }
.audio-sub { font-size: .8rem; opacity: .6; margin-bottom: 1rem; }
.audio-card audio { width: 100%; }
.audio-aviso { margin-top: .8rem; font-size: .82rem; opacity: .6; font-style: italic; }

/* ---------- 16. Oferta ---------- */
.oferta {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: 0;
  border-radius: var(--raio-g); overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
}
.oferta-detalhes { padding: clamp(2rem, 4vw, 3.2rem); background: rgba(255,255,255,.04); }
.oferta-lista { display: grid; gap: 1.5rem; }
.oferta-lista > div { display: grid; gap: .25rem; }
.oferta-lista dt {
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--agua-clara); font-weight: 600;
}
.oferta-lista dd { margin: 0; font-size: 1.06rem; color: #fff; }

.oferta-preco {
  padding: clamp(2rem, 4vw, 3.2rem);
  background: linear-gradient(160deg, var(--agua) 0%, #276F6A 100%);
  color: #fff; display: grid; align-content: center; text-align: center;
}
.preco-rotulo { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.preco-valor {
  font-family: var(--display); font-size: clamp(2.8rem, 5vw, 3.8rem);
  line-height: 1; margin: .5rem 0 .2rem;
}
.preco-valor span { font-size: .45em; vertical-align: super; margin-right: .1em; opacity: .85; }
.preco-valor small { font-size: .4em; }
.preco-obs { font-size: .95rem; opacity: .88; margin-bottom: 1.8rem; }
.preco-nota { font-size: .8rem; opacity: .8; margin-top: .9rem; }
.oferta-preco .btn-primary {
  background: #fff; color: #1E5F5A; box-shadow: 0 10px 26px -12px rgba(0,0,0,.5);
}

/* ---------- 17. Sobre ---------- */
.grid-sobre {
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.retrato { position: sticky; top: 7rem; }
.retrato img {
  width: 100%; border-radius: var(--raio-g);
  box-shadow: var(--sombra-g); filter: saturate(.92);
}
.retrato figcaption {
  margin-top: 1.2rem; font-style: normal; opacity: 1;
  font-family: var(--display); font-size: 1.1rem; color: var(--tinta);
}
.retrato figcaption span {
  font-family: var(--texto); font-size: .85rem; color: var(--tinta-suave);
}

.timeline { list-style: none; padding: 0 0 0 1.9rem; display: grid; gap: 1.3rem; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: .6rem; bottom: .6rem;
  width: 1.5px; background: linear-gradient(to bottom, var(--agua), var(--alvorada));
  opacity: .4;
}
.timeline li { position: relative; font-size: 1rem; color: var(--tinta-suave); }
.timeline li::before {
  content: ""; position: absolute; left: -1.9rem; top: .62em;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--creme); border: 2px solid var(--agua);
}

/* ---------- 18. Ebook ---------- */
.section-ebook { background: var(--noite-2); color: rgba(255,255,255,.82); }
.section-ebook h2 { color: #fff; }
.section-ebook .kicker { color: var(--alvorada-cl); }
.section-ebook .lead { color: rgba(255,255,255,.75); }
.figura-ebook img { width: 100%; border-radius: var(--raio-g); box-shadow: var(--sombra-g); }

.ebook-cta { margin-top: 2rem; max-width: 30rem; }
.ebook-cta .btn { display: flex; width: 100%; margin-bottom: 1rem; }

/* ---------- 19. Formulários ---------- */
.campo { display: grid; gap: .45rem; }
.campo label { font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .9rem 1.1rem;
  border-radius: 12px;
  border: 1.5px solid var(--borda);
  background: var(--superficie);
  color: var(--tinta);
  font-size: .98rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--agua);
  box-shadow: 0 0 0 4px rgba(62,158,151,.18);
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A5866' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 12px;
  padding-right: 2.8rem;
}
.campo.erro input, .campo.erro select, .campo.erro textarea { border-color: var(--alerta); }

.form-status { font-size: .9rem; font-weight: 500; min-height: 1.4em; }
.form-status.ok { color: var(--agua); }
.form-status.erro { color: var(--alerta); }
.form-legal { font-size: .78rem; opacity: .6; line-height: 1.5; }

.section-inscricao { background: var(--areia); }
.form-inscricao {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem;
  background: var(--superficie);
  padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: var(--raio-g);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
}
.campo-largo { grid-column: 1 / -1; }
.campo-consent { gap: 0; }
.checkbox { display: flex; gap: .8rem; align-items: flex-start; font-weight: 400; font-size: .92rem; cursor: pointer; }
.checkbox input { width: 20px; height: 20px; flex-shrink: 0; margin-top: .25rem; accent-color: var(--agua); }
.inscricao-alt { margin-top: 1.8rem; text-align: center; font-size: .95rem; color: var(--tinta-suave); }
.inscricao-alt a { color: var(--agua); font-weight: 600; }

/* ---------- 20. Rodapé ---------- */
.site-footer { background: var(--noite); color: rgba(255,255,255,.7); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.footer-topo {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-nome { font-family: var(--display); font-size: 1.4rem; color: #fff; }
.footer-sub { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--agua-clara); margin: .3rem 0 1.1rem; }
.footer-texto { font-size: .92rem; max-width: 34ch; }
.footer-col { display: grid; gap: .7rem; align-content: start; }
.footer-col h3 { font-family: var(--texto); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: .3rem; }
.footer-col a { font-size: .93rem; text-decoration: none; transition: color var(--transicao); }
.footer-col a:hover { color: var(--agua-clara); }
.redes { display: flex; gap: 1rem; margin-top: .6rem; flex-wrap: wrap; }
.redes a { font-size: .82rem; padding: .4rem .95rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; }
.redes a:hover { border-color: var(--agua-clara); }

.footer-base { padding: 1.8rem 0 2.5rem; display: grid; gap: .8rem; font-size: .83rem; color: rgba(255,255,255,.45); }
.footer-legais { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.footer-legais a, .footer-legais .link-inline { color: rgba(255,255,255,.7); font-size: .83rem; text-decoration: none; font-weight: 500; }
.footer-legais a:hover, .footer-legais .link-inline:hover { color: var(--agua-clara); }
.footer-disclaimer { max-width: 72ch; line-height: 1.6; opacity: .8; }

/* ---------- 21. Voltar ao topo ---------- */
.voltar-topo {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 70;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--noite); color: #fff; font-size: 1.2rem;
  box-shadow: var(--sombra);
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity var(--transicao), transform var(--transicao), background var(--transicao);
}
.voltar-topo.visivel { opacity: 1; pointer-events: auto; transform: none; }
.voltar-topo:hover { background: var(--agua); }

/* ---------- 22. Cookies ---------- */
.cookie-banner {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 120;
  background: var(--noite); color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  padding: 1.6rem clamp(1.4rem, 3vw, 2.4rem);
  max-width: var(--wrap); margin-inline: auto;
  transform: translateY(140%);
  transition: transform 520ms cubic-bezier(.2,.7,.3,1);
}
.cookie-banner.aberto { transform: none; }
.cookie-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.cookie-texto { flex: 1 1 32rem; }
.cookie-texto h2 { font-size: 1.2rem; color: #fff; margin-bottom: .5rem; }
.cookie-texto p { font-size: .9rem; line-height: 1.6; max-width: 68ch; }
.cookie-acoes { display: flex; gap: .7rem; flex-wrap: wrap; }
.cookie-acoes .btn-ghost { color: rgba(255,255,255,.85); }

/* ---------- 23. Modais ---------- */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 1.2rem; }
.modal[hidden] { display: none; }
.modal-fundo { position: absolute; inset: 0; background: rgba(8,18,30,.72); backdrop-filter: blur(6px); }
.modal-caixa {
  position: relative; z-index: 2;
  background: var(--creme); color: var(--tinta);
  width: min(100%, 46rem); max-height: 86vh; overflow-y: auto;
  border-radius: var(--raio-g);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: var(--sombra-g);
  animation: subir 380ms cubic-bezier(.2,.7,.3,1);
}
@keyframes subir { from { opacity: 0; transform: translateY(24px); } }
.modal-caixa h2 { font-size: 1.6rem; margin-bottom: 1rem; padding-right: 2.5rem; }
.modal-caixa h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.modal-caixa p { font-size: .95rem; color: var(--tinta-suave); }
.modal-fechar {
  position: absolute; top: 1rem; right: 1.2rem;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 1.6rem; line-height: 1; color: var(--tinta-suave);
  transition: background var(--transicao);
}
.modal-fechar:hover { background: var(--areia); }

.cookie-opcao {
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.2rem 1.4rem; margin-top: 1.2rem;
  background: var(--superficie);
}
.cookie-opcao legend {
  font-family: var(--display); font-size: 1.08rem; padding: 0 .5rem;
}
.cookie-opcao p { font-size: .87rem; margin-top: .7rem; }

.switch { display: flex; align-items: center; gap: .8rem; cursor: pointer; font-size: .9rem; font-weight: 500; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-visual {
  width: 52px; height: 30px; border-radius: 999px;
  background: var(--areia-2); position: relative; flex-shrink: 0;
  transition: background var(--transicao);
}
.switch-visual::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform var(--transicao);
}
.switch input:checked + .switch-visual { background: var(--agua); }
.switch input:checked + .switch-visual::after { transform: translateX(22px); }
.switch input:disabled + .switch-visual { background: var(--agua); opacity: .55; }
.switch input:focus-visible + .switch-visual { outline: 3px solid var(--agua); outline-offset: 3px; }

.modal-acoes { display: flex; gap: .8rem; justify-content: flex-end; margin-top: 1.8rem; flex-wrap: wrap; }

/* ---------- 24. Animação de entrada ---------- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 720ms ease, transform 720ms cubic-bezier(.2,.7,.3,1);
}
.reveal.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 25. Responsivo ---------- */
@media (max-width: 1080px) {
  .cards-3 { grid-template-columns: 1fr; }
  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .grid-sobre { grid-template-columns: 1fr; }
  .retrato { position: static; max-width: 26rem; }
  .oferta { grid-template-columns: 1fr; }
}

/* Gaveta de navegação — ativada por JS quando a barra não cabe */
.site-header.nav-gaveta .nav {
  position: fixed; inset: 0 0 0 auto;
  width: min(88vw, 26rem);
  background: var(--noite);
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1.4rem; padding: 7rem 2.2rem 3rem;
  z-index: 1;
  transform: translateX(100%);
  transition: transform 420ms cubic-bezier(.2,.7,.3,1);
  box-shadow: var(--sombra-g);
  overflow-y: auto;
}
.site-header.nav-gaveta .nav.aberto { transform: none; }
.site-header.nav-gaveta.menu-aberto .brand,
.site-header.nav-gaveta.menu-aberto .brand-mark,
.site-header.nav-gaveta.menu-aberto .icon-btn { color: #fff; }
.site-header.nav-gaveta.menu-aberto .icon-btn { border-color: rgba(255,255,255,.3); }
.site-header.nav-gaveta .nav a,
.site-header.nav-gaveta.compacto .nav a { color: #fff; font-size: 1.1rem; }
.site-header.nav-gaveta .nav a:not(.btn)::after { display: none; }
.site-header.nav-gaveta .nav .btn { margin-top: .8rem; }
.site-header.nav-gaveta .burger { display: grid; }

@media (max-width: 900px) {
  :root { --fonte-base: 18px; }

  .grid-2 { grid-template-columns: 1fr; }
  .hero { padding-top: 7.5rem; min-height: auto; }
  .hero-facts { grid-template-columns: repeat(2, 1fr); }
  .scroll-hint { display: none; }
  .form-inscricao { grid-template-columns: 1fr; }
  .footer-topo { grid-template-columns: 1fr; gap: 2rem; }
  .cookie-acoes { width: 100%; }
  .cookie-acoes .btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  .beneficios { grid-template-columns: 1fr; }
  .pilar { grid-template-columns: 1fr; gap: 1.2rem; }
  .hero-cta .btn { width: 100%; }
  .hero-facts { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .brand-text em { display: none; }
  .brand-text strong { font-size: .9rem; line-height: 1.2; }
  .eyebrow { letter-spacing: .14em; align-items: flex-start; }
  .eyebrow::before { display: none; }
  .modal-acoes .btn { width: 100%; }
  .cookie-banner { inset: auto .6rem .6rem .6rem; padding: 1.3rem; }
}

/* ---------- 26. Impressão ---------- */
@media print {
  .site-header, .cookie-banner, .voltar-topo, .modal, .scroll-hint,
  .hero-canvas, .strip { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .hero { padding: 1.5rem 0; }
  .section-escura, .section-ebook { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}