:root{
  --red:#c8102e;
  --red-dark:#8c0a1f;
  --black:#131110;
  --white:#ffffff;
  --off:#ffffff;
  --line: rgba(19,17,16,0.12);
  --serif: 'Cormorant Garamond', serif;
  --script: 'Great Vibes', cursive;
  --sans: 'Jost', sans-serif;
  --blocky: 'Bebas Neue', sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}

html,body{overflow-x:hidden;max-width:100%;}

/* ---------- SCROLLBAR ---------- */
html{scrollbar-color: var(--red) var(--white); scrollbar-width: thin;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--white);}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:8px;border:2px solid var(--white);}
::-webkit-scrollbar-thumb:hover{background:var(--red-dark);}

body{
  background:var(--white);
  color:var(--black);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* ---------- HERO (parede de quadros à deriva) ---------- */
.hero{
  position:relative;height:100vh;width:100%;
  overflow:hidden;background:var(--black);
}
.hero--white{background:var(--white);}

.hero-static{position:relative;height:100vh;width:100%;}
.hero-round-cap{
  position:relative;z-index:3;
  height:48px;margin-top:-48px;
  background:var(--white);
  border-radius:32px 32px 0 0;
}
.drift-wall-root{position:absolute;inset:0;z-index:1;}

.hero-carousel{
  position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--black);
  background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABIMDRANCxIQDhAUExIVGywdGxgYGzYnKSAsQDlEQz85Pj1HUGZXR0thTT0+WXlaYWltcnNyRVV9hnxvhWZwcm7/2wBDARMUFBsXGzQdHTRuST5Jbm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm7/wAARCAANABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwChbTR9GOKnd4SvDVixucVIWNdX1iV7mPIaDeWwwGorPDtRVrEvsS6Z/9k=");
  background-size:cover;background-position:center;
}

/* cada slide: fundo desfocado preenchendo a tela + imagem inteira por cima */
.hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero-slide.is-active{opacity:1;}

.hero-slide-bg{display:none;}
.hero-slide-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.hero-shadow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,0.4) 0%,
    rgba(0,0,0,0.12) 30%,
    rgba(0,0,0,0.08) 60%,
    rgba(0,0,0,0.28) 100%);
}
.hero-content.hero-content--static{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
}
.hero-content--static.has-glow::before{
  content:'';position:absolute;left:50%;top:50%;
  width:min(650px,80vw);height:min(650px,80vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0) 70%);
  filter:blur(6px);
  z-index:-1;
}
.hero-content--static.has-glow .hero-logo{
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.6))
    drop-shadow(0 0 24px rgba(255,255,255,0.35));
}
.hero-content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:1.2rem;padding:0 1.5rem;
}
.hero-content.hero-content--static{ perspective:900px; }
.hero-logo{
  width:min(520px,80vw);
  filter:brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0,0,0,0.45));
  pointer-events:auto;cursor:pointer;
  transform-style:preserve-3d;will-change:transform;
  transition:transform .18s cubic-bezier(.16,1,.3,1);
}
.hero-logo--red{
  filter:drop-shadow(0 4px 18px rgba(0,0,0,0.18));
  opacity:0;transform:translateY(24px) scale(.96);
  animation:heroIn 1.1s cubic-bezier(.16,1,.3,1) .3s forwards;
}
.hero-logo--white{
  filter:brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0,0,0,0.35));
  opacity:0;transform:translateY(24px) scale(.96);
  animation:heroIn 1.1s cubic-bezier(.16,1,.3,1) .3s forwards;
}
.hero-sub{
  color:var(--white);font-family:var(--serif);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  font-size:clamp(.85rem,1.6vw,1.05rem);
  opacity:0;transform:translateY(16px);
  animation:heroIn 1s cubic-bezier(.16,1,.3,1) .6s forwards;
}

/* ---------- HERO ESTILO MUSEU (Ozeum) ---------- */
.hero-content--museum{gap:1.4rem;text-align:left;align-items:flex-start;padding:0 4vw;}
.hero-eyebrow{
  color:var(--white);font-family:var(--sans);font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;font-size:.78rem;
  opacity:0;transform:translateY(14px);
  animation:heroIn .9s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.hero-headline{
  color:var(--white);font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;font-weight:400;
  font-size:clamp(2.0rem,8vw,5.0rem);line-height:1.04;
  max-width:16ch;
  opacity:0;transform:translateY(22px);
  animation:heroIn 1.05s cubic-bezier(.16,1,.3,1) .32s forwards;
  font-weight: 700;
}
.hero-cta{
  pointer-events:auto;
  display:inline-block;background:var(--red);color:var(--white);
  font-family:var(--sans);font-weight:600;font-size:.82rem;
  letter-spacing:.05em;text-transform:uppercase;
  padding:.95rem 2.1rem;margin-top:.4rem;
  transition:background .25s ease, color .25s ease;
  opacity:0;transform:translateY(18px);
  animation:heroIn .95s cubic-bezier(.16,1,.3,1) .5s forwards;
}
.hero-cta:hover{background:var(--white);color:var(--red);}

.hero-wave-divider {
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
}
.hero-wave-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 250px;
}
.hero-wave-divider .shape-fill {
    fill: #FFFFFF;
}

/* ---------- REVEAL (peças surgindo da lateral no scroll) ---------- */
.reveal-section{
  max-width:1480px;margin:0 auto;padding:4.5rem 1.5rem 2rem;overflow:hidden;
  position:relative;
}
.reveal-head{text-align:center;margin-bottom:3rem;}
.reveal-head h2{
  font-family:var(--script);font-weight:400;color:var(--red);
  font-size:clamp(3rem,5vw,4.2rem);margin-bottom:.2rem;
}
.reveal-head p{color:rgba(19,17,16,0.6);font-size:.95rem;}
.reveal-banner{
  width:100vw;height:110px;overflow:hidden;margin-bottom:3rem;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.reveal-banner img{width:100%;height:100%;object-fit:cover;display:block;}
.reveal-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2rem;align-items:end;
}
.reveal-item{
  display:grid;grid-template-columns:140px 1fr;
  grid-template-areas: "img name" "img desc";
  column-gap:1.5rem;
  background:var(--off);border:1px solid var(--line);
  padding:1.5rem;
  text-decoration:none;color:inherit;
  opacity:0;transition:opacity 2.2s cubic-bezier(.16,1,.3,1), transform 2.2s cubic-bezier(.16,1,.3,1), border-color .2s ease;
}
.reveal-item:hover{border-color:var(--red);}
.reveal-square{
  grid-area: img;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
}
.reveal-item img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(19,17,16,0.1));}
.reveal-name{
  grid-area: name;
  font-family:var(--serif);font-weight:600;font-size:1.15rem;margin-bottom:0;align-self:end;
}
.reveal-desc{
  grid-area: desc;
  font-size:.88rem;line-height:1.4;color:rgba(19,17,16,0.62);font-weight:300;align-self:start;margin-top:.3rem;
}
.reveal-from-left{transform:translateX(-120px);}
.reveal-from-right{transform:translateX(120px);}
.reveal-item.is-visible{opacity:1;transform:translateX(0);}
.reveal-row .reveal-item:nth-child(2){transition-delay:.15s;}
.reveal-row .reveal-item:nth-child(3){transition-delay:.3s;}

