/* =====================================================================
   ESTILO DOS ARTIGOS - Instituto Boldrin
   Mesmo sistema visual do site: fundo escuro, cards com borda,
   uma cor por artigo, placa metalica no titulo.

   COMO MUDAR A COR DE UM ARTIGO:
   no arquivo do artigo, na tag <body>, troque a classe:
   cor-ciano / cor-roxo / cor-verde / cor-ambar / cor-rosa / cor-azul
   ===================================================================== */

:root{
  --bg:      #0a0d11;
  --bg-2:    #0f1318;
  --plate:   #171c22;
  --plate-2: #1f252d;
  --rivet:   #3a4149;
  --line:    #2a3038;
  --text:    #e7ecf1;
  --muted:   #8b96a3;
  --cyan:    #2fe4d6;
  --purple:  #a06bff;
  --green:   #4dff9e;
  --amber:   #ffb84d;
  --sec:     var(--cyan);
  --secGlow: rgba(47,228,214,0.18);
}

/* cores por artigo */
.cor-ciano { --sec: #2fe4d6; --secGlow: rgba(47,228,214,0.18); }
.cor-roxo  { --sec: #a06bff; --secGlow: rgba(160,107,255,0.18); }
.cor-verde { --sec: #4dff9e; --secGlow: rgba(77,255,158,0.15); }
.cor-ambar { --sec: #ffb84d; --secGlow: rgba(255,184,77,0.16); }
.cor-rosa  { --sec: #ff5d8f; --secGlow: rgba(255,93,143,0.16); }
.cor-azul  { --sec: #4da3ff; --secGlow: rgba(77,163,255,0.16); }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  background:
    radial-gradient(circle at 15% 8%,  rgba(47,228,214,0.05), transparent 40%),
    radial-gradient(circle at 85% 26%, rgba(160,107,255,0.06), transparent 45%),
    var(--bg);
  color: var(--text);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:'Rajdhani', system-ui, sans-serif; letter-spacing:0.02em; line-height:1.25; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
*, *::before, *::after { min-width:0; }
p, li, h1, h2, h3 { overflow-wrap:break-word; }

.wrap{ max-width:820px; margin:0 auto; padding:0 24px; }
.wrap-largo{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* --- BARRA DO TOPO --------------------------------------------------- */

nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,13,17,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .wrap-largo{ display:flex; align-items:center; gap:16px; padding-top:10px; padding-bottom:10px; }
.nav-voltar{
  flex:1 1 auto; font-family:'Rajdhani',sans-serif; font-weight:600;
  font-size:14.5px; color:var(--muted); display:inline-flex; align-items:center; gap:8px;
}
.nav-voltar:hover{ color:var(--sec); }
.nav-cta{
  flex:0 0 auto; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:0.05em; text-transform:uppercase; padding:9px 20px; border-radius:99px;
  color:#06231f; background:linear-gradient(135deg,#2fe4d6,#14c9bd);
  border:1px solid #2fe4d6; box-shadow:0 0 20px rgba(47,228,214,0.28);
}

/* --- CABECALHO DO ARTIGO --------------------------------------------- */

.artigo-topo{ padding:64px 0 40px; text-align:center; }

.eyebrow{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:12px;
  letter-spacing:0.25em; text-transform:uppercase; color:var(--sec);
  padding:6px 14px; border:1px solid var(--sec); border-radius:99px;
  background:rgba(255,255,255,0.02); box-shadow:0 0 18px var(--secGlow); margin-bottom:22px;
}

.artigo-topo h1{ font-size:clamp(30px, 6vw, 48px); font-weight:700; margin-bottom:18px; }

.artigo-topo h1::after{
  content:""; display:block; width:64px; height:3px; margin:18px auto 0;
  border-radius:3px; background:var(--sec); box-shadow:0 0 14px var(--sec);
}

.lead{ font-size:clamp(16px, 2.4vw, 19px); color:var(--muted); max-width:640px; margin:0 auto; }

/* --- IMAGEM DE CAPA --------------------------------------------------
   TROQUE A IMAGEM aqui no HTML: <img src="..."> dentro de .capa       */

.capa{
  margin:40px auto 0; max-width:1000px; padding:0 24px;
}
.capa img{
  width:100%; border-radius:18px; border:1px solid var(--line);
  box-shadow:0 0 34px var(--secGlow), 0 22px 44px rgba(0,0,0,0.45);
}
.capa figcaption{
  text-align:center; font-size:13px; color:var(--muted); margin-top:12px;
}

/* placeholder enquanto nao ha imagem */
.capa-vazia{
  width:100%; aspect-ratio:16/7; border-radius:18px;
  border:1px dashed color-mix(in srgb, var(--sec) 45%, transparent);
  background:
    radial-gradient(ellipse at 50% 40%, var(--secGlow), transparent 65%),
    linear-gradient(160deg, #171c22, #0d1013);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:13px; padding:24px;
}

/* --- CORPO DO ARTIGO -------------------------------------------------- */

.artigo{ padding:56px 0 40px; }
.artigo h2{ font-size:clamp(22px, 4vw, 30px); margin:48px 0 6px; color:var(--text); }
.artigo h2:first-child{ margin-top:0; }

.artigo h2 .num{
  display:inline-block; min-width:34px; height:34px; line-height:32px; text-align:center;
  border-radius:10px; border:1px solid var(--sec); color:var(--sec);
  font-family:'IBM Plex Mono',monospace; font-size:15px; margin-right:12px;
  box-shadow:0 0 16px var(--secGlow); vertical-align:middle;
}

.artigo h3{ font-size:19px; margin:28px 0 4px; color:var(--sec); }
.artigo p{ margin:14px 0; }
.artigo ul{ margin:14px 0 14px 22px; }
.artigo li{ margin:8px 0; }
.artigo strong{ color:#fff; }

/* --- CARDS ------------------------------------------------------------ */

.cards{
  display:grid; gap:20px; margin:28px 0;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.card{
  padding:24px; border-radius:16px;
  background:linear-gradient(160deg, #171c22 0%, #0d1013 100%);
  border:1px solid color-mix(in srgb, var(--sec) 45%, transparent);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 24px var(--secGlow),
    0 14px 28px rgba(0,0,0,0.38);
}
.card h4{ font-size:17px; color:var(--sec); margin-bottom:8px; }
.card p{ font-size:15px; color:var(--muted); margin:6px 0 0; }

/* destaque / citacao */
.destaque{
  margin:32px 0; padding:22px 26px; border-radius:14px;
  border-left:3px solid var(--sec);
  background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  font-size:17px;
}

/* --- AVISO LEGAL (obrigatorio em todo artigo de saude) ---------------- */

.aviso{
  margin:44px 0 0; padding:22px 24px; border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,0.02);
  font-size:14.5px; color:var(--muted);
}
.aviso strong{ color:var(--text); }
.aviso a{ color:var(--cyan); text-decoration:underline; }

/* --- CHAMADA FINAL ---------------------------------------------------- */

.cta{
  margin:56px 0 0; padding:40px 32px; border-radius:20px; text-align:center;
  background:linear-gradient(160deg, #171c22 0%, #0d1013 100%);
  border:1px solid color-mix(in srgb, var(--sec) 50%, transparent);
  box-shadow:0 0 34px var(--secGlow), 0 18px 36px rgba(0,0,0,0.4);
}
.cta h3{ font-size:clamp(20px,3.4vw,26px); color:var(--text); margin-bottom:10px; }
.cta p{ color:var(--muted); max-width:520px; margin:0 auto 24px; }
.btn{
  display:inline-block; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px;
  letter-spacing:0.05em; text-transform:uppercase; padding:14px 32px; border-radius:99px;
  color:#06231f; background:linear-gradient(135deg,#2fe4d6,#14c9bd);
  border:1px solid #2fe4d6; box-shadow:0 0 24px rgba(47,228,214,0.3);
}

/* --- OUTROS ARTIGOS --------------------------------------------------- */

.mais-artigos{ padding:60px 0 20px; border-top:1px solid var(--line); margin-top:60px; }
.mais-artigos h3{ font-size:20px; text-align:center; margin-bottom:26px; color:var(--muted); }
.lista-artigos{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.lista-artigos a{
  padding:20px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(160deg,#171c22,#0d1013); transition:border-color .15s ease, transform .15s ease;
}
.lista-artigos a:hover{ border-color:var(--sec); transform:translateY(-2px); }
.lista-artigos b{ display:block; font-family:'Rajdhani',sans-serif; font-size:17px; margin-bottom:4px; }
.lista-artigos span{ font-size:13.5px; color:var(--muted); }

/* --- RODAPE ----------------------------------------------------------- */

footer{
  margin-top:70px; padding:34px 0; border-top:1px solid var(--line);
  text-align:center; color:var(--muted); font-size:13.5px; line-height:2;
}
footer a{ color:var(--cyan); }

/* --- CELULAR ---------------------------------------------------------- */

@media (max-width:720px){
  .artigo-topo{ padding:40px 0 28px; }
  .artigo{ padding:36px 0 28px; }
  .artigo h2{ margin-top:36px; }
  .card{ padding:20px; }
  .cta{ padding:30px 22px; }
  .capa{ padding:0 16px; }
  .wrap{ padding:0 18px; }
  nav .wrap-largo{ padding-left:16px; padding-right:16px; }
  .nav-cta{ padding:8px 16px; font-size:13px; }
}


/* =====================================================================
   ESTILO DOS MAPAS MENTAIS - v2 azul + relevo - 24/08/2026

   O que define o estilo:
     1. fundo AZUL-NOITE aveludado, claro no centro e escuro nas bordas
        (sem grade, sem textura)
     2. acento DOURADO nas molduras e nos titulos
     3. cards com a COR CHEIA (nao so contorno) e RELEVO 3D:
        brilho no topo, sombra interna embaixo, sombra projetada e
        um apoio eliptico no chao - e isso que da profundidade
     4. titulo da secao dentro de uma PLACA com moldura dourada
     5. capsula de resumo abaixo do titulo e faixa dourada no fim

   ONDE MEXER:
     --azul-*  = a cor de fundo
     --ouro    = a cor das molduras
     --relevo  = liga/desliga a profundidade (ver secao 3)
   ===================================================================== */

:root{
  /* --- o azul-noite --- */
  --azul-topo:  #16457f;   /* o brilho do centro */
  --azul-1:     #0c2a52;
  --azul-2:     #081e3d;
  --azul-3:     #05132a;   /* as bordas */

  /* --- o dourado das molduras --- */
  --ouro:      #f0b52e;
  --ouro-2:    #c98f18;
  --ouro-luz:  rgba(240,181,46,0.22);

  /* --- superficies --- */
  --bg:      var(--azul-2);
  --bg-2:    var(--azul-3);
  --plate:   #123156;
  --plate-2: #1a4275;
  --line:    #2a5c96;
  --rivet:   #4a83c4;
  --text:    #eef5ff;
  --muted:   #b3c8e4;

  --sec:     var(--ouro);
  --secGlow: var(--ouro-luz);
}

/* --- 1. O FUNDO -------------------------------------------------------
   Brilho suave no centro-alto, escurecendo para as bordas.             */

body{
  background:
    radial-gradient(ellipse 88% 58% at 50% 18%, var(--azul-topo) 0%, rgba(22,69,127,0) 66%),
    radial-gradient(ellipse 72% 48% at 50% 96%, #10345e 0%, rgba(16,52,94,0) 72%),
    linear-gradient(180deg, var(--azul-1) 0%, var(--azul-2) 52%, var(--azul-3) 100%);
  background-attachment: fixed;
  color: var(--text);
}

section{ background: transparent !important; position: relative; }

section::after{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(ellipse 62% 72% at 50% 38%,
              rgba(240,181,46,0.05), transparent 70%);
}

#mente5d, #empresas, #comunidade, #duvidas, #fundamentacao{
  background-size: cover !important;
  background-position: center !important;
}
#mente5d::before, #empresas::before, #comunidade::before,
#duvidas::before, #fundamentacao::before{
  background:
    radial-gradient(ellipse at 50% 28%, rgba(18,49,86,0.60), rgba(5,19,42,0.90) 72%),
    linear-gradient(180deg, rgba(8,30,61,0.76), rgba(5,19,42,0.90));
}


/* --- 2. A PLACA DO TITULO --------------------------------------------- */

.section-head{ max-width: 780px; }

.section-head h2{
  display: inline-block;
  padding: 16px 40px 18px;
  border-radius: 20px;
  border: 2px solid var(--ouro);
  background: linear-gradient(180deg, #1a4275 0%, #0b2247 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.16),
    inset 0 -4px 10px rgba(0,0,0,0.38),
    0 0 36px var(--ouro-luz),
    0 20px 38px -10px rgba(0,0,0,0.62);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
}

/* o apoio no chao, embaixo da placa */
.section-head h2::after{
  content:"";
  display:block;
  width: 76%;
  height: 12px;
  margin: 18px auto -28px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, rgba(240,181,46,0.16) 45%, transparent 74%);
  box-shadow: none;
}

.section-head p{
  display: inline-block;
  margin: 36px auto 0;
  padding: 11px 26px;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--ouro) 45%, transparent);
  background: linear-gradient(180deg, rgba(26,66,117,0.72), rgba(8,30,61,0.80));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 16px rgba(0,0,0,0.32);
  color: var(--muted);
  font-size: 15px;
}

.section-head .eyebrow,
.eyebrow{
  border: 1px solid var(--ouro);
  color: var(--ouro);
  background: linear-gradient(180deg, rgba(26,66,117,0.80), rgba(8,30,61,0.85));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 20px var(--ouro-luz);
  font-weight: 500;
}


/* --- 3. OS CARDS: COR CHEIA E RELEVO ----------------------------------
   E aqui que mora a profundidade. Cada card tem quatro camadas:
     brilho no topo  -> parece que a luz bate de cima
     sombra interna embaixo -> da espessura
     halo colorido   -> a cor "vaza" e vibra
     sombra + apoio  -> o card flutua sobre o fundo

   PARA DEIXAR MAIS CHAPADO: apague o bloco box-shadow e o ::after.    */

.theme-card,
.credencial-card,
.biblio-card,
.artigo-card,
.elogio-item{
  position: relative;
  border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--tc, var(--ouro)) 88%, #ffffff 12%);

  /* a cor cheia, com degrade de cima para baixo */
  background:
    linear-gradient(178deg,
      color-mix(in srgb, var(--tc, var(--ouro)) 34%, #0d2b52) 0%,
      color-mix(in srgb, var(--tc, var(--ouro)) 18%, #081e3d) 62%,
      color-mix(in srgb, var(--tc, var(--ouro)) 10%, #05132a) 100%);

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    inset 0 -5px 12px rgba(0,0,0,0.42),
    0 0 30px color-mix(in srgb, var(--tc, var(--ouro)) 26%, transparent),
    0 20px 34px -10px rgba(0,0,0,0.62);

  transition: transform .2s ease, box-shadow .2s ease;
}

/* o apoio eliptico embaixo de cada card */
.theme-card::after,
.artigo-card::after,
.credencial-card::after{
  content:"";
  position:absolute; left:9%; right:9%; bottom:-15px; height:18px;
  border-radius: 50%;
  background: radial-gradient(ellipse,
              color-mix(in srgb, var(--tc, var(--ouro)) 26%, rgba(0,0,0,0.55)) 0%,
              transparent 72%);
  filter: blur(5px);
  pointer-events: none;
  z-index: -1;
}

.theme-card:hover,
.artigo-card:hover{
  transform: translateY(-5px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.34),
    inset 0 -5px 12px rgba(0,0,0,0.42),
    0 0 42px color-mix(in srgb, var(--tc, var(--ouro)) 40%, transparent),
    0 28px 42px -10px rgba(0,0,0,0.68);
}

/* titulo do card: maiusculas, cor viva, com um leve relevo no texto */
.theme-card h3,
.theme-card h4,
.credencial-card h3,
.artigo-card h3{
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: color-mix(in srgb, var(--tc, var(--ouro)) 62%, #ffffff);
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}

/* texto do corpo precisa clarear, porque agora o fundo do card tem cor */
.theme-card p,
.credencial-card p,
.artigo-card p,
.biblio-card p,
.elogio-item p{ color: #d8e6f8; }

.theme-card:not([class*="theme-"]),
.credencial-card,
.biblio-card{ --tc: var(--ouro); }


/* --- 4. A FAIXA DE FECHAMENTO ----------------------------------------- */

.faixa-ideia{
  max-width: 900px;
  margin: 56px auto 0;
  padding: 17px 30px;
  border-radius: 99px;
  border: 2px solid var(--ouro);
  background: linear-gradient(180deg, #1a4275 0%, #0b2247 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.16),
    inset 0 -4px 10px rgba(0,0,0,0.38),
    0 0 30px var(--ouro-luz),
    0 16px 30px -8px rgba(0,0,0,0.5);
  text-align: center;
  color: var(--text);
  font-size: 16px;
}
.faixa-ideia strong{
  color: var(--ouro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 8px;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}


/* --- 5. BOTOES E BARRA DO TOPO ---------------------------------------- */

.nav-cta,
.btn,
.btn-primario,
a.cta,
button.cta{
  background: linear-gradient(180deg, #ffd469 0%, var(--ouro) 45%, var(--ouro-2) 100%);
  border: 1px solid #ffd469;
  color: #2a1c05;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -3px 6px rgba(0,0,0,0.20),
    0 0 24px var(--ouro-luz),
    0 8px 16px -3px rgba(0,0,0,0.42);
}
.nav-cta:hover, .btn:hover{ filter: brightness(1.08); }

nav{
  background: rgba(8,30,61,0.88);
  border-bottom: 1px solid var(--line);
}
.nav-links a:hover,
.nav-more:hover{ color: var(--ouro); }
.nav-panel{ background: rgba(8,30,61,0.97); border-bottom: 1px solid var(--line); }


/* --- 6. AS IMAGENS: mais vivas e com profundidade ---------------------
   Nos mapas as ilustracoes sao saturadas e destacam do fundo.         */

section img,
.galeria img,
.capa img{
  border-radius: 16px;
  filter: saturate(1.14) contrast(1.06);
  box-shadow:
    0 0 34px rgba(22,69,127,0.55),
    0 22px 40px -12px rgba(0,0,0,0.66);
}


/* --- 7. LEITURA -------------------------------------------------------- */

a{ color: inherit; }
.artigo strong, .card strong{ color: #fff; }
.destaque{ border-left-color: var(--ouro); }
footer{ border-top: 1px solid var(--line); color: var(--muted); }


/* --- 8. CELULAR -------------------------------------------------------- */

@media (max-width: 720px){
  .section-head h2{ padding: 12px 20px 14px; border-radius: 16px; }
  .section-head p{ padding: 10px 18px; font-size: 14px; margin-top: 32px; }
  .faixa-ideia{ padding: 14px 20px; border-radius: 20px; font-size: 15px; }
  .theme-card, .credencial-card, .artigo-card{ border-width: 1.5px; border-radius: 15px; }
  /* no celular o apoio no chao encosta no card de baixo - encolhe */
  .theme-card::after, .artigo-card::after, .credencial-card::after{ bottom:-10px; height:12px; }
}

/* --- ARTIGOS: mesmas regras aplicadas nos elementos dos artigos ------- */

.artigo-topo h1{
  display: inline-block;
  padding: 16px 40px 18px;
  border-radius: 20px;
  border: 2px solid var(--ouro);
  background: linear-gradient(180deg, #1a4275, #0b2247);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
              0 0 34px var(--ouro-luz), 0 16px 34px rgba(0,0,0,0.48);
  text-transform: uppercase; letter-spacing: 0.03em; color: #fff;
}
.artigo-topo h1::after{
  width: 74%; height: 10px; margin: 16px auto -22px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240,181,46,0.30), transparent 72%);
  box-shadow: none;
}
.lead{
  display: inline-block; margin-top: 32px; padding: 11px 26px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--ouro) 45%, transparent);
  background: rgba(8,30,61,0.72);
}
.artigo h2 .num{
  border: 2px solid var(--ouro); color: var(--ouro);
  background: rgba(8,30,61,0.7); box-shadow: 0 0 16px var(--ouro-luz);
}
.artigo h3{ color: var(--ouro); text-transform: uppercase; letter-spacing: 0.03em; font-size: 17px; }
.card{
  border: 2px solid color-mix(in srgb, var(--sec) 78%, transparent);
  background: linear-gradient(165deg, rgba(26,66,117,0.86), rgba(8,30,61,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07),
              0 0 22px color-mix(in srgb, var(--sec) 18%, transparent),
              0 14px 26px rgba(0,0,0,0.42);
}
.card h4{ text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.capa img, .capa-vazia{ border: 2px solid color-mix(in srgb, var(--ouro) 55%, transparent); }
.cta{
  border: 2px solid var(--ouro);
  background: linear-gradient(165deg, rgba(26,66,117,0.88), rgba(8,30,61,0.95));
  box-shadow: 0 0 34px var(--ouro-luz), 0 18px 36px rgba(0,0,0,0.45);
}
.aviso{ border: 1px solid var(--line); background: rgba(8,30,61,0.6); }
.mais-artigos .lista-artigos a{
  border: 2px solid color-mix(in srgb, var(--ouro) 55%, transparent);
  background: linear-gradient(165deg, rgba(26,66,117,0.82), rgba(8,30,61,0.92));
}
.nav-voltar:hover{ color: var(--ouro); }

@media (max-width: 720px){
  .artigo-topo h1{ padding: 12px 20px 14px; border-radius: 16px; }
  .lead{ padding: 10px 18px; font-size: 14px; }
}