/* ==========================================================================
   Sección Servicios: 4 tarjetas + imagen central a doble altura
   ========================================================================== */

.services {
  padding: clamp(var(--space-6), 6vw, var(--space-8)) var(--gutter) clamp(var(--space-7), 8vw, 7rem);
  background: var(--color-canvas);
}

.services__head {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  margin-bottom: clamp(var(--space-6), 5vw, var(--space-7));
  text-align: center;
}

.services__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.services__title .line { display: block; }

/* ---------- Rejilla: tarjetas | imagen | tarjetas ---------- */
.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: var(--space-4);
  max-width: 72rem;
  margin-inline: auto;
}

.service--1 { grid-column: 1; grid-row: 1; }
.service--3 { grid-column: 1; grid-row: 2; }
.service--2 { grid-column: 3; grid-row: 1; }
.service--4 { grid-column: 3; grid-row: 2; }
.services__media { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- Tarjeta ---------- */
.service {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-7);
  min-height: 13.5rem;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border-warm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Halo del icono: tinte salvia del DESIGN.md */
.service__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgb(168 197 181 / 0.28);
  color: var(--color-primary-strong);
  flex: none;                         /* que el halo no se aplaste en filas estrechas */
}
.service__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.service__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;                 /* headline-sm 20px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
}
.service__text {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 28ch;
  min-height: 4.8em;                  /* reserva 3 líneas: los títulos quedan alineados entre tarjetas */
  text-wrap: pretty;
}

/* ---------- Imagen central ---------- */
.services__media {
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-border-warm);
  box-shadow: var(--shadow-card);
}
.services__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;           /* mantiene a la persona en cuadro al recortar */
}

/* ---------- Tablet: imagen arriba a todo el ancho, tarjetas 2 x 2 ---------- */
@media (max-width: 64rem) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    max-width: 44rem;
  }
  .services__media {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .service--1 { grid-column: 1; grid-row: 2; }
  .service--2 { grid-column: 2; grid-row: 2; }
  .service--3 { grid-column: 1; grid-row: 3; }
  .service--4 { grid-column: 2; grid-row: 3; }
}

/* ---------- Móvil: una columna ---------- */
@media (max-width: 40rem) {
  .services__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 30rem;
  }
  .services__media { aspect-ratio: 4 / 3; }
  .service--1, .service--2, .service--3, .service--4 { grid-column: 1; grid-row: auto; }
  .service {
    flex-direction: row;               /* icono a la izquierda, texto a la derecha */
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-4);
    min-height: 0;
  }
  .service__text { max-width: none; min-height: 0; }
}