@media (max-width:860px){
  .reveal-row{grid-template-columns:1fr;gap:2.5rem;}
  .reveal-from-left{transform:translateX(-60px);}
  .reveal-from-right{transform:translateX(60px);}
}/* ---------- COLUNAS ESTILO MUSEU (Categorias Bento) ---------- */
/* grid flexível: se adapta ao número real de categorias em vez de reservar
   5 células fixas (com poucas categorias, uma célula "e" vazia deixava um
   vão enorme na seção) */
.museum-columns{
  max-width:100%;margin:0 auto;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows:clamp(360px, 45vh, 600px);
  gap:0.3rem;
}

/* linha que abriga o grid de categorias + a foto do artista à direita */
.museum-columns-row{
  display:flex;flex-wrap:wrap;align-items:stretch;
  padding:5rem 0.5rem 1rem;gap:0.3rem;
}
.museum-columns-row .museum-columns{
  flex:1.5 1 440px;padding:0;min-width:0;
  grid-template-columns:repeat(2, 1fr);
}
/* mesma altura do grid de categorias, porém bem mais larga */
.museum-columns-artist{
  flex:2 1 560px;position:relative;overflow:hidden;
  align-self:stretch;text-decoration:none;
}
.museum-columns-artist img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;filter:grayscale(.15);
}
.museum-columns-artist-overlay{
  /* sombra só bem no rodapé, o suficiente para a legenda ficar legível
     sem escurecer a foto */
  position:absolute;left:0;right:0;bottom:0;height:32%;
  background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%);
}
.museum-columns-artist-caption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem;color:var(--white);
}
.museum-columns-artist-caption span{
  display:block;font-family:var(--script);font-weight:400;
  font-size:1.9rem;line-height:1;color:var(--white);
}
.museum-columns-artist-caption small{
  display:block;margin-top:.35rem;font-family:var(--sans);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);
}
@media (max-width:900px){
  .museum-columns-row{flex-direction:column;}
  .museum-columns-artist{min-height:340px;flex-basis:auto;margin:0;}
}

.museum-col{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--off);overflow:hidden;
  padding:2rem;color:var(--white);text-decoration:none;
}
.museum-col-bg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;z-index:1;transition:transform .6s ease;
}
.museum-col-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
  z-index:2;pointer-events:none;
}
.museum-col-content{
  position:relative;z-index:3;
}
.museum-col h3{
  font-family:var(--blocky);font-weight:400;font-size:2.2rem;
  letter-spacing:0.05em;text-transform:uppercase;margin-bottom:.2rem;
}
.museum-col-explore{
  font-family:var(--sans);font-size:.8rem;font-weight:600;
  letter-spacing:0.15em;text-transform:uppercase;opacity:0.8;
  transition:opacity 0.2s ease;
}
.museum-col:hover .museum-col-bg{transform:scale(1.05);}
.museum-col:hover .museum-col-explore{opacity:1;}

@media (max-width:640px){
  .museum-columns{
    grid-template-columns:1fr;
    grid-auto-rows:280px;
  }
}

/* ---------- SEÇÃO SOBRE (split) ---------- */
.museum-about{
  display:grid;grid-template-columns:1.5fr 1fr;
  background:var(--off);margin-top:2rem;min-height:350px;
  position:relative;
  /* sem overflow:hidden aqui — as cartas giradas passam da caixa e eram
     cortadas embaixo, deixando um vão branco no lugar da ponta delas */
  overflow:visible;
}
.museum-about-text{
  display:flex;flex-direction:column;justify-content:center;gap:1.2rem;
  padding:3rem 5vw;max-width:600px;
}
.museum-about-text h2{
  font-family:var(--script);font-weight:400;color:var(--red);
  font-size:clamp(2.8rem,4.5vw,3.8rem);line-height:1.05;
}
.museum-about-text p{
  font-size:.95rem;line-height:1.8;color:rgba(19,17,16,0.7);font-weight:300;
}
.museum-about-link{
  font-size:.85rem;font-weight:600;letter-spacing:.03em;color:var(--red);width:fit-content;
  border-bottom:1px solid var(--red);padding-bottom:2px;
}
.museum-about-link:hover{opacity:.7;}
.deck-container {
  display:flex;align-items:center;justify-content:center;
  position:relative;
  /* as cartas das pontas giram ±20°, o que as deixa mais altas que a própria
     caixa — sem essa folga o overflow:hidden da seção corta a base delas */
  min-height:520px;padding:3.5rem 2rem;
  transform: translateX(-40px);
}
.deck-card {
  position:absolute;
  width:100%;max-width:240px;aspect-ratio:3/4;object-fit:cover;
  border:6px solid var(--white);border-radius:4px;
  box-shadow:0 12px 28px rgba(19,17,16,0.15);
  transform-origin:bottom center;
  will-change:transform,opacity;
  /* rede de segurança: sem JS o leque aparece montado, nunca em branco.
     Quando o script roda, ele marca .deck-js e passa a escrever o transform
     de cada carta a cada frame, acompanhando o scroll. */
  opacity:1;
}
.deck-card-1 { z-index:1; transform: rotate(-20deg) translateX(-50px) translateY(20px); }
.deck-card-2 { z-index:2; transform: rotate(-10deg) translateX(-25px) translateY(5px); }
.deck-card-3 { z-index:3; transform: rotate(0deg) translateX(0) translateY(0); }
.deck-card-4 { z-index:4; transform: rotate(10deg) translateX(25px) translateY(5px); }
.deck-card-5 { z-index:5; transform: rotate(20deg) translateX(50px) translateY(20px); }
/* com o scrub ativo não pode haver transition: ela brigaria com o transform
   reescrito a cada frame e deixaria o movimento "borrachudo" */
