/* ==========================================================================
   RECORDE MUNDIAL — Guinness World Records, 25.03.2026

   Segue a direção do site: reto, preto de verdade, uma família tipográfica.
   O recorde aparece como fato, não como enfeite: a logo oficial RECORD
   HOLDER com a data (25.03.2026, Foz do Iguaçu - PR), a foto do certificado
   de verdade e a foto da equipe.

   A logo (img/recorde/guinness-record-holder-2026.webp) tem a data, o local
   e o ® em BRANCO: só pode ir sobre fundo escuro. Todo lugar que a usa
   (hero, cabeçalho, selo das internas, faixa e rodapé) é escuro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Logo RECORD HOLDER com data — hero e rodapé
   -------------------------------------------------------------------------- */

.rh {
  display: block;
  width: clamp(280px, 30vw, 440px);
  max-width: 100%;
}
.rh img {
  display: block;
  width: 100%; height: auto;
  transition: transform .8s var(--ease);
}
a.rh:hover img { transform: scale(1.03); }

/* no hero: largura para a data ser lida sem esforço */
.rh--hero { width: clamp(300px, 29vw, 430px); }

/* --------------------------------------------------------------------------
   HERO com a foto do recorde
   -------------------------------------------------------------------------- */

.hero--rec {
  align-items: flex-end;
  padding-top: calc(var(--header-h) + clamp(1rem, 3vw, 2.5rem));
  padding-bottom: clamp(2.4rem, 4vw, 3.6rem);
}

.hero--rec .hero__bg { background: var(--black); }
.hero--rec .hero__bg picture {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(68vw, calc(100svh * 1.03 + 6vw));
  min-width: 56vw;
}
.hero--rec .hero__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform-origin: 60% 40%;
  will-change: transform;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 34%),
    linear-gradient(0deg, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 34%),
    linear-gradient(0deg, transparent 0%, #000 22%);
          mask-composite: intersect;
}

/* a mesma brasa única do site, agora vindo da esquerda */
.hero--rec .hero__glow {
  width: 64vw; height: 64vw;
  left: -26vw; right: auto; top: -24vw;
}
/* mesmo radial de antes (.42 → .1 42% → transparente 64%), já com o
   blur(70px) dentro da imagem (ver .hero__glow em sections.css) */
.hero--rec .hero__glow::before { background-image: url("../img/fx/glow-rec.svg"); }
.hero--rec .hero__veil {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, transparent 20%, transparent 60%, rgba(0, 0, 0, .85) 90%, var(--black) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .15) 48%, transparent 64%);
}

.hero--rec .hero__in {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
}

.hero__copy { min-width: 0; display: grid; justify-items: start; gap: clamp(1.1rem, 1.9vw, 1.6rem); max-width: 640px; }

/* h1 = "22º CBP" + o nome por extenso logo abaixo (pedido da cliente).
   O leitor de tela lê o texto real, uma vez só: "22º CBP Congresso ...". */
.hero--rec .hero__title {
  display: grid;
  justify-items: start;
  row-gap: clamp(.75rem, 1.2vw, 1.05rem);
  margin: 0;
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: clamp(3.6rem, 9.4vw, 9.6rem);
  line-height: .86;
  letter-spacing: -.055em;
}
.hero__mark {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: .04em;
  white-space: nowrap;
}
.hero__tl { display: inline-block; overflow: hidden; padding: .04em .04em .06em 0; margin-bottom: -.06em; }
.hero__tl > span { display: inline-block; }

/* nome inteiro: condensado em caixa alta, abaixo do "22º CBP" sem competir
   com ele nem com a frase; entra junto da sequência do hero ([data-hero-seq]) */
.hero__name {
  display: grid;
  justify-items: start;
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: clamp(.95rem, 1.34vw, 1.22rem);
  line-height: 1.2;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--fg);
  max-width: none; /* a regra antiga de .hero__name em sections.css limitava a 30ch */
}
.hero__name > span { display: block; }

/* CBP: a água de Foz dentro das letras, tingida de laranja (pedido da cliente:
   "muito vermelho, deixar mais laranja"). No hard-light o verde do resultado
   vem quase todo da foto (escura): por isso o tom de cima é mais amarelo que
   o --ember; sobre a foto ele resulta no mesmo laranja (~30°), não vermelho.
   A cor de fundo é a média da foto sob as letras (#1b2e39, medida): enquanto
   a foto não carrega, ou se falhar, o hard-light sobre ela dá o mesmo laranja,
   em vez do amarelo-ouro do gradiente sozinho. */
