:root {

  /* MARCA */
  --color-primary: #1712AA;
  --color-primary-dark: #05043B;

  /* BASE */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F9FAFB;

  --color-text: #333333;
  --color-text-light: #FFFFFF;

  --color-border: #CCCCCC;
  --color-border-dark: rgba(255, 255, 255, 0.10);

  /* CAJAS */
  --color-box-bg: var(--color-bg);
  --color-box-bg-dark: var(--color-primary-dark);

  /* CONTEXTO CLARO */
  --bg-light: var(--color-bg-alt);
  --text-h2-light: var(--color-primary);
  --text-body-light: var(--color-primary-dark);
  --line-light: var(--color-border);

  /* CONTEXTO OSCURO */
  --bg-dark: var(--color-primary-dark);
  --text-h2-dark: var(--color-bg-alt);
  --text-body-dark: var(--color-border);
  --line-dark: var(--color-primary);

  /* CONTEXTO MEDIO */
  --bg-primary: var(--color-primary);
  --text-h2-primary: var(--color-text-light);
  --text-body-primary: var(--color-bg-alt);
  --line-primary: var(--color-primary-dark);

  /* HERO */
  --hero-bg: var(--color-primary-dark);
  --hero-h1: var(--color-text-light);
  --hero-h2: var(--color-bg-alt);
  --hero-body: var(--color-border);
  --hero-line: var(--color-border);

  /* BOTONES */
  --color-btn: var(--color-primary);
  --color-btn-hover: var(--color-primary-dark);
  --color-btn-alt: #FF5A2F;
  --color-btn-alt-hover: #CC3F1F;
--color-btn-green: #91ED0E;
--color-btn-green-hover: #5E990B;
  /* WHATSAPP */
  --color-whatsapp: #32CD32;
  --color-whatsapp-hover: #175E17;

  /* SOMBRAS */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.10);

  /* LAYOUT */
  --container-width: 1200px;
 
}



.cabeceraindex {
  background: var(--color-bg);
  padding: 20px;
  text-align: left;
}

.cabeceraindex ul {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.cabeceraindex a {
  color: var(--color-primary-dark);
  text-decoration: none;
}