/* ===== MODERN GRID SYSTEM ===== */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  container-type: inline-size;
}

/* Container padding específico para móvil */
@media (max-width: 640px) {
  .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
}

/* Section Spacing Optimizado para diseño compacto */
.section {
  padding: var(--space-xl) 0; /* Espaciado más compacto que section-padding */
}

/* Espaciado específico para primera y última sección */
.section:first-of-type {
  padding-top: var(--space-lg); /* Menos padding superior para la primera sección */
}

.section:last-of-type {
  padding-bottom: var(--space-xl); /* Padding inferior consistente */
}

/* Espaciado entre secciones adyacentes reducido */
.section + .section {
  padding-top: var(--space-lg); /* Reducir espacio entre secciones consecutivas */
}

/* Espaciado móvil ultra-compacto */
@media (max-width: 640px) {
  .section {
    padding: var(--space-lg) 0; /* Aún más compacto en móvil */
  }
  
  .section:first-of-type {
    padding-top: var(--space-md);
  }
  
  .section + .section {
    padding-top: var(--space-md); /* Espaciado mínimo entre secciones en móvil */
  }
}

/* ===== CSS GRID LAYOUTS ===== */

/* Hero Grid */
.hero-grid {
  display: grid;
  grid-template-areas: 
    "content"
    "visual"
    "stats";
  gap: var(--grid-gap);
  align-items: center;
  min-height: calc(100vh - 70px);
}

@container (min-width: 768px) {
  .hero-grid {
    grid-template-areas: 
      "content visual"
      "stats stats";
    grid-template-columns: 1fr 1.2fr;
  }
}

@container (min-width: 1024px) {
  .hero-grid {
    grid-template-areas: 
      "content visual visual"
      "stats stats cta";
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.hero-content { grid-area: content; }
.hero-visual { grid-area: visual; }
.hero-stats { grid-area: stats; }
.hero-cta { grid-area: cta; }

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols-mobile), 1fr);
  gap: var(--grid-gap);
}

@container (min-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(var(--grid-cols-tablet), 1fr);
  }
}

@container (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(var(--grid-cols-desktop), 1fr);
  }
}

@container (min-width: 1280px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Plans Grid */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

/* Contact Grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@container (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
  }
}

/* Technologies Grid */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
}

/* Carousel Grid */
.carousel-container {
  position: relative;
  display: grid;
  grid-template-areas: 
    "slides"
    "dots"
    "nav";
  gap: var(--space-lg);
  align-items: center;
}

@container (min-width: 768px) {
  .carousel-container {
    grid-template-areas: 
      "nav-prev slides nav-next"
      ". dots .";
    grid-template-columns: auto 1fr auto;
  }
}

.carousel-track { grid-area: slides; }
.carousel-dots { grid-area: dots; }
.carousel-nav-prev { grid-area: nav-prev; }
.carousel-nav-next { grid-area: nav-next; }

/* ===== FLEXBOX UTILITIES ===== */

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ===== RESPONSIVE UTILITIES ===== */

.mobile-only {
  display: block;
}

@container (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

.desktop-only {
  display: none;
}

@container (min-width: 768px) {
  .desktop-only {
    display: block;
  }
}

/* ===== ASPECT RATIOS ===== */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

/* ===== POSITIONING ===== */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0;
}

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* ===== OVERFLOW ===== */
.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}