/* =========================================================================
   Treinamento de Liderança · Campinas, 19/09/2026
   Design system: preto profundo + dourado. Mobile-first (base = 390px).
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* bases escuras — o azul da pagina atual. Nao existe preto puro nesta pagina. */
  --azul-base:  #0D1424;
  --azul-2:     #121A2C;
  --azul-3:     #1B2542;
  --azul-glow:  #1E3A6E;

  /* dourado — unico acento */
  /* rampa da rodada 5 (item 23): matiz ~45°, mais ouro e menos âmbar */
  --ouro-luz:      #F3DD8E;   /* realce; nunca como texto */
  --ouro-claro:    #E4C86B;   /* texto dourado em fundo escuro, hover de botão */
  --ouro:          #D4B454;   /* base: botões, ícones, marcadores, hairlines no escuro */
  --ouro-escuro:   #A8862E;   /* pressionado; hairlines e ícones em fundo claro */
  --ouro-profundo: #7F651F;   /* texto dourado em fundo claro */
  --ouro-10:       rgba(212,180,84,.12);
  --ouro-25:       rgba(212,180,84,.25);
  --ouro-40:       rgba(212,180,84,.45);
  --grad-ouro:     linear-gradient(135deg, var(--ouro-luz) 0%, var(--ouro) 48%, var(--ouro-escuro) 100%);
  --destaque:      var(--ouro-claro);

  /* texto em fundo escuro */
  --branco:     #F6F6FC;
  --cinza-azul: #96A2B4;

  /* secoes claras */
  --marfim:     #F6F3EC;
  --marfim-2:   #E9E4D8;
  --tinta:      #0D1424;
  --tinta-2:    #4E5668;

  --aviso:      #E0B341;

  --display: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --title:  "Cinzel", Georgia, serif;
  --sans:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* item 25.1: escala de espaçamento */
  --sp-section: clamp(64px, 8vw, 104px);
  --sp-section-tight: 48px;
  --sp-strip: 28px;
  --sp-head: 40px;
  --sp-block: 24px;
  --sp-item: 16px;

  --wrap: 1200px;
  --pad: 20px;
  --radius: 6px;
  --topbar-h: 64px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* .countdown e .mbar usam display:flex e venceriam o [hidden] do navegador */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--azul-base);
  color:var(--branco);
  font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-top:var(--topbar-h);
}
img,svg{max-width:100%}
img{height:auto}
figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
a{color:inherit}
s{text-decoration-thickness:1px}

h2{margin:0}
h1,h2{
  font-family:var(--display);
  font-weight:700;
  line-height:1.1;
  margin:0 0 var(--sp-head);
  text-wrap:balance;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.8rem,4vw,2.8rem)}
h3{
  font-family:var(--title);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.02em;
  line-height:1.25;
  margin:0 0 .4em;
}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:680px;margin-inline:auto}   /* item 25.3 */
.center{text-align:center}
.sec{padding-block:var(--sp-section);position:relative}
.sec--dark{background:var(--azul-base);color:var(--branco)}
.sec--light{background:var(--marfim);color:var(--tinta)}
.sec--hair::before{
  content:"";position:absolute;inset-inline:var(--pad);top:0;height:1px;
  /* item 24.4: hairline com o centro aceso, a 55% */
  background:linear-gradient(90deg,transparent,
    rgba(212,180,84,.55) 20%,rgba(243,221,142,.55) 50%,rgba(212,180,84,.55) 80%,transparent);
}
.sec--light .lead,.sec--light p{color:var(--tinta-2)}
.sec--light h2,.sec--light h3,.sec--light strong{color:var(--tinta)}
.sec--dark .lead{color:var(--cinza-azul)}

.lead{font-size:1.0625rem;line-height:1.6;max-width:64ch}
.lead--narrow{max-width:56ch}
.sec__cta{margin-top:32px}
.note{font-size:.875rem;color:var(--cinza-azul);margin-top:24px}
.sec--light .note{color:var(--tinta-2)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ouro);color:var(--azul-base);padding:12px 16px;font-weight:600;
}
.skip-link:focus{left:8px;top:8px}

.sec > .wrap > *:last-child,
.band > .wrap > *:last-child{margin-bottom:0}
/* item 24.1: o conteudo sobe acima dos brilhos de fundo (::after das secoes) */
.sec > .wrap,.band > .wrap{position:relative;z-index:1}

/* ---------- 4. Eyebrow ---------- */
.eyebrow{
  margin-block:0 12px;
  font-family:var(--title);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ouro);
  display:flex;align-items:center;gap:10px;
  
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--ouro);flex:none}
.sec--light .eyebrow{
  margin-block:0 12px;color:var(--ouro-profundo)}
.sec--light .eyebrow::before{background:var(--ouro-escuro)}

.sec .wrap--narrow{margin-inline:auto}
/* blocos de leitura: largura máxima, mas presos à borda esquerda do container */
#tese > .wrap, #faq > .wrap{max-width:var(--wrap);margin-inline:auto}
#tese .lead, #faq .faq{max-width:680px;margin-inline:0}
#faq h2, #tese h2{max-width:680px}

