/* ==========================================================================
   DANARTES — Gifts with Love
   Folha de estilo do rascunho  ·  Daily Shot Solutions
   ========================================================================== */

/* --- 0. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* --- 1. Fichas ----------------------------------------------------------- */
:root {
  /* tinta */
  --tinta:        #14100F;
  --carvao:       #3A312D;
  --cinza:        #6E625C;
  /* usado em etiquetas de 10–12 px: tem de aguentar 4.5:1 sobre branco e creme */
  --cinza-claro:  #6F625B;

  /* papel */
  --papel:        #FFFFFF;
  --creme:        #FAF6F3;
  --creme-fundo:  #F2EAE5;

  /* nude / blush — do cartão e das borlas reais da marca */
  --nude:         #EBD8D1;
  --nude-forte:   #DDBCB2;
  --blush:        #C08279;
  --blush-tinta:  #96574F;

  /* metais */
  --ouro:         #B08B4F;
  --ouro-claro:   #E3C88C;
  --ouro-escuro:  #7E6033;
  --aco:          #9BA3A9;
  --aco-claro:    #DFE3E6;
  --aco-escuro:   #5D666D;

  --verde-zap:    #0F7A6E;
  --verde-zap-fd: #25D366;

  --raio:         2px;
  --raio-cartao:  4px;
  --sombra-suave: 0 1px 2px rgba(20,16,15,.05), 0 8px 24px -12px rgba(20,16,15,.18);
  --sombra-media: 0 2px 6px rgba(20,16,15,.06), 0 20px 46px -22px rgba(20,16,15,.30);
  --sombra-alta:  0 30px 70px -30px rgba(20,16,15,.45);

  --ff-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --ff-sans:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-script:  "Great Vibes", "Segoe Script", "Brush Script MT", cursive;

  --larg:  1220px;
  --larg-estreita: 880px;
  --gutter: clamp(18px, 4vw, 48px);
}

/* --- 2. Base ------------------------------------------------------------- */
body {
  font-family: var(--ff-sans);
  font-size: 17px;
  line-height: 1.68;
  color: var(--carvao);
  background: var(--papel);
  font-weight: 300;
  letter-spacing: .005em;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 400; color: var(--tinta); line-height: 1.1; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.3rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p  { max-width: 62ch; }

strong { font-weight: 500; color: var(--tinta); }
em { font-style: italic; }

.env { width: min(100% - var(--gutter) * 2, var(--larg)); margin-inline: auto; }
.env-estreita { width: min(100% - var(--gutter) * 2, var(--larg-estreita)); margin-inline: auto; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* etiqueta de secção — sans espaçada, ecoa o «DANARTES» do cartão */
.etiqueta {
  font-size: .70rem;
  text-transform: uppercase;
  letter-spacing: .34em;
  font-weight: 400;
  color: var(--blush-tinta);
  display: inline-flex;
  align-items: center;
  gap: .8em;
}
.etiqueta::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .6;
}
.etiqueta.centro { justify-content: center; }
.etiqueta.centro::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }

.ornamento { display: block; width: 96px; height: 12px; margin: 18px auto; color: var(--nude-forte); }

/* --- 3. Aviso de rascunho ------------------------------------------------ */
.aviso {
  background: var(--tinta);
  color: #E7DDD8;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
  line-height: 1.5;
}
.aviso b { color: var(--nude); font-weight: 400; }

