/* === DULCE GALOPE · RESPONSIVE REFACTOR 2026-09-01 === */
html{box-sizing:border-box;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-width:320px;max-width:100%;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,a,input,textarea,select{font:inherit}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,input,textarea,select{max-width:100%}
main,header,footer,section,nav{min-width:0}
.container,.wrap,.hero,.section-inner,.footer-inner,.topbar-inner{width:min(100% - 40px,1180px);margin-inline:auto;min-width:0}

/* Desktop > 1024 */
@media (min-width:1025px){
  .topbar{min-height:72px}
  .links{display:flex!important;align-items:center;gap:clamp(18px,2vw,32px)}
  .menu-btn{display:none!important}
  .mobile-menu{display:none!important}
  .hero{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;gap:clamp(38px,4vw,58px)!important}
  .hero-copy,.hero-visual{min-width:0}
  .hero h1{max-width:760px}
  .grid,.cards,.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Tablet 768–1024 */
@media (min-width:768px) and (max-width:1024px){
  .container,.wrap,.hero,.section-inner,.footer-inner,.topbar-inner{width:min(100% - 48px,940px)}
  .topbar{min-height:68px}
  .links{display:none!important}
  .menu-btn{display:inline-flex!important;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:10px 14px;border-radius:999px}
  .hero{grid-template-columns:minmax(0,1fr) minmax(300px,.85fr)!important;gap:30px!important;min-height:auto!important;padding-block:34px!important}
  .hero h1{font-size:clamp(48px,6.6vw,72px)!important;line-height:.97!important}
  .hero-visual{min-height:310px!important}
  .hero-card{inset:18px 6px 18px 46px!important}
  .seal{width:132px!important}
  .grid,.cards,.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  .page-hero h1{font-size:clamp(50px,8vw,76px)!important}
}

/* Mobile < 768 */
@media (max-width:767px){
  .container,.wrap,.hero,.section-inner,.footer-inner,.topbar-inner{width:min(100% - 28px,680px)}
  .topbar{min-height:64px;padding-block:6px}
  .brand{min-width:0;gap:9px}
  .brand img{width:42px!important;height:42px!important;flex:0 0 42px}
  .brand b{font-size:.98rem}
  .brand p{display:none}
  .links{display:none!important}
  .menu-btn{display:inline-flex!important;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:10px 14px;border-radius:999px;position:relative;z-index:82}
  .mobile-menu{position:fixed!important;left:12px!important;right:12px!important;top:72px!important;width:auto!important;max-height:calc(100dvh - 88px);overflow:auto;overscroll-behavior:contain;border-radius:22px!important;padding:12px!important;z-index:81!important;box-shadow:0 22px 60px rgba(30,13,8,.22)!important}
  .mobile-menu:not(.open){display:none!important}
  .mobile-menu.open{display:grid!important;grid-template-columns:1fr!important;gap:4px!important}
  .mobile-menu a{display:flex!important;align-items:center;min-height:48px;padding:11px 14px!important;border-radius:14px!important;font-size:1rem!important}
  body.dg-menu-open{overflow:hidden;touch-action:none}
  .hero{display:grid!important;grid-template-columns:1fr!important;gap:22px!important;min-height:auto!important;padding-block:26px 28px!important}
  .hero-copy{order:1;min-width:0}
  .hero-visual{order:2;min-height:250px!important;width:100%;max-width:560px;margin-inline:auto}
  .hero h1{font-size:clamp(45px,14vw,66px)!important;line-height:.94!important;letter-spacing:-.045em!important;overflow-wrap:anywhere}
  .hero .lead{font-size:1rem!important;line-height:1.6!important;max-width:100%}
  .actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
  .actions .btn,.btn{min-height:48px;padding:12px 16px!important}
  .hero-card{inset:12px 0 12px 34px!important;border-radius:24px!important}
  .seal{width:108px!important;left:2px!important;bottom:6px!important}
  .dg-marquee-set{font-size:.67rem!important;gap:16px!important}
  .section,section.section{padding-block:38px!important}
  .section-head{margin-bottom:20px!important}
  .section-head h2,.section h2{font-size:clamp(34px,10vw,48px)!important;line-height:1!important}
  .grid,.cards,.products-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important}
  .card,.product-card{min-width:0;width:100%}
  .card img,.product-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
  .page-hero{padding-block:30px 22px!important}
  .page-hero h1{font-size:clamp(42px,13vw,64px)!important;line-height:.96!important;overflow-wrap:anywhere}
  .footer-inner{grid-template-columns:1fr!important;gap:24px!important}
  .footer-links{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 12px!important}
  .footer-links a{min-height:44px;display:flex;align-items:center}
  .wa-float{right:max(14px,env(safe-area-inset-right))!important;bottom:max(14px,env(safe-area-inset-bottom))!important;width:54px!important;height:54px!important}
  form{min-width:0}
  input,textarea,select{width:100%;font-size:16px!important}
}

/* Small phones */
@media (max-width:420px){
  .container,.wrap,.hero,.section-inner,.footer-inner,.topbar-inner{width:calc(100% - 22px)}
  .hero h1{font-size:clamp(41px,13vw,56px)!important}
  .hero-visual{min-height:225px!important}
  .hero-card{inset:10px 0 10px 28px!important}
  .seal{width:96px!important}
  .footer-links{grid-template-columns:1fr!important}
}

/* Cross-browser fallbacks */
@supports not (overflow:clip){html,body{overflow-x:hidden}}
@supports not (height:100dvh){.mobile-menu{max-height:calc(100vh - 88px)}}
@supports not (backdrop-filter:blur(10px)){.topbar,.mobile-menu{background:rgba(250,243,233,.98)!important}}

/* Focus and interaction states */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(126,70,49,.48)!important;outline-offset:3px!important}
@media (hover:hover){a:hover,.btn:hover,button:hover{transition-duration:.22s}}
@media (hover:none){a:hover,.btn:hover,button:hover{transform:none!important}}