body {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  overflow-x: hidden;
}

body.loaded {
  opacity: 1;
  visibility: visible;
}


/* Opcional: un pequeño efecto de "entrada" más elegante */
body {
  transform: translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

body.loaded {
  transform: translateY(0);
}

/* Grid background adaptado a fondos claros */
.hero-grid {
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}



/* Scroll-reveal animation */
.anim {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Elements that reveal on scroll start hidden */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Navbar scrolled state - CORREGIDO PARA MODO CLARO */
#navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}



/* Mobile menu open state */
#mobile-menu.open {
    transform: translateX(0);
}

/* Hamburger open animation */
#menu-toggle.open .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#menu-toggle.open .hamburger-line:nth-child(2) {
    opacity: 0;
}
#menu-toggle.open .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}



.portfolio-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

section[id] {
    scroll-margin-top: 64px;
}

#carousel-track {
    -ms-overflow-style: none;  /* IE y Edge */
    scrollbar-width: none;  /* Firefox */
}
#carousel-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari y Opera */
}

.text-brand{
  --tw-text-opacity: 1;
  color: rgb(107, 142, 50) !important;
}

.bg-brand{
    background-color:  rgb(107, 142, 50) !important;
}

/* Active nav link en modo claro */
.nav-link.active {
    color:  rgb(107, 142, 50); /* Color brand en lugar de blanco */
    font-weight: 600;
}

.form-input:focus {
    border-color: rgb(107, 142, 50);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.nav-link:hover {
  color: rgb(107, 142, 50) !important;
}

.btn-custom-hover:hover {
  border-color: rgb(107, 142, 50) !important;
  color: rgb(107, 142, 50) !important;
}