/* ==========================================================================
   7 FIOS TÊXTIL, loja virtual
   Paleta retirada da logo:  índigo #1D0E47  |  dourado #FFD801
   ========================================================================== */

:root{
  --navy:       #1D0E47;
  --navy-800:   #261459;
  --navy-700:   #33206E;
  --navy-900:   #140935;
  --gold:       #FFD801;
  --gold-600:   #E8C300;

  --branco:     #FFFFFF;
  --creme:      #FAF9F6;
  --cinza-50:   #F6F5F2;
  --cinza-100:  #EFEEEA;
  --cinza-200:  #E2E0DA;
  --cinza-400:  #A9A6B4;
  --cinza-500:  #6E6B7B;
  --tinta:      #1A1730;

  --wpp:        #25D366;
  --wpp-escuro: #1CB854;

  --raio:       12px;
  --raio-sm:    8px;
  --sombra:     0 1px 2px rgba(20,9,53,.05), 0 6px 18px rgba(20,9,53,.06);
  --sombra-alta:0 14px 44px rgba(20,9,53,.18);
  --largura:    1240px;
  --tr:         .22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:150px; }

body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--tinta);
  background:var(--branco);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

h1,h2,h3,.brand__name{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:700; line-height:1.15; letter-spacing:-.01em; margin:0;
}

.container{ width:min(100% - 2rem, var(--largura)); margin-inline:auto; }
.ico{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }

.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--gold); color:var(--navy); padding:.75rem 1.25rem; font-weight:600; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }

/* ============================== BOTÕES ================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.4rem; border:0; border-radius:999px;
  font-weight:600; font-size:.92rem; cursor:pointer; white-space:nowrap;
  transition:background var(--tr), color var(--tr), transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.btn:hover{ transform:translateY(-1px); }
.btn--gold{ background:var(--gold); color:var(--navy); box-shadow:0 6px 18px rgba(255,216,1,.32); }
.btn--gold:hover{ background:var(--gold-600); }
.btn--navy{ background:var(--navy); color:var(--branco); }
.btn--navy:hover{ background:var(--navy-700); }
.btn--wpp{ background:var(--wpp); color:#04331A; }
.btn--wpp:hover{ background:var(--wpp-escuro); }
.btn--ghost{ background:transparent; color:var(--branco); box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 2px var(--gold); background:rgba(255,255,255,.08); }
.btn--linha{ background:var(--branco); color:var(--navy); border:1px solid var(--cinza-200); }
.btn--linha:hover{ border-color:var(--navy); background:var(--cinza-50); }
.btn--sm{ padding:.55rem 1rem; font-size:.84rem; }
.btn--lg{ padding:.95rem 2rem; font-size:1rem; }
.btn--block{ width:100%; }

/* ============================== TOPBAR ================================= */
.topbar{ background:var(--navy-900); color:rgba(255,255,255,.78); font-size:.78rem; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:36px; }
.topbar__aviso{ margin:0; }
.topbar__info{ display:flex; gap:1.4rem; }
.topbar__info a:hover{ color:var(--gold); }

/* ============================= CABEÇALHO =============================== */
.header{ background:var(--navy); position:sticky; top:0; z-index:60; }
.header__inner{ display:flex; align-items:center; gap:1.6rem; min-height:78px; }

.brand{ display:flex; align-items:center; gap:.65rem; flex:none; }
.brand img{ width:auto; height:52px; object-fit:contain; }
.brand__name{ color:var(--branco); font-size:1.08rem; white-space:nowrap; }
.brand__name em{ color:var(--gold); font-style:normal; }

.busca{
  flex:1; display:flex; align-items:center; gap:.6rem;
  background:var(--branco); border-radius:999px; padding:.62rem 1.1rem;
  color:var(--cinza-500); max-width:560px;
  border:2px solid transparent; transition:border-color var(--tr);
}
.busca:focus-within{ border-color:var(--gold); }
.busca input{ border:0; outline:0; background:none; font-size:.92rem; color:var(--tinta); width:100%; }
.busca__limpar{ border:0; background:none; color:var(--cinza-400); font-size:1.3rem; line-height:1; cursor:pointer; padding:0 .2rem; }
.busca__limpar:hover{ color:var(--navy); }

.header__acoes{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.acao{
  display:flex; align-items:center; gap:.55rem;
  background:none; border:0; cursor:pointer;
  color:var(--branco); padding:.5rem .8rem; border-radius:var(--raio-sm);
  transition:background var(--tr);
}
.acao:hover{ background:rgba(255,255,255,.1); }
.acao svg{ width:22px; height:22px; fill:currentColor; }
.acao__txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.acao__txt small{ font-size:.68rem; color:rgba(255,255,255,.6); }
.acao__txt strong{ font-size:.86rem; font-weight:600; }
.acao--wpp{ color:var(--wpp); }
.acao--wpp .acao__txt small{ color:rgba(255,255,255,.6); }
.acao--wpp .acao__txt strong{ color:var(--branco); }
.acao__ico{ position:relative; display:grid; place-items:center; }
.acao--carrinho svg{ fill:var(--gold); }

.badge{
  position:absolute; top:-6px; right:-9px;
  min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center;
  background:var(--gold); color:var(--navy);
  border-radius:999px; font-size:.68rem; font-weight:700;
}

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.5rem; cursor:pointer; }
.nav-toggle span{ width:22px; height:2px; background:var(--branco); border-radius:2px; transition:transform var(--tr), opacity var(--tr); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================== NAVBAR ================================= */
.navbar{ background:var(--navy-800); position:sticky; top:78px; z-index:55; box-shadow:0 2px 12px rgba(20,9,53,.2); }
.navbar__inner{ display:flex; gap:1.9rem; overflow-x:auto; scrollbar-width:none; }
.navbar__inner::-webkit-scrollbar{ display:none; }
.navbar a{
  color:rgba(255,255,255,.85); font-size:.87rem; font-weight:500;
  padding:.85rem 0; white-space:nowrap;
  border-bottom:2px solid transparent; transition:color var(--tr), border-color var(--tr);
}
.navbar a:hover{ color:var(--gold); border-color:var(--gold); }

/* ============================== BANNERS =============================== */
.banners{ background:var(--creme); padding:1.6rem 0 2.2rem; }
.banners__grid{ display:grid; gap:1rem; grid-template-columns:1.85fr 1fr; }
.banners__lado{ display:grid; gap:1rem; grid-template-rows:1fr 1fr; }

.banner{
  position:relative; overflow:hidden; border-radius:var(--raio);
  background-color:var(--navy); background-image:var(--foto);
  background-size:cover; background-position:center;
}
/* o véu escurece a foto para o texto branco continuar legível */
.banner__veu{
  position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(20,9,53,.78) 0%, rgba(20,9,53,.58) 42%, rgba(29,14,71,.26) 100%);
}
.banner--principal{
  color:var(--branco); display:flex; align-items:center;
  min-height:360px; padding:2.6rem;
  /* cobre o bloco todo: sem faixa azul sobrando nas laterais */
  background-size:cover; background-position:center 58%; background-repeat:no-repeat;
}
/* um leve escurecido geral para o texto branco não brigar com a foto */
.banner--principal::after{
  content:""; position:absolute; inset:0; background:rgba(20,9,53,.3);
}
.banner__txt{ position:relative; z-index:1; max-width:33rem; }
.eyebrow{ margin:0 0 .8rem; font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); }
.banner--principal h1{ font-size:clamp(1.9rem,3.4vw,2.9rem); text-wrap:balance; }
.banner--principal h1 span{ color:var(--gold); }
.banner__sub{ margin:1rem 0 0; color:rgba(255,255,255,.84); font-size:.98rem; max-width:32rem; }
.banner__sub strong{ color:var(--gold); }
.banner__acoes{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.7rem; }