/* ---------- 5. Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:var(--radius);
  font:600 16px/1 var(--sans);text-decoration:none;text-align:center;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn--primary{background:var(--ouro);color:var(--azul-base);border-color:var(--ouro)}
.btn--primary:hover{background:var(--ouro-claro);border-color:var(--ouro-claro)}
.btn--secondary{background:transparent;color:var(--ouro);border-color:var(--ouro)}
.btn--secondary:hover{background:var(--ouro-10)}
.sec--light .btn--secondary{color:var(--ouro-profundo);border-color:var(--ouro-escuro);border-width:2px}
.btn--lg{min-height:56px;font-size:17px;padding:0 28px}
.btn--sm{min-height:44px;font-size:14px;padding:0 16px}
.btn--block{display:flex;width:100%}
:where(a,button,summary,details,input):focus-visible{
  outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:2px;
}
.sec--light :where(a,button,summary):focus-visible{outline-color:var(--tinta)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;min-height:48px;
  font:600 16px/1 var(--sans);color:var(--ouro);text-decoration:none;
}
.link-arrow:hover{color:var(--ouro-claro)}
.link-arrow span{transition:transform .15s ease}
.link-arrow:hover span{transform:translateX(3px)}
.micro{font-size:.8125rem;color:var(--cinza-azul);margin:12px 0 4px}

/* ---------- 6. Placeholder de imagem ---------- */
.media{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  background:var(--azul-2);border:1px solid var(--azul-3);
}
.sec--light .media{background:var(--marfim-2);border-color:var(--marfim-2)}
.media img{display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.media::before{
  content:"";position:absolute;inset:10px;border:1px solid var(--ouro-40);
  pointer-events:none;opacity:0;
}
.media::after{
  content:attr(data-img);position:absolute;inset:0;z-index:0;
  display:grid;place-items:center;padding:16px;
  font:400 11px/1.5 var(--sans);color:var(--cinza-azul);text-align:center;
  letter-spacing:.04em;opacity:0;
}
.sec--light .media::after{color:var(--tinta-2)}
.media.is-empty::before,.media.is-empty::after{opacity:1}
.media.is-empty img{display:none}
.media--4x5{aspect-ratio:4/5}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--logo{aspect-ratio:2/1;background:#FFFFFF;border-color:var(--azul-3)}

/* ---------- 7. Placeholder [CONFIRMAR] ---------- */
.todo{
  background:rgba(224,179,65,.25);color:var(--tinta);
  font-size:13px;padding:1px 6px;border-radius:3px;
  display:inline;
}
.sec--dark .todo,.footer .todo{background:rgba(224,179,65,.85)}
body.prod .todo{display:none}

/* ---------- 8. Barra superior (HERO-AJUSTES item 1) ---------- */
.topbar{
  position:fixed;inset-inline:0;top:0;z-index:50;
  background:var(--azul-2);border-bottom:1px solid var(--ouro-40);
}
.topbar__in{
  max-width:var(--wrap);margin-inline:auto;padding:10px var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
}
.tb{display:flex;align-items:center;flex:1 1 auto;min-width:0;flex-wrap:wrap;gap:0}
.tb__i{
  display:flex;align-items:center;gap:8px;
  font:500 13px/1.3 var(--sans);color:var(--branco);
}
.tb__i + .tb__i{position:relative;margin-left:28px}
.tb__i + .tb__i::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:var(--azul-3);
}
.tb__ic{
  flex:none;fill:none;stroke:var(--ouro);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.tb__i--time{display:none}            /* no celular ficam só data e local */
.topbar__cta{flex:none;display:none}  /* a barra fixa do rodapé assume no celular */
.topbar .countdown{flex:none}

/* ---------- 9. Contagem regressiva ---------- */
.countdown{display:flex;gap:8px}
.countdown__b{
  min-width:38px;text-align:center;padding:3px 5px;
  background:var(--ouro-10);border:1px solid var(--ouro-40);border-radius:4px;
}
.countdown__b span{
  display:block;font:700 16px/1.1 var(--display);
  font-variant-numeric:tabular-nums;color:var(--branco);
}
.countdown__b small{
  display:block;font:600 10px/1.4 var(--title);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ouro-claro);
}
.countdown--card{margin-top:16px}

/* ---------- 10. Hero (HERO.md + HERO-AJUSTES.md) ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--azul-base);
  min-height:clamp(600px,82vh,760px);
  padding-top:var(--topbar-h);
  padding-bottom:0;                     /* item 3: figuras cortadas pela borda */
  display:flex;align-items:stretch;
}
.hero__grid{display:grid;gap:24px;width:100%;align-content:center}

/* -- fundo: imagem + camadas de tratamento -- */
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:70% 50%;display:block;
  filter:saturate(1.06) blur(2px);transform:scale(1.06);
}
.hero__bg::before,.hero__bg::after{content:"";position:absolute;inset:0}
.hero__bg::before{background:var(--azul-2);mix-blend-mode:multiply;opacity:.42}
.hero__bg::after{
  background:
    /* vinheta de profundidade */
    radial-gradient(120% 90% at 62% 42%,transparent 0%,rgba(13,20,36,.55) 72%,rgba(13,20,36,.88) 100%),
    /* vertical: topo e base */
    linear-gradient(180deg,rgba(13,20,36,.55) 0%,rgba(13,20,36,0) 30%,rgba(13,20,36,.6) 85%,var(--azul-base) 100%),
    /* veu vertical: mantem o texto legivel sobre a foto */
    linear-gradient(180deg,rgba(13,20,36,.92) 0%,rgba(13,20,36,.75) 100%);
}
.hero__bg.is-empty img{display:none}
.hero__bg.is-empty::after{
  background:
    radial-gradient(80% 60% at 70% 40%,rgba(30,58,110,.35),transparent 70%),
    linear-gradient(180deg,var(--azul-2),var(--azul-base));
}
.hero__fade{
  position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  height:24%;                        /* celular: so o fim da secao */
  background:linear-gradient(180deg,
    rgba(13,20,36,0) 0%,
    rgba(13,20,36,.28) 35%,
    rgba(13,20,36,.72) 68%,
    rgba(13,20,36,.94) 88%,
    var(--azul-base) calc(100% - 24px),
    var(--azul-base) 100%);
}
.hero__fade--mobile{display:none}
.hero__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 46% at 74% 28%,rgba(243,221,142,.10),transparent 70%);
}

/* -- marca-d'água vertical -- */
.hero__watermark{
  display:none;
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  right:-.12em;top:50%;transform:translateY(-50%) rotate(180deg);
  font-family:var(--display);font-weight:800;line-height:.8;
  font-size:min(clamp(160px,20vw,360px),19vh);
  color:var(--ouro);opacity:.07;
  writing-mode:vertical-rl;
}

/* -- coluna de texto (item 6: espaçamentos fixos) -- */
.hero__copy{position:relative;z-index:5;max-width:680px}
.hero__eyebrow{
  margin:0 0 18px;font:500 13px/1.4 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;color:var(--cinza-azul);
}
.hero__line{display:block}
/* quebras fixas do H1: .brk--m vale no celular, .brk--d de 768px para cima */
.brk{display:none}
.brk::before{content:"\A";white-space:pre}
.brk--m{display:inline}
.hero__title{
  margin:0 0 22px;
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,9.5vw,2.6rem);   /* celular: quatro linhas permitidas */
  line-height:1.06;letter-spacing:-.015em;color:var(--branco);
}
.hero__accent{font-style:italic;font-weight:700;color:var(--destaque)}
.hero__lead{
  margin:0 0 32px;
  font:italic 400 clamp(1.1rem,1.5vw,1.35rem)/1.4 var(--sans);
  color:var(--branco);opacity:.92;
}

/* -- item 7: linha do CTA -- */
.hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.btn-pill{
  display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:60px;padding:0 8px 0 28px;border-radius:999px;
  background:var(--ouro);color:var(--azul-base);
  font:600 17px/1 var(--sans);text-decoration:none;
  transition:background-color .15s ease;
}
.btn-pill:hover{background:var(--ouro-claro)}
.btn-pill__ico{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(13,20,36,.16);color:var(--azul-base);transition:transform .15s ease;
}
.btn-pill:hover .btn-pill__ico{transform:translateX(3px)}
.btn-pill:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px}
.hero__alt{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font:500 15px/1 var(--sans);color:var(--ouro-claro);text-decoration:none;
}
.hero__alt:hover{text-decoration:underline}
.hero__alt span{transition:transform .15s ease}
.hero__alt:hover span{transform:translateX(3px)}

