:root {
  --preto: #0E0E0E;
  --branco: #FFFFFF;
  --cinza-fundo: #F5F5F7;
  --cinza-borda: #D4D4D8;
  --cinza-texto: #6E6E74;
  --cinza-claro: #A8A8AE;
  --prata: linear-gradient(135deg, #FFFFFF, #C4C4C8 38%, #8E8E94 56%, #EDEDF1 76%, #ABABB1);
  --raio: 28px;
  --raio-pilula: 40px;
}

/* a Aileron ainda não tem arquivo na pasta: no celular de quem entra
   ela cai pra Helvetica. Falta o .woff2 aqui em fontes/. */
@font-face {
  font-family: "Aileron";
  src: local("Aileron");
  font-display: swap;
}

/* a Anomega é só da logo — e agora é servida pelo site, não depende
   de estar instalada na máquina de quem visita */
@font-face {
  font-family: "Anomega";
  src: local("Anomega"), url("fontes/Anomega.otf") format("opentype");
  font-display: swap;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: Aileron, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
img { display: block; max-width: 100%; }

.logo-texto { font-family: Anomega, Aileron, "Helvetica Neue", sans-serif; }

/* ---------- animações ---------- */
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes corre { to { transform: translateX(-50%); } }
@keyframes flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes pulsa {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.1) translate(14px, -10px); }
}

