/* ==========================================================
   Shylton Mavie · Design system do site
   Tokens globais (site e área restrita) + componentes do site.
   Regra: nada de tamanho, espaço ou cor fora destes tokens.
   ========================================================== */
:root{
  /* Paleta da marca */
  --grafite:#111111;
  --papel:#FFFFFF;          /* fundo do site: branco (antes off-white #F6F4F0) */
  --pedra:#D6D3CD;
  --concreto:#7D7A75;       /* só grafismos e texto grande: 3,9:1 no papel */
  /* Papéis de cor (derivados da paleta) */
  --papel-2:#ECEAE5;        /* faixas e colunas de apoio (pedra a 30% sobre o papel) */
  --branco:#FFFFFF;         /* superfícies: formulários, cartões, modais */
  --tinta-forte:var(--grafite); /* títulos e botão primário */
  --tinta:#3A3936;          /* texto corrido (11:1 no papel) */
  --tinta-2:#6B6863;        /* texto secundário: concreto escurecido para 5:1 no papel */
  --marca:var(--grafite);   /* símbolo e assinatura */
  --linha:var(--pedra);
  --hover:rgba(17,17,17,.04);
  --foto:var(--pedra);      /* fundo enquanto a foto carrega */
  --veu:rgba(17,17,17,.5);  /* escurece fotos sob texto */
  --sucesso:#3E6B48;
  --erro:#9A3B2E;
  --aviso:#B08A3E;
  --sombra:0 24px 64px rgba(17,17,17,.18);

  /* Tipografia: Josefin Sans em toda a marca; Lexend só nos documentos MATO.
     Hierarquia por tamanho, espaçamento e tom; caixa alta espaçada para legendas. */
  --f:"Josefin Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-doc:"Lexend",var(--f);
  --f-doc-2:"Lexend Exa",var(--f);
  --t-1:clamp(34px,4.4vw,60px);   /* H1 de capa (projeto) */
  --t-2:clamp(28px,3.2vw,44px);   /* menu, números, títulos de entrada */
  --t-3:clamp(21px,1.9vw,26px);   /* texto de destaque, H3, títulos de tela e modal */
  --t-pag:clamp(14px,1.6vw,22px); /* títulos de página (Produções, Sobre, Área restrita) */
  --simb-h:calc(var(--t-3) * .75);                   /* símbolo do cabeçalho: altura das maiúsculas do nome */
  --barra-h:calc(var(--toque) + var(--s-4));         /* altura do cabeçalho das páginas internas (48px) */
  --ls-pag:.16em;                 /* espaçamento dos títulos de página */
  --t-corpo:16px;                 /* texto corrido e campos */
  --t-ui:14px;                    /* navegação, botões, rótulos de seção */
  --t-leg:13px;                   /* legendas e metadados */
  --t-mini:11px;                  /* rótulos em caixa alta espaçada */
  --w-leve:300;                   /* textos grandes */
  --w-nome:335;                   /* nome Shylton Mavie */
  --lh-tit:1.2;
  --lh:1.6;
  --ls-tit:.04em;                 /* títulos em caixa alta */
  --ls-mini:.24em;                /* legendas em caixa alta */

  /* Espaços: múltiplos de 4 */
  --s-4:4px;--s-8:8px;--s-12:12px;--s-16:16px;--s-24:24px;--s-32:32px;--s-48:48px;--s-64:64px;--s-96:96px;
  --col:16px;                     /* espaço entre colunas */
  --g-l:max(clamp(16px,1.6vw,24px),env(safe-area-inset-left,0px));
  --g-r:max(clamp(16px,1.6vw,24px),env(safe-area-inset-right,0px));
  --largura-texto:820px;
  --largura-form:560px;
  --toque:44px;                   /* alvo mínimo de toque */

  /* Movimento */
  --rapido:.2s;
  --suave:.5s;
  color-scheme:light;
}
/* Pontos de quebra (fixos, CSS não aceita variável em @media): 520 celular · 820 tablet · 1100 notebook */

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f);font-size:var(--t-corpo);line-height:var(--lh);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--papel)}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:var(--lh-tit);text-wrap:balance;color:var(--tinta-forte)}
/* Padrões da marca: título em caixa alta e legenda em caixa alta espaçada */
.ficha__nome,.ativ__tit,.pedido-ok h3,.palco__nome,.sis-cab h1,.entrada h1,.barra__nome,.pag__titulo{text-transform:uppercase;letter-spacing:var(--ls-tit)}
.menu-btn,.menu nav,.linha__rot,.ficha__rot,.rodape,.palco__nav,.marca span{text-transform:uppercase;letter-spacing:var(--ls-mini)}
p,figure,ul,dl,dd{margin:0}
ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
img{display:block;max-width:100%}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.logo{display:block;height:auto;color:inherit}
.view[hidden]{display:none}
.view:not([hidden]){animation:entra var(--suave) ease both}
@keyframes entra{from{opacity:0;transform:translateY(8px)}}

