:root{
    --ground:#F4F6F9;
    --paper:#FFFFFF;
    --paper-2:#FAFCFE;
    --ink:#0B1B2B;
    --ink-2:#566A7E;
    --ink-3:#8698A8;
    --brand:#002040;
    --brand-ink:#0A3A68;
    --on-brand:#FFFFFF;
    --brand-soft:#E7EDF4;
    --brand-line:#C3D2E0;
    --gold:#E8A917;
    --gold-ink:#A9760B;
    --line:#DCE3EB;
    --line-2:#C2CDD8;
    --shadow:0 1px 2px rgba(0,32,64,.06), 0 8px 24px -12px rgba(0,32,64,.22);
    --gap:clamp(18px,4vw,28px);
    --serif:"Bodoni Moda", "Didot", Georgia, serif;
    --sans:"Karla", "Helvetica Neue", Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#081727;
      --paper:#0E2036;
      --paper-2:#132842;
      --ink:#E9EFF5;
      --ink-2:#A3B4C4;
      --ink-3:#7C8FA1;
      --brand:#EFC352;
      --brand-ink:#F6D680;
      --on-brand:#0A1B2B;
      --brand-soft:#112742;
      --brand-line:#2C4363;
      --gold:#F5D37A;
      --gold-ink:#EFC352;
      --line:#22374F;
      --line-2:#334C69;
      --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.75);
    }
  }
  :root[data-theme="dark"]{
    --ground:#081727;
    --paper:#0E2036;
    --paper-2:#132842;
    --ink:#E9EFF5;
    --ink-2:#A3B4C4;
    --ink-3:#7C8FA1;
    --brand:#EFC352;
    --brand-ink:#F6D680;
    --on-brand:#0A1B2B;
    --brand-soft:#112742;
    --brand-line:#2C4363;
    --gold:#F5D37A;
    --gold-ink:#EFC352;
    --line:#22374F;
    --line-2:#334C69;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.75);
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance;line-height:1.14}
  p{margin:0}
  img{max-width:100%}

  .wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
  .band{padding-block:clamp(52px,8vw,92px)}

  /* tecido: trama fina, o motivo da casa */
  .weave{
    background-image:
      repeating-linear-gradient(45deg, color-mix(in srgb, var(--gold) 26%, transparent) 0 1px, transparent 1px 7px),
      repeating-linear-gradient(-45deg, color-mix(in srgb, var(--brand) 12%, transparent) 0 1px, transparent 1px 7px);
  }

  .eyebrow{
    font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--brand);margin:0;
  }
  .lede{font-size:clamp(17px,2.1vw,20px);color:var(--ink-2);max-width:60ch}

  /* ---------- topo ---------- */
  header.top{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
    background:color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter:saturate(150%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topin{display:flex;align-items:center;gap:20px;min-height:66px;flex-wrap:wrap;padding-block:10px}
  .mark{display:flex;align-items:center;gap:11px;text-decoration:none}
  .mark .selo{
    width:38px;height:38px;flex:none;border-radius:50%;
    background:radial-gradient(circle at 34% 30%, #FBE9A8 0%, #F3C63F 42%, #D79612 78%, #A08038 100%);
    box-shadow:inset 0 0 0 1px rgba(0,32,64,.18);
  }
  .mark .txt{display:flex;flex-direction:column;gap:2px}
  .mark .nome{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.01em;line-height:1.1}
  .mark .nome em{font-style:italic;font-weight:400;color:var(--gold-ink)}
  .mark .praca{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

  /* recado de abrangência */
  .escopo{
    margin-top:26px;padding:16px 20px;border:1px solid var(--line);
    background:var(--paper-2);font-size:14.5px;color:var(--ink-2);line-height:1.55;
  }
  .escopo b{color:var(--ink);font-weight:600}
  nav.top-nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
  nav.top-nav a{
    font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;
    padding-block:4px;border-bottom:1px solid transparent;
  }
  nav.top-nav a:hover{color:var(--ink);border-bottom-color:var(--brand)}

  /* ---------- botões ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--sans);font-size:15.5px;font-weight:600;line-height:1;
    padding:14px 22px;border-radius:2px;text-decoration:none;border:1px solid transparent;
    transition:background-color .18s, color .18s, border-color .18s;
  }
  .btn-main{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
  .btn-main:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand)}
  .btn-ghost{border-color:var(--line-2);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
  .btn-sm{padding:11px 16px;font-size:14px}
  a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

  /* ---------- hero ---------- */
  .hero{padding-block:clamp(46px,7vw,86px) clamp(34px,5vw,56px)}
  .hero h1{
    font-size:clamp(34px,6.2vw,62px);
    letter-spacing:-.012em;margin-block:18px 20px;max-width:17ch;
  }
  .hero h1 i{font-style:italic;color:var(--gold-ink)}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
  .hero-meta{
    display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:22px;
    border-top:1px solid var(--line);
  }
  .hero-meta div{display:flex;flex-direction:column;gap:2px}
  .hero-meta b{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--brand)}
  .hero-meta span{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

  /* ---------- seções ---------- */
  .sec-head{margin-bottom:clamp(26px,4vw,40px);max-width:64ch}
  .sec-head h2{font-size:clamp(26px,4vw,38px);letter-spacing:-.01em;margin-block:12px 12px}

  /* ---------- lojas ---------- */
  .lojas{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--gap)}
  .loja{
    background:var(--paper);border:1px solid var(--line);
    display:flex;flex-direction:column;box-shadow:var(--shadow);
  }
  .loja-top{padding:24px 24px 0}
  .loja .cidade{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--brand)}
  .loja h3{font-size:25px;margin-block:7px 12px}
  .loja address{font-style:normal;font-size:15px;color:var(--ink-2);line-height:1.55}
  .rating{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:14.5px;color:var(--ink-2)}
  .rating b{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:700}
  .stars{color:var(--gold);letter-spacing:.06em;font-size:14px}
  .loja-acts{
    margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;
    padding:20px 24px 24px;
  }

  /* marcador honesto do que falta */
  .todo{
    display:inline-flex;align-items:center;gap:7px;
    font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--gold-ink);border:1px dashed color-mix(in srgb, var(--gold) 60%, transparent);
    padding:5px 10px;border-radius:2px;background:color-mix(in srgb, var(--gold) 12%, transparent);
  }

  /* ---------- categorias ---------- */
  .cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--gap)}
  .cat{
    position:relative;display:flex;flex-direction:column;justify-content:flex-end;
    min-height:206px;padding:24px;text-decoration:none;
    background:var(--paper);border:1px solid var(--line);
    transition:border-color .18s, transform .18s;
  }
  .cat:hover{border-color:var(--brand-line);transform:translateY(-2px)}
  .cat .swatch{
    position:absolute;inset:0;opacity:.55;pointer-events:none;
  }
  .cat h3{position:relative;font-size:23px;margin-bottom:6px}
  .cat p{position:relative;font-size:14.5px;color:var(--ink-2);line-height:1.5}
  .cat .go{position:relative;margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}

  /* ---------- argumento ---------- */
  .argumento{background:var(--brand-soft);border-block:1px solid var(--brand-line)}
  .arg-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:start}
  @media (max-width:820px){.arg-grid{grid-template-columns:1fr}}
  .argumento h2{font-size:clamp(28px,4.4vw,44px);letter-spacing:-.015em;margin-bottom:20px}
  .argumento h2 i{font-style:italic;color:var(--gold-ink)}
  .argumento p{color:var(--ink-2);font-size:17.5px;max-width:58ch}
  .argumento p + p{margin-top:16px}
  .prova{
    background:var(--paper);border:1px solid var(--brand-line);padding:28px;
  }
  .prova .num{color:var(--brand);font-family:var(--serif);font-size:clamp(44px,8vw,64px);font-weight:700;line-height:1;letter-spacing:-.02em}
  .prova .num small{font-size:.42em;font-weight:500;letter-spacing:0}
  .prova .cap{font-size:14.5px;color:var(--ink-2);margin-top:10px;line-height:1.5}
  .prova hr{border:0;border-top:1px solid var(--line);margin:22px 0}
  .prova-list{display:flex;flex-direction:column;gap:12px}
  .prova-list div{display:flex;justify-content:space-between;gap:14px;font-size:15px;align-items:baseline}
  .prova-list span{color:var(--ink-2)}
  .prova-list b{font-variant-numeric:tabular-nums;font-weight:600}

  /* ---------- passos ---------- */
  .passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap)}
  .passo{display:flex;flex-direction:column;gap:10px}
  .passo .n{
    font-family:var(--serif);font-size:15px;font-weight:700;color:var(--brand);
    width:38px;height:38px;display:grid;place-items:center;
    border:1px solid var(--brand-line);border-radius:50%;
  }
  .passo h3{font-size:20px}
  .passo p{font-size:15.5px;color:var(--ink-2)}

  /* ---------- fecho ---------- */
  .fecho{text-align:center;border-top:1px solid var(--line)}
  .fecho h2{font-size:clamp(27px,4.4vw,40px);max-width:20ch;margin-inline:auto;letter-spacing:-.012em}
  .fecho p{margin-block:16px 28px;color:var(--ink-2);max-width:52ch;margin-inline:auto}

  /* ---------- rodapé ---------- */
  footer{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(40px,6vw,64px) 32px}
  .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--gap)}
  .foot-grid h4{
    font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);margin:0 0 12px;font-family:var(--sans);
  }
  .foot-grid address,.foot-grid p{font-style:normal;font-size:14.5px;color:var(--ink-2);line-height:1.6}
  .foot-grid a{color:var(--ink-2);text-decoration:none}
  .foot-grid a:hover{color:var(--brand)}
  .foot-links{display:flex;flex-direction:column;gap:7px}
  .foot-bottom{
    margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
    font-size:13px;color:var(--ink-3);
  }

  /* aviso de prévia: as páginas internas ainda não existem */
  #toast{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:99;
    background:var(--ink);color:var(--ground);
    font-size:14.5px;font-weight:500;padding:12px 18px;border-radius:2px;
    box-shadow:0 10px 30px -12px rgba(0,0,0,.5);max-width:calc(100% - 32px);
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none!important;animation:none!important}
  }



  /* ---------- logo oficial ---------- */
  .topin{min-height:86px}
  .mark{align-items:center;gap:15px}
  .mark .logo{display:block;height:clamp(46px,6vw,62px);width:auto}
  .mark .logo-escuro{display:none}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .mark .logo-claro{display:none}
    :root:not([data-theme="light"]) .mark .logo-escuro{display:block}
  }
  :root[data-theme="dark"] .mark .logo-claro{display:none}
  :root[data-theme="dark"] .mark .logo-escuro{display:block}
  .mark .praca{
    padding-left:14px;border-left:1px solid var(--line-2);
    line-height:1.35;font-size:10px;letter-spacing:.15em;
  }

  /* ---------- fotos reais das lojas ---------- */
  /* O véu é escuro nos dois temas, de propósito: o texto fica branco
     sobre foto, e foto não muda de cor quando o tema muda. */
  .cat.com-foto{min-height:266px;overflow:hidden;background:#0B1B2B}
  .cat.com-foto .swatch{
    opacity:1;background-size:cover;background-position:center;
    transition:transform .5s ease;
  }
  .cat.com-foto:hover .swatch{transform:scale(1.045)}
  .cat.com-foto .veu{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(6,18,31,.10) 0%, rgba(6,18,31,.34) 46%,
      rgba(6,18,31,.74) 74%, rgba(6,18,31,.90) 100%);
  }
  .cat.com-foto h3{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5)}
  .cat.com-foto p{color:rgba(255,255,255,.9)}
  .cat.com-foto .go{color:#F3C63F}
  .cat.com-foto:hover{border-color:var(--brand-line)}

  /* Cartão de serviço no fim da grade: enxoval não é uma sexta linha de
     produto, é o que se monta com as cinco. Por isso não leva foto e vem
     com a borda dourada — preenche a grade sem virar categoria. */
  .cat.servico{
    min-height:266px;justify-content:flex-end;
    background:var(--brand-soft);
    border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  }
  .cat.servico:hover{border-color:var(--gold);transform:translateY(-2px)}
  .cat.servico .rotulo{
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold-ink);margin-bottom:9px;
  }
  .cat.servico h3{color:var(--ink);margin-bottom:8px}
  .cat.servico p{color:var(--ink-2)}
  .cat.servico .go{color:var(--gold-ink)}

  /* Mapa sob clique: a página não carrega nada do Google antes de a pessoa
     pedir — abre mais rápido e não planta rastreador de terceiro sem motivo. */
  .mapa{
    position:relative;width:100%;height:clamp(250px,38vw,430px);
    border:1px solid var(--line);background:var(--paper-2);overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  }
  .mapa.aberto{display:block}
  .mapa iframe{width:100%;height:100%;border:0;display:block}
  .mapa-abrir{
    font-family:var(--sans);font-size:15.5px;font-weight:600;line-height:1;cursor:pointer;
    padding:14px 24px;border-radius:2px;
    background:var(--brand);color:var(--on-brand);border:1px solid var(--brand);
    transition:background-color .18s,border-color .18s;
  }
  .mapa-abrir:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
  .mapa-aviso{font-size:13.5px;color:var(--ink-3);max-width:42ch;text-align:center;padding-inline:18px;line-height:1.5}

  .banda-foto{
    width:100%;height:clamp(190px,30vw,360px);
    background-size:cover;background-position:center;
    border-block:1px solid var(--line);
  }

  /* Uma seção comum encostada em outra já tem o respiro da de cima.
     Mas quando a de cima é faixa colorida ou foto, a borda é visível —
     e aí o texto seguinte precisa do seu próprio respiro. */
  .faq-band{padding-top:0}
  .argumento + .faq-band{padding-top:clamp(46px,6vw,76px)}
  .ficha-band{padding-block:clamp(20px,3vw,32px) clamp(40px,6vw,64px)}
  .banda-foto + .ficha-band{padding-top:clamp(40px,5vw,60px)}

  .hero-sm{padding-block:clamp(30px,5vw,54px) clamp(22px,3vw,34px)}
  .hero-sm h1{font-size:clamp(30px,5vw,50px);max-width:20ch}
  .crumb{font-size:13px;color:var(--ink-3);margin-bottom:16px}
  .crumb a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
  .crumb a:hover{color:var(--brand);border-bottom-color:var(--brand)}

  .ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
  .ficha-bloco{background:var(--paper);padding:22px}
  .ficha-bloco h4{margin:0 0 10px;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .ficha-bloco address{font-style:normal;font-size:15.5px;color:var(--ink);line-height:1.55}
  .ficha-bloco .mini{font-size:13.5px;color:var(--ink-3);margin-top:10px;line-height:1.5}
  .ficha-bloco .mini-strong{font-size:16px;color:var(--ink);font-weight:600}
  .ficha-bloco .mini-strong a{color:var(--brand);text-decoration:none;border-bottom:1px solid var(--brand-line)}

  /* perguntas frequentes */
  .faq{border-top:1px solid var(--line);max-width:760px}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{
    list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
    padding:20px 0;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary h3{font-size:19px;margin:0;flex:1;line-height:1.3}
  .faq summary:hover h3{color:var(--gold-ink)}
  .faq .mais{
    flex:none;width:20px;height:20px;position:relative;margin-top:4px;
  }
  .faq .mais::before,.faq .mais::after{
    content:"";position:absolute;background:var(--brand);
    left:50%;top:50%;transform:translate(-50%,-50%);
  }
  .faq .mais::before{width:14px;height:1.5px}
  .faq .mais::after{width:1.5px;height:14px;transition:opacity .18s}
  .faq details[open] .mais::after{opacity:0}
  .faq .resp{padding:0 36px 22px 0}
  .faq .resp p{color:var(--ink-2);font-size:16.5px;max-width:62ch}
  .faq details[open] summary h3{color:var(--brand)}

  /* menus do topo */
  nav.top-nav{align-items:center;gap:6px}
  nav.top-nav .solo{padding:8px 12px;border-bottom:0}
  nav.top-nav .menu{position:relative}
  nav.top-nav .menu > summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
    font-size:14.5px;font-weight:500;color:var(--ink-2);padding:8px 12px;
    border-radius:2px;user-select:none;
  }
  nav.top-nav .menu > summary::-webkit-details-marker{display:none}
  nav.top-nav .menu > summary:hover{color:var(--ink);background:var(--brand-soft)}
  nav.top-nav .menu[open] > summary{color:var(--brand);background:var(--brand-soft)}
  nav.top-nav .seta{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
  nav.top-nav .menu[open] .seta{transform:rotate(-135deg) translate(-2px,-2px)}
  .painel{
    position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:248px;
    background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);
    padding:8px;display:flex;flex-direction:column;
  }
  .painel-2{min-width:210px}
  .painel a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;text-decoration:none;border:0}
  .painel a b{font-size:15px;font-weight:600;color:var(--ink)}
  .painel a span{font-size:12.5px;color:var(--ink-3)}
  .painel a:hover{background:var(--brand-soft)}
  .painel a:hover b{color:var(--brand)}
  @media (max-width:640px){
    nav.top-nav{width:100%;margin-left:0;gap:2px;flex-direction:column;align-items:stretch}
    nav.top-nav .solo{padding:10px 12px}
    nav.top-nav .menu > summary{justify-content:space-between;padding:10px 12px}
    nav.top-nav .menu{position:static}
    .painel{position:static;box-shadow:none;border-left:2px solid var(--brand-line);border-top:0;border-right:0;border-bottom:0;
      margin:2px 0 6px 12px;padding:2px 0;min-width:0}
    .painel a{padding:8px 12px}
  }

  footer nav.rodape{display:flex;flex-direction:column;gap:7px}


