/* MV Print — protótipo de site do varejo.
   Paleta extraída dos arquivos oficiais do cliente (LOGO/LOGO-OFICIAL-MV-PRINT-*.png e
   LOGO/BG-MV-PRINT.png). Nenhum hex inventado; ver marca.paleta em data/produtos.json.
   Contraste auditado por check_contraste.py — não trocar token sem rodar o gate. */

:root{
  /* marca */
  --laranja:#F5893A;        /* traço do logo oficial — display e elementos gráficos */
  --laranja-texto:#B35109;  /* 4,52:1 sobre creme — o único laranja permitido em texto */
  --laranja-claro:#F6954D;  /* 4,51:1 sobre azul — laranja em fundo escuro */
  --azul:#2C435D;           /* fundo oficial BG-MV-PRINT.png — é a nossa tinta */
  --creme:#F8EFE9;          /* segundo traço do logo — é o nosso papel */
  --branco:#FFFFFF;
  /* derivados */
  --azul-70:#5A6C81;        /* texto secundário — 4,75:1 sobre creme; não clarear sem rodar o gate */
  --linha:#E3D8D0;
  --linha-escura:#44586F;
  --sombra:0 1px 2px rgba(44,67,93,.06),0 8px 28px rgba(44,67,93,.07);
  --raio:14px;
  --shell:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--creme);color:var(--azul);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.62;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--laranja-texto)}
a:focus-visible,button:focus-visible{outline:3px solid var(--laranja-texto);outline-offset:3px;border-radius:4px}
.dark a:focus-visible,.dark button:focus-visible{outline-color:var(--laranja-claro)}
.shell{max-width:var(--shell);margin:0 auto;padding:0 22px}

/* ---------- cabeçalho ---------- */
.topo{background:var(--azul);color:var(--branco);position:sticky;top:0;z-index:40}
.topo-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 22px;
  max-width:var(--shell);margin:0 auto}
/* A assinatura "mv" vem do logo oficial do cliente, recortada sem alteração. O nome é escrito
   em tipografia porque os dois arquivos de logo trazem "mv prints", com S, e a regra de marca
   que eles nos deram é "MV Print", sem S. Não editamos o logo deles — só não repetimos o S. */
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;color:var(--branco)}
.marca img{width:60px}
.marca span{font-size:1.12rem;font-weight:600;letter-spacing:.01em;line-height:1}
.marca-rodape{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.marca-rodape img{width:52px}
.marca-rodape span{color:var(--branco);font-size:1.02rem;font-weight:600}
.nav{display:flex;gap:4px 16px;flex-wrap:wrap;flex:1 1 auto;font-size:.92rem}
.nav a{color:var(--branco);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--laranja);color:var(--branco)}
.aviso{background:var(--laranja-texto);color:var(--branco);font-size:.82rem;text-align:center;
  padding:7px 22px;letter-spacing:.02em}

/* ---------- tipografia ---------- */
h1,h2,h3{line-height:1.15;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(2rem,5.2vw,3.3rem);font-weight:700}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem);font-weight:700}
h3{font-size:1.06rem;font-weight:700}
.olho{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--laranja-texto);
  font-weight:700;margin:0 0 12px}
