/* =========================================================
   NOVEMBRO AZUL — tema sazonal do Hospital São Judas
   ---------------------------------------------------------
   Liga SOZINHO em novembro e desliga em dezembro (o controle
   está no pequeno <script> dentro do <head> de cada página).
   Fora de novembro, nada daqui aparece: o site fica igual.

   Para testar fora de novembro, acrescente ao endereço da página:
     ?novembroazul=1   (liga)      ?novembroazul=0   (desliga)
   ========================================================= */

:root{
  --azul: #1E6FD9;
  --azul-deep: #0B4AA8;
  --azul-claro: #8CBCFF;
  --azul-soft: #E9F2FF;
  --azul-borda: #CFE1F8;
}

/* ---- Tudo que é da campanha começa escondido ---- */
.na-only, .na-bar, .na-pin, .na-pill-row, .na-chip, .na-sticker{ display:none; }

html.novembro-azul .na-only{ display:block; }
html.novembro-azul .na-hide{ display:none; }
html.novembro-azul ::selection{ background:#BBD7FA; color:#06214D; }

/* ---- Laço (ícone desenhado via <symbol>, herda a cor do texto) ---- */
.na-ico{ display:inline-block; flex-shrink:0; width:14px; height:19px; }

/* =========================================================
   1) Faixa de anúncio no topo
   ========================================================= */
html.novembro-azul .na-bar{
  display:block; position:relative; overflow:hidden;
  color:#fff; font-size:.86rem; font-weight:600;
  background:linear-gradient(90deg,#0B4AA8 0%,#2A7DE8 35%,#3A8CF0 50%,#2A7DE8 65%,#0B4AA8 100%);
  background-size:200% 100%;
  animation:na-sheen 10s ease-in-out infinite;
}
.na-bar a{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px 10px; padding:9px var(--gutter); color:#fff; text-align:center; line-height:1.35;
}
.na-bar .na-ico{ color:#fff; }
.na-bar-msg b{
  font-family:var(--f-display); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-right:4px;
}
.na-bar-link{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.na-bar a:hover .na-bar-link{ text-decoration-thickness:2px; }

@keyframes na-sheen{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* =========================================================
   2) Laço ao lado da logo (todas as páginas)
   ========================================================= */
html.novembro-azul .logo{ position:relative; }
html.novembro-azul .na-pin{
  display:block; position:absolute; top:2px; right:4px; width:19px; height:26px;
  background:url("img/laco-azul.svg") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(11,74,168,.35));
  pointer-events:none;
}

/* =========================================================
   3) Acabamentos que aparecem em todas as páginas
   ========================================================= */
html.novembro-azul nav.links a.active::after{ background:linear-gradient(90deg,#1E6FD9,#07306F); }
html.novembro-azul .eyebrow::before{ background:linear-gradient(135deg,#1E6FD9,#07306F); }
html.novembro-azul .page-hero{
  background:linear-gradient(180deg,#EFF6FF 0%, var(--mist) 100%);
  border-bottom:1px solid #D3E3F7;
}
html.novembro-azul footer{ position:relative; }
html.novembro-azul footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,#8CBCFF,#1E6FD9,#0B4AA8,#07306F);
}

/* =========================================================
   4) HOME — destaque do topo (hero)
   ========================================================= */
html.novembro-azul .hero{
  background:
    radial-gradient(760px 520px at 88% 36%, rgba(140,188,255,.30), rgba(140,188,255,0) 65%),
    radial-gradient(560px 380px at -4% 66%, rgba(30,111,217,.09), rgba(30,111,217,0) 62%);
}
html.novembro-azul .hero h1 .hl{
  background:linear-gradient(100deg,#1E6FD9 0%,#0B4AA8 55%,#07306F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

html.novembro-azul .na-pill-row{ display:block; margin-bottom:14px; }
.na-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 12px; border-radius:999px;
  background:var(--azul-soft); border:1px solid var(--azul-borda); color:var(--azul-deep);
  font-family:var(--f-display); font-weight:700; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
}
.na-pill .na-ico{ width:11px; height:15px; color:var(--azul); }

html.novembro-azul .care-ring-wrap{ position:relative; width:100%; max-width:480px; margin:0 auto; }
html.novembro-azul .na-chip{
  display:block; position:absolute; z-index:2;
  padding:12px 18px 13px; border-radius:16px; color:#fff;
  background:linear-gradient(135deg,#2A7DE8,#0B3C8F);
  box-shadow:0 16px 32px -12px rgba(11,60,143,.6);
  animation:na-bob 6.5s ease-in-out infinite;
}
.na-chip small{
  display:block; font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.92;
}
.na-chip b{ display:block; font-family:var(--f-display); font-size:1.05rem; line-height:1.25; margin-top:2px; }
.na-chip-a{ top:7%; left:0; }
.na-chip-b{ bottom:9%; left:3%; animation-delay:-3.2s; }

.na-ring{ transform-box:fill-box; transform-origin:center; animation:na-pulse 5.5s ease-in-out infinite; }
.na-ring.r2{ animation-delay:-1.8s; }
.na-ring.r3{ animation-delay:-3.6s; }
.na-hero-ribbon{ animation:na-bob 6.5s ease-in-out infinite; }

@keyframes na-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.05); opacity:.5; } }
@keyframes na-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* selo discreto sobre a foto da fachada */
.na-photo{ position:relative; }
html.novembro-azul .na-sticker{
  display:inline-flex; align-items:center; gap:8px; position:absolute; left:16px; bottom:16px;
  padding:8px 14px 8px 12px; border-radius:999px; color:#fff;
  background:linear-gradient(135deg,#2A7DE8,#0B3C8F);
  font-family:var(--f-display); font-weight:700; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  box-shadow:0 10px 22px -8px rgba(11,60,143,.7);
}
.na-sticker .na-ico{ width:11px; height:15px; color:#fff; }

/* =========================================================
   5) HOME — seção da campanha
   ========================================================= */
.na-section{ padding:8px 0 84px; scroll-margin-top:110px; }

.na-panel{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center;
  padding:clamp(34px,5vw,60px) clamp(24px,5vw,64px);
  border-radius:28px; color:#fff;
  background:linear-gradient(125deg,#06214D 0%,#0B3F95 46%,#2A7DE8 100%);
  box-shadow:0 34px 64px -34px rgba(11,63,149,.65);
}
.na-panel::before{
  content:""; position:absolute; z-index:-1; right:-140px; top:-140px; width:560px; height:560px; border-radius:50%;
  border:2px solid rgba(255,255,255,.13);
  box-shadow:0 0 0 56px rgba(255,255,255,.035), 0 0 0 112px rgba(255,255,255,.03);
}
.na-panel::after{
  content:""; position:absolute; z-index:-1; left:-90px; bottom:-130px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(140,188,255,.30), rgba(140,188,255,0) 70%);
}
.na-kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-display); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#CFE3FF;
}
.na-kicker .na-ico{ width:12px; height:16px; color:#9CC7FF; }
.na-panel h2{ color:#fff; font-size:clamp(2rem,4vw,3.1rem); margin:12px 0 14px; text-wrap:balance; }
.na-panel p{ color:rgba(255,255,255,.9); font-size:1.04rem; max-width:56ch; margin-bottom:0; }
.na-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.na-btn-light{ background:#fff; color:#0B3C8F; }
.na-btn-light:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(0,0,0,.45); }
.na-btn-ghost{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.na-btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.na-panel-art{ position:relative; display:flex; align-items:center; justify-content:center; min-height:300px; }
.na-panel-art::before{
  content:""; position:absolute; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.36), rgba(255,255,255,0) 66%);
}
.na-panel-art img{
  position:relative; width:min(260px,62%); height:auto;
  filter:drop-shadow(0 24px 36px rgba(0,20,60,.45));
  animation:na-bob 6.5s ease-in-out infinite;
}

.na-cards{ margin-top:26px; }
.na-card{
  background:#fff; border:1px solid var(--azul-borda); border-radius:16px; padding:26px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.na-card:hover{ transform:translateY(-3px); border-color:var(--azul); box-shadow:0 18px 34px -20px rgba(11,74,168,.45); }
.na-icon{
  width:46px; height:46px; border-radius:12px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--azul-soft); color:var(--azul-deep);
}
.na-icon svg{ width:22px; height:22px; }
.na-card h3{ margin-bottom:8px; }
.na-card p{ font-size:.94rem; margin:0; }

.na-strip{
  margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:14px 24px; flex-wrap:wrap;
  padding:18px 26px; border-radius:16px; background:var(--azul-soft); border:1px solid var(--azul-borda);
  color:var(--ink); font-size:.95rem;
}
.na-strip b{ color:var(--azul-deep); }
.na-strip a{ font-weight:700; color:var(--azul-deep); white-space:nowrap; }
.na-strip a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   6) Telas menores
   ========================================================= */
@media (max-width:900px){
  .na-panel{ grid-template-columns:1fr; gap:6px; }
  .na-panel-art{ order:-1; min-height:210px; }
  .na-panel-art::before{ width:240px; height:240px; }
  .na-panel-art img{ width:150px; }
  .na-chip{ padding:10px 14px 11px; }
  .na-chip b{ font-size:.95rem; }
}
@media (max-width:520px){
  .na-bar-link{ display:none; }
  .na-bar{ font-size:.82rem; }
  .na-section{ padding-bottom:64px; }
  .na-chip-a{ top:2%; }
  .na-chip-b{ bottom:4%; }
}

/* Quem prefere menos movimento no aparelho não vê animações */
@media (prefers-reduced-motion:reduce){
  .na-bar, .na-chip, .na-ring, .na-hero-ribbon, .na-panel-art img{ animation:none !important; }
}


/* =========================================================
   7) Extras exclusivos do Novembro Azul (bigode + brilho)
   ========================================================= */
.na-mustache{ display:inline-block; vertical-align:middle; }
.na-pill .na-mustache{ width:22px; height:9px; color:var(--azul); }
.na-kicker .na-mustache{ width:24px; height:10px; color:#9CC7FF; }
.na-sticker .na-mustache{ width:22px; height:9px; color:#fff; }
.na-bar .na-mustache{ width:22px; height:9px; color:#fff; }

/* selo redondo com bigode no canto da arte do painel */
.na-badge{
  position:absolute; right:-3%; bottom:2%; width:104px; height:104px; border-radius:50%;
  background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 20px 38px -14px rgba(0,20,60,.65), 0 0 0 6px rgba(255,255,255,.18);
  color:var(--azul-deep); text-align:center; animation:na-bob 6.5s ease-in-out infinite; animation-delay:-2s;
}
.na-badge .na-mustache{ width:58px; height:23px; color:var(--azul); }
.na-badge b{ font-family:var(--f-display); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.1; }

/* pontinhos de luz no painel */
.na-spark{ position:absolute; z-index:-1; border-radius:50%; background:rgba(255,255,255,.55); animation:na-twinkle 4.5s ease-in-out infinite; }
.na-spark.s1{ width:6px; height:6px; left:52%; top:16%; }
.na-spark.s2{ width:9px; height:9px; left:90%; top:62%; animation-delay:-1.4s; }
.na-spark.s3{ width:5px; height:5px; left:8%; top:78%; animation-delay:-2.6s; }
.na-spark.s4{ width:7px; height:7px; left:70%; top:10%; animation-delay:-3.4s; }
@keyframes na-twinkle{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.25); } }

/* faixa de números/lemas logo abaixo do painel */
.na-facts{ margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.na-fact{
  display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:16px;
  background:linear-gradient(135deg,#0B3F95,#1E6FD9); color:#fff;
  box-shadow:0 18px 34px -22px rgba(11,63,149,.8);
}
.na-fact b{ font-family:var(--f-display); font-size:1.7rem; line-height:1; }
.na-fact span{ font-size:.86rem; line-height:1.35; opacity:.95; }

@media (max-width:900px){
  .na-badge{ width:84px; height:84px; right:6%; bottom:0; }
  .na-badge .na-mustache{ width:46px; height:18px; }
  .na-facts{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .na-badge, .na-spark{ animation:none !important; }
}

/* Entre 901 e 1180px o menu fica apertado: o laço da logo sai para não encostar em "Início" */
@media (min-width:901px) and (max-width:1180px){
  html.novembro-azul .na-pin{ display:none; }
}