.f-cama-card{background-image:url(/img/cama-card.jpg)}
.f-cama-band{background-image:url(/img/cama-band.jpg)}
.f-mesa-card{background-image:url(/img/mesa-card.jpg)}
.f-mesa-band{background-image:url(/img/mesa-band.jpg)}
.f-banho-card{background-image:url(/img/banho-card.jpg)}
.f-banho-band{background-image:url(/img/banho-band.jpg)}
.f-cortinas-card{background-image:url(/img/cortinas-card.jpg)}
.f-cortinas-band{background-image:url(/img/cortinas-band.jpg)}
.f-decoracao-card{background-image:url(/img/decoracao-card.jpg)}
.f-decoracao-band{background-image:url(/img/decoracao-band.jpg)}
.f-loja-nh{background-image:url(/img/loja-nh.jpg)}


/* ---------- tema escuro fixo ---------- */
:root{
  color-scheme:dark;
  --ground:#081727; --paper:#0E2036; --paper-2:#132842;
  --ink:#E9EFF5; --ink-2:#A3B4C4; --ink-3:#7C8FA1;
  --brand:#EFC352; --brand-ink:#F6D680; --on-brand:#0A1B2B;
  --brand-soft:#112742; --brand-line:#2C4363;
  --gold:#F5D37A; --gold-ink:#EFC352;
  --line:#22374F; --line-2:#334C69;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.75);
}
/* o logo marinho sumiria no fundo escuro: vale sempre a versao clara dele */
.mark .logo-claro{display:none}
.mark .logo-escuro{display:block}