/* Blocos deste site, na ordem em que aparecem na página. */

.pagina-404 {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  min-height: 90svh;
  align-content: center;
}
/* A lata vazia: só o contorno tracejado */
.erro-lata { width: min(60%, 14rem); height: auto; margin-bottom: var(--space-4); }
.erro-lata__contorno { fill: none; stroke: var(--color-text-muted); stroke-width: 6; stroke-dasharray: 18 12; stroke-linecap: round; }
.pagina-404 h1 { font-size: clamp(3rem, 9vw + 1rem, 6rem); font-weight: 900; line-height: 0.98; text-transform: uppercase; max-width: 12ch; }
.pagina-404__sub { max-width: 42ch; font-size: var(--text-lg); }
.pagina-404__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-2); }
.pagina-404 .credito { margin-top: var(--space-8); color: var(--color-text-muted); }

/* ── Cabeçalho e topo ── */
.topo-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4.5rem;
}
.topo-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-decoration: none;
}
.topo-marca { font-size: var(--text-2xl); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; }
.topo-marca__icone { width: 36px; height: 36px; flex-shrink: 0; }
.topo-marca__tipo { color: var(--listra-terracota); }
.topo-header__zap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--duration-small) var(--ease-out), border-color var(--duration-small) var(--ease-out);
}
.topo-header__zap:hover { background: var(--color-surface); border-color: var(--color-text-muted); }
.topo-header__zap svg,
.topo__cta svg { width: 20px; height: 20px; flex-shrink: 0; }

.l-terracota { fill: var(--listra-terracota); }
.l-mostarda  { fill: var(--listra-mostarda); }
.l-argila    { fill: var(--listra-argila); }
.l-salvia    { fill: var(--listra-salvia); }
.l-petroleo  { fill: var(--listra-petroleo); }
.l-grafite   { fill: var(--listra-grafite); }

/* Marca: a lata (alça e rótulo; o corpo e a tinta usam as classes de cor) */
.marca__alca { fill: none; stroke: var(--listra-grafite); stroke-width: 2.5; stroke-linecap: round; }
.marca__rotulo { fill: var(--listra-mostarda); }

/* Topo: a lata transborda e o leque se abre atrás. Proporção fixa: não estica em tela larga */
.topo { padding-block: var(--space-8) var(--space-12); }
.topo-lata { width: min(100%, 38rem); height: auto; overflow: visible; }
.lata__alca { fill: none; stroke: var(--color-text-muted); stroke-width: 9; stroke-linecap: round; }
.lata__aro { fill: var(--tinta-escura); }
.lata__rotulo { fill: var(--listra-mostarda); }
.leque__rotulo { fill: var(--branco-gelo); stroke: var(--color-border); stroke-width: 2; }
.leque__pino { fill: var(--tinta-escura); }
/* cada folha gira em volta do pino: do leque fechado ao aberto */
.leque__folha { transform-box: view-box; transform-origin: 470px 336px; transform: rotate(var(--giro)); }
.leque__folha:nth-child(1) { --giro: -42deg; }
.leque__folha:nth-child(2) { --giro: -28deg; }
.leque__folha:nth-child(3) { --giro: -14deg; }
.leque__folha:nth-child(4) { --giro: 0deg; }
.leque__folha:nth-child(5) { --giro: 14deg; }
.leque__folha:nth-child(6) { --giro: 28deg; }

/* Uma vez, ao abrir a página: a tinta escorre e o leque abre (base.css zera em prefers-reduced-motion) */
.topo-lata__tinta {
  transform-box: fill-box;
  transform-origin: top;
  animation: escorrer 900ms var(--ease-out) 150ms both;
}
.leque__folha { animation: abrir-leque 800ms var(--ease-out) 300ms both; }
@keyframes escorrer {
  from { transform: scaleY(0.12); }
}
@keyframes abrir-leque {
  from { transform: rotate(0deg); }
}

.topo__grade { display: grid; gap: var(--space-8); }
.topo__texto {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}
.eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.topo h1 {
  font-size: clamp(3.5rem, 11vw + 1rem, 7rem);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
  max-width: 9ch;
}
.topo__sub { max-width: 34ch; font-size: var(--text-lg); }
.topo__cta { background: var(--color-accent); color: var(--color-on-accent); }
.topo__cta:hover { background: var(--color-accent-hover); }