.deck-container.deck-js .deck-card{transition:none;}

/* ---------- SEÇÃO DE COLEÇÃO (mais vendidos / exclusivos) ---------- */
.museum-collection{max-width:1480px;margin:0 auto;padding:4.5rem 1.5rem 2rem;position:relative;overflow:hidden;}
.museum-collection-head{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem;
  border-bottom:1px solid var(--black);padding-bottom:1rem;margin-bottom:2.2rem;
}
.museum-collection-head h2{
  font-family:var(--script);font-weight:400;color:var(--red);
  font-size:clamp(2.4rem,4vw,3.2rem);line-height:1.05;
}
.museum-collection-link{
  font-size:.82rem;font-weight:600;color:var(--red);flex-shrink:0;
}
.museum-collection-link:hover{opacity:.7;}
.museum-load-more{text-align:center;margin-top:3rem;}
.btn-load-more{
  display:inline-block;background:var(--white);color:var(--red);
  border:1.5px solid var(--red);
  font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:1rem 2.6rem;
  box-shadow:4px 4px 0 var(--red);
  transition:background .2s ease, color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-load-more:hover{
  background:var(--red);color:var(--white);
  transform:translate(4px,4px);box-shadow:0 0 0 var(--red);
}

@media (max-width:900px){
  .museum-columns{grid-template-columns:1fr;gap:2.5rem;}
  .museum-about{grid-template-columns:1fr;}
  .museum-about-media img{min-height:260px;}
}
@keyframes heroIn{to{opacity:1;transform:translateY(0) scale(1);}}

.hero-content--dark .hero-sub{color:var(--black);}

/* ---------- HEADER ---------- */
.site-header-wrap{position:fixed;top:0;left:0;right:0;z-index:100;}

.topbar{
  position:relative;height:1.9rem;overflow:hidden;
  background:var(--red);color:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.topbar-msg{
  position:absolute;left:0;right:0;text-align:center;
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease, transform .5s ease;
}
.topbar-msg.is-active{opacity:1;transform:translateY(0);}

.site-header{
  position:relative;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
}

.header-inner{
  max-width:1480px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 1.6rem;
}
.brand{display:flex;align-items:center;gap:.6rem;}
.brand-logo{height:30px;width:auto;}
.main-nav{display:flex;gap:2.1rem;}
.main-nav a{
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  position:relative;padding-bottom:4px;
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--red);transition:width .3s ease;
}
.main-nav a:hover::after, .main-nav a.is-active::after{width:100%;}

/* ---------- SELETOR DE IDIOMA ---------- */
.header-actions{display:flex;align-items:center;gap:.35rem;flex-shrink:0;}
.lang-switch{position:relative;}
.lang-btn{
  display:flex;align-items:center;gap:.35rem;
  background:none;border:none;cursor:pointer;
  padding:.4rem .5rem;color:var(--black);
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  transition:color .25s ease;
}
.lang-btn:hover{color:var(--red);}
.lang-btn svg{width:18px;height:18px;}
.lang-menu{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:300;
  min-width:150px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 12px 30px rgba(19,17,16,0.12);
  display:flex;flex-direction:column;overflow:hidden;
}
.lang-menu[hidden]{display:none;}
.lang-option{
  background:none;border:none;cursor:pointer;text-align:left;
  padding:.7rem 1rem;font-family:var(--sans);font-size:.82rem;color:var(--black);
  transition:background .18s ease,color .18s ease;
}
.lang-option:hover{background:var(--off);color:var(--red);}
.lang-option.is-active{color:var(--red);font-weight:600;}

.cart-btn{
  position:relative;background:none;border:none;
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--black);
  transition:color .25s ease, transform .2s ease;
}
.cart-btn:hover{color:var(--red);transform:scale(1.08);}
.cart-btn svg{width:22px;height:22px;}
.cart-count{
  position:absolute;top:-8px;right:-8px;
  background:var(--red);color:var(--white);
  font-size:.65rem;font-weight:600;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- SEPARADOR ANIMADO (hero → resto) ---------- */
.hero-divider{
  position:relative;max-width:1480px;margin:0 auto;padding:3rem 1.5rem;
  display:flex;align-items:center;justify-content:center;
}
.hero-divider-track{
  position:absolute;left:1.5rem;right:1.5rem;top:50%;height:1px;
  background:var(--line);
  border-radius:999px;
}
.hero-divider-fill{
  position:relative;height:2px;width:140px;background:var(--red);
  border-radius:999px;
  transform:scaleX(0);transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.hero-divider.is-visible .hero-divider-fill{transform:scaleX(1);}
.hero-divider-mark{
  position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--red);
  transform:translate(-50%,-50%) rotate(45deg) scale(0);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) .55s;
}
.hero-divider.is-visible .hero-divider-mark{transform:translate(-50%,-50%) rotate(45deg) scale(1);}

/* ---------- GRID DE CATEGORIAS (home) ---------- */
/* ---------- FAIXA ONDULADA (logo abaixo do hero) ---------- */
.marquee-band{
  position:relative;overflow:hidden;
  background:var(--white);
  height:clamp(90px,11vw,150px);
}
.marquee-divider{
  position:absolute;left:0;right:0;bottom:-1px;
  width:100%;height:38px;
  display:block;
  animation:snake-slide 9s linear infinite;
}
.marquee-divider-fill{fill:var(--off);}
.marquee-svg{
  display:block;width:100%;height:100%;
}
/* a onda é periódica (400 unidades), então deslocar exatamente um
   período faz o loop emendar sem salto visível */