/* -- entrada do hero: CSS puro -- */
@keyframes heroIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero__eyebrow{animation:heroIn 400ms ease-out both;animation-delay:0ms}
.hero__copy > *{animation:heroIn 400ms ease-out both}
.hero__copy > *:nth-child(1){animation-delay:80ms}
.hero__copy > *:nth-child(2){animation-delay:160ms}
.hero__copy > *:nth-child(3){animation-delay:240ms}
/* a animacao vai nos filhos: no .hero__cast ela criava um contexto de
   empilhamento que prendia as legendas abaixo do .hero__fade */
.cast__solo,.cast__fig{animation:heroIn 500ms ease-out both;animation-delay:240ms}

/* -- composição dos palestrantes -- */
/* sem z-index proprio: assim as legendas sobem acima do .hero__fade */
.hero__cast{position:relative;margin:8px 0 0}
.hero__cast::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;bottom:-6%;transform:translateX(-50%);
  width:118%;aspect-ratio:1.35;
  background:radial-gradient(50% 50% at 50% 58%,
    rgba(243,221,142,.22) 0%,rgba(212,180,84,.11) 42%,transparent 72%);
}
/* composição única (hero-composicao.png): a que estamos usando */
.cast__solo{display:none}
.hero__cast.has-solo .cast__solo{display:block;position:relative;z-index:2}
.hero__cast.has-solo .cast__fig{display:none}
.cast__solo picture{display:block}
/* item 11 no celular/tablet: o degrade vive dentro do bloco da composicao,
   entao dissolve a base dos corpos exatamente onde a foto termina. */
.hero__cast.has-solo .cast__solo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  pointer-events:none;z-index:2;
  background:linear-gradient(180deg,
    rgba(13,20,36,0) 0%,
    rgba(13,20,36,.28) 30%,
    rgba(13,20,36,.72) 62%,
    rgba(13,20,36,.94) 84%,
    var(--azul-base) 96%,
    var(--azul-base) 100%);
}
.cast__solo img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.5));
}

/* -- item 8: legendas com linha-guia -- */
.cast__label{
  position:relative;z-index:4;display:none;
  padding:10px;border-radius:4px;
  background:rgba(13,20,36,.30);   /* item 11: mais leve, o degrade ja escurece */
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.cast__labels{display:contents}      /* item 28.2: so vira grade no celular */
.hero__cast.has-solo .cast__label{display:block}
.cast__label strong{
  display:block;font:700 13px/1.25 var(--title);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ouro-claro);
}
.cast__label strong + span{
  display:block;margin-top:4px;font:400 12px/1.35 var(--sans);color:var(--cinza-azul);
}
/* linha-guia vertical, terminando num ponto que toca a figura */
.cast__lead{
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  width:1px;height:32px;background:var(--ouro);
}
.cast__lead::before{
  content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--ouro);
}

/* -- item 10: no celular as legendas ficam lado a lado sob cada figura -- */
.hero__cast.has-solo{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.hero__cast.has-solo .cast__solo{grid-column:1/-1;margin-bottom:36px}
.hero__cast.has-solo .cast__label--leandro{grid-column:1;justify-self:center}
.hero__cast.has-solo .cast__label--gustavo{grid-column:2;justify-self:center}
.hero__cast.has-solo[data-left="gustavo"] .cast__label--gustavo{grid-column:1}
.hero__cast.has-solo[data-left="gustavo"] .cast__label--leandro{grid-column:2}

/* ---------- 11b. Faixa de convidados (HERO-AJUSTES item 13) ---------- */
.band{
  position:relative;
  background:var(--azul-2);
  /* item 24.4: as duas bordas da faixa sao hairlines com o centro aceso */
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,
    rgba(212,180,84,.55) 20%,rgba(243,221,142,.55) 50%,rgba(212,180,84,.55) 80%,transparent) 1;
  padding-block:var(--sp-strip);                      /* celular e tablet */
}
.band__in{display:grid;gap:14px}
.eyebrow--band{margin:0;color:var(--ouro-claro);letter-spacing:.16em}
.eyebrow--band::before{background:var(--ouro)}

.guests{display:grid;gap:14px}
.guest{
  display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;
  position:relative;min-width:0;
}
.guest + .guest{padding-top:14px}
.guest + .guest::before{           /* celular: hairline horizontal entre os cartoes */
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--azul-3);
}
.guest__photo{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:3px solid var(--azul-2);                       /* respiro entre foto e anel */
  box-shadow:0 0 0 1px rgba(212,180,84,.55);
  background:var(--azul-3);
}
/* sem arquivo: circulo com a inicial */
.guest__photo--ph{
  display:grid;place-items:center;
  font:700 22px/1 var(--title);color:var(--ouro-claro);
  background:var(--azul-3);
}
.guest__text{min-width:0}
.guest__name{
  margin:0;font:700 14px/1.3 var(--title);letter-spacing:.06em;color:var(--ouro-claro);
}
.guest__desc{
  margin:4px 0 0;font:400 14px/1.45 var(--sans);color:var(--cinza-azul);
  /* item 14: 3 linhas por segurança — as descrições foram escritas para
     caber em 2, mas o clamp maior evita corte se alguma crescer. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  line-clamp:3;overflow:hidden;
}

/* ---------- 12. Sintomas: autodiagnóstico (item 15) ---------- */
.diag{display:grid;gap:36px}
.diag__lado > .eyebrow{
  margin-block:0 12px;margin-bottom:16px}
.closing{
  margin-top:24px;font-family:var(--display);font-style:italic;font-size:1.05rem;
  line-height:1.5;color:var(--tinta)!important;
}
.diag__micro{
  margin:0 0 4px;font:400 12px/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-2)!important;
}
.diag__contador{margin:24px 0 20px;display:flex;align-items:baseline;gap:12px}
.diag__n{font:700 40px/1 var(--title);color:var(--ouro-profundo);font-variant-numeric:tabular-nums}
.diag__msg{font:400 15px/1.45 var(--sans);color:var(--tinta-2);max-width:34ch}
.diag__msg b{color:var(--tinta);font-weight:500}

.signs{border-top:1px solid var(--marfim-2)}
.sign{
  position:relative;display:grid;grid-template-columns:34px 1fr 24px;
  align-items:start;gap:14px;padding:18px 0 18px 12px;
  border-bottom:1px solid var(--marfim-2);cursor:pointer;
  transition:background-color .15s ease;
}
.sign:hover{background:rgba(233,228,216,.45)}
.sign__input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sign__n{font:700 13px/1.6 var(--title);color:var(--ouro-profundo)}  /* 13px: precisa de 4.5:1 */
.sign__tx{font:400 17px/1.5 var(--sans);color:var(--tinta);transition:font-weight .15s ease}
.sign__box{
  width:24px;height:24px;border:1px solid var(--ouro-escuro);border-radius:4px;
  display:grid;place-items:center;margin-top:2px;
  transition:background-color .15s ease,border-color .15s ease;
}
.sign__box svg{fill:none;stroke:var(--tinta);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s ease}
/* marcado */
.sign::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--ouro);opacity:0;transition:opacity .15s ease;
}
.sign:has(.sign__input:checked)::before{opacity:1}
.sign:has(.sign__input:checked) .sign__box{background:var(--ouro);border-color:var(--ouro)}
.sign:has(.sign__input:checked) .sign__box svg{opacity:1}
.sign:has(.sign__input:checked) .sign__tx{font-weight:500}
.sign:focus-within{outline:2px solid var(--tinta);outline-offset:2px;border-radius:3px}

