:root {
  --primary-color: #096B68;
  --secondary-color: #129990;
  --accent-color: #90D1CA;
  --light-color: #FFFBDE;
  --dark-color: #064A47;
  --gradient-primary: linear-gradient(135deg, #129990 0%, #096B68 100%);
  --hover-color: #0A7B77;
  --background-color: #FCFCF8;
  --text-color: #2C3E50;
  --border-color: rgba(144, 209, 202, 0.3);
  --divider-color: rgba(18, 153, 144, 0.15);
  --shadow-color: rgba(9, 107, 104, 0.15);
  --highlight-color: #FF6B35;
  --main-font: 'Lora', serif;
  --alt-font: 'Lora', serif;
}

/* Patrón de fondo abstracto */
.bg-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(144, 209, 202, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(18, 153, 144, 0.08) 0%, transparent 50%),
    linear-gradient(45deg, rgba(9, 107, 104, 0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 251, 222, 0.3) 25%, transparent 25%);
  background-size: 120px 120px, 80px 80px, 40px 40px, 60px 60px;
  background-position: 0 0, 40px 40px, 0 0, 20px 20px;
}

/* Estilos para el menú hamburguesa sin JavaScript */
.menu-toggle {
  display: none;
}

.menu-toggle:checked+.mobile-menu {
  max-height: 300px;
  opacity: 1;
}

.mobile-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Estilos personalizados para componentes */
.custom-shadow {
  box-shadow: 0 10px 25px var(--shadow-color);
}

.custom-gradient {
  background: var(--gradient-primary);
}

.text-primary {
  color: var(--primary-color);
}

.text-secondary {
  color: var(--secondary-color);
}

.text-accent {
  color: var(--accent-color);
}

.text-highlight {
  color: var(--highlight-color);
}

.bg-primary {
  background-color: var(--primary-color);
}

.bg-secondary {
  background-color: var(--secondary-color);
}

.bg-accent {
  background-color: var(--accent-color);
}

.bg-light {
  background-color: var(--light-color);
}

.bg-dark {
  background-color: var(--dark-color);
}

.border-accent {
  border-color: var(--accent-color);
}

.hover-primary:hover {
  background-color: var(--hover-color);
  color: white;
}

/* Estilos de contraste para accesibilidad */
.high-contrast-bg {
  background-color: var(--dark-color);
  color: #FFFFFF;
}

.high-contrast-text {
  color: var(--dark-color);
  background-color: var(--light-color);
}

/* Animaciones suaves */
.smooth-transition {
  transition: all 0.3s ease;
}

/* Estilos para el test visual */
.test-question {
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, rgba(255, 251, 222, 0.8) 0%, rgba(144, 209, 202, 0.1) 100%);
}

.test-option {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.test-option:hover {
  background-color: var(--accent-color);
  color: var(--dark-color);
  transform: translateY(-2px);
}