.hero__cbp {
  color: var(--ember);
  background:
    linear-gradient(rgba(255, 180, 40, .9), rgba(255, 180, 40, .9)),
    url("../img/foz-aerea.webp") 50% 40% / cover;
  background-color: #1b2e39;
  background-blend-mode: hard-light, normal; /* a foto cobre a cor sem misturar */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__claim {
  font-variation-settings: "wdth" 110, "wght" 700;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--fg);
  max-width: 19ch;
}
.hero__claim em { font-style: normal; color: var(--flame); }

/* datas na régua do site: rótulo condensado, valor em peso */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem clamp(1.4rem, 3vw, 2.6rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.hero__facts > div { display: grid; gap: .15rem; }
.hero__facts dt { font-variation-settings: "wdth" 92, "wght" 600; font-size: .78rem; letter-spacing: .05em; color: var(--fg-3); }
.hero__facts dd { font-variation-settings: "wdth" 96, "wght" 700; font-size: var(--fs-note); }

.hero--rec .hero__cta { align-items: center; gap: 1.6rem; }
.btn--xl { padding: 1.25em 2.6em; font-size: clamp(1rem, 1.1vw, 1.08rem); }

/* --------------------------------------------------------------------------
   CONTADOR — só o número de dias, grande, e o relógio em texto corrido
   -------------------------------------------------------------------------- */

.hero__side { display: grid; justify-items: end; row-gap: clamp(1.1rem, 2vw, 1.6rem); min-width: 0; }

/* selo pequeno do recorde no canto do hero, acima da contagem: o mesmo selo
   das páginas internas (.phero__rec). O hero vende o congresso; o Guinness
   fica como selo (pedido do cliente, 08/10/2026) */
.hero__selo span { max-width: 30ch; line-height: 1.3; text-wrap: balance; }

.cdx { display: flex; align-items: flex-end; gap: .9rem; }
@media (min-width: 901px) { .cdx, .hero__selo { margin-right: 78px; } }
.cdx__n {
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: clamp(4rem, 7.4vw, 7.6rem);
  line-height: .78;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.cdx__t {
  padding-bottom: .15rem;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: var(--fs-note);
  line-height: 1.3;
  color: var(--fg-2);
}
.cdx__t span { color: var(--fg); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Faixa: itens do recorde
   -------------------------------------------------------------------------- */

.ticker__item--rec { gap: .7rem; }
/* a logo tem data branca: vai num bloco escuro no meio da faixa laranja.
   A faixa afina o respiro para o bloco quase encostar nas bordas. */
.ticker:has(.ticker__logo) { padding-block: .45rem; }
.ticker__logo {
  display: flex;
  align-items: center;
  padding: .3rem .9rem;
  background: #150500;
}
.ticker__logo img { display: block; height: max(2.2em, 40px); width: auto; }

/* --------------------------------------------------------------------------
   SEÇÃO 02 — o certificado de verdade, em fundo escuro
   -------------------------------------------------------------------------- */

.rec { position: relative; padding-block: var(--band); background: var(--black); }

.rec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.rec__copy { display: grid; gap: clamp(1.4rem, 2.4vw, 2.2rem); justify-items: start; }
.rec .d-xl { font-size: clamp(2.3rem, 4.2vw, 4.4rem); max-width: 13ch; }
.rec .body { max-width: 50ch; }

.rec__cert { margin: 0; justify-self: end; width: min(100%, 470px); }
/* moldura como a do quadro real: filete prateado e passe-partout marinho */
.rec__frame {
  padding: clamp(18px, 2.2vw, 30px);
  background: #24324f;
  border: clamp(6px, .6vw, 9px) solid #c9ccd2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.rec__frame img { display: block; width: 100%; height: auto; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.rec__cert figcaption { margin-top: .9rem; font-size: var(--fs-data); color: var(--fg-3); }

.rec__facts {
  display: grid;
  width: 100%;
  max-width: 560px;
  border-top: 1px solid var(--line);
}
.rec__facts > div {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--line);
}
.rec__facts dt { font-variation-settings: "wdth" 92, "wght" 600; font-size: .82rem; color: var(--fg-3); }
.rec__facts dd { font-variation-settings: "wdth" 100, "wght" 650; font-size: var(--fs-note); }

.rec__wide { margin: clamp(3.5rem, 7vw, 6.5rem) 0 0; }
.rec__wide img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 30%; }
.rec__wide figcaption { margin-top: .9rem; font-size: var(--fs-data); color: var(--fg-3); }

/* --------------------------------------------------------------------------
   Selo no cabeçalho (todas as páginas)
   -------------------------------------------------------------------------- */

.brand-wrap { display: flex; align-items: center; flex: none; }
/* a logo com data no lugar do selo redondo; a altura cresce com a tela e
   encolhe junto com o espaço da navegação, sem sumir em nenhuma largura */
.hdr__rec {
  display: flex;
  align-items: center;
  flex: none;
  padding-left: clamp(.7rem, 1.1vw, 1.1rem);
  margin-left: clamp(.6rem, 1vw, 1rem);
  border-left: 1px solid var(--line);
}
.hdr__rec img {
  display: block;
  height: clamp(26px, calc(4vw - 16px), 46px);
  width: auto;
  transform-origin: 0 50%;
  transition: transform .6s var(--ease);
}
.hdr__rec:hover img { transform: scale(1.04); }

/* com a logo maior, a navegação inteira não cabe até ~1120px (antes já
   quebrava em duas linhas perto de 900px): ali entra o menu, o botão
   Inscreva-se continua à vista e a logo ganha espaço. Até 1180px a
   navegação só aperta o passo. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav { gap: .95rem; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  .nav { display: none; }
  .burger { display: flex; }
  .hdr__rec img { height: 36px; }
}
@media (max-width: 900px) {
  .hdr__rec img { height: clamp(24px, 7vw, 30px); }
}

/* --------------------------------------------------------------------------
   Selo nas páginas internas
   -------------------------------------------------------------------------- */

.phero__rec {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  width: fit-content;
  max-width: 100%;
  padding: .4rem 1.2rem .4rem .9rem;
  border: 1px solid rgba(242, 194, 48, .4);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .55);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: var(--fs-data);
  letter-spacing: .04em;
  color: var(--fg);
  transition: border-color var(--t-fast) var(--ease);
}
.phero__rec img { flex: none; height: 38px; width: auto; }
.phero__rec:hover { border-color: var(--gold); }

/* --------------------------------------------------------------------------
   Faixa do recorde no rodapé (todas as páginas)
   -------------------------------------------------------------------------- */

.ft-rec {
  border-block: 1px solid var(--line);
  background: var(--dark);
}
.ft-rec__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.2rem, 4vw, 3.4rem);
}
.ft-rec__txt {
  max-width: 40ch;
  font-variation-settings: "wdth" 96, "wght" 500;
  font-size: var(--fs-note);
  line-height: 1.45;
  color: var(--fg-2);
}
.ft-rec__txt strong { color: var(--fg); font-weight: 800; }
/* a data e o local já estão na logo */
.ft-rec .rh { justify-self: end; width: clamp(280px, 32vw, 460px); }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .rec__grid { grid-template-columns: 1fr; }
  .rec__cert { justify-self: center; width: min(100%, 400px); }
}

