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

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

:root{
  --rosa: #E5338A;
  --rosa-deep: #B8135E;
  --rosa-claro: #F58CC0;
  --rosa-soft: #FDE8F2;
  --rosa-borda: #F6CFE2;
}

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

html.outubro-rosa .or-only{ display:block; }
html.outubro-rosa .or-hide{ display:none; }
html.outubro-rosa ::selection{ background:#F9C6DE; color:#4A0E26; }

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

/* =========================================================
   1) Faixa de anúncio no topo
   ========================================================= */
html.outubro-rosa .or-bar{
  display:block; position:relative; overflow:hidden;
  color:#fff; font-size:.86rem; font-weight:600;
  background:linear-gradient(90deg,#B8135E 0%,#D6247F 35%,#E0388E 50%,#D6247F 65%,#B8135E 100%);
  background-size:200% 100%;
  animation:or-sheen 10s ease-in-out infinite;
}
.or-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;
}
.or-bar .or-ico{ color:#fff; }
.or-bar-msg b{
  font-family:var(--f-display); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-right:4px;
}
.or-bar-link{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.or-bar a:hover .or-bar-link{ text-decoration-thickness:2px; }

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

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

/* =========================================================
   3) Acabamentos que aparecem em todas as páginas
   ========================================================= */
html.outubro-rosa nav.links a.active::after{ background:linear-gradient(90deg,#E5338A,#7C1F2E); }
html.outubro-rosa .eyebrow::before{ background:linear-gradient(135deg,#E5338A,#7C1F2E); }
html.outubro-rosa .page-hero{
  background:linear-gradient(180deg,#FFF1F7 0%, var(--mist) 100%);
  border-bottom:1px solid #F8D6E6;
}
html.outubro-rosa footer{ position:relative; }
html.outubro-rosa footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,#F58CC0,#E5338A,#B8135E,#7C1F2E);
}

/* =========================================================
   4) HOME — destaque do topo (hero)
   ========================================================= */
html.outubro-rosa .hero{
  background:
    radial-gradient(760px 520px at 88% 36%, rgba(245,140,192,.30), rgba(245,140,192,0) 65%),
    radial-gradient(560px 380px at -4% 66%, rgba(229,51,138,.09), rgba(229,51,138,0) 62%);
}
html.outubro-rosa .hero h1 .hl{
  background:linear-gradient(100deg,#E5338A 0%,#B8135E 55%,#7C1F2E 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

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

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

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

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

/* selo discreto sobre a foto da fachada */
.or-photo{ position:relative; }
html.outubro-rosa .or-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,#D6247F,#A3155A);
  font-family:var(--f-display); font-weight:700; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  box-shadow:0 10px 22px -8px rgba(163,21,90,.7);
}
.or-sticker .or-ico{ width:11px; height:15px; color:#fff; }

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

.or-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,#4A0E26 0%,#8B1450 46%,#D6247F 100%);
  box-shadow:0 34px 64px -34px rgba(139,20,80,.65);
}
.or-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);
}
.or-panel::after{
  content:""; position:absolute; z-index:-1; left:-90px; bottom:-130px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,140,192,.30), rgba(245,140,192,0) 70%);
}
.or-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:#FFD3E8;
}
.or-kicker .or-ico{ width:12px; height:16px; color:#FFB3D7; }
.or-panel h2{ color:#fff; font-size:clamp(2rem,4vw,3.1rem); margin:12px 0 14px; text-wrap:balance; }
.or-panel p{ color:rgba(255,255,255,.9); font-size:1.04rem; max-width:56ch; margin-bottom:0; }
.or-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.or-btn-light{ background:#fff; color:#A3155A; }
.or-btn-light:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(0,0,0,.45); }
.or-btn-ghost{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.or-btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.or-panel-art{ position:relative; display:flex; align-items:center; justify-content:center; min-height:300px; }
.or-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%);
}
.or-panel-art img{
  position:relative; width:min(260px,62%); height:auto;
  filter:drop-shadow(0 24px 36px rgba(60,0,30,.45));
  animation:or-bob 6.5s ease-in-out infinite;
}

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

.or-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(--rosa-soft); border:1px solid var(--rosa-borda);
  color:var(--ink); font-size:.95rem;
}
.or-strip b{ color:var(--rosa-deep); }
.or-strip a{ font-weight:700; color:var(--rosa-deep); white-space:nowrap; }
.or-strip a:hover{ text-decoration:underline; text-underline-offset:3px; }

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

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