:root {
  --color-primary:        #ff0d00;
  --color-primary-hover:  #ff0000;
  --color-primary-dark:   rgba(253, 13, 0, 0.7);
  --color-primary-muted:  #ff0d00cc;
  --color-primary-border: #ef4444;
  --color-primary-dark2:  #b91c1c;
  --color-primary-deep:   #991b1b;

  --color-white:          #ffffff;
  --color-bg:             #f3f4f6;
  --color-footer-bg:      #000000;
  --color-text:           #1a1a1a;
  --color-text-body:      #404141;
  --color-text-muted:     #9ca3af;
  --color-overlay-nav:    rgba(255, 13, 0, 0.92);

  --font-main: 'Onest', system-ui, sans-serif;

  /* ── Logo hero (modifica este valor para agrandar/achicar) ── */
  --hero-logo-size: 360px;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 48px rgba(0,0,0,0.13);
  --shadow-red: 0 8px 32px rgba(255,13,0,0.28);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  --nav-height:      70px;
  --container-max:   1400px;

  --z-nav:     100;
  --z-overlay: 200;

  --entry-offset: -40px;
  --cover-offset:  40px;
}

@media (min-width: 1400px) {
  :root {
    --entry-offset: -100px;
    --cover-offset:  100px;
  }
}