:root {
    --color-primary: #2e4580;
    --color-primary-hover: #212f54;
    --color-secondary: #19b3e6;
    --color-secondary-hover: #1a95bd;
    --color-tertiary: #0b82cd;
    --color-tertiary-hover: #0a5e92;
    --color-quaternary: #2e4593;
    --color-quaternary-hover: #202f61;
    --bg-gray-1: #dcd7d72b ;
    --bg-gray-2: #dcd7d74d;
    --bg-gray-3: #dcd7d799;
    --color-rgb-primary: 223, 232, 246;
    --color-rgb-secondary: 76, 76, 76;
    --color-rgb-tertiary: 65, 97, 145;

    --font-principal: "Source Sans 3", sans-serif;
}

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

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

.text-tertiary {
    color: var(--color-tertiary) !important;
}

.text-quaternary {
    color: var(--color-quaternary) !important;
}

.btn-primary {
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover {
    color: #fff !important;
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn-secondary {
    color: #fff !important;
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-secondary:hover {
    color: #fff !important;
    background-color: var(--color-secondary-hover) !important;
    border-color: var(--color-secondary-hover) !important;
}

.btn-tertiary {
    color: #fff !important;
    background-color: var(--color-tertiary) !important;
    border-color: var(--color-tertiary) !important;
}

.btn-tertiary:hover {
    color: #fff !important;
    background-color: var(--color-tertiary-hover) !important;
    border-color: var(--color-tertiary-hover) !important;
}

.btn-quaternary {
    color: #fff !important;
    background-color: var(--color-quaternary) !important;
    border-color: var(--color-quaternary) !important;
}

.btn-quaternary:hover {
    color: #fff !important;
    background-color: var(--color-quaternary-hover) !important;
    border-color: var(--color-quaternary-hover) !important;
}

/**/
.btn-primary-a {
    background-color: var(--color-primary);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-primary-a:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: white;
}

/* t: Transform */
.btn-primary-t {
    background-color: var(--color-primary);
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: white;
    border: none;
}

.btn-primary-t:hover {
    background-color: var(--color-primary);
    transform: scale(1.05);
    color: white;
}

.btn-secondary-t {
    background-color: var(--color-secondary);
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: white;
    border: none;
}

.btn-secondary-t:hover {
    background-color: var(--color-secondary);
    transform: scale(1.05);
    color: white;
}

.btn-tertiary-t {
    background-color: var(--color-tertiary);
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: white;
    border: none;
}

.btn-tertiary-t:hover {
    background-color: var(--color-tertiary);
    transform: scale(1.05);
    color: white;
}

.btn-quaternary-t {
    background-color: var(--color-quaternary);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-quaternary-t:hover {
    background-color: var(--color-quaternary);
    transform: scale(1.05);
}

/*
tc
t: Transform
c: con color diferente en el hover
*/
.btn-primary-tc {
    background-color: var(--color-primary);
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: white;
    border: none;
}

.btn-primary-tc:hover {
    background-color: var(--color-primary-hover);
    transform: scale(1.05);
    color: white;
}

.btn-secondary-tc {
    background-color: var(--color-secondary);
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: white;
    border: none;
}

.btn-secondary-tc:hover {
    background-color: var(--color-secondary-hover);
    transform: scale(1.05);
    color: white;
}

.btn-tertiary-tc {
    background-color: var(--color-tertiary);
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: white;
    border: none;
}

.btn-tertiary-tc:hover {
    background-color: var(--color-tertiary-hover);
    transform: scale(1.05);
    color: white;
}

.btn-quaternary-tc {
    background-color: var(--color-quaternary);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-quaternary-tc:hover {
    background-color: var(--color-quaternary-hover);
    transform: scale(1.05);
}

/* Background color */
.bg-primary {
    background-color: var(--color-primary) !important;
}

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

.bg-tertiary {
    background-color: var(--color-tertiary) !important;
}

.bg-quaternary {
    background-color: var(--color-quaternary) !important;
}

.bg-gray-1 {
    background-color: var(--bg-gray-1) !important;
}

.bg-gray-2 {
    background-color: var(--bg-gray-2) !important;
}

.bg-gray-3 {
    background-color: var(--bg-gray-3) !important;
}

/* outline: con bordes de color y fondo transparente */
.btn-primary-outline {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    background-color: transparent;
    transition: all 0.3s ease;
    font-weight: 600;
    border-radius: 4px;
}

.btn-primary-outline:hover {
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
}

.btn-secondary-outline {
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    background-color: transparent;
    transition: all 0.3s ease;
    font-weight: 600;
    border-radius: 4px;
}

.btn-secondary-outline:hover {
    background-color: var(--color-secondary);
    color: white;
    text-decoration: none;
}

.btn-tertiary-outline {
    color: var(--color-tertiary);
    border: 1px solid var(--color-tertiary);
    background-color: transparent;
    transition: all 0.3s ease;
    font-weight: 600;
    border-radius: 4px;
}

.btn-tertiary-outline:hover {
    background-color: var(--color-tertiary);
    color: white;
    text-decoration: none;
}

.btn-quaternary-outline {
    color: var(--color-quaternary);
    border: 1px solid var(--color-quaternary);
    background-color: transparent;
    transition: all 0.3s ease;
    font-weight: 600;
    border-radius: 4px;
}

.btn-quaternary-outline:hover {
    background-color: var(--color-quaternary);
    color: white;
    text-decoration: none;
}

/*
 * ht: hover especifico a un texto
 */
.primary-ht:hover {
    color: var(--color-quaternary) !important;
}

.secondary-ht:hover {
    color: var(--color-quaternary) !important;
}

.tertiary-ht:hover {
    color: var(--color-quaternary) !important;
}

.quaternary-ht:hover {
    color: var(--color-quaternary) !important;
}

/*
 * Title format __
 */
.title-format {
    position: relative;
    font-family: var(--font-principal);
    font-weight: 700;
    color: var(--color-tertiary);
    text-align: center;
    margin-bottom: 50px;
    padding: 0 15px 15px;
    letter-spacing: 1px;
    display: inline-block;
  }

  .title-format::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 3px;
    background: var(--color-tertiary);
    bottom: 0;
    left: 50%;
    transform: translateX(-50px);
  }

  .title-format::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 3px;
    background: var(--color-tertiary);
    bottom: 0;
    left: 50%;
    transform: translateX(10px);
  }



/* Sistema de espaciado extendido (0-10) */

/* Padding (relleno) */
/* Padding Top (pt) */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pt-6 { padding-top: 3.5rem !important; }
.pt-7 { padding-top: 4rem !important; }
.pt-8 { padding-top: 4.5rem !important; }
.pt-9 { padding-top: 5rem !important; }
.pt-10 { padding-top: 5.5rem !important; }

/* Padding Bottom (pb) */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pb-6 { padding-bottom: 3.5rem !important; }
.pb-7 { padding-bottom: 4rem !important; }
.pb-8 { padding-bottom: 4.5rem !important; }
.pb-9 { padding-bottom: 5rem !important; }
.pb-10 { padding-bottom: 5.5rem !important; }

/* Padding Left (ps - start) */
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }
.ps-6 { padding-left: 3.5rem !important; }
.ps-7 { padding-left: 4rem !important; }
.ps-8 { padding-left: 4.5rem !important; }
.ps-9 { padding-left: 5rem !important; }
.ps-10 { padding-left: 5.5rem !important; }

/* Padding Right (pe - end) */
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }
.pe-6 { padding-right: 3.5rem !important; }
.pe-7 { padding-right: 4rem !important; }
.pe-8 { padding-right: 4.5rem !important; }
.pe-9 { padding-right: 5rem !important; }
.pe-10 { padding-right: 5.5rem !important; }

/* Padding X (px - horizontal) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.px-6 { padding-left: 3.5rem !important; padding-right: 3.5rem !important; }
.px-7 { padding-left: 4rem !important; padding-right: 4rem !important; }
.px-8 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
.px-9 { padding-left: 5rem !important; padding-right: 5rem !important; }
.px-10 { padding-left: 5.5rem !important; padding-right: 5.5rem !important; }

/* Padding Y (py - vertical) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.py-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-8 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.py-9 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-10 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }

/* Padding all sides (p) */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.p-6 { padding: 3.5rem !important; }
.p-7 { padding: 4rem !important; }
.p-8 { padding: 4.5rem !important; }
.p-9 { padding: 5rem !important; }
.p-10 { padding: 5.5rem !important; }

/* Margin (margen) */
/* Margin Top (mt) */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-6 { margin-top: 3.5rem !important; }
.mt-7 { margin-top: 4rem !important; }
.mt-8 { margin-top: 4.5rem !important; }
.mt-9 { margin-top: 5rem !important; }
.mt-10 { margin-top: 5.5rem !important; }
.mt-auto { margin-top: auto !important; }

/* Margin Bottom (mb) */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-6 { margin-bottom: 3.5rem !important; }
.mb-7 { margin-bottom: 4rem !important; }
.mb-8 { margin-bottom: 4.5rem !important; }
.mb-9 { margin-bottom: 5rem !important; }
.mb-10 { margin-bottom: 5.5rem !important; }
.mb-auto { margin-bottom: auto !important; }

/* Margin Left (ms - start) */
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-6 { margin-left: 3.5rem !important; }
.ms-7 { margin-left: 4rem !important; }
.ms-8 { margin-left: 4.5rem !important; }
.ms-9 { margin-left: 5rem !important; }
.ms-10 { margin-left: 5.5rem !important; }
.ms-auto { margin-left: auto !important; }

/* Margin Right (me - end) */
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-6 { margin-right: 3.5rem !important; }
.me-7 { margin-right: 4rem !important; }
.me-8 { margin-right: 4.5rem !important; }
.me-9 { margin-right: 5rem !important; }
.me-10 { margin-right: 5.5rem !important; }
.me-auto { margin-right: auto !important; }

/* Margin X (mx - horizontal) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.mx-6 { margin-left: 3.5rem !important; margin-right: 3.5rem !important; }
.mx-7 { margin-left: 4rem !important; margin-right: 4rem !important; }
.mx-8 { margin-left: 4.5rem !important; margin-right: 4.5rem !important; }
.mx-9 { margin-left: 5rem !important; margin-right: 5rem !important; }
.mx-10 { margin-left: 5.5rem !important; margin-right: 5.5rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin Y (my - vertical) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-6 { margin-top: 3.5rem !important; margin-bottom: 3.5rem !important; }
.my-7 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.my-8 { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; }
.my-9 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.my-10 { margin-top: 5.5rem !important; margin-bottom: 5.5rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Margin all sides (m) */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.m-6 { margin: 3.5rem !important; }
.m-7 { margin: 4rem !important; }
.m-8 { margin: 4.5rem !important; }
.m-9 { margin: 5rem !important; }
.m-10 { margin: 5.5rem !important; }
.m-auto { margin: auto !important; }

/* Clases negativas de margen (para posicionamiento específico) */
.mt-n1 { margin-top: -0.25rem !important; }
.mt-n2 { margin-top: -0.5rem !important; }
.mt-n3 { margin-top: -1rem !important; }
.mt-n4 { margin-top: -1.5rem !important; }
.mt-n5 { margin-top: -3rem !important; }

.mb-n1 { margin-bottom: -0.25rem !important; }
.mb-n2 { margin-bottom: -0.5rem !important; }
.mb-n3 { margin-bottom: -1rem !important; }
.mb-n4 { margin-bottom: -1.5rem !important; }
.mb-n5 { margin-bottom: -3rem !important; }

.ms-n1 { margin-left: -0.25rem !important; }
.ms-n2 { margin-left: -0.5rem !important; }
.ms-n3 { margin-left: -1rem !important; }
.ms-n4 { margin-left: -1.5rem !important; }
.ms-n5 { margin-left: -3rem !important; }

.me-n1 { margin-right: -0.25rem !important; }
.me-n2 { margin-right: -0.5rem !important; }
.me-n3 { margin-right: -1rem !important; }
.me-n4 { margin-right: -1.5rem !important; }
.me-n5 { margin-right: -3rem !important; }

/* Clases personalizadas para max-height */
.max-h-25 { max-height: 25%; }
.max-h-50 { max-height: 50%; }
.max-h-75 { max-height: 75%; }
.max-h-100 { max-height: 100%; }

/* En píxeles */
.max-h-200 { max-height: 200px; }
.max-h-300 { max-height: 300px; }
.max-h-400 { max-height: 400px; }
.max-h-500 { max-height: 500px; }
.max-h-600 { max-height: 600px; }

.text-justify {
    text-align: justify !important;
}