/* ==========================================================================
   Home · Lo que hacemos + tarjeta de servicio
   Framer: sección 120/72 (desktop), 80/24/120 (tablet), 120/12 (teléfono).
   Desktop: 4 tarjetas de 324×480 en fila; tablet: grilla 2×2 con borde;
   teléfono: grilla 2 columnas con la variante compacta "Mobile".
   ========================================================================== */

@layer sections {
  .services {
    position: relative;
    z-index: 3;
    max-width: 1920px;
    margin-inline: auto;
    padding: 120px 12px;
    background-color: var(--color-bg);
  }

  .services__container {
    display: flex;
    flex-direction: column;
    gap: 80px;
  }

  .services__top {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .services__intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .services__text {
    max-width: 526px;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 24px;
  }

  .services__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .services__item {
    display: flex;
  }

  /* --- Tarjeta: variante compacta (teléfono) --- */
  .service-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    min-height: 185px;
    padding: 16px 12px;
    overflow: hidden;
    border: 1px solid var(--palette-smoky-black);
    border-radius: 16px;
    background-color: var(--color-bg);

    /* "Hover-Image" (patrón de puntos) + "Hover-BG" (brillo amarillo) */
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.4s var(--ease-out);
      pointer-events: none;
    }

    &::before {
      height: 152px;
      background-image: radial-gradient(circle, rgb(255 255 255 / 22%) 1.05px, transparent 1.3px);
      background-size: 21px 21px;
      background-position: -2px 0;
      mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    }

    &::after {
      height: 215px;
      background: linear-gradient(180deg, rgb(250 217 26 / 12%) 0%, rgb(255 255 255 / 0%) 46%);
    }

    &:hover {
      &::before,
      &::after {
        opacity: 1;
      }

      .service-card__number {
        color: var(--color-accent);
      }
    }
  }

  .service-card__icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
  }

  .service-card__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .service-card__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .service-card__number {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 16px;
    transition: color 0.4s var(--ease-out);
  }

  .service-card__title {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  /* En teléfono la tarjeta compacta muestra solo número y título (como producción) */
  .service-card__text {
    display: none;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 16px;
  }

  .services .section-title__accent {
    font-size: 48px;
  }

  .service-card__arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: auto;
    border-radius: 100px;
    background: linear-gradient(0deg, var(--palette-jet-gray) 0%, var(--palette-black) 100%);
    color: var(--color-text-soft);

    svg {
      width: 16px;
      height: 16px;
    }
  }

  /* --- Tablet: tarjetas completas en grilla 2×2 con borde fino --- */
  @media (min-width: 810px) {
    .services {
      padding: 80px 24px 120px;
    }

    .services__intro {
      gap: 24px;
    }

    .services__grid {
      gap: 0;
    }

    .service-card {
      align-items: center;
      gap: 40px;
      height: 480px;
      padding: 64px 32px;
      border-radius: 0;
    }

    .service-card__icon {
      width: 152px;
      height: 152px;
    }

    .service-card__content {
      width: 100%;
      gap: 24px;
    }

    .service-card__head {
      gap: 14px;
    }

    .service-card__number {
      color: var(--color-text-soft);
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
    }

    .service-card__title {
      color: var(--color-text-soft);
      font-size: 19px;
      line-height: 20px;
    }

    .service-card__text {
      display: block;
      font-size: 16px;
      line-height: 24px;
    }

    .services .section-title__accent {
      font-size: inherit;
    }
  }

  /* --- Desktop: fila de 4; borde degradado y esquinas solo en los extremos --- */
  @media (min-width: 1440px) {
    .services {
      padding: 120px 72px;
    }

    .services__intro {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .services__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .service-card {
      border-color: var(--palette-smoky-black);
      border-width: 1px 0;
      background-color: transparent;
    }

    .service-card__title {
      font-size: 24px;
      line-height: 30px;
    }

    /* Tarjetas de los extremos: borde con degradado (capa "Border" + "BG" de Framer) */
    .services__item:first-child .service-card,
    .services__item:last-child .service-card {
      border: 1px solid transparent;
      background:
        linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
        linear-gradient(147deg, var(--palette-medium-gray) 0%, rgb(51 51 51) 41%) border-box;
    }

    .services__item:first-child .service-card {
      border-radius: 24px 0 0 24px;
    }

    .services__item:last-child .service-card {
      border-radius: 0 24px 24px 0;
      background:
        linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
        linear-gradient(326deg, var(--palette-medium-gray) 0%, rgb(51 51 51) 26%) border-box;
    }

    /* Tarjetas centrales: borde lateral de 1px (prop "Border" de Framer) */
    .services__item:not(:first-child, :last-child) .service-card {
      border: 1px solid var(--palette-smoky-black);
    }
  }
}