/* «Sobre GSM Sofia» en la portada (2026-11-12). Plantilla: templates/_partials/gsm-about.tpl */
.gsm-about {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}

.gsm-about__main {
  position: relative;
  overflow: hidden;
  padding: 40px 42px 38px;
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(420px 300px at 100% 0%, rgba(96, 165, 250, .45), rgba(96, 165, 250, 0) 70%),
    linear-gradient(140deg, #1567d8 0%, #0d4bb0 45%, #0a2a6e 100%);
  box-shadow: 0 24px 50px rgba(10, 42, 110, .22);
}

.gsm-about__main::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 260px;
  height: 260px;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 2px, transparent 2.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 70% 70%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 70% 70%, #000, transparent 70%);
  pointer-events: none;
}

.gsm-about__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 84px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(4, 20, 70, .3);
  overflow: hidden;
}

.gsm-about__logo img {
  display: block;
  width: 250px;
  max-width: none;
  height: auto;
}

.gsm-about__eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #bfdbfe;
}

.gsm-about__title {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
}

.gsm-about__title span {
  color: #ffd23f;
}

.gsm-about__lead {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.65;
  color: #eef4ff;
}

.gsm-about__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: #c7d8f7;
}

.gsm-about__cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.gsm-about__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}

.gsm-about__btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.gsm-about__btn--light {
  background: #fff;
  color: #0a2a6e;
  box-shadow: 0 8px 18px rgba(4, 20, 70, .25);
}

.gsm-about__btn--light:hover {
  color: #0a2a6e;
}

.gsm-about__btn--wa {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}

.gsm-about__btn--wa:hover {
  background: #25d366;
  color: #fff;
  box-shadow: none;
}

.gsm-about__btn--wa svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* tarjetas */
.gsm-about__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.gsm-about__item {
  padding: 24px 22px 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e6edf7;
  box-shadow: 0 10px 28px rgba(15, 35, 90, .07);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.gsm-about__item:hover {
  transform: translateY(-3px);
  border-color: #c9dbf7;
  box-shadow: 0 16px 34px rgba(15, 35, 90, .12);
}

.gsm-about__ico {
  display: inline-flex;
  width: 50px;
  height: 50px;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 15px;
}

.gsm-about__ico svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gsm-about__ico--blue { background: #e8f1ff; color: #1567d8; }
.gsm-about__ico--orange { background: #fff1e6; color: #ea6a12; }
.gsm-about__ico--green { background: #e7f8ef; color: #12a66a; }
.gsm-about__ico--purple { background: #f1ecff; color: #6d4ae0; }

.gsm-about__item h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: #0b1736;
}

.gsm-about__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #55617a;
}

@media (max-width: 991px) {
  .gsm-about { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .gsm-about__main { padding: 28px 22px 26px; border-radius: 22px; }
  .gsm-about__grid { grid-template-columns: 1fr; gap: 12px; }
  .gsm-about__item { padding: 20px 18px; display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; }
  .gsm-about__ico { grid-row: span 2; margin-bottom: 0; }
  .gsm-about__btn { flex: 1 1 auto; justify-content: center; }
}

/* El tema fuerza colores y tamaños con !important en .page-content--home p / .gsm-home h2: aquí mandan los de este bloque */
.page-content--home .gsm-about .gsm-about__eyebrow { color: #bfdbfe !important; }
.page-content--home .gsm-about .gsm-about__title { color: #fff !important; font-size: clamp(28px, 3.2vw, 40px) !important; line-height: 1.12 !important; }
.page-content--home .gsm-about .gsm-about__title span { color: #ffd23f !important; }
.page-content--home .gsm-about .gsm-about__lead { color: #eef4ff !important; }
.page-content--home .gsm-about .gsm-about__text { color: #c7d8f7 !important; }
.page-content--home .gsm-about .gsm-about__item h3 { color: #0b1736 !important; font-size: 17px !important; }
.page-content--home .gsm-about .gsm-about__item p { color: #55617a !important; }
.page-content--home .gsm-about .gsm-about__btn--light { color: #0a2a6e !important; }
.page-content--home .gsm-about .gsm-about__btn--wa { color: #fff !important; }