/* --- 4. Cabeçalho -------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(20,16,15,.09);
}
.topo-int {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  min-height: 78px;
}
.marca { display: flex; align-items: center; gap: 11px; padding: 10px 0; }
.marca svg { width: 34px; height: auto; color: var(--tinta); flex: none; }
.marca-nome { display: block; font-size: .92rem; letter-spacing: .32em; text-transform: uppercase; color: var(--tinta); font-weight: 400; line-height: 1; }
.marca-sub { display: block; font-size: .62rem; letter-spacing: .12em; color: var(--cinza); margin-top: 5px; line-height: 1; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--carvao); padding: 6px 0; position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--blush); transition: right .3s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--tinta); }

.topo-acoes { display: flex; align-items: center; gap: 10px; }

.bt-cesto {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(20,16,15,.18);
  padding: 9px 15px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
  transition: border-color .25s, background .25s, color .25s;
}
.bt-cesto:hover { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.bt-cesto svg { width: 16px; height: 16px; }
.cesto-n {
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--blush-tinta); color: #fff;
  border-radius: 999px; font-size: .66rem; letter-spacing: 0; font-weight: 500;
}
.bt-cesto[data-vazio="1"] .cesto-n { background: var(--cinza); }

.bt-menu { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(20,16,15,.18); }
.bt-menu svg { width: 18px; height: 18px; }

/* --- 5. Botões ----------------------------------------------------------- */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .18em;
  border: 1px solid var(--tinta); background: var(--tinta); color: var(--papel);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
  text-align: center;
}
.bt:hover { background: transparent; color: var(--tinta); }
.bt svg { width: 17px; height: 17px; flex: none; }

.bt-linha { background: transparent; color: var(--tinta); }
.bt-linha:hover { background: var(--tinta); color: var(--papel); }

.bt-zap { background: var(--verde-zap); border-color: var(--verde-zap); color: #fff; }
.bt-zap:hover { background: #0d6b60; border-color: #0d6b60; color: #fff; }

.bt-pequeno { padding: 10px 18px; font-size: .68rem; letter-spacing: .14em; }
.bt-largo { width: 100%; }

/* --- 6. Hero: a bancada de gravação -------------------------------------- */
.bancada {
  position: relative;
  background:
    radial-gradient(120% 90% at 12% 0%, #FBF6F3 0%, #F3E9E4 42%, #EADAD3 100%);
  overflow: hidden;
  padding: clamp(38px, 6vw, 74px) 0 clamp(48px, 7vw, 88px);
}
.bancada::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(65deg, rgba(190,160,150,.09) 0 1px, transparent 1px 9px);
  opacity: .55; pointer-events: none;
}
.bancada-grelha {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: clamp(28px, 4vw, 62px);
  align-items: center;
}

.hero-texto .etiqueta { margin-bottom: 20px; }
.hero-titulo { font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1.04; }
.hero-titulo i { font-style: italic; color: var(--blush-tinta); }
.hero-lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--carvao); margin-top: 22px; max-width: 30em; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-factos {
  display: flex; flex-wrap: wrap; gap: 12px 30px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid rgba(20,16,15,.13);
}
.facto b { display: block; font-family: var(--ff-display); font-size: 1.5rem; color: var(--tinta); line-height: 1; }
.facto span { display: block; font-size: .70rem; text-transform: uppercase; letter-spacing: .16em; color: var(--cinza); margin-top: 7px; }

/* --- 7. O cartão que se grava ------------------------------------------- */
.gravador { position: relative; }
.gravador-cartao {
  position: relative;
  background: var(--papel);
  padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 34px) clamp(20px, 3vw, 28px);
  box-shadow: var(--sombra-alta);
  transform: rotate(-1.1deg);
}
.gravador-cartao::after {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid rgba(20,16,15,.08); pointer-events: none;
}
.gravador-marca { text-align: center; margin-bottom: 4px; }
.gravador-marca svg { width: 52px; height: auto; margin: 0 auto 10px; color: var(--tinta); }
.gravador-marca .n { font-size: .84rem; letter-spacing: .40em; text-transform: uppercase; color: var(--tinta); }
.gravador-marca .s { font-size: .70rem; letter-spacing: .06em; color: var(--cinza); margin-top: 6px; }

