/* Ajustes compartilhados após os estilos de cada modelo. */
.mobile-menu{display:none}
dialog{overscroll-behavior:contain;overflow-wrap:anywhere}
@media(max-width:700px){
  /* Todas as seções continuam acessíveis no menu. */
  header{position:relative;z-index:5}
  .mobile-menu{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:68px;min-height:44px;border:1px solid #8886;background:transparent;color:inherit;padding:8px 10px;font:inherit;font-size:12px;cursor:pointer;flex-shrink:0}
  header nav,.header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);color:var(--ink);border:1px solid #8886;padding:10px;box-shadow:0 12px 20px #0001;z-index:10}
  .mobile-menu[aria-expanded=true]+nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
  header nav a,header nav a:nth-child(2),.header nav>a:not(:last-child){display:flex;align-items:center;min-height:48px;padding:12px;font-size:14px}
  .header nav .underlink{border:0}
  body[data-store] header{flex-wrap:nowrap;gap:10px;padding-block:16px}
  body[data-store] header .brand{margin-right:auto;white-space:nowrap;flex-shrink:0}
  body[data-store=atelier] header .brand{font-size:clamp(13px,3.4vw,22px);letter-spacing:.04em}
  body[data-store=urbana] header .brand{font-size:34px}
  body[data-store=essencial] header .brand{font-size:29px}
  body[data-store] header .saved{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;font-size:11px;padding:7px 0;white-space:nowrap}
  body[data-store] header .saved span{margin:0;flex-shrink:0}
  body[data-store] header .mobile-menu{order:3}
  body[data-store] .hero,body[data-store=atelier] .hero,body[data-store=essencial] .hero{grid-template-columns:1fr;gap:24px;padding:35px 5% 0}
  body[data-store] .hero-copy,body[data-store=essencial] .hero-copy{min-width:0;padding:0}
  body[data-store=urbana] .hero h1{font-size:clamp(58px,15.8vw,100px)}
  body[data-store=atelier] .hero h1{font-size:clamp(45px,13vw,76px)}
  body[data-store=essencial] .hero h1{font-size:clamp(42px,11.6vw,68px)}
  body[data-store] .hero-image,body[data-store=urbana] .hero-image,body[data-store=essencial] .hero-image,body[data-store=atelier] .hero-image{height:clamp(320px,105vw,480px);max-width:100%}
  body[data-store] .hero-foot{gap:15px;font-size:11px;line-height:1.5}
  body[data-store] .intro{font-size:15px;line-height:1.8;max-width:400px}
  body[data-store] .cta{min-height:48px;font-size:14px;gap:18px;max-width:100%}
  body[data-store] .section-head{display:block}
  body[data-store] .section-head h2{max-width:none;font-size:clamp(29px,8vw,42px)}
  body[data-store] .section-head>span{display:block;padding:0 0 20px;font-size:12px}
  body[data-store] .tools{display:block}
  body[data-store] .filters{gap:6px}
  body[data-store] .filters button{font-size:12px;min-height:44px;padding:10px 13px}
  body[data-store] .search{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:12px}
  body[data-store] .search input{width:0;min-width:0;flex:1;margin:0;min-height:48px;font-size:16px;padding:12px 8px}
  body[data-store] .product-info h3{font-size:14px;line-height:1.5}
  body[data-store] .product-info>span{font-size:13px}
  body[data-store] .category{font-size:10px}
  body[data-store] .text-link{min-height:44px;font-size:14px;line-height:1.6}
  body[data-store] .story p:not(.eyebrow),body[data-store] .contact p:not(.eyebrow),.ess-editorial p:not(.eyebrow),.ess-guide p{font-size:14px}
  .ess-guide summary{font-size:15px;min-height:44px}
  body[data-store] .empty{font-size:14px;line-height:1.7}
  /* O botão acompanha a rolagem do próprio modal. */
  body[data-store] dialog{width:calc(100% - 24px);max-width:520px;max-height:calc(100dvh - 24px);margin:auto;overflow:auto}
  body[data-store] .close{position:sticky;display:block;top:10px;right:auto;margin:10px 10px -54px auto;width:44px;height:44px;font-size:30px;box-shadow:0 2px 10px #0002}
  body[data-store] .detail{grid-template-columns:1fr;min-width:0}
  body[data-store] .detail>img{height:min(45svh,340px);max-height:none}
  body[data-store] .detail-copy{padding:26px 20px}
  body[data-store] .detail h2{font-size:30px;line-height:1.15}
  body[data-store] .detail-copy>p{font-size:14px}
  body[data-store] fieldset{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
  body[data-store] legend{font-size:13px}
  body[data-store] fieldset label{margin:0}
  body[data-store] fieldset span{width:44px;height:44px;font-size:16px}
  body[data-store] .steps button{min-height:44px;font-size:14px}
  body[data-store] .copy-status{overflow-wrap:anywhere}
  body[data-store] footer>a:last-child,.demo>a{display:inline-flex;align-items:center;min-height:44px;font-size:11px}
  body[data-store] .demo{padding-block:0;align-items:center;gap:10px}
  .header .logo{font-size:30px}.header .logo small{font-size:7px;letter-spacing:1px}
  body:not([data-store]) h1{font-size:clamp(38px,10.5vw,70px)}
  .hero-visual{transform:none;max-width:100%;padding:18px}
  .browser-mock{transform:none}.browser-mock:hover{transform:none}
  .mock-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-inline:12px;gap:10px}
  .mock-body h2{font-size:clamp(21px,5.8vw,36px)}
  .mock-body img{height:clamp(190px,55vw,285px)}
  .mock-nav{padding:15px 12px}.mock-nav>span{letter-spacing:.3px}
  .visual-caption{flex-wrap:wrap;gap:6px}.visual-caption a{min-height:44px;display:flex;align-items:center;font-size:11px}
  .visual-top{font-size:7px;line-height:1.6}
  .hero .actions .button,.hero .actions .underlink,.model-select,.offer .underlink{min-height:48px;font-size:14px;display:flex;align-items:center}
  .model-caption p,.process-grid p,.offer-list p,.section-heading>p,.lead{font-size:14px}
  .model-caption small,.demo-note,.hero-note{font-size:11px;line-height:1.8}
  .model-image{height:clamp(320px,100vw,480px)}
  .model-image strong{font-size:clamp(40px,12vw,56px)}
  .quote-grid{min-width:0}.quote-grid>*{min-width:0}
  #quote-form label{font-size:13px}
  #quote-form input,#quote-form select,#quote-form textarea{font-size:16px;min-height:48px}
  #quote-form select{padding-right:24px;text-overflow:ellipsis}
  .contact-note,.form-note{font-size:12px}
  #quote-form .button{font-size:14px;min-height:52px}
  .faq summary{min-height:48px;font-size:15px}.faq details p{font-size:14px}
  #quote-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:0 20px 22px;overscroll-behavior:contain}
  #quote-dialog .dialog-close{position:sticky;top:8px;display:block;margin:8px -10px -5px auto;background:var(--paper);z-index:2;width:44px;height:44px;right:auto;flex-shrink:0}
  #quote-dialog textarea{font-size:16px;max-height:38dvh}
  #quote-dialog .actions{display:grid;gap:12px}#quote-dialog .button{min-height:48px;font-size:14px}
  .footer>a:last-child{min-height:44px;display:flex;align-items:center;font-size:12px}
}
@media(max-width:360px){
  body[data-store] header .brand{font-size:26px}
  body[data-store=atelier] header .brand{font-size:12px}
  body[data-store] header{gap:7px}
  body[data-store] .mobile-menu{min-width:60px;padding-inline:7px}
  body[data-store] .grid,body[data-store=atelier] .grid{gap:25px 12px}
  body[data-store] .product-image,body[data-store=essencial] .product-image,body[data-store=urbana] .product-image,body[data-store=atelier] .product-image{height:220px}
  .ess-values{font-size:10px;flex-wrap:wrap;justify-content:center}
  .ess-values i{display:none}
  body:not([data-store]) .hero .actions{align-items:stretch;flex-direction:column;gap:8px}
  .mock-nav>span{display:none}
}