/* Base comum às três propostas da home: papéis de cor (normal e invertida), reset, seções de baixo
   e a barra para trocar de proposta. Cada proposta tem o seu estilo.css com o hero e as fontes. */

/* Papéis de cor. Versão normal: amarelo no fundo, rosa em volta da foto.
   Uma seção com [data-secao-invertida] fica com a versão oposta à da página (botão "Inverter esta seção"). */
:root,
:root[data-cores="invertidas"] [data-secao-invertida] {
  --p-fundo: var(--cor-fundo);
  --p-forma: var(--cor-destaque);
  --p-texto: var(--cor-texto);
  --p-nome: var(--cor-apoio-2);
  --p-suave: var(--cor-apoio-1);
  --p-forte: var(--cor-texto-forte);
  --p-sobre-forte: var(--cor-fundo);
  --p-numero: var(--cor-apoio-2);
}

/* Versão invertida (página inteira, ou só uma seção com "Inverter esta seção"): fundo no rosa claro (o mesmo do
   caso da assessoria de influencers), formas em amarelo, texto escuro; os cartões que eram rosa claro passam a amarelo para não sumir. */
:root[data-cores="invertidas"],
:root:not([data-cores="invertidas"]) [data-secao-invertida] {
  --p-fundo: var(--cor-apoio-1);
  --p-forma: var(--cor-fundo);
  --p-texto: var(--cor-texto-forte);
  --p-nome: var(--cor-apoio-2);
  --p-suave: var(--cor-fundo);
  --p-numero: var(--cor-apoio-2);
}

/* rosa forte em vez do claro: a página com data-rosa="forte", ou a seção com data-secao-invertida="forte" */
:root[data-cores="invertidas"][data-rosa="forte"],
:root:not([data-cores="invertidas"]) [data-secao-invertida="forte"] {
  --p-fundo: var(--cor-destaque);
  --p-suave: var(--cor-apoio-1);
  --p-nome: var(--cor-texto-forte);
  --p-numero: var(--cor-texto-forte);
}

/* a seção invertida pinta o próprio fundo (as faixas escuras mantêm o delas: a regra da seção vem depois) */
[data-secao-invertida] {
  background: var(--p-fundo);
  color: var(--p-texto);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--p-fundo);
  color: var(--p-texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: 1.5;
  overflow-x: clip;
  transition: background-color 0.6s var(--curva), color 0.6s var(--curva);
}

/* a faixa inclinada e os nomes grandes passam da borda de propósito; nada de rolagem lateral */
main {
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--p-forte);
  outline-offset: 3px;
  box-shadow: var(--foco);
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Marcador de conteúdo que falta: precisa aparecer, não pode passar por texto final. */
.falta {
  display: inline-block;
  padding: var(--e1) var(--e2);
  border: 2px dashed currentColor;
  border-radius: var(--raio);
  font-family: ui-monospace, monospace;
  font-size: var(--t-meta);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

/* Topo: faixa simples presa no alto, só texto, na cor do fundo (versão minimalista, pedido da Julia em 27/10).
   Some ao descer a página e volta ao subir (estilos/topo.js marca data-escondido); no celular os links viram um
   menu que abre embaixo. */
html {
  touch-action: manipulation;   /* no celular, dois toques não dão zoom (o zoom de pinça continua) */
  scroll-padding-top: 96px;   /* o título da seção não fica embaixo do topo ao clicar num link */
}

.topo {
  --topo-contorno: color-mix(in srgb, var(--papel-traco, var(--cor-destaque)) 45%, transparent);
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--e5);
  padding: var(--e3) clamp(var(--e3), 4vw, var(--e8));
  --topo-cor: var(--topo-fundo, var(--cor-fundo));   /* "amarelo" é amarelo mesmo com a página rosa */
  background: var(--topo-cor);
  color: var(--topo-texto, var(--cor-texto-forte));
  transition: translate 0.35s var(--curva);
}

/* cor do topo, escolhida no botão "Topo" da barra das opções (estilos/propostas.js marca data-topo-cor no <html>);
   só combinações que passam no contraste: o vermelho de fundo ficou de fora */
:root[data-topo-cor="rosa-claro"] { --topo-fundo: var(--cor-apoio-1); }
:root[data-topo-cor="rosa"] { --topo-fundo: var(--cor-destaque); --topo-seta: var(--cor-texto-forte); }
/* transparente: a faixa deixa ver um pouco a página por baixo; atrás de cada texto a cor é cheia, para ler bem */
/* transparência do topo (botão "Transparência" da barra, vale para qualquer cor do topo). Degradê: cor cheia no alto que vai sumindo para baixo, sem linha separando do resto da página. O degradê fica
   num ::before que passa um pouco da faixa, para o fim ser bem suave */