@keyframes pulso{0%{transform:none}45%{transform:scale(1.035)}100%{transform:none}}
.btn--pulso{animation:pulso 600ms ease-out 1}

/* ---------- 13. Entregas ---------- */
.deliver{display:grid;gap:0;margin-top:8px}
.deliver li{
  display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--marfim-2);
  font-size:1rem;line-height:1.55;color:var(--tinta-2);
}
.deliver__ic{
  flex:none;margin-top:2px;
  fill:none;stroke:var(--ouro-escuro);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- 14. Cartões (formato / depoimentos) ---------- */
.cards3{display:grid;gap:16px;margin-top:32px}
.card{
  padding:28px 24px;border:1px solid var(--azul-3);border-radius:var(--radius);
  background:var(--azul-2);
}
.card h3{color:var(--ouro-claro);font-size:1.15rem}
.card p{margin:0;color:var(--cinza-azul);font-size:.9375rem}
.sec--light .card{background:transparent;border-color:var(--marfim-2)}
.sec--light .card h3{color:var(--ouro-profundo)}
.sec--light .card p{color:var(--tinta-2)}

/* ---------- 15. Cartões de formato (item 17) ---------- */
.fmt{position:relative;padding:28px;transition:border-color .2s ease,transform .2s ease}
.fmt__ic{
  display:block;fill:none;stroke:var(--ouro);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease;
}
.fmt__hair{
  display:block;width:28px;height:1px;background:var(--ouro-40);
  margin:18px 0;transition:width .3s ease-out,background-color .3s ease-out;
}
.fmt h3{margin-bottom:10px}
.fmt:hover{border-color:rgba(212,180,84,.5);transform:translateY(-2px)}
.fmt:hover .fmt__ic{stroke:var(--ouro-claro)}
.fmt:hover .fmt__hair{width:100%;background:var(--ouro)}
/* traço desenhado na primeira entrada (classe posta pelo JS) */
.fmt__ic.traca path,.fmt__ic.traca circle{
  animation:tracar 900ms ease-out both;
  animation-delay:var(--atraso,0ms);
}
@keyframes tracar{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
/* modo foto: as camadas de máscara vêm do JS junto com a url */
.fmt.com-foto{
  background-size:cover;background-position:center;
  border-color:var(--ouro-25);
}
.fmt.com-foto .fmt__ic{display:none}
.fmt.com-foto h3{text-shadow:0 2px 18px rgba(13,20,36,.9)}
.fmt.com-foto p{color:var(--branco);opacity:.92}

/* item 25.2/25.4: seções de mesmo fundo — a segunda encosta e ganha hairline */
#homenagem{overflow-x:clip}   /* item 29: apara a sangria de 100vw */
#palestrantes{padding-top:var(--sp-section-tight)}
#homenagem{padding-top:var(--sp-section-tight)}
#cta-final{padding-top:var(--sp-section-tight)}
.footer{padding-top:var(--sp-section-tight);padding-bottom:40px}

/* ---------- 16. Pessoas ---------- */
.people{display:grid;gap:36px;margin-top:36px}
.person h3{
  margin-top:18px;font-size:1.125rem;color:var(--ouro);
}
.sec--light .person h3{color:var(--ouro-profundo)}
.person__handle{margin:2px 0 8px;font-size:.8125rem;color:var(--cinza-azul)}
.person__handle a{color:inherit;text-decoration:none}
.person__handle a:hover{color:var(--ouro-claro);text-decoration:underline}
.person__role{margin:0 0 12px;font-size:.9375rem;line-height:1.5;color:var(--cinza-azul)}
.sec--light .person__role{color:var(--tinta-2)}
.person__proof{display:grid;gap:6px}
.person__proof li{
  position:relative;padding-left:16px;font-size:.875rem;color:var(--cinza-azul);
}
.person__proof li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  background:var(--ouro);transform:rotate(45deg);
}
.person__quote{margin:0}
.person__quote p{
  margin:0;font-family:var(--display);font-style:italic;font-size:1rem;
  line-height:1.5;color:var(--branco);
}
.person .media{
  position:relative;
}
.person .media::before{z-index:2}
.panel{margin-top:56px;padding-top:40px;border-top:1px solid var(--ouro-40)}

/* -- Homenageados: carrossel em movimento continuo (item 29) -- */
.carousel{
  position:relative;
  /* margem de sangria: distancia da borda da tela ate a borda do container */
  --gutter:max(var(--pad),calc(50% - var(--wrap) / 2 + var(--pad)));
  /* faixa propria para o botao de pausa: ele nunca encosta no paragrafo */
  margin-top:var(--sp-block);padding-top:40px;
  /* sangra ate as bordas da tela; o texto da secao segue no container */
  width:100vw;margin-inline:calc(50% - 50vw);
}
.carousel__viewport{
  display:flex;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:none;                 /* so no modo manual (classe .manual) */
  /* o carrossel sangra ate a tela, mas o primeiro cartao nasce exatamente
     na borda esquerda do container (item 25.3), em qualquer largura */
  scroll-padding-inline:var(--gutter);
  padding:0 var(--gutter) 10px;
  scrollbar-width:none;-ms-overflow-style:none;
  /* as bordas desvanecem para os cartoes entrarem e sairem sem corte seco */
  /* as bordas desvanecem para os cartoes entrarem e sairem sem corte seco.
     Branco em vez de preto: em mascara o que conta e a opacidade, e o branco
     tambem funciona se o navegador interpretar por luminancia (a pagina nao
     usa preto puro em lugar nenhum). */
  -webkit-mask-image:linear-gradient(90deg,transparent,#FFFFFF 6%,#FFFFFF 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#FFFFFF 6%,#FFFFFF 94%,transparent);
}
.carousel__viewport::-webkit-scrollbar{display:none}
.carousel.manual .carousel__viewport{scroll-snap-type:x mandatory}
.carousel__viewport:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:-4px}

.carousel__track{
  display:flex;gap:20px;flex:none;align-items:stretch;
  padding-right:20px;                    /* mesmo vao entre trilho e clone */
  margin:0;
}
/* o laco: cada trilho anda a propria largura; como o clone e identico,
   ao terminar ele ocupa exatamente onde o original comecou. */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.carousel.anda .carousel__track{
  animation:marquee var(--carousel-duration,40s) linear infinite;
  will-change:transform;
}
.carousel.parado .carousel__track{animation-play-state:paused}

.honra .person{flex:0 0 min(78vw,320px);min-width:0;scroll-snap-align:start;display:flex;flex-direction:column}
.honra .person h3{margin-top:14px;font-size:1rem}
.honra .person__role{font-size:.875rem;margin-bottom:10px}
.honra .person__quote p{font-size:.9375rem}

/* botao de pausar/retomar */
.carousel__toggle{
  /* alinhado a borda direita do container, nao a da tela */
  position:absolute;top:0;z-index:3;
  right:var(--gutter);
  width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--ouro-40);border-radius:50%;
  background:rgba(18,26,44,.7);color:var(--ouro-claro);cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.carousel__toggle:hover{border-color:var(--ouro);color:var(--ouro-luz)}
.carousel__toggle .ic-play{display:none}
.carousel__toggle[aria-pressed="true"] .ic-pausa{display:none}
.carousel__toggle[aria-pressed="true"] .ic-play{display:block}

/* setas: so existem quando o movimento esta desligado por preferencia */
.carousel__nav{display:none}

#cta-final .line{display:block}

/* ---------- 17. Local ---------- */
.venue{display:grid;gap:32px}
.venue__foto{
  order:-1;                       /* item 18: no celular a foto vem acima do texto */
  border-radius:8px;border:1px solid var(--marfim-2);
  box-shadow:0 24px 48px rgba(13,20,36,.18);
  outline:1px solid var(--ouro-40);outline-offset:10px;
}
.venue__addr{font-size:1rem;color:var(--tinta-2)}
.venue__acts{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 24px}
.venue__acts .btn{flex:1 1 200px}

/* ---------- 18. Ingressos (item 19) ---------- */
.coupon{margin:0 0 8px;font:600 14px/1.4 var(--sans);color:var(--ouro)}
.tickets{display:grid;gap:20px;margin-top:28px;align-items:stretch}
.ticket{
  position:relative;padding:28px 24px;border:1px solid var(--azul-3);
  border-radius:var(--radius);background:var(--azul-2);
  display:flex;flex-direction:column;transition:border-color .2s ease,transform .2s ease;
}
.ticket:hover{border-color:var(--ouro-40)}
.tk__chip{
  position:absolute;top:16px;right:16px;margin:0;
  font:700 11px/1 var(--title);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ouro-claro);border:1px solid var(--ouro-40);border-radius:999px;
  padding:6px 12px;max-width:60%;text-align:center;
}
.ticket__tag{
  margin:0 0 10px;font:600 11px/1 var(--title);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ouro-claro);
}
.ticket h3{font-size:1.25rem;color:var(--branco);margin-top:26px}
.ticket--vip h3{margin-top:0}
.tk__de{margin:10px 0 0;font-size:.875rem;color:var(--cinza-azul)}
.tk__preco{margin:2px 0 20px;display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.tk__valor{
  font:700 clamp(3rem,5vw,4.25rem)/1 var(--display);
  font-variant-numeric:tabular-nums;color:var(--branco);
}
.tk__apoio{font:400 13px/1.3 var(--sans);color:var(--cinza-azul)}
.ticket__list{display:grid;gap:12px;margin-bottom:24px;flex:1}
.ticket__list li{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  font-size:.9375rem;color:var(--cinza-azul);
}
.tk__ck{
  width:22px;height:22px;border-radius:50%;border:1px solid var(--ouro-40);
  display:grid;place-items:center;margin-top:1px;
}
.tk__ck svg{fill:none;stroke:var(--ouro);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.btn-pill--tk{width:100%;min-height:56px;font-size:16px}
.tk__micro{margin:10px 0 0;font:400 12px/1.4 var(--sans);color:var(--cinza-azul);text-align:center}

/* VIP: borda em degrade dourado + brilho atras */
.ticket--vip{
  background:linear-gradient(var(--azul-2),var(--azul-2)) padding-box,
             linear-gradient(135deg,var(--ouro-claro),var(--ouro-escuro)) border-box;
  border:1px solid transparent;
}
.ticket--vip::before{
  /* inset:0 de proposito: com -10% o brilho estourava 12px alem da tela em
     390px. O blur ja espalha a luz para fora sem mexer no layout. */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(60% 50% at 50% 40%,rgba(212,180,84,.10),transparent 70%);
  filter:blur(44px);pointer-events:none;
}
.group{margin-top:28px;padding:24px;border:1px solid var(--azul-3);border-radius:var(--radius)}
.group h3{color:var(--ouro);font-size:1.05rem}
.group p{color:var(--cinza-azul);font-size:.9375rem;max-width:56ch}
.group__extra{display:grid;gap:8px;margin:0 0 20px}
.group__extra li{position:relative;padding-left:18px;font-size:.875rem;color:var(--cinza-azul)}
.group__extra li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  background:var(--ouro);transform:rotate(45deg);
}
.seal{margin:24px 0 0;font-size:.8125rem;color:var(--cinza-azul);text-align:center}

/* ---------- 18b. Faixa do organizador (item 20) ---------- */
.org__card{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center}
.org__foto{
  width:88px;height:88px;object-fit:cover;border-radius:12px;
  outline:1px solid rgba(212,180,84,.5);outline-offset:6px;background:var(--azul-3);
}
.org__foto--ph{display:grid;place-items:center;font:700 26px/1 var(--title);color:var(--ouro-claro)}
.org__tx{min-width:0}
.org__nome{margin:8px 0 0;font:700 18px/1.25 var(--title);letter-spacing:.02em;color:var(--ouro-claro)}
.org__desc{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--cinza-azul);max-width:640px}
.org__real{margin:10px 0 0;font-size:12px;color:var(--cinza-azul);opacity:.7}