.banner--mini{
  border:0; cursor:pointer; text-align:left; color:var(--branco);
  padding:1.5rem 1.6rem; min-height:150px;
  display:flex; align-items:flex-end;
  transition:transform var(--tr), box-shadow var(--tr);
}
.banner--mini .banner__veu{
  background:linear-gradient(0deg, rgba(20,9,53,.92) 12%, rgba(20,9,53,.45) 65%, rgba(20,9,53,.25) 100%);
}
.banner--mini:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); }
.banner--mini:hover .banner__link{ color:var(--branco); }
.banner__conteudo{ position:relative; display:flex; flex-direction:column; gap:.15rem; }
.banner__mini-tag{ font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.banner__conteudo strong{ font-family:"Playfair Display",Georgia,serif; font-size:1.35rem; font-weight:700; }
.banner__desc{ font-size:.84rem; color:rgba(255,255,255,.75); }
.banner__link{ margin-top:.55rem; font-size:.83rem; font-weight:600; color:var(--gold); transition:color var(--tr); }

/* ============================== SEÇÕES ================================= */
.section{ padding:2.8rem 0; }
.section--compacta{ padding:2.2rem 0 .6rem; }
.section--curta{ padding:1.9rem 0; }
.section--clara{ background:var(--creme); }
/* cabeçalho de seção: título e subtítulo centralizados */
.section__head{ text-align:center; margin-bottom:1.8rem; }
.section__head .eyebrow{ margin-bottom:.4rem; }
.section__head .section__sub{ margin-inline:auto; max-width:52ch; }
.section__titulo{ font-size:1.5rem; color:var(--navy); }
.section__sub{ margin:.25rem 0 0; color:var(--cinza-500); font-size:.9rem; }

.vitrine__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.link-ver{ font-size:.86rem; font-weight:600; color:var(--navy); white-space:nowrap; }
.link-ver:hover{ color:var(--gold-600); }

/* ============================= CATEGORIAS =============================
   Painéis encostados: o ativo abre e traz o selo, o nome e a frase; os
   demais viram faixas só com o selo redondo. Passar o mouse troca o ativo;
   clicar no aberto leva para a loja filtrada.
   ===================================================================== */
.selector{
  display:flex; gap:.35rem; margin-top:1.4rem;
  height:clamp(250px, 32vw, 380px);
  overflow:hidden;
  /* ocupa a largura toda da tela, sem sobra branca nas laterais */
  width:100%;
}
.sel{
  position:relative; flex:1 1 0; min-width:56px;
  border:0; padding:0; cursor:pointer; overflow:hidden;
  background:var(--navy);
  transition:flex-grow .75s cubic-bezier(.16,1,.3,1);
}
.sel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sel__veu{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,9,53,.9) 2%, rgba(20,9,53,.36) 48%, rgba(20,9,53,.1) 100%);
}
.sel__selo{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(20,9,53,.72); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(3px);
  transition:left .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.sel__selo svg{ width:20px; height:20px; fill:var(--gold); }
.sel__txt{
  position:absolute; left:5.2rem; right:1.4rem; bottom:1.15rem;
  display:flex; flex-direction:column; gap:.1rem; text-align:left;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease .12s, transform .45s ease .12s;
  pointer-events:none;
}
.sel__txt strong{
  font-family:"Playfair Display",Georgia,serif; font-size:1.35rem; color:var(--branco);
  line-height:1.15; white-space:nowrap;
}
.sel__txt small{ font-size:.85rem; color:rgba(255,255,255,.8); white-space:nowrap; }

.sel.is-ativo .sel__selo{ left:1.4rem; transform:none; }
.sel.is-ativo .sel__txt{ opacity:1; transform:none; }
.sel:focus-visible{ outline:3px solid var(--gold); outline-offset:-3px; }

@media (max-width:760px){
  .selector{
    height:auto; flex-direction:column; gap:.3rem;
    width:min(100% - 2rem, var(--largura)); margin-inline:auto;
    border-radius:var(--raio);
  }
  .sel{ flex:none; height:88px; transition:height .55s cubic-bezier(.16,1,.3,1); }
  .sel.is-ativo{ height:210px; }
  .sel__selo{ left:1.2rem; transform:none; }
  .sel__txt{ left:4.6rem; }
}

@media (prefers-reduced-motion:reduce){
  .sel, .sel__selo, .sel__txt{ transition:none; }
}

/* ============================= VITRINES =============================== */
.vitrine{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr);
  gap:1rem; overflow-x:auto; padding-bottom:.6rem;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
}
.vitrine > *{ scroll-snap-align:start; }

/* =========================== CARD DE PRODUTO ========================== */
.card{
  display:flex; flex-direction:column;
  background:var(--branco); border:1px solid var(--cinza-200); border-radius:var(--raio);
  overflow:hidden; transition:border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.card:hover{ border-color:var(--navy); box-shadow:var(--sombra-alta); transform:translateY(-3px); }

.card__media{ position:relative; aspect-ratio:1/1; background:var(--cinza-100); overflow:hidden; cursor:pointer; }
.card__media img{ transition:transform .4s cubic-bezier(.4,0,.2,1); }
.card:hover .card__media img{ transform:scale(1.05); }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__media--swatch::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.10) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.22), transparent 60%);
}
/* selo do produto em destaque: um só na loja inteira, por isso pode ser
   chamativo sem virar poluição */
.card__destaque{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  max-width:calc(100% - 1.2rem);
  background:var(--gold); color:var(--navy);
  font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.2; padding:.32rem .6rem; border-radius:999px;
  box-shadow:0 2px 10px rgba(20,9,53,.28);
}

.card__embreve{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  background:rgba(20,9,53,.82); color:var(--branco);
  font-size:.66rem; font-weight:600; padding:.22rem .55rem; border-radius:999px;
}
.card__selos{ position:absolute; top:.6rem; left:.6rem; z-index:2; display:flex; flex-wrap:wrap; gap:.3rem; }
.selo{ background:var(--gold); color:var(--navy); font-size:.66rem; font-weight:700; padding:.2rem .5rem; border-radius:999px; }
.selo--novo{ background:var(--branco); color:var(--navy); }
.card__olho{
  position:absolute; inset:auto 0 0; z-index:2;
  background:rgba(29,14,71,.88); color:var(--branco);
  border:0; width:100%; padding:.6rem; font-size:.8rem; font-weight:600; cursor:pointer;
  transform:translateY(100%); transition:transform var(--tr);
}
.card:hover .card__olho, .card__olho:focus{ transform:none; }

