/* ═══════════════════════════════════════════════════════════════════
   SECCIONES — sections.css
   ──────────────────────────────────────────────────────────────────
   Layout y estructura reutilizable de secciones.
   También incluye: partners bar, sección SAINT, sección CTA.
   ► Para cambiar el espaciado: editar --section-py en variables.css
   ► Para agregar una nueva sección: crear el HTML y usar .section + .section-inner
   ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   LAYOUT GENÉRICO DE SECCIÓN
   Usar en cualquier sección: <section class="section">
   ──────────────────────────────────────────────────────────────── */
.section {
  padding: var(--section-py) var(--section-px);
}
/* Contenedor centrado con ancho máximo */
.section-inner {
  max-width: var(--container);
  margin: 0 auto;
}

/* ── Fondo alterno (gris claro) ──────────────────────────────── */
/* Añadir .section-alt a la sección para alternar fondo          */
.section-alt {
  background: var(--color-off-white);
}

/* ── Encabezado de sección (centrado) ────────────────────────── */
.section-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 56px;
}
/* Chip / etiqueta pequeña sobre el título */
.section-tag {
  display: inline-block;
  background: var(--color-accent-pale);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
/* Variante para secciones con fondo oscuro */
.section-tag--dark {
  background: rgba(74, 222, 128, 0.15);
  color: var(--color-highlight);
}
.section-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--color-primary);
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}
.section-header p {
  font-size: 17px;
  color: var(--color-gray-600);
  line-height: 1.7;
}

/* ────────────────────────────────────────────────────────────────
   GRILLAS DE SECCIONES
   Cada grilla define su número de columnas. Se colapsa en responsive.css
   ──────────────────────────────────────────────────────────────── */

/* 4 columnas — imágenes de servicios */
.services-img-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid);
  margin-bottom: 48px;
}

/* 3 columnas — tarjetas de servicios */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
}

/* 2 columnas — tarjetas "¿Por qué?" */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-grid);
}

/* 2 columnas — tarjetas de productos */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-grid);
}

/* ────────────────────────────────────────────────────────────────
   BARRA DE ALIADOS / PARTNERS
   Franja de logos de socios tecnológicos debajo del slider.
   ► Para cambiar los logos: editar config.js → images.partners
   ──────────────────────────────────────────────────────────────── */
.partners-bar {
  background: var(--color-off-white);
  padding: 28px var(--section-px);
  border-bottom: 1px solid var(--color-gray-200);
}
.partners-inner {
  max-width: 1100px;
  margin: 0 auto;
}
/* Texto "Aliados tecnológicos" */
.partners-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-gray-400);
  margin-bottom: 20px;
}
/* Fila de logos */
.partners-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
/* Logo individual */
.partner-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: grayscale(80%) opacity(0.65);
  transition: var(--transition-base);
}
.partner-logo:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.06);
}

/* ────────────────────────────────────────────────────────────────
   SECCIÓN SAINT (fondo azul navy)
   ► Para cambiar el fondo: editar los colores --color-primary
   ──────────────────────────────────────────────────────────────── */
.saint-section {
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-lt) 100%);
  position: relative;
  overflow: hidden;
}
/* Decoración radial en esquina superior derecha */
.saint-section::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(27, 140, 94, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* Layout 2 columnas: contenido | estadísticas */
.saint-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.saint-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--color-white);
  margin-bottom: 18px;
}
.saint-content h2 em {
  font-style: normal;
  color: var(--color-highlight);
}
.saint-content > p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}
/* Lista de características de SAINT */
.saint-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.saint-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.90);
  font-size: 15px;
  font-weight: 500;
}
/* Check badge verde */
.saint-features li::before {
  content: '✓';
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: rgba(74, 222, 128, 0.15);
  color: var(--color-highlight);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
/* Grilla 2×2 de tarjetas de estadísticas */
.saint-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ────────────────────────────────────────────────────────────────
   SECCIÓN CTA (fondo verde degradado)
   ► Para cambiar el fondo: editar los colores --color-accent y --color-teal
   ──────────────────────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-teal) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Decoración circular de fondo */
.cta-section::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
}
.cta-section h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--color-white);
  margin-bottom: 14px;
}
.cta-section > .section-inner > p {
  color: rgba(255, 255, 255, 0.90);
  font-size: 18px;
  max-width: 550px;
  margin: 0 auto 32px;
  line-height: 1.7;
}
.cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Sellos de origen de software ───────────────────────────── */
.sw-seal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 14px;
  border: 1.5px solid transparent;
  width: fit-content;
}
.sw-seal .bi { font-size: 15px; }

/* Desarrollo propio CDP */
.sw-seal--cdp {
  background: linear-gradient(135deg, #E8F5EE, #D1FAE5);
  color: #065F46;
  border-color: rgba(27,140,94,.25);
}
.sw-seal--cdp .bi { color: #1B8C5E; }
.sw-seal--cdp .sw-seal-type {
  background: #1B8C5E;
  color: #fff;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}

/* Distribuidor autorizado */
.sw-seal--partner {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  color: #1E3A5F;
  border-color: rgba(29,78,216,.20);
}
.sw-seal--partner .bi { color: #1D4ED8; }
.sw-seal--partner .sw-seal-type {
  background: #1D4ED8;
  color: #fff;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}