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

:root {
   --primary: #1B4E9D;
   --primary-light: #F8FBFF;
   --primary-lighter:#E8EDF5;
   --secondary: #F58B11;
   --secondary-dark: #D97706;
   --secondary-light: #FEF3E7;
   --secondary-lighter: #FFFAF4;
   --footer: #B8C8E1;
   --texto: #596578;
   --black: #000000;
   --gray: #555555;
   --boder: #DCDCDC;
   --input-form: #98A4B0;
   --dark: #0D4C84;
   --light: #F7F7F7;
   --white: #ffffff;
   --scroll-button: #F58B11;
}

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

html, body {
   min-height: 100vh;
   min-height: 100dvh;
   color: var(--gray);
   background-color: var(--white);
   font-family: "ff-din-paneuropean", sans-serif;
}

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

/* Colors */

.text-primary {color: var(--primary) !important;}
.text-primary-light {color: var(--primary-light) !important;}
.text-primary-dark {color: var(--primary-dark) !important;}
.text-secondary {color: var(--secondary) !important;}
.text-textos {color: var(--texto) !important;}
.text-footer {color: var(--footer) !important;}
.text-secondary-light {color: var(--secondary-light) !important;}

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

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

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

/* Fonts */

.fs-7 {font-size: .95rem;}
.fs-8 {font-size: .8rem;}
.fs-75 {font-size: .75rem;}
.fs-9 {font-size: .7rem;}
.fs-hero {font-size: clamp(1.5rem, 4vw, 3.75rem) !important;}
.fs-title {font-size: clamp(1.25rem, 3vw, 3.125rem) !important;}

.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;}

/* 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;
}

.cursor-pointer {
   cursor: pointer;
}

/* scroll button */

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

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

/******************************************/
/** Navbar                               **/
/******************************************/

.logo-nav img{
   width: 218px;
   height: auto;
}
@media(max-width: 575.98px){
   .logo-nav img{
      width: 150px !important;
   }
}


#mainNavbar{
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   z-index: 1015;
   padding: 32px 0 0 0;
   transition: all 0.3s ease-out;
}

#mainNavbar.hide{
   opacity: 0;
}


#mainNavbar .navbar-nav .nav-item {
   padding: 18px 0;
}

#mainNavbar.navbar-shrink, #mainNavbar:has(#search-dropdown.show){
   opacity: 1;
   padding: 16px 0 8px 0 !important;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) !important;
}

.navbar-bg {
   position: absolute;
   inset: 0;
   background: url('/img/temp/navbar.png') center/cover no-repeat;
   opacity: 0;
   transition: opacity 0.5s ease;   /* ← this fades smoothly */
   z-index: -1;
}

#mainNavbar.navbar-shrink .navbar-bg, #mainNavbar.hidden .navbar-bg, #mainNavbar:has(#search-dropdown.show) .navbar-bg {
   opacity: 1;
}

/* Dropdown */

.navbar-dropdown-menu {
   min-width: 300px;
}
.dropdown-menu {
   transition: none;
   opacity: 0;
   transform: translateY(-10px);
   transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.4,0,.2,1);
   display: block !important;
   pointer-events: none;
   z-index: 1012;
}
.dropdown.show .dropdown-menu,
.dropdown-menu.show {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

/* Dropdown link hover animation */
.nav-dropdown-link .nav-arrow {
   transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-dropdown-link:hover .nav-arrow {
   opacity: 0;
   transform: translateX(30px);
}
.nav-dropdown-link span {
   display: inline-block;
   transition: transform 0.3s ease;
}
.nav-dropdown-link:hover span {
   transform: translateX(15px);
}

/* Custom dropdown detail*/
.dropdown-sistema-custom {
   position: relative;
   height: 17px;
   background: linear-gradient(90deg,  var(--secondary) 10px, transparent 10px 100%);
}

/* dropdown search */
.dropdown-search { 
   pointer-events: none;
   width: 100%;
   opacity: 0; 
   transform: translateY(-10px);
   transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.4,0,.2,1);
   top: 100%; left: 0; z-index: 1011;
}
.dropdown-search.show { 
   pointer-events: all;
   opacity: 1 !important; 
   transform: translateY(0);
}

#search-input{
   color: var(--texto);
}

.nav-item button[aria-expanded="true"] svg {
   transform: rotate(180deg);
   transition: 0.3s;
}

.navbar-mobile .nav-item {
   border-bottom: 1px solid #eee;
}


/******************************************/ 
/** video                                **/
/******************************************/