/* ---------- Componentes compartilhados ---------- */
/* Botões: primário (escuro), secundário (contorno) e link */
.btn,.enviar{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);min-height:var(--toque);padding:var(--s-12) var(--s-16);background:var(--tinta-forte);color:var(--papel);font-size:var(--t-ui);font-weight:600;line-height:1.2;white-space:nowrap;transition:background var(--rapido),box-shadow var(--rapido)}
.btn:hover,.enviar:hover{background:var(--tinta)}
.btn:active,.enviar:active{transform:translateY(1px)}
.btn--escuro{background:var(--tinta-forte)}
.btn--linha{background:var(--branco);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linha)}
.btn--linha:hover{background:var(--branco);box-shadow:inset 0 0 0 1px var(--tinta)}
.btn[disabled],.enviar[disabled]{opacity:.5;pointer-events:none}
.lnk,.copiar{font-size:var(--t-ui);color:var(--tinta-2);text-decoration:underline;text-underline-offset:3px;transition:color var(--rapido)}
.copiar{font-size:var(--t-leg)}
.lnk:hover,.copiar:hover{color:var(--tinta)}
.lnk--perigo{color:var(--erro)}
.lnk--perigo:hover{color:var(--erro);text-decoration-thickness:2px}

/* Alvos de toque: links e botões de texto ganham área clicável (≥24px) sem mudar o layout */
.filtros button,.sis-filtros button,.abas-mini button,.cal-nav button,.lnk,.copiar{padding-block:var(--s-4);margin-block:calc(var(--s-4) * -1)}

/* Filtros (site e sistema) */
.filtros,.sis-filtros{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-16);font-size:var(--t-ui)}
.filtros{margin-top:var(--s-8)}
.filtros button,.sis-filtros button{color:var(--tinta-2);transition:color var(--rapido)}
.filtros button:hover,.sis-filtros button:hover{color:var(--tinta)}
.filtros button[aria-pressed="true"],.sis-filtros button[aria-pressed="true"]{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}

/* ---------- Início ---------- */
/* Início: uma foto por tela; cada passo de rolagem troca a foto */
html:has(#v-inicio:not([hidden])){scroll-snap-type:y mandatory}
.inicio{position:relative;height:calc(var(--n,1) * 100vh);height:calc(var(--n,1) * 100svh)}
.passos{position:absolute;inset:0 0 auto;pointer-events:none}
.passo{height:100vh;height:100svh;scroll-snap-align:start}
.palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;background:var(--tinta-forte)}
/* Faixa clara no topo com o nome; as fotos ocupam o restante da tela */
.palco__faixa{display:flex;justify-content:space-between;align-items:center;gap:var(--s-16);padding:calc(var(--s-16) + env(safe-area-inset-top,0px)) var(--g-r) var(--s-16) var(--g-l);background:var(--papel);color:var(--marca)}
.palco__nome{font-size:var(--t-3);font-weight:var(--w-nome);line-height:1}
.palco__nome a{display:block}
.palco__fotos{position:relative;flex:1;min-height:0}
.palco__fotos::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,var(--veu),transparent 30%)}
.palco__foto{position:absolute;inset:0;opacity:0;background:var(--foto);transition:opacity var(--suave) ease}
.palco__foto.ativa{opacity:1}
.palco__foto img{width:100%;height:100%;object-fit:cover}
.palco__logo,.palco__nav{position:absolute;z-index:2;bottom:calc(var(--s-24) + env(safe-area-inset-bottom,0px));color:var(--branco);text-shadow:0 0 12px rgba(0,0,0,.35)}
.palco__logo{left:var(--g-l);width:24px}
.palco__nav{right:var(--g-r);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-8) var(--s-24);font-size:var(--t-mini);line-height:1.3;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-mini)}
.palco__nav a{padding-block:var(--s-8);margin-block:calc(var(--s-8) * -1)} /* letra menor, área de clique mantida */
.palco__nav a:hover,.palco__nav a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.palco__logo:focus-visible,.palco__nav a:focus-visible{outline-color:var(--branco)}

