/* styles.css - Levantamiento Topográfico Querétaro */
:root {
  --color-primary: #0F2840;      /* Color 1: Azul Principal Marino */
  --color-accent: #E65100;       /* Color 2: Naranja Topográfico */
  --color-secondary: #1D4ED8;    /* Color 3: Azul Técnico */
  --color-light: #F8FAFC;        /* Color 4: Blanco/Gris Claro */
  --max-width: 1150px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0F2840;
  background-color: #F8FAFC;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Outfit', 'Inter', sans-serif;
}

/* Regla General: Ancho máximo de 1150px */
.container-custom {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Header States */
#site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px -2px rgba(15, 40, 64, 0.08);
}
#site-header.scrolled .header-nav a {
  color: #0F2840;
}
#site-header.scrolled .header-brand-text {
  color: #0F2840 !important;
}

/* Efecto Latido Infinito (Heartbeat) para Botones Flotantes */
@keyframes heartbeat {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.4);
  }
  14% {
    transform: scale(1.12);
    box-shadow: 0 0 0 14px rgba(230, 81, 0, 0);
  }
  28% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.4);
  }
  42% {
    transform: scale(1.12);
    box-shadow: 0 0 0 14px rgba(230, 81, 0, 0);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(230, 81, 0, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(230, 81, 0, 0);
  }
}

.heartbeat-btn {
  animation: heartbeat 2.2s infinite ease-in-out;
}

.heartbeat-btn:hover {
  animation-play-state: paused;
}

/* Hero Slider Styles */
.hero-slide {
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-slide.active {
  opacity: 1;
  z-index: 20;
}

/* Hero Title 60px Specification */
@media (min-width: 768px) {
  .hero-title {
    font-size: 60px !important;
    line-height: 1.05 !important;
  }
}

/* Animaciones sutiles */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}