/* ============================================================================
   PONTE SEDA -> DESIGN SYSTEM DA CONSULTORIA ESTRATÉGICA
   Veste a página da seda (molde-aja + tema-base + tema-seda) com as três
   identidades do design system, sem reescrever o HTML nem tocar nos CSS da
   seda, que servem páginas que já rodam. Carrega DEPOIS de todos eles.

   Canônico do sistema: ~/Documents/RECONECTA/01-marca/consultoria-estrategica-logo/
   design-system/ (consultoria-estrategica.css é cópia de deploy de lá).

   Como funciona: o <body> leva class="ce" e data-id="creme|noite|bordo". O
   consultoria-estrategica.css define os papéis de cor dessa identidade
   (--fundo, --texto, --marca, --acao-*, --realce-*, --card-*), e aqui as
   variáveis da seda passam a apontar para esses papéis.

   Ritmo dos blocos: a página inteira fica numa identidade só, alternando o
   fundo principal (F) e o alternado (A). sobre + empresa ficam juntos em A,
   como já eram juntos no navy da seda, para o fecho cair em F e o rodapé em A.
     F: hero, reframe, autoridades, depo, fecho
     A: case, ganha, prints, sobre, empresa, rodapé
   ========================================================================= */

/* ── 1. Variáveis da seda apontando para a identidade ─────────────────── */
body.ce[data-id] {
  --bg-claro: var(--fundo);
  --bg-claro-alt: var(--fundo-alt);
  --navy-deep: var(--fundo-alt);
  --navy-overlay: var(--fundo-alt);
  --text-escuro: var(--texto);
  --text-escuro-soft: var(--texto-suave);
  --text-claro: var(--texto);
  --text-claro-soft: var(--texto-suave);
  --cream-gold: var(--marca);
  background: var(--fundo);
  color: var(--texto);
}

/* Tratamento das camadas decorativas: claro usa multiply, como a seda;
   escuro não pode (multiply sobre fundo escuro apaga), então usa screen
   para os retratos e soft-light para a textura. */
body.ce[data-id="creme"] { --ce-tex-blend: multiply;   --ce-tex-op: .55; --ce-ret-blend: multiply; --ce-ret-op: .24; --ce-ret-op-dir: .19; --ce-ret-op-mob: .30; --ce-veu-card: rgba(11, 2, 2, .82); }
body.ce[data-id="noite"] { --ce-tex-blend: soft-light; --ce-tex-op: .5;  --ce-ret-blend: screen;   --ce-ret-op: .20; --ce-ret-op-dir: .16; --ce-ret-op-mob: .24; --ce-veu-card: rgba(14, 15, 45, .86); }
body.ce[data-id="bordo"] { --ce-tex-blend: soft-light; --ce-tex-op: .5;  --ce-ret-blend: screen;   --ce-ret-op: .20; --ce-ret-op-dir: .16; --ce-ret-op-mob: .24; --ce-veu-card: rgba(58, 5, 5, .88); }

/* ── 2. Fundo e texto de cada bloco (F / A) ───────────────────────────── */
body.ce .bloco { background: var(--fundo); color: var(--texto); }
body.ce .bloco.case, body.ce .bloco.ganha, body.ce .bloco.prints,
body.ce .bloco.sobre, body.ce .bloco.empresa { background: var(--fundo-alt); }

/* Hero: sai o brilho vermelho do canto (vermelho só no botão) e o brilho
   quente passa a ser da cor de marca da identidade. */
body.ce .bloco.hero {
  background:
    radial-gradient(ellipse 70% 60% at 85% 85%, color-mix(in srgb, var(--marca) 16%, transparent) 0%, transparent 60%),
    var(--fundo);
}

/* Textura de seda em TODOS os blocos (na seda ela só existia nos claros),
   e o filete de topo na cor de filete da identidade. */
body.ce .bloco:not(.hero)::before {
  display: block; inset: 0;
  background-image: var(--tex), var(--grao); background-size: cover, 300px 300px;
  mix-blend-mode: var(--ce-tex-blend); opacity: var(--ce-tex-op);
}
body.ce .bloco:not(.hero) { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--filete) 55%, transparent); }

