/*
  Páginas de operadora (ADR 0019): a cor oficial da marca aparece só dentro de main.pagina-operadora.
  O montador grava no <main>: --op (cor oficial, só para elementos sem texto), --op-escura (passa 4,5:1 com
  branco: texto, faixas e painéis) e --op-destaque (segunda cor da marca, opcional).
*/
.pagina-operadora {
  --op: var(--cor-principal);
  --op-escura: var(--cor-profunda);
  --op-destaque: var(--op);
  --op-suave: color-mix(in srgb, var(--op) 12%, #fff);
  --op-tinta: color-mix(in srgb, var(--op) 7%, var(--cor-fundo));
}

/* Logo na cor original (marcador {{logo:slug:Nome|cor}}); a branca da Plamedh só existe em branco */
.logo-op--cor { filter: none; opacity: 1; }
.logo-op--branca { filter: none; opacity: 1; }

/* ---------- Hero: texto à esquerda, painel da marca à direita ---------- */
.hero--operadora { background: radial-gradient(680px 340px at 96% 0%, color-mix(in srgb, var(--op) 22%, transparent), transparent 70%), radial-gradient(720px 380px at 0% 110%, color-mix(in srgb, var(--op) 10%, transparent), transparent 70%), var(--cor-fundo); }
.hero--operadora::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--op), var(--op-destaque)); z-index: 2; }
.hero--operadora::after { background-image: radial-gradient(color-mix(in srgb, var(--op) 40%, #fff) 1.2px, transparent 1.6px); }
.hero--operadora .hero__grade { align-items: center; }
.hero--operadora h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.hero__ancoras { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.hero__ancoras a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--op) 35%, var(--cor-borda)); color: var(--cor-profunda); font-size: var(--t-sm); font-weight: 500; text-decoration: none; transition: background var(--transicao), color var(--transicao), border-color var(--transicao); }
.hero__ancoras a:hover { background: var(--op-escura); border-color: var(--op-escura); color: #fff; }
.hero__ancoras .icone { width: 16px; height: 16px; color: var(--op-escura); }
.hero__ancoras a:hover .icone { color: #fff; }

.marca-painel { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 18px; border-radius: var(--raio-xl); background: linear-gradient(155deg, var(--op) 0%, var(--op-escura) 100%); box-shadow: var(--sombra-lg); }
.marca-painel::before { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, 0.12); }
.marca-painel::after { content: ""; position: absolute; left: -60px; bottom: 40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.marca-painel__placa { position: relative; z-index: 1; display: grid; place-items: center; min-height: 190px; padding: 32px; border-radius: var(--raio-lg); background: #fff; }
.marca-painel__placa .logo-op { --logo-base: 200px; --logo-hmax: 110px; max-width: 100%; }
.marca-painel__placa:has(.logo-op--branca) { background: var(--op-escura); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.marca-painel__dados { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border-radius: var(--raio); background: rgba(255, 255, 255, 0.28); }
.marca-painel__dados div { display: grid; gap: 2px; align-content: start; padding: 14px 16px; background: var(--op-escura); }
.marca-painel__dados dt { color: #fff; opacity: 0.86; font-family: var(--fonte-titulo); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.marca-painel__dados dd { margin: 0; color: #fff; font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-base); line-height: 1.25; }

/* ---------- Pilares: Tabela de preços, Rede credenciada, Mais informações ---------- */
.pilar__cabeca { max-width: 68ch; margin-bottom: clamp(24px, 3vw, 40px); }
.pilar__selo { display: inline-flex; align-items: center; min-height: 64px; margin: 0 0 18px; padding: 10px 20px; border-radius: var(--raio); background: #fff; border: 1.5px solid color-mix(in srgb, var(--op) 45%, #fff); box-shadow: var(--sombra-sm); }
.pilar__selo .logo-op { --logo-base: 100px; --logo-hmax: 44px; }
.pilar__selo:has(.logo-op--branca) { background: var(--op-escura); border-color: var(--op-escura); }
.pilar__cabeca h2 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); margin-bottom: 0.4em; }
.pilar__cabeca h2::after { content: ""; display: block; width: 64px; height: 5px; margin-top: 16px; border-radius: 3px; background: linear-gradient(90deg, var(--op), var(--op-destaque)); }
.pilar__cabeca p { font-size: var(--t-lg); color: var(--texto-secundario); }
.pilar__cabeca .acoes { margin-top: 20px; }

/* Rebaixamento (H2 -> H3 e H3 -> H4) das seções que viram subtópicos de um pilar */
.titulo-sub { font-size: var(--t-3xl); font-weight: var(--peso-titulo-forte); }
.titulo-sub-menor { font-size: var(--t-xl); font-weight: var(--peso-titulo); letter-spacing: 0; }
.artigo .titulo-sub-menor { margin-top: 1.3em; }

/* Seção na cor da marca (dados-chave de "Mais informações") */
.secao--marca { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--op-escura) 0%, color-mix(in srgb, var(--op-escura) 78%, #000) 100%); color: #fff; }
.secao--marca > .container { position: relative; z-index: 1; }
.secao--marca h2, .secao--marca h3 { color: #fff; }
.secao--marca .secao__cabeca p, .secao--marca .pilar__cabeca p { color: #fff; opacity: 0.95; }
.secao--marca a:not(.botao) { color: #fff; }
.secao--marca .pilar__cabeca h2::after { background: #fff; }
.secao--marca .pilar__selo { border-color: rgba(255, 255, 255, 0.6); }
.marca-marca { position: absolute; right: 3%; top: 4%; z-index: 0; width: min(34%, 420px); opacity: 0.12; pointer-events: none; }
@media (max-width: 1023px) { .marca-marca { width: 46%; top: 2%; } }
.marca-marca .logo-op { width: 100%; height: auto; max-width: none; filter: brightness(0) invert(1); opacity: 1; }
.dados-chave { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .dados-chave { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dados-chave { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dados-chave > li { display: grid; gap: 6px; align-content: start; padding: 22px 24px; border-radius: var(--raio-lg); background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.28); transition: translate 260ms var(--saida, ease-out), background 260ms var(--saida, ease-out); }
.dados-chave > li:hover { translate: 0 -4px; background: rgba(255, 255, 255, 0.2); }
.dados-chave__rotulo { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--fonte-titulo); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.dados-chave__rotulo .icone { width: 20px; height: 20px; }
.dados-chave__valor { margin: 0; color: #fff; font-family: var(--fonte-titulo); font-size: var(--t-xl); font-weight: 600; line-height: 1.25; max-width: none; }
.dados-chave__nota { margin: 0; color: #fff; opacity: 0.9; font-size: var(--t-sm); line-height: 1.5; max-width: none; }
.secao--marca .acoes { margin-top: 28px; }
.secao--marca .botao--contorno { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.secao--marca .botao--contorno:hover { background: #fff; color: var(--op-escura); border-color: #fff; }

/* ---------- Tabela de preços: faixas da ANS com valor sob consulta ---------- */
.tabela--marca table { min-width: 0; }
.tabela--marca th { background: var(--op-escura); color: #fff; font-size: var(--t-xs); }
.tabela--marca th:first-child { border-top-left-radius: var(--raio-sm); }
.tabela--marca th:last-child { border-top-right-radius: var(--raio-sm); }
.tabela--marca td:last-child { color: var(--op-escura); font-weight: 600; }
.tabela--marca tbody tr:nth-child(even) td { background: var(--op-suave); }
.tabela--marca caption { caption-side: top; padding: 0 0 12px; text-align: left; color: var(--texto-secundario); font-size: var(--t-sm); }

/* ---------- Elementos da marca nos componentes existentes ---------- */
.pagina-operadora .resumo { border-color: color-mix(in srgb, var(--op) 38%, var(--cor-borda)); }
.pagina-operadora .resumo h2 .icone { color: var(--op-escura); }
.pagina-operadora .cartao-icone__marca { background: var(--op-suave); color: var(--op-escura); }
.pagina-operadora .cartao-icone:hover .cartao-icone__marca { background: var(--op-escura); color: #fff; }
.pagina-operadora .ficha div { background: var(--op-suave); }
.pagina-operadora .ficha dd { color: var(--op-escura); }
.pagina-operadora .barras__trilho > span { background: linear-gradient(90deg, var(--op), var(--op-destaque)); }
.pagina-operadora .fluxo::before { background: linear-gradient(var(--op), var(--op-destaque)); }
.pagina-operadora .fluxo > li:hover .fluxo__marca { background: var(--op-escura); color: #fff; }
.pagina-operadora .fluxo--prazos > li:hover .fluxo__marca { background: var(--op-escura); color: #fff; }
.pagina-operadora .fatores-lista strong { color: var(--op-escura); }
.pagina-operadora .secao--suave { background: var(--op-tinta); }
.pagina-operadora .secao--menta { background: var(--op-suave); }
.pagina-operadora .galeria__item:has(a):hover { border-color: var(--op); }
.pagina-operadora .aviso { background: var(--op-suave); max-width: 62ch; } /* em container largo, 70 ch passa de 85 caracteres de medida */
.pagina-operadora .aviso .icone { color: var(--op-escura); }
.pagina-operadora .relato { border-color: color-mix(in srgb, var(--op) 40%, var(--cor-borda)); }
.pagina-operadora .afirmacoes h3 { color: var(--op-escura); }

/* Galeria de rede: cartão de rede própria ganha a faixa da marca e a etiqueta */
.galeria__item--propria { border-color: color-mix(in srgb, var(--op) 55%, var(--cor-borda)); }
.galeria__item--propria::before { content: ""; display: block; height: 6px; background: linear-gradient(90deg, var(--op), var(--op-destaque)); }
.galeria__etiqueta { justify-self: start; display: inline-block; margin-bottom: 4px; padding: 3px 10px; border-radius: 999px; background: var(--op-suave); color: var(--op-escura); font-size: var(--t-xs); font-weight: 600; }
.galeria__item--propria .galeria__etiqueta { background: var(--op-escura); color: #fff; }

@media (prefers-reduced-motion: reduce) { .dados-chave > li { transition: none; } .dados-chave > li:hover { translate: none; } }
@media (max-width: 639px) { .marca-painel__dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } .marca-painel__dados div:last-child:nth-child(odd) { grid-column: 1 / -1; } .marca-painel__placa { min-height: 150px; padding: 24px; } .marca-painel__placa .logo-op { --logo-base: 150px; --logo-hmax: 84px; } }