.palco {
  position: relative;
  margin: 4px auto 6px;
  width: 100%; max-width: 330px;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.palco svg { width: 100%; height: 100%; overflow: visible; }

.grav-texto {
  font-family: var(--ff-script);
  font-size: 40px;
  fill: #F3F5F6;
}
.grav-texto.est-caps { font-family: var(--ff-sans); font-size: 25px; letter-spacing: .20em; font-weight: 400; }
.grav-texto.est-classica { font-family: var(--ff-display); font-size: 31px; font-style: italic; letter-spacing: .01em; }

.controlos { display: grid; gap: 14px; margin-top: 8px; }
.campo-grav { display: grid; gap: 8px; }
.campo-grav label { font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: var(--cinza); }
.campo-grav input[type="text"] {
  width: 100%;
  border: 0; border-bottom: 1px solid rgba(20,16,15,.22);
  background: transparent;
  padding: 9px 2px;
  font-family: var(--ff-display);
  font-size: 1.22rem;
  color: var(--tinta);
  transition: border-color .25s;
}
.campo-grav input[type="text"]:focus { outline: none; border-bottom-color: var(--blush); }

.opcoes { display: flex; flex-wrap: wrap; gap: 7px; }
.opcao {
  border: 1px solid rgba(20,16,15,.16);
  padding: 7px 13px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--cinza);
  transition: all .22s;
}
.opcao:hover { border-color: var(--carvao); color: var(--carvao); }
.opcao[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.opcao-metal { display: inline-flex; align-items: center; gap: 8px; }
.bolinha { width: 13px; height: 13px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.bolinha.prata { background: linear-gradient(140deg, #F2F4F5, #A9B1B7 55%, #E6EAEC); }
.bolinha.ouro  { background: linear-gradient(140deg, #F5E3BE, #B98F45 55%, #EFD9A8); }
.bolinha.rosa  { background: linear-gradient(140deg, #F6DED4, #C08D7C 55%, #EFCDBE); }

.gravador-nota {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(20,16,15,.1);
  font-size: .78rem; color: var(--cinza); text-align: center;
  max-width: none;
}
.gravador-nota b { color: var(--blush-tinta); font-weight: 400; }

/* borla presa ao cartão */
.borla { position: absolute; top: -14px; right: 30px; width: 34px; z-index: 2; }

/* --- 8. Blocos genéricos ------------------------------------------------- */
.faixa { padding: clamp(56px, 8vw, 104px) 0; }
.faixa-creme { background: var(--creme); }
.faixa-fundo { background: var(--creme-fundo); }
.faixa-tinta { background: var(--tinta); color: #DCD2CD; }
.faixa-tinta h2, .faixa-tinta h3 { color: var(--papel); }
.faixa-tinta .etiqueta { color: var(--nude-forte); }

.cabeca { max-width: 720px; margin-bottom: clamp(32px, 5vw, 54px); }
.cabeca.centro { margin-inline: auto; text-align: center; }
.cabeca h2 { margin-top: 18px; }
.cabeca p { margin-top: 18px; color: var(--cinza); }
.cabeca.centro p { margin-inline: auto; }

/* --- 9. Três passos ------------------------------------------------------ */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(20,16,15,.14); }
.passo { padding: 34px 30px 10px; border-right: 1px solid rgba(20,16,15,.14); position: relative; }
.passo:last-child { border-right: 0; }
.passo-n { font-family: var(--ff-display); font-size: 2.6rem; color: var(--blush); line-height: 1; }
.passo h3 { margin-top: 12px; font-size: 1.28rem; }
.passo p { margin-top: 10px; font-size: .94rem; color: var(--cinza); }

/* --- 10. Categorias (grelha assimétrica) --------------------------------- */
.cats { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.cat {
  position: relative; overflow: hidden;
  background: var(--creme-fundo);
  display: block;
}
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.cat:hover img { transform: scale(1.05); }
/* o gradiente é forte de propósito: as fotografias têm fundos brancos e o
   texto branco desaparecia neles (medido com canvas, pior caso 1:1) */
.cat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10,7,6,.84) 0%,
    rgba(10,7,6,.64) 18%,
    rgba(10,7,6,.32) 42%,
    rgba(10,7,6,.08) 70%,
    rgba(10,7,6,0) 90%);
}
.cat-txt {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 22px 20px; z-index: 2; color: #fff;
  /* placa própria por trás do texto — o ::after sozinho não chegava nas fotos
     de fundo branco (cartões da marca, colar de aço sobre folha) */
  background: linear-gradient(to top,
    rgba(10,7,6,.93) 0%,
    rgba(10,7,6,.86) 55%,
    rgba(10,7,6,.60) 85%,
    rgba(10,7,6,.10) 100%);
}
.cat-txt .t { font-family: var(--ff-display); font-size: 1.42rem; line-height: 1.15; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.cat-txt .d { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; opacity: .88; margin-top: 6px; text-shadow: 0 1px 10px rgba(0,0,0,.6); }

.cat-g { grid-column: span 6; aspect-ratio: 4 / 3; }
.cat-m { grid-column: span 3; aspect-ratio: 3 / 4; }
.cat-p { grid-column: span 3; aspect-ratio: 1 / 1; }
.cat-larga { grid-column: span 6; aspect-ratio: 16 / 9; }

/* --- 11. Mural de frases gravadas ---------------------------------------- */
.mural { columns: 3; column-gap: 16px; }
.frase {
  break-inside: avoid;
  background: var(--papel);
  border: 1px solid rgba(20,16,15,.09);
  padding: 26px 24px 22px;
  margin-bottom: 16px;
  box-shadow: var(--sombra-suave);
}
.frase q {
  display: block;
  font-family: var(--ff-script);
  font-size: 1.6rem;
  line-height: 1.35;
  color: var(--tinta);
  quotes: none;
}
.frase q::before, .frase q::after { content: ""; }
.frase .onde {
  display: block; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(20,16,15,.09);
  font-size: .69rem; text-transform: uppercase; letter-spacing: .17em; color: var(--cinza-claro);
}

/* --- 12. Ocasiões -------------------------------------------------------- */
.ocasioes { display: flex; flex-wrap: wrap; gap: 9px; }
.ocasiao {
  border: 1px solid rgba(20,16,15,.18);
  padding: 11px 20px;
  font-size: .76rem; letter-spacing: .09em;
  transition: all .25s;
  display: inline-flex; align-items: center; gap: 9px;
}
.ocasiao:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.ocasiao svg { width: 15px; height: 15px; opacity: .6; }
.ocasiao:hover svg { opacity: 1; }

/* --- 13. Loja: filtros --------------------------------------------------- */
.loja-topo { padding: clamp(34px, 5vw, 58px) 0 26px; background: var(--creme); border-bottom: 1px solid rgba(20,16,15,.09); }
.filtros { display: grid; gap: 16px; margin-top: 26px; }
.filtro-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtro-tit { font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; color: var(--cinza-claro); min-width: 92px; }
.filtro {
  border: 1px solid rgba(20,16,15,.16);
  padding: 8px 15px; font-size: .74rem; letter-spacing: .05em;
  color: var(--carvao); background: var(--papel);
  transition: all .2s;
}
.filtro:hover { border-color: var(--carvao); }
.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

.contagem { font-size: .78rem; color: var(--cinza); margin: 24px 0 20px; }
.contagem b { color: var(--tinta); font-weight: 500; }

/* --- 14. Grelha de peças ------------------------------------------------- */
.pecas { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: clamp(16px, 2.4vw, 30px); }
.peca { display: flex; flex-direction: column; background: var(--papel); }
.peca-foto {
  position: relative; overflow: hidden; background: var(--creme-fundo);
  aspect-ratio: 1 / 1;
}
.peca-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.peca:hover .peca-foto img { transform: scale(1.045); }
.selo {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.94);
  padding: 5px 11px;
  font-size: .61rem; text-transform: uppercase; letter-spacing: .15em; color: var(--blush-tinta);
}
.selo-ouro { color: var(--ouro-escuro); }
.peca-espreitar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(255,255,255,.96); color: var(--tinta);
  padding: 11px; text-align: center;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.peca:hover .peca-espreitar, .peca:focus-within .peca-espreitar { opacity: 1; transform: translateY(0); }

.peca-corpo { padding: 16px 2px 0; display: flex; flex-direction: column; flex: 1; }
.peca-cat { font-size: .63rem; text-transform: uppercase; letter-spacing: .18em; color: var(--cinza-claro); }
.peca-nome { font-family: var(--ff-display); font-size: 1.13rem; line-height: 1.25; margin-top: 7px; color: var(--tinta); }
.peca-desc { font-size: .85rem; color: var(--cinza); margin-top: 7px; line-height: 1.5; }
.peca-fundo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.peca-preco { font-family: var(--ff-display); font-size: 1.16rem; color: var(--tinta); }
.peca-preco small { font-family: var(--ff-sans); font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--cinza-claro); display: block; margin-bottom: 2px; }
.bt-juntar {
  border: 1px solid var(--tinta); padding: 9px 16px;
  font-size: .67rem; text-transform: uppercase; letter-spacing: .14em;
  transition: all .22s; white-space: nowrap;
}
.bt-juntar:hover { background: var(--tinta); color: var(--papel); }
.bt-juntar.feito { background: var(--verde-zap); border-color: var(--verde-zap); color: #fff; }

.vazio-msg { padding: 60px 20px; text-align: center; color: var(--cinza); }

/* --- 15. Gaveta do cesto ------------------------------------------------- */
.veu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,16,15,.5);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.veu.aberto { opacity: 1; visibility: visible; }

.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(440px, 100%);
  background: var(--papel);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform .42s cubic-bezier(.3,.8,.3,1);
  box-shadow: -20px 0 60px -30px rgba(20,16,15,.5);
}
.gaveta.aberta { transform: translateX(0); }

.gaveta-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid rgba(20,16,15,.1);
  flex: none;
}
.gaveta-topo h2 { font-size: 1.32rem; }
.gaveta-topo .sub { font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--cinza-claro); margin-top: 4px; }
.bt-fechar { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(20,16,15,.15); transition: all .2s; }
.bt-fechar:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.bt-fechar svg { width: 15px; height: 15px; }

.gaveta-lista { flex: 1; overflow-y: auto; padding: 6px 24px; }
.linha-cesto { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(20,16,15,.08); }
.linha-cesto img { width: 64px; height: 64px; object-fit: cover; background: var(--creme-fundo); }
.linha-cesto .n { font-family: var(--ff-display); font-size: 1rem; color: var(--tinta); line-height: 1.25; }
.linha-cesto .o { font-size: .76rem; color: var(--cinza); margin-top: 5px; line-height: 1.45; }
.linha-cesto .o span { display: block; }
.linha-cesto .p { font-family: var(--ff-display); font-size: .98rem; color: var(--tinta); text-align: right; white-space: nowrap; }
.linha-cesto .rem { display: block; margin-top: 8px; font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cinza-claro); text-align: right; }
.linha-cesto .rem:hover { color: var(--blush-tinta); }
.qtd { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; }
.qtd button { width: 22px; height: 22px; border: 1px solid rgba(20,16,15,.18); display: grid; place-items: center; font-size: .85rem; line-height: 1; color: var(--carvao); }
.qtd button:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.qtd span { font-size: .82rem; min-width: 14px; text-align: center; }

.gaveta-vazia { padding: 50px 24px; text-align: center; color: var(--cinza); }
.gaveta-vazia svg { width: 42px; height: 42px; margin: 0 auto 16px; color: var(--nude-forte); }

.gaveta-fim { flex: none; border-top: 1px solid rgba(20,16,15,.1); padding: 20px 24px 24px; background: var(--creme); }
.entrega-op { display: grid; gap: 7px; margin-bottom: 16px; }
.entrega-op .filtro-tit { margin-bottom: 3px; }
.radio-linha { display: flex; gap: 7px; flex-wrap: wrap; }
.radio-linha .opcao { flex: 1; text-align: center; justify-content: center; }

.total { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 6px; }
.total .l { font-size: .70rem; text-transform: uppercase; letter-spacing: .18em; color: var(--cinza); }
.total .v { font-family: var(--ff-display); font-size: 1.7rem; color: var(--tinta); }
.total-nota { font-size: .72rem; color: var(--cinza-claro); margin-bottom: 14px; }

/* pré-visualização da mensagem de WhatsApp */
.zap-espreita {
  background: #ECE5DD;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
  max-height: 190px; overflow-y: auto;
}
.zap-balao {
  background: #DCF8C6;
  border-radius: 8px 2px 8px 8px;
  padding: 10px 12px;
  font-size: .78rem; line-height: 1.5; color: #1F2C33;
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--ff-sans);
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.zap-titulo { display: flex; align-items: center; gap: 8px; font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--cinza); margin-bottom: 8px; }
.zap-titulo svg { width: 14px; height: 14px; color: var(--verde-zap); }

