/* ==========================================================================
   AREA UNITED · Parte 2 · 4.8 Servicios
   Tarjetas con borde #202020, título Knockout y número grande en contorno
   amarillo; la tercera lleva la foto 4:5 con velo.
   ========================================================================== */

.p2-services-grid {
  display: grid;
  gap: 16px;
}
.p2-service {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 360px;
  padding: 24px 20px;
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-card);
  background: var(--black);
  transition: border-color var(--t-base), background-color var(--t-base);
  isolation: isolate;
}
.p2-service:hover { border-color: rgba(255,255,255,.35); background: var(--surface-1); }
.p2-service:focus-visible { box-shadow: var(--focus-ring); }
.p2-service-num {
  font-size: clamp(72px, 9vw, 112px);
  line-height: .8;
  -webkit-text-stroke-width: 1.5px;
  justify-self: end;
  position: relative;
  z-index: 2;
}
.p2-service-body {
  display: grid;
  gap: 10px;
  align-content: end;
  position: relative;
  z-index: 2;
}
.p2-service-title { font-size: clamp(32px, 3.4vw, 44px); line-height: .95; }
.p2-service p { font-size: 15px; color: var(--gray-text); max-width: 34ch; }
.p2-service .link-arrow { margin-top: 10px; justify-self: start; font-size: 14px; }
.p2-service:hover .link-arrow::after { transform: scaleX(1); }
.p2-service:hover .link-arrow .arrow { transform: translateX(6px); }

/* Tarjeta con foto: la imagen de fondo, texto sobre el velo */
.p2-service--photo { aspect-ratio: 4 / 5; border-color: transparent; background: var(--surface-1); overflow: hidden; }
.p2-service--photo:hover { background: var(--surface-1); }
.p2-service--photo img { position: absolute; inset: 0; z-index: 0; }
.p2-service--photo p { color: #D6D6D4; }
.p2-service--photo .p2-corners { z-index: 1; }

/* --- Tablet: dos columnas, la foto a todo el ancho debajo --- */
@media (min-width: 768px) {
  .p2-services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .p2-service { padding: 28px 24px; }
  .p2-service--photo { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* --- Escritorio: tres iguales en fila --- */
@media (min-width: 1024px) {
  .p2-services-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
  .p2-service { padding: 32px 28px; min-height: 0; }
  .p2-service--photo { grid-column: auto; aspect-ratio: 4 / 5; }
}