/*
 * outubro-rosa.css — Tema sazonal Outubro Rosa (change openspec/changes/outubro-rosa-site-20261021).
 *
 * Carregado em index.html e privacidade.html logo depois de styles.css. Só tem efeito com a classe
 * `outubro-rosa` no <html>, ligada pelo script inline do <head> (todo mês de outubro pela data local do
 * aparelho, ou por ?tema=outubro-rosa; ?tema=normal desliga). Fora do tema, o único efeito deste arquivo é
 * manter ocultos os elementos .rb-or-only.
 *
 * Reversível: remover o <link> deste arquivo e o script de ativação das duas páginas.
 */

/* ===== Elementos só do tema: ocultos por padrão (o atributo hidden basta; este bloco protege contra display:flex de outras camadas) ===== */
.rb-or-only[hidden] { display: none !important; }
html.outubro-rosa .rb-or-only[hidden] { display: inline-flex !important; }
html.outubro-rosa section.rb-or-only[hidden] { display: block !important; }
html.outubro-rosa .rb-drawer a.rb-or-only[hidden] { display: flex !important; }

/* ===== 1. Paleta (tokens usados pelas classes brand-* do Tailwind) ===== */
html.outubro-rosa {
  --rb-olive: 59 21 38;        /* #3B1526 bordô */
  --rb-velvet: 59 21 38;
  --rb-deep: 42 16 25;         /* #2A1019 */
  --rb-darkest: 31 11 19;      /* #1F0B13 */
  --rb-gold: 184 58 107;       /* #B83A6B rosa (acento) */
  --rb-gold-hover: 150 44 86;  /* #962C56 */
  --rb-camel: 201 138 160;     /* #C98AA0 */
  --rb-laurel: 212 154 174;    /* #D49AAE */
  --rb-sage: 201 141 162;      /* #C98DA2 */
  --rb-cornsilk: 251 241 244;  /* #FBF1F4 */
  --rb-light: 251 241 244;
  --rb-meringue: 244 198 212;  /* #F4C6D4 */
  --rb-sand: 247 230 236;      /* #F7E6EC */
  --rb-border: 239 201 214;    /* #EFC9D6 */
}

