/******************************************/
/** General                              **/
/******************************************/

:root {
   --primary: #212B46;
   --primary-dark: #1E2740;
   --secondary: #9F7D28;
   --secondary-dark: #8F7024;
   --texto: #212B4699;
   --body: #F8F9FA;
   --black: #000000;
   --gray: #555555;
   --light: #f2f2f2;
   --white: #ffffff;
   --scroll-button: #212B46;
   --texto-secondary: #F8F9FA99;
}

*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html, body {
   min-height: 100vh;
   min-height: 100dvh;
   color: var(--gray);
   background-color: var(--body);
   font-family: 'Satoshi', sans-serif;
}

/******************************************/
/** Helpers                              **/
/******************************************/

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

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

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

.border-primary{border: 1px solid var(--primary) !important;}
.border-secondary{border: 1px solid var(--secondary) !important;}
.hover\:bg-primary:hover {background-color: var(--primary) !important;}

/* Fonts */

.fm-fraunces {font-family: 'Fraunces', serif !important;}
.fm-satoshi {font-family: 'Satoshi', sans-serif !important;}

.fs-7 {font-size: .95rem;}
.fs-8 {font-size: .8rem;}
.fs-9 {font-size: .7rem;}

.fw-megabold {font-weight: 900 !important;}

/* Sizes */

.button {padding: 15px 25px;}

.w-fit {width: fit-content;}
.w-screen {width: 100vw; width: 100dvw;}
.h-screen {height: 100vh; height: 100dvh;}

.h-50vh {height: 50vh;}

.content-width {
   max-width: 90vw;
}

@media (min-width: 768px) {
   .content-width {
      max-width: 70vw;
   }
}

@media (min-width: 992px) {
   .content-width {
      max-width: 40vw;
   }
}

@media (min-width: 1200px) {
   .content-width {
      max-width: 30vw;
   }
}

/* footer */
.img-logo-footer {
   width: 200px;
}
@media (min-width: 992px) {
   .img-logo-footer {
      width: 281px;
   }
}


/* grid */
.grid-columns-2 {
   columns: 2; 
   column-gap: 3rem;
}

/* Read More */
.read-more-text.collapsed {
   max-height: 7.5em;
   overflow: hidden;
   position: relative;
}
.read-more-text {
   transition: max-height 0.3s;
}
@media (min-width: 768px) {
   .read-more-text.collapsed {
      max-height: none;
      overflow: visible;
   }
   .read-more-toggle {
      display: none;
   }
}

@media (max-width: 1200px) {
   .grid-columns-2 {
      columns: 1 !important;
   }
}

/* Components */


.icon-md {
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
}

.icon-lg {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
}

/* Animations */

.transition-03 {
   transition: all linear .3s;
   -o-transition: all linear .3s;
   -moz-transition: all linear .3s;
   -webkit-transition: all linear .3s;
}

/* Scroll Button */
#scroll-button {
   opacity: 0;
   transform: translateY(50px);
   right: 30px;
   bottom: 20px;
   z-index: 1101;
   transition: all 0.5s ease-out;
   border: 3px solid var(--white);
}

#scroll-button.show {
   opacity: 1;
   transform: translateY(0);
}

/* Navbar */
#mainNav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   z-index: 1030;
   background-color: none;
   transition: all 0.3s ease;
}


#mainNav.navbar-shrink {
   background-color: var(--white);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#mainNav.navbar-shrink.secondary {
   background-color: var(--primary-dark);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}


.margin-top-nav {
   margin-top: 120px;
}

#mainNav #navLogo{
   width: 150px;
}

@media (max-width: 599px) {
   #mainNav #navLogo{
      width: 120px;
   }
}

.container-fluid{
   max-width: 1920px !important;
}


/* Button Slider */
.slider-container {
   position: relative;
   display: inline-flex;
   gap: 0.5rem;
   padding: 0.5rem;
   border-radius: 1rem;
   border: 1px solid var(--primary);
   width: fit-content;
   max-width: 100%;
   overflow: hidden;
}

.btn-slide-background {
   position: absolute;
   top: 0.5rem;
   bottom: 0.5rem;
   left: 0.5rem;
   width: calc(50% - 0.25rem);
   background: var(--primary);
   border-radius: 0.75rem;
   transition: all 0.3s ease;
   z-index: 1;
   }

.btn-slide {
   position: relative;
   z-index: 2;
   padding: 0.75rem 1.25rem;
   border: none !important;
   color: var(--primary);
   background: transparent;
   white-space: nowrap; /* prevent text wrapping */
   flex-shrink: 0;      /* prevent shrinking */
}

.btn-slide.active {
   color: var(--white);
}

.btn-slide-white {
   position: relative;
   z-index: 2;
   padding: 0.75rem 1.25rem;
   border: none !important;
   color: var(--white) ;
   background: transparent;
   white-space: nowrap; /* prevent text wrapping */
   flex-shrink: 0;      /* prevent shrinking */
}

.btn-slide-white.active {
   color: var(--primary);
}

.btn-slide-secondary {
   position: relative;
   z-index: 2;
   padding: 0.75rem 1.25rem;
   border: none !important;
   color: var(--secondary) ;
   background: transparent;
   white-space: nowrap; /* prevent text wrapping */
   flex-shrink: 0;      /* prevent shrinking */
}

.btn-slide-secondary.active {
   color: var(--white);
}