/* ---------- 19. FAQ ---------- */
.faq{margin-top:32px;border-top:1px solid var(--marfim-2)}
.faq details{border-bottom:1px solid var(--marfim-2)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:48px;padding:16px 0;
  font:600 1.0625rem/1.4 var(--sans);color:var(--tinta);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:
    linear-gradient(var(--ouro-escuro),var(--ouro-escuro)) center/14px 2px no-repeat,
    linear-gradient(var(--ouro-escuro),var(--ouro-escuro)) center/2px 14px no-repeat;
  transition:transform .15s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 0 20px}
.faq__a p{margin:0;font-size:1rem;line-height:1.6;color:var(--tinta-2);max-width:64ch}

/* ---------- 20. Logos de apoio ---------- */
.logos{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px;
}
/* quadrante branco: as marcas aparecem na cor original (pedido do cliente).
   O tile ja vem com a margem embutida na propria imagem. */
.logos img{object-fit:contain}
.logos li{transition:transform .15s ease}
.logos li:hover{transform:translateY(-2px)}

/* ---------- 21. Rodapé ---------- */
.footer{
  background:var(--azul-base);border-top:1px solid var(--ouro-40);
  padding-block:48px;font-size:.875rem;color:var(--cinza-azul);
}
.footer p{margin:0 0 10px}
.footer__brand{font-family:var(--title);font-weight:600;letter-spacing:.02em;color:var(--ouro);font-size:.9375rem}
.footer a{color:var(--cinza-azul)}
.footer a:hover{color:var(--ouro-claro)}
.footer__links{margin-top:18px}
.footer__legal{font-size:.75rem;line-height:1.5;color:var(--cinza-azul)}
.footer__credits{margin-top:18px;font-size:.75rem;color:var(--cinza-azul)}