/* --- 16. Modal de peça --------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center;
  padding: max(16px, 3vh) 16px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal.aberto { opacity: 1; visibility: visible; }
.modal-fundo { position: absolute; inset: 0; background: rgba(20,16,15,.62); }
.modal-caixa {
  position: relative; z-index: 2;
  background: var(--papel);
  width: min(920px, 100%);
  max-height: 92vh; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  box-shadow: var(--sombra-alta);
  transform: translateY(14px) scale(.99);
  transition: transform .35s cubic-bezier(.3,.8,.3,1);
}
.modal.aberto .modal-caixa { transform: none; }
.modal-foto { background: var(--creme-fundo); }
.modal-foto img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.modal-corpo { padding: clamp(24px, 3.4vw, 40px); }
.modal-corpo h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 8px; }
.modal-corpo .peca-desc { font-size: .93rem; margin-top: 14px; }
.modal-bloco { margin-top: 22px; }
.modal-bloco > .filtro-tit { display: block; margin-bottom: 9px; }
.modal-fim { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(20,16,15,.1); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bt-fechar-modal { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(255,255,255,.94); }

/* --- 17. Atelier (configurador grande) ----------------------------------- */
.atelier-grelha {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.atelier-palco {
  position: sticky; top: 100px;
  background: radial-gradient(110% 90% at 30% 10%, #FBF7F4, #EEE0DA);
  padding: clamp(24px, 3vw, 42px);
  box-shadow: var(--sombra-media);
}
.atelier-palco .palco { max-width: 400px; }
.atelier-resumo { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(20,16,15,.13); }
.resumo-linha { display: flex; justify-content: space-between; gap: 14px; font-size: .82rem; padding: 5px 0; color: var(--cinza); }
.resumo-linha b { color: var(--tinta); font-weight: 400; text-align: right; }
.resumo-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(20,16,15,.13); }
.resumo-total .l { font-size: .70rem; text-transform: uppercase; letter-spacing: .18em; color: var(--cinza); }
.resumo-total .v { font-family: var(--ff-display); font-size: 1.8rem; color: var(--tinta); }

.grupo { padding: 24px 0; border-bottom: 1px solid rgba(20,16,15,.1); }
.grupo:first-of-type { padding-top: 0; }
.grupo-tit { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.grupo-n { font-family: var(--ff-display); font-size: 1rem; color: var(--blush-tinta); }
.grupo-tit h3 { font-size: 1.18rem; }
.grupo p.ajuda { font-size: .84rem; color: var(--cinza); margin-bottom: 13px; }

.formas { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.forma {
  border: 1px solid rgba(20,16,15,.16);
  padding: 13px 6px 9px;
  display: grid; justify-items: center; gap: 8px;
  transition: all .22s;
  background: var(--papel);
}
.forma svg { width: 32px; height: 32px; color: var(--aco-escuro); }
.forma span { font-size: .63rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cinza); }
.forma:hover { border-color: var(--carvao); }
.forma[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.forma[aria-pressed="true"] svg, .forma[aria-pressed="true"] span { color: var(--tinta); }

.contador { font-size: .68rem; color: var(--cinza-claro); text-align: right; letter-spacing: .06em; }
.contador.cheio { color: var(--blush-tinta); }

textarea.campo {
  width: 100%; border: 1px solid rgba(20,16,15,.18); background: var(--papel);
  padding: 12px 14px; font-family: var(--ff-sans); font-size: .95rem; resize: vertical; min-height: 84px;
}
textarea.campo:focus, .campo-txt:focus { outline: none; border-color: var(--blush); }
.campo-txt {
  width: 100%; border: 1px solid rgba(20,16,15,.18); background: var(--papel);
  padding: 12px 14px; font-family: var(--ff-sans); font-size: .95rem;
}

.berloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.berloque {
  border: 1px solid rgba(20,16,15,.14); padding: 12px 6px 9px;
  display: grid; justify-items: center; gap: 7px;
  transition: all .22s; background: var(--papel);
}
.berloque svg { width: 28px; height: 28px; color: var(--ouro); }
.berloque span { font-size: .63rem; text-transform: uppercase; letter-spacing: .09em; color: var(--cinza); text-align: center; line-height: 1.3; }
.berloque:hover { border-color: var(--carvao); }
.berloque[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.berloque[aria-pressed="true"] span { color: var(--tinta); }

.borlas { display: flex; flex-wrap: wrap; gap: 8px; }
.borla-op { width: 40px; height: 40px; border: 1px solid rgba(20,16,15,.14); display: grid; place-items: center; transition: all .2s; }
.borla-op i { display: block; width: 20px; height: 20px; border-radius: 50%; }
.borla-op[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tinta); border-color: var(--tinta); }

/* --- 18. Bloco foto + texto --------------------------------------------- */
.duo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(26px, 4vw, 64px); align-items: center; }
.duo-foto { position: relative; }
.duo-foto img { width: 100%; box-shadow: var(--sombra-media); }
.duo-foto .marca-agua {
  position: absolute; bottom: -18px; right: -14px;
  background: var(--papel); padding: 14px 18px;
  box-shadow: var(--sombra-suave);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--blush-tinta);
}
.duo-texto h2 { margin-top: 16px; }
.duo-texto p { margin-top: 16px; }
.lista-marca { margin-top: 22px; display: grid; gap: 11px; }
.lista-marca li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: .93rem; }
.lista-marca svg { width: 16px; height: 16px; color: var(--blush); margin-top: 4px; }