:root[data-topo-transp="degrade"] .topo { background: transparent; }

:root[data-topo-transp="degrade"] .topo::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--e6) * -1);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--topo-cor) 0%,
    color-mix(in srgb, var(--topo-cor) 85%, transparent) 35%,
    color-mix(in srgb, var(--topo-cor) 40%, transparent) 70%,
    transparent 100%);
}
/* só os textos: a faixa some de vez (na cor escolhida e ficam só as pílulas amarelas de cada texto */
:root[data-topo-transp="so-textos"] .topo { background: transparent; }

/* contorno rosa nas pílulas do modo "só os textos" (botão Contorno da barra, ?contorno=rosa), na mesma força dos
   bonequinhos do papel de parede (a cor do traço deles a 45%, como no fundo). Na pílula da direita,
   que é feita de duas peças, a borda não passa pela emenda */
:root[data-topo-transp="so-textos"]:not([data-contorno="sem"]) .topo__marca,
:root[data-topo-transp="so-textos"]:not([data-contorno="sem"]) .topo__acao,
:root[data-topo-transp="so-textos"]:not([data-contorno="sem"]) .topo__abrir {
  border: 2px solid var(--topo-contorno);
}

/* os da direita viram uma pílula só: no computador, links + "Fale comigo"; no celular, "Fale comigo" + menu */
@media (min-width: 761px) {
  :root[data-topo-transp="so-textos"] .topo__nav {
    gap: 0;
    padding-left: var(--e2);
    border-radius: 999px 0 0 999px;
    background: var(--topo-cor);
  }

  :root[data-topo-transp="so-textos"] .topo__nav a {
    background-color: transparent;
  }

  :root[data-topo-transp="so-textos"] .topo__acao {
    margin-left: calc(var(--e5) * -1);
    padding-right: var(--e4);
    border-radius: 0 999px 999px 0;
  }

  :root[data-topo-transp="so-textos"]:not([data-contorno="sem"]) .topo__nav {
    border: 2px solid var(--topo-contorno);
    border-right: 0;
  }

  /* a parte dos links ganha 4 px de borda em volta dos links (44 px); o "Fale comigo" acompanha a mesma altura */
  :root[data-topo-transp="so-textos"]:not([data-contorno="sem"]) .topo__acao {
    min-height: 48px;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  /* no celular o "Fale comigo" sai do topo (está dentro do menu) e o botão do menu fica redondo, sozinho */
  .topo > .topo__acao {
    display: none;
  }

  :root[data-topo-transp="so-textos"] .topo__abrir {
    border-radius: 50%;
  }
}
:root[data-topo-cor="escuro"] { --topo-fundo: var(--cor-texto-forte); --topo-texto: var(--cor-fundo); --topo-seta: var(--cor-destaque); }

.topo[data-escondido]:not(:focus-within) {
  translate: 0 -100%;
}

.topo__abrir {
  border-radius: 50%;
  background-color: var(--topo-cor);
}

.topo__marca,
.topo__nav a,
.topo__acao {
  padding-inline: var(--e3);
  border-radius: 999px;
  background-color: var(--topo-cor);
}

.topo__marca {
  margin-right: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.topo__nav {
  display: flex;
  gap: var(--e2);
}

.topo__nav a,
.topo__acao {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--t-meta);
  font-weight: 600;
  white-space: nowrap;
}

/* sublinhado fino que aparece ao passar o mouse */
.topo__nav a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: var(--e3) calc(50% + 0.8em);
  background-size: 0 1.5px;
  background-repeat: no-repeat;
  transition: background-size 0.25s var(--curva);
}

.topo__nav a:hover {
  background-size: calc(100% - 2 * var(--e3)) 1.5px;
}

/* o convite para o contato: texto escuro (o vermelho pequeno não passa no contraste sobre o amarelo), cor só na seta */
.topo__acao {
  font-weight: 800;
}

.topo__acao::after {
  content: "→";
  margin-left: 0.35em;
  color: var(--topo-seta, var(--cor-apoio-2));
  transition: translate 0.25s var(--curva);
}

.topo__acao:hover::after {
  translate: 3px 0;
}

.topo__abrir {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;

  border: 0;
  color: inherit;
  cursor: pointer;
}

/* dois traços que viram um X quando o menu abre */
.topo__tracos,
.topo__tracos::before {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: rotate 0.25s var(--curva), translate 0.25s var(--curva);
}

.topo__tracos { top: 18px; }
.topo__tracos::before { content: ""; left: 0; top: 7px; }

.topo__abrir[aria-expanded="true"] .topo__tracos { translate: 0 3.5px; rotate: 45deg; }
.topo__abrir[aria-expanded="true"] .topo__tracos::before { translate: 0 -7px; rotate: -90deg; }