.card__corpo{ padding:.85rem .95rem 0; flex:1; display:flex; flex-direction:column; }
.card__cat{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cinza-400); }
.card__nome{ margin:.25rem 0 0; font-family:"Inter",sans-serif; font-size:.95rem; font-weight:700; color:var(--navy); }
.card__nome button{ background:none; border:0; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.card__resumo{ margin:.2rem 0 .5rem; font-size:.8rem; color:var(--cinza-500); }
.card__cores{ display:flex; align-items:center; flex-wrap:wrap; gap:.25rem; margin-top:auto; padding-bottom:.6rem; }
.bolinha__mais{ font-size:.7rem; font-weight:600; color:var(--cinza-500); margin-left:.15rem; }
.card__fotos{ margin:auto 0 .6rem; font-size:.75rem; color:var(--cinza-400); }
.bolinha{ width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.12); }
.card__preco{ padding:0 .95rem; }
.card__preco strong{ display:block; font-size:1.05rem; color:var(--navy); }
.card__preco small{ font-size:.75rem; color:var(--cinza-500); }
.card__acoes{ display:flex; gap:.4rem; padding:.75rem .95rem .95rem; }
.card__wpp{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--wpp); color:#04331A; border:0; border-radius:999px;
  padding:.6rem .8rem; font-size:.83rem; font-weight:600; cursor:pointer; transition:background var(--tr);
}
.card__wpp:hover{ background:var(--wpp-escuro); }
.card__add{
  width:40px; flex:none; display:grid; place-items:center;
  background:var(--navy); color:var(--branco); border:0; border-radius:999px; cursor:pointer;
  transition:background var(--tr);
}
.card__add svg{ width:17px; height:17px; fill:currentColor; }
.card__add:hover{ background:var(--gold); color:var(--navy); }

/* ================================ LOJA ================================ */
.loja{ padding:2.4rem 0 3rem; }
.breadcrumb{ font-size:.8rem; color:var(--cinza-500); margin-bottom:1.2rem; }
.breadcrumb a:hover{ color:var(--navy); }
.breadcrumb strong{ color:var(--navy); font-weight:600; }
.breadcrumb span{ margin:0 .35rem; }

.loja__grid{ display:grid; grid-template-columns:248px 1fr; gap:1.8rem; align-items:start; }

/* ------------------------------ FILTROS ------------------------------- */
.filtros{
  background:var(--branco); border:1px solid var(--cinza-200); border-radius:var(--raio);
  padding:1.2rem; position:sticky; top:132px;
}
.filtros__fundo{ display:none; }
.filtros__topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.filtros__topo h2{ font-family:"Inter",sans-serif; font-size:.95rem; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.06em; }
.filtros__fechar{ display:none; background:none; border:0; font-size:1.6rem; line-height:1; color:var(--navy); cursor:pointer; }

.filtro{ padding:1rem 0; border-bottom:1px solid var(--cinza-100); }
.filtro h3{ font-family:"Inter",sans-serif; font-size:.82rem; font-weight:700; color:var(--navy); margin-bottom:.6rem; }
.filtro__lista{ display:flex; flex-direction:column; gap:.4rem; }
.filtro__grupo{
  margin:.7rem 0 .3rem; font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cinza-400);
}
.filtro__grupo:first-child{ margin-top:0; }

.check{ display:flex; align-items:center; gap:.55rem; font-size:.85rem; color:var(--cinza-500); cursor:pointer; }
.check input{ width:16px; height:16px; accent-color:var(--navy); flex:none; cursor:pointer; }
.check:hover{ color:var(--navy); }
.check span{ flex:1; }
.check em{ font-style:normal; color:var(--cinza-400); font-size:.78rem; }

.cores{ display:flex; flex-wrap:wrap; gap:.45rem; }
.cor-btn{
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  border:2px solid var(--cinza-200); padding:0;
  transition:transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.cor-btn:hover{ transform:scale(1.12); }
.cor-btn.is-active{ border-color:var(--navy); box-shadow:0 0 0 2px var(--gold); }

/* ---------------------------- BARRA DA LOJA --------------------------- */
.loja__barra{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--cinza-100); flex-wrap:wrap;
}
.loja__contagem{ margin:0; font-size:.86rem; color:var(--cinza-500); }
.loja__contagem strong{ color:var(--navy); }
.loja__ferramentas{ display:flex; align-items:center; gap:.6rem; }
#abrirFiltros{ display:none; }

.ordenar{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--cinza-500); }
.ordenar select{
  font:inherit; font-size:.85rem; color:var(--navy);
  border:1px solid var(--cinza-200); border-radius:999px;
  padding:.5rem 1rem; background:var(--branco); cursor:pointer;
}
.ordenar select:hover{ border-color:var(--navy); }

.tags-ativas{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.tag-ativa{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--cinza-50); border:1px solid var(--cinza-200); border-radius:999px;
  padding:.32rem .75rem; font-size:.78rem; color:var(--navy); cursor:pointer;
}
.tag-ativa:hover{ border-color:var(--navy); }
.tag-ativa b{ font-weight:600; }
.tag-ativa i{ font-style:normal; color:var(--cinza-400); }

.produtos{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); }
.loja__mais{ display:flex; justify-content:center; margin-top:2rem; }

/* atalhos das três linhas: só no celular, logo abaixo da migalha */
.atalhos-dep{ display:none; }

.vazio{
  grid-column:1/-1; text-align:center; padding:3.5rem 1rem;
  border:1px dashed var(--cinza-200); border-radius:var(--raio); color:var(--cinza-500);
}
.vazio strong{ display:block; color:var(--navy); font-size:1.05rem; margin-bottom:.3rem; }
.vazio .btn{ margin-top:1rem; }