.dark .olho{color:var(--laranja-claro)}
.lede{font-size:clamp(1.02rem,1.9vw,1.2rem);color:var(--azul);max-width:62ch;margin:16px 0 0}
.sec{padding:64px 0}
.sec+.sec{padding-top:0}
.dark{background:var(--azul);color:var(--branco)}
.dark .lede,.dark h2,.dark h3{color:var(--branco)}
.dark p{color:#DCE3EB}

/* ---------- capa ---------- */
.capa{background:var(--azul);color:var(--branco);padding:70px 0 78px;position:relative;overflow:hidden}
.capa::after{content:"";position:absolute;right:-140px;top:-90px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,137,58,.30),transparent 68%)}
.capa .shell{position:relative;z-index:1}
.capa h1{max-width:17ch}
.capa .lede{color:#DCE3EB;margin-top:20px}
/* ---------- assinatura: a linha de corte a laser ---------- */
/* Todo acabamento da MV Print é corte a laser — regra de marca do cliente. A linha tracejada
   que se desenha sob os títulos, com o ponto incandescente na ponta, é a assinatura visual
   deste site (o análogo do fio de costura do protótipo da MV Tecidos). */
.corte{display:block;position:relative;width:86px;height:2px;margin:18px 0 0;
  background:repeating-linear-gradient(90deg,var(--laranja) 0 9px,transparent 9px 16px)}
.corte::after{content:"";position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--laranja);box-shadow:0 0 10px 2px rgba(245,137,58,.6)}
.corte--capa{margin:0 0 26px}
/* marcas de corte (crop marks) nos cantos das caixas */
.caixa::before,.caixa::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none}
.caixa::before{top:-1px;left:-1px;border-top:2px solid var(--laranja);border-left:2px solid var(--laranja);
  border-top-left-radius:7px}
.caixa::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--laranja);border-right:2px solid var(--laranja);
  border-bottom-right-radius:7px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--laranja-texto);color:var(--branco);
  text-decoration:none;font-weight:600;font-size:.95rem;padding:13px 24px;border-radius:999px;
  border:2px solid var(--laranja-texto);transition:transform .18s ease,background .18s ease}
.btn:hover{background:#8F400A;border-color:#8F400A;transform:translateY(-1px)}
.btn--vazado{background:transparent;color:var(--branco);border-color:rgba(255,255,255,.55)}
.btn--vazado:hover{background:rgba(255,255,255,.12);border-color:var(--branco);color:var(--branco)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ---------- grade de categorias ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px;margin-top:34px}
.cat{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--azul);
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;
  box-shadow:var(--sombra);transition:transform .2s ease,box-shadow .2s ease;min-width:0}
.cat:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(44,67,93,.14)}
/* no hover, a linha de corte tracejada emoldura o card — o produto "sendo cortado" */
.cat::after{content:"";position:absolute;inset:9px;border:1.5px dashed var(--laranja);border-radius:9px;
  opacity:0;transition:opacity .22s ease;pointer-events:none}
.cat:hover::after{opacity:1}
.cat img{aspect-ratio:2/1;object-fit:cover;width:100%;transition:transform .5s ease}
.cat:hover img{transform:scale(1.04)}
.cat-txt{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;min-height:0}
.cat-txt b{display:block;font-size:1.02rem}
.cat-txt p{margin:6px 0 0;font-size:.88rem;color:var(--azul-70);line-height:1.5}
.cat-txt p:last-of-type{margin-bottom:0}
.medidas{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
/* nowrap aqui estourava o card em 320 com rótulos longos ("Kit com 10 lenços de 70 × 70 cm") */
.med{font-size:.76rem;background:var(--creme);border:1px solid var(--linha);color:var(--azul);
  border-radius:999px;padding:3px 10px;overflow-wrap:anywhere;max-width:100%}

/* ---------- conteúdo ---------- */
.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:34px;align-items:start;margin-top:34px}
/* min-width:0 obrigatório: sem isso a tabela (min-width 440px) estoura a track do grid
   e a página inteira ganha barra horizontal em 320/390. */
.cols>*{min-width:0}
.corpo{min-width:0}
.corpo p{margin:0 0 14px}
.caixa{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:22px;box-shadow:var(--sombra);min-width:0;position:relative}
.caixa h3{margin-bottom:12px}
.caixa+.caixa{margin-top:16px}
.lista{margin:0;padding:0;list-style:none}
.lista li{position:relative;padding:5px 0 5px 20px;font-size:.93rem;border-bottom:1px solid var(--linha)}
.lista li:last-child{border-bottom:0}
.lista li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;
  background:var(--laranja)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{font-size:.84rem;background:var(--creme);border:1px solid var(--linha);border-radius:999px;
  padding:5px 13px}

