/* ==========================================================================
   03 · Qué hacemos
   Mega-tarjetas que se apilan (sticky) al hacer scroll.
   ========================================================================== */

.services-section {
  position: relative;
  padding: 7.5rem 0;
  background-color: var(--color-white);
}

/* Textura: trama de puntos que nace arriba a la derecha y se desvanece */
.services-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--rgb-carbon), 0.15) 0.0813rem, transparent 0.1062rem);
  background-size: 1.5rem 1.5rem;
  -webkit-mask-image: radial-gradient(ellipse 65% 45% at 100% 0%, black 10%, transparent 100%);
  mask-image: radial-gradient(ellipse 65% 45% at 100% 0%, black 10%, transparent 100%);
  pointer-events: none;
}

.services-section > .container {
  position: relative;
  z-index: 1;
}

.services-head {
  margin-bottom: 5rem;
}

.services-head .section-title {
  max-width: 50rem;
}

/* --- Tarjetas --- */
.services-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7.5rem;
}

.service-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 4.5rem;
  margin-bottom: 2.5rem;
  padding: 4rem;
  border: 1px solid rgba(var(--rgb-black), 0.06);
  border-radius: 2.5rem;
  background-color: var(--color-cream);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-card-hover);
}

/* Al apilarse (sticky) las dos tarjetas son del mismo color: la que sube
   proyecta una sombra hacia arriba y la que queda abajo se oscurece apenas a
   medida que la tapan (main.js lleva el avance en --covered, de 0 a 1) */
.service-card + .service-card {
  box-shadow: var(--shadow-card), 0 -1.5rem 3rem -1rem rgba(var(--rgb-carbon), 0.22);
}

.service-card + .service-card:hover {
  box-shadow: var(--shadow-card-hover), 0 -1.5rem 3rem -1rem rgba(var(--rgb-carbon), 0.22);
}

.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background-color: rgb(var(--rgb-ink));
  opacity: calc(var(--covered, 0) * 0.16);
  pointer-events: none;
}

/* El texto va primero (arriba a la izquierda, donde empieza la lectura);
   la foto acompaña a la derecha con la misma altura que el contenido */
.service-card-content {
  display: flex;
  flex-direction: column;
}

.service-card-media {
  position: relative;
  min-height: 22.5rem;
  overflow: hidden;
  border-radius: 2rem;
}

.service-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.6s var(--ease-out);
}

.service-card:hover .service-card-media img {
  transform: scale(1.03);
}


.service-card-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

/* Bajada de una línea debajo del título */
.service-card-desc {
  max-width: 34rem;
  margin-bottom: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-carbon-light);
}

.service-card-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.service-card-title {
  font-size: 2.25rem;
  letter-spacing: -0.02em;
}

/* Disciplinas (píldoras blancas sobre la tarjeta crema) */
.service-pills {
  margin-bottom: 2rem;
}

/* Aclaraciones de algunas disciplinas: mismo ícono/color que su píldora */
.service-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(var(--rgb-black), 0.08);
}

.service-note {
  --note-color: var(--color-carbon-muted);
}

.service-note dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-carbon);
}

.service-note dt svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--note-color);
}

.service-note dd {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-carbon-muted);
}

/* Enlace a WhatsApp con mensaje precargado: acción final, abajo a la derecha */
.service-card-link {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
}

.service-card-link:hover {
  color: var(--color-primary-hover);
}

.service-card-link-wa {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

/* Flecha dentro de su propio círculo */
.service-card-link-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-primary-subtle);
  transition: transform 0.4s var(--ease-out), background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

.service-card-link:hover .service-card-link-arrow {
  transform: translateX(0.25rem);
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* --- Responsive --- */
@media (min-width: 1025px) {
  .service-card {
    position: sticky;
    transform-origin: top center;
  }

  .service-card:nth-child(1) {
    top: 7.5rem;
    z-index: 10;
  }

  .service-card:nth-child(2) {
    top: 8.75rem;
    z-index: 11;
  }
}

/* Tablet y mobile: cada tarjeta se lee en columna (título → foto →
   disciplinas → aclaraciones → enlace); .service-card-content se "disuelve"
   para intercalar la foto después del título.
   También se apilan al bajar, como en escritorio. Como acá son más altas que
   la pantalla, cada una se pega recién cuando se terminó de leer (su borde de
   abajo llega al de la pantalla) y la siguiente sube por encima: main.js
   calcula --stack-top según el alto de cada tarjeta. */
@media (max-width: 1024px) {
  .service-card {
    position: sticky;
    top: var(--stack-top, calc(var(--header-height) + 1rem));
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    padding: 2.5rem;
  }

  .service-card:nth-child(1) { z-index: 10; }
  .service-card:nth-child(2) { z-index: 11; }

  .service-card:hover {
    transform: none;
  }

  .service-card-content {
    display: contents;
  }

  .service-card-heading,
  .service-card-desc { order: 1; }
  .service-card-media { order: 2; }
  .service-pills { order: 3; }
  .service-notes { order: 4; }
  .service-card-link { order: 5; }

  .service-card-heading {
    margin-bottom: 0.75rem;
  }

  .service-card-desc {
    margin-bottom: 1.5rem;
  }

  .service-card-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    margin-bottom: 1.75rem;
  }

  .service-card-title {
    font-size: 1.625rem;
  }
}

@media (max-width: 768px) {
  .services-section {
    padding: 4.5rem 0;
  }

  .services-head {
    margin-bottom: 2.5rem;
  }

  /* El salto de línea del título es de escritorio */
  .services-head .section-title br {
    display: none;
  }

  .services-list {
    gap: 1.5rem;
  }

  .service-card {
    padding: 1.5rem;
    border-radius: 1.75rem;
  }

  .service-card-heading {
    gap: 0.75rem;
    margin-bottom: 0.625rem;
  }

  .service-card-desc {
    margin-bottom: 1.25rem;
    font-size: 1rem;
  }

  .service-card-num {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
  }

  .service-card-title {
    font-size: 1.375rem;
  }

  .service-card-media {
    margin-bottom: 1.5rem;
    border-radius: 1.25rem;
  }

  .service-pills {
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .service-pills .pill {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
  }

  .service-notes {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 1.25rem;
  }

  .service-card-link {
    align-self: flex-start;
    margin-top: 1.5rem;
  }
}