@media (max-width: 760px) {
  .topo__abrir {
    display: block;
  }

  .topo__abrir[hidden] {
    display: block;   /* o hidden do HTML é só para quem está sem JS (aí os links não somem) */
  }

  /* sem JS o menu não abre: os links continuam visíveis numa segunda linha */
  html:not([data-topo-js]) .topo { flex-wrap: wrap; }
  html:not([data-topo-js]) .topo__abrir { display: none; }

  /* menu aberto com a cara do site: cartão de contorno grosso e sombra dura, levemente torto, links grandes
     numerados e o "Fale comigo" como pílula vermelha no fim */
  html[data-topo-js] .topo__nav {
    position: absolute;
    top: calc(100% + var(--e2));
    left: var(--e3);
    right: var(--e3);
    flex-direction: column;
    gap: 0;
    padding: var(--e3) var(--e5) var(--e5);
    border: 3px solid var(--cor-texto-forte);
    border-radius: 24px;
    background: var(--cor-fundo);
    color: var(--cor-texto-forte);
    box-shadow: 6px 6px 0 var(--cor-texto-forte);
    rotate: -1deg;
    counter-reset: menu;
    transform-origin: top right;
    transition: opacity 0.2s var(--curva), scale 0.2s var(--curva), visibility 0s 0.2s;
  }

  html[data-topo-js] .topo:not([data-menu-aberto]) .topo__nav {
    visibility: hidden;
    opacity: 0;
    scale: 0.96;
  }

  html[data-topo-js] .topo[data-menu-aberto] .topo__nav {
    transition: opacity 0.2s var(--curva), scale 0.2s var(--curva);
  }

  html[data-topo-js] .topo__nav a {
    min-height: 56px;
    gap: var(--e3);
    padding: 0;
    border-radius: 0;
    border-bottom: 2px dashed color-mix(in srgb, var(--cor-texto-forte) 30%, transparent);
    background: none;
    font-family: var(--fonte-titulo);
    font-size: 1.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }

  html[data-topo-js] .topo__nav a:not(.topo__nav-contato)::before {
    counter-increment: menu;
    content: counter(menu, decimal-leading-zero);
    font-size: var(--t-meta);
    color: var(--cor-apoio-2);
  }

  html[data-topo-js] .topo__nav .topo__nav-contato {
    display: inline-flex;
    align-self: flex-start;
    margin-top: var(--e5);
    padding: 0 var(--e5);
    border: 3px solid var(--cor-texto-forte);
    border-radius: 999px;
    background: var(--cor-apoio-2);
    color: var(--cor-fundo);
    box-shadow: 3px 3px 0 var(--cor-texto-forte);
    font-size: var(--t-lead);
    rotate: -2deg;
  }
}

@media (min-width: 761px) {
  .topo__nav-contato {
    display: none !important;
  }

  .topo__abrir,
  .topo__abrir[hidden] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topo,
  .topo__nav,
  .topo__tracos,
  .topo__tracos::before {
    transition: none !important;
  }
}

.rodape {
  padding: var(--e6) clamp(var(--e4), 6vw, var(--e9)) calc(var(--e9) + var(--e6));
  background: var(--p-forte);
  color: var(--p-sobre-forte);
  font-size: var(--t-meta);
  border-top: 1px solid color-mix(in srgb, var(--p-sobre-forte) 25%, transparent);
}

/* Barra das propostas (só nesta fase de escolha; sai quando a Marcella aprovar uma) */
.propostas {
  position: fixed;
  left: 50%;
  bottom: var(--e4);
  translate: -50% 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--e1);
  padding: var(--e1);
  border-radius: 999px;
  background: var(--cor-texto-forte);
  color: var(--cor-fundo);
  font-family: system-ui, sans-serif;
  font-size: var(--t-meta);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--cor-texto-forte) 35%, transparent);
  max-width: calc(100vw - var(--e5));
  overflow-x: auto;   /* no celular os botões não cabem todos: a barra rola para o lado */
  scrollbar-width: none;
}

.propostas > * {
  flex: none;
}

/* régua (grossura do anel) dentro da barra */
.propostas__regua {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  padding: 0 var(--e3);
  font-weight: 600;
  white-space: nowrap;
}

.propostas__regua input {
  width: 96px;
  accent-color: var(--cor-destaque);
}

.propostas__regua output {
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}

/* versões salvas (Home A…): contorno; a aberta agora fica preenchida */
.propostas .propostas__salva {
  box-shadow: inset 0 0 0 2px var(--cor-destaque);
}

.propostas .propostas__salva[aria-current] {
  background: var(--cor-destaque);
  color: var(--cor-texto-forte);
}

/* barra das animações (tecla A): em cima, separada da outra */
.propostas.propostas--anim {
  top: 80px;
  bottom: auto;
}

