@font-face {
  font-family: 'MEQANOR';
  src: url('../assets/fonts/MEQANOR.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* ── Paleta beige cálido y pronunciado ── */
  --bg:            #f2e8d4;
  --bg-section:    rgba(248, 242, 228, 0.96);
  --bg-alt:        rgba(238, 230, 212, 0.97);
  --surface:       rgba(255, 254, 248, 0.85);
  --surface-md:    rgba(255, 254, 250, 0.96);
  --border:        rgba(60, 50, 30, 0.11);
  --border-hover:  rgba(94, 160, 48, 0.45);

  /* ── Texto oscuro ── */
  --text:          #1c1a14;
  --text-muted:    rgba(28, 26, 20, 0.52);
  --text-faint:    rgba(28, 26, 20, 0.28);

  /* ── Marca ── */
  --green:         #5ea030;
  --green-light:   #7dc43f;
  --green-dim:     rgba(94, 160, 48, 0.12);
  --green-glow:    rgba(94, 160, 48, 0.25);

  /* ── Colores de productos / ositos ── */
  --coral:         #e85c50;
  --blue:          #4080e0;
  --yellow:        #e8b030;
  --lavender:      #9060cc;
  --mint:          #30b878;
  --pink:          #e04888;

  /* ── Pricing accents ── */
  --red:           #c02030;
  --red-dim:       rgba(192, 32, 48, 0.1);
  --purple:        #7030aa;
  --purple-dim:    rgba(112, 48, 170, 0.1);
  --amber:         #c07820;
  --amber-dim:     rgba(192, 120, 32, 0.1);

  /* ── Tipografía ── */
  --font-brand:    'MEQANOR', Georgia, serif;
  --font-display:  'Montserrat', system-ui, sans-serif;
  --font-body:     'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', monospace;

  /* ── Layout ── */
  --section-pad:   clamp(4.5rem, 9vw, 7rem);
  --container:     1100px;
  --gap:           clamp(0.875rem, 2vw, 1.25rem);
  --radius:        8px;
  --radius-sm:     4px;

  /* ── Movimiento ── */
  --ease:          cubic-bezier(0.2, 0.9, 0.3, 1);
  --dur:           0.3s;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}

img, video  { max-width: 100%; display: block; }
button      { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
a           { color: inherit; text-decoration: none; }
ul          { list-style: none; }
input       { font-family: inherit; }

em { font-style: italic; color: var(--green); }

::selection { background: var(--green); color: #fff; }

/* ── Foco visible para navegación con teclado (accesibilidad) ── */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}
/* No mostrar el anillo cuando se hace clic con el mouse (solo teclado) */
:focus:not(:focus-visible) { outline: none; }