/* =======================================================
   🎨 PALETA DE COLORES PERSONALIZABLE – ResvisFactor
   ======================================================= */
:root {

  /* ================================
     🟢 OPCIONES BÁSICAS – Recomendado modificar
     ================================ */

  --color-text-dark:       #444444;   /* Texto general (párrafos, beneficios) */
  --color-title:           #0a3d62;   /* Títulos principales (H1, H2) */
  --color-subtitle:        #26a69a;   /* Subtítulos o frases destacadas */
  --color-accent:          #1e7e34;   /* Beneficios clave, etiquetas, énfasis */

  --color-primary:         #26a69a;   /* Color base del botón principal */
  --color-secondary: #00b894;  /* Color complementario al primario para gradientes */
  --color-primary-hover:   #1d8f84;   /* Hover del botón */
  --color-button-text:     #ffffff;   /* Texto dentro del botón */

  --color-focus:           #198754;   /* Borde al hacer focus en inputs */
  --color-placeholder:     #003366;   /* Texto placeholder en campos de formulario */
  --color-legal:           #888888;   /* Textos legales, secundarios */

  --color-border:          #d2f4ea;   /* Bordes claros de tarjetas, inputs o formularios */

  --color-acento:          #fbc531;   /* Amarillo para estrellas, íconos o badges */

  --color-bg-body:         #ffffff;   /* Fondo general de la página */
  --color-bg-light:        #f0fdfa;   /* Parte superior del fondo degradado */
  --color-bg-white:        #ffffff;   /* Parte inferior del fondo degradado */
  --color-bg-alt:          #f7fcfa;   /* Fondo para bloques alternos */
  --color-bg-gradient:     linear-gradient(to bottom, var(--color-bg-light), var(--color-bg-white)); /* Fondo con degradado suave */

  /* ================================
     ⚫ SOMBRAS INTERNAS – No modificar (uso técnico)
     ================================ */

  --shadow-soft:   0 6px 16px rgba(0, 0, 0, 0.06);   /* Sombra suave (tarjetas) */
  --shadow-hover:  0 8px 20px rgba(0, 0, 0, 0.08);   /* Sombra al hacer hover */
  --shadow-cta:    0 6px 14px rgba(38, 166, 154, 0.20); /* Sombra en botón principal */

}