.marquee-wave{
  animation:snake-slide 9s linear infinite;
}
.marquee-text{
  fill:var(--black);
  font-family:var(--serif);
  font-weight:700;
  font-size:34px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
@keyframes snake-slide{
  from{transform:translateX(0);}
  to{transform:translateX(-400px);}
}

.category-grid-section{max-width:none;padding:0;margin-top:3rem;}
.category-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;
}
.category-tile{
  position:relative;display:block;overflow:hidden;
  height:380px;background:var(--off);
}
.category-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.category-tile:hover img{transform:scale(1.06);}
.category-tile-placeholder{position:absolute;inset:0;background:var(--off);}
.category-tile-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
}
.category-tile-label{
  position:absolute;left:1.6rem;right:1.6rem;bottom:1.6rem;color:var(--white);
}
.category-tile-desc{
  display:block;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,0.75);margin-bottom:.4rem;
}
.category-tile-name{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.6rem;margin-bottom:.6rem;
}
.category-tile-cta{
  display:inline-block;font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;border-bottom:1px solid var(--white);padding-bottom:2px;
  transition:border-color .25s ease;
}
.category-tile:hover .category-tile-cta{border-color:rgba(255,255,255,0.4);}

/* ---------- SEÇÕES DA HOME (mais vendidos / exclusivos) ---------- */
.home-section{max-width:1480px;margin:0 auto;padding:4rem 1.5rem;background:var(--white);}
.home-section-head{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-bottom:2rem;gap:.6rem;
}
.home-section-title{
  font-family:var(--serif);font-weight:700;color:var(--red);
  font-size:clamp(1.7rem,3.6vw,2.4rem);
}
.home-section-link{
  font-size:.85rem;font-weight:600;color:var(--red);
  transition:opacity .2s ease;
}
.home-section-link:hover{opacity:.7;}

/* ---------- CARD ESTILO NOVELO (mais vendidos / exclusivos) ---------- */
.novelo-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1rem 1.2rem;
}
@media (min-width:640px){ .novelo-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1024px){ .novelo-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem;} }

.novelo-card{display:block;perspective:900px;}
.novelo-card-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--off);
  transform:rotateX(0deg) rotateY(0deg) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
  will-change:transform;
}
.novelo-card:hover .novelo-card-media{
  box-shadow:0 20px 34px -14px rgba(19,17,16,0.35);
}
.novelo-card-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .3s ease;
}
.novelo-card-img--1{opacity:1;}
.novelo-card-img--2{opacity:0;}
.novelo-card-media:has(.novelo-card-img--2):hover .novelo-card-img--1{opacity:0;}
.novelo-card-media:has(.novelo-card-img--2):hover .novelo-card-img--2{opacity:1;}
.novelo-card-info{padding:1rem 0 0;text-align:center;}
.novelo-card-name{
  font-family:'Josefin Sans',sans-serif;font-weight:500;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.4;margin-bottom:.5rem;
  color:var(--red);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.novelo-card-price{
  font-family:'Josefin Sans',sans-serif;font-weight:700;font-size:.85rem;color:var(--red);
}

/* ---------- GALERIA EM SANFONA (quadros) ---------- */
.gallery-section{
  max-width:1480px;margin:0 auto;padding:0 1.5rem 5rem;
}
.gallery-head{margin-bottom:1.8rem;}
.gallery-title{
  font-family:var(--serif);font-weight:700;color:var(--red);
  font-size:clamp(1.7rem,3.6vw,2.4rem);
  text-align:center;
}
.gallery-wrap{width:100%;}

/* ---------- PAGE HEAD ---------- */
.page-head{
  max-width:1480px;margin:7rem auto 0;padding:0 1.5rem;text-align:center;
}
.breadcrumbs{
  font-size:.78rem;color:rgba(19,17,16,0.55);
  margin-bottom:1rem;letter-spacing:.02em;
}
.breadcrumbs a{color:var(--red);}
.page-title{
  font-family:var(--serif);font-weight:700;color:var(--red);
  font-size:clamp(2.6rem,7vw,4.6rem);
  line-height:1.05;
  margin-bottom:.8rem;
}
.page-sub{
  color:rgba(19,17,16,0.62);font-size:.95rem;max-width:640px;
  margin-left:auto;margin-right:auto;
}

/* ---------- CATEGORY FILTER ---------- */
.category-filters{
  max-width:1480px;margin:2rem auto 0;padding:0 1.5rem;
  display:flex;gap:.7rem;flex-wrap:wrap;
}
.category-pill{
  border:1.5px solid var(--black);
  padding:.5rem 1.1rem;
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.category-pill:hover{border-color:var(--red);color:var(--red);}
.category-pill.is-active{background:var(--black);color:var(--white);}
.category-pill.is-active:hover{border-color:var(--black);color:var(--white);}

/* ---------- CATALOG GRID ---------- */
.catalog{max-width:1480px;margin:0 auto;padding:2.5rem 1.5rem 6rem;}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:2rem 1.4rem;
}
.empty-state{
  padding:4rem 1rem;text-align:center;color:rgba(19,17,16,0.5);
  font-family:var(--serif);font-size:1.1rem;font-weight:500;
}
.product-card{
  background:var(--white);
  display:flex;flex-direction:column;
  perspective:900px;
}
.card-media{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--off);
  transform:rotateX(0deg) rotateY(0deg) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
  will-change:transform;
}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.product-card:hover .card-media img{transform:scale(1.03);}
.product-card:hover .card-media{box-shadow:0 20px 34px -14px rgba(19,17,16,0.35);}
.card-tag{
  position:absolute;top:.8rem;left:.8rem;
  background:var(--white);color:var(--black);
  font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.35rem .65rem;font-weight:600;
}
.card-body{padding:.9rem 0 0;display:flex;flex-direction:column;gap:.35rem;flex:1;text-align:center;}
.card-name{
  font-family:var(--sans);font-weight:700;color:var(--black);
  font-size:.85rem;letter-spacing:.01em;text-transform:uppercase;line-height:1.35;
}
.card-desc{display:none;}
.card-row{display:flex;align-items:baseline;justify-content:center;gap:.6rem;margin-top:.15rem;}
.card-price{font-family:var(--sans);font-weight:700;color:var(--black);font-size:.98rem;}
.card-note{font-family:var(--sans);font-weight:400;color:rgba(19,17,16,0.5);font-size:.8rem;}
.btn-add-cart, .btn-link{
  background:var(--off);color:var(--red);border:1.5px solid var(--red);
  font-family:var(--serif);font-weight:600;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.6rem 1.1rem;cursor:pointer;text-align:center;
  box-shadow:3px 3px 0 var(--red);
  transition:background .2s ease,color .2s ease,transform .15s ease,box-shadow .15s ease;
  white-space:nowrap;
}
.btn-add-cart:hover, .btn-link:hover{
  background:var(--red);color:var(--white);
  transform:translate(3px,3px);box-shadow:0 0 0 var(--red);
}
.btn-add-cart.is-added{background:var(--red);color:var(--white);transform:translate(3px,3px);box-shadow:0 0 0 var(--red);}

