:root {
  /* ===================== */
  /*  PALETA DE COLORES   */
  /* ===================== */
  /* Color corporativo principal */
  --vPrimaryColor: #67493e; /* Marrón industrial, corporativo */
  /* Derivados del color principal */
  --vPrimaryDark: #4d362d;
  --vPrimaryLight: #8a6a5a;

  /* Secundarios inspirados en reciclaje y tecnología */
  --vSecondaryColor: #3e6749; /* Verde reciclaje */
  --vSecondaryDark: #2d4d36;
  --vSecondaryLight: #5a8a6a;

  /* Colores de acento */
  --vAccentColor: #fdc54f; /* Amarillo para destacar */
  --vAccentLight: #ffe6a1;
  --vAccentDark: #b38e2e;

  /* Neutros y fondos */
  --vBg: #f9f9f9;
  --vBgAlt: #f1edea;
  --vSurface: #fff;
  --vBorder: #e0d7d2;

  /* Texto */
  --vTextColor: #222;
  --vTextLight: #fff;
  --vTextMuted: #7a6e66;

  /* Estados */
  --vSuccessColor: #5cb85c;
  --vErrorColor: #d9534f;
  --vWarningColor: #fdc54f;
  --vInfoColor: #5b61a9;
  
  /* Estados con alias para compatibilidad */
  --vSuccess: #5cb85c;
  --vError: #d9534f;
  --vWarning: #fdc54f;
  --vInfo: #5b61a9;
  
  /* Texto secundario */
  --vTextSecondary: #7a6e66;
  --vTextPrimary: #222;
  
  /* Hover states */
  --vHover: rgba(103, 73, 62, 0.1);

  /* ===================== */
  /*   PARÁMETROS GLOBALES */
  /* ===================== */
  --vMaxWidth: 1600px;
  --vContainerPadding: 1.5rem;

  /* Tipografía */
  --vMainFont: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --vBaseFontSize: 16px;
  --vHeadingFontWeight: 600;

  /* Espaciado */
  --vGap: 1.5rem;
  --vSectionPadding: 2.5rem;
  --vBorderRadius: 8px;
  --vBoxShadow: 0 2px 8px rgba(103, 73, 62, 0.08);

  /* Breakpoints */
  --vBreakpointMobile: 600px;
  --vBreakpointTablet: 992px;

  /* ===================== */
  /*   SLIDER VARIABLES   */
  /* ===================== */
  --vSlideGap: 1rem;
  --vSlideRatio: 16/9;
  --vSlideScrollSnap: start;
  --vNavSize: 12px;
  --vNavColor: #ccc;
  --vNavColorActive: #67493e;
}

/* Media queries base */
@media (max-width: 600px) {
  :root {
    --vSectionPadding: 1rem;
    --vContainerPadding: 0.5rem;
  }
}

@media (max-width: 992px) {
  :root {
    --vSectionPadding: 1.5rem;
    --vContainerPadding: 1rem;
  }
}