/* ---------- 22. Elementos fixos ---------- */
.wafloat{
  position:fixed;right:16px;bottom:16px;z-index:45;
  display:inline-flex;align-items:center;gap:10px;
  min-height:56px;min-width:56px;padding:0 16px;
  border-radius:999px;border:1px solid var(--ouro);
  background:var(--azul-2);color:var(--ouro-claro);
  text-decoration:none;font:600 14px/1 var(--sans);
  transition:background-color .15s ease,transform .15s ease,bottom .15s ease;
}
/* item 9: o flutuante só entra depois que o hero sai da tela. No celular
   isso também evita que ele cubra a legenda do palestrante da direita.
   Sem JS ele fica visível (o padrão abaixo), então nada se perde. */
body.js .wafloat{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
body.js.hero-out .wafloat{opacity:1;visibility:visible}
/* item 19: some tambem enquanto a secao de ingressos estiver na tela */
body.js.tickets-in .wafloat{opacity:0;visibility:hidden}
.wafloat:hover{background:var(--ouro-10)}
.wafloat__lb{display:none}
body.has-mbar .wafloat{bottom:88px}

.mbar{
  position:fixed;inset-inline:0;bottom:0;z-index:46;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--pad);
  background:var(--azul-2);border-top:1px solid var(--ouro-40);
}
.mbar__price{
  margin:0;font:700 15px/1.2 var(--display);font-variant-numeric:tabular-nums;
  color:var(--branco);
}
.mbar__price span[data-lot-name]{
  display:block;font:600 10px/1.4 var(--title);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ouro-claro);
}
.mbar .btn{flex:none}

/* ---------- 23. Movimento ---------- */
.pre{opacity:0;transform:translateY(12px)}
.in{opacity:1;transform:none;transition:opacity .4s ease-out,transform .4s ease-out}

/* ---------- 10b. Hero no celular (item 27) ---------- */
/* Ordem na tela: rotulo -> bloco de imagem -> texto sustentado pelo degrade. */
@media (max-width:767px){
  .hero__grid{gap:0;align-content:start}
  .hero__eyebrow{
    order:1;padding-top:16px;margin:0 0 var(--sp-item);
    font-size:11px;letter-spacing:.18em;white-space:nowrap;
    text-align:center;
  }
  .hero__cast  {order:2}
  .hero__copy  {order:3}

  /* o degrade da secao e o da composicao dao lugar ao degrade do bloco */
  .hero__fade{display:none}
  .hero__cast.has-solo .cast__solo::after{display:none}

  /* 3 · bloco de imagem, largura total */
  .hero__cast,.hero__cast.has-solo{
    display:block;position:relative;overflow:hidden;
    height:clamp(340px,96vw,440px);
    margin:0 calc(var(--pad) * -1);
    /* contexto de empilhamento proprio: sem isto o .hero__fade--mobile (z-3)
       empata com o .hero__copy (z-3) e, por vir depois no DOM, pintava por
       cima da primeira linha do H1. */
    z-index:1;
  }
  /* brilho atras das cabecas: 8% */
  .hero__cast::before{
    left:50%;top:0;bottom:auto;transform:translateX(-50%);
    width:100%;height:72%;aspect-ratio:auto;
    background:radial-gradient(52% 54% at 50% 34%,
      rgba(243,221,142,.08) 0%,rgba(212,180,84,.04) 46%,transparent 72%);
  }
  /* cabecas a 8% do topo do bloco, base alinhada ao fundo */
  .hero__cast.has-solo .cast__solo{
    position:absolute;left:0;right:0;top:8%;bottom:0;margin:0;
  }
  .cast__solo picture{display:block;height:100%}
  /* item 28.1: cabecas a 8% do topo, base no fundo do bloco e o centro da
     composicao deslocado para 53% da largura (equivale ao translateX(3%)
     do documento; com cover, deslocar a direita = object-position < 50%) */
  .cast__solo img{
    width:100%;height:100%;object-fit:cover;object-position:40% 0;
    filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));
  }
  .hero__fade--mobile{
    display:block;position:absolute;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(13,20,36,0) 0%,
      rgba(13,20,36,.12) 38%,
      rgba(13,20,36,.72) 64%,
      rgba(13,20,36,.94) 82%,
      var(--azul-base) 100%);
  }

  /* item 28.2: legendas em duas colunas, ancoradas a 64px da base */
  .cast__labels{
    display:grid;grid-template-columns:1fr 1fr;column-gap:12px;
    position:absolute;left:0;right:0;bottom:64px;z-index:4;
    padding:0 16px;pointer-events:none;
  }
  .hero__cast.has-solo .cast__label{
    position:static;padding:6px 8px;text-align:center;
    background:rgba(13,20,36,.30);
  }
  /* cada legenda centralizada sob o tronco da propria figura */
  .hero__cast.has-solo .cast__label--leandro,
  .hero__cast.has-solo[data-left="leandro"] .cast__label--leandro{
    grid-column:1;justify-self:end;margin-right:6%;
  }
  .hero__cast.has-solo .cast__label--gustavo,
  .hero__cast.has-solo[data-left="leandro"] .cast__label--gustavo{
    grid-column:2;justify-self:start;margin-left:6%;
  }
  .hero__cast.has-solo[data-left="gustavo"] .cast__label--gustavo{
    grid-column:1;justify-self:end;margin-right:6%;margin-left:0;
  }
  .hero__cast.has-solo[data-left="gustavo"] .cast__label--leandro{
    grid-column:2;justify-self:start;margin-left:6%;margin-right:0;
  }
  .cast__label strong{font:700 11px/1.3 var(--title);letter-spacing:.06em}
  .cast__label strong + span{font:400 10px/1.3 var(--sans)}
  .cast__lead{height:16px}

  /* 4 · texto sobre a base solida do degrade, tudo centralizado (28.3) */
  .hero__copy{
    position:relative;z-index:3;max-width:none;
    /* -72 + 24 de padding = os mesmos -48 de antes: o topo do H1 nao se move
       e a distancia de 16px ate as legendas continua valendo. O degrade de
       transparente a solido agora vive no padding, acima do texto, entao
       nenhuma faixa atravessa a chamada. */
    margin:-72px calc(var(--pad) * -1) 0;
    padding:24px 20px 28px;
    background:linear-gradient(180deg,rgba(13,20,36,0) 0,var(--azul-base) 24px);
  }
  .hero__eyebrow{text-align:center}
  .hero__title{
    margin:0 0 12px;text-align:center;
    font-size:clamp(2rem,9vw,2.5rem);line-height:1.06;
  }
  /* 17px na largura de referencia (390px); abaixo disso encolhe o
     suficiente para as duas linhas fixas nao quebrarem */
  .hero__lead{
    margin:0 0 20px;text-align:center;
    font:italic 400 clamp(15px,4.36vw,17px)/1.4 var(--sans);
  }
  .hero__cta{gap:12px;align-items:center}
  .btn-pill{width:min(100%,360px);margin-inline:auto}

  /* imagem primeiro, texto 120ms depois */
  .cast__solo,.cast__fig{animation-delay:0ms}
  .hero__eyebrow{animation-delay:120ms}
  .hero__copy > *{animation-delay:120ms}
}