html:not([data-ver-animacoes]) .propostas--anim {
  display: none;
}

.propostas--anim button[aria-pressed="true"],
.propostas--anim button[aria-pressed="true"]:hover {
  background: var(--cor-destaque);
  color: var(--cor-texto-forte);
}

/* alça para arrastar a barra */
.propostas .propostas__alca {
  min-width: 36px;
  padding: 0;
  font-size: var(--t-lead);
  cursor: grab;
  touch-action: none;
  opacity: 0.7;
}

.propostas .propostas__alca:active {
  cursor: grabbing;
}

/* × que esconde a barra (a tecla O mostra de novo) */
.propostas .propostas__fechar {
  font-size: var(--t-lead);
  font-weight: 400;
  opacity: 0.7;
}

.propostas .propostas__fechar:hover {
  opacity: 1;
}

.propostas a,
.propostas button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--e3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.propostas a:hover,
.propostas button:hover {
  background: color-mix(in srgb, var(--cor-fundo) 15%, transparent);
}

.propostas a[aria-current="page"] {
  background: var(--cor-fundo);
  color: var(--cor-texto-forte);
}

.propostas button {
  gap: var(--e2);
}

.propostas__amostra {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(var(--p-fundo) 0 50%, var(--p-forma) 0);
  border: 2px solid var(--cor-fundo);
}

[data-miniatura] .propostas {
  display: none;
}

/* ferramentas de escolha (barra das propostas, painel Fotos): só no modo ajuste (tecla O) ou com ?opcoes */
html:not([data-ver-opcoes]) [data-opcoes-do-site] {
  display: none !important;
}

.propostas[data-sem-js] button {
  display: none;
}

.propostas__amostra {
  flex: none;
}

@media (max-width: 480px) {
  .propostas__rotulo {
    display: none;
  }

  /* no celular, "Inverter cores" vira só a bolinha (o nome continua para leitor de tela) */
  .propostas__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Entrada e movimento: só para quem não pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Painel "Fotos" (aberto pela barra das propostas) */
.fotos {
  position: fixed;
  left: 50%;
  bottom: calc(var(--e4) + 60px);
  /* --arrasto: deslocamento no eixo x escolhido pela alça (fotos.js) */
  translate: calc(-50% + var(--arrasto, 0px)) 0;
  z-index: 50;
  width: min(440px, calc(100vw - var(--e5)));
  max-height: calc(100svh - 120px);
  overflow-y: auto;
  padding: var(--e5);
  border-radius: calc(var(--raio) * 2);
  background: var(--cor-texto-forte);
  color: var(--cor-fundo);
  font-family: system-ui, sans-serif;
  font-size: var(--t-meta);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--cor-texto-forte) 40%, transparent);
}

.fotos[hidden] {
  display: none;
}

.fotos__topo {
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

.fotos h2 {
  margin: 0;
  font-size: var(--t-lead);
}

.fotos__alca {
  min-width: 44px;
  min-height: 44px;
  border: 2px solid color-mix(in srgb, var(--cor-fundo) 40%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: var(--t-lead);
  cursor: grab;
  touch-action: none;
}

.fotos--arrastando .fotos__alca {
  cursor: grabbing;
  background: color-mix(in srgb, var(--cor-fundo) 15%, transparent);
}

.fotos--arrastando {
  user-select: none;
}

.fotos__grupo {
  margin: 0 0 var(--e5);
  padding: 0;
  border: 0;
}

.fotos__grupo legend {
  margin-bottom: var(--e3);
  padding: 0;
  font-weight: 700;
}

.fotos__opcoes {
  display: flex;
  gap: var(--e3);
}

.fotos__opcao {
  display: grid;
  justify-items: center;
  gap: var(--e1);
  padding: var(--e1);
  border: 2px solid transparent;
  border-radius: var(--raio);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.fotos__opcao img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.fotos__opcao[aria-pressed="true"] {
  border-color: var(--cor-destaque);
  background: color-mix(in srgb, var(--cor-destaque) 20%, transparent);
}

.fotos__controle {
  display: grid;
  grid-template-columns: 9.5em 1fr 3ch;
  align-items: center;
  gap: var(--e3);
  min-height: 44px;
}

.fotos__controle input {
  width: 100%;
  accent-color: var(--cor-destaque);
}

.fotos__controle output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fotos__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.fotos__acoes button {
  min-height: 44px;
  padding: 0 var(--e4);
  border: 2px solid var(--cor-fundo);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.fotos__acoes .fotos__principal {
  background: var(--cor-fundo);
  color: var(--cor-texto-forte);
}

.fotos__aviso {
  margin: var(--e3) 0 0;
  min-height: 1.5em;
}