/* Janela "Este é um site de exemplo": todo contato da empresa fictícia cai aqui */
.exemplo h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 900; line-height: 1; text-transform: uppercase; }
.exemplo__corpo { display: grid; justify-items: start; gap: var(--space-4); }
.exemplo__cores { width: min(100%, 14rem); height: auto; }
.exemplo__mensagem { display: grid; gap: var(--space-2); width: 100%; }
.exemplo__mensagem[hidden] { display: none; }
.exemplo__mensagem-rotulo { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
/* o balão da conversa, com o texto exato que o botão mandaria */
.exemplo__balao { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-sm); background: var(--color-bg-alt); white-space: pre-line; }
.exemplo__zap { background: var(--color-accent); color: var(--color-on-accent); }
.exemplo__zap:hover { background: var(--color-accent-hover); }
.exemplo .link-icone svg { width: 20px; height: 20px; }

/* Faixa no alto: deixa claro, desde a primeira tela, que a empresa é fictícia */
.aviso-exemplo { background: var(--tinta-escura); color: var(--massa); font-size: var(--text-sm); }
.aviso-exemplo__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); min-height: var(--touch-min); }
.aviso-exemplo a { display: inline-flex; align-items: center; min-height: var(--touch-min); font-weight: 600; color: var(--listra-mostarda); text-underline-offset: 0.2em; }
.aviso-exemplo a:hover { color: var(--massa); }
.aviso-exemplo .link-icone svg { width: 16px; height: 16px; }

