/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container { max-width: 540px; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container { max-width: 720px; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container { max-width: 960px; }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

:root {
    --black: #272932;
    --white: #FFFFFF;
    --gray: #4D5B7C;
    --gray-filter: invert(33%) sepia(17%) saturate(999%) hue-rotate(184deg) brightness(96%) contrast(84%);
    --gray-2: #9DA6BD;
    --light-gray: #F3F6F8;
    --light-blue-1: #F4FAFF;
    --light-blue-2: #F7FBFF;
    --light-blue-3: #DEEBF7;

    --pri-color: #236FB3;
    --pri-color-filter: invert(38%) sepia(97%) saturate(1238%) hue-rotate(189deg) brightness(74%) contrast(83%);
    --pri-color-2: #277BC7;
    --light-pri-color: #AFD0EE;
    --light-pri-color-filter: invert(82%) sepia(14%) saturate(621%) hue-rotate(171deg) brightness(98%) contrast(91%);
    --lighter-pri-color: #CDE1F4;
    --dark-pri-color: #1F629E;
    --darker-pri-color: #18548B;
    --darker-pri-color-rgb: 24, 84, 139;

    --sec-color: #01805F;

    --stroke-color: #EDF2F7;
    --light-stroke-color: #F4F7FF;
    --dark-stroke-color: #D7DCEB;
    
    --text-color: var(--black);
    --text-color-filter: ;
    --light-text-color: var(--white);
    --light-text-color-filter: invert(100%);

    --bg-color: var(--white);
    --dark-bg-color: var(--light-gray);
    --darker-bg-color: var(--lighter-pri-color);
    --bg-color-1: var(--light-blue-1);
    --bg-color-2: var(--light-blue-2);
    --bg-color-3: var(--darker-pri-color);

    --danger-color: #ED555F;
    --light-danger-color: #FFD7D7;
    --danger-color-filter: invert(43%) sepia(27%) saturate(2759%) hue-rotate(321deg) brightness(99%) contrast(88%);
    --success-color: #7CBD8E;
    --light-success-color: #ECF7EF;
    --success-color-filter: invert(83%) sepia(29%) saturate(457%) hue-rotate(81deg) brightness(81%) contrast(84%);
    --warning-color: #EDB955;
    --light-warning-color: #FFFAE9;
    --warning-color-filter: invert(72%) sepia(53%) saturate(545%) hue-rotate(346deg) brightness(104%) contrast(86%);
    --alert-color: #7684CB;
    --light-alert-color: #E8EFF9;
    --alert-color-filter: invert(50%) sepia(58%) saturate(364%) hue-rotate(193deg) brightness(94%) contrast(90%);

    --navbar-height: 0;
    --navbar-sm-multiplier: 1;
}

* { box-sizing: border-box; padding: 0; margin: 0; scroll-margin-block-start: var(--navbar-height); scroll-margin-block-end: var(--navbar-height); }
html, body { max-width: 100vw; overflow-x: hidden; }
body { color: var(--text-color); background: var(--darker-pri-color); font-family: "EuclidCircularA"; }
img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.btn-type-1 { font-size: 1rem; display: inline-block; border: 1px solid var(--pri-color); color: var(--white); text-decoration: none; line-height: 1; padding: .5rem 1rem; border-radius: 0; background: var(--pri-color); transition: 0.4s; }
.btn-type-1:hover { background-color: var(--dark-pri-color); }
.btn-type-1 .arrow { position: relative; display: inline-block; margin-left: .5rem; }
.btn-type-1 .arrow img { vertical-align: baseline; height: .6rem; width: .6rem; filter: var(--light-text-color-filter); }
.btn-type-1 .arrow .head { transition: 0.3s; }
.btn-type-1:hover .arrow .head { transform: translateX(.2rem) scale(1.1); }

.btn-type-2 { font-size: 1rem; display: inline-block; border: 1px solid var(--white); color: var(--pri-color); text-decoration: none; line-height: 1; padding: .5rem 1rem; border-radius: 0; background: transparent; }
.btn-type-2:hover { color: var(--pri-color); }
.btn-type-2 .arrow { position: relative; display: inline-block; margin-left: .5rem; }
.btn-type-2 .arrow img { vertical-align: baseline; height: .6rem; width: .6rem; filter: var(--pri-color-filter); }
.btn-type-2 .arrow .head { transition: 0.3s; }
.btn-type-2:hover .arrow .head { transform: translateX(.2rem) scale(1.1); }

.btn-type-3 { font-size: 1rem; display: inline-block; border: 1px solid var(--white); color: var(--pri-color); text-decoration: none; line-height: 1; padding: .5rem 1rem; border-radius: 0; background: var(--white); transition: 0.4s; }
.btn-type-3:hover { background: var(--light-blue-3); }
.btn-type-3 .arrow { position: relative; display: inline-block; margin-left: .25rem; }
.btn-type-3 .arrow img { vertical-align: middle; height: .6rem; width: .6rem; filter: var(--pri-color-filter); }
.btn-type-3 .arrow .tail { position: absolute; top: 3.5px; }
.btn-type-3 .arrow .head { transition: 0.3s; }
.btn-type-3:hover .arrow .head { transform: translateX(.15rem); }

.btn-type-4 { font-size: 1rem; display: inline-block; border: 0; color: var(--white); text-decoration: underline; line-height: 1; padding: 0 .5rem; border-radius: 0; background: transparent; transition: 0.4s; }
.btn-type-4:hover { color: var(--dark-stroke-color); }

.btn-type-5 { font-size: 1rem; display: inline-block; border: 0; color: var(--text-color); text-decoration: none; line-height: 1; padding: 0; border-radius: 0; background: transparent; }
/* .btn-type-5:hover { color: var(--pri-color); } */
.btn-type-5 .arrow { position: relative; display: inline-block; margin-left: .5rem; }
.btn-type-5 .arrow img { vertical-align: baseline; height: .6rem; width: .6rem; filter: var(--text-color-filter); }
.btn-type-5 .arrow .head { transition: 0.3s; }
.btn-type-5:hover .arrow .head { transform: translateX(.2rem) scale(1.1); }

.btn-type-6 { font-size: 1rem; display: inline-block; border: 1px solid var(--light-blue-1); color: var(--pri-color); text-decoration: none; line-height: 1; padding: .5rem 1rem; border-radius: 0; background: var(--light-blue-1); transition: 0.4s; }
.btn-type-6:hover { background-color: var(--lighter-pri-color); border: 1px solid var(--lighter-pri-color); }

.btn-type-7 { font-size: 1rem; display: inline-block; border: 1px solid var(--lighter-pri-color); color: var(--text-color); text-decoration: none; line-height: 1; padding: 1rem; border-radius: 0; background: var(--lighter-pri-color); transition: 0.4s; }
.btn-type-7:hover:not([disabled]) { background-color: var(--light-pri-color); border: 1px solid var(--light-pri-color); }
.btn-type-7.active { border: 1px solid var(--pri-color)!important; color: var(--light-text-color)!important; background: var(--pri-color)!important; }

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .container { padding-right: calc(var(--bs-gutter-x) * var(--navbar-sm-multiplier)); padding-left: calc(var(--bs-gutter-x) * var(--navbar-sm-multiplier)); }
}

/* <a href="" class="btn-type-3 s-btn">
    Conoce más
    <span class="arrow">
        <img src="<? echo($path) ?>src/assets/icons/icon-arrow-tail.svg" alt="Go to tail" class="tail">
        <img src="<? echo($path) ?>src/assets/icons/icon-arrow-right.svg" alt="Go to" class="head">
    </span>
</a> */