body {
     font-family: 'Inter', sans-serif;
     background-color: #fafafa;
     color: #171717;
 }

 /* Custom Selection */
 ::selection {
     background-color: #0a545f;
     color: white;
 }

 /* Smooth underline animation */
 .nav-link {
     position: relative;
 }

 .nav-link::after {
     content: '';
     position: absolute;
     width: 0;
     height: 1px;
     bottom: -2px;
     left: 0;
     background-color: #B45309;
     transition: width 0.3s ease;
 }

 .active {
     color: #5cacc4 !important;
     font-weight: bolder;
 }

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

 /* Fade up animation */
 .fade-up {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s ease, transform 0.8s ease;
 }

 .fade-up.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Stagger delays */
 .delay-100 {
     transition-delay: 100ms;
 }

 .delay-200 {
     transition-delay: 200ms;
 }

 .delay-300 {
     transition-delay: 300ms;
 }

 /* Subtle grain texture */
 .grain::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0.03;
     pointer-events: none;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
 }

 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
 }

 ::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 ::-webkit-scrollbar-thumb {
     background: #d1d5db;
     border-radius: 4px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: #9ca3af;
 }

 /* Hero diagonal accent */
 .diagonal-accent {
     clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
 }

 /* remove estilos default do Leaflet para divIcon */
 .fluxisol-marker {
     background: transparent;
     border: none;
 }

 .pin {
     position: relative;
     width: 64px;
     height: 78px;
 }

 /* “medalhão” com o logo */
 .badge {
     width: 64px;
     height: 64px;
     border-radius: 999px;
     background: #ffffff;
     box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
     border: 3px solid rgba(12, 102, 110, .35);
     display: grid;
     place-items: center;
     overflow: hidden;
 }

 .badge img {
     width: 80%;
     height: 80%;
     object-fit: contain;
     display: block;
 }

 /* pontinha do pin */
 .tip {
     position: absolute;
     left: 50%;
     bottom: 2px;
     width: 14px;
     height: 14px;
     background: #ffffff;
     transform: translateX(-50%) rotate(45deg);
     border-right: 3px solid rgba(12, 102, 110, .20);
     border-bottom: 3px solid rgba(12, 102, 110, .20);
     box-shadow: 6px 6px 16px rgba(0, 0, 0, .12);
 }

 .hero-slider {
     position: relative;
     width: 100%;
     height: 600px;
     overflow: hidden;
     border-radius: 0;
 }

 .hero-slider-track {
     display: flex;
     height: 100%;
     transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .hero-slide {
     min-width: 100%;
     height: 100%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }

 .hero-slide::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(0, 80, 80, 0.65) 0%, rgba(0, 59, 59, 0.55) 100%);
     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     text-align: center;
     color: white;
     max-width: 900px;
     padding: 0 2rem;
     animation: slideInUp 0.8s ease-out;
 }

 @keyframes slideInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .slider-controls {
     position: absolute;
     bottom: 2rem;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     display: flex;
     gap: 1rem;
     align-items: center;
 }

 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.5);
     cursor: pointer;
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }

 .slider-dot.active {
     background: #0FAEAE;
     width: 32px;
     border-radius: 6px;
     box-shadow: 0 0 20px rgba(15, 174, 174, 0.6);
 }

 .slider-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.15);
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     transition: all 0.3s ease;
     backdrop-filter: blur(4px);
 }

 .slider-arrow:hover {
     background: rgba(15, 174, 174, 0.3);
     border-color: #0FAEAE;
     box-shadow: 0 0 20px rgba(15, 174, 174, 0.4);
 }

 .slider-arrow.prev {
     left: 2rem;
 }

 .slider-arrow.next {
     right: 2rem;
 }

 @media (max-width: 768px) {
     .hero-slider {
         height: 400px;
     }

     .slider-arrow {
         width: 40px;
         height: 40px;
     }

     .slider-arrow.prev {
         left: 0.5rem;
     }

     .slider-arrow.next {
         right: 0.5rem;
     }
 }

 #map {
     height: 100%;
     width: 100%;
 }