/* ── Cartela: cada categoria é uma pastilha de cor, como a tira de amostras da loja ── */
/* Fundos alternados entre os blocos: massa, massa escura, massa, escuro (visita), massa, rodapé */
.cartela { padding-block: var(--space-12) var(--space-16); }
.cartela__titulo {
  margin-bottom: var(--space-6);
  font-size: var(--text-5xl);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.cartela__grade { display: grid; gap: var(--space-3); }
.cor {
  container-type: inline-size;
  overflow: hidden;
  border-left: 4.5rem solid var(--cor);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.cor summary {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5) 3.5rem var(--space-5) var(--space-5);
  list-style: none;
  cursor: pointer;
}
.cor summary::-webkit-details-marker { display: none; }
.cor__titulo {
  font-family: var(--font-display);
  /* "IMPERMEABILIZAÇÃO" em Big Shoulders 900 mede ~7,6× a fonte: cabe ao lado do "+" em qualquer largura */
  font-size: clamp(1.25rem, calc((100cqi - 5.5rem) / 7.8), 2.5rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.cor__resumo { color: var(--color-text-muted); }
.cor__sinal {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 26px;
  height: 26px;
  margin-top: -13px;
  transition: transform var(--duration-medium) var(--ease-out);
}
.cor[open] .cor__sinal { transform: rotate(45deg); }
.cor summary:hover .cor__titulo { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.cor summary:focus-visible { outline-offset: -4px; }

.cor::details-content {
  height: 0;
  overflow: hidden;
  transition:
    height var(--duration-medium) var(--ease-out),
    content-visibility var(--duration-medium) allow-discrete;
}
.cor[open]::details-content { height: auto; }
.cor__corpo {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-6);
}
.cor__itens { display: grid; gap: var(--space-2); padding-left: var(--space-5); }
.cor__texto { max-width: 32ch; }
.cor__cta { background: var(--tinta-escura); color: var(--branco-gelo); }
.cor__cta:hover { background: var(--listra-grafite); }
.cor__cta svg { width: 20px; height: 20px; flex-shrink: 0; }

.cor--terracota { --cor: var(--listra-terracota); }
.cor--petroleo  { --cor: var(--listra-petroleo); }
.cor--mostarda  { --cor: var(--listra-mostarda); }
.cor--salvia    { --cor: var(--listra-salvia); }

/* ── Provador: a cor escolhida tinge só a parede do desenho ──
   A camada de tinta tem a forma da parede (máscara) e multiplica com o desenho por baixo:
   a luz da janela e a granulação continuam aparecendo, como numa foto. Sem JS: rádio + :has(). */
.provador { padding-block: var(--space-16); border-block: 1px solid var(--color-border); background: var(--color-bg-alt); }
.provador__grade { display: grid; gap: var(--space-6); }
.provador h2 {
  font-size: var(--text-5xl);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.provador__sub { max-width: 40ch; margin-top: var(--space-3); font-size: var(--text-lg); }
/* A sala fica presa embaixo do cabeçalho enquanto se mexe na roda: a parede muda à vista */
.provador__sala { position: sticky; top: calc(4.5rem + var(--space-2)); z-index: 1; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.provador__sala img { display: block; width: 100%; height: auto; }
.provador__tinta {
  position: absolute;
  inset: 0;
  background: var(--cor-parede, var(--massa));
  mix-blend-mode: multiply;
  mask: url("../img/sala-parede.svg") center / 100% 100% no-repeat;
  transition: background-color 450ms var(--ease-out);
}
.provador:has([value="terracota"]:checked) { --cor-parede: var(--listra-terracota); }
.provador:has([value="mostarda"]:checked)  { --cor-parede: var(--listra-mostarda); }
.provador:has([value="argila"]:checked)    { --cor-parede: var(--listra-argila); }
.provador:has([value="salvia"]:checked)    { --cor-parede: var(--listra-salvia); }
.provador:has([value="petroleo"]:checked)  { --cor-parede: var(--listra-petroleo); }

/* A roda (main.js troca --cor-parede direto no .provador, por cima das seis cores) */
.provador__controles { display: grid; gap: var(--space-6); }
.provador__escolha { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.provador__escolha[hidden] { display: none; }
.provador__roda { min-height: 12rem; }
/* a pastilha do leque: a cor em cima, o nome do tom embaixo */
.provador__pastilha {
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-self: stretch;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.provador__amostra { min-height: 6rem; border-radius: var(--radius-sm); background: var(--cor-parede, var(--massa)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.provador__rotulo { margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.provador__nome { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 900; line-height: 1; text-transform: uppercase; }
.provador__legenda { margin-bottom: var(--space-2); padding: 0; font-size: var(--text-sm); font-weight: 600; }
.provador__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.provador__usos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.provador__usos label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
/* inset -2px: o rádio cobre também a borda, e o alvo fica com os 44px do botão inteiro */
.provador__usos input { position: absolute; inset: -2px; margin: 0; opacity: 0; cursor: pointer; }
.provador__usos label:has(:checked) { border-color: var(--tinta-escura); background: var(--tinta-escura); color: var(--massa); }
.provador__usos label:has(:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.provador__cta { justify-self: start; background: var(--color-accent); color: var(--color-on-accent); }
.provador__cta:hover { background: var(--color-accent-hover); }
.provador__cta svg { width: 20px; height: 20px; flex-shrink: 0; }
.provador__nota { max-width: 44ch; font-size: var(--text-sm); color: var(--color-text-muted); }

.provador__cores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}
.provador__cores .provador__legenda { grid-column: 1 / -1; }
.amostra {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
/* a lata vista de cima: o círculo é a cor, o anel escuro marca a escolhida */
.amostra::before {
  content: "";
  width: 3rem;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--amostra);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  transition: box-shadow var(--duration-small) var(--ease-out);
}
.amostra:has(:checked)::before { box-shadow: 0 0 0 3px var(--massa), 0 0 0 6px var(--tinta-escura); }
/* tom escolhido na roda: nenhuma das seis fica marcada (main.js tira o checked) */
.amostra:has(:focus-visible)::before { outline: 3px solid var(--color-focus); outline-offset: 8px; }
/* o rádio invisível cobre a amostra inteira: o toque cai nele direto e o alvo tem o tamanho da amostra */
.amostra { position: relative; }
.amostra input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.amostra--massa     { --amostra: var(--massa); }
.amostra--terracota { --amostra: var(--listra-terracota); }
.amostra--mostarda  { --amostra: var(--listra-mostarda); }
.amostra--argila    { --amostra: var(--listra-argila); }
.amostra--salvia    { --amostra: var(--listra-salvia); }
.amostra--petroleo  { --amostra: var(--listra-petroleo); }

@media (min-width: 600px) {
  .provador__cores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .provador__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "texto sala" "cores sala";
    align-content: center;
    column-gap: var(--space-12);
  }
  .provador__texto { grid-area: texto; align-self: end; }
  /* a sala acompanha a rolagem enquanto se mexe nos controles */
  .provador__sala { grid-area: sala; top: calc(4.5rem + var(--space-8)); align-self: start; }
  .provador__controles { grid-area: cores; align-self: start; }
  .provador__cores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── Visita à obra ── */
.visita {
  --color-focus: var(--listra-mostarda);
  padding-block: var(--space-16);
  background: var(--tinta-escura);
  color: var(--massa);
}
.visita__grade { display: grid; gap: var(--space-8); }
.visita__parede { width: min(80%, 18rem); height: auto; }
.visita__contorno { fill: none; stroke: var(--massa); stroke-width: 3; }
.visita__janela { fill: var(--tinta-escura); stroke: var(--massa); stroke-width: 3; }
.visita__chao { stroke: var(--massa); stroke-width: 4; stroke-linecap: round; }
.visita__cota { fill: none; stroke: var(--listra-mostarda); stroke-width: 2.5; stroke-linecap: round; }
.visita__cota-texto { font-family: var(--font-display); font-size: 22px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--listra-mostarda); }
.visita__texto {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}
.visita h2 {
  font-size: var(--text-5xl);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
}
.visita__sub { max-width: 40ch; font-size: var(--text-lg); }
.visita__cta { background: var(--listra-mostarda); color: var(--tinta-escura); }
.visita__cta:hover { background: var(--massa); }
.visita__cta svg { width: 20px; height: 20px; flex-shrink: 0; }

/* A parede é pintada do chão ao teto enquanto entra na tela (só onde há suporte; sem ele, aparece pronta) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* A régua é o desenho inteiro: começa com a parede toda à vista e termina quando ela chega ao meio da tela */
    .visita__parede { view-timeline-name: --parede; }
    .visita__tinta {
      transform-box: fill-box;
      transform-origin: bottom;
      animation: subir-tinta linear both;
      animation-timeline: --parede;
      animation-range: entry 100% cover 50%;
    }
  }
}

/* ── Onde estamos: a loja ── */
.onde { padding-block: var(--space-16); }
.onde h2 {
  margin-top: var(--space-3);
  font-size: var(--text-5xl);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
}
.onde__grade { display: grid; gap: var(--space-8); }
/* Cada loja é uma "fachada": faixa de cor no topo, como a placa da rua */
.loja {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-top: var(--space-2) solid var(--loja-cor);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.loja { --loja-cor: var(--listra-terracota); box-shadow: var(--shadow-md); }
.loja h3 {
  font-size: var(--text-4xl);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.loja__nome { margin-top: calc(-1 * var(--space-3)); font-weight: 600; color: var(--color-text-muted); }
.loja__endereco { font-style: normal; font-size: var(--text-lg); }
.loja__horario dt { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.loja__extra { font-weight: 600; }
/* Botões na base: os cartões lado a lado ficam alinhados mesmo com linhas a mais */
.loja__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.loja__zap { background: var(--color-accent); color: var(--color-on-accent); }
.loja__zap:hover { background: var(--color-accent-hover); }
.loja__mapa { border-color: var(--color-border); }
.loja__mapa:hover { border-color: var(--color-text-muted); }
.loja__acoes svg { width: 20px; height: 20px; flex-shrink: 0; }


/* ── Rodapé ── */
.rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
}
.rodape__marca { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.rodape__icone { width: 48px; height: 48px; flex-shrink: 0; }
.rodape__marca strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 900; text-transform: uppercase; }
.credito a { color: inherit; text-underline-offset: 0.2em; }
.rodape__fim { padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

@media (min-width: 900px) {
  /* Texto à esquerda e a lata à direita */
  .topo { padding-block: var(--space-16); }
  .topo__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-16);
  }
  .topo-lata { grid-column: 2; grid-row: 1; width: min(100%, 34rem); justify-self: end; }
  .topo__texto { grid-column: 1; grid-row: 1; }
  .topo__sub { max-width: 38ch; }
  .onde { padding-block: var(--space-24); }
  .onde__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--space-16); }
  .onde h2 { font-size: clamp(3rem, 5vw, 5rem); max-width: 12ch; }
  .loja { padding: var(--space-10) var(--space-8) var(--space-8); }
  .visita { padding-block: var(--space-24); }
  .visita__grade {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    column-gap: var(--space-16);
  }
  .visita__parede { width: min(100%, 24rem); justify-self: center; }
  .visita h2 { font-size: clamp(3rem, 5vw, 5rem); }
  /* Todas abertas (main.js): a pastilha é só título, sem "+" nem clique */
  .cartela { padding-block: var(--space-24); }
  .cartela__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .cor summary { padding-right: var(--space-5); cursor: default; }
  .cor summary:hover .cor__titulo { text-decoration: none; }
  .cor__sinal { display: none; }
  /* Botões alinhados na base, mesmo com listas de alturas diferentes */
  .cor { display: flex; flex-direction: column; }
  .cor[open]::details-content { display: flex; flex: 1; }
  .cor__corpo { flex: 1; grid-template-rows: 1fr auto; }
  .cor__itens { align-content: start; }
}

@keyframes subir-tinta {
  from { transform: scaleY(0); }
}