/* ===== BASE & ANIMATIONS ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

@keyframes scroll-indicator {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.animate-scroll-indicator {
  animation: scroll-indicator 1.5s ease-in-out infinite;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }

/* ===== NAVBAR ===== */
#navbar {
  background: transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

#navbar.scrolled {
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

/* ===== MOBILE MENU ===== */
#mobile-menu {
  animation: fade-in 0.3s ease;
}

.mobile-link {
  display: block;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mobile-link:last-child { border-bottom: none; }

/* ===== HERO ===== */
#inicio {
  position: relative;
}

#inicio::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bg-dark), transparent);
  pointer-events: none;
}

/* ===== SECTION DIVIDERS ===== */
section::before {
  content: '';
  display: block;
}

/* ===== SERVICE CARDS ===== */
.group:hover .group-hover\:bg-terracotta-500\/20 {
  background: rgba(217, 79, 40, 0.2);
}

.group:hover .group-hover\:bg-sand-500\/20 {
  background: rgba(228, 174, 78, 0.2);
}

/* ===== INPUT FOCUS ===== */
input:focus, textarea:focus {
  border-color: rgba(217, 79, 40, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(217, 79, 40, 0.1) !important;
}

/* ===== BACK TO TOP ===== */
#back-to-top.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .font-display { font-size: clamp(2rem, 8vw, 3rem); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #inicio { padding-top: 6rem; }
}

/* ===== IMAGE HOVER ===== */
img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== SMOOTH SCROLL OFFSET ===== */
section[id] {
  scroll-margin-top: 80px;
}

/* ===== SELECTION ===== */
::selection {
  background: rgba(217, 79, 40, 0.3);
  color: #f5f0eb;
}