/* ==========================================================================
   Tema "Proposta" — opção de identidade visual inspirada na apresentação
   da Festê (Propostas 1 e 2). Carregar DEPOIS de styles.css e adicionar
   class="theme-b" no <html>. O layout é o mesmo; só muda a identidade:
   cinza-claro, degradê lilás → pêssego,
   cards lilás / pêssego / preto, etiqueta amarelo-manteiga e rótulos roxos.
   ========================================================================== */

html.theme-b {
  --bg: #f4f4f4;          /* fundo dos slides */
  --bg-soft: #ffffff;     /* painéis secundários */
  --paper: #ffffff;
  --wine: #111111;        /* o "destaque escuro" vira preto */
  --wine-deep: #000000;
  --cream: #ffffff;       /* texto sobre preto */
  --ink: #111111;
  --muted: #4a4a4a;
  --line: rgba(17, 17, 17, 0.12);
  --line-cream: rgba(255, 255, 255, 0.18);

  --lilac: #ebe7f3;       /* card lilás */
  --peach: #f4e4da;       /* card pêssego */
  --butter: #f7efc6;      /* etiqueta amarela */
  --violet: #6b5a96;      /* rótulos e números */
  --grad: linear-gradient(90deg, #c8b6e2 0%, #e9e5ef 50%, #f0cfb9 100%);
  --grad-soft: linear-gradient(160deg, #ddd0ef 0%, #f1eef6 45%, #f6f4f2 70%, #f6e2d6 100%);
}

/* Faixa em degradê no topo, como nos slides */
html.theme-b body::before {
  content: ""; display: block; height: 14px; background: var(--grad);
}

/* ---------- Tipografia: mesmas fontes da versão bordô (Bricolage Grotesque + Inter) ---------- */
html.theme-b .eyebrow { color: var(--violet); font-weight: 700; letter-spacing: 0.08em; }
html.theme-b .eyebrow::before { display: none; }

/* ---------- Navegação: pílula branca, CTA preto ---------- */
html.theme-b .nav { background: #ffffff; border-color: var(--line); color: var(--ink); }
html.theme-b .nav .logo { color: var(--ink); }
html.theme-b .nav .logo::after { background: var(--ink); }
html.theme-b .nav-links a { color: var(--ink); opacity: 0.75; }
html.theme-b .nav-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
html.theme-b .nav .nav-cta { background: var(--ink); color: #ffffff; }
html.theme-b .nav .nav-cta:hover { background: #333333; }
html.theme-b .nav :focus-visible { outline-color: var(--ink); }

/* ---------- Botões ---------- */
html.theme-b .btn-primary:hover { background: #333333; }
html.theme-b .btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; }

/* ==========================================================================
   Painéis claros (antes bordô): abertura, processo, cartão "sobre", capa
   dos projetos. Ganham o degradê / lilás e texto escuro.
   ========================================================================== */
html.theme-b .hero,
html.theme-b .case-hero { background: var(--grad-soft); color: var(--ink); }
html.theme-b .about-card { background: var(--grad-soft); color: var(--ink); }
html.theme-b .process { background: var(--lilac); color: var(--ink); }

html.theme-b :is(.hero, .case-hero, .process) :is(h1, h2, h3) { color: var(--ink); }
html.theme-b :is(.hero, .case-hero, .process) .eyebrow { color: var(--violet); }
html.theme-b :is(.hero, .case-hero, .process) :focus-visible { outline-color: var(--ink); }
html.theme-b .hero-sub, html.theme-b .proc-step p { color: var(--muted); }
html.theme-b .hero-foot, html.theme-b .case-meta { border-top-color: var(--line); }
html.theme-b .hf-tagline { opacity: 0.75; }
html.theme-b :is(.hero, .case-hero) .btn-light { background: var(--ink); color: #ffffff; }
html.theme-b :is(.hero, .case-hero) .btn-light:hover { background: #333333; }
html.theme-b .back-link { color: var(--ink); }

/* Etiqueta amarela no lugar da chamada pequena da abertura */
html.theme-b .hero .eyebrow {
  background: var(--butter); color: var(--ink);
  padding: 7px 14px; border-radius: 100px; font-weight: 600; letter-spacing: 0.04em;
}

/* Composição gráfica da abertura */
html.theme-b .poster { background: #ffffff; border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(60, 40, 90, 0.35), 0 8px 18px -10px rgba(0, 0, 0, 0.18); }
html.theme-b .poster-quote em { color: var(--ink); }
html.theme-b .poster-foot { color: var(--violet); }
html.theme-b .tag-card { background: var(--butter); border-radius: 14px; box-shadow: 0 24px 40px -20px rgba(60, 40, 90, 0.4); }
html.theme-b .tag-card em { color: var(--ink); }
html.theme-b .spark { color: var(--violet); }

/* Cartão "Sobre mim" */
html.theme-b .about-card .small { color: var(--violet); font-weight: 600; opacity: 1; }

/* Processo: círculos pretos numerados e linha tracejada escura, como no slide */
html.theme-b .process-flow::before {
  background-image: linear-gradient(90deg, rgba(17, 17, 17, 0.35) 0, rgba(17, 17, 17, 0.35) 6px, transparent 6px, transparent 12px);
}
html.theme-b .proc-step .circle,
html.theme-b .proc-step:nth-child(2) .circle,
html.theme-b .proc-step:nth-child(3) .circle {
  background: var(--ink); color: #ffffff; box-shadow: 0 0 0 8px var(--lilac);
}
html.theme-b .proc-label { color: var(--violet); opacity: 1; font-weight: 700; }
@media (max-width: 900px) {
  html.theme-b .process-flow::before {
    background-image: linear-gradient(180deg, rgba(17, 17, 17, 0.35) 0, rgba(17, 17, 17, 0.35) 6px, transparent 6px, transparent 12px);
  }
}

/* ---------- Faixa de conceitos ---------- */
html.theme-b .concept { opacity: 0.8; }
html.theme-b .concept-sep { color: var(--violet); }

/* ---------- Serviços: cards lilás, preto e pêssego ---------- */
html.theme-b .svc-card { border-color: transparent; }
html.theme-b .services-grid .svc-card:not(.featured) { background: var(--lilac); }
html.theme-b .services-grid .svc-card:nth-child(3):not(.featured) { background: var(--peach); }
html.theme-b .svc-card .svc-tag { color: var(--violet); font-weight: 700; opacity: 1; }
html.theme-b .svc-card.featured .svc-tag { color: #c9bbe6; }
html.theme-b .svc-icon { color: var(--ink); }
html.theme-b .svc-card.featured .svc-icon { color: #ffffff; }
html.theme-b .svc-card.featured p { color: rgba(255, 255, 255, 0.78); }

/* ---------- Posicionamento ---------- */
html.theme-b .manifesto-copy { color: rgba(17, 17, 17, 0.4); }
html.theme-b .manifesto-copy em { color: var(--ink); }
html.theme-b .manifesto-copy u { text-decoration-color: #c8b6e2; text-decoration-thickness: 4px; }

/* ---------- Projetos ---------- */
html.theme-b .project-media { background: var(--lilac); }
html.theme-b .project-media.contain { background: var(--peach); }
html.theme-b a.project:hover .project-meta h3 { color: var(--violet); }
html.theme-b .next-project { background: var(--lilac); }

/* ---------- FAQ ---------- */
html.theme-b .faq-q:hover { color: var(--violet); }

/* ---------- Contato e chamada final: card preto, como o "3x" ---------- */
html.theme-b #contato, html.theme-b .case-cta { color: #ffffff; }
html.theme-b #contato .eyebrow, html.theme-b .section-wine:has(.case-cta) .eyebrow { color: #c9bbe6; }
html.theme-b .field input, html.theme-b .field select, html.theme-b .field textarea { background: #f4f4f4; }
html.theme-b .field input:focus, html.theme-b .field select:focus, html.theme-b .field textarea:focus { background: #ffffff; border-color: #c8b6e2; }

/* Rodapé */
html.theme-b .footer .back:hover { color: var(--violet); }

/* Foto da Thay no lugar do cartão de texto da abertura */
html.theme-b .poster.poster-photo { padding: 0; overflow: hidden; background: #e9e5ef; }
html.theme-b .poster-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 22%;
}

/* Celular: a foto sai da abertura e entra no cartão "Criatividade com propósito",
   abaixo dessa frase, com o nome em branco por cima */
html.theme-b .about-photo-wrap { display: contents; }
html.theme-b .about-photo { display: none; }
@media (max-width: 640px) {
  html.theme-b .hero-art { display: none; }
  html.theme-b .about-card { min-height: 0; gap: 20px; }
  html.theme-b .about-card .spark { display: none; }
  html.theme-b .about-eyebrow { display: none; }
  html.theme-b .about-photo-wrap {
    display: block; position: relative;
    border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5;
    background: #e9e5ef;
  }
  html.theme-b .about-photo { display: block; margin: 0; position: absolute; inset: 0; }
  html.theme-b .about-photo img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: 50% 22%;
  }
  /* sombra suave embaixo para o nome branco ficar legível */
  html.theme-b .about-photo::after {
    content: ""; position: absolute; inset: 45% 0 0 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  }
  html.theme-b .about-photo-wrap .about-name {
    position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1;
    color: #ffffff; font-size: clamp(2.8rem, 14vw, 3.6rem);
  }
}

/* Computador e tablet: foto preenchendo o cartão "Criatividade com propósito",
   cortada no formato dele, com os textos em branco por cima */
html.theme-b .about-card-photo { display: none; }
@media (min-width: 641px) {
  html.theme-b .about-card {
    justify-content: space-between; gap: 16px; background: #2a2a2a; color: #ffffff;
    container-type: inline-size; /* o nome acompanha a largura do cartão */
  }
  html.theme-b .about-card-photo {
    display: block; position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 30%;
  }
  /* escurece de leve o topo e a base para os textos brancos ficarem legíveis */
  html.theme-b .about-card::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 16%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.45) 100%);
  }
  html.theme-b .about-card > :not(.about-card-photo) { position: relative; z-index: 1; }
  html.theme-b .about-card > .spark { position: absolute; color: #ffffff; }
  html.theme-b .about-card .small { color: #ffffff; opacity: 0.92; }
  /* nome alinhado à esquerda, junto dos outros textos do cartão */
  html.theme-b .about-card .about-name {
    position: absolute; z-index: 1;
    left: clamp(28px, 3.5vw, 40px); top: 57%;
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); /* legível sobre o fundo claro da rua */
    font-size: 6.6cqw; line-height: 0.86; white-space: nowrap;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  /* tablet: cartão mais largo e baixo, nome um pouco menor e corte mais alto */
  html.theme-b .about-card-photo { object-position: 50% 26%; }
  html.theme-b .about-card .about-name { font-size: 5.4cqw; top: 54%; }
}