/* ================================================================
   INGESOLAR — pages/marcas.html
   Página dedicada a los fabricantes que Ingesolar distribuye.
   ================================================================ */

/* ─── HERO ──────────────────────────────────────────────────────── */
.mar-hero {
  padding: var(--space-16) 0 var(--space-12);
}

.mar-hero-sub {
  max-width: 640px;
  font-size: var(--text-lg);
  margin-top: var(--space-4);
}

/* ─── GRID ──────────────────────────────────────────────────────── */
.mar-grid-section {
  padding: var(--space-12) 0 var(--space-16);
}

.mar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .mar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .mar-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── TARJETA DE MARCA ──────────────────────────────────────────── */
.marca-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.marca-card-logo-wrap {
  display: flex;
  align-items: center;
  height: 48px;
  margin-bottom: var(--space-1);
}

.marca-card-logo-wrap img {
  max-height: 48px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Fallback de texto cuando todavía no hay logo (ver
   js/tienda/brandLogos.js) -- mismo alto que el wrap con imagen para que
   la grilla no salte de tamaño entre tarjetas. */
.marca-card-nombre {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-black);
}

.marca-card-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-solar-dark);
}

.marca-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-relaxed);
  flex-grow: 1;
}

/* Botón real (.btn.btn-secondary.btn-sm, ver base.css) en vez de un link
   de texto -- necesita leerse como algo clickeable a simple vista, no
   como una llamada a la acción sutil que se puede confundir con
   metadata de la tarjeta. */
.marca-card-link {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* Marca propia de Ingesolar (ALLYCE, SUNERA) -- borde de acento en vez de
   tratarla igual a un fabricante externo, mismo criterio de honestidad
   que ya se usó en el copy (ver docs/ESTRATEGIA_NEGOCIO_Y_CLIENTE.md § 5). */
.marca-card-propia {
  border-color: var(--color-solar-border);
}