/* pagination */
.pagination{
  display:flex;gap:.6rem;justify-content:center;margin-top:3rem;
}
.pagination a, .pagination span{
  border:1px solid var(--line);padding:.5rem 1rem;font-size:.85rem;
}
.pagination a:hover{border-color:var(--red);color:var(--red);}
.pagination .current{background:var(--black);color:var(--white);border-color:var(--black);}

/* ---------- PRODUCT DETAIL ---------- */
.product-detail{
  max-width:1180px;margin:0 auto;padding:2.5rem 1.5rem 6rem;
  display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;
}
@media (max-width:860px){ .product-detail{grid-template-columns:1fr;} }

.detail-gallery-main{
  aspect-ratio:1/1;overflow:hidden;background:var(--off);border:1px solid var(--line);
}
.detail-gallery-main img{width:100%;height:100%;object-fit:cover;}
.detail-thumbs{display:flex;gap:.7rem;margin-top:.9rem;flex-wrap:wrap;}
.detail-thumbs img{
  width:72px;height:72px;object-fit:cover;border:1.5px solid var(--line);cursor:pointer;
  transition:border-color .2s ease;
}
.detail-thumbs img:hover{border-color:var(--red);}

.detail-info{display:flex;flex-direction:column;gap:1.1rem;}
.detail-category{
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);
}
.detail-name{font-family:'Josefin Sans',sans-serif;font-weight:700;color:var(--red);font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1.2;}
.detail-price{font-family:var(--serif);font-weight:600;color:var(--red);font-size:1.7rem;}
.detail-stock-note{
  display:inline-block;width:fit-content;
  border:1px solid var(--red);color:var(--red);
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.3rem .7rem;
}
.detail-dimensions{
  display:inline-flex;align-items:center;gap:.4rem;width:fit-content;
  color:rgba(19,17,16,0.6);font-size:.82rem;letter-spacing:.02em;
}
.detail-dimensions svg{width:15px;height:15px;flex-shrink:0;stroke:var(--red);}
.detail-desc{font-size:.95rem;line-height:1.8;color:rgba(19,17,16,0.75);font-weight:300;}
.btn-whatsapp-lg, .btn-add-cart-lg{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--red);color:var(--white);border:none;
  padding:1.05rem 1.5rem;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:background .25s ease, transform .15s ease;width:fit-content;
}
.btn-whatsapp-lg:hover{background:var(--red-dark);}
.btn-whatsapp-lg svg, .btn-add-cart-lg svg{width:20px;height:20px;}

.btn-add-cart-lg{
  background:var(--off);color:var(--red);border:2px solid var(--red);
  font-family:var(--serif);font-weight:600;
  box-shadow:5px 5px 0 var(--red);
  transition:background .2s ease,color .2s ease,transform .15s ease,box-shadow .15s ease;
}
.btn-add-cart-lg:hover{
  background:var(--red);color:var(--white);
  transform:translate(5px,5px);box-shadow:0 0 0 var(--red);
}
.btn-add-cart-lg.is-added{background:var(--red);color:var(--white);transform:translate(5px,5px);box-shadow:0 0 0 var(--red);}

.detail-purchase-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.qty-stepper-lg{
  border:1px solid var(--black);height:56px;
  display:flex;align-items:center;gap:1rem;padding:0 .3rem;flex-shrink:0;
}
.qty-stepper-lg button{
  background:none;border:none;width:34px;height:34px;
  font-size:1.2rem;cursor:pointer;color:var(--black);
  transition:color .2s ease;
}
.qty-stepper-lg button:hover{color:var(--red);}
.qty-stepper-lg span{font-size:1rem;min-width:20px;text-align:center;}

.related{max-width:1180px;margin:0 auto;padding:0 1.5rem 6rem;}
.related h2{
  font-family:var(--serif);font-weight:700;font-size:1.6rem;
  border-bottom:2px solid var(--black);padding-bottom:1rem;margin-bottom:2rem;
}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--red);color:var(--white);padding:4rem 1.5rem 2.4rem;text-align:center;}
.footer-inner{max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.9rem;}
.footer-logo{width:190px;filter:brightness(0) invert(1);opacity:.92;}
.footer-copy{margin-top:1.6rem;font-size:.72rem;color:rgba(255,255,255,0.4);}

@media (max-width:720px){
  .main-nav{display:none;}

  .header-inner{padding:.4rem 1.1rem;}
  .brand-logo{height:24px;}
  .cart-btn{width:32px;height:32px;}
  .cart-btn svg{width:18px;height:18px;}

  .hero-logo{width:min(320px,72vw);}
  .hero-sub{font-size:.72rem;}
  .hero-content--static.has-glow::before{width:min(380px,80vw);height:min(380px,80vw);}

  .page-title{font-size:clamp(2rem,9vw,2.8rem);}
  .page-head{margin-top:6rem;}
  .page-sub{font-size:.85rem;}

  .category-filters{gap:.5rem;}
  .category-pill{padding:.4rem .8rem;font-size:.7rem;}

  .catalog{padding:1.8rem 1rem 4rem;}
  .product-grid{
    grid-template-columns:repeat(2,1fr);
    gap:1.1rem .8rem;
  }
  .card-body{padding:.7rem 0 0;gap:.3rem;}
  .card-name{font-size:.75rem;}
  .card-desc{display:none;}
  .card-price{font-size:1rem;}
  .card-tag{font-size:.58rem;padding:.3rem .55rem;top:.6rem;left:.6rem;}

  .product-detail{gap:2rem;padding:1.8rem 1rem 4rem;}
  .detail-purchase-row{width:100%;}
  .btn-add-cart-lg{flex:1;justify-content:center;}

  .gallery-section{padding:0 1rem 3rem;}
  .glow-title, .gallery-title{font-size:1.5rem;}

  .cart-drawer{width:100vw;}
  .fab-whatsapp{bottom:1.1rem;right:1.1rem;width:50px;height:50px;}
}

/* ---------- WHATSAPP FLUTUANTE ---------- */
.fab-whatsapp{
  position:fixed;bottom:1.6rem;right:1.6rem;z-index:150;
  background:#25D366;color:var(--white);
  width:56px;height:56px;border-radius:50%;
  border:none;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:none;
  transition:transform .25s ease;
}
.fab-whatsapp:hover{transform:scale(1.08);}
.fab-whatsapp svg{width:26px;height:26px;}

