/* ===================================================================
   Abundia — Soluciones
   Requiere base.css
   =================================================================== */

/* Pill (variante crema) */
.pill {
  border-radius: 50px;
  padding: 18px 56px;
  margin: 0 auto 28px;
  width: max-content;
  max-width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}
.pill--cream { background: #fffdef; }
.pill h1 {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: #7cc242;
  margin: 0;
  text-align: center;
  max-width: 620px;
}

/* ===================================================================
   BLOQUE SUPERIOR (fondo dorado)
   =================================================================== */
.sol-top {
  background: #e0c46a;
  padding-bottom: 70px;
}

/* Hero */
.sol-hero__inner {
  text-align: center;
  padding-block: 48px 30px;
}
.sol-hero__lead {
  color: #4a4332;
  font-size: 15px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 28px;
}
.sol-hero__badge {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 42px;
  border-radius: 50px;
  margin: 0 0 56px;
}
.sol-hero__scroll {
  color: #4a4332;
  font-size: 13px;
  margin: 0;
}

/* Tarjetas (head verde + body crema) */
.sol-block { padding-block: 28px; }
.sol-card__head {
  background: var(--lime);
  border-radius: 16px;
  padding: 22px 44px;
  margin-bottom: 14px;
}
.sol-card__head h2 {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #2f6b1e;
  margin: 0;
}
.sol-card__head--split {
  display: flex;
  align-items: center;
  gap: 48px;
}
.sol-card__head--split h2 { flex-shrink: 0; }
.sol-card__head--split p {
  margin: 0;
  color: #2f4a1e;
  font-size: 14px;
  line-height: 1.5;
}
.sol-card__body {
  background: #fffdef;
  border-radius: 16px;
  padding: 40px;
}

/* Grids internos */
.sol-grid { display: grid; gap: 44px; align-items: center; }
.sol-grid--regalos { grid-template-columns: 0.9fr 1.1fr; }
.sol-grid--pos { grid-template-columns: 1.1fr 0.9fr; }

.sol-kit,
.sol-bigimg {
  background: #f1f1f1;
  border-radius: 12px;
  padding: 24px;
}
.sol-kit img,
.sol-bigimg img { width: 100%; display: block; }

.sol-detail p {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  margin: 0 0 8px;
}

/* Grilla de productos pequeños (4 columnas) */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 22px;
  align-items: center;
}
.prod-grid img {
  width: 100%;
  height: 92px;
  object-fit: contain;
}

/* Trade marketing (3 imágenes, misma altura) */
.trade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.trade-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* ===================================================================
   CATÁLOGO 2026 (fondo verde acuarela)
   =================================================================== */
.catalogo {
  position: relative;
  overflow: hidden;
}
.catalogo__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.catalogo__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  padding-block: 70px 90px;
}
.catalogo__title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 52px;
  color: var(--green);
  margin: 0 0 14px;
}
.catalogo__lead {
  font-size: 15px;
  line-height: 1.5;
  color: #2f3a33;
  max-width: 360px;
  margin: 0 0 28px;
}
.catalogo__fig { margin: 0; }
.catalogo__fig img {
  width: 100%;
  border-radius: 12px;
}
.catalogo__fig figcaption {
  font-size: 12px;
  font-weight: 700;
  color: #2f3a33;
  margin-top: 10px;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 920px) {
  .sol-grid--regalos,
  .sol-grid--pos { grid-template-columns: 1fr; gap: 28px; }
  .sol-grid--pos .sol-bigimg { order: -1; }
  .sol-card__head--split { flex-direction: column; align-items: flex-start; gap: 14px; }
  .trade-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .catalogo__inner { grid-template-columns: 1fr; }
  .catalogo__lead { max-width: none; }
}

@media (max-width: 560px) {
  .pill h1 { font-size: 24px; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-card__body { padding: 24px; }
  .catalogo__title { font-size: 40px; }
}