@media (max-width: 1024px) {
  .hero--rec .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__side { justify-items: start; }
  .ft-rec__in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ft-rec .rh { justify-self: center; }
}

/* celular e tablet em pé: foto em cima, texto embaixo, centralizado */
@media (max-width: 900px) {
  .hero.hero--rec {
    align-items: flex-end;
    min-height: 100svh;
    padding-top: min(50svh, 92vw);
    padding-bottom: 2.4rem;
  }
  .hero--rec .hero__bg picture { left: 0; width: 100%; min-width: 0; height: min(66svh, 112vw); bottom: auto; }
  .hero--rec .hero__photo {
    object-position: 50% 18%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .hero--rec .hero__veil {
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 18%, transparent 40%, rgba(0, 0, 0, .75) 62%, var(--black) 78%);
  }
  .hero--rec .hero__glow { left: -40vw; top: 40vh; width: 140vw; height: 140vw; }
  .hero__copy { justify-items: center; text-align: center; max-width: none; margin-inline: auto; }
  .hero--rec .hero__title { justify-items: center; }
  .hero__mark { justify-content: center; }
  /* no celular: duas linhas a partir de ~375px; abaixo disso, três */
  .hero__name { justify-items: center; font-size: clamp(.78rem, 3.3vw, 1.05rem); letter-spacing: .02em; }
  .hero__claim { margin-inline: auto; }
  .hero--rec .hero__title { font-size: clamp(3.2rem, 17.5vw, 7.5rem); margin-top: -.15em; }
  .hero__facts { justify-content: center; width: 100%; }
  .hero__facts > div { text-align: center; }
  .hero--rec .hero__cta { display: grid; justify-items: center; gap: 1.1rem; width: 100%; }
  .hero__side { justify-items: center; width: 100%; }
}

@media (max-width: 600px) {
  .rh--hero { width: min(310px, 86vw); }
  .phero__rec { gap: .65rem; padding: .35rem 1rem .35rem .65rem; font-size: .78rem; letter-spacing: .02em; }
  .phero__rec img { height: 30px; }
  .hero--rec .hero__cta .btn { width: 100%; }
  .rec__wide img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--rec .hero__photo { transition: none; }
}