/* ---------- Barra das páginas internas ---------- */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;justify-content:space-between;align-items:center;gap:var(--s-16);height:var(--barra-h);padding:0 var(--g-r) 0 var(--g-l);background:var(--papel)}
/* Assinatura no cabeçalho: o símbolo tem exatamente a altura das maiúsculas do nome e fica alinhado a elas
   (topo com topo, base com a linha de base). Josefin Sans: maiúsculas com .75em numa caixa de 1em;
   descer o nome .125em põe as maiúsculas no centro da caixa, na mesma faixa do símbolo. Largura pela proporção 96:148. */
.barra__logo{display:flex;align-items:center;gap:.5em;width:max-content;min-width:0;font-size:var(--t-3);font-weight:var(--w-nome);line-height:1;color:var(--marca)}
.barra .barra__logo{padding:max(0px, (var(--toque) - var(--simb-h)) / 2) 10px;margin:min(0px, (var(--simb-h) - var(--toque)) / 2) -10px} /* área de toque de no mínimo 44px */
.barra__simb{display:block;width:auto;height:.75em;flex-shrink:0}
.barra__nome{white-space:nowrap;position:relative;top:.125em}
/* Menu em ícone (três traços): área de toque de 44px, traço alinhado à margem */
.menu-ico{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.menu-btn{display:grid;place-items:center;flex-shrink:0;width:var(--toque);height:var(--toque);margin:-10px -10px -10px auto;color:inherit}

/* Título da página: abaixo da assinatura, centralizado */
.pag__titulo{padding:var(--s-32) var(--g-r) var(--s-48) var(--g-l);text-align:center;font-size:var(--t-pag);font-weight:var(--w-leve);line-height:1;letter-spacing:var(--ls-pag);color:var(--tinta-forte)}
/* Produções: tipos de projeto sempre à vista, centralizados abaixo do título */
.pag__filtros{justify-content:center;max-width:var(--largura-texto);margin:calc(var(--s-24) * -1) auto 0;padding:0 var(--g-r) var(--s-32) var(--g-l)}

/* ---------- Projetos ---------- */
.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24) var(--col);padding:var(--s-8) var(--g-r) var(--s-64) var(--g-l)}
/* Parceiros ao final de Produções: logos em cinza, mesma altura, centralizados */
.marcas{display:flex;flex-direction:column;align-items:center;gap:var(--s-24);text-align:center;margin-inline:var(--g-l) var(--g-r);padding-block:var(--s-32) var(--s-64);border-top:1px solid var(--linha)}
/* Duas linhas correndo para a esquerda; bordas esmaecidas; para ao passar o mouse. Espaço por margem (não gap) para o laço de -50% não dar salto */
.marcas__faixa{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--s-48),#000 calc(100% - var(--s-48)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--s-48),#000 calc(100% - var(--s-48)),transparent)}
.marcas__lista{display:flex;align-items:center;width:max-content}
.marcas__lista.anda{animation:corre var(--dur,60s) linear infinite}
.marcas__faixa:hover .marcas__lista{animation-play-state:paused}
@keyframes corre{to{transform:translateX(-50%)}}
.marca{display:flex;align-items:center;justify-content:center;gap:var(--s-12);min-height:48px;margin-right:var(--s-64);color:var(--tinta-2)}
.marca img{display:block;width:auto;height:var(--h,40px);opacity:.62} /* grafite a 62% ≈ tom do texto secundário */
.marca span{font-size:var(--t-leg);font-weight:600;line-height:1.3;text-align:center}
.card{display:flex;flex-direction:column;gap:var(--s-8);position:relative;min-width:0}
.card__img{aspect-ratio:4/3;overflow:hidden;background:var(--foto)}
.card__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(.94) brightness(1.04);transition:filter var(--suave),transform .8s ease}
.card:hover .card__img img{filter:none;transform:scale(1.02)}
.card__leg{display:flex;justify-content:space-between;gap:var(--s-12);font-size:var(--t-ui)}
.card__leg b{font-weight:600}
.card__leg span{color:var(--tinta-2);text-align:right}
.vazio{grid-column:1/-1;padding:var(--s-48) 0;color:var(--tinta-2)}

