/* =========================================================================
   pages.css — páginas internas da LCA
   Escrito sobre os mesmos tokens e componentes da página principal.
   Regra da folha: nenhum !important. Se precisar de um, o problema
   está na marcação, não aqui.
   ========================================================================= */

/* Container de rota ------------------------------------------------------ */
.lca-route-page { display: none; }
.lca-route-page.is-active { display: block; }
.lca-home-page.is-hidden { display: none; }

/* Hero das páginas internas: mesma estrutura do hero da home, com altura
   menor porque não é a primeira impressão do site. --------------------- */
.page-hero { min-height: 0; padding: 62px 0 76px; }
.page-hero .hero-lead { max-width: 585px; }
.page-hero .care-hero-grid { align-items: center; }

@media (max-width: 979px) {
  .page-hero { padding: 46px 0 62px; }
}

/* Segundo cartão do bloco de perfil: mesma caixa, tom neutro ------------- */
.calm-card-plain {
  background: linear-gradient(145deg, #ffffff, #f7fbfe);
  border-color: #dce9f5;
}
.calm-card-plain .calm-icon { color: var(--care-navy); }
.calm-card b { display: block; color: var(--care-navy); font-weight: 800; }
.calm-card li { align-items: flex-start; }

/* Grade dos critérios: mesmos cartões do bento da home, sem foto -------- */
.criteria-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.criteria-bento .solution-card,
.criteria-bento .solution-card:first-child,
.criteria-bento .solution-card:nth-child(2),
.criteria-bento .solution-card:nth-child(6),
.criteria-bento .solution-card:nth-child(7) {
  grid-column: auto;
  min-height: 258px;
}
.criteria-index {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  color: var(--care-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.solution-blue .criteria-index { color: #ffffffa8; }

@media (max-width: 979px) {
  .criteria-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .criteria-bento { grid-template-columns: 1fr; }
  .criteria-bento .solution-card { min-height: 0; }
}

/* Bloco de perfil: dois cartões do mesmo tipo usado nos critérios ------- */
.profile-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.profile-duo .solution-card,
.profile-duo .solution-card:first-child,
.profile-duo .solution-card:nth-child(2) { grid-column: auto; min-height: 0; }
.profile-list { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.profile-list li { display: flex; align-items: flex-start; gap: 11px; color: var(--care-copy); font-size: .95rem; line-height: 1.6; }
.profile-list li > span {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; margin-top: 1px;
  border-radius: 999px; background: #ffffffcc; color: var(--care-blue-strong);
}
.profile-list strong { display: block; color: var(--care-navy); font-weight: 800; }
.profile-note { margin: 14px 0 0; color: var(--care-copy); font-size: .95rem; }
@media (max-width: 860px) { .profile-duo { grid-template-columns: 1fr; } }

/* =========================================================================
   Escala dos textos descritivos
   ========================================================================= */
/* precisa de !important: a home marca o mesmo par com !important e as
   páginas internas herdam a classe .lca-home dos componentes dela */
.page-main .care-visual .hero-proof strong { font-size: 1rem !important; line-height: 1.32; }
.page-main .care-visual .hero-proof small { font-size: .88rem !important; line-height: 1.5; }
.profile-list li { font-size: 1rem; line-height: 1.66; }
.profile-note { font-size: 1.02rem; line-height: 1.6; }
.criteria-bento .solution-card p { font-size: 1rem; line-height: 1.62; }
.criteria-index { font-size: .84rem; }

/* =========================================================================
   Fundo das páginas internas
   Sem iluminação e sem degradê: as seções não pintam fundo, e a página
   inteira apoia sobre uma superfície branca contínua. Sem fundo por seção
   não existe fronteira onde cortar.
   ========================================================================= */
.page-main { position: relative; isolation: isolate; }
.page-main > section { background: transparent !important; }
.page-main > section:not(.care-hero)::before,
.page-main > section:not(.care-hero)::after { content: none; }
.page-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #ffffff;
}
/* o hero tem foto de fundo: ela é dissolvida por máscara, não coberta */
.page-main > .care-hero { background: transparent !important; }
.page-main > .care-hero::after { content: none; }
.page-main > .care-hero .hero-mesh {
  background-image:
    radial-gradient(circle, rgba(32, 121, 199, .16) 1.2px, rgba(0, 0, 0, 0) 1.3px),
    linear-gradient(90deg, rgba(255, 255, 255, .985) 0%, rgba(255, 255, 255, .95) 38%,
                    rgba(255, 255, 255, .8) 62%, rgba(32, 121, 199, .08) 100%),
    url("../images/hero/lca-hero-bg-v2.webp");
  background-size: 26px 26px, cover, cover;
  background-position: 0 0, 50% 50%, 50% 50%;
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 58%, rgba(0, 0, 0, .55) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000000 0%, #000000 58%, rgba(0, 0, 0, .55) 82%, transparent 100%);
}

/* =========================================================================
   Escala de texto — régua única das descrições
   ========================================================================= */
.page-main .home-section-head > p:last-child,
.page-main .faq-care-intro > p,
.page-main .analysis-lounge-copy > p { font-size: 1.12rem !important; line-height: 1.66 !important; }
.page-main .solution-card p,
.page-main .flow-step p,
.page-main .faq-answer p,
.page-main .profile-list li,
.page-main .profile-note,
.page-main .lounge-promises > div { font-size: 1.06rem !important; line-height: 1.66 !important; }
.page-main .hero-lead { font-size: 1.16rem !important; line-height: 1.62 !important; }
.page-main .care-visual .hero-proof strong { font-size: 1.04rem !important; }
.page-main .care-visual .hero-proof small { font-size: .95rem !important; line-height: 1.5 !important; }
.page-main .operator-lockup span { font-size: .92rem !important; }
.page-main .faq-number { font-size: .86rem !important; }
.page-main .faq-item button > span:not(.faq-number):not(.faq-icon) { font-size: 1.08rem !important; }
.page-main .criteria-index { font-size: .9rem !important; }
.page-main .review-note { font-size: .92rem !important; }
.page-main .scroll-cue { font-size: .82rem !important; }
.page-main .soft-kicker { font-size: .88rem !important; }
.page-main label > span { font-size: .96rem !important; }
.page-main .consent-field span { font-size: .95rem !important; }
@media (max-width: 620px) {
  .page-main .hero-lead { font-size: 1.06rem !important; }
  .page-main .home-section-head > p:last-child { font-size: 1.04rem !important; }
}

/* =========================================================================
   Páginas de operadora
   ========================================================================= */
.care-hero-copy .operator-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 22px;
  padding: 10px 18px 10px 14px;
  border: 1px solid #d9e8f5;
  border-radius: 999px;
  background: #ffffffdb;
  box-shadow: 0 10px 26px #1e5b911a;
}
.operator-lockup img { width: auto; height: 26px; object-fit: contain; }
.operator-lockup span {
  color: var(--care-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.criteria-bento-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 979px) {
    .criteria-bento-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .criteria-bento-trio { grid-template-columns: 1fr; }
}

.operator-hero .care-hero-copy > .operator-lockup { display: flex; width: fit-content; }
.operator-hero .care-hero-copy > .operator-lockup:first-child { margin-top: 0; margin-bottom: 24px; }
.operator-hero .operator-lockup img { height: 30px; }
.operator-hero .operator-lockup span { font-size: .82rem; color: var(--care-navy); }

/* =========================================================================
   Sistema de cor por operadora
   As páginas de operadora não recebem um acento: elas trocam a paleta.
   Os tokens --care-* e --lca-* são redefinidos dentro de .op-page, então
   todo componente que já usava essas variáveis muda junto, sem duplicação.
   Cabeçalho e rodapé ficam fora do escopo e seguem LCA.
   ========================================================================= */
.op-amil {
  --op: #3018f0;
  --op-2: #5c49f3;
  --op-ink: #3018f0;
  --op-deep: #090437;
  --op-mid: #180990;
  --op-rgb: 48, 24, 240;
  --op-ink-rgb: 48, 24, 240;
}
.op-bradesco {
  --op: #c01830;
  --op-2: #e95368;
  --op-ink: #c01830;
  --op-deep: #34070d;
  --op-mid: #881122;
  --op-rgb: 192, 24, 48;
  --op-ink-rgb: 192, 24, 48;
}
.op-sulamerica {
  --op: #183060;
  --op-2: #2c59b2;
  --op-ink: #183060;
  --op-deep: #0c172f;
  --op-mid: #1f3d7a;
  --op-rgb: 24, 48, 96;
  --op-ink-rgb: 24, 48, 96;
}
.op-porto {
  --op: #0090f0;
  --op-2: #42b1fa;
  --op-ink: #0074c2;
  --op-deep: #022338;
  --op-mid: #085a91;
  --op-rgb: 0, 144, 240;
  --op-ink-rgb: 0, 116, 194;
}
.op-omint {
  --op: #001860;
  --op-2: #0536c7;
  --op-ink: #001860;
  --op-deep: #021038;
  --op-mid: #082a91;
  --op-rgb: 0, 24, 96;
  --op-ink-rgb: 0, 24, 96;
}
.op-hapvida {
  --op: #ff4e05;
  --op-2: #fa7842;
  --op-ink: #cc3c00;
  --op-deep: #381202;
  --op-mid: #913008;
  --op-rgb: 255, 78, 5;
  --op-ink-rgb: 204, 60, 0;
}
.op-assim {
  --op: #004878;
  --op-2: #0684d8;
  --op-ink: #004878;
  --op-deep: #022338;
  --op-mid: #085a91;
  --op-rgb: 0, 72, 120;
  --op-ink-rgb: 0, 72, 120;
}
.op-levesaude {
  --op: #480030;
  --op-2: #c70586;
  --op-ink: #480030;
  --op-deep: #380226;
  --op-mid: #910863;
  --op-rgb: 72, 0, 48;
  --op-ink-rgb: 72, 0, 48;
}
.op-medsenior {
  --op: #006030;
  --op-2: #05c766;
  --op-ink: #006030;
  --op-deep: #02381d;
  --op-mid: #08914d;
  --op-rgb: 0, 96, 48;
  --op-ink-rgb: 0, 96, 48;
}

.op-page .page-main {
  --care-navy: var(--op-deep);
  --care-navy-deep: var(--op-deep);
  --care-blue: var(--op);
  --care-blue-strong: var(--op-ink);
  --care-blue-soft: rgba(var(--op-rgb), .09);
  --care-sky: rgba(var(--op-rgb), .13);
  --care-aqua: rgba(var(--op-rgb), .07);
  --care-mint: var(--op-2);
  --care-gold: var(--op-2);
  --care-yellow: var(--op-2);
  --care-cream: rgba(var(--op-rgb), .06);
  --care-peach: rgba(var(--op-rgb), .10);
  --care-lavender: rgba(var(--op-rgb), .08);
  --care-coral: var(--op-2);
  --care-ink: var(--op-deep);
  --care-copy: #4a5c6b;
  --care-muted: #788a9a;
  --care-line: rgba(var(--op-rgb), .16);
  --care-shadow: 0 24px 70px rgba(var(--op-rgb), .16);
  --care-shadow-soft: 0 16px 45px rgba(var(--op-rgb), .12);
  --lca-navy: var(--op-deep);
  --lca-navy-strong: var(--op-deep);
  --lca-blue: var(--op);
  --lca-blue-strong: var(--op-ink);
  --lca-aqua: var(--op-2);
  --lca-gold: var(--op-2);
  --lca-ink: var(--op-deep);
  --vr-navy: var(--op-deep);
  --vr-navy-deep: var(--op-deep);
  --vr-blue: var(--op);
  --vr-blue-bright: var(--op);
  --vr-aqua: var(--op-2);
  --vr-gold: var(--op-2);
  --vr-ink: var(--op-deep);
  --lca-gradient-brand:
    radial-gradient(circle at 8% 0%, rgba(var(--op-rgb), .5) 0, transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(var(--op-rgb), .34) 0, transparent 34%),
    linear-gradient(135deg, var(--op-deep) 0%, var(--op-mid) 54%, var(--op-ink) 100%);
}

/* --- valores fixados em hexadecimal na base precisam ser reapontados ---- */
.op-page .page-main .button-blue,
.op-page .page-main .button.button-blue {
  background: linear-gradient(135deg, var(--op-ink) 0%, var(--op) 78%, var(--op-2) 140%) !important;
  box-shadow: 0 16px 34px rgba(var(--op-rgb), .3) !important;
}
.op-page .page-main .button-blue:hover { box-shadow: 0 20px 42px rgba(var(--op-rgb), .38) !important; }
.op-page .page-main .button-soft { border-color: rgba(var(--op-rgb), .26) !important; color: var(--op-ink) !important; }
.op-page .page-main .button-soft svg { color: var(--op) !important; }

.op-page .page-main .home-section-head h2 span,
.op-page .page-main .faq-care-intro h2 span { color: var(--op-ink) !important; }
.op-page .page-main .analysis-lounge-copy h2 span { color: rgba(255, 255, 255, .82) !important; }
.op-page .page-main .hero-lead strong { color: var(--op-ink); }
.op-page .page-main .care-actions .scroll-cue { color: var(--op-ink) !important; }
.op-page .page-main .care-actions .scroll-cue:hover { color: var(--op) !important; }
.op-page .page-main .soft-kicker { color: var(--op-ink); }
.op-page .page-main .soft-kicker > span { color: var(--op-ink); background: rgba(var(--op-rgb), .09); }
.op-page .page-main .kicker-dot { background: var(--op); }
.op-page .page-main .inline-care-link { color: var(--op-ink); }

/* selo e numerais */
.op-page .page-main .operator-lockup { border-color: rgba(var(--op-rgb), .22); box-shadow: 0 10px 26px rgba(var(--op-rgb), .16); }
.op-page .page-main .operator-lockup span { color: var(--op-ink); }
.op-page .page-main .criteria-index { color: var(--op-ink); }
.op-page .page-main .faq-number { color: var(--op-ink) !important; background: rgba(var(--op-rgb), .10) !important; }
.op-page .page-main .faq-icon { color: var(--op-ink) !important; }
.op-page .page-main .profile-list li > span { color: var(--op-ink); background: rgba(var(--op-rgb), .10); }
.op-page .page-main .flow-orb { color: var(--op-ink); }
.op-page .page-main .flow-rail-fill { background: linear-gradient(90deg, var(--op-ink) 0%, var(--op) 62%, var(--op-2) 100%) !important; }
.op-page .page-main .flow-index { color: rgba(var(--op-ink-rgb), .5); }

/* cartões: branco como base, tom da operadora em três intensidades ------- */
.op-page .page-main .solution-card {
  background: linear-gradient(150deg, #ffffff 0%, rgba(var(--op-rgb), .05) 100%) !important;
  border-color: rgba(var(--op-rgb), .14) !important;
}
.op-page .page-main .solution-card h3 { color: var(--op-deep) !important; }
.op-page .page-main .solution-icon { color: var(--op-ink) !important; background: rgba(var(--op-rgb), .10) !important; }
.op-page .page-main .solution-card.solution-sky {
  background: linear-gradient(150deg, #ffffff 0%, rgba(var(--op-rgb), .10) 100%) !important;
}
.op-page .page-main .solution-card.solution-mint,
.op-page .page-main .solution-card.solution-aqua {
  background: linear-gradient(150deg, #ffffff 0%, rgba(var(--op-rgb), .07) 100%) !important;
}
.op-page .page-main .solution-card.solution-blue {
  background: linear-gradient(150deg, var(--op-deep) 0%, var(--op-mid) 62%, var(--op) 130%) !important;
  border-color: transparent !important;
}
.op-page .page-main .solution-card.solution-blue h3,
.op-page .page-main .solution-card.solution-blue p { color: #ffffff !important; }
.op-page .page-main .solution-card.solution-blue .solution-icon { color: var(--op-ink) !important; background: #ffffffe8 !important; }
.op-page .page-main .solution-card.solution-blue .criteria-index { color: #ffffffa6 !important; }

/* provas do hero e ícones de apoio */
.op-page .page-main .proof-icon { color: var(--op-ink) !important; background: rgba(var(--op-rgb), .10) !important; }
.op-page .page-main .hero-proof > div::before { background: linear-gradient(180deg, var(--op), var(--op-2)) !important; }
.op-page .page-main .hero-proof strong { color: var(--op-deep) !important; }

/* formulário: o card escuro assume a cor da operadora */
.op-page .page-main .analysis-lounge .analysis-lounge-grid,
.op-page .page-main .lead-form { position: relative; z-index: 1; }
.op-page .page-main .form-heading-icon { background: linear-gradient(150deg, var(--op-ink), var(--op)) !important; color: #ffffff !important; }
.op-page .page-main .form-micro { color: var(--op-ink) !important; background: rgba(var(--op-rgb), .10) !important; }
.op-page .page-main .lead-form input:focus,
.op-page .page-main .lead-form select:focus {
  border-color: var(--op) !important;
  box-shadow: 0 0 0 4px rgba(var(--op-rgb), .16) !important;
}
.op-page .page-main .consent-field a { color: var(--op-ink) !important; }
.op-page .page-main .lounge-promises span { color: var(--op-2) !important; }

/* títulos e destaques em geral */
.op-page .page-main h2,
.op-page .page-main h3 { color: var(--op-deep); }
.op-page .page-main .care-hero-copy h1 { color: var(--op-deep); }
.op-page .page-main .care-hero-copy h1 span {
  background: linear-gradient(100deg, var(--op-ink) 0%, var(--op) 62%, var(--op-2) 132%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* o card escuro do formulário e a moldura da foto ainda estavam em azul fixo */
.op-page .page-main .analysis-lounge-grid {
  background-image:
    radial-gradient(circle at 5% 0, rgba(var(--op-rgb), .34), transparent 32%),
    radial-gradient(circle at 96% 100%, rgba(var(--op-rgb), .28), transparent 34%),
    linear-gradient(108deg, var(--op-deep) 0%, var(--op-mid) 54%, var(--op-ink) 100%) !important;
}
.op-page .page-main .hero-photo-card { background: rgba(var(--op-rgb), .06) !important; }
.op-page .page-main .analysis-lounge-orb { background: radial-gradient(circle, rgba(var(--op-rgb), .22), transparent 70%) !important; }

/* pontos que ainda herdavam azul dentro do card escuro do formulário */
.op-page .page-main .analysis-lounge-copy .kicker-dot { background: rgba(255, 255, 255, .8) !important; }
.op-page .page-main .lounge-promises > div > span {
  color: var(--op-ink) !important;
  background: #ffffffe6 !important;
}
.op-page .page-main .analysis-lounge-copy .soft-kicker,
.op-page .page-main .analysis-lounge-copy .soft-kicker > span {
  color: rgba(255, 255, 255, .88) !important;
  background: transparent !important;
}

/* véu do hero na página de operadora, sem azul */
.op-page .page-main > .care-hero .hero-mesh {
  background-image:
    radial-gradient(circle, rgba(var(--op-rgb), .16) 1.2px, rgba(0, 0, 0, 0) 1.3px),
    linear-gradient(90deg, rgba(255, 255, 255, .985) 0%, rgba(255, 255, 255, .95) 38%,
                    rgba(255, 255, 255, .8) 62%, rgba(var(--op-rgb), .08) 100%),
    url("../images/hero/lca-hero-bg-v2.webp");
}