/* de 768px para cima o H1 volta as tres linhas do HERO-AJUSTES */
@media (min-width:768px){
  .brk--m{display:none}
  .brk--d{display:inline}
  /* o rotulo virou item do grid: o respiro volta a vir da margem dele,
     para tablet e desktop ficarem com a mesma geometria de antes */
  .hero__grid{row-gap:0}
  .hero__eyebrow{margin:0 0 18px}
}
@media (min-width:768px) and (max-width:1023px){
  .hero__cast{margin-top:32px}     /* antes: 24px de gap + 8px de margem */
}

/* ---------- 23b. Pontos de iluminacao (item 24) ---------- */
/* Regra da rodada: no maximo dois pontos de luz por secao, brilho de fundo
   com no maximo 12% de opacidade, nenhuma animacao alem do hover. */

/* -- 24.1 brilhos de fundo -- */
.sec::after,.band::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
}
/* secoes claras: 5% quente no canto superior esquerdo */
.sec--light::after{
  background:radial-gradient(50% 55% at 0% 0%,rgba(212,180,84,.05),transparent 70%);
}
/* faixas: 8% no canto superior esquerdo, raio de 50% da largura */
.band::after{
  background:radial-gradient(50% 100% at 0% 0%,rgba(212,180,84,.08),transparent 70%);
}
/* #formato: 8% no canto superior direito */
#formato::after{
  background:radial-gradient(50% 55% at 100% 0%,rgba(212,180,84,.08),transparent 70%);
}
/* #ingressos: 6% no canto inferior esquerdo (o 2o ponto e o brilho do VIP, 10%) */
#ingressos::after{
  background:radial-gradient(50% 55% at 0% 100%,rgba(212,180,84,.06),transparent 70%);
}
/* #cta-final: 10% centralizado atras do titulo */
#cta-final::after{
  background:radial-gradient(46% 60% at 50% 42%,rgba(243,221,142,.10),transparent 70%);
}

/* -- 24.2 luz de borda no topo dos cartoes escuros -- */
.card,.org__card{position:relative}
.sec--dark .card::before,
.ticket::after,
.org__card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  pointer-events:none;opacity:.75;transition:opacity .2s ease;
  background:linear-gradient(90deg,transparent 0%,var(--ouro-25) 30%,
    rgba(243,221,142,.55) 50%,var(--ouro-25) 70%,transparent 100%);
}
.sec--dark .card:hover::before,
.ticket:hover::after,
.org__card:hover::before{opacity:1}

/* -- 24.3 brilho metalico nos botoes primarios -- */
.btn--primary,.btn-pill{position:relative;overflow:hidden;isolation:isolate}
/* realce estatico no terco superior */
.btn--primary::before,.btn-pill::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 45%);
}
/* varredura diagonal: uma vez por hover */
.btn--primary::after,.btn-pill::after{
  content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:40%;z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-120%) skewX(-18deg);
}
.btn--primary:hover::after,.btn-pill:hover::after{
  transform:translateX(220%) skewX(-18deg);
  transition:transform 700ms ease-out;
}

/* -- 24.5 molduras de foto -- */
.sec--light .venue__foto{
  border:1px solid transparent;
  background:linear-gradient(var(--marfim-2),var(--marfim-2)) padding-box,
             var(--grad-ouro) border-box;
  box-shadow:0 0 0 1px rgba(212,180,84,.35),0 20px 50px rgba(0,0,0,.35);
}
.org__foto{
  border:1px solid transparent;
  background:var(--grad-ouro) border-box;
  box-shadow:0 0 0 1px rgba(212,180,84,.35),0 20px 50px rgba(0,0,0,.35);
}
.org__foto--ph{
  background:linear-gradient(var(--azul-3),var(--azul-3)) padding-box,
             var(--grad-ouro) border-box;
}
/* convidados: moldura em degrade + um segundo anel externo de 1px a 20% */
.guest__photo{
  border:2px solid transparent;
  background:linear-gradient(var(--azul-3),var(--azul-3)) padding-box,
             var(--grad-ouro) border-box;
  box-shadow:0 0 0 1px rgba(212,180,84,.35),
             0 0 0 3px var(--azul-2),
             0 0 0 4px rgba(212,180,84,.20),
             0 20px 50px rgba(0,0,0,.35);
}

/* -- 24.6 "acender": 400ms e some -- */
@keyframes acender{
  0%  {filter:drop-shadow(0 0 6px rgba(243,221,142,.35))}
  100%{filter:drop-shadow(0 0 0 rgba(243,221,142,0))}
}
.diag__n.acende{animation:acender 400ms ease-out both}
.fmt__ic.traca{animation:acender 400ms ease-out both;animation-delay:var(--atraso,0ms)}

/* ---------- 24. Desktop ---------- */
@media (max-width:767px){
  :root{ --sp-section:56px; --sp-section-tight:40px; --sp-strip:22px; --sp-head:28px; --sp-block:20px; }
}

@media (min-width:600px){
  .topbar__when{display:inline}
  .topbar__txt{font-size:13px}
  .countdown__b{min-width:44px;padding:4px 6px}
  .countdown__b span{font-size:18px}
  .cards3{grid-template-columns:repeat(3,1fr);gap:20px}
  .tickets{grid-template-columns:repeat(2,1fr)}
  .people--2{grid-template-columns:repeat(2,1fr)}
  .honra .person{flex-basis:280px}      /* item 29: tablet */
  .logos{grid-template-columns:repeat(4,1fr)}
  .mbar__price{font-size:17px}
  .cta-acts .btn{width:auto}
}