/* ---------- CART DRAWER ---------- */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(19,17,16,0.5);
  z-index:200;opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.drawer-overlay.is-open{opacity:1;pointer-events:auto;}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(440px,92vw);
  background:var(--white);
  z-index:201;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  box-shadow:-20px 0 60px rgba(0,0,0,0.15);
}
.cart-drawer.is-open{transform:translateX(0);}
.drawer-panel{display:flex;flex-direction:column;height:100%;}
.drawer-panel[hidden]{display:none;}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:1.4rem 1.5rem;border-bottom:1px solid var(--line);
}
.drawer-head h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;flex:1;}
.drawer-close, .drawer-back{
  background:none;border:none;cursor:pointer;color:var(--black);
  line-height:1;flex-shrink:0;
}
.drawer-close{font-size:1.6rem;}
.drawer-back{font-size:1.3rem;}

.drawer-items{flex:1;overflow-y:auto;padding:0.5rem 1.5rem;}
.drawer-item{
  display:flex;align-items:flex-start;gap:.9rem;padding:1.1rem 0;
  border-bottom:1px solid var(--line);position:relative;
}
.drawer-item img{width:64px;height:64px;object-fit:cover;flex-shrink:0;}
.drawer-item-info{flex:1;display:flex;flex-direction:column;gap:.5rem;}
.drawer-item-name{font-family:var(--serif);font-weight:600;font-size:.95rem;}
.drawer-item-price{font-size:.78rem;color:rgba(19,17,16,0.55);}
.drawer-item-remove{
  background:none;border:none;cursor:pointer;
  font-size:1.2rem;color:rgba(19,17,16,0.35);line-height:1;
  padding:.2rem;flex-shrink:0;
  transition:color .2s ease;
}
.drawer-item-remove:hover{color:var(--red);}

.qty-stepper{
  display:flex;align-items:center;gap:.7rem;
  border:1px solid var(--black);width:fit-content;
}
.qty-stepper button{
  background:none;border:none;
  width:26px;height:26px;
  font-size:1rem;cursor:pointer;color:var(--black);
  transition:color .2s ease;
}
.qty-stepper button:hover{color:var(--red);}
.qty-stepper span{font-size:.85rem;min-width:14px;text-align:center;}

.drawer-footer{padding:1.4rem 1.5rem 1.8rem;border-top:1px solid var(--line);}
.drawer-empty-msg{
  text-align:center;color:rgba(19,17,16,0.45);
  font-size:.85rem;padding:2rem 0;
}
.drawer-total{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:1rem;font-family:var(--serif);
}
.drawer-total span{font-size:.85rem;color:rgba(19,17,16,0.6);text-transform:uppercase;letter-spacing:.05em;}
.drawer-total strong{font-size:1.4rem;font-weight:600;}
.btn-checkout{
  width:100%;background:var(--black);color:var(--white);border:none;
  padding:1rem;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:background .25s ease;
}
.btn-checkout:hover{background:var(--red);}

/* ---------- CHECKOUT FORM ---------- */
.checkout-form{
  flex:1;overflow-y:auto;
  padding:1.5rem;display:flex;flex-direction:column;gap:1.2rem;
}
.checkout-form label{
  display:flex;flex-direction:column;gap:.5rem;
  font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;color:rgba(19,17,16,0.6);
}
.checkout-form input, .checkout-form textarea{
  font-family:var(--sans);font-size:.95rem;color:var(--black);
  border:1px solid var(--line);padding:.8rem .9rem;
  background:var(--off);resize:vertical;
  transition:border-color .2s ease;
}
.checkout-form input:focus, .checkout-form textarea:focus{
  outline:none;border-color:var(--black);
}
.checkout-form .btn-whatsapp{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--red);color:var(--white);
  border:none;padding:1rem;
  font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:background .25s ease;margin-top:.5rem;
}
.checkout-form .btn-whatsapp:hover{background:var(--red-dark);}

/* ---------- TRAÇOS DE TINTA DECORATIVOS ---------- */
.paint-decor{
  position:absolute;pointer-events:none;user-select:none;
  z-index:0;width:110px;height:auto;
}
.paint-decor--sm{width:70px;}
.paint-decor--lg{width:150px;}
.paint-decor--xl{width:210px;}
.paint-decor--subtle{opacity:.5;}
.paint-decor--faint{opacity:.16;}
/* traços que passam por cima dos cards, encostando nas laterais deles */
.paint-decor--over{z-index:3;opacity:.85;}
/* garante que o conteúdo real sempre fique acima dos traços de fundo */
.reveal-row,.reveal-head,.museum-about-text,.museum-about-media,
.museum-collection-head,.novelo-grid,.museum-load-more,
.testimonials-head,.testimonials-grid,.artist-photo-col,.artist-text-col{
  position:relative;z-index:1;
}
/* as seções que recebem traços vazando pelas bordas não podem recortá-los */
.reveal-section,.testimonials-section,.museum-collection{overflow:visible;}

/* ---------- SEÇÃO ARTISTA (Paulo Gaspar) ---------- */
.artist-section{
  display:grid;grid-template-columns:1fr 1.4fr;
  grid-template-areas:"divider divider" "photo text";
  background:var(--red);color:var(--white);
  margin-top:5.5rem;align-items:stretch;
  position:relative;overflow:hidden;
}
.artist-section .artist-photo-col{grid-area:photo;}
.artist-section .artist-text-col{grid-area:text;}

/* divisória ornamental (linha — pontos — losango — pontos — linha), sempre
   visível — ocupa a linha inteira do grid, acima das duas colunas */
.ornate-divider{
  grid-area:divider;
  display:flex;align-items:center;gap:.5rem;
  padding:0 1.2rem;position:relative;z-index:2;
}
.ornate-line{flex:1;height:1px;background:var(--red);opacity:.85;}
.ornate-dot{width:4px;height:4px;border-radius:50%;background:var(--red);flex-shrink:0;}
.ornate-diamond{
  width:10px;height:10px;border:1px solid var(--red);
  transform:rotate(45deg);flex-shrink:0;
}
/* variante clara: uma faixa branca própria (não o fundo vermelho da
   seção) hospeda a divisória em vermelho, sem alterar o vermelho atrás
   dos textos abaixo */