/* =============================== VÍDEO ================================ */
.video{ max-width:780px; margin-inline:auto; border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra-alta); }
.video video{ width:100%; display:block; background:#000; }

/* ============================ BENEFÍCIOS ============================== */
.beneficios{ background:var(--navy); color:var(--branco); padding:2rem 0; overflow:hidden; }
.beneficios__grid{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.ben{ display:flex; align-items:center; gap:.85rem; }
/* as cópias só existem para a esteira do celular; no computador ficam fora */
.beneficios .ben--copia{ display:none; }
.ben svg{ width:26px; height:26px; fill:var(--gold); flex:none; }
.ben div{ display:flex; flex-direction:column; line-height:1.3; }
.ben strong{ font-size:.9rem; }
.ben span{ font-size:.79rem; color:rgba(255,255,255,.68); }

/* ================================ FAQ ================================= */
.faq{ background:var(--creme); }
.faq__lista{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:.55rem; }
.faq__item{
  background:var(--branco); border:1px solid var(--cinza-200);
  border-radius:var(--raio); overflow:hidden;
  transition:border-color var(--tr);
}
.faq__item[open]{ border-color:var(--navy); }
.faq__item summary{
  cursor:pointer; list-style:none; padding:1rem 1.2rem;
  font-size:.95rem; font-weight:600; color:var(--navy);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; font-size:1.3rem; font-weight:400; color:var(--gold-600);
  line-height:1; flex:none; transition:transform var(--tr);
}
.faq__item[open] summary::after{ content:"−"; }
.faq__item summary:hover{ background:var(--cinza-50); }
.faq__item p{
  margin:0; padding:0 1.2rem 1.1rem; font-size:.9rem; line-height:1.65;
  color:var(--cinza-500);
}

@media (max-width:760px){
  /* perguntas em duas colunas, para a lista não virar uma tira comprida */
  .faq__lista{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.5rem; align-items:start;
  }
  .faq__item summary{ padding:.7rem .8rem; font-size:.78rem; gap:.5rem; }
  .faq__item summary::after{ font-size:1.1rem; }
  .faq__item p{ padding:0 .8rem .85rem; font-size:.78rem; line-height:1.55; }
  /* a pergunta aberta ocupa a linha inteira, para o texto respirar */
  .faq__item[open]{ grid-column:1 / -1; }
}

/* ==================== ATALHOS PARA SOBRE E CONTATO ==================== */
.atalhos{ padding:2.4rem 0; }
.atalhos__grid{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.atalho{
  display:flex; align-items:center; gap:1.1rem;
  padding:1.5rem 1.6rem; border-radius:var(--raio);
  border:1px solid var(--cinza-200); background:var(--branco);
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.atalho:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:var(--navy); }
.atalho__ico{
  width:52px; height:52px; flex:none; border-radius:14px;
  display:grid; place-items:center; background:var(--navy);
}
.atalho__ico svg{ width:24px; height:24px; fill:var(--gold); }
.atalho__txt{ display:flex; flex-direction:column; gap:.1rem; }
.atalho__txt small{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-600); }
.atalho__txt strong{ font-family:"Playfair Display",Georgia,serif; font-size:1.25rem; color:var(--navy); }
.atalho__txt span{ font-size:.85rem; color:var(--cinza-500); }
.atalho__seta{ margin-left:auto; font-size:1.6rem; color:var(--cinza-400); transition:color var(--tr), transform var(--tr); }
.atalho:hover .atalho__seta{ color:var(--gold-600); transform:translateX(3px); }
/* o de contato usa o índigo cheio, para os dois não ficarem iguais */
.atalho--contato{ background:var(--navy); border-color:var(--navy); }
.atalho--contato .atalho__ico{ background:rgba(255,255,255,.12); }
.atalho--contato .atalho__txt strong{ color:var(--branco); }
.atalho--contato .atalho__txt span{ color:rgba(255,255,255,.72); }
.atalho--contato .atalho__seta{ color:rgba(255,255,255,.5); }

/* ================================ CTA ================================= */
.cta{ background:var(--gold); color:var(--navy); text-align:center; padding:3rem 0; }
.cta h2{ font-size:clamp(1.5rem,3.4vw,2.1rem); }
.cta p{ margin:.6rem auto 1.6rem; max-width:46ch; color:rgba(29,14,71,.78); font-size:.95rem; }

/* ============================== RODAPÉ ================================ */
.footer{ background:var(--navy-900); color:rgba(255,255,255,.7); padding:3rem 0 0; font-size:.87rem; }
.footer__grid{ display:grid; gap:2rem; grid-template-columns:1.6fr 1.2fr 1fr 1fr; padding-bottom:2.2rem; }
.footer__brand{ color:var(--branco); font-size:1.2rem; margin-bottom:.5rem; }
.footer h4{ color:var(--branco); font-size:.92rem; margin:0 0 .85rem; font-weight:600; }
.footer p{ margin:0; }
.footer__list li{ display:flex; align-items:flex-start; gap:.55rem; margin-bottom:.55rem; }
.footer__list .ico{ fill:var(--gold); margin-top:.2rem; }
.footer__list a:hover{ color:var(--gold); }
.footer__list--nav li{ display:block; }
.footer__list--nav button{ background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer; }
.footer__list--nav button:hover{ color:var(--gold); }
.footer__bottom{
  /* o espaço extra embaixo evita que o botão flutuante cubra o texto */
  border-top:1px solid rgba(255,255,255,.1); padding:1.1rem 0 5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.78rem; color:rgba(255,255,255,.5);
}

/* =========================== FICHA / MODAL ============================ */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:1.2rem; }
.modal[hidden], .drawer[hidden]{ display:none; }
.modal__overlay{ position:absolute; inset:0; background:rgba(20,9,53,.72); backdrop-filter:blur(3px); }
.modal__box{
  position:relative; z-index:1; width:min(600px,100%); max-height:92vh; overflow:auto;
  background:var(--branco); border-radius:var(--raio); box-shadow:var(--sombra-alta);
  animation:sobe .26s cubic-bezier(.4,0,.2,1);
}
@keyframes sobe{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.modal__x{
  position:absolute; top:.6rem; right:.6rem; z-index:3;
  width:34px; height:34px; border:0; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--navy); font-size:1.5rem; line-height:1; cursor:pointer;
}
.modal__x:hover{ background:var(--gold); }

.modal__media{
  position:relative; aspect-ratio:4/3; background:var(--cinza-100);
  overflow:hidden; touch-action:pan-y;
}
.modal__media img{ width:100%; height:100%; object-fit:cover; }
.seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--navy);
  font-size:1.5rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background var(--tr);
}
.seta:hover{ background:var(--gold); }
.seta[hidden]{ display:none; }
.seta--ant{ left:.6rem; }
.seta--prox{ right:.6rem; }
.modal__contador{
  position:absolute; right:.7rem; bottom:.7rem; z-index:2;
  background:rgba(20,9,53,.75); color:var(--branco);
  font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.modal__legenda{
  position:absolute; left:.7rem; bottom:.7rem; z-index:2; margin:0;
  background:var(--gold); color:var(--navy);
  font-size:.76rem; font-weight:700; padding:.25rem .7rem; border-radius:999px;
}

.modal__body{ padding:1.3rem 1.5rem 1.6rem; }
.modal__cat{ margin:0; font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-600); }
.modal__body h3{ font-size:1.45rem; color:var(--navy); margin:.25rem 0 .2rem; }
.modal__sku{ margin:0 0 .8rem; font-size:.76rem; color:var(--cinza-400); }
.modal__preco{ margin:0 0 .9rem; font-size:1.1rem; font-weight:700; color:var(--navy); }
.modal__preco small{ display:block; font-size:.76rem; font-weight:400; color:var(--cinza-500); }
.modal__desc{ margin:0 0 1.1rem; font-size:.9rem; color:var(--cinza-500); }

