/* ==========================================
   MAIN CSS - ESTUDIO MULTIDISCIPLINARIO EM
   Importador centralizado de todos los módulos CSS
   ========================================== */

/* ========== 1. BASE STYLES ========== */
@import url('reset.css');
@import url('variables.css');

/* ========== 2. COMPONENTS / MODULES ========== */
@import url('modules/header.css');
@import url('modules/hero.css');             /* ✅ Hero Section */
@import url('modules/about.css');            /* ✅ About Section */
@import url('modules/services.css');         /* ✅ Services Section */
@import url('modules/why-us.css');           /* ✅ Why Us Section */
@import url('modules/cta.css');              /* ✅ CTA Section */
@import url('modules/contact.css');          /* ✅ Contact Section */
@import url('modules/footer.css');           /* ✅ Footer */
/* @import url('modules/about.css'); */      /* Próximo módulo */
/* @import url('modules/services.css'); */   /* Próximo módulo */
/* @import url('modules/cta.css'); */        /* Próximo módulo */
/* @import url('modules/contact.css'); */    /* Próximo módulo */
/* @import url('modules/footer.css'); */     /* Próximo módulo */

/* ========== 3. UTILITIES ========== */

/* Botones base (usados en todo el sitio) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-primary);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variantes de botones */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.15);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30, 58, 95, 0.25);
  color: var(--color-white);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--white {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}

.btn--white:hover {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
  color: var(--color-primary);
}

.btn--outline-white {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.btn--full {
  width: 100%;
}

/* Secciones */
.section {
  padding: var(--spacing-20) 0;
  position: relative;
}

.section--dark {
  background-color: var(--color-gray-900);
  color: var(--color-white);
}

.section--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
}

@media screen and (max-width: 767px) {
  .section {
    padding: var(--spacing-16) 0;
  }
}

/* Títulos de sección */
.section__subtitle {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--spacing-4);
}

.section--dark .section__subtitle,
.section--primary .section__subtitle {
  color: var(--color-accent);
}

.section__title {
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-6);
}

.section--dark .section__title,
.section--primary .section__title {
  color: var(--color-white);
}

/* Highlight text */
.highlight {
  color: var(--color-primary);
  position: relative;
}

.section--dark .highlight,
.section--primary .highlight {
  color: var(--color-accent);
}

/* WhatsApp Float Button */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: var(--z-index-fixed);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.6);
  color: var(--color-white);
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
}

/* Scroll to top button */
.scroll-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 50px;
  height: 50px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-index-fixed);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
}

.scroll-top:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Responsive para botones flotantes */
@media screen and (max-width: 767px) {
  .whatsapp-float {
    width: 54px;
    height: 54px;
    bottom: 20px;
    right: 20px;
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }

  .scroll-top {
    width: 44px;
    height: 44px;
    bottom: 20px;
    left: 20px;
  }
}

/* ========== ANIMATIONS (Opcional - para AOS o custom) ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Clases de utilidad para animaciones */
.fade-in {
  animation: fadeIn 0.6s ease-out;
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

/* Sistema de animaciones AOS (Animate On Scroll) */
[data-aos] {
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  transition-timing-function: ease-out;
}

[data-aos].aos-init {
  opacity: 0;
}

[data-aos].aos-animate {
  opacity: 1;
}

[data-aos="fade-up"].aos-init {
  transform: translateY(30px);
}

[data-aos="fade-up"].aos-animate {
  transform: translateY(0);
}

[data-aos="fade-left"].aos-init {
  transform: translateX(30px);
}

[data-aos="fade-left"].aos-animate {
  transform: translateX(0);
}

[data-aos="fade-right"].aos-init {
  transform: translateX(-30px);
}

[data-aos="fade-right"].aos-animate {
  transform: translateX(0);
}

[data-aos="zoom-in"].aos-init {
  transform: scale(0.9);
}

[data-aos="zoom-in"].aos-animate {
  transform: scale(1);
}

/* Reducir animaciones para usuarios con preferencia */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transition: none !important;
    animation: none !important;
  }
  
  [data-aos].aos-init {
    opacity: 1;
    transform: none;
  }
}

/* ========== SPACING UTILITIES (Opcional) ========== */
.mt-4 { margin-top: var(--spacing-4); }
.mt-8 { margin-top: var(--spacing-8); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-8 { margin-bottom: var(--spacing-8); }

/* ========== RESPONSIVE HELPERS ========== */
.hide-mobile {
  display: none;
}

@media screen and (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
  
  .hide-desktop {
    display: none;
  }
}