/*
 * Setvia Marketing — Layout
 * Reset, base, grid, contenedores y estructura de secciones.
 */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--svm-font-sans);
  font-size: var(--svm-text-base);
  line-height: 1.6;
  color: var(--svm-color-text);
  background-color: transparent; /* la pista fixed de court-bg.css es el fondo real */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 700ms var(--svm-ease-in-out);
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* === CONTENEDOR === */
.svm-container {
  width: 100%;
  max-width: var(--svm-container-xl);
  margin-inline: auto;
  padding-inline: var(--svm-section-px);
}

.svm-container--sm  { max-width: var(--svm-container-sm); }
.svm-container--md  { max-width: var(--svm-container-md); }
.svm-container--lg  { max-width: var(--svm-container-lg); }
.svm-container--2xl { max-width: var(--svm-container-2xl); }

/* === SECCIONES === */
.svm-section {
  padding-block: var(--svm-section-py);
  background-color: var(--svm-color-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background-color 700ms var(--svm-ease-in-out);
}

.svm-section--sm {
  padding-block: var(--svm-section-py-sm);
}

.svm-section--alt {
  background-color: var(--svm-color-bg-alt);
}

.svm-section--dark {
  background-color: var(--svm-color-bg-dark);
  color: var(--svm-color-text-on-dark);
}

.svm-section--primary {
  background-color: var(--svm-color-primary);
  color: var(--svm-color-text-inverse);
}

/* === GRID === */
.svm-grid {
  display: grid;
  gap: var(--svm-space-6);
}

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

/* === FLEX UTILITIES === */
.svm-flex         { display: flex; }
.svm-flex--center { align-items: center; justify-content: center; }
.svm-flex--between { align-items: center; justify-content: space-between; }
.svm-flex--col    { flex-direction: column; }
.svm-gap-2  { gap: var(--svm-space-2); }
.svm-gap-4  { gap: var(--svm-space-4); }
.svm-gap-6  { gap: var(--svm-space-6); }
.svm-gap-8  { gap: var(--svm-space-8); }
.svm-gap-12 { gap: var(--svm-space-12); }

/* === TEXTO CENTRADO === */
.svm-text-center { text-align: center; }

/* === SEPARADOR === */
.svm-divider {
  border: none;
  border-top: 1px solid var(--svm-color-border);
  margin-block: 0;
}

/* === RESPONSIVE — breakpoints === */
@media (max-width: 1024px) {
  .svm-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

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

/* === REDUCCION DE MOVIMIENTO === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}