/* ---------- Projeto ---------- */
.det__hero{position:relative;height:calc(100vh - var(--barra-h));height:calc(100svh - var(--barra-h));min-height:320px;overflow:hidden;background:var(--foto)} /* foto limpa, sem véu nem texto */
.det__hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.det__galeria{--alt:clamp(220px,32vw,500px);display:flex;flex-wrap:wrap;gap:var(--col);padding:var(--s-16) var(--g-r) 0 var(--g-l)}
.det__galeria::after{content:"";flex:999 1 0}
.det__galeria img{height:var(--alt);flex:1.3 1 calc(var(--alt) * 1.3);min-width:0;object-fit:cover;background:var(--foto)}
.ficha{padding:var(--s-48) var(--g-r) var(--s-24) var(--g-l)}
.ficha__rot{font-size:var(--t-mini);font-weight:600;color:var(--tinta-2)}
.ficha__nome{margin-top:var(--s-12);font-size:var(--t-pag);font-weight:var(--w-leve);line-height:1.2;color:var(--tinta)}
.ficha dl{display:flex;flex-wrap:wrap;gap:var(--s-16) clamp(var(--s-24),3vw,var(--s-48));margin-top:var(--s-24)}
.ficha dt{font-size:var(--t-leg);color:var(--tinta-2)}
.ficha dd{font-size:var(--t-corpo)}

