/* ============================================================
   Vitrine Mente Ocupada — responsivo
   Medidas fluidas com clamp(); fotos em retrato 4:5; sem overflow.
   ============================================================ */
:root{
  --photo-radius:16px;
  --gutter:clamp(18px,4.2vw,64px);
  --section:clamp(30px,4vw,48px);
  --col-gap:clamp(14px,1.9vw,26px);
  --serif-ratio:1;
}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img{display:block;max-width:100%;height:auto;border-radius:var(--photo-radius);object-fit:cover}
.wrap{width:min(var(--max),calc(100% - var(--gutter)*2));margin-inline:auto}

/* Cabeçalho */
.header-inner{height:clamp(68px,7vw,90px);gap:clamp(10px,1.6vw,20px);flex-wrap:nowrap}
.brand{flex:0 1 auto;min-width:0}
.brand-name{font-size:clamp(20px,2.4vw,30px);white-space:nowrap}
.brand-sub{font-size:clamp(6px,.62vw,8px);letter-spacing:clamp(1.4px,2.4px,3px);margin-top:6px;white-space:nowrap}
.nav{gap:clamp(13px,1.9vw,30px);flex-wrap:wrap;justify-content:center}
.nav a{font-size:clamp(9px,1vw,10px);letter-spacing:.9px;white-space:nowrap}
.tools{gap:clamp(6px,1vw,14px);flex:0 0 auto}
.tools .icon{width:clamp(19px,2vw,21px);height:auto}

/* Hero */
.hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);min-height:clamp(380px,44vw,520px);align-items:center}
.hero-copy{padding:clamp(26px,4vw,64px) clamp(22px,3.4vw,64px) clamp(26px,4vw,64px) 0;align-self:center}
.hero h1{font-size:clamp(34px,4.6vw,60px);line-height:1.04;letter-spacing:-.7px;word-break:normal;overflow-wrap:break-word}
.hero p{font-size:clamp(13px,1.15vw,15px);line-height:1.65;margin:clamp(14px,1.8vw,22px) 0 clamp(16px,2vw,26px);max-width:38ch}
.hero-image{height:clamp(330px,38vw,500px);width:100%;border-radius:var(--photo-radius);object-position:center 45%}

/* Categorias */
.cms-section{padding-block:var(--section)}
.category-row{display:flex;justify-content:center;gap:clamp(20px,3vw,42px);overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.category-tile{flex:0 0 clamp(84px,9.4vw,132px);scroll-snap-align:center;background:none;border:0;padding:0;text-align:center;min-width:0}
.category-tile img{width:100%;aspect-ratio:1;height:auto;border-radius:50%}
.category-tile span{display:block;margin-top:clamp(8px,1vw,13px);font-size:clamp(8px,.78vw,10px);line-height:1.45;letter-spacing:.6px;text-transform:uppercase;overflow-wrap:break-word}

/* Produtos */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:var(--col-gap) var(--col-gap)}
.product-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.product-grid.single{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),240px));justify-content:center}
.product{min-width:0}
.product button.open-product{display:block;padding:0;border:0;background:none;width:100%;text-align:left}
.product img{width:100%;aspect-ratio:3/4;height:auto;object-position:center 40%;background:var(--sand)}
.product h3{font-size:clamp(10px,.95vw,12px);line-height:1.4;margin-top:clamp(9px,1vw,13px);overflow-wrap:break-word}
.product p{font-size:clamp(10px,.9vw,12px)}
.availability{display:inline-block;margin-top:4px;font-size:clamp(9px,.8vw,11px)}
.heart{width:clamp(30px,3vw,34px);height:clamp(30px,3vw,34px);right:7px;top:7px}

/* Ambientes */
.room-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--col-gap)}
.room-tile{min-width:0;text-align:left}
.room-tile img{width:100%;aspect-ratio:3/4;height:auto}
.room-tile span{font-size:clamp(9px,.85vw,11px);margin-top:8px;overflow-wrap:break-word}

/* História, depoimentos, CTA */
.story-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,5vw,80px)}
.story h2{font-size:clamp(28px,3.2vw,38px)}
.story p{font-size:clamp(12px,.95vw,13px);max-width:46ch}
.values{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.review{max-width:62ch}
.review blockquote{font-size:clamp(20px,2.2vw,27px)}
.final h2{font-size:clamp(30px,3.6vw,43px)}
.final p{font-size:clamp(12px,1vw,13px)}
.footer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:clamp(20px,3vw,35px)}
.featured-action{text-align:center;margin-top:clamp(18px,2.4vw,26px)}