.ornate-divider--light{background:var(--white);padding:.9rem 1.2rem;}

.artist-photo-col{position:relative;min-height:420px;overflow:hidden;}
.artist-photo-col img{
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;
  filter:grayscale(.15);
}
.artist-photo-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.2rem 1.4rem;
  background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);
  font-size:.7rem;letter-spacing:.05em;color:rgba(255,255,255,.75);
}
.artist-text-col{
  display:flex;flex-direction:column;justify-content:center;gap:1.3rem;
  padding:3.5rem 5vw;max-width:680px;
}
.artist-eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--white);
}
.artist-text-col h2{
  font-family:var(--script);font-weight:400;color:var(--white);
  font-size:clamp(2.6rem,4.2vw,3.6rem);line-height:1.05;
}
.artist-text-col p{
  font-size:.94rem;line-height:1.85;color:rgba(255,255,255,.72);font-weight:300;
  text-align:justify;
}
.artist-badges{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.3rem;}
.artist-badge{
  display:flex;align-items:center;gap:.5rem;
  border:1px solid rgba(255,255,255,.2);padding:.55rem .9rem;
  font-size:.68rem;letter-spacing:.04em;color:rgba(255,255,255,.85);
}
.artist-badge svg{width:15px;height:15px;flex-shrink:0;stroke:var(--white);}

/* ---------- SEÇÃO DESTAQUE (variante clara, imagem à direita) ---------- */
.artist-highlight{
  display:grid;grid-template-columns:1.4fr 1fr;
  grid-template-areas:"divider divider" "text photo";
  row-gap:1.4rem;
  background:var(--white);color:var(--black);
  margin-top:5.5rem;align-items:stretch;
  position:relative;overflow:hidden;
}
.artist-highlight-text{grid-area:text;}
.artist-highlight-photo{grid-area:photo;}
.artist-highlight-text{
  display:flex;flex-direction:column;justify-content:center;gap:1.3rem;
  padding:3.5rem 5vw;max-width:680px;
}
.artist-highlight-text .artist-eyebrow{color:var(--red);}
.artist-highlight-text h2{
  font-family:var(--script);font-weight:400;color:var(--red);
  font-size:clamp(2.6rem,4.2vw,3.6rem);line-height:1.05;
}
.artist-highlight-text p{
  font-size:.94rem;line-height:1.85;color:rgba(19,17,16,.72);font-weight:300;
  text-align:justify;
}
.artist-highlight-text .artist-badge{
  border:1px solid var(--line);color:rgba(19,17,16,.75);
}
.artist-highlight-text .artist-badge svg{stroke:var(--red);}
.artist-highlight-photo{position:relative;min-height:420px;overflow:hidden;}
.artist-highlight-photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  position:absolute;inset:0;
  filter:grayscale(.15);
}
.artist-gallery{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);
  gap:2px;overflow-x:auto;padding:0 5vw 2.5rem;
  scrollbar-width:none;
}
.artist-gallery::-webkit-scrollbar{display:none;}
.artist-gallery img{
  width:100%;height:220px;object-fit:cover;
  filter:grayscale(.1);
}

@media (max-width:900px){
  /* empilhado: divisória em cima, depois a foto, depois o texto — nas duas
     seções, independente de qual lado a foto fica no desktop */
  .artist-section{grid-template-columns:1fr;grid-template-areas:"divider" "photo" "text";}
  .artist-highlight{grid-template-columns:1fr;grid-template-areas:"divider" "photo" "text";}
  .artist-photo-col{min-height:280px;}
  .artist-text-col{padding:2.4rem 1.4rem;max-width:none;}
  .artist-highlight-photo{min-height:280px;}
  .artist-highlight-text{padding:2.4rem 1.4rem;max-width:none;}
  .ornate-divider{margin-bottom:.5rem;}
}

/* ---------- DEPOIMENTOS ---------- */
.testimonials-section{
  padding:4.5rem 1.5rem;max-width:1200px;margin:0 auto;
  position:relative;overflow:hidden;
}
.testimonials-head{text-align:center;margin-bottom:2.6rem;}
.testimonials-head h2{
  font-family:var(--script);font-weight:400;color:var(--red);
  font-size:clamp(2.4rem,4vw,3.2rem);
}
.testimonials-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
}
.testimonial-card{
  background:var(--off);border:1px solid var(--line);
  padding:2rem 1.7rem;display:flex;flex-direction:column;gap:1rem;
}
.testimonial-quote{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  line-height:1.6;color:var(--black);
}
.testimonial-quote::before{content:"\201C";}
.testimonial-quote::after{content:"\201D";}
.testimonial-source{
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--red);font-weight:600;
}
@media (max-width:900px){
  .testimonials-grid{grid-template-columns:1fr;}
}
.checkout-form .btn-whatsapp svg{width:18px;height:18px;}

/* ======================================================================
   RESPONSIVIDADE MOBILE
   Bloco final: ajusta o que os breakpoints antigos não cobriam depois das
   seções novas (artista, depoimentos, traços de tinta).
   ====================================================================== */