@media (min-width:900px){
  :root{--pad:40px;--topbar-h:60px}
  body{font-size:18px}
  .topbar__in{flex-wrap:nowrap;gap:24px}
  .topbar__txt{flex:1 1 auto;font-size:14px}
  .lead{font-size:1.125rem}
  .people--3{grid-template-columns:repeat(3,1fr)}
  .venue{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .venue__foto{order:2}   /* só com duas colunas a foto vai para a direita */
  .logos{grid-template-columns:repeat(4,1fr);gap:20px}
  .wafloat__lb{display:inline}
  .mbar{display:none}
  body.has-mbar .wafloat{bottom:16px}
  .deliver{grid-template-columns:repeat(2,1fr);column-gap:40px}
  .diag{grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .diag__lado{position:sticky;top:calc(var(--topbar-h) + 32px)}
  .ticket--vip{transform:translateY(-6px)}
  .ticket--vip:hover{transform:translateY(-8px)}
  .band#organizador{padding:26px 0}
  .org__card{grid-template-columns:140px 1fr;gap:32px}
  .org__foto{width:140px;height:140px}
  .org__nome{font-size:20px}
  .org__desc{font-size:16px}
  .group{display:grid;grid-template-columns:1fr auto;gap:8px 32px;align-items:center;padding:32px}
  .group h3{grid-column:1;margin:0}
  .group p{grid-column:1;margin:0}
  .group__extra{grid-column:1;margin:12px 0 0}
  .group .btn{grid-column:2;grid-row:1/span 3;justify-self:end}
}

/* -- Faixa de convidados: tablet -- */
@media (min-width:768px){
  /* Tablet: cartoes empilhados, formato foto + texto mantido (item 14). */

}

/* -- Faixa de convidados: desktop (rotulo a esquerda, 220px) -- */
@media (min-width:1024px){
  /* item 14: rotulo em linha propria acima dos tres cartoes */

  .band__in{grid-template-columns:1fr;gap:20px}
  .guests{grid-template-columns:repeat(3,1fr);gap:32px}
  .guest{grid-template-columns:96px 1fr;gap:16px}
  .guest__photo{width:96px;height:96px}
  .guest__name{font-size:15px}
  .guest + .guest{padding-top:0}
  .guest + .guest::before{            /* divisor vertical entre as colunas */
    left:-16px;right:auto;top:50%;transform:translateY(-50%);
    width:1px;height:64px;
  }
}

/* -- Barra superior e texto do hero: do tablet para cima -- */
@media (min-width:768px){
  /* item 1: os três itens e o botão aparecem */
  .tb__i--time{display:flex}
  .tb__i{font-size:14px}
  .topbar__cta{display:inline-flex}

  /* item 4: três linhas fixas (a coluna aqui ainda é de largura cheia) */
  .hero__line{white-space:nowrap}
  .hero__title{font-size:clamp(2.5rem,4.3vw,3.75rem)}
  .hero__lead{font-size:clamp(1.1rem,1.5vw,1.35rem)}

  /* item 7: CTA e link secundário na mesma linha */
  .hero__cta{flex-direction:row;align-items:center;gap:28px}
  .btn-pill{width:auto}
}

/* -- Composição ao lado do texto: só a partir de 1024px.
      Entre 768 e 1023 a composição fica empilhada abaixo do texto: a imagem
      fornecida é panorâmica (1154x775) e, espremida em meia largura com a
      altura inteira do hero, perderia o palestrante da direita. Com os dois
      recortes verticais separados, o layout de duas colunas volta a valer
      nessa faixa. -- */
@media (min-width:1024px){
  /* item 29: o carrossel continua rolando tambem no desktop */
  .honra .person{flex-basis:300px}
  .honra .person h3{font-size:.9375rem;letter-spacing:.01em}
  .honra .person__role{font-size:.8125rem;line-height:1.45}
  .honra .person__quote p{font-size:.875rem;line-height:1.45}

  .hero__grid{grid-template-columns:repeat(12,1fr);gap:0 32px;position:relative}
  .hero__eyebrow{grid-column:1/span 7;grid-row:1;align-self:end;margin:0 0 18px}
  .hero__copy{grid-column:1/span 7;grid-row:2;align-self:start}
  .hero__watermark{display:block;font-size:min(clamp(160px,20vw,360px),19vh)}

  /* item 6: altura inteira da área útil, cabeças a 8% do topo,
     borda esquerda em 50% do container (centrado, logo 50vw) */
  .hero__cast{
    position:absolute;left:50%;right:calc(50% - 50vw);
    top:0;bottom:0;margin:0;display:block;
  }
  .hero__cast::before{
    left:50%;bottom:0;width:100%;aspect-ratio:auto;height:70%;
    background:radial-gradient(50% 46% at 50% 30%,
      rgba(243,221,142,.20) 0%,rgba(212,180,84,.09) 44%,transparent 72%);
  }
  .hero__fade{height:clamp(240px,42%,340px)}
  .hero__cast.has-solo .cast__solo::after{display:none}
  .hero__cast.has-solo{display:block}
  /* Sem corte: a altura manda e a largura segue a proporção da imagem.
     O PNG é transparente, então a composição pode avançar para a esquerda
     sobre a coluna de texto sem virar um bloco colado. */
  .hero__cast.has-solo .cast__solo{
    position:absolute;left:0;right:auto;top:8%;bottom:0;width:auto;margin:0;
  }
  .cast__solo picture{display:block;height:100%}
  /* largura natural: nada é cortado. A borda esquerda fica em 50% do
     container (item 6) e o excesso sangra pela borda direita, que é o
     comportamento previsto no HERO.md. */
  .cast__solo img{
    height:100%;width:auto;max-width:none;display:block;
  }

  /* item 8: legendas na base, uma sob cada figura, linha-guia de 48px */
  .hero__cast.has-solo .cast__label{position:absolute;bottom:28px;max-width:36%}
  .hero__cast.has-solo .cast__label--leandro,
  .hero__cast.has-solo[data-left="leandro"] .cast__label--leandro{left:4%;right:auto}
  .hero__cast.has-solo .cast__label--gustavo,
  .hero__cast.has-solo[data-left="leandro"] .cast__label--gustavo{right:4%;left:auto}
  .hero__cast.has-solo[data-left="gustavo"] .cast__label--gustavo{left:4%;right:auto}
  .hero__cast.has-solo[data-left="gustavo"] .cast__label--leandro{right:4%;left:auto}
  .cast__lead{height:48px}
}

/* ---------- 25. Preferências do usuário ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .pre{opacity:1;transform:none}
  /* item 29: sem marquee — rolagem horizontal comum, com snap e setas */
  .carousel__viewport{scroll-snap-type:x mandatory}
  .carousel.anda .carousel__track{animation:none}
  .carousel__nav{
    display:grid;place-items:center;position:absolute;top:38%;z-index:3;
    width:36px;height:36px;border-radius:50%;cursor:pointer;
    border:1px solid var(--ouro-40);background:rgba(18,26,44,.85);color:var(--ouro-claro);
  }
  .carousel__nav--ant{left:8px}
  .carousel__nav--prox{right:8px}
  .carousel__toggle{display:none}
  /* item 24: nenhuma luz em movimento */
  .btn--primary:hover::after,.btn-pill:hover::after{transform:translateX(-120%) skewX(-18deg)}
  .diag__n.acende,.fmt__ic.traca{filter:none}
}

@media print{
  .topbar,.mbar,.wafloat{display:none!important}
  body{padding-top:0;background:#FFFFFF;color:var(--tinta)}   /* papel branco; sem preto puro */
}