/* Painel */
.admin-shell{max-width:1180px;margin:clamp(20px,3vw,40px) auto;padding-inline:clamp(16px,3vw,24px)}
.admin-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3.4vw,40px)}
.admin-shell h1{font-size:clamp(28px,3.4vw,40px)}
.cms-tabs{border-bottom:1px solid var(--line);padding-bottom:16px;gap:8px}
.cms-editor .field-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0 clamp(16px,2vw,25px)}
.cms-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr));gap:14px}
.cms-record img{height:clamp(110px,14vw,140px);object-position:center 40%}
.cms-record .actions{margin-top:12px}
.admin-item img{width:64px;height:76px;flex:0 0 auto}
.admin-item{flex-wrap:wrap}
input,textarea,select,max-width{max-width:100%}

/* ---------- Tablet ---------- */
@media (max-width:1000px){
  .nav{gap:14px}
  .hero h1{font-size:clamp(32px,5.2vw,46px)}
  .hero-copy{padding-right:clamp(18px,3vw,36px)}
  .product-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .room-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-grid.five .product:nth-child(n+4){display:none}
}
@media (max-width:820px){
  .header-inner{flex-wrap:wrap;height:auto;padding-block:12px;row-gap:8px}
  .menu{display:grid;order:-1}
  .nav{order:3;flex-basis:100%;justify-content:flex-start;display:none}
  .nav.is-open{display:flex;flex-wrap:wrap;gap:16px 22px}
  .header-inner>.brand{margin-right:auto;text-align:left}
  .brand-name{font-size:clamp(20px,4.4vw,26px)}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:clamp(24px,4vw,36px) 0 clamp(18px,3vw,26px)}
  .hero-copy .eyebrow{font-size:9px;letter-spacing:1.4px;margin-bottom:12px}
  .hero p{max-width:52ch}
  .hero-image{height:clamp(320px,58vw,460px)}
  .story-inner{grid-template-columns:1fr}
  .admin-layout{grid-template-columns:1fr}
}

/* ---------- Celular ---------- */
@media (max-width:620px){
  :root{--photo-radius:12px;--gutter:16px}
  .announcement{height:auto;min-height:26px;padding:6px 14px;font-size:8px;letter-spacing:1.1px;line-height:1.35}
  .header-inner{padding-block:10px}
  .tools .icon{width:20px;height:20px}
  .hero h1{font-size:clamp(27px,8.4vw,38px);line-height:1.08}
  .hero-copy .eyebrow{font-size:8px;letter-spacing:1.1px}
  .hero p{font-size:13px;line-height:1.6}
  .hero-image{height:clamp(300px,88vw,420px);object-position:center 40%}
  .section-title{font-size:9px;letter-spacing:1.5px;margin-bottom:18px}
  .cms-section{padding-block:clamp(22px,6vw,30px)}
  /* Fileiras com rolagem acessível, sem esmagar as fotos */
  .category-row{justify-content:flex-start;gap:14px;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
  .category-tile{flex-basis:clamp(78px,23vw,96px)}
  .category-tile span{font-size:8px;letter-spacing:.3px}
  .product-grid,.product-grid.five{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding:0 var(--gutter) 12px;scrollbar-width:none}
  .product-grid::-webkit-scrollbar,.category-row::-webkit-scrollbar,.room-row::-webkit-scrollbar{display:none}
  .product-grid .product{flex:0 0 68%;max-width:260px;scroll-snap-align:start}
  .product-grid.five .product:nth-child(n+4){display:block}
  .product-grid.single .product{flex-basis:78%}
  .product img{aspect-ratio:3/4}
  .room-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding:0 var(--gutter) 12px;scrollbar-width:none}
  .room-tile{flex:0 0 68%;max-width:260px;scroll-snap-align:start}
  .story{padding-block:28px}
  .story h2{font-size:clamp(26px,7.4vw,32px)}
  .values{grid-template-columns:repeat(2,1fr);gap:18px 12px}
  .value span{font-size:8px;letter-spacing:.3px;line-height:1.5}
  .final{padding-block:30px}
  .final h2{font-size:clamp(26px,7.2vw,32px)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px 16px}
  .footer-grid>.brand,.footer-grid>div:first-of-type{grid-column:1/-1}
  .footnote{font-size:9px;line-height:1.7}
  dialog{width:calc(100% - 24px);padding:22px 18px}
  .dialog-title{font-size:clamp(22px,6.4vw,28px)}
  .dialog-body .product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;overflow:visible}
  .dialog-body>img{max-height:52vh;width:100%;object-fit:contain}
  .admin-item button{margin-left:0}
  .cms-tabs .btn{padding:9px 12px;font-size:9px}
  .cms-record .btn{width:100%}
  .admin-top{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:380px){
  .hero h1{font-size:26px}
  .product-grid .product,.room-tile{flex-basis:76%}
  .footer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}