/* Button Primary */
.btn-primary {
   background-color: var(--primary);
   border: none;
   color: var(--white) !important;
   transition: background-color 0.3s ease;
}
.btn-primary:hover, .btn-primary:focus {
   background-color: var(--primary-dark) !important;
}

.btn-light{
   background-color: var(--light);
   border: none;
   color: var(--black) !important;
   transition: background-color 0.3s ease;
}
.btn-light:hover, .btn-light:focus {
   background-color: #E0E0E0 !important;
}

/* Button Outline Primary */
.btn-outline-primary {
   background-color: transparent !important;
   border-color: var(--primary) !important;
   color: var(--primary) !important;
   transition: all 0.5s ease;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:checked {
   /* background-color: var(--primary) !important; */
   color: var(--white) !important; 
   box-shadow: 
      inset 215px 0 0 0 var(--primary);
}

/* Button Outline Secondary */
.btn-outline-secondary {
   background-color: transparent;
   border: 1px solid var(--secondary) ;
   color: var(--secondary) !important;
   transition: background-color 0.3s ease;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
   background-color: var(--secondary) !important;
   color: var(--white) !important;
}

/* Button Secondary */
.btn-secondary {
   background-color: var(--secondary);
   border: none;
   color: var(--white);
   transition: background-color 0.3s ease;
}
.btn-secondary:hover, .btn-secondary:focus {
   background-color: var(--secondary-dark) !important;
}

/* link selected */
.btn-link {
   color: var(--texto);
   font-weight: 400;
   transition: all 0.3s ease;
   text-decoration: none;
}
.btn-link:hover {
   color: var(--primary) !important;
   text-decoration: underline;
}
.btn-link.active, .btn-link:focus {
   color: var(--primary) !important;
   text-decoration: underline;
}

/******************************************/
/** Forms                                **/
/******************************************/

.form-select,
.form-control,
.input-group {
   border-radius: 8px;
   border: 1px solid #D9D9D9;
   background-color: transparent;
}

.input-group:active,
.input-group:focus,
.input-group:focus-within,
.form-select:active,
.form-select:focus,
.form-control:active,
.form-control:focus {
   box-shadow: none;
   border-color: var(--primary);
   background-color: transparent;
}

.input-group.disabled,
.form-control:disabled,
.form-select:disabled {
	border-color: #D9D9D9 !important;
	background-color: #D9D9D9 !important;
}

.form-check-input {
   min-width: 1em !important;
   min-height: 1em !important;
}

.form-check-input:checked {
   border-color: var(--primary) !important;
   background-color: var(--primary) !important;
}

.form-check-input:focus {
   box-shadow: none;
   border-color: #D9D9D9 !important;
}

::placeholder {
   opacity: 1;
   color: var(--gray) !important;
}
::-ms-input-placeholder {color: var(--gray) !important;}

/* Search Bar */
.search-bar .form-select {
   width: 190px;
   color: var(--white);
}
.search-bar .form-select option {
   color: var(--primary);
   background: var(--white);
}
.search-bar .form-select option:checked {
   color: var(--white);
   background: var(--primary);
}
.search-bar .form-select:invalid,
.search-bar .form-select:has(option[value=""]:checked) {
   color: #FFFFFF99;
}
.form-select:invalid,
.form-select:has(option[value=""]:checked) {
   color: #212B4699;
}

/* Custom select arrow */
.form-select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.353516 0.353516L6.35352 6.35352L12.3535 0.353516' stroke='currentColor' stroke-opacity='0.6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 12px;
   padding-right: 2.5rem;
   transition: transform 0.3s ease;
}
.search-bar .form-select{
   background-image: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.353516 0.353516L6.35352 6.35352L12.3535 0.353516' stroke='white' stroke-opacity='0.6'/%3E%3C/svg%3E");
}

.btn-check{
   background-color: transparent;
   border-color: var(--primary) !important;
   color: var(--primary) !important;
   transition: background-color 0.3s ease;
}

.btn-check:checked, .btn-check:active, .btn-check:focus, .btn-check.active, .btn-check:checked+.btn {
   background-color: var(--primary) !important;
   color: var(--white) !important;
}

/* Gradientes para cards de destaque */
.card-gradient {
   background-color: #212B46B5;
}

.card-col-hover:hover .card-gradient {
   background: linear-gradient(0deg, #212B46, #212B46);
   opacity: 0.9;
}


/* Double Slider */
.double-slider {
   position: relative;
   height: 5px;
   margin: 20px 0;
}
.slider-track {
   position: absolute;
   width: 100%;
   height: 5px;
   background: #D9D9D9;
   border-radius: 5px;
}
.slider-range {
   position: absolute;
   height: 5px;
   background: var(--primary);
   border-radius: 5px;
}
.slider-input {
   position: absolute;
   width: 100%;
   height: 5px;
   background: transparent;
   pointer-events: none;
   -webkit-appearance: none;
   appearance: none;
}
.slider-input::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 25px;
   height: 25px;
   background: var(--white);
   border: 9px solid var(--primary);
   border-radius: 50%;
   cursor: pointer;
   pointer-events: all;
   position: relative;
   z-index: 2;
}
.slider-input::-moz-range-thumb {
   width: 18px;
   height: 18px;
   background: var(--primary);
   border: 2px solid white;
   border-radius: 50%;
   cursor: pointer;
   pointer-events: all;
   position: relative;
   z-index: 2;
}