/* layout.css */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

@media (max-width: 1024px) {
  .grid-cols-4, .grid-cols-3, .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-cols-4, .grid-cols-3, .grid-cols-2, .grid-cols-12 {
    grid-template-columns: 1fr;
  }
}

/* Flexbox Layouts */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }

/* Sections */
.section-py {
  padding-block: var(--spacing-section-gap);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Text Alignment Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ── Marquee / Carrusel Infinito (Organismo 20) ───────────────────────── */
.marquee-container {
  overflow: hidden;
  display: flex;
  width: 100%;
  /* Fade lateral — máscara espacial */
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.marquee-track {
  display: flex;
  gap: var(--space-7);
  white-space: nowrap;
  animation: marquee-scroll 28s linear infinite;
  will-change: transform;
}

/* Pausa táctil en hover / focus */
.marquee-container:hover .marquee-track,
.marquee-container:focus-within .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Responsive adjustments for Gestalt Sections */
.gestalt-s1 {
  padding-bottom: 40px;
}

@media (max-width: 768px) {
  .gestalt-s1 {
    padding-bottom: 20px;
  }
  .gestalt-s2 {
    height: 120px;
    padding-block: 0;
    display: flex;
    align-items: center;
  }
  
  /* Mathematical exact fit for the 600px dashboard mockup on mobile */
  .dashboard-mockup-wrapper {
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: calc(100vw - 48px) !important;
    /* Height ratio matching the natural content height (~990px / 600px = 1.65) */
    height: calc((100vw - 48px) * 1.65) !important;
    position: relative;
  }
  .dashboard-mockup-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px !important;
    /* Auto height allows the container to snap exactly to the dashboard's end */
    height: auto !important;
    transform-origin: top left;
    transform: scale(calc((100vw - 48px) / 600px)) !important;
    margin: 0 !important;
  }
}