/* ==========================================================================
   II Conferência Nacional de Microsseguros e Seguros Inclusivos
   Landing page construída a partir do PSD «LANDING PAGE - CNM» (1920 px).

   Unidades: 1rem = 100 px.
   - Computador (>= 1024 px): o desenho de 1920 px à escala da janela.
     A raiz vale min(100vw, 1920px) / 19.2, por isso .2778rem é 27,78 px
     a 1920 e encolhe na proporção em ecrãs mais estreitos.
   - Telemóvel (< 1024 px): 1rem = 100 px reais.
   ========================================================================== */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); }

:root {
  --marinho: #06204f;
  --azul: #234ee8;
  --coral: #fd5f53;
  --coral-texto: #fc6055;
  --pessego: #fdcdc1;
  --creme: #f6f1ed;
  --grad-botao: linear-gradient(121deg, #234ee8 calc(50% - 0.918rem), #515dd4 calc(50% - 0.612rem), #7666c0 calc(50% - 0.306rem), #986baa calc(50% + 0rem), #ba6c92 calc(50% + 0.306rem), #db6877 calc(50% + 0.612rem), #fc6055 calc(50% + 0.918rem));
  --grad-pilula: linear-gradient(136deg, #234ee8 calc(50% - 1.003rem), #515dd4 calc(50% - 0.669rem), #7666bf calc(50% - 0.334rem), #996ba9 calc(50% + 0rem), #ba6b91 calc(50% + 0.334rem), #dc6876 calc(50% + 0.669rem), #fd5f53 calc(50% + 1.003rem));
  --grad-mais: linear-gradient(350deg, #234ee8 calc(50% - 0.440rem), #515dd4 calc(50% - 0.293rem), #7666bf calc(50% - 0.147rem), #996ba9 calc(50% + 0rem), #ba6b91 calc(50% + 0.147rem), #dc6876 calc(50% + 0.293rem), #fd5f53 calc(50% + 0.440rem));
  --grad-faixa: linear-gradient(178deg, #234ee8, #06204f);
  --grad-sobre: linear-gradient(180deg, #234ee8, #06204f);
  --grad-anel: linear-gradient(0deg, #234ee8 0%, #515dd4 16.7%, #7666bf 33.3%, #996ba9 50%, #ba6b91 66.7%, #dc6876 83.3%, #fd5f53 100%);
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
/* «clip» (e não «hidden») corta o que passa as margens sem criar uma área de
   scroll própria, por isso o topo fixo e o scroll suave continuam a funcionar.
   Sem isto no html, os anéis decorativos faziam a página rolar na horizontal. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: #fff;
  color: var(--marinho);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 700; }
hr { border: 0; margin: 0; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.saltar {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--marinho); color: #fff; border-radius: 8px;
}
.saltar:focus { top: 8px; }

.chapeu { color: var(--coral-texto); font-weight: 700; }
.titulo { font-weight: 700; }
.titulo--claro { color: #fff; }
.titulo--creme { color: var(--creme); }

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap;
  background: var(--grad-botao);
  transition: filter .2s, transform .2s;
}
.botao:hover { filter: brightness(1.08); transform: translateY(-1px); }
.botao--contorno { background: none; color: var(--marinho); font-weight: 500; }
.botao--contorno:hover { background: rgba(6, 32, 79, .05); }

.sobre, .acompanhar, .patrocine-faixa { background-color: var(--marinho); color: #fff; }
.sobre { background-image: var(--grad-sobre); }
.acompanhar, .patrocine-faixa { background-image: var(--grad-faixa); }
.aneis { pointer-events: none; max-width: none; }
.apoios img, .marcas-lista img, .benemeritas img { width: 100%; }
.marcas-titulo { color: var(--coral-texto); font-weight: 700; }
.marcas-lista { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
/* os anéis desta faixa estão rodados no PSD, o que muda a direção do gradiente */
.aneis--patrocine-esq { transform: rotate(-32.64deg); }
.aneis--patrocine-dir { transform: rotate(30.55deg); }

.pilar { background: rgba(246, 241, 237, .8); color: var(--marinho); }
.pilar-icone { display: grid; place-items: center; border-radius: 50%; background: var(--coral); }

.agenda-ponto { border-radius: 50%; border-style: solid; border-color: var(--coral); background: var(--coral); }
.agenda-item--esbatido .agenda-ponto { background: var(--creme); }
.agenda-item--esbatido p { opacity: .3; }
.agenda-item--destaque .agenda-ponto { background: var(--azul); border-color: var(--azul); }
.agenda-item--destaque p { color: var(--azul); }

.orador { text-align: center; }
.orador-foto { position: relative; display: block; border-radius: 50%; background: var(--grad-anel); }
.orador-foto > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bandeira { position: absolute; border-style: solid; border-color: #fff; background: #fff; object-fit: cover; }
.oradores-mais span {
  display: inline-block;
  background: var(--grad-mais);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 700;
}

.modalidade { position: relative; background: var(--marinho); }
.modalidade::before { content: ''; position: absolute; background: var(--azul); }

.pilulas li { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; background: var(--grad-pilula); }

.anm {
  position: relative; text-align: left;
  border-style: solid; border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad-anel) border-box;
}

.redes a { display: block; transition: opacity .2s; }
.redes a:hover { opacity: .75; }
.voltar-topo { display: grid; place-items: center; color: var(--marinho); border-style: solid; border-color: var(--marinho); }
.voltar-topo svg { display: block; }

/* contadores: o molde invisível dá a largura e a linha de base do valor final;
   o valor a contar fica fora do fluxo, encostado à direita, e cresce para a
   esquerda sem empurrar nem tocar a palavra ao lado */
.contador { position: relative; display: inline-block; }
.contador-molde { visibility: hidden; }
.contador-valor { position: absolute; right: 0; top: 0; white-space: nowrap; }

.menu a { text-decoration: none; transition: color .25s; }
.quebra-pc { display: none; }
.menu a:hover, .menu a.ativo { color: var(--azul); }
.credito-arroba a { text-decoration: none; }
.credito-arroba a:hover { color: var(--azul); }
.topo { transition: box-shadow .3s; }
.topo.rolado { box-shadow: 0 6px 24px rgba(6, 32, 79, .08); }


/* ==========================================================================
   COMPUTADOR: o PSD a 1920 px, à escala da janela
   ========================================================================== */
@media (min-width: 1024px) {
  html { font-size: calc(min(100vw, 1920px) / 19.2); }
  body { font-size: .2778rem; line-height: .4028rem; }

  .wrap { position: relative; width: 19.2rem; margin: 0 auto; }
  .quebra-pc { display: inline; }
  [id] { scroll-margin-top: 1.41rem; }

  .chapeu { font-size: .25rem; line-height: .3rem; }
  .titulo { font-size: .4444rem; line-height: .5333rem; margin-top: .0955rem; }
  .titulo--grande { font-size: .7037rem; line-height: .8444rem; }

  .botao { width: 3.07rem; height: .7rem; border-radius: .35rem; font-size: .2439rem; line-height: 1; padding-bottom: .039rem; }
  .botao--contorno { width: 3.59rem; height: .72rem; gap: .16rem; padding: .02rem .03rem 0 0; border: .02rem solid var(--marinho); border-radius: .36rem; }
  .botao--contorno img { width: .25rem; }

  /* ---------------------------------------------------------- topo */
  .topo { position: sticky; top: 0; z-index: 50; height: 1.41rem; background: #fff; border-bottom: .01rem solid rgba(6, 32, 79, .1); }
  .topo .wrap { height: 100%; }
  .topo-logo { position: absolute; left: .63rem; top: .33rem; width: 2.6rem; }
  .menu {
    position: absolute; left: 9.281rem; top: .5544rem; transform: translateX(-50%);
    display: flex; gap: .6963rem; white-space: nowrap;
    font-size: .2439rem; line-height: .2927rem; font-weight: 500;
  }
  .topo-botao { position: absolute; left: 15.44rem; top: .32rem; }
  .menu-botao, .menu-cta { display: none; }

  /* ---------------------------------------------------------- hero */
  .hero { height: 7.485rem; }
  .hero-imagem { position: absolute; left: 10.28rem; top: -1.29rem; width: 9.64rem; height: 9.18rem; }
  .hero-conteudo { position: relative; padding-top: .88rem; }
  .hero-titulo { width: 6.16rem; margin-left: .66rem; }
  .hero-titulo img { width: 100%; }
  .hero-frase { width: 8.55rem; margin: .342rem 0 0 1.05rem; font-size: .3611rem; line-height: .4333rem; font-weight: 500; }
  .hero-info { display: flex; height: .57rem; margin: .3614rem 0 0 1.05rem; }
  .hero-data { display: flex; align-items: flex-start; width: 5.62rem; font-size: .3333rem; line-height: .3333rem; font-weight: 700; }
  .hero-data img { width: .49rem; margin-top: .04rem; }
  .hero-data time { margin: .1469rem 0 0 .2247rem; }
  .hero-local { display: flex; align-items: flex-start; }
  .hero-local img { width: .41rem; }
  /* a mesma margem da data: com o mesmo corpo e entrelinha, as duas linhas
     ficam na mesma linha de base (antes o local tinha duas linhas) */
  .hero-local > span { display: flex; flex-direction: column; margin: .1469rem 0 0 .2081rem; }
  .hero-local strong { font-size: .3333rem; line-height: .3333rem; }
  .hero-local strong + span { margin-top: .0293rem; font-size: .2361rem; line-height: .2361rem; font-weight: 500; }
  .hero-acoes { display: flex; align-items: flex-start; gap: .34rem; margin: .83rem 0 0 1.05rem; }
  .hero-acoes .botao:first-child { margin-top: .01rem; }

  /* -------------------------------------------------- sobre + pilares */
  .sobre { position: relative; z-index: 1; height: 13.54rem; margin: 0 -.005rem; border: .01rem solid var(--marinho); border-radius: .425rem; }
  .sobre .wrap { padding: 1.4281rem 0 0 1.173rem; }
  .sobre .titulo { margin-top: .0853rem; }
  .sobre-texto { width: 8.111rem; margin-top: .4247rem; }
  .sobre-foto { position: absolute; left: 10.28rem; top: 1.815rem; width: 7.4rem; }
  .sobre-foto figcaption {
    position: absolute; left: 5.2174rem; top: 1.9314rem; white-space: nowrap;
    font-size: .2778rem; line-height: .4028rem; font-weight: 600;
  }
  .divisor { width: 16.91rem; height: .01rem; }
  .divisor--claro { background: rgba(246, 241, 237, .2); margin: 1.114rem 0 0 -.023rem; }
  #pilares { margin-top: .8996rem; }
  #pilares .titulo { margin-top: .0954rem; }

  .pilares { display: grid; grid-template-columns: 5.39rem 5.9rem 5.39rem; gap: .09rem; margin: .6067rem 0 0 -.058rem; }
  .pilar { position: relative; height: 2.42rem; border-radius: .405rem; }
  .pilar-icone { position: absolute; left: var(--ix); top: .485rem; width: 1.12rem; height: 1.12rem; }
  .pilar-texto { position: absolute; left: var(--tx); top: var(--ty); }
  .pilar h3 { width: 3.33rem; font-size: .3056rem; line-height: .4028rem; }
  .pilar p { width: var(--pw); margin-top: var(--gap); font-size: .2769rem; line-height: .3194rem; }
  .pilar--1 { --ix: .425rem; --tx: 1.705rem; --ty: .4066rem; --gap: .0462rem; --pw: 3.346rem; }
  .pilar--2 { --ix: .29rem; --tx: 1.53rem; --ty: .4166rem; --gap: .0462rem; --pw: 4.197rem; }
  .pilar--3 { --ix: .42rem; --tx: 1.7rem; --ty: .7166rem; --gap: .129rem; --pw: 3.294rem; }
  .pilar--1 .pilar-icone img { width: .68rem; }
  .pilar--2 .pilar-icone img { width: .63rem; }
  .pilar--3 .pilar-icone img { width: .61rem; }

  /* ---------------------------------------------------- programação */
  .programacao .wrap { padding: 1.5646rem 0 0 1.43rem; }
  .aneis--programacao { position: absolute; left: 13.32rem; top: 1.22rem; width: 9.64rem; opacity: .34; }
  .programacao .titulo { margin-top: .0954rem; }
  .programacao-intro { width: 8.111rem; margin-top: .4231rem; }
  .agenda { position: relative; margin-top: .2481rem; }
  .agenda::before { content: ''; position: absolute; left: 1.345rem; top: .55rem; bottom: .55rem; width: .02rem; background: var(--coral); }
  .agenda-item { display: flex; align-items: center; height: 1.1rem; }
  .agenda-item:nth-child(3) { margin-top: .01rem; }
  .agenda-item:nth-child(4) { margin-top: -.04rem; }
  .agenda-item time { flex: none; width: .7575rem; text-align: right; line-height: 1; padding-top: .074rem; }
  .agenda-ponto { position: relative; flex: none; width: .47rem; height: .47rem; margin-left: .3725rem; border-width: .02rem; }
  .agenda-item p { margin-left: .28rem; }
  /* no PSD as horas seguem uma grelha de 36,11 px e não o centro de cada círculo */
  .agenda-item time { position: relative; }
  .agenda-item:nth-child(1) time { top: .015rem; }
  .agenda-item:nth-child(3) time { top: -.035rem; }
  .agenda-item:nth-child(5) time { top: -.025rem; }
  .agenda-item:nth-child(4) p { position: relative; top: .05rem; }
  .divisor:not(.divisor--claro) { background: rgba(6, 32, 79, .2); margin: 2.005rem 0 0 -.28rem; }

  /* --------------------------------------------------- palestrantes */
  .palestrantes .wrap { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 1.176rem 0 .82rem 1.43rem; }
  .palestrantes-cabecalho { width: 5.567rem; margin-top: .15rem; }
  .palestrantes .titulo { margin-top: .0959rem; }
  .oradores { display: grid; grid-template-columns: 3.324rem .4805rem 3.324rem .3845rem 3.324rem; row-gap: .9206rem; }
  .orador { display: flex; flex-direction: column; align-items: center; }
  .orador:nth-child(3n + 1) { grid-column: 1; }
  .orador:nth-child(3n + 2) { grid-column: 3; }
  .orador:nth-child(3n) { grid-column: 5; }
  .orador-foto { width: 2.2rem; height: 2.2rem; padding: .05rem; }
  .bandeira { left: 1.721rem; top: 1.719rem; width: .6rem; height: .45rem; border-width: .02rem; border-radius: .11rem; }
  .orador:nth-child(3n + 2) .bandeira { left: 1.6865rem; }
  .orador:nth-child(3n) .bandeira { left: 1.738rem; }
  /* as caixas de texto do PSD estão 3,3 px à esquerda do centro das fotos */
  .orador p { position: relative; left: -.033rem; width: 3.324rem; margin-top: .1732rem; font-size: .2778rem; line-height: .3471rem; }
  .oradores-mais { width: 100%; margin: .1615rem 0 0 8.13rem; }
  .oradores-mais span { width: 5.86rem; padding: .2192rem .0588rem .3137rem 0; text-align: center; font-size: .2778rem; line-height: .3471rem; }

  /* ---------------------------------------------------- acompanhar */
  .acompanhar { position: relative; overflow: hidden; height: 7.67rem; border-radius: .42rem; }
  .acompanhar .wrap { height: 100%; padding: 1.2232rem 0 0 1.4476rem; }
  .aneis--acompanhar { position: absolute; left: 9.39rem; top: 1.73rem; width: 9.64rem; }
  .acompanhar .titulo { margin-top: .0865rem; }
  .modalidades { display: flex; gap: .68rem; margin: .487rem 0 0 -.0176rem; }
  .modalidade { flex: none; width: 4.63rem; height: 3.61rem; border-radius: .28rem; }
  .modalidade img { position: absolute; left: .55rem; top: .45rem; width: .69rem; }
  .modalidade::before { left: .45rem; top: 1.39rem; width: 1.11rem; height: .01rem; }
  .modalidade p { position: absolute; left: .4767rem; top: 1.4614rem; width: 3.918rem; }

  /* ------------------------------------------------------- 1ª edição */
  .edicao .wrap { padding: 2.081rem 0 1.79rem; text-align: center; }
  .edicao .titulo { margin-top: .0959rem; }
  .pilulas { display: flex; justify-content: center; align-items: flex-start; gap: .428rem; margin-top: .2198rem; padding-left: .0870rem; }
  .pilulas li { height: .724rem; border-radius: .36rem; padding-bottom: .042rem; font-size: .3411rem; line-height: 1; }
  .pilulas li:first-child { width: 2.842rem; }
  .pilulas li:last-child { width: 6.485rem; height: .728rem; }
  .edicao-apoio { margin-top: 1.1474rem; font-size: .2775rem; line-height: .333rem; }
  /* os logótipos da 1ª edição ficam do tamanho dos do rodapé */
  .apoios { display: flex; justify-content: center; align-items: center; gap: 1.05rem; margin-top: .52rem; }
  .apoio--ansp { width: 1.5rem; }
  .apoio--aconseg { width: 1.55rem; }
  .apoio--sousegura { width: 1.62rem; }
  .apoio--ccsrj { width: 1.55rem; }
  .apoio--cvg { width: .76rem; }

  .anm { width: 15.53rem; height: 3.77rem; margin: 1.95rem 0 0 1.84rem; padding: .7924rem 0 0 .8857rem; border-width: .02rem; border-radius: .65rem; }
  .anm .titulo { margin-top: .0943rem; }
  .anm-texto { width: 8.111rem; margin: .2014rem 0 0 -.0357rem; }
  .anm-logo { position: absolute; left: 11.71rem; top: .63rem; width: 2.45rem; }

  /* ------------------------------------------------------- patrocine */
  .patrocine-faixa { position: relative; overflow: hidden; height: 4.14rem; }
  .patrocine-faixa .wrap { height: 100%; padding: .9465rem 0 0 1.4318rem; }
  .aneis--patrocine-esq { position: absolute; left: -4.26rem; top: -1.34rem; width: 7.3rem; opacity: .34; }
  .aneis--patrocine-dir { position: absolute; left: 9.73rem; top: -2.32rem; width: 9.11rem; }
  .patrocine-faixa .chapeu { position: relative; margin-left: .053rem; }
  .patrocine-faixa .titulo { position: relative; margin-top: .0047rem; }
  /* o compositor da Adobe aperta os espaços entre palavras para «mercado» caber na 1.ª linha */
  .patrocine-texto { position: relative; word-spacing: -.0148rem; width: 8.111rem; margin: .1058rem 0 0 .0042rem; }
  .patrocine-botao { position: absolute; left: 12.79rem; top: 1.77rem; }

  /* ------------------------------------------ patrocínio e apoiadores */
  .marcas { padding: 1.5646rem 0 1.12rem; }
  .marcas-grupo + .marcas-grupo { margin-top: .86rem; }
  .marcas-titulo { text-align: center; font-size: .25rem; line-height: .3rem; }
  .marcas-lista { gap: 1.15rem; margin-top: .46rem; }
  .marca--volts { width: 1.45rem; }
  .marca--bvix { width: 1.95rem; }
  .marca--mag { width: 1.2rem; }
  .marca--coi { width: 1.68rem; }
  .marca--gestiuris { width: 1.62rem; }
  .marca--cvg { width: 1.02rem; }

  /* ---------------------------------------------------------- rodapé */
  .rodape { margin-top: .01rem; }
  .rodape .wrap { height: 6.49rem; }
  .rodape-logo { position: absolute; left: 1.52rem; top: 1.1rem; width: 4.35rem; }
  .rodape-botao { position: absolute; left: 1.51rem; top: 2.72rem; }
  /* coluna do meio: Empresas Beneméritas, linha e os três créditos */
  .rodape-meio { position: absolute; left: 6.86rem; top: .83rem; width: 7.97rem; }
  .benemeritas > p { text-align: center; font-size: .25rem; line-height: .3rem; }
  .benemeritas ul { display: flex; align-items: center; justify-content: center; gap: .38rem; margin-top: .28rem; }
  .benemerita--bvix { width: 1.3rem; }
  .benemerita--oxxy { width: 1.22rem; }
  .benemerita--capemisa { width: 1.3rem; }
  .benemerita--sudaseg { width: 1rem; }
  .benemerita--volts { width: 1.06rem; }
  .rodape-linha { height: .01rem; margin-top: .36rem; background: rgba(0, 0, 0, .2); }
  .creditos { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; margin-top: .3rem; }
  .credito { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .credito--curadoria p:first-child { line-height: .3194rem; }
  .credito--realizacao img { width: 1.83rem; margin-top: .12rem; }
  .credito--curadoria img { width: 2.5rem; margin-top: .3rem; }
  .credito--producao img { width: 1.65rem; margin-top: .33rem; }
  .credito-arroba { margin-top: .18rem; font-size: .25rem; }
  .redes li { position: absolute; }
  .redes img, .topo-logo img { width: 100%; }
  .redes li { left: 17.65rem; top: 1.25rem; width: .67rem; }
  .rodape-ano { position: absolute; left: 16.9799rem; top: 4.632rem; font-weight: 500; }
  .voltar-topo { position: absolute; left: 18.099rem; top: 4.529rem; width: .422rem; height: .422rem; border-width: .02rem; border-radius: .11rem; }
  .voltar-topo svg { width: .2rem; }
}


/* ==========================================================================
   TELEMÓVEL E TABLET (< 1024 px): uma coluna, desenhada a partir dos 390 px
   1rem = 100 px aos 390 px de largura (entre 90 e 110 px nos outros ecrãs)
   ========================================================================== */
@media (max-width: 1023.98px) {
  html { font-size: clamp(90px, 25.641vw, 110px); }
  body { font-size: .16rem; line-height: 1.55; }
  body.menu-aberto { overflow: hidden; }

  .wrap { position: relative; max-width: 7.2rem; margin: 0 auto; }
  [id] { scroll-margin-top: .64rem; }

  .chapeu { font-size: .14rem; line-height: 1.3; }
  .titulo { margin-top: .06rem; font-size: .26rem; line-height: 1.2; }
  .titulo--grande { font-size: .34rem; line-height: 1.15; }

  .botao { height: .52rem; padding: 0 .26rem; border-radius: .26rem; font-size: .16rem; line-height: 1; }
  .botao--contorno { gap: .1rem; border: 2px solid var(--marinho); }
  .botao--contorno img { width: .16rem; }

  /* ---------------------------------------------------------- topo */
  .topo { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid rgba(6, 32, 79, .1); }
  .topo .wrap { display: flex; align-items: center; justify-content: space-between; height: .64rem; padding: 0 .2rem; }
  .topo-logo { width: 1.5rem; margin-left: -.02rem; }
  .topo-logo img { width: 100%; }
  .topo-botao { display: none; }
  .menu-botao {
    display: grid; place-content: center; gap: 5px;
    width: .44rem; height: .44rem; margin-right: -.1rem; padding: 0;
    background: none; border: 0; color: var(--marinho); cursor: pointer;
  }
  .menu-botao span { display: block; width: .24rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
  .menu-aberto .menu-botao span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-aberto .menu-botao span:nth-child(2) { opacity: 0; }
  .menu-aberto .menu-botao span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu {
    position: fixed; top: .64rem; left: 0; right: 0; z-index: 49;
    display: flex; flex-direction: column;
    max-height: calc(100vh - .64rem); overflow-y: auto;
    padding: .08rem .2rem .28rem; background: #fff;
    box-shadow: 0 .16rem .3rem rgba(6, 32, 79, .14);
    opacity: 0; visibility: hidden; transform: translateY(-.1rem);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .menu-aberto .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
  .menu a { padding: .15rem 0; border-bottom: 1px solid rgba(6, 32, 79, .08); font-size: .18rem; line-height: 1.2; font-weight: 500; }
  .menu .menu-cta { display: flex; margin-top: .22rem; border-bottom: 0; color: #fff; font-size: .16rem; font-weight: 700; padding: 0; }

  /* ---------------------------------------------------------- hero */
  .hero .wrap { display: flex; flex-direction: column; }
  .hero picture { display: block; order: 2; margin: .26rem 0 -4.3%; }
  .hero-imagem { width: 100%; }
  .hero-conteudo { padding: .3rem .2rem 0; }
  .hero-titulo { width: 2.96rem; margin-left: -.03rem; }
  .hero-titulo img { width: 100%; }
  .hero-frase { margin-top: .16rem; font-size: .19rem; line-height: 1.38; font-weight: 500; }
  .hero-info { display: flex; flex-direction: column; gap: .14rem; margin-top: .22rem; }
  .hero-data, .hero-local { display: flex; align-items: center; gap: .12rem; }
  .hero-data { font-size: .18rem; line-height: 1.2; font-weight: 700; }
  .hero-data img { width: .28rem; }
  .hero-local img { width: .24rem; margin: 0 .02rem; }
  .hero-local > span { display: flex; flex-direction: column; }
  .hero-local strong { font-size: .18rem; line-height: 1.2; }
  .hero-local strong + span { font-size: .14rem; line-height: 1.35; font-weight: 500; }
  .hero-acoes { display: flex; flex-direction: column; gap: .12rem; margin-top: .26rem; }
  .hero-acoes .botao { width: 100%; }

  /* -------------------------------------------------- sobre + pilares */
  .sobre { position: relative; z-index: 1; border-radius: .28rem; }
  .sobre .wrap { padding: .56rem .2rem .6rem; }
  .sobre-texto { margin-top: .16rem; }
  .sobre-foto { position: relative; margin-top: .3rem; container-type: inline-size; }
  .sobre-foto img { width: 100%; }
  /* a legenda vive no entalhe da foto e escala com ela */
  .sobre-foto figcaption {
    position: absolute; left: 70.5%; top: 47.3%; white-space: nowrap;
    font-size: 3.754cqw; line-height: 1.45; font-weight: 600;
  }
  .divisor { height: 1px; margin: .44rem 0; }
  .divisor--claro { background: rgba(246, 241, 237, .2); }
  .pilares { display: grid; gap: .1rem; margin-top: .22rem; }
  .pilar { display: flex; align-items: center; gap: .16rem; padding: .2rem; border-radius: .24rem; }
  .pilar-icone { flex: none; width: .64rem; height: .64rem; }
  .pilar--1 .pilar-icone img { width: .38rem; }
  .pilar--2 .pilar-icone img { width: .36rem; }
  .pilar--3 .pilar-icone img { width: .34rem; }
  .pilar h3 { font-size: .17rem; line-height: 1.3; }
  .pilar p { margin-top: .04rem; font-size: .15rem; line-height: 1.4; }

  /* ---------------------------------------------------- programação */
  .programacao { position: relative; overflow: hidden; }
  .programacao .wrap { padding: .56rem .2rem 0; }
  .aneis--programacao { position: absolute; top: .2rem; right: -1.5rem; width: 3rem; opacity: .34; }
  .programacao .wrap > :not(.aneis) { position: relative; }
  .programacao-intro { margin-top: .14rem; }
  .agenda { margin-top: .28rem; }
  .agenda::before { content: ''; position: absolute; left: calc(.81rem - 1px); top: .36rem; bottom: .36rem; width: 2px; background: var(--coral); }
  .agenda-item { display: flex; align-items: center; min-height: .72rem; }
  .agenda-item time { flex: none; width: .56rem; text-align: right; font-size: .15rem; line-height: 1; }
  .agenda-ponto { position: relative; flex: none; width: .22rem; height: .22rem; margin-left: .14rem; border-width: 2px; }
  .agenda-item p { margin-left: .16rem; font-size: .16rem; line-height: 1.35; }
  .programacao .divisor { margin: .48rem 0 0; background: rgba(6, 32, 79, .2); }

  /* --------------------------------------------------- palestrantes */
  .palestrantes .wrap { padding: .48rem .2rem .56rem; }
  .oradores { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .14rem; margin-top: .28rem; }
  .orador { display: flex; flex-direction: column; align-items: center; }
  .orador-foto { width: 1.36rem; height: 1.36rem; padding: 4px; }
  .bandeira { left: 78%; top: 78%; width: .36rem; height: .27rem; border-width: 2px; border-radius: 7px; }
  .orador p { margin-top: .12rem; font-size: .15rem; line-height: 1.35; }
  .oradores-mais { margin-top: .3rem; text-align: center; }
  .oradores-mais span { padding: .06rem .1rem; font-size: .16rem; line-height: 1.3; }

  /* ---------------------------------------------------- acompanhar */
  .acompanhar { position: relative; overflow: hidden; border-radius: .28rem; }
  .acompanhar .wrap { padding: .56rem .2rem .64rem; }
  .aneis--acompanhar { position: absolute; top: -1.1rem; right: -1.7rem; width: 3.2rem; }
  .acompanhar .wrap > :not(.aneis) { position: relative; }
  .modalidades { display: grid; gap: .12rem; margin-top: .22rem; }
  .modalidade { padding: .24rem .24rem .26rem; border-radius: .2rem; }
  .modalidade img { width: .4rem; }
  .modalidade::before { left: .24rem; top: .78rem; width: .72rem; height: 1px; }
  .modalidade p { margin-top: .26rem; font-size: .16rem; line-height: 1.45; }

  /* ------------------------------------------------------- 1ª edição */
  .edicao .wrap { padding: .64rem .2rem .56rem; text-align: center; }
  .pilulas { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem; margin-top: .18rem; }
  .pilulas li { height: .46rem; padding: 0 .2rem .02rem; border-radius: .23rem; font-size: .16rem; line-height: 1; background: linear-gradient(136deg, #234ee8 0%, #515dd4 16.7%, #7666bf 33.3%, #996ba9 50%, #ba6b91 66.7%, #dc6876 83.3%, #fd5f53 100%); }
  .edicao-apoio { margin-top: .36rem; font-size: .15rem; line-height: 1.4; }
  .apoios { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .22rem .3rem; margin-top: .22rem; }
  .apoios img { width: auto; max-width: 100%; max-height: .56rem; }
  .apoio--sousegura img { max-height: .34rem; }
  .apoio--cvg img { max-height: .62rem; }
  .anm { display: flex; flex-direction: column; margin-top: .5rem; padding: .28rem .22rem .3rem; border-width: 2px; border-radius: .24rem; }
  .anm-logo { order: -1; width: 1.1rem; margin-bottom: .16rem; }
  .anm-texto { margin-top: .12rem; }

  /* ------------------------------------------------------- patrocine */
  .patrocine-faixa { position: relative; overflow: hidden; }
  .patrocine-faixa .wrap { padding: .56rem .2rem .6rem; }
  .aneis--patrocine-esq { display: none; }
  .aneis--patrocine-dir { position: absolute; right: -1.5rem; bottom: -1.3rem; width: 3.3rem; opacity: .55; }
  .patrocine-faixa .wrap > :not(.aneis) { position: relative; }
  .patrocine-texto { margin-top: .12rem; }
  .patrocine-botao { margin-top: .26rem; width: 100%; }

  /* ------------------------------------------ patrocínio e apoiadores */
  .marcas { padding: .56rem .2rem .5rem; }
  .marcas-grupo + .marcas-grupo { margin-top: .4rem; }
  .marcas-titulo { text-align: center; font-size: .15rem; line-height: 1.3; }
  .marcas-lista { gap: .26rem .34rem; margin-top: .22rem; }
  .marca--volts { width: .86rem; }
  .marca--bvix { width: 1.16rem; }
  .marca--mag { width: .72rem; }
  .marca--coi { width: .9rem; }
  .marca--gestiuris { width: .98rem; }
  .marca--cvg { width: .6rem; }

  /* ---------------------------------------------------------- rodapé */
  .rodape .wrap { display: flex; flex-direction: column; align-items: center; padding: .48rem .2rem .36rem; text-align: center; }
  .rodape-logo { width: 2.5rem; }
  .rodape-botao { width: 100%; max-width: 3.5rem; margin-top: .22rem; }
  .rodape-meio { width: 100%; margin-top: .4rem; }
  .benemeritas > p { text-align: center; font-size: .15rem; line-height: 1.3; }
  .benemeritas ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .2rem .26rem; margin-top: .18rem; }
  .benemerita--bvix { width: .84rem; }
  .benemerita--oxxy { width: .78rem; }
  .benemerita--capemisa { width: .84rem; }
  .benemerita--sudaseg { width: .56rem; }
  .benemerita--volts { width: .68rem; }
  .rodape-linha { height: 1px; margin-top: .3rem; background: rgba(0, 0, 0, .2); }
  .creditos { display: grid; grid-template-columns: 1fr 1fr; gap: .26rem .16rem; width: 100%; margin-top: .3rem; font-size: .15rem; line-height: 1.3; }
  .credito { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
  .credito--realizacao { grid-row: span 2; }
  .credito--realizacao img { width: 1.1rem; }
  .credito-arroba { font-size: .13rem; }
  .credito--curadoria img { width: 1.4rem; }
  .credito--producao img { width: .96rem; }
  .redes { display: flex; gap: .22rem; margin-top: .36rem; }
  .redes img { width: .34rem; }
  .rodape-ano { margin-top: .2rem; font-size: .14rem; font-weight: 500; }
  .voltar-topo { width: .44rem; height: .44rem; margin-top: .16rem; border-width: 2px; border-radius: 10px; }
  .voltar-topo svg { width: .18rem; }
}

/* tablet: a mesma coluna, com mais ar */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .hero-acoes { flex-direction: row; }
  .hero-acoes .botao { flex: 1; }
  .hero picture { width: 100%; max-width: 6.2rem; margin-left: auto; margin-right: auto; }
  .oradores { grid-template-columns: repeat(3, 1fr); }
  .apoios { grid-template-columns: repeat(3, 1fr); }
  .patrocine-botao { width: auto; }
  .creditos { grid-template-columns: repeat(3, 1fr); }
  .credito--realizacao { grid-row: auto; }
}


/* ==========================================================================
   MOVIMENTO
   Só existe com a classe .anima, que o <head> põe quando o sistema permite
   movimento. O estado final de cada efeito é o desenho do PSD.
   ========================================================================== */
:root { --suave: cubic-bezier(.22, .61, .36, 1); }

/* entrada do topo da página, sem esperar pelo scroll */
@keyframes cnm-subir { from { opacity: 0; translate: 0 .3rem; } }
@keyframes cnm-descer { from { opacity: 0; translate: 0 -.2rem; } }
@keyframes cnm-surgir { from { opacity: 0; scale: 1.04; } }
.anima .topo { animation: cnm-descer .8s var(--suave) both; }
.anima .hero-conteudo > * { animation: cnm-subir 1s var(--suave) both; }
.anima .hero-conteudo > :nth-child(2) { animation-delay: .12s; }
.anima .hero-conteudo > :nth-child(3) { animation-delay: .24s; }
.anima .hero-conteudo > :nth-child(4) { animation-delay: .36s; }
.anima .hero-imagem { animation: cnm-surgir 1.4s var(--suave) .15s both; }

/* elementos que aparecem ao entrar no ecrã (o main.js marca-os e escalona os atrasos) */
.anima [data-revelar] {
  opacity: 0;
  transition:
    opacity .9s var(--suave) var(--atraso, 0s),
    translate .9s var(--suave) var(--atraso, 0s),
    scale .9s var(--suave) var(--atraso, 0s),
    filter .2s, transform .2s;
}
.anima [data-revelar="subir"] { translate: 0 .36rem; }
.anima [data-revelar="esquerda"] { translate: -.3rem 0; }
.anima [data-revelar="direita"] { translate: .4rem 0; }
.anima [data-revelar="escala"] { scale: .9; }
.anima [data-revelar="linha"] { opacity: 1; scale: 0 1; transform-origin: left center; transition-duration: 1.2s; }
.anima [data-revelar="trilho"] { opacity: 1; }
.anima [data-revelar].visivel { opacity: 1; translate: none; scale: none; }

/* a linha da agenda desenha-se de cima para baixo */
.anima .agenda::before { scale: 1 0; transform-origin: center top; transition: scale 1.4s var(--suave) .15s; }
.anima .agenda.visivel::before { scale: none; }

/* anéis e foto do topo: deslocação suave com o scroll (o main.js escreve translate e rotate).
   «transform» é o pedido que todos os motores, incluindo o Safari, entendem para pôr o
   elemento numa camada própria da placa gráfica, sem redesenhar o SVG a cada passo. */
.anima .aneis, .anima .hero-imagem { will-change: transform; }