:root {
  /* Colores */
  --bg:     #1A3C2E;
  --accent: #52B788;
  --cta:    #D46A1A;
  --cream:  #FDFAF5;
  --muted:  rgba(253, 250, 245, 0.5);
  --border: rgba(82, 183, 136, 0.25);

  /* Tipografía */
  --font: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Escala */
  --text-sm:   clamp(0.8rem,  1.5vw, 0.9rem);
  --text-base: clamp(0.9rem,  2vw,   1rem);
  --text-lg:   clamp(1.25rem, 4vw,   2rem);
  --text-xl:   clamp(1.75rem, 6vw,   3rem);
  --text-hero: clamp(3rem,    12vw,  5rem);

  /* Espaciado */
  --space-sm:  clamp(0.75rem, 2vw,  1rem);
  --space-md:  clamp(1rem,    3vw,  1.5rem);
  --space-lg:  clamp(1.5rem,  4vw,  2.5rem);
  --space-xl:  clamp(3rem,    8vw,  6rem);

  /* Layout */
  --max-w:    1200px;
  --header-h: 64px;
  --radius:   4px;
  --radius-lg: 12px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--cream);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--text-hero); font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; }
h2 { font-size: var(--text-xl);   font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
h3 { font-size: var(--text-lg);   font-weight: 700; line-height: 1.2; }
p  { font-size: var(--text-base); color: var(--muted); line-height: 1.7; max-width: 60ch; }

.label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.general__padding {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px clamp(1rem, 5vw, 10rem) 20px;
    gap: clamp(3rem, 6vw, 6rem);
}
.margin__top{
  margin-top: 10px;
  width: 100%;
}
.margin__top__big{
  margin-top: 70px;
  width: 100%;
}

.section { padding: var(--space-xl) 0; }

.grid__x2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: var(--space-md); }
.grid__x3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-md); }
.grid__x4 {
  display: grid;
  padding-top: 20px;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  width: 100%;
}

@media (max-width: 900px) {
  .grid__x4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .grid__x4 { grid-template-columns: 1fr; }
}
a, button {
  transition: opacity 0.2s, color 0.2s;
}

a:hover {
  opacity: 0.85;
}
.product-card,
.category-card,
.resena,
.checkout__card,
.checkout__summary,
.cart__summary {
  position: relative;
  isolation: isolate;
}

.product-card::before,
.category-card::before,
.resena::before,
.checkout__card::before,
.checkout__summary::before,
.cart__summary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(82,183,136,0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 0;
}

.product-card:hover::before,
.category-card:hover::before,
.resena:hover::before,
.checkout__card:hover::before,
.checkout__summary:hover::before,
.cart__summary:hover::before {
  opacity: 1;
}