@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    --color-main: #FFFFFF;

    /* NEUTRAL */
    --color-text-main: #0F172A;
    --color-text-secondary: #334155;
    --color-border: #E5E7EB;
    --color-background-alternative: #F8FAFC;

    /* MAIN */
    --color-primary: #045182;
    --color-secondary: #3B82F6;
    --color-header: #033A5E;
    --color-active-links: #0A6FB5;
    --color-background-secondary: #D6EAF7;

    /* ACCENT */
    --color-accent: #4AB2EC;
    --color-accent-cta:#2FA4E7;
    --color-accent-hover: #7CCAF3;
    --color-accent-info: #E9F6FD;

    --color-accept:#22C55E;
    --color-warning:#F59E0B;
    --color-error:#EF4444;
}

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 80px;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text-main);
    /* Gris oscuro para el texto */
    background-color: var(--color-main);
}

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

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

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

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

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

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

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

.errorBox-color {
    color: var(--color-error);
}

.shadow-custom {
    box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.1), 0 4px 6px -2px rgba(30, 58, 138, 0.05);
}

.logotype {
    width: 180px;
    height: auto;
    display: block;
}

.choose-card {
    width: 600px;
}

.nav-link {
  position: relative;
  color: #1e293b; /* Slate-800 */
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.3s ease;
  padding: 0.5rem 0;
}

/* Cambio de color al hacer hover */
.nav-link:hover {
  color: var(--color-active-links);
}
/* Efecto de línea inferior (subrayado elegante) */
.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--color-active-links); /* El color de tu marca */
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}