/* ── 3. Camadas do hero ───────────────────────────────────────────────── */
body.ce .hero__textura { mix-blend-mode: var(--ce-tex-blend); }
body.ce .hero__grao { mix-blend-mode: var(--ce-tex-blend); }
body.ce .hero__emblema { color: var(--ce-ouro-fundo); }
body.ce .hero__veu {
  background: radial-gradient(ellipse 46% 58% at 50% 52%,
    color-mix(in srgb, var(--fundo) 92%, transparent) 0%,
    color-mix(in srgb, var(--fundo) 55%, transparent) 48%, transparent 78%);
}
body.ce .hero__retrato { mix-blend-mode: var(--ce-ret-blend); opacity: var(--ce-ret-op); }
body.ce .hero__retrato--dir { opacity: var(--ce-ret-op-dir); }
@media (max-width: 560px) {
  body.ce .hero__veu {
    background: radial-gradient(ellipse 85% 50% at 50% 62%,
      color-mix(in srgb, var(--fundo) 80%, transparent) 0%,
      color-mix(in srgb, var(--fundo) 40%, transparent) 55%, transparent 88%);
  }
  body.ce .hero__retrato { opacity: var(--ce-ret-op-mob); }
}
/* O fecho repete os retratos, mais leves */
body.ce .fecho .hero__retrato { opacity: calc(var(--ce-ret-op) * .62); }
body.ce .fecho .hero__retrato--dir { opacity: calc(var(--ce-ret-op-dir) * .62); }

/* Logo do lacre no topo: 380 px no computador, 300 no celular, respiro de
   1/4 da altura (regra 6 do sistema). O .ce-logo do sistema cuida da largura. */
body.ce .hero__logo { margin-bottom: 22px; }
@media (max-width: 560px) { body.ce .hero__logo { margin-bottom: 12px; } }

/* ── 4. Botão: o da identidade (vermelho na Creme e na Noite, ouro na Bordô) */
body.ce .cta {
  background: var(--acao-fundo);
  color: var(--acao-texto);
  border: 1px solid var(--acao-borda);
  box-shadow: var(--acao-sombra);
}
body.ce .cta:hover { background: var(--acao-fundo-hover); box-shadow: var(--acao-sombra); }

/* ── 5. Marca-texto ───────────────────────────────────────────────────── */
body.ce .bloco .destaque {
  --faixa: var(--realce-fundo);
  --linha: var(--realce-borda);
  color: var(--realce-texto);
}
body.ce .bloco .destaque::before, body.ce .bloco .destaque::after { background: var(--realce-ponto); }

/* ── 6. Rótulos, cards e números ──────────────────────────────────────── */
body.ce .eyebrow { color: var(--rotulo); }
body.ce .ganha__card { background: var(--card-fundo); border-color: var(--card-borda); }
body.ce .ganha__item + .ganha__item { border-top-color: var(--card-divisor); }
body.ce .empresa__numero, body.ce .empresa__prova { background: var(--card-fundo); border-color: var(--card-borda); }
body.ce .empresa__numero-valor { color: var(--numero); }
body.ce .autoridades__nome { background: linear-gradient(180deg, transparent 0%, var(--ce-veu-card) 60%); }

/* Componente customer-reviews: pelos tokens dele, sem tocar no CSS canônico */
body.ce .customer-reviews {
  --cr-card-bg: var(--card-fundo);
  --cr-card-border: var(--card-borda);
  --cr-text: var(--texto);
  --cr-text-muted: var(--texto-suave);
  --cr-accent: var(--marca);
  --cr-eyebrow-color: var(--rotulo);
}

/* ── 7. Marca Reconecta (bloco da empresa e rodapé) ───────────────────── */
/* O arquivo logo-white.svg é todo #D3111A. Pela regra 2 do sistema o
   vermelho é só do botão e nunca encosta no bordô, então a marca vira uma
   máscara pintada com a cor de marca da identidade. */
body.ce .ce-marca-reconecta {
  display: inline-block;
  aspect-ratio: 149.998 / 25.7898;
  width: auto;
  background: var(--marca);
  -webkit-mask: url("/avaliacao-gratuita/ana/assets/img/logo-white.svg") center / contain no-repeat;
          mask: url("/avaliacao-gratuita/ana/assets/img/logo-white.svg") center / contain no-repeat;
}
body.ce .empresa__logo.ce-marca-reconecta { height: 40px; }
body.ce .rodape__logo.ce-marca-reconecta { height: 26px; }
@media (max-width: 560px) { body.ce .empresa__logo.ce-marca-reconecta { height: 30px; } }