/* ---------- tabelas ---------- */
.tab{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio);background:var(--branco);
  margin-top:18px;max-width:100%}
table{border-collapse:collapse;width:100%;min-width:440px;font-size:.92rem}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--linha);vertical-align:top}
th{background:var(--creme);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--azul);font-weight:700}
tr:last-child td{border-bottom:0}

/* ---------- etapas ---------- */
.etapas{counter-reset:e;display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:14px;margin-top:30px;padding:0;list-style:none}
/* o card é branco mesmo dentro da faixa escura — precisa forçar a cor do texto,
   senão herda o branco de .dark e some no próprio fundo */
.etapas li{counter-increment:e;background:var(--branco);color:var(--azul);
  border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px 20px;
  font-size:.94rem;min-width:0}
.dark .etapas li{color:var(--azul)}
.etapas li::before{content:counter(e,decimal-leading-zero);display:block;font-size:1.5rem;
  font-weight:700;color:var(--laranja-texto);line-height:1;margin-bottom:8px}

/* ---------- pendência ---------- */
.pend{display:block;background:#FFF6EF;border:1px dashed var(--laranja-texto);color:#7C3806;
  border-radius:10px;padding:13px 16px;font-size:.87rem;margin-top:18px}
.pend b{color:#7C3806}
/* valor que o cliente ainda nao arbitrou — nunca imprimir o numero em disputa */
.pend-inline{background:#FFF6EF;border-bottom:1px dashed var(--laranja-texto);color:#7C3806;
  padding:1px 5px;border-radius:4px;font-size:.94em;white-space:nowrap}
.dark .pend-inline{background:rgba(255,255,255,.10);color:var(--laranja-claro);
  border-bottom-color:var(--laranja-claro)}
/* legenda so para leitor de tela */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- trilha ---------- */
.trilha{font-size:.82rem;color:var(--azul-70);padding:18px 0 0}
.trilha a{color:var(--azul-70)}
.trilha span{margin:0 7px;opacity:.6}

/* ---------- rodapé ---------- */
.rodape{background:var(--azul);color:#DCE3EB;padding:52px 0 30px;margin-top:70px;font-size:.9rem}
.rodape-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.rodape h4{color:var(--branco);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 12px}
.rodape a{color:#DCE3EB;text-decoration:none;display:block;padding:3px 0}
.rodape a:hover{color:var(--branco);text-decoration:underline}
.rodape img{width:120px;margin-bottom:14px}
.legal{border-top:1px solid var(--linha-escura);margin-top:34px;padding-top:20px;font-size:.8rem;
  color:#AFBCCA}

/* ---------- faixa de chamada ---------- */
.faixa{background:var(--laranja-texto);color:var(--branco);padding:52px 0;margin-top:70px}
.faixa h2,.faixa p{color:var(--branco)}
.faixa p{margin:12px 0 0;max-width:60ch}
.faixa .btn{background:var(--branco);color:var(--laranja-texto);border-color:var(--branco)}
.faixa .btn:hover{background:var(--creme);border-color:var(--creme);color:#8F400A}

/* ---------- movimento (guardado) ---------- */
/* .reveal só esconde quando há JS (html.js) — sem JS, tudo nasce visível */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
html.js .etapas .reveal:nth-child(2){transition-delay:.07s}
html.js .etapas .reveal:nth-child(3){transition-delay:.14s}
html.js .etapas .reveal:nth-child(4){transition-delay:.21s}
/* a linha de corte se desenha em vez de deslizar */
html.js .corte.reveal{opacity:1;transform:none;width:0;transition:width .8s ease .15s}
html.js .corte.reveal::after{opacity:0;transition:opacity .3s ease .55s}
html.js .corte.reveal.in{width:86px}
html.js .corte.reveal.in::after{opacity:1}

/* ---------- perguntas rápidas ---------- */
.faq{border:1px solid var(--linha);border-radius:12px;background:var(--branco);margin-top:12px}
.faq summary{cursor:pointer;font-weight:600;font-size:.95rem;padding:14px 44px 14px 18px;
  list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:1.25rem;color:var(--laranja-texto);line-height:1}
.faq[open] summary::after{content:"−"}
.faq div{padding:0 18px 16px;font-size:.92rem;max-width:72ch}
.faq div p{margin:0 0 8px}
.faq-t{margin-top:46px}
/* heading intermediário do corpo: nível h2 no outline, porte de h3 no visual */
.sub{font-size:1.06rem}

/* ---------- pular para o conteúdo ---------- */
.pular{position:absolute;left:-9999px;top:0;z-index:60;background:var(--branco);
  color:var(--azul);padding:10px 18px;border-radius:0 0 10px 0;font-weight:600}
.pular:focus{left:0}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .cols{grid-template-columns:1fr;gap:24px}
  .sec{padding:46px 0}
  .capa{padding:52px 0 58px}
  .nav{font-size:.86rem;gap:2px 13px}
  .marca img{width:112px}
}
@media (max-width:420px){
  body{font-size:16px}
  .shell,.topo-in{padding-left:16px;padding-right:16px}
  .cats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .cat:hover,.btn:hover{transform:none}
  .cat:hover img{transform:none}
  /* com movimento reduzido, nada fica escondido esperando animação */
  html.js .reveal{opacity:1;transform:none}
  html.js .corte.reveal{width:86px}
  html.js .corte.reveal::after{opacity:1}
}

/* --- Coleções dentro de cada produto (decisão do cliente, áudio de 13/08/2026) --- */
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:16px}
.colcard{position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:18px 16px 14px;box-shadow:var(--sombra);min-width:0}
.colcard::before{content:"";position:absolute;top:8px;left:8px;width:14px;height:14px;
  border-top:2px solid var(--laranja);border-left:2px solid var(--laranja);opacity:.8}
.colcard b{display:block;font-size:1.02rem;letter-spacing:.01em}
.colcard span{display:block;font-size:.78rem;color:var(--azul-70);margin-top:6px}
/* chips-atalho de coleção (colecoes.html): são links, mas o sublinhado deixava o bloco ruidoso */
.chips a.chip{text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.chips a.chip:hover,.chips a.chip:focus-visible{border-color:var(--laranja);color:var(--laranja-texto);background:#fff}


/* ---------- grade da pagina de coleções ---------- */
/* Caixa de coleções abraça o conteúdo: sem isto, "Toalhas de piquenique" (1 chip) ficava com a
   altura de "Lenços" (7 chips) e a página virava uma sequência de caixas meio vazias. */
.cats--listas{align-items:start}
/* `.caixa+.caixa{margin-top:16px}` serve a caixas EMPILHADAS em coluna. Dentro da grade
   ela empurrava todas menos a primeira 16px para baixo — a primeira linha nascia torta e
   ninguem via porque 16px parecem 'a animacao ainda rodando'. O gap do grid ja separa. */
.cats .caixa+.caixa{margin-top:0}
.cats--listas .caixa{padding:20px 20px 18px}
.cats--listas .caixa h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:4px}
/* o nome do produto é link para a página dele — precisava parecer um */
.cats--listas .caixa h3 a{display:inline-flex;align-items:center;gap:7px}
.cats--listas .caixa h3 a::after{content:"→";font-size:.9em;color:var(--laranja-texto);
  transform:translateX(-3px);opacity:0;transition:opacity .2s ease,transform .2s ease}
.cats--listas .caixa:hover h3 a::after,.cats--listas .caixa h3 a:focus-visible::after{
  opacity:1;transform:translateX(0)}
.cats--listas .caixa:hover{border-color:var(--laranja)}
.conta-col{font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--azul-70);white-space:nowrap}
.cats--listas .chips{margin-top:12px}