/* ===== 2. Cores fixas das camadas inline e de acento-laranja.css ===== */
/* texto de acento: fundo claro */
html.outubro-rosa .text-brand-gold { color: #8E3A5C; }
html.outubro-rosa #cuidados .text-brand-gold:not(.material-symbols-outlined),
html.outubro-rosa #autoridade .text-brand-gold:not(.material-symbols-outlined),
html.outubro-rosa #metodo .text-brand-gold:not(.material-symbols-outlined),
html.outubro-rosa #jeito-cuidar .text-brand-gold:not(.material-symbols-outlined),
html.outubro-rosa #faq .text-brand-gold:not(.material-symbols-outlined),
html.outubro-rosa #cuidados .text-brand-gold\/90,
html.outubro-rosa #metodo .text-brand-gold\/90,
html.outubro-rosa #jeito-cuidar .text-brand-gold\/90,
html.outubro-rosa #faq .text-brand-gold\/90 { color: #8E3A5C; }
html.outubro-rosa #cuidados .text-brand-camel,
html.outubro-rosa #autoridade .text-brand-camel,
html.outubro-rosa #metodo .text-brand-camel,
html.outubro-rosa #jeito-cuidar .text-brand-camel,
html.outubro-rosa #faq .text-brand-camel,
html.outubro-rosa header .text-brand-camel { color: #8E4A63; }
/* texto de acento: fundo escuro (contraste ≈ 7:1 sobre o bordô) */
html.outubro-rosa .bg-brand-deep .text-brand-gold,
html.outubro-rosa .bg-brand-olive .text-brand-gold,
html.outubro-rosa .bg-brand-darkest .text-brand-gold,
html.outubro-rosa .bg-brand-velvet .text-brand-gold,
html.outubro-rosa #online-modal-box .text-brand-gold,
html.outubro-rosa #telemedicina .text-brand-gold,
html.outubro-rosa #manifesto .text-brand-gold,
html.outubro-rosa footer .text-brand-gold,
html.outubro-rosa :is(#cuidados, #autoridade, #metodo, #jeito-cuidar, #faq) :is(.bg-brand-olive, .bg-brand-deep, .bg-brand-darkest, .bg-brand-velvet) .text-brand-gold:not(.material-symbols-outlined) { color: #F29BBB; }

/* gradientes com cor arbitrária (#telemedicina, cartão e modal) */
html.outubro-rosa .from-\[\#182417\] { --tw-gradient-from: #34121F var(--tw-gradient-from-position); --tw-gradient-to: rgba(52,18,31,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.outubro-rosa .via-\[\#1E2E1D\] { --tw-gradient-to: rgba(59,21,38,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #3B1526 var(--tw-gradient-via-position), var(--tw-gradient-to); }
html.outubro-rosa .to-\[\#141C13\] { --tw-gradient-to: #2A1019 var(--tw-gradient-to-position); }
html.outubro-rosa .via-\[\#1A2819\]\/90 { --tw-gradient-to: rgba(48,17,30,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(48,17,30,.9) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html.outubro-rosa .via-\[\#1B291A\] { --tw-gradient-to: rgba(50,18,32,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #321220 var(--tw-gradient-via-position), var(--tw-gradient-to); }

/* card de Campo Grande destacado pelo QR do cartão */
html.outubro-rosa [data-card="campo-grande"].cg-ativo { background-color: #3B1526 !important; border-color: #B83A6B !important; animation-name: orCgrRing; }
html.outubro-rosa [data-card="campo-grande"].cg-ativo .material-symbols-outlined,
html.outubro-rosa [data-card="campo-grande"].cg-ativo p { color: #FBF1F4 !important; }
@keyframes orCgrRing {
  0%   { box-shadow: 0 0 0 0 rgba(184,58,107,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(184,58,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,58,107,0); }
}

/* selo do hero e cartões */
html.outubro-rosa .lux-badge { background: linear-gradient(135deg, rgba(184,58,107,.12) 0%, rgba(251,241,244,.45) 100%); border-color: rgba(184,58,107,.35); }
html.outubro-rosa .lux-badge:hover { border-color: rgba(184,58,107,.7); box-shadow: 0 8px 20px -6px rgba(184,58,107,.25); }
html.outubro-rosa .card-hover-lift:hover { box-shadow: 0 22px 36px -12px rgba(59,21,38,.14); border-color: rgba(184,58,107,.55); }

/* camada rb-motion / rb-elegance / rb-fx */
html.outubro-rosa #rb-progress { background: linear-gradient(90deg, #B83A6B, #D49AAE); }
html.outubro-rosa #manifesto::before { background: repeating-radial-gradient(circle at 22% 28%, transparent 0 46px, rgba(244,198,212,.06) 46px 47px); }
html.outubro-rosa #cuidados [class*="border-brand-gold"] { border-color: rgba(94,36,60,.16) !important; }
html.outubro-rosa #cuidados .card-hover-lift:hover,
html.outubro-rosa #jeito-cuidar .card-hover-lift:hover { border-color: rgba(94,36,60,.3) !important; }
html.outubro-rosa #cuidados .bg-brand-gold { background: #6A2540 !important; color: #FBF1F4 !important; }
html.outubro-rosa #jeito-cuidar [class*="bg-brand-gold"] { background: #9A5A74 !important; }
html.outubro-rosa #jeito-cuidar [class*="border-brand-gold"] { border-color: rgba(94,36,60,.14) !important; }
html.outubro-rosa .rb-offset { background: #6A2540; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.outubro-rosa .rb-spot { background: radial-gradient(260px circle at var(--sx,50%) var(--sy,50%), rgba(184,58,107,.10), transparent 70%); }
}

/* menu hambúrguer e drawer */
html.outubro-rosa .rb-burger { color: #3B1526; border-color: rgba(142,58,92,.4); }
html.outubro-rosa .rb-burger:hover { border-color: #B83A6B; color: #B83A6B; }
html.outubro-rosa .rb-burger:focus-visible { outline-color: #B83A6B; }
html.outubro-rosa .rb-backdrop { background: rgba(42,16,25,.55); }
html.outubro-rosa .rb-drawer { background: #2A1019; color: #FBEEF2; }
html.outubro-rosa .rb-drawer .rb-d-top b,
html.outubro-rosa .rb-drawer .rb-x { color: #FBEEF2; }
html.outubro-rosa .rb-drawer .rb-x:hover { border-color: #F4C6D4; color: #F4C6D4; }
html.outubro-rosa .rb-drawer a.rb-lnk { color: #F4DCE4; }
html.outubro-rosa .rb-drawer a.rb-lnk:hover { color: #F4C6D4; }
html.outubro-rosa .rb-drawer .rb-cta .rb-a1 { background: #F4C6D4; color: #2A1019; }
html.outubro-rosa .rb-drawer .rb-cta .rb-a2 { color: #FBEEF2; border-color: rgba(244,198,212,.6); }
html.outubro-rosa .rb-drawer .rb-d-foot { color: rgba(251,238,242,.6); }

/* ===== 3. Elementos do tema ===== */
/* laço junto ao logo do cabeçalho (o wrapper do logo é position:relative) */
.or-lace-logo { position: absolute; right: -8px; bottom: -4px; width: 18px; height: 24px; color: #B83A6B; fill: currentColor; pointer-events: none; filter: drop-shadow(0 0 1.5px #fff); }
/* selo no hero */
.or-selo { align-items: center; align-self: flex-start; gap: .6rem; max-width: 100%; min-height: 44px; padding: .5rem 1.1rem; margin-bottom: 1.75rem; border-radius: 999px; border: 1px solid rgba(244,198,212,.55); background: #3B1526; color: #FBEEF2; font-size: .7rem; line-height: 1.4; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background-color .3s, border-color .3s; }
.or-selo:hover { background: #962C56; border-color: #F4C6D4; }
.or-selo:focus-visible { outline: 2px solid #B83A6B; outline-offset: 3px; }
.or-selo svg { flex: none; width: 14px; height: 19px; color: #F4C6D4; fill: currentColor; }
/* moldura rosa na foto do hero */
html.outubro-rosa #rb-hero-sec .portrait-frame { border: 3px solid #F4C6D4; }

/* seção #outubro-rosa */
.or-section { position: relative; overflow: hidden; background: #3B1526; color: #FBEEF2; }
.or-wrap { position: relative; z-index: 1; max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .or-wrap { padding: 0 2rem; } }
@media (min-width: 1024px) { .or-wrap { padding: 0 3rem; } }
.or-lace-big { position: absolute; right: -4%; top: -6%; width: clamp(200px, 32vw, 420px); height: auto; color: #F4C6D4; fill: currentColor; opacity: .08; pointer-events: none; z-index: 0; }
.or-eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: #F4C6D4; font-size: .75rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; }
.or-eyebrow svg { width: 14px; height: 19px; fill: currentColor; }
.or-title { margin: 1rem 0 0; max-width: 22ch; color: #FBEEF2; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.12; letter-spacing: -.01em; font-weight: 400; }
.or-title em { color: #F4C6D4; font-style: italic; }
.or-lead { margin: 1.25rem 0 0; max-width: 42rem; color: #EAD3DB; font-size: 1.0625rem; line-height: 1.7; }
.or-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.or-card { min-width: 0; padding: 1.5rem; border: 1px solid rgba(244,198,212,.3); border-radius: 22px; }
.or-num { display: block; color: #F4C6D4; font-size: 1.5rem; line-height: 1; }
.or-card h3 { margin: .9rem 0 0; color: #FBEEF2; font-size: 1.3rem; line-height: 1.25; font-weight: 500; }
.or-card p { margin: .7rem 0 0; color: #EAD3DB; font-size: .95rem; line-height: 1.65; }
.or-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.75rem; color: #F4C6D4; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.or-link:hover { color: #FBEEF2; }
.or-link:focus-visible { outline: 2px solid #F4C6D4; outline-offset: 3px; border-radius: 4px; }
.or-note { margin: .5rem 0 0; color: #EAD3DB; font-size: .8125rem; line-height: 1.5; }

/* cartão sobre a foto do hero: com o tema ligado, o cartão escuro (.rb-hero-id) dá lugar ao claro (.or-hero-card); CRM/RQE segue visível */
html.outubro-rosa .rb-hero-id { display: none; }
html.outubro-rosa .or-hero-card.rb-or-only[hidden] { display: flex !important; }
.or-hero-card { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; box-sizing: border-box; background: rgba(255,255,255,.97); border: 1px solid #F1CFDA; border-radius: 18px; box-shadow: 0 14px 34px rgba(90,30,54,.18); }
.or-hero-camp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.or-hero-lace { flex: none; width: 18px; height: 24px; }
.or-hero-txt, .or-hero-id { min-width: 0; }
.or-hero-t { margin: 0; font-family: 'Bodoni Moda', 'Playfair Display', serif; font-size: 16px; line-height: 1.2; font-weight: 500; color: #3B1526; }
.or-hero-camp .or-hero-t { color: #5A1E36; }
.or-hero-s, .or-hero-crm { margin: 2px 0 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; line-height: 1.4; color: #6B4A57; }
.or-hero-crm { font-weight: 500; letter-spacing: .08em; }
.or-hero-sep { flex: none; align-self: stretch; height: 1px; background: #F1CFDA; }
.or-hero-t, .or-hero-crm { white-space: nowrap; }
/* lado a lado só quando a moldura da foto comporta (a coluna do hero no desktop é mais estreita que a tela sugere) */
html.outubro-rosa #rb-hero-sec .portrait-frame { container-type: inline-size; }
@container (min-width: 450px) {
  .or-hero-card { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
  .or-hero-camp { gap: 10px; }
  .or-hero-lace { width: 20px; height: 27px; }
  .or-hero-t { font-size: 17px; }
  .or-hero-crm { letter-spacing: .04em; }
  .or-hero-sep { width: 1px; height: auto; align-self: stretch; }
}

/* barra de rolagem no tema (emenda 2): polegar #2A1019, trilho marfim rosado; mesma largura do site normal */
html.outubro-rosa::-webkit-scrollbar, html.outubro-rosa ::-webkit-scrollbar { width: 7px; }
html.outubro-rosa::-webkit-scrollbar-track, html.outubro-rosa ::-webkit-scrollbar-track { background: #FBF1F4; }
html.outubro-rosa::-webkit-scrollbar-thumb, html.outubro-rosa ::-webkit-scrollbar-thumb { background: #2A1019; border-radius: 4px; }
/* Firefox; no Chrome 121+ scrollbar-color anularia o ::-webkit-scrollbar acima */
@supports not selector(::-webkit-scrollbar) { html.outubro-rosa { scrollbar-color: #2A1019 #FBF1F4; } }