/* ---------- Sobre, Serviços, Contato ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--col);padding-left:var(--g-l);padding-right:var(--g-r)}
.corpo{max-width:var(--largura-texto);padding-bottom:var(--s-48)}
.corpo figure{width:min(100%,540px)}
.corpo figure img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05);background:var(--foto)}
.corpo figcaption{font-size:var(--t-leg);color:var(--tinta-2);margin-top:var(--s-8)}
/* Sobre: foto do Shylton na coluna da esquerda, texto à direita */
.sobre__foto{margin:0 0 var(--s-48)}
.isca{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} /* campo-isca anti-robô do Contato */
.sobre__foto img{width:100%;height:auto;background:var(--foto)}
.sobre{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} /* foto horizontal: metade da largura */
.sobre .corpo{max-width:60ch}
.sobre .corpo p{font-size:var(--t-corpo);line-height:var(--lh)} /* mesmo tamanho do texto corrido do site */
.sobre .corpo p + p{margin-top:var(--s-16)}
.grande{font-size:var(--t-3);font-weight:var(--w-leve);line-height:1.4}
.grande + .grande{margin-top:var(--s-16)}
.corpo figure + .grande{margin-top:var(--s-24)}
.linhas{padding-left:var(--g-l);padding-right:var(--g-r)}
.linha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--col);border-top:1px solid var(--linha);padding-block:var(--s-16) var(--s-24)}
.linha__rot{font-size:var(--t-mini);font-weight:600;color:var(--tinta-2)}
.linha__itens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24) var(--col);font-size:var(--t-ui)}
.linha__itens b{display:block;font-weight:600}
.linha__itens span{color:var(--tinta-2)}
.linha__itens .valor{display:block;color:var(--tinta);user-select:all;overflow-wrap:anywhere}
.linha__itens a.valor{user-select:auto}
.linha__itens a.valor:hover{text-decoration:underline;text-underline-offset:3px}
/* Atividades: frase de abertura centralizada e lista numerada em linhas, no grid de três colunas do site */
.pag__intro{max-width:calc(680px + var(--g-l) + var(--g-r));margin:calc(var(--s-24) * -1) auto 0;padding:0 var(--g-r) var(--s-64) var(--g-l);text-align:center;text-wrap:balance;font-size:var(--t-3);font-weight:var(--w-leve);line-height:1.4;color:var(--tinta)}
.ativ{list-style:none;margin:0;padding:0 var(--g-r) var(--s-96) var(--g-l)}
.ativ__item{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8) var(--col);align-items:baseline;padding-block:var(--s-24) var(--s-32);border-top:1px solid var(--linha)}
.ativ__item:last-child{border-bottom:1px solid var(--linha)}
.ativ__num{font-size:var(--t-3);font-weight:var(--w-leve);line-height:1.2;letter-spacing:var(--ls-tit);font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.ativ__tit{font-size:var(--t-3);font-weight:var(--w-nome);line-height:1.2}
.ativ__txt{max-width:46ch;font-size:var(--t-corpo);color:var(--tinta-2)}

/* Formulários do site (pedido de proposta e cadastros públicos) */
.form{background:var(--branco);padding:clamp(16px,2vw,24px);max-width:var(--largura-form);display:flex;flex-direction:column;gap:var(--s-24)}
.form--larga{max-width:720px}
.form__intro{font-size:var(--t-corpo);color:var(--tinta-2)}
.grupo{border:0;padding:0;margin:0;min-width:0}
.grupo legend{padding:0;margin-bottom:var(--s-8)}
.copiar--bloco{align-self:flex-start}
.fduas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-24) var(--col)}
.campo{display:flex;flex-direction:column;gap:var(--s-8);font-size:var(--t-leg)}
.campo input,.campo textarea,.campo select{font:inherit;font-size:var(--t-corpo);border:0;border-bottom:1px solid var(--linha);border-radius:0;background:none;padding:var(--s-8) 0;color:var(--tinta);transition:border-color var(--rapido)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--tinta)}
.campo textarea{border:1px solid var(--linha);min-height:112px;resize:vertical;padding:var(--s-8)}
.campo input[type="file"]{border:0;font-size:var(--t-ui);padding:var(--s-4) 0}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8) var(--col);font-size:var(--t-ui)}
.checks label{display:flex;gap:var(--s-8);align-items:center;min-height:28px}
.checks input{accent-color:var(--tinta);width:16px;height:16px}
.amb{display:flex;flex-direction:column;gap:var(--s-12);padding:var(--s-16);background:var(--papel)}
.amb + .amb{margin-top:var(--s-8)}
.amb__topo{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-leg);font-weight:600}
.enviar{width:100%}
.status{font-size:var(--t-ui);min-height:1.2em}
.status.ok{color:var(--sucesso)}
.status.erro{color:var(--erro)}
.pedido-ok{background:var(--branco);padding:clamp(16px,2vw,24px);max-width:var(--largura-form);display:flex;flex-direction:column;gap:var(--s-12)}
.pedido-ok h3{font-size:var(--t-3)}
.pedido-ok p{font-size:var(--t-corpo);color:var(--tinta-2)}

/* ---------- Contato: formulário simples, WhatsApp e Instagram, centralizados ---------- */
.contato{display:flex;flex-direction:column;gap:var(--s-16);max-width:calc(440px + var(--g-l) + var(--g-r));margin-inline:auto;padding:0 var(--g-r) var(--s-64) var(--g-l)}
.contato__form{display:flex;flex-direction:column;gap:var(--s-24)}
.cx{display:flex;flex-direction:column;gap:var(--s-8);font-size:var(--t-ui);font-weight:var(--w-leve);color:var(--tinta-2)}
.cx input,.cx textarea,.cx__tel{font:inherit;font-size:var(--t-corpo);font-weight:400;color:var(--tinta);background:none;border:1px solid var(--concreto);border-radius:0;transition:border-color var(--rapido),box-shadow var(--rapido)}
.cx input{min-height:var(--toque);padding:0 var(--s-12)}
.cx textarea{min-height:96px;padding:var(--s-12);resize:vertical}
.cx input:focus,.cx textarea:focus,.cx__tel:focus-within{outline:none;border-color:var(--tinta-forte);box-shadow:inset 0 0 0 1px var(--tinta-forte)}
.cx [aria-invalid="true"]{border-color:var(--erro);box-shadow:inset 0 0 0 1px var(--erro)}
.cx__tel{display:flex;align-items:center}
.cx__tel input{flex:1;min-width:0;border:0;box-shadow:none !important;padding-left:var(--s-8)}
.cx__pais{flex-shrink:0;width:20px;height:14px;margin-left:var(--s-12)}
.contato .enviar{background:var(--tinta);font-size:var(--t-corpo);font-weight:400}
.contato .enviar:hover{background:var(--tinta-forte)}
.contato .status:empty{display:none}
.btn-wa{display:flex;align-items:center;justify-content:center;gap:var(--s-8);min-height:var(--toque);padding:var(--s-12) var(--s-16);border:1px solid var(--tinta);color:var(--tinta);font-size:var(--t-corpo);transition:background var(--rapido),color var(--rapido)}
.btn-wa:hover{background:var(--tinta);color:var(--papel)}
.btn-wa svg,.insta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.btn-wa svg path + path{fill:currentColor;stroke:none}
.insta{align-self:center;display:grid;place-items:center;width:var(--toque);height:var(--toque);margin-top:var(--s-16);color:var(--tinta-2);transition:color var(--rapido)}
.insta svg{width:24px;height:24px}
.insta:hover{color:var(--tinta-forte)}