/* --- 19. Contactos ------------------------------------------------------- */
.cartoes-contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: rgba(20,16,15,.12); border: 1px solid rgba(20,16,15,.12); }
.cartao-c { background: var(--papel); padding: 28px 26px; }
.cartao-c svg { width: 22px; height: 22px; color: var(--blush); }
.cartao-c h3 { font-size: 1.1rem; margin-top: 14px; }
.cartao-c p { font-size: .9rem; color: var(--cinza); margin-top: 8px; }
.cartao-c a.destaque { display: inline-block; margin-top: 10px; font-size: .95rem; color: var(--tinta); border-bottom: 1px solid var(--nude-forte); padding-bottom: 2px; }
.cartao-c a.destaque:hover { border-bottom-color: var(--blush); }

.mapa { width: 100%; aspect-ratio: 16/8; border: 0; filter: grayscale(1) contrast(1.05); }
@media (max-width: 700px) { .mapa { aspect-ratio: 4/3; } }

.horario { display: grid; gap: 0; margin-top: 14px; }
.horario li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(20,16,15,.08); font-size: .9rem; }
.horario li b { font-weight: 400; color: var(--tinta); }

/* --- 20. Rodapé ---------------------------------------------------------- */
.rodape { background: var(--tinta); color: #B9ADA7; padding: clamp(48px, 6vw, 78px) 0 28px; }
.rodape-grelha { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(24px, 3vw, 48px); }
.rodape h4 { color: var(--papel); font-family: var(--ff-sans); font-size: .70rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 400; margin-bottom: 16px; }
.rodape a:hover { color: var(--nude); }
.rodape ul { display: grid; gap: 9px; font-size: .88rem; }
.rodape ul li, .rodape ul a { overflow-wrap: anywhere; }
.rodape .marca svg { color: var(--papel); }
.rodape .marca-nome { color: var(--papel); }
.rodape .marca-sub { color: var(--cinza-claro); }
.rodape-lead { font-size: .9rem; margin-top: 18px; max-width: 34ch; }
.redes { display: flex; gap: 9px; margin-top: 18px; }
.redes a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: all .22s; }
.redes a:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.redes svg { width: 16px; height: 16px; }
.rodape-fim {
  margin-top: clamp(32px, 4vw, 54px); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .74rem; color: #857A75;
}