.video-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 1;
   pointer-events: none;
   overflow: hidden !important;
}
.video-wrapper iframe {
   width: 100vw;
   height: 56.25vw;
   min-height: 100vh;
   min-width: 177.77vh;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.video-wrapper-section {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 1;
   pointer-events: none;
   overflow: hidden !important;
}

.video-wrapper-section iframe {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}




/******************************************/
/** Footer                               **/
/******************************************/

.footer-link{
   color: var(--footer);
   text-decoration: none;
   transition: color 0.3s ease;

}


.footer-link:hover{
   color: var(--white) !important;
}


/******************************************/
/** Gallery                              **/
/******************************************/

.gallery-item {
   cursor: pointer;
}
.gallery-thumb {
   display: block;
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   transition: transform 0.3s ease, filter 0.3s ease;
}
.gallery-item:hover .gallery-thumb {
   transform: scale(1.04);
   filter: brightness(0.85);
}

.gallery-badge {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 60px;
   height: 60px;
   background-color: var(--secondary);
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
}


/******************************************/
/** Buttons                              **/
/******************************************/
.btn-search svg{
   position: relative;
   z-index: 2;
   transition: color 0.3s;
}

.btn-search::before{
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   background: white;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   transition: width 0.4s ease, height 0.4s ease;
}

.btn-search:hover::before, #mainNavbar:has(#search-dropdown.show ) .btn-search::before{
   width: 250%;
   height: 250%;
}

.btn-search:hover svg, #mainNavbar:has(#search-dropdown.show ) .btn-search svg{
   color: black;
}

.btn-search {
   position: relative;
   border: 1px solid var(--white);
   background-color: transparent;
   overflow: hidden;
   padding: 16px;
   color: var(--white);
}

.btn-secondary{
   color: var(--white);
   border: 1px solid var(--secondary) !important;
   background-color: var(--secondary);
   padding: 15px 30px;
   border-radius: 0;
}

.btn-secondary:hover, .btn-secondary:focus {
   border-color: var(--secondary-dark) !important;
   background-color: var(--secondary-dark) !important;
   color: var(--white) !important;
}

.btn-outline-secondary {
   color: var(--secondary);
   border: 1px solid var(--secondary) !important;
   background-color: transparent;
   padding: 15px 30px;
   border-radius: 0 !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
   background-color: var(--secondary) !important;
   color: var(--white) !important;
}

.btn-pagination {
   width: 44px;
   height: 44px;
   border-radius: 4px;
   border: none;
   background: var(--light);
   color: var(--texto);
   font-size: 14px;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
}
.btn-pagination:hover, .btn-pagination:focus {
   background: #e9ecef;
   transform: translateY(-1px);
}
.btn-pagination.active, .btn-pagination:active {
   background: var(--secondary);
   color: white;
   box-shadow: 0 4px 12px rgba(216, 109, 37, 0.3);
   font-weight: 600;
}
/*****************************************/
/** Text                                **/
/*****************************************/

.content-text ul {
   list-style: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgNiAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiBzdHlsZT0iZmlsbDojZjU4YjExOyIvPjwvc3ZnPg==');
   
}
.content-text ul li{
   margin-bottom: 2px;
}

.padding-advantages {
   padding: 130px 0;
}
/*****************************************/
/** Border                              **/
/*****************************************/


.border-primary-light{
   border: 2px solid var(--primary-light) !important;
}
.border-secondary-light{
   border: 2px solid var(--secondary-lighter) !important;
}


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


.form-control,
.input-group {
   border-radius: 0;
   border: 1px solid var(--boder);
}
.form-select {
   border-radius: 0;
   color: var(--secondary);
   border: 1px solid var(--secondary);
   padding: 15px 30px;
   background-color: transparent;
   background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.43057 8.51192C4.70014 8.19743 5.17361 8.161 5.48811 8.43057L12 14.0122L18.5119 8.43057C18.8264 8.16101 19.2999 8.19743 19.5695 8.51192C19.839 8.82642 19.8026 9.29989 19.4881 9.56946L12.4881 15.5695C12.2072 15.8102 11.7928 15.8102 11.5119 15.5695L4.51192 9.56946C4.19743 9.29989 4.161 8.82641 4.43057 8.51192Z' fill='%23F58B11'/%3e%3c/svg%3e");
   background-size: 24px 24px;
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
}

.form-select:focus {
   box-shadow: none;
   border-color: var(--secondary);
   background-color: transparent;
}

.form-select option {
   color: var(--texto);
}



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

.input-group.disabled,
.form-control:disabled {
	border-color: var(--border) !important;
	background-color: var(--border) !important;
}

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

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

.form-check-input:focus {
   box-shadow: none;
   border-color: var(--border) !important;
}

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


/******************************************/
/** Accordion                            **/
/******************************************/

.accordion-item {
   border: none !important;
   background: transparent !important;
}

.accordion-button {
   text-transform: uppercase;
   border-radius: 0 !important;
   border: none !important;
   background: transparent !important;
   box-shadow: none !important;
   font-weight: 700;
   border-bottom: 1px solid #F0F0F0 !important;
}

.accordion-button:focus {
   box-shadow: none !important;
}

.accordion-button::after {
   color: var(--primary) !important;
}

.accordion-button:not(.collapsed)::after {
   color: var(--secondary) !important;
}

.accordion-body {
   background: transparent !important;
   border: none !important;
}