/* ---------- Rodapé ---------- */
.rodape{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--col);padding:var(--s-24) var(--g-r) var(--s-32) var(--g-l);border-top:1px solid var(--linha);font-size:var(--t-mini);color:var(--tinta-2)}
.rodape__adm{text-decoration:underline;text-underline-offset:3px;transition:color var(--rapido)}
.rodape__adm:hover{color:var(--tinta)}

/* ---------- Menu: lista suspensa sob os três traços (posição calculada no script) ---------- */
.menu{position:fixed;z-index:50;top:0;right:0;min-width:184px;padding-block:var(--s-8);background:var(--papel);border:1px solid var(--linha);animation:entra var(--rapido) ease both}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;font-size:var(--t-leg);line-height:1.3}
.menu nav a{display:block;padding:var(--s-8) var(--s-16);text-align:right;color:var(--tinta-2);transition:color var(--rapido)}
.menu nav a:hover,.menu nav a:focus-visible,.menu nav a[aria-current="page"]{color:var(--tinta-forte)}
.menu nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.menu nav a:focus-visible{outline-offset:-2px}
.menu .menu__adm{margin-top:var(--s-8);padding-top:var(--s-12);border-top:1px solid var(--linha)}
@media (pointer:coarse){.menu nav a{padding-block:var(--s-12)}} /* toque: itens mais altos */

/* Aviso rápido */
.toast{position:fixed;left:50%;bottom:calc(var(--s-24) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--tinta);color:var(--branco);font-size:var(--t-ui);padding:var(--s-12) var(--s-16);z-index:300;max-width:calc(100vw - 32px);animation:entra var(--rapido) ease both}
.toast[hidden]{display:none}

/* ---------- Responsivo ---------- */
@media (max-width:1100px){
  .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .linha__itens{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .palco__nav{flex-direction:column;align-items:flex-end;gap:var(--s-8)}
  .cols,.linha,.rodape{grid-template-columns:minmax(0,1fr)}
  .pag__titulo{padding-block:var(--s-24) var(--s-32)}
  .pag__filtros{margin-top:calc(var(--s-12) * -1)}
  .marca{margin-right:var(--s-32)}
  .marca img{height:calc(var(--h,40px) * .85)}
  .ativ__item{grid-template-columns:var(--s-48) minmax(0,1fr);padding-block:var(--s-16) var(--s-24)}
  .ativ__txt{grid-column:2}
  .pag__intro{margin-top:calc(var(--s-12) * -1);padding-bottom:var(--s-48);font-size:var(--t-corpo);line-height:var(--lh)}
  .det__galeria img{height:auto;width:100%;flex:1 1 100% !important}
  .det__hero{height:auto;min-height:0}
  .det__hero > img{position:static;height:auto} /* no celular a foto aparece inteira, sem corte */
  .cols > :first-child:empty{display:none}
  .sobre{row-gap:var(--s-24)}
  .sobre__foto{margin-bottom:0}
  .fduas{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .grade{grid-template-columns:minmax(0,1fr)}
  .linha__itens,.checks{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .marcas__faixa{overflow-x:auto} /* sem movimento: as linhas rolam com o dedo ou o mouse */
}