/* --- 21. Botão flutuante WhatsApp --------------------------------------- */
.zap-flutua {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--verde-zap-fd); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px -8px rgba(18,140,126,.75);
  transition: transform .25s;
}
.zap-flutua:hover { transform: scale(1.07); }
.zap-flutua svg { width: 27px; height: 27px; }

/* --- 22. Reveal ---------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- 23. Respostas ------------------------------------------------------- */
@media (max-width: 1040px) {
  .rodape-grelha { grid-template-columns: 1fr 1fr; gap: 34px; }
  .mural { columns: 2; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .bt-menu { display: grid; }
  .topo.menu-aberto .nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--papel); flex-direction: column; align-items: stretch;
    padding: 8px 0 16px; border-bottom: 1px solid rgba(20,16,15,.1);
    box-shadow: var(--sombra-media);
  }
  .topo.menu-aberto .nav a { padding: 13px var(--gutter); font-size: .85rem; }
  .topo.menu-aberto .nav a::after { display: none; }
  .bancada-grelha { grid-template-columns: 1fr; }
  .gravador { order: -1; max-width: 480px; margin-inline: auto; width: 100%; }
  .atelier-grelha { grid-template-columns: 1fr; }
  .atelier-palco { position: static; }
  .duo { grid-template-columns: 1fr; }
  .duo-foto .marca-agua { right: 10px; bottom: -14px; }
  .modal-caixa { grid-template-columns: 1fr; }
  .modal-foto img { max-height: 300px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .passos { grid-template-columns: 1fr; }
  .passo { border-right: 0; border-bottom: 1px solid rgba(20,16,15,.14); padding: 24px 0 20px; }
  .passo:last-child { border-bottom: 0; }
  .cats { gap: 10px; }
  .cat-g, .cat-m, .cat-p, .cat-larga { grid-column: span 6; }
  .cat-g { aspect-ratio: 3/2; }
  .cat-m, .cat-p { aspect-ratio: 1/1; }
  .mural { columns: 1; }
  .hero-factos { gap: 12px 22px; }
  .filtro-tit { min-width: 100%; }
}
@media (max-width: 620px) {
  .rodape-grelha { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 470px) {
  .cat-g, .cat-m, .cat-p, .cat-larga { grid-column: span 12; }
  .pecas { grid-template-columns: 1fr 1fr; gap: 12px; }
  .peca-nome { font-size: 1rem; }
  .peca-desc { display: none; }
  .peca-fundo { flex-direction: column; align-items: flex-start; gap: 9px; }
  .bt-juntar { width: 100%; text-align: center; }
  .marca-sub { display: none; }
  .bt-cesto span.rot { display: none; }
}