.gira { animation: gira 11s linear infinite; }
.gira-lento { animation: gira 34s linear infinite; }
.flutua-1 { animation: flutua 5s ease-in-out infinite; }
.flutua-2 { animation: flutua 5s ease-in-out 1.4s infinite; }
.flutua-3 { animation: flutua 5s ease-in-out 2.6s infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- barras que correm ---------- */
.corre { display: flex; width: max-content; animation: corre 26s linear infinite; }
.corre:hover { animation-play-state: paused; }
.corre i { font-style: normal; opacity: .65; padding: 0 .4em; }

.barra-story {
  background: var(--preto); color: var(--branco);
  padding: 9px 0; overflow: hidden;
  font-size: 10px; font-weight: 600; letter-spacing: .18em;
}
.barra-story span { white-space: nowrap; padding-right: 22px; }

.barra-marcas {
  background: var(--preto); color: var(--branco);
  overflow: hidden; padding: 14px 0;
}
.corre-marcas { animation-duration: 34s; }
.item-marca {
  display: inline-flex; align-items: center; gap: 30px;
  white-space: nowrap; padding-right: 30px;
}
.item-marca img {
  height: 30px; width: auto; max-width: 150px; object-fit: contain;
}
/* a barra tem altura certa antes de as logos chegarem */
.corre-marcas { min-height: 30px; }
.item-marca .sem-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 10px; border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--raio-pilula); font-size: 8px; letter-spacing: .14em; color: rgba(255,255,255,.6);
}
.item-marca b {
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--branco);
}
.item-marca .sep { opacity: .5; font-size: 14px; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 18px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cinza-borda);
}
.marca { display: flex; align-items: center; gap: 9px; }
.estrela { width: 14px; height: 14px; fill: var(--preto); flex: none; }
.logo-texto { font-size: 15px; font-weight: 700; letter-spacing: .13em; }
.tagline { font-size: 10px; letter-spacing: .14em; color: var(--cinza-texto); }
.nav { display: flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .13em; font-weight: 600; margin-left: auto; }
.expor-topo {
  flex: none; display: inline-flex; align-items: center; white-space: nowrap;
  border-radius: var(--raio-pilula); padding: 11px 16px;
  font-size: 10px; letter-spacing: .13em; font-weight: 600;
}
.abre-menu { display: none; }
.nav a { background: var(--cinza-fundo); border-radius: var(--raio-pilula); padding: 11px 16px; transition: background .2s, color .2s; }
.nav a:hover { background: var(--cinza-borda); }
.botao-preto { background: var(--preto) !important; color: var(--branco); }
.botao-preto:hover { background: #2A2A2E !important; }

/* ---------- hero ---------- */
.hero {
  position: relative; margin: 14px; overflow: hidden;
  border-radius: 44px; background: var(--cinza-fundo);
  min-height: 540px; padding: 34px 34px 30px;
  display: flex; flex-direction: column;
}
.blob { position: absolute; border-radius: 50%; animation: pulsa 12s ease-in-out infinite; pointer-events: none; }
.blob-a {
  bottom: -180px; left: -130px; width: 500px; height: 500px; opacity: .34;
  background: linear-gradient(145deg, #FFFFFF, #CFCFD4 36%, #8E8E94 56%, #F2F2F6 76%, #AFAFB5);
}
.blob-b {
  top: -140px; right: -90px; width: 320px; height: 320px; opacity: .3; animation-delay: 4s;
  background: linear-gradient(210deg, #FFFFFF, #E2E2E6 44%, #A8A8AE 70%, #F4F4F8);
}
.estrela-solta { position: absolute; pointer-events: none; }
/* a cadeira em 3D (site.js → cadeira3d.js): cobre o hero inteiro, entra
   suave por cima da foto; a foto fica (invisível) só pra dar a medida */
.cadeira-3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.hero.tem-3d .cadeira-3d { opacity: 1; }
.hero.tem-3d .cadeira, .hero.tem-3d .estrela-solta { opacity: 0; transition: opacity .9s ease; }
.estrela-grande { width: 120px; height: 120px; bottom: 34px; right: 5%; left: auto; opacity: .85; }
.estrela-media { width: 52px; height: 52px; top: 58px; left: 3%; right: auto; opacity: .8; }

.nome {
  position: relative; z-index: 2;
  font-family: Anomega, Aileron, "Helvetica Neue", sans-serif;
  font-weight: 700; font-size: clamp(88px, 25vw, 344px);
  line-height: .8; letter-spacing: -.035em;
  margin: 10px 0 0 -.03em; white-space: nowrap;
}
.cadeira {
  position: absolute; z-index: 3;
  top: 6%; right: 1%; left: auto; width: min(330px, 37%); height: auto;
  transform: none;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
  filter: drop-shadow(0 24px 48px rgba(14,14,14,.14));
}

.pilula {
  position: relative; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--raio-pilula); padding: 9px 16px;
  font-size: 10px; letter-spacing: .13em; font-weight: 600;
  background: var(--branco);
}
.pilula.prata { background: var(--prata); }
.pilula.preta { background: var(--preto); color: var(--branco); }
.pilula.branca { background: var(--branco); color: var(--cinza-texto); }
.bolinha { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hero .pilula { position: absolute; }
.flutua-1 { top: 74px; left: 30px; }
.flutua-2 { top: 190px; right: 30px; }
.flutua-3 { top: 300px; left: 24%; }

.chamada {
  position: relative; z-index: 4;
  margin-top: auto; max-width: min(560px, 62%);
  font-size: clamp(26px, 4.4vw, 58px); font-weight: 700;
  line-height: .98; letter-spacing: -.035em; text-transform: uppercase;
}
.rodape-hero {
  position: relative; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px;
}
.rodape-hero .pilula { position: static; }

/* ---------- seções ---------- */
section { padding: 52px 30px; }
.cabeca-secao {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 16px; margin-bottom: 18px;
}
/* rótulo não quebra no meio: se os dois não cabem lado a lado, o
   segundo desce inteiro pra linha de baixo */
.cabeca-secao .rotulo { white-space: nowrap; }
.rotulo { font-size: 10px; letter-spacing: .16em; font-weight: 600; color: var(--cinza-texto); }
/* O nome da seção na fonte da logo, como nos stories. Antes era um
   rótulo de 10px e o meio da página não tinha nada da cara do Coolab. */
.titulo-secao {
  margin: 0; font-family: Anomega, Aileron, "Helvetica Neue", sans-serif; font-weight: 400;
  font-size: clamp(34px, 5.4vw, 64px); line-height: .95; letter-spacing: .005em;
}
.cabeca-secao:has(.titulo-secao) { align-items: flex-end; margin-bottom: 22px; }

.filtros { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.filtros button {
  border: 1px solid var(--cinza-borda); background: var(--branco); color: var(--preto);
  border-radius: var(--raio-pilula); padding: 11px 18px; min-height: 44px; cursor: pointer;
  font-family: inherit; font-size: 10px; letter-spacing: .13em; font-weight: 600;
  transition: background .18s, color .18s, border-color .18s;
}
.filtros button:hover { border-color: var(--preto); }
.filtros button[aria-pressed="true"] { background: var(--preto); color: var(--branco); border-color: var(--preto); }

/* ---------- marcas ---------- */
.grade-marcas {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.card-marca {
  display: flex; flex-direction: column; gap: 11px;
  background: none; border: 0; padding: 0; text-align: left;
  font-family: inherit; color: inherit; cursor: pointer;
}
.card-marca .quadro {
  position: relative; border-radius: var(--raio); overflow: hidden;
  background: var(--cinza-fundo); aspect-ratio: 4 / 5;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.card-marca:hover .quadro { transform: translateY(-6px); }
.card-marca .quadro img { width: 100%; height: 100%; object-fit: cover; }
.card-marca .vazio {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: .14em; color: var(--cinza-claro);
}
.card-marca .logo-redonda {
  position: absolute; left: 10px; bottom: 10px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--branco); display: flex; align-items: center; justify-content: center;
  font-size: 8px; letter-spacing: .12em; color: var(--cinza-claro); overflow: hidden;
}
.card-marca .logo-redonda img { width: 74%; height: 74%; object-fit: contain; }
.card-marca .etiqueta {
  position: absolute; right: 10px; top: 10px;
  background: var(--branco); border-radius: var(--raio-pilula);
  padding: 6px 12px; font-size: 9px; letter-spacing: .13em; font-weight: 600;
}
.card-marca .aviso {
  position: absolute; left: 10px; top: 10px;
  background: var(--preto); color: var(--branco); border-radius: var(--raio-pilula);
  padding: 6px 12px; font-size: 9px; letter-spacing: .13em; font-weight: 600;
}
.card-marca h3 { font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.card-marca .cat { display: block; font-size: 10px; letter-spacing: .12em; color: var(--cinza-texto); margin-top: 3px; }

/* ---------- detalhe da marca: a placa da loja virou tela ----------
   Mesma montagem das placas físicas (Canva "PLACAS.JUL 2026"): logo da
   marca grande, o texto dela, os links, e a foto sangrando na lateral.
   O dialog do formulário continua estreito — por isso a largura é por id. */
dialog {
  border: 0; padding: 0; border-radius: var(--raio);
  background: var(--branco); color: var(--preto);
  width: min(560px, calc(100vw - 32px));
}
#detalheMarca { width: min(940px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: hidden; }
dialog::backdrop { background: rgba(14,14,14,.55); backdrop-filter: blur(3px); }

.placa { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; min-height: 520px; }
.placa-texto {
  padding: 34px 32px 26px; display: flex; flex-direction: column;
  overflow-y: auto; max-height: calc(100dvh - 40px);
}
.placa .fechar {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  border: 1px solid var(--cinza-borda); background: var(--branco); cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%; font-size: 16px; font-family: inherit;
}
.placa .fechar:hover { border-color: var(--preto); }

/* a logo mantém a cor da marca, como nas placas e como no Instagram delas */
.placa-logo { margin-bottom: 20px; }
.placa-logo img { height: clamp(42px, 5vw, 60px); width: auto; max-width: 260px; object-fit: contain; object-position: left; display: block; }
.placa-logo .nome-grande { font-family: Anomega, Aileron, sans-serif; font-size: 46px; line-height: 1; }

.placa-sobre { font-size: 13.5px; line-height: 1.65; color: #3C3C40; margin: 0 0 18px; }

.placa-creator { background: var(--cinza-fundo); border-radius: 20px; padding: 15px 17px; margin-bottom: 20px; }
.placa-creator .rot { display: block; font-size: 9px; letter-spacing: .16em; font-weight: 600; color: var(--cinza-texto); margin-bottom: 5px; }
.placa-creator b { font-size: 18px; letter-spacing: -.02em; }
.placa-creator p { font-size: 12.5px; line-height: 1.55; color: #3C3C40; margin: 7px 0 0; }

/* na placa impressa aqui tem um QR, porque a pessoa está de pé na loja.
   No site ela já está no celular — então é link mesmo. */
.placa-links {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--cinza-borda); border-radius: 18px; padding: 8px; margin-bottom: 14px;
}
.placa-links a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 12px; font-size: 14px;
  transition: background .2s;
}
.placa-links a:hover { background: var(--cinza-fundo); }
.placa-links svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.placa-links svg .cheio { fill: currentColor; stroke: none; }

.placa-peca { font-size: 9.5px; letter-spacing: .14em; font-weight: 600; color: var(--cinza-texto); }

.placa-rodape {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 20px;
  font-size: 9px; letter-spacing: .14em; font-weight: 600; color: var(--cinza-claro);
}
.placa-rodape i { font-style: normal; font-size: 7px; }
.placa-rodape .logo-texto { font-family: Anomega, Aileron, sans-serif; font-size: 13px; letter-spacing: .02em; color: var(--preto); }

.placa-foto { position: relative; background: var(--cinza-fundo); }
.placa-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* o mesmo véu claro das placas, pra foto não brigar com o texto ao lado */
.placa-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--branco), rgba(255,255,255,0) 22%);
}

@media (max-width: 760px) {
  /* no celular a placa deita: foto em cima, texto embaixo */
  .placa { grid-template-columns: 1fr; min-height: 0; }
  .placa-foto { order: -1; aspect-ratio: 4 / 3; }
  .placa-foto::before { background: linear-gradient(0deg, var(--branco), rgba(255,255,255,0) 26%); }
  .placa-texto { padding: 22px 20px 20px; max-height: none; }
  #detalheMarca { max-height: calc(100dvh - 24px); overflow-y: auto; }
}

/* as peças da marca, dentro da placa dela */
.placa-pecas { margin-bottom: 16px; }
.placa-pecas .rot { display: block; font-size: 9px; letter-spacing: .16em; font-weight: 600; color: var(--cinza-texto); margin-bottom: 9px; }
.fila-pecas { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.fila-pecas::-webkit-scrollbar { display: none; }
.fila-pecas figure { flex: none; width: 104px; margin: 0; }
.fila-pecas img { width: 104px; height: 104px; object-fit: cover; border-radius: 14px; background: var(--cinza-fundo); display: block; }
.fila-pecas figcaption { font-size: 10.5px; line-height: 1.35; color: var(--cinza-texto); margin-top: 6px; }
.fila-pecas figcaption i { font-style: normal; color: var(--preto); font-weight: 600; }

/* ---------- expor ---------- */
.manchete {
  font-family: Anomega, Aileron, "Helvetica Neue", sans-serif; font-weight: 400;
  font-size: clamp(40px, 7vw, 88px);
  line-height: .95; letter-spacing: .005em; text-transform: uppercase;
  max-width: 880px; margin-bottom: 30px;
}
.colunas { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 30px; }
.colunas .num { display: block; font-size: 18px; line-height: 1; color: var(--preto); margin-bottom: 9px; }
.colunas .txt { font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.22; text-transform: uppercase; }

.halftone { position: relative; margin: 0 0 26px; border-radius: var(--raio); overflow: hidden; height: clamp(200px, 32vw, 300px); }
/* A retícula tinha contraste 2.4: a foto virava mancha preta e não dava
   pra ver a loja. Agora ela é uma retícula mesmo — preto e branco com
   ponto miúdo, mas com a imagem ainda legível por baixo. */
.halftone img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: grayscale(1) contrast(1.22) brightness(1.06); }
.halftone span { position: absolute; inset: 0; pointer-events: none; }
.pontos-claros { background-image: radial-gradient(circle, #FFF .7px, transparent .95px); background-size: 3px 3px; mix-blend-mode: screen; opacity: .8; }
.pontos-escuros { background-image: radial-gradient(circle, #0E0E0E .55px, transparent .8px); background-size: 3px 3px; background-position: 1.5px 1.5px; mix-blend-mode: multiply; opacity: .75; }

.expor-rodape { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.expor-rodape h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; text-transform: uppercase; max-width: 470px; }
.expor-rodape p { width: min(380px, 100%); font-size: 12px; line-height: 1.65; color: #3C3C40; text-decoration: underline; text-underline-offset: 3px; }

.botao-grande {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--preto); color: var(--branco);
  border-radius: var(--raio-pilula); padding: 18px 20px 18px 28px;
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  transition: transform .25s;
}
.botao-grande:hover { transform: translateY(-3px); }
/* Pedido de marca (expor, dar oficina) fala baixo: contorno. Preto e
   cheio fica pra ação de cliente — vaga, rota, aviso. Antes era o
   contrário e o site gritava mais com quem vende do que com quem compra. */
.botao-grande.contorno { background: var(--branco); color: var(--preto); box-shadow: inset 0 0 0 1.5px var(--preto); }
.botao-grande.contorno .seta { background: var(--preto); color: var(--branco); }
.botao-grande .seta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; background: var(--prata); color: var(--preto); font-size: 15px;
}

/* ---------- oficinas ---------- */
.grade-oficinas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 26px; }
.card-oficina {
  border-radius: var(--raio); background: var(--cinza-fundo);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s;
}
.foto-oficina {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--branco);
}
.foto-oficina img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
/* cartaz da oficina: aparece inteiro, sem cortar o texto da arte */
.foto-oficina.cartaz { background: var(--cinza-fundo); }
.foto-oficina.cartaz img { object-fit: contain; padding: 10px; }
.card-oficina:hover .foto-oficina.cartaz img { transform: none; }
.card-oficina:hover .foto-oficina img { transform: scale(1.05); }
.foto-oficina .vazio {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: .14em; color: var(--cinza-claro);
}
.foto-oficina .tec {
  position: absolute; left: 12px; top: 12px;
  background: var(--branco); color: var(--preto);
  border-radius: var(--raio-pilula); padding: 7px 13px;
}
.corpo-oficina { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex-grow: 1; }
.card-oficina:hover { transform: translateY(-5px); background: var(--preto); color: var(--branco); }
.card-oficina .tec { font-size: 9px; letter-spacing: .14em; font-weight: 600; }
.card-oficina:hover .tec, .card-oficina:hover .meta { color: var(--cinza-claro); }
.card-oficina h3 { font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.card-oficina p { font-size: 13px; line-height: 1.5; }
.nota-oficinas { font-size: 12.5px; line-height: 1.6; color: var(--cinza-texto); margin: 20px 0 0; }
.nota-oficinas a { text-decoration: underline; text-underline-offset: 3px; color: var(--preto); }
.card-oficina .meta { font-size: 11px; color: var(--cinza-texto); margin-top: auto; padding-top: 8px; }

/* sem foto: fundo cinza liso em vez de um [FOTO] escrito na cara de quem entrou */
.foto-oficina.sem-foto { background: var(--preto); display: flex; align-items: flex-end; }
/* oficina sem foto mostra o nome em vez de um bloco cinza vazio */
.capa-texto {
  display: block; padding: 0 20px 18px; color: var(--branco);
  font-size: clamp(34px, 9vw, 46px); font-weight: 700; letter-spacing: -.04em; line-height: .92;
  text-transform: uppercase;
}

/* quem tem ingresso no Sympla mostra que dá pra comprar. Sem isto o card
   parecia clicável e levava pra lugar nenhum. */
.cta-oficina {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 14px; padding: 0 22px; min-height: 46px;
  background: var(--preto); color: var(--branco);
  border: 1px solid var(--preto); border-radius: var(--raio-pilula);
  font-size: 11.5px; letter-spacing: .1em; font-weight: 700; text-transform: uppercase;
  transition: background .25s, color .25s, border-color .25s;
}
.cta-oficina i { font-style: normal; transition: transform .25s; }
.card-oficina:hover .cta-oficina { background: var(--branco); color: var(--preto); border-color: var(--branco); }
.card-oficina:hover .cta-oficina i { transform: translateX(3px); }

/* ---------- empresas ---------- */
.empresas { background: var(--cinza-fundo); }
.grade-empresas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card-empresa {
  background: var(--branco); border-radius: var(--raio); padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.card-empresa.destaque { background: var(--preto); color: var(--branco); }
.num-empresa { font-size: 11px; letter-spacing: .18em; font-weight: 600; color: var(--cinza-texto); }
.card-empresa.destaque .num-empresa { color: var(--cinza-claro); }
.card-empresa h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.card-empresa p { font-size: 14px; line-height: 1.6; }
.inclui { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.inclui li { font-size: 12px; letter-spacing: .02em; padding-left: 16px; position: relative; color: var(--cinza-texto); }
.card-empresa.destaque .inclui li { color: var(--cinza-claro); }
.inclui li::before { content: "✦"; position: absolute; left: 0; opacity: .6; }
.largo { width: 100%; justify-content: space-between; }
.botao-branco {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--branco); border: 1px solid var(--preto); color: var(--preto);
  border-radius: var(--raio-pilula); padding: 15px 22px;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background .2s;
}
.botao-branco:hover { background: var(--cinza-fundo); }
.card-empresa .botao-preto, .card-empresa .botao-branco {
  padding: 15px 22px; font-size: 14px; letter-spacing: 0;
  display: inline-flex; align-items: center; margin-top: auto;
}

/* ---------- chegar ---------- */
.chegar-corpo { display: grid; gap: 22px 48px; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); align-items: start; }
.chegar-acoes { display: flex; flex-direction: column; gap: 11px; }
.chegar-acoes .botao-preto {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 17px 22px; font-size: 14px; letter-spacing: 0; border: 0;
  font-family: inherit; cursor: pointer; border-radius: var(--raio-pilula);
}
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.resultado-distancia {
  border: 1px solid var(--preto); border-radius: var(--raio-pilula);
  padding: 15px 22px; display: flex; align-items: baseline; gap: 10px;
}
.resultado-distancia b { font-size: 25px; letter-spacing: -.02em; }
.resultado-distancia span { font-size: 12px; color: var(--cinza-texto); }
.nota-mapa { font-size: 12px; line-height: 1.5; color: var(--cinza-texto); }


.porta-foto { margin: 0; position: relative; border-radius: var(--raio); overflow: hidden; background: var(--cinza-fundo); }
.porta-foto img { width: 100%; height: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 46%; display: block; }
.porta-foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 20px 18px; font-size: 13px; line-height: 1.5; color: var(--branco);
  background: linear-gradient(0deg, rgba(14,14,16,.88), rgba(14,14,16,0));
}
.porta-foto figcaption b { display: block; font-size: 19px; letter-spacing: -.02em; margin-bottom: 3px; }

/* ---------- rodapé ---------- */
.rodape { padding: 30px; border-top: 1px solid var(--cinza-borda); }
.horarios { font-size: 11px; letter-spacing: .1em; color: var(--cinza-texto); margin-bottom: 14px; line-height: 1.8; }
.horarios b { color: var(--preto); }
.assinatura {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 14px; border-top: 1px solid var(--cinza-borda);
  font-size: 11px; letter-spacing: .06em; color: #3C3C40;
}
.assinatura i { font-style: normal; opacity: .6; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .topo { padding: 10px 14px; }
  .tagline { display: none; }
  /* o menu vira painel que abre embaixo do topo. Antes era uma faixa
     que rolava pro lado e escondia 4 dos 6 itens sem avisar. */
  .topo { gap: 8px; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--branco); border-bottom: 1px solid var(--cinza-borda);
    padding: 6px 14px 14px; margin: 0;
    font-size: 13px; box-shadow: 0 18px 30px rgba(14,14,14,.08);
  }
  .topo.aberto .nav { display: flex; }
  .nav a {
    background: none; border-radius: 0; padding: 0 4px; min-height: 52px;
    display: flex; align-items: center; border-bottom: 1px solid var(--cinza-fundo);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a:hover { background: none; }
  .expor-topo { margin-left: auto; padding: 0 14px; min-height: 44px; font-size: 9.5px; }
  .abre-menu {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
    background: var(--cinza-fundo); cursor: pointer;
  }
  .abre-menu span { display: block; width: 16px; height: 1.6px; background: var(--preto); transition: transform .25s; }
  .topo.aberto .abre-menu span:first-child { transform: translateY(3.3px) rotate(45deg); }
  .topo.aberto .abre-menu span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

  /* No celular a cadeira cobria do segundo O em diante e o B passava da
     borda: dava pra ler "COO" e mais nada. A cadeira sobe pra cima do
     nome e o nome ocupa a largura exata. */
  .hero { margin: 10px; padding: 158px 20px 20px; min-height: 0; border-radius: 32px; }
  .nome { margin-top: 0; font-size: 22vw; }
  .cadeira { top: 14px; right: 10px; width: 44%; }
  .chamada { max-width: 100%; }
  .estrela-grande { width: 44px; height: 44px; top: 28px; left: 22px; bottom: auto; right: auto; }
  .estrela-media { display: none; }
  .chamada { margin-top: 18px; }

  section { padding: 38px 18px; }
  .grade-marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-empresa { padding: 22px; }
  .botao-grande { width: 100%; font-size: 16px; padding: 12px 14px 12px 24px; }
  .botao-grande .seta { width: 36px; height: 36px; }
  .rodape { padding: 22px 18px; }
  .assinatura { font-size: 10px; }
}

button.botao-preto, button.botao-grande, button.botao-branco {
  border: 0; font-family: inherit; cursor: pointer;
}
button.botao-branco { border: 1px solid var(--preto); }
.card-empresa button.botao-preto, .card-empresa button.botao-branco {
  justify-content: space-between; width: 100%;
}

/* ---------- na arara agora ---------- */
.faixa-arara {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -18px; padding: 0 18px 6px; scroll-padding-inline: 18px; scrollbar-width: none;
}
.faixa-arara::-webkit-scrollbar { display: none; }
/* o lugar da faixa fica guardado até as peças chegarem (o site no ar
   busca no banco): sem isso a página inteira descia quando elas chegavam */
.faixa-arara:empty { min-height: 203px; }
.peca-arara {
  position: relative; flex: none; width: 148px; scroll-snap-align: start;
  border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-family: inherit;
}
.peca-arara img { width: 148px; height: 148px; object-fit: cover; border-radius: 20px; display: block; background: var(--cinza-fundo); }
.peca-arara .selo-unica { top: 8px; left: 8px; }
.peca-arara b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin-top: 9px; color: var(--preto); }
.peca-arara span:last-child { display: block; font-size: 10.5px; letter-spacing: .08em; color: var(--cinza-texto); margin-top: 3px; text-transform: uppercase; }
@media (min-width: 861px) {
  .faixa-arara { margin: 0; padding: 0 0 6px; }
  .peca-arara, .peca-arara img { width: 188px; }
  .peca-arara img { height: 188px; }
  .faixa-arara:empty { min-height: 243px; }
}

/* o selo "peça única" é usado solto na faixa */
.selo-unica {
  position: absolute; z-index: 2;
  background: var(--preto); color: var(--branco); border-radius: var(--raio-pilula);
  padding: 5px 10px; font-size: 8.5px; letter-spacing: .13em; font-weight: 700;
}

/* ---------- me avisa ---------- */
.caixa-avisa {
  display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: center;
  background: var(--preto); color: var(--branco);
  border-radius: var(--raio); padding: 34px 30px;
}
.caixa-avisa h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.caixa-avisa p { font-size: 13px; line-height: 1.6; color: var(--cinza-claro); margin-top: 10px; max-width: 380px; }
.form-avisa { display: flex; flex-wrap: wrap; gap: 10px; }
.form-avisa input {
  flex: 1 1 200px; min-width: 0;
  background: transparent; color: var(--branco);
  border: 1px solid #3A3A40; border-radius: var(--raio-pilula);
  padding: 15px 20px; font-size: 14px; font-family: inherit;
}
.form-avisa input::placeholder { color: #6E6E74; }
.form-avisa input:focus { outline: none; border-color: var(--branco); }
.form-avisa .botao-branco { flex: none; }
.recado-avisa { flex: 1 0 100%; font-size: 12px; margin: 2px 0 0; color: var(--cinza-claro); }
.recado-avisa.erro { color: #FFB4B4; }
.recado-avisa.pronto { font-size: 15px; color: var(--branco); margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- na mídia ---------- */
/* cada matéria é uma janelinha do site que publicou: barra de endereço em cima,
   miniatura ao lado do título. Compacto — é prova social, não o assunto da página. */
.lista-midia { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.item-midia {
  display: flex; flex-direction: column;
  border: 1px solid var(--cinza-borda); border-radius: 18px; overflow: hidden;
  background: var(--branco);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.item-midia:hover { transform: translateY(-3px); border-color: #C9C9CF; box-shadow: 0 10px 26px rgba(0,0,0,.08); }

.barra-navegador {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--cinza-fundo);
  border-bottom: 1px solid var(--cinza-borda);
}
.bolinhas { display: flex; gap: 4px; flex: none; }
.bolinhas i { width: 5px; height: 5px; border-radius: 50%; background: #D3D3DA; }
.endereco {
  flex: 1; min-width: 0; font-size: 9px; letter-spacing: .02em; color: var(--cinza-texto);
  background: var(--branco); border-radius: var(--raio-pilula);
  padding: 3px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seta-midia { flex: none; font-size: 11px; color: var(--cinza-texto); transition: transform .25s; }
.item-midia:hover .seta-midia { transform: translate(3px, -3px); }

/* miniatura à esquerda, texto à direita */
.corpo-materia { display: flex; align-items: center; gap: 12px; padding: 12px; }
.foto-materia, .capa-logo {
  flex: none; width: 72px; height: 72px; border-radius: 12px;
  background: var(--cinza-fundo); overflow: hidden;
}
.foto-materia { object-fit: cover; display: block; }
.capa-logo { display: flex; align-items: center; justify-content: center; padding: 8px; }
.capa-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* se a miniatura já é a logo, não repete a logo pequena no texto */
.corpo-materia:has(.capa-logo) .logo-veiculo { display: none; }

.texto-materia { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.logo-veiculo { height: 14px; width: auto; max-width: 96px; object-fit: contain; object-position: left; align-self: flex-start; }
.titulo-midia { font-size: 13px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.data-midia { font-size: 10px; letter-spacing: .1em; color: var(--cinza-texto); }
.vazio-midia { font-size: 11px; letter-spacing: .14em; color: var(--cinza-claro); padding: 22px 0; }

@media (max-width: 860px) {
  .lista-midia { grid-template-columns: 1fr; }
}

/* ── A PEÇA-ASSINATURA ────────────────────────────────────────────────
   O cartão da marca já dizia o nome da peça ("✦ THE CARIOCA CHARM") e
   não mostrava nenhuma. Nome de peça sem foto é promessa: quem lê não
   sabe se quer, e a loja vive de dar vontade.

   A foto vem recortada dos stories da marca — é a mesma imagem que ela
   já usa pra se apresentar, então o site e o Instagram contam a mesma
   história em vez de duas. */
.peca-foto {
  margin: 20px 0 0;
}
.peca-foto img {
  width: 100%;
  display: block;
  border-radius: 2px;
}
.peca-foto figcaption {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
}

/* ---------- página: o que já rolou ---------- */
.abre-arquivo { padding-bottom: 20px; }
.linha-fina { font-size: 16px; line-height: 1.6; color: #3C3C40; max-width: 620px; margin-top: 16px; }

.evento { padding-top: 34px; padding-bottom: 34px; border-top: 1px solid var(--cinza-borda); }
.cabeca-evento {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 22px;
}
.quando { display: block; font-size: 10px; letter-spacing: .16em; font-weight: 600; color: var(--cinza-texto); margin-bottom: 7px; }
.cabeca-evento h2 {
  font-size: clamp(30px, 5vw, 52px); font-weight: 700;
  line-height: .98; letter-spacing: -.035em; text-transform: uppercase;
}
.cabeca-evento p { width: min(420px, 100%); font-size: 14px; line-height: 1.6; color: #3C3C40; }
.cabeca-evento a { text-decoration: underline; text-underline-offset: 3px; }

.galeria { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.galeria figure { margin: 0; }
.galeria img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--raio); background: var(--cinza-fundo);
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.galeria figure:hover img { transform: translateY(-5px); }
/* cartaz na galeria: a arte aparece inteira, não cortada */
.galeria figure.arte img { object-fit: contain; padding: 12px; }
.galeria figure.arte:hover img { transform: none; }
.galeria figcaption { font-size: 12px; color: var(--cinza-texto); margin-top: 10px; line-height: 1.5; }

.chamada-arquivo {
  display: flex; align-items: center;
  aspect-ratio: 4 / 5; border-radius: var(--raio);
  background: var(--preto); color: var(--branco); padding: 26px;
}
.chamada-arquivo h3 { font-size: 25px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 10px; }
.chamada-arquivo p { font-size: 13px; line-height: 1.55; color: var(--cinza-claro); margin-bottom: 18px; }
.chamada-arquivo .botao-branco { justify-content: space-between; }

/* ---------- agenda: o que vem e o que já rolou ---------- */
.selo-quando, .selo-passou {
  position: absolute; right: 12px; top: 12px;
  border-radius: var(--raio-pilula); padding: 7px 13px;
  font-size: 9px; letter-spacing: .14em; font-weight: 600;
  background: var(--branco); color: var(--preto);
}
.selo-quando.urgente { background: var(--preto); color: var(--branco); }
.selo-passou { background: rgba(255,255,255,.82); color: var(--cinza-texto); }
.card-oficina.passou { opacity: .62; }
.card-oficina.passou:hover { opacity: 1; }
.card-oficina.passou .foto-oficina img { filter: grayscale(1); }
.card-oficina.passou:hover .foto-oficina img { filter: none; }

/* ---------- computador: sem buraco no meio ----------
   Com poucas oficinas a grade deixava um card sozinho e o resto da
   largura vazio. Oficina única vira faixa: arte de um lado, texto do
   outro. Com duas ou mais, cada uma pega a sua parte da largura. */
@media (min-width: 861px) {
  .card-oficina:only-child { flex-direction: row; }
  .card-oficina:only-child .foto-oficina { flex: 0 0 48%; aspect-ratio: auto; height: 460px; }
  .card-oficina:only-child .corpo-oficina { justify-content: center; padding: 40px 44px; gap: 12px; }
  .card-oficina:only-child h3 { font-size: 44px; }
  .card-oficina:only-child p { font-size: 15px; max-width: 440px; }
  .card-oficina:only-child .meta { margin-top: 6px; }
  .grade-marcas { gap: 20px; }
}

/* ---------- fechamento ---------- */
.fecho { padding-top: 70px; padding-bottom: 34px; text-align: center; overflow: hidden; }
.fecho-frase {
  margin: 0; font-family: Anomega, Aileron, "Helvetica Neue", sans-serif;
  font-size: clamp(40px, 10vw, 150px); line-height: .9; letter-spacing: .005em; white-space: nowrap;
}
.fecho-barra {
  display: inline-block; margin: 22px 0 0; padding: 9px 18px;
  background: var(--preto); color: var(--branco); border-radius: var(--raio-pilula);
  font-size: 10px; font-weight: 600; letter-spacing: .18em; white-space: nowrap;
}
.fecho-barra i { font-style: normal; opacity: .65; padding: 0 .5em; }
@media (max-width: 860px) {
  .fecho { padding-top: 46px; padding-bottom: 26px; }
  .fecho-frase { font-size: 10.2vw; }
  .fecho-barra { font-size: 9px; letter-spacing: .14em; padding: 9px 16px; }
  .fecho-barra .so-largo { display: none; }
}

/* ---------- expor: o que a mensalidade dá + como entrar + painel ---------- */
.expor-lead { max-width: 620px; margin: 14px 0 34px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: #3C3C40; }
.beneficios {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
/* 5 benefícios: um embaixo do outro no celular, 3 + 2 no meio, todos na mesma linha na tela grande */
@media (min-width: 700px) { .beneficios { grid-template-columns: repeat(6, 1fr); } .beneficios li { grid-column: span 2; } .beneficios li:nth-child(4) { grid-column: 2 / span 2; } }
@media (min-width: 1100px) { .beneficios { grid-template-columns: repeat(5, 1fr); } .beneficios li, .beneficios li:nth-child(4) { grid-column: auto; } }
.beneficios li { background: var(--cinza-fundo); border-radius: var(--raio); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.beneficios h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.beneficios h3::before { content: "✦ "; font-size: 14px; }
.beneficios p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #3C3C40; }
.como-rotulo { margin: 0 0 14px; }
.passos {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  counter-reset: none;
}
.passos li {
  border: 1px solid var(--cinza-borda); border-radius: var(--raio); padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.passo-num {
  font-family: Anomega, Aileron, "Helvetica Neue", sans-serif;
  font-size: 54px; line-height: .9; margin-bottom: 6px;
}
.passos h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.passos p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #3C3C40; }

.expor-duo { display: grid; gap: 14px; grid-template-columns: 1.25fr 1fr; margin-bottom: 26px; }
.expor-duo .halftone { margin: 0; height: auto; min-height: 300px; }
/* a foto acompanha a altura do painel ao lado; sem o absolute ela
   crescia no tamanho original e o recorte mostrava o teto, não a cadeira */
.expor-duo .halftone img { position: absolute; inset: 0; object-position: 50% 70%; }
.painel-marca {
  background: var(--cinza-fundo); color: var(--preto); border-radius: var(--raio);
  padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 10px;
}
.painel-marca .rotulo { color: var(--cinza-texto); }
.painel-marca h3 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.painel-marca p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #3C3C40; }
.painel-marca small { font-size: 10.5px; letter-spacing: .08em; color: var(--cinza-texto); margin-top: auto; padding-top: 6px; }
@media (max-width: 860px) {
  .expor-duo { grid-template-columns: 1fr; }
  .expor-duo .halftone { min-height: 220px; }
  .passos li { padding: 18px 18px 20px; }
  .passo-num { font-size: 44px; }
}

/* ---------- virar visita na loja ---------- */
.rota-hero { color: var(--preto) !important; }
.rota-hero:hover { color: var(--preto); }

.barra-visita {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--branco); border: 1px solid var(--preto); border-radius: var(--raio-pilula);
  padding: 6px 6px 6px 16px; box-shadow: 0 10px 30px rgba(14,14,14,.14);
}
.barra-visita-estado { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 10px; letter-spacing: .12em; font-weight: 600; white-space: nowrap; overflow: hidden; }
.barra-visita-estado b { overflow: hidden; text-overflow: ellipsis; }
.barra-visita.aberta .bolinha { background: #1F9D55; }
.barra-visita-rota {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--preto); color: var(--branco); border-radius: var(--raio-pilula);
  padding: 0 18px; min-height: 44px; font-size: 13px; font-weight: 700;
}
@media (max-width: 860px) {
  .rota-hero .so-largo { display: none; }
  .barra-visita { display: flex; }
  .barra-visita[hidden] { display: none !important; }
  .rodape { padding-bottom: 90px; }   /* a barra não cobre o fim da página */
}

.placa-visita {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--preto); color: var(--branco); border-radius: 20px;
  padding: 14px 14px 14px 18px; margin: 0 0 14px;
}
.placa-visita b { display: block; font-size: 15px; letter-spacing: -.01em; }
.placa-visita small { display: block; font-size: 11px; color: var(--cinza-claro); margin-top: 2px; }
.placa-visita .seta { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--branco); color: var(--preto);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }

/* agenda vazia */
.oficina-vazia { grid-column: 1 / -1; border: 1px dashed var(--cinza-borda); border-radius: var(--raio); padding: 28px 24px; }
.oficina-vazia b { display: block; font-size: 22px; letter-spacing: -.02em; }
.oficina-vazia p { margin: 6px 0 16px; font-size: 14px; color: var(--cinza-texto); }

/* ---------- este mês na loja ---------- */
.lista-eventos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.card-evento { display: flex; gap: 18px; background: var(--cinza-fundo); border-radius: var(--raio); padding: 20px; }
.card-evento.hoje { background: var(--preto); color: var(--branco); }
.ev-dia { flex: none; width: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--branco); color: var(--preto); border-radius: 20px; padding: 14px 6px; text-align: center; align-self: flex-start; }
.ev-dia-num { font-family: Anomega, Aileron, sans-serif; font-size: 40px; line-height: .9; }
.ev-dia-num.pequeno { font-size: 18px; line-height: 1.05; }
.ev-dia-sem { font-size: 9.5px; letter-spacing: .12em; font-weight: 700; margin-top: 8px; color: var(--cinza-texto); }
.ev-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ev-marca { font-size: 10px; letter-spacing: .16em; font-weight: 700; color: var(--cinza-texto); }
.card-evento.hoje .ev-marca, .card-evento.hoje .ev-meta, .card-evento.hoje p { color: var(--cinza-claro); }
.card-evento h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
.card-evento p { margin: 0; font-size: 14px; line-height: 1.55; color: #3C3C40; }
.ev-meta { font-size: 12px; color: var(--cinza-texto); }
.ev-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ev-acoes a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; font-size: 13px; font-weight: 700; border-radius: var(--raio-pilula); }
.ev-acoes .botao-branco { width: auto; border: 1px solid var(--preto); }
/* ingresso ainda não está à venda: aparece no lugar do botão, sem ser botão */
.ev-em-breve { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 1px dashed var(--cinza-borda); border-radius: var(--raio-pilula); font-size: 13px; font-weight: 700; color: var(--cinza-texto); }
.ev-acoes button { min-height: 44px; padding: 0 18px; font-size: 13px; font-weight: 700; border-radius: var(--raio-pilula); }
/* o convite pra dar oficina fecha a lista, com borda tracejada: é espaço livre na agenda */
.convite-evento { background: none; border: 1px dashed var(--cinza-borda); }
.convite-evento .ev-dia { background: var(--cinza-fundo); }
.card-evento.hoje .botao-preto { background: var(--branco); color: var(--preto); }
@media (max-width: 860px) {
  /* no celular: dia + título na mesma linha, o resto na largura toda */
  .card-evento { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; row-gap: 6px; align-items: start; padding: 16px; }
  .ev-dia { grid-row: 1 / span 2; width: 64px; padding: 10px 4px; }
  .ev-dia-num { font-size: 30px; }
  .ev-dia-num.pequeno { font-size: 14px; }
  .ev-dia-sem { font-size: 8.5px; margin-top: 6px; }
  .ev-corpo { display: contents; }
  .ev-marca { grid-column: 2; align-self: end; }
  .card-evento h3 { grid-column: 2; font-size: 19px; }
  .card-evento p, .ev-meta, .ev-acoes { grid-column: 1 / -1; }
  .card-evento p { margin-top: 6px; }
  .ev-acoes a, .ev-acoes button, .ev-em-breve { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
}

/* foto no card do evento: em cima, na largura toda */
.card-evento.com-foto { flex-wrap: wrap; }
.ev-foto { flex: 0 0 100%; margin: 0; height: 220px; border-radius: 20px; overflow: hidden; background: var(--branco); }
.ev-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-foto.cartaz img { object-fit: contain; }
@media (max-width: 860px) {
  .card-evento.com-foto .ev-foto { grid-column: 1 / -1; grid-row: 1; height: 200px; margin-bottom: 8px; }
  .card-evento.com-foto .ev-dia { grid-row: 2 / span 2; }
}

/* página de oficinas: como é uma oficina aqui */
.como-e { padding-top: 10px; }
.faixa-fotos { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 0 18px 6px; scroll-padding-inline: 18px; scrollbar-width: none; }
.faixa-fotos::-webkit-scrollbar { display: none; }
.faixa-fotos figure { flex: none; width: 220px; margin: 0; scroll-snap-align: start; }
.faixa-fotos img { width: 220px; height: 275px; object-fit: cover; border-radius: 20px; display: block; background: var(--cinza-fundo); }
.faixa-fotos figcaption { font-size: 12px; color: var(--cinza-texto); margin-top: 8px; line-height: 1.4; }
@media (min-width: 861px) { .faixa-fotos { margin: 0; padding: 0 0 6px; } .faixa-fotos figure, .faixa-fotos img { width: 260px; } .faixa-fotos img { height: 325px; } }

/* links pro @coolabcraftclub */
.link-craft { color: var(--preto); text-decoration: none; white-space: nowrap; }
.link-craft:hover { text-decoration: underline; text-underline-offset: 3px; }
.linha-fina a, .nota-oficinas a { color: var(--preto); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- este mês na loja: faixa de arrastar (revisão 27/set) ---------- */
.faixa-eventos {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -18px; padding: 0 18px 8px; scroll-padding-inline: 18px; scrollbar-width: none;
}
.faixa-eventos::-webkit-scrollbar { display: none; }
.faixa-eventos:empty { min-height: 526px; }
.evf {
  flex: none; width: 264px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--cinza-fundo); border-radius: var(--raio); padding: 10px 10px 16px;
}
.evf.hoje { background: var(--preto); color: var(--branco); }
.evf-topo { aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--branco); margin-bottom: 8px; }
.evf-topo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evf-data-grande { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: Anomega, Aileron, sans-serif; font-size: 96px; line-height: .9; color: var(--preto); }
.evf-data-grande small { font-family: Aileron, "Helvetica Neue", sans-serif; font-size: 12px; letter-spacing: .2em; font-weight: 700; margin-top: 12px; color: var(--cinza-texto); }
.evf-quando, .evf-marca { padding: 0 6px; font-size: 10px; letter-spacing: .14em; font-weight: 700; color: var(--cinza-texto); }
.evf.hoje .evf-quando, .evf.hoje .evf-marca, .evf.hoje p { color: var(--cinza-claro); }
.evf h3 { padding: 0 6px; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.evf p { padding: 0 6px; margin: 0; font-size: 13px; line-height: 1.5; color: #3C3C40;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.evf-acao { margin-top: auto; padding: 8px 6px 0; }
.evf-acao > * { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-pilula); font-size: 13px; font-weight: 700; padding: 0 16px; }
.evf-acao .botao-branco { border: 1px solid var(--preto); }
.evf.hoje .botao-preto { background: var(--branco); color: var(--preto); }
@media (min-width: 861px) {
  .faixa-eventos { margin: 0; padding: 0 0 8px; }
  .evf { width: 292px; }
}

/* como chegar: a coluna da direita */
.chegar-info { display: flex; flex-direction: column; gap: 10px; }
.chegar-endereco { margin: 0; font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; }
.chegar-hoje { margin: 4px 0 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; font-weight: 700; }
.bolinha.verde { background: #1F9D55; }

/* nome da peça = nome do PDV; cada marca cadastra num caixa (MAIÚSCULA,
   Minúscula…) e em caixa-alta a faixa fica igual pra todas */
.peca-arara b, .fila-pecas figcaption { text-transform: uppercase; letter-spacing: .02em; }
.peca-arara b { font-size: 12px; }

/* só pra leitor de tela (a ordem dos títulos fica certa sem aparecer) */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* enquanto o JS não preenche, a lista de oficinas guarda a tela toda:
   o que vem embaixo não aparece pra depois ser empurrado */
#oficinasDoMes:empty { min-height: 100vh; }
#oficinasDoMes { margin-bottom: 14px; }
#conviteOficina { margin-bottom: 26px; }

/* ---------- quem já está aqui: depoimentos das marcas ---------- */
.lista-depoimentos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin-bottom: 34px; }
.depoimento { margin: 0; border: 1px solid var(--preto); border-radius: var(--raio); padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.depoimento::before { content: "✦"; font-size: 22px; line-height: 1; }
.depoimento blockquote { margin: 0; font-size: 17px; line-height: 1.5; color: var(--preto); flex: 1; }
.depoimento figcaption { font-size: 10.5px; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; color: var(--cinza-texto); }