/* ==========================================================================
   BROTE V2 — DESIGN SYSTEM (CÁLIDO, INFANTIL, E-COMMERCE & MONTESSORI)
   ========================================================================== */

:root {
  /* Color Palette - Warm, Friendly, Organic for Early Childhood */
  --bg-main: #FFFDF9;
  --bg-surface: #FAF5EE;
  --bg-card: #FFFFFF;
  --bg-subtle: #F6EFE6;

  /* Accent Colors */
  --terracotta: #E87A5D;
  --terracotta-hover: #D6684B;
  --terracotta-light: #FDF1ED;

  --sage-mint: #7FA085;
  --sage-mint-hover: #6C8D72;
  --sage-mint-light: #EAF2EB;

  --amber-gold: #E5A83B;
  --amber-gold-light: #FEF7E7;

  --sky-lavender: #8897D8;
  --sky-lavender-light: #EEF1FB;

  --soft-rose: #F4C3B2;

  /* Ink & Neutral Text */
  --ink: #2D2623;
  --ink-muted: #635852;
  --ink-light: #948881;
  --border: #E8DEC8;
  --border-light: #F2EADF;

  /* Elevation & Shadows */
  --shadow-sm: 0 4px 12px rgba(74, 53, 37, 0.04);
  --shadow-md: 0 10px 30px rgba(74, 53, 37, 0.07);
  --shadow-lg: 0 20px 45px rgba(74, 53, 37, 0.12);

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Typography */
  --font-family: 'Outfit', 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* Reset Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-main);
  color: var(--ink);
  font-family: var(--font-family);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Floating Toy Shapes Background Canvas - Positioned BEHIND all content */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* Ensure all page sections sit above the canvas background */
body > *:not(#bg-canvas):not(.wa-float-circle):not(.cart-drawer):not(.drawer-backdrop) {
  position: relative;
  z-index: 2;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
}

/* FLOATING CIRCULAR WHATSAPP ICON BADGE */
.wa-float-circle {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45) !important;
  z-index: 99999 !important;
  text-decoration: none !important;
  pointer-events: auto !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.wa-float-circle:hover {
  transform: scale(1.1) translateY(-4px) !important;
  box-shadow: 0 16px 35px rgba(37, 211, 102, 0.6) !important;
  color: #FFFFFF !important;
}

@media (max-width: 600px) {
  .wa-float-circle {
    width: 52px !important;
    height: 52px !important;
    right: 18px !important;
    bottom: 18px !important;
  }
}