@media (max-width:768px){
  /* os traços decorativos vazam para fora da tela em telas estreitas e
     criavam scroll horizontal — no celular a página respira melhor sem eles */
  .paint-decor{display:none !important;}

  /* ---- Hero ----
     100vh ocupa a tela inteira e obriga a rolar tudo antes de ver o conteúdo;
     no celular 68vh já dá presença sem tomar a página */
  .hero,.hero-static{height:68vh;min-height:420px;}
  .hero-headline{font-size:clamp(1.9rem,8vw,2.6rem);}
  .hero-eyebrow{font-size:.66rem;letter-spacing:.2em;}
  .hero-cta{padding:.85rem 1.6rem;font-size:.75rem;}

  /* ---- Onda do hero ----
     O SVG tem viewBox de 1200 de largura e preserveAspectRatio="none": numa
     tela de ~375px ele é espremido a ~31% na horizontal, e manter 250px de
     altura deixava a curva íngreme (e o texto curvo esticado). Baixando a
     altura, a escala dos dois eixos se aproxima: onda suave e texto sem
     distorção. A fonte sobe para compensar a redução. */
  .hero-wave-divider{bottom:-34px;}
  .hero-wave-divider svg{height:150px;}
  .hero-wave-divider text{font-size:34px;letter-spacing:8px;}

  /* ---- Peças que contam histórias ---- */
  .reveal-section{padding:2.5rem 1.1rem 1.5rem;}
  .reveal-head{margin-bottom:1.6rem;}
  .reveal-head h2{font-size:2rem;line-height:1.1;}
  .reveal-banner{height:70px;margin-bottom:1.6rem;}
  .reveal-head p{font-size:.85rem;}
  .reveal-row{gap:.7rem;}
  .reveal-item{
    grid-template-columns:62px 1fr;
    column-gap:.75rem;padding:.65rem;
  }
  .reveal-name{font-size:.84rem;margin-bottom:0;}
  .reveal-desc{font-size:.7rem;line-height:1.38;margin-top:.15rem;}
  /* entram de menos longe: 60px empurravam o card para fora da viewport */
  .reveal-from-left{transform:translateX(-24px);}
  .reveal-from-right{transform:translateX(24px);}
  /* 2.2s é lento demais para o scroll do celular: o card ficava em branco
     por segundos enquanto a pessoa já tinha passado por ele */
  .reveal-item{transition-duration:.7s;}
  .reveal-row .reveal-item:nth-child(2){transition-delay:.08s;}
  .reveal-row .reveal-item:nth-child(3){transition-delay:.16s;}

  /* ---- Categorias + foto do artista ---- */
  .museum-columns-row{padding:2.5rem 0 0;gap:2px;}
  /* cards quadrados: o CSS Grid estava inflando a altura da linha pelo
     conteúdo de texto (min-height:auto/aspect-ratio não bastavam para
     zerar isso), deixando um vão vertical mesmo com gap pequeno. Flexbox
     com wrap não sofre desse problema: cada card só ocupa o espaço do
     próprio aspect-ratio, sem "trilha" de linha para inflar. */
  /* .museum-columns-row vira coluna no mobile (regra dos 900px); nessa
     direção o flex-basis:440px do desktop passa a valer para ALTURA, não
     largura, deixando o grid de categorias com pouquíssima largura.
     Força largura total e reseta o flex-basis herdado. */
  .museum-columns-row .museum-columns{flex:none;width:100%;}
  .museum-columns{display:flex;flex-wrap:wrap;gap:2px;}
  /* quadrado via padding-bottom:100% (relativo à própria largura) em vez de
     aspect-ratio: tanto o CSS Grid quanto o flexbox estavam reservando uma
     altura de linha maior que o card (herdada do tamanho "natural" do
     conteúdo de texto), deixando um vão vertical entre as fileiras mesmo
     com gap pequeno. Essa técnica não depende do algoritmo de
     grid/flex para a altura — é só a caixa do próprio elemento. */
  .museum-col{
    flex:0 0 calc(50% - 1px);
    /* padding-bottom em % é relativo à largura do CONTAINER PAI, não à do
       próprio elemento — como o card ocupa 50% do pai, o padding também
       precisa ser ~50% do pai para a altura bater com a largura (quadrado) */
    display:block;height:0;padding:0;padding-bottom:calc(50% - 1px);
  }
  .museum-col-content{position:absolute;left:0;right:0;bottom:0;padding:1rem;}
  .museum-col h3{font-size:1.35rem;}
  .museum-col-explore{font-size:.62rem;letter-spacing:.08em;}

  /* ---- Bem-vindo + baralho de cartas ---- */
  .museum-about{margin-top:1.5rem;}
  .museum-about-text{padding:2.5rem 1.4rem 1rem;}
  .deck-container{
    /* o leque é largo demais para 375px: encolhe junto com a tela em vez
       de estourar a lateral */
    min-height:330px;padding:1.5rem .5rem 2.5rem;
    transform:scale(.62);transform-origin:center top;
    margin-bottom:-7rem;
  }

  /* ---- Seção do artista ---- */
  .artist-section{margin-top:3rem;}
  .artist-text-col{padding:2.2rem 1.4rem;gap:1rem;}
  .artist-text-col h2{font-size:2.4rem;}
  .artist-text-col p{font-size:.9rem;line-height:1.75;}
  .artist-badges{flex-direction:column;gap:.5rem;}
  .artist-badge{
    font-size:.64rem;padding:.6rem .8rem;
    width:100%;align-items:flex-start;line-height:1.45;
  }
  .artist-photo-caption{font-size:.64rem;padding:1rem;}
  .artist-gallery{padding:0 0 2rem;gap:2px;grid-auto-columns:minmax(140px,1fr);}
  .artist-gallery img{height:170px;}

  /* ---- Depoimentos ---- */
  .testimonials-section{padding:3rem 1.1rem;}
  .testimonials-head{margin-bottom:1.8rem;}
  .testimonials-head h2{font-size:2.1rem;line-height:1.15;}
  .testimonial-card{padding:1.5rem 1.3rem;gap:.8rem;}
  .testimonial-quote{font-size:.98rem;}

  /* ---- Coleções (Catálogo / Pinturas) ---- */
  .museum-collection{padding:3rem 1.1rem 1.5rem;}
  .museum-collection-head{margin-bottom:1.6rem;}
  .novelo-grid{gap:1rem .8rem;}

  /* botão flutuante menor e mais discreto, para não cobrir os títulos */
  .fab-whatsapp{width:48px;height:48px;bottom:1rem;right:1rem;}
  .fab-whatsapp svg{width:22px;height:22px;}
}

@media (max-width:420px){
  .reveal-head h2{font-size:1.75rem;}
  /* categorias seguem 2 a 2 mesmo em telas estreitas; só o texto encolhe */
  .museum-col h3{font-size:1.05rem;}
  .museum-col-explore{font-size:.55rem;}
  .museum-col-content{padding:.8rem;}
  .deck-container{transform:scale(.52);margin-bottom:-9rem;}
  .artist-text-col h2{font-size:2.1rem;}
  /* a curva fica ainda mais espremida em telas muito estreitas */
  .hero-wave-divider svg{height:125px;}
  .hero-wave-divider text{font-size:40px;letter-spacing:7px;}
  .hero-wave-divider{bottom:-28px;}
}

@media (max-width:340px){
  /* só nos aparelhos realmente estreitos a imagem lateral esmaga o texto */
  .reveal-item{
    grid-template-columns:1fr;
    grid-template-areas:"img" "name" "desc";
    row-gap:.5rem;
  }
  .reveal-square{aspect-ratio:16/10;}
  .reveal-item img{max-height:110px;}
}