.modal__cores-titulo{
  margin:0 0 .6rem; font-family:"Inter",sans-serif;
  font-size:.78rem; font-weight:700; color:var(--navy);
  text-transform:uppercase; letter-spacing:.07em;
}
.modal__cores-titulo[hidden]{ display:none; }
.paleta{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
  gap:.5rem; margin-bottom:1.3rem; max-height:230px; overflow-y:auto;
}
.paleta:empty{ display:none; }
.amostra{
  border:2px solid transparent; border-radius:var(--raio-sm);
  background:none; padding:0; cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column; gap:.2rem;
  transition:border-color var(--tr), transform var(--tr);
}
.amostra img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; }
/* cor que não tem foto de trama: a amostra é a própria cor */
.amostra__cor{
  display:block; width:100%; aspect-ratio:1/1; border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.amostra span{
  font-size:.63rem; line-height:1.2; color:var(--cinza-500);
  padding:0 .1rem .15rem; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.amostra:hover{ transform:translateY(-2px); }
.amostra.is-active{ border-color:var(--navy); }
.amostra.is-active span{ color:var(--navy); font-weight:700; }

.specs{ margin:0 0 1.2rem; }
.specs div{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--cinza-100); font-size:.85rem; }
.specs dt{ color:var(--cinza-500); }
.specs dd{ margin:0; font-weight:600; color:var(--navy); text-align:right; }

.modal__compra{ display:flex; gap:.6rem; margin-bottom:.7rem; }
.modal__compra .btn{ flex:1; }
.qtd{ display:flex; align-items:center; border:1px solid var(--cinza-200); border-radius:999px; overflow:hidden; }
.qtd button{ width:36px; height:100%; background:none; border:0; color:var(--navy); font-size:1.1rem; cursor:pointer; }
.qtd button:hover{ background:var(--cinza-50); }
.qtd input{ width:44px; border:0; outline:0; text-align:center; font:inherit; font-weight:600; color:var(--navy); -moz-appearance:textfield; }
.qtd input::-webkit-outer-spin-button,.qtd input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ============================== DRAWER ================================ */
.drawer{ position:fixed; inset:0; z-index:130; }
.drawer__overlay{ position:absolute; inset:0; background:rgba(20,9,53,.6); backdrop-filter:blur(2px); }
.drawer__box{
  position:absolute; top:0; right:0; bottom:0; width:min(400px,100%);
  background:var(--branco); display:flex; flex-direction:column;
  box-shadow:var(--sombra-alta); animation:entra .28s cubic-bezier(.4,0,.2,1);
}
@keyframes entra{ from{ transform:translateX(100%); } to{ transform:none; } }
.drawer__topo{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid var(--cinza-100); }
.drawer__topo h2{ font-size:1.2rem; color:var(--navy); }
.drawer__x{ background:none; border:0; font-size:1.7rem; line-height:1; color:var(--navy); cursor:pointer; }
.drawer__itens{ flex:1; overflow-y:auto; padding:1rem 1.3rem; }

.item{ display:flex; gap:.85rem; padding:.85rem 0; border-bottom:1px solid var(--cinza-100); }
.item__media{ width:62px; height:62px; border-radius:var(--raio-sm); background:var(--cinza-100); flex:none; position:relative; overflow:hidden; }
.item__media img{ width:100%; height:100%; object-fit:cover; }
.item__info{ flex:1; min-width:0; }
.item__nome{ font-size:.88rem; font-weight:600; color:var(--navy); margin:0; }
.item__meta{ margin:.1rem 0 .45rem; font-size:.75rem; color:var(--cinza-400); }
.item__linha{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.item .qtd{ transform:scale(.85); transform-origin:left center; }
.item__remover{ background:none; border:0; color:var(--cinza-400); font-size:.76rem; cursor:pointer; text-decoration:underline; }
.item__remover:hover{ color:#DC2626; }

.drawer__rodape{ border-top:1px solid var(--cinza-100); padding:1.1rem 1.3rem 1.3rem; }
.drawer__nota{ margin:0 0 .85rem; font-size:.78rem; color:var(--cinza-500); }
.drawer__limpar{ display:block; width:100%; margin-top:.7rem; background:none; border:0; color:var(--cinza-400); font-size:.8rem; cursor:pointer; text-decoration:underline; }
.drawer__limpar:hover{ color:#DC2626; }

.drawer__vazio{ text-align:center; padding:3rem 1rem; color:var(--cinza-500); }
.drawer__vazio svg{ width:52px; height:52px; fill:var(--cinza-200); margin:0 auto .8rem; }
.drawer__vazio strong{ display:block; color:var(--navy); margin-bottom:.3rem; }

/* =============================== TOAST ================================ */
.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%);
  z-index:200; background:var(--navy); color:var(--branco);
  padding:.75rem 1.3rem; border-radius:999px; font-size:.85rem; font-weight:500;
  box-shadow:var(--sombra-alta); animation:sobe .25s;
}
.toast[hidden]{ display:none; }

/* ================================ FAB ================================= */
.fab{
  position:fixed; right:1rem; bottom:1rem; z-index:100;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--wpp); color:#04331A; box-shadow:0 8px 22px rgba(37,211,102,.42);
  transition:transform var(--tr);
}
.fab svg{ width:29px; height:29px; fill:currentColor; }
.fab:hover{ transform:scale(1.08); }

/* ============================ RESPONSIVO ============================== */
@media (max-width:1040px){
  .loja__grid{ grid-template-columns:1fr; }
  /* o painel completo é gaveta, aberta pelo botão "Filtrar" */
  .filtros{
    position:fixed; top:0; left:0; bottom:0; z-index:140;
    width:min(330px,90%); border-radius:0; overflow-y:auto;
    transform:translateX(-100%); transition:transform var(--tr);
    box-shadow:var(--sombra-alta);
  }
  .filtros.is-open{ transform:none; }
  .filtros__fechar{ display:block; }
  .filtros__fundo{ display:block; position:fixed; inset:0; z-index:135; background:rgba(20,9,53,.55); }
  .filtros__fundo[hidden]{ display:none; }
  #abrirFiltros{ display:inline-flex; }

  /* tarja que só repete o atalho aceso: no celular fica de fora */
  #tagsAtivas[data-atalho] .tag-ativa[data-tirar="grupo"]{ display:none; }
  #tagsAtivas[data-atalho]:not(:has(.tag-ativa:not([data-tirar="grupo"]))){ display:none; }

  /* card de 3 colunas é estreito: o selo encolhe para não encostar na borda */
  .card__destaque{
    top:.4rem; left:.4rem; max-width:calc(100% - .8rem);
    /* sem caixa alta nem espaçamento entre letras, o selo cabe numa linha só */
    font-size:.6rem; letter-spacing:0; text-transform:none; padding:.22rem .45rem;
  }

  .atalhos-dep{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.45rem; margin:-.4rem 0 1rem;
  }
  .atalho-dep{
    cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    background:var(--branco); color:var(--navy);
    border:1px solid var(--cinza-200); border-radius:999px;
    padding:.6rem .5rem; font-size:.82rem; font-weight:600;
    transition:background var(--tr), border-color var(--tr), color var(--tr);
  }
  .atalho-dep.is-ativo{ background:var(--navy); border-color:var(--navy); color:var(--branco); }

  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .header__inner{ flex-wrap:wrap; gap:.8rem; min-height:0; padding:.8rem 0; }
  .busca{ order:3; flex-basis:100%; max-width:none; }
  .navbar{ top:0; }
  .banners__grid{ grid-template-columns:1fr; }
  /* no celular o texto ocupa a largura toda: véu de cima para baixo */
  .banner--principal .banner__veu{
    background:linear-gradient(180deg, rgba(20,9,53,.82) 0%, rgba(20,9,53,.7) 60%, rgba(29,14,71,.62) 100%);
  }
  .banner--principal{ background-size:cover; background-position:center 55%; }
  .banners__lado{ grid-template-columns:1fr 1fr; grid-template-rows:none; }
  .topbar__info{ display:none; }
  html{ scroll-padding-top:80px; }
}

@media (max-width:760px){
  .nav-toggle{ display:flex; }
  /* o menu acompanha o cabeçalho fixo: abre embaixo dele em qualquer
     ponto da página, não só no topo. O "top" vem do JS. */
  .navbar{
    position:fixed; left:0; right:0; z-index:59;
    max-height:0; overflow:hidden;
    transition:max-height var(--tr);
    box-shadow:0 14px 28px rgba(20,9,53,.35);
  }
  .navbar.is-open{ max-height:70vh; overflow-y:auto; }
  .navbar__inner{ flex-direction:column; gap:0; }
  .navbar a{ border-bottom:1px solid rgba(255,255,255,.08); padding:.85rem 0; }
  .navbar a:last-child{ border-bottom:0; }

  /* fundo escuro atrás do menu aberto */
  .nav-fundo{
    position:fixed; inset:0; z-index:58;
    background:rgba(20,9,53,.5);
  }
  .nav-fundo[hidden]{ display:none; }
  .acao__txt{ display:none; }
  .acao{ padding:.5rem; }
  .banners__lado{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  /* celular: três colunas de produtos, tudo mais justo */
  .produtos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; }
  /* foto mais baixa: o card inteiro encurta e cabe mais na tela */
  .card__media{ aspect-ratio:4/3; }
  .card__corpo{ padding:.5rem .45rem 0; }
  .card__preco{ padding:0 .45rem; }
  .card__acoes{ flex-direction:row; padding:.5rem .45rem .5rem; gap:.25rem; }
  .card__cat{ font-size:.55rem; letter-spacing:.05em; }
  .card__nome{ font-size:.75rem; line-height:1.25; }
  .card__resumo{ font-size:.65rem; line-height:1.3; margin-bottom:.35rem; }
  /* corta em duas linhas para os cards não crescerem demais */
  .card__nome button, .card__resumo{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .card__preco strong{ font-size:.74rem; }
  .card__preco small{ font-size:.6rem; }
  .card__wpp{ font-size:.65rem; padding:.45rem .2rem; gap:.2rem; }
  .card__wpp .ico{ width:.9em; height:.9em; }
  .card__add{ width:28px; height:28px; flex:none; }
  .card__add svg{ width:14px; height:14px; }
  .bolinha{ width:9px; height:9px; }
  .bolinha__mais{ font-size:.6rem; }
  .card__cores{ gap:.18rem; padding-bottom:.4rem; }
  .card__olho{ font-size:.65rem; padding:.4rem; }
  .card__fotos{ font-size:.62rem; }
  .vitrine{ grid-auto-columns:minmax(165px,1fr); }
  .modal__compra{ flex-direction:column; }
  .qtd{ align-self:flex-start; }
  /* os três botões dividem uma linha só */
  .banner__acoes{ gap:.35rem; flex-wrap:nowrap; }
  .banner__acoes .btn{
    flex:1 1 0; min-width:0; padding:.62rem .3rem;
    font-size:.75rem; gap:.28rem;
  }
  .banner__acoes .btn .ico{ width:.95em; height:.95em; }
  .banner{ padding:1.7rem; }
  .banner--principal{ min-height:0; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ======================================================================
   PÁGINAS SOBRE E CONTATO
   ====================================================================== */
.pagina-topo{
  background:linear-gradient(150deg, var(--navy-900) 0%, var(--navy) 60%, var(--navy-700) 100%);
  color:var(--branco); padding:2.4rem 0; text-align:center;
}
.pagina-topo h1{ font-size:clamp(1.9rem,4vw,2.8rem); }
.pagina-topo .eyebrow{ margin-bottom:.5rem; }
.pagina-topo__sub{ margin:.6rem auto 0; max-width:52ch; color:rgba(255,255,255,.8); font-size:.98rem; }

.container--texto{ max-width:70ch; }
.texto-longo{ margin:1rem 0 0; font-size:1rem; color:var(--cinza-500); line-height:1.75; }

.section__head .eyebrow{ color:var(--gold-600); }

/* cartão grande do WhatsApp */
.destaque-wpp{
  max-width:640px; margin-inline:auto; text-align:center;
  background:var(--branco); border:1px solid var(--cinza-200);
  border-radius:var(--raio); padding:1.7rem 1.6rem; box-shadow:var(--sombra);
}
.destaque-wpp h2{ font-size:1.4rem; color:var(--navy); margin-bottom:.5rem; }
.destaque-wpp p{ margin:0 auto 1.2rem; max-width:46ch; font-size:.92rem; color:var(--cinza-500); }
.destaque-wpp__ico{
  width:46px; height:46px; margin:0 auto .8rem; border-radius:50%;
  display:grid; place-items:center; background:var(--navy);
}
.destaque-wpp__ico svg{ width:24px; height:24px; fill:var(--gold); }

/* canais de contato */
.canais{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.canal{
  background:var(--branco); border:1px solid var(--cinza-200); border-radius:var(--raio);
  padding:1.3rem 1.2rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.canal__ico{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--navy); margin-bottom:.3rem;
}
.canal__ico svg{ width:21px; height:21px; fill:var(--gold); }
.canal__ico--pequeno{ width:38px; height:38px; margin-bottom:.6rem; }
.canal__ico--pequeno svg{ width:18px; height:18px; }
.canal h3{ font-family:"Inter",sans-serif; font-size:1rem; font-weight:700; color:var(--navy); }
.canal p{ margin:0 0 .9rem; font-size:.87rem; color:var(--cinza-500); flex:1; overflow-wrap:anywhere; }
.canal .btn{ margin-top:auto; }

/* mapa */
.mapa{
  background:var(--branco); border:1px solid var(--cinza-200);
  border-radius:var(--raio); padding:.75rem; margin-bottom:1rem;
}
.mapa__foto{
  position:relative; height:290px; border-radius:var(--raio-sm); overflow:hidden;
  background-color:var(--navy); background-image:var(--foto);
  background-size:cover; background-position:center;
}
/* o mapa fica por cima; se ele não carregar, a foto da fachada aparece */
.mapa__foto iframe{ position:relative; width:100%; height:100%; border:0; display:block; }
.mapa__acoes{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.75rem; }

.grid-duplo{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.bloco{
  background:var(--branco); border:1px solid var(--cinza-200);
  border-radius:var(--raio); padding:1.3rem;
}
.bloco h3{ font-family:"Inter",sans-serif; font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.7rem; }
.bloco p{ margin:0; font-size:.9rem; color:var(--cinza-500); }
.bloco__valor a{ color:var(--navy); font-weight:600; font-size:1.05rem; }
.bloco__nota{ margin:.3rem 0 0; font-size:.8rem; color:var(--cinza-400); }

/* convite para avaliar, que também preenche a sobra do bloco do telefone */
.avaliacao{
  margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--cinza-100);
  text-align:center;
}
.avaliacao__estrelas{ color:var(--gold-600); font-size:1.05rem; letter-spacing:.12em; }
.avaliacao p{ margin:.25rem 0 .8rem; font-size:.85rem; }
.bloco__valor a:hover{ color:var(--gold-600); }

.horarios{ margin:0; }
.horarios div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-bottom:1px solid var(--cinza-100); font-size:.88rem;
}
.horarios div:last-child{ border-bottom:0; }
.horarios dt{ color:var(--cinza-500); }
.horarios dd{ margin:0; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; }
.horarios .fechado{ color:#C0392B; }

/* instagram */
.insta{
  display:flex; align-items:center; gap:1rem; margin-top:1rem;
  background:var(--navy); color:var(--branco);
  border-radius:var(--raio); padding:1.1rem 1.4rem;
  transition:background var(--tr);
}
.insta:hover{ background:var(--navy-700); }
.insta__ico{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:rgba(255,255,255,.12);
}
.insta__ico svg{ width:24px; height:24px; fill:var(--branco); }
.insta__txt{ display:flex; flex-direction:column; gap:.45rem; }
.insta__txt strong{ font-size:.92rem; font-weight:500; }
.insta__arroba{
  align-self:flex-start; background:var(--gold); color:var(--navy);
  font-size:.82rem; font-weight:700; padding:.28rem .8rem; border-radius:999px;
}

/* ------------------------------- HISTÓRIA ---------------------------- */
.historia{ display:grid; gap:2rem; grid-template-columns:1.15fr .85fr; align-items:center; }
.historia__texto .eyebrow{ color:var(--gold-600); }
.historia__foto{
  margin:0; position:relative; min-height:330px; border-radius:var(--raio);
  overflow:hidden; background-color:var(--navy);
  background-image:var(--foto); background-size:cover; background-position:center;
}
.historia__foto figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1.2rem .9rem;
  font-size:.8rem; color:var(--branco);
  background:linear-gradient(0deg, rgba(20,9,53,.9), transparent);
}
/* moldura do vídeo: o filme ocupa a largura toda, em formato de tela larga */
.historia__foto--video{ min-height:0; background:var(--navy); }
.historia__foto--video video{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--navy);
}

.marcos{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:1.4rem; padding-top:1.3rem; border-top:1px solid var(--cinza-200); }
.marcos li{ display:flex; flex-direction:column; }
.marcos strong{ font-family:"Playfair Display",Georgia,serif; font-size:1.15rem; color:var(--navy); }
.marcos span{ font-size:.78rem; color:var(--cinza-500); max-width:20ch; }

/* --------------------------- MISSÃO E VISÃO -------------------------- */
.grid-duplo--mv .bloco{ padding:1.7rem; }
.bloco--missao{
  background:var(--navy); border-color:var(--navy); color:var(--branco);
}
.bloco--missao h3{ color:var(--branco); }
.bloco--missao p{ color:rgba(255,255,255,.78); }
.bloco--missao .canal__ico{ background:rgba(255,255,255,.13); }
.bloco--visao{
  background:var(--branco);
  border-left:4px solid var(--gold);
}
.bloco--visao .canal__ico{ background:var(--gold); }
.bloco--visao .canal__ico svg{ fill:var(--navy); }

/* -------------------------------- VALORES ----------------------------
   Fundo colorido em movimento por baixo de um painel escuro translúcido.
   Feito só com gradientes e uma rotação lenta: sem WebGL, sem biblioteca.
   ------------------------------------------------------------------- */
.valores{ display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .valores{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .valores{ grid-template-columns:1fr; } }

.valor{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:22px; min-height:270px;
  background:var(--tom-a,#1D0E47);
  transition:transform var(--tr), box-shadow var(--tr);
}
.valor:hover{ transform:translateY(-4px); box-shadow:0 18px 46px rgba(20,9,53,.28); }

/* as manchas de cor que giram devagar */
.valor__fundo{
  position:absolute; inset:-45%; z-index:0;
  background:
    radial-gradient(38% 46% at 28% 30%, var(--tom-b) 0%, transparent 62%),
    radial-gradient(42% 40% at 74% 68%, var(--tom-a) 0%, transparent 66%),
    radial-gradient(30% 34% at 62% 22%, rgba(255,255,255,.5) 0%, transparent 58%),
    conic-gradient(from 210deg, var(--tom-a), var(--tom-b), var(--tom-a));
  filter:blur(22px) saturate(1.35);
  animation:girar var(--giro,22s) linear infinite;
}
@keyframes girar{
  from{ transform:rotate(0deg) scale(1.06); }
  50% { transform:rotate(180deg) scale(1.18); }
  to  { transform:rotate(360deg) scale(1.06); }
}

/* o painel escuro por cima, que deixa o texto legível */
.valor__vidro{
  position:relative; z-index:1; display:flex; flex-direction:column; height:100%;
  padding:1.7rem 1.6rem;
  background:rgba(14,7,36,.68);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  backdrop-filter:blur(2px);
}
.valor__ico{
  width:46px; height:46px; border-radius:14px; margin-bottom:1rem;
  display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18);
}
.valor__ico svg{ width:22px; height:22px; fill:var(--gold); }
.valor h3{
  font-family:"Inter",sans-serif; font-size:1.15rem; font-weight:700;
  color:var(--branco); margin-bottom:.5rem;
}
.valor p{ margin:0; font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.82); }

@media (prefers-reduced-motion:reduce){
  .valor__fundo{ animation:none; }
}

/* gerentes */
.gerentes{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.gerente{
  background:var(--branco); border:1px solid var(--cinza-200); border-radius:var(--raio);
  padding:1.3rem 1.1rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
}
.gerente img{ width:118px; height:118px; border-radius:50%; object-fit:cover; margin-bottom:.7rem; }
.gerente strong{ font-size:1rem; color:var(--navy); }
.gerente small{ font-size:.83rem; color:var(--cinza-500); }

.navbar a.is-active{ color:var(--gold); border-color:var(--gold); }

@media (max-width:900px){
  .historia{ grid-template-columns:1fr; gap:1.4rem; }
  .historia__foto:not(.historia__foto--video){ min-height:210px; }
}

@media (max-width:760px){
  .categorias{ grid-template-columns:1fr; }
  .atalhos__grid{ grid-template-columns:1fr; }
  .categoria{ min-height:150px; }
  .mapa__foto{ height:220px; }
  .insta{ flex-direction:column; text-align:center; }
  .insta__txt{ align-items:center; }
}

/* ======================================================================
   CELULAR: páginas Sobre e Contato mais compactas
   ====================================================================== */
@media (max-width:640px){
  .pagina-topo{ padding:1.7rem 0; }
  .pagina-topo h1{ font-size:1.7rem; }
  .pagina-topo__sub{ font-size:.88rem; }
  .section--curta{ padding:1.4rem 0; }
  .section__head{ margin-bottom:1.2rem; }
  .section__titulo{ font-size:1.25rem; }
  .section__sub{ font-size:.84rem; }
  .texto-longo{ font-size:.9rem; line-height:1.6; }
  /* os três marcos lado a lado, numa linha só, em vez de empilhados */
  .marcos{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.7rem; margin-top:1rem; padding-top:1rem;
  }
  .marcos strong{ font-size:.94rem; line-height:1.25; }
  .marcos span{ font-size:.68rem; line-height:1.35; max-width:none; margin-top:.15rem; }

  .grid-duplo{ gap:.7rem; }
  .bloco{ padding:1rem; }
  .bloco h3{ font-size:.92rem; margin-bottom:.5rem; }
  .bloco p{ font-size:.85rem; }
  .horarios div{ padding:.4rem 0; font-size:.82rem; }

  .destaque-wpp{ padding:1.3rem 1.1rem; }
  .destaque-wpp h2{ font-size:1.15rem; }
  .destaque-wpp p{ font-size:.85rem; margin-bottom:1rem; }

  .valor{ min-height:0; }
  .valor__vidro{ padding:1.2rem 1.1rem; }
  .valor h3{ font-size:1rem; }
  .valor p{ font-size:.84rem; }

  /* os três gerentes na mesma linha, sem sobrar um embaixo */
  .gerentes{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
  .gerente{ padding:.9rem .5rem; }
  .gerente img{ width:100%; height:auto; max-width:96px; margin-bottom:.5rem; }
  .gerente strong{ font-size:.78rem; line-height:1.2; }
  .gerente small{ font-size:.68rem; }

  /* canais: dois em cima e o terceiro ocupando a linha inteira */
  .canais{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .canais .canal:last-child{ grid-column:1 / -1; }
  .canal{ padding:1rem .8rem; }
  .canal h3{ font-size:.9rem; }
  .canal p{ font-size:.76rem; margin-bottom:.7rem; }
  .canal .btn{ font-size:.82rem; padding:.6rem 1rem; }

  .mapa{ padding:.5rem; }
  .mapa__foto{ height:200px; }
  .mapa__acoes .btn{ flex:1 1 auto; font-size:.82rem; }
  .insta{ padding:1rem; }
  .insta__txt strong{ font-size:.85rem; }
  .atalhos{ padding:1.6rem 0; }
  .atalho{ padding:1.1rem 1.1rem; gap:.8rem; }
  .atalho__txt strong{ font-size:1.05rem; }
  .atalho__txt span{ font-size:.78rem; }
}

/* ======================================================================
   CELULAR: esteira dos benefícios, filtro em destaque e blocos 2 por 2
   ====================================================================== */
@media (max-width:760px){
  /* os quatro selos viram uma esteira em linha única */
  .beneficios{ padding:1rem 0; }
  .beneficios__grid{
    display:flex; flex-wrap:nowrap;
    width:max-content; max-width:none; margin:0;
    gap:2.2rem; padding-right:2.2rem;
    animation:esteira 24s linear infinite;
  }
  .ben{ flex:none; gap:.6rem; }
  .beneficios .ben--copia{ display:flex; }
  .ben svg{ width:22px; height:22px; }
  .ben strong{ font-size:.84rem; white-space:nowrap; }
  .ben span{ font-size:.74rem; white-space:nowrap; }
}

/* o conteúdo é duplicado, então andar metade dele fecha o ciclo sem emenda */
@keyframes esteira{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .beneficios__grid{ animation:none; }
}

@media (max-width:640px){
  /* filtro bem mais visível: dourado, cheio e do tamanho do dedo */
  .loja__barra{ gap:.7rem; }
  .loja__ferramentas{ width:100%; gap:.5rem; justify-content:flex-end; }
  #abrirFiltros{
    flex:1 1 auto; justify-content:center;
    background:var(--gold); color:var(--navy); border-color:var(--gold);
    font-size:.92rem; font-weight:700; padding:.75rem 1.1rem;
    box-shadow:0 4px 14px rgba(255,216,1,.35);
  }
  #abrirFiltros:hover{ background:var(--gold-600); border-color:var(--gold-600); }
  #abrirFiltros .ico{ width:1.05em; height:1.05em; }
  .ordenar{ flex:1 1 auto; }
  .ordenar span{ display:none; }
  .ordenar select{ width:100%; padding:.72rem .9rem; font-size:.88rem; }

  /* Sobre: missão e visão lado a lado, e os valores dois a dois */
  .grid-duplo--mv{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .grid-duplo--mv .bloco{ padding:.9rem .8rem; }
  .grid-duplo--mv .bloco h3{ font-size:.85rem; }
  .grid-duplo--mv .bloco p{ font-size:.76rem; line-height:1.5; }
  .grid-duplo--mv .canal__ico--pequeno{ width:32px; height:32px; margin-bottom:.45rem; }
  .grid-duplo--mv .canal__ico--pequeno svg{ width:15px; height:15px; }

  .valores{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .valor{ border-radius:16px; }
  .valor__vidro{ padding:.95rem .85rem; border-radius:16px; }
  .valor__ico{ width:34px; height:34px; border-radius:10px; margin-bottom:.6rem; }
  .valor__ico svg{ width:16px; height:16px; }
  .valor h3{ font-size:.85rem; margin-bottom:.3rem; }
  .valor p{ font-size:.74rem; line-height:1.5; }
}

/* ======================================================================
   CELULAR: rodapé mais curto e organizado
   Em coluna única ele virava uma tira comprida. Marca e contato ocupam a
   largura toda; as duas listas de links ficam lado a lado.
   ====================================================================== */
@media (max-width:640px){
  .footer{ padding:1.8rem 0 0; font-size:.84rem; }
  .footer__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.3rem .9rem; padding-bottom:1.3rem;
  }
  .footer__grid > div:nth-child(1),
  .footer__grid > div:nth-child(2){ grid-column:1 / -1; }

  .footer__brand{ font-size:1.05rem; margin-bottom:.35rem; }
  .footer__grid > div:nth-child(1) p{ font-size:.8rem; max-width:44ch; }
  .footer h4{ font-size:.85rem; margin-bottom:.55rem; }
  .footer__list li{ margin-bottom:.45rem; gap:.45rem; }
  .footer__list .ico{ width:.95em; height:.95em; margin-top:.15rem; }
  .footer__list--nav li{ margin-bottom:.4rem; }

  .footer__bottom{
    flex-direction:column; align-items:center; text-align:center;
    gap:.3rem; padding:.9rem 0 4.5rem; font-size:.72rem;
  }
}