/* ── 8. Rodapé no fundo alternado ─────────────────────────────────────── */
body.ce .rodape {
  background: var(--fundo-alt);
  color: var(--texto-suave);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--filete) 55%, transparent);
}
body.ce .rodape__links a:hover { color: var(--marca); }

/* ── 9. Correções da revisão visual (27/09, 14 achados confirmados) ──── */

/* 9.1 Fotos de autoridade com defeito gravado no arquivo. O arquivo é
   compartilhado com páginas no ar, então o conserto é só aqui: ampliar
   dentro do card (que já tem overflow: hidden) até o defeito sair.
   Patricia: legenda de Stories a partir de 70% da altura -> amplia do topo.
   Manuela: moldura branca de ~6% em volta -> amplia do centro.
   O :hover do molde troca o transform, por isso cada uma tem o seu. */
body.ce .autoridades__card img[src*="patricia-almeida"] { transform: scale(1.45); transform-origin: 50% 0; }
body.ce .autoridades__card:hover img[src*="patricia-almeida"] { transform: scale(1.49); }
body.ce .autoridades__card img[src*="manuela-barcelos"] { transform: scale(1.16); transform-origin: 50% 50%; }
body.ce .autoridades__card:hover img[src*="manuela-barcelos"] { transform: scale(1.2); }

/* 9.2 Botão do topo dentro da dobra no computador, sem encolher o lacre
   (380 px, regra 6). O respiro do lacre fica em 1/4 da altura dele
   (163 px -> 41 px) em cima e embaixo: padding 41 no topo, 27 + gap 14. */
@media (min-width: 900px) {
  body.ce .bloco.hero { padding-top: 41px; }
  body.ce .hero__inner { gap: 14px; }
  body.ce .hero__logo { margin-bottom: 27px; }
  body.ce .hero__cta-wrap { margin-top: 0; }
  body.ce .hero__title { margin-bottom: 0; }
}

/* 9.3 Título do card "o que tu leva" no computador: na coluna de 42% ele
   quebrava em 6 linhas e o marca-texto em 4 pedaços. Um degrau menor de
   corpo deixa o destaque em menos linhas (o "o" já vai colado no HTML). */
@media (min-width: 901px) {
  body.ce .ganha__titulo { font-size: clamp(29px, 3.3vw, 46px); }
}

/* 9.4 Ícones do card na cor de marca da identidade. Os SVGs têm o stroke
   cravado em #c9a24b (dourado mostarda, fora das três paletas), então
   viram máscara, como a marca da Reconecta. */
body.ce .ce-icone {
  display: block; width: 26px; height: 26px;
  background: var(--marca);
  -webkit-mask: var(--icone) center / contain no-repeat;
          mask: var(--icone) center / contain no-repeat;
}

/* ── 10. Case no celular: foto e painel lado a lado de verdade ────────────
   O molde já pede os dois lado a lado abaixo de 900px, mas dá 48% + 48%
   com gap de 20px, que passa de 100% e joga o painel para a linha de baixo
   (o Leo viu os dois empilhados, 27/09). Largura descontando o gap. ── */
@media (max-width: 900px) {
  body.ce .case__inner { gap: 16px; align-items: flex-start; }
  body.ce .case__foto, body.ce .case__dash--mobile { width: calc(50% - 8px); margin-top: 0; }
}

/* ── 11. Safari do iPhone deixava arrastar a página para o lado (27/09) ──
   O player VTurb, ao criar o mini-player flutuante, grava
   overflow: visible !important no .hero e no .hero__video. Com isso o
   retrato direito da Ana (right: -9%) e o emblema, que sempre passaram da
   borda, deixam de ser recortados, a página fica com 515px em 390 e o iOS
   ignora o overflow-x: hidden do body. Os decorativos ganham um recorte
   próprio, irmão do conteúdo, que o player não toca. Sem z-index de
   propósito: não pode virar stacking context, senão o multiply dos
   retratos deixa de mesclar com a textura do hero. */
body.ce .hero__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }