/* Base responsiva e segura (baixa especificidade) */
:where(*, *::before, *::after){ box-sizing: border-box; }
:where(html, body){ height:100%; }
:where(body){ margin:0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(img, picture, video, canvas, svg){ display:block; max-width:100%; height:auto; }
:where(input, button, textarea, select){ font: inherit; }
:where(a){ text-decoration:none; color:inherit; }

:root{
  --maxw: 1200px;
  --gutter: 1rem;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --radius: 12px;
}
html{ font-size: clamp(14px, 1.2vw + 0.5rem, 18px); }
body{ line-height: 1.6; }

.container{
  width: min(var(--maxw), 100% - (var(--gutter)*2));
  margin-inline:auto;
}
.grid-auto{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-6);
}
.card{
  border: 1px solid #e8e8e8;
  border-radius: var(--radius);
  padding: var(--space-6);
  background:#fff;
  overflow: clip;
  container-type: inline-size;
}
.card > img{ width:100%; aspect-ratio: 4/3; object-fit: cover; border-radius: calc(var(--radius) - 4px); }

h1{ font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem); line-height: 1.2; }
h2{ font-size: clamp(1.4rem, 1.6vw + .9rem, 2.2rem); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .7rem 1.1rem; border-radius: .75rem; border:0; cursor:pointer;
}

.nav{ display:flex; align-items:center; gap: var(--space-4); flex-wrap:wrap; }

.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:.75rem; border-bottom:1px solid #eee; }

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

@container (min-width: 520px){
  .card--produto{ display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-6); align-items:center; }
}

.hide-sm{ display:none; }
@media (min-width:640px){ .hide-sm{ display:initial; } }