/* ============================================================
   LANDING DISTRIBUIDORES
   ============================================================ */

.landing-distribuidores-servicio {
  .hero {
    background: radial-gradient(
      circle at top left,
      rgba(10, 0, 107, 0.95) 20%,
      rgba(5, 0, 60, 0.85) 40%,
      var(--color-bg-dark) 70%,
      var(--color-dark) 100%
    );

    .hero__top {
      padding: 20px 20px 20px;
      background: var(--color-bg-light);

      .hero__container {
        max-width: var(--max-width);
        margin: auto;
      }

      /* Logo siempre por encima */
      .hero__logo {
        max-width: 300px;
        object-fit: contain;
      }

      .hero__nombre {
        color: var(--color-text-btn);
        font-size: 1.4rem;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        font-weight: 800;
      }

      span {
        color: var(---color-text);
        font-size: var(--font-small);
        white-space: nowrap;
      }
    }

    .hero__bottom {
      text-align: center;
      margin: 0 auto;
      padding: 100px 0;
      max-width: 800px;

      .hero__title {
        color: var(--color-text-muted);
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 20px;
      }

      .hero__subtitle {
        color: var(--color-title);
        font-size: 40px;
        font-weight: 800;
        margin-bottom: 30px;
      }

      .hero__description {
        color: var(--color-text-muted);
        font-size: 18px;
        margin: 0;
      }
    }
  }

  /* ===============================
       SECCIÓN DE SERVICIOS
       =============================== */
  .landing-main {
    background: var(--color-bg-light);
    min-height: auto;
    margin-top: 0;
    padding: 60px 20px;
  }

  .servicios-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-bottom: 60px;
  }

  .servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(47%, 1fr));
    align-items: stretch;
    gap: 40px;
  }

  /* ===== CARD ===== */
  .servicio-card {
    display: block;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #ffffff;
    border-radius: var(--radius-md);
    border-top: 5px solid transparent;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    position: relative;

    &:hover {
      transform: translateY(-5px);
      border-top: 5px solid var(--color-bg-hover-btn);
    }

    .card {
      display: flex;
      flex-direction: column;
      align-items: left;
      padding: calc(40px - 5px) 30px;
      border: 0;
      border-radius: var(--radius-md);
      transition: var(--transition);

      .card-label {
        content: "";
        position: absolute;
        top: 40px;
        right: 30px;
        background-color: #f4f7fa;
        padding: 5px 10px;
        font-weight: 600;
        color: #115e96;
        font-size: 0.8rem;
        border-radius: 100px;
      }

      /* ===== Parte superior con degradado ===== */
      .card__figure {
        margin-bottom: 30px;

        .figure__container-icon {
          width: 80px;
          height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #f4f7fa;
          border-radius: 100%;
        }
      }

      /* ===== Contenido inferior blanco ===== */
      .card__content {
        color: #444;
        font-size: 0.9rem;

        h3 {
          font-size: 1.6rem;
          font-weight: 700;
          color: var(--color-dark);
        }

        p {
          margin: 0;
        }

        .group-btn {
          position: relative;
          margin-top: 25px;
          display: flex;
          justify-content: start;
          align-items: stretch;
          gap: 20px;

          .btn-play {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            text-align: center;
            width: auto;
            padding: 20px 35px;
            line-height: 0;
            background: var(--color-bg-btn);
            color: var(--color-text-btn);
            border-radius: var(--radius-md);
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 1px;
            transition: var(--transition);

            img {
              width: 22px;
              height: 22px;
              object-fit: contain;
              position: absolute;
              right: 10px;
              transform: translateX(-20px);
              color: var(--color-text-btn);
              opacity: 0;
              transition: var(--transition);
            }

            &:hover {
              background: var(--color-bg-hover-btn);
              color: #fff;

              img {
                transform: translateX(0);
                opacity: 1;
              }
            }
          }

          .btn-info {
            border-radius: 100%;
            width: 44px;
            background: var(--color-bg-light);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: var(--transition);

            img {
              width: 24px;
              height: 24px;
              object-fit: contain;
            }

            &:hover {
              transform: translateY(-3px);
            }
          }
        }
      }
    }
  }

  /* ===============================
       FOOTER SECTION
       =============================== */
  .footer__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #343a40;
    color: #fff;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 60px 40px;
    border-radius: var(--radius-md);

    .footer__left {
      .footer__title {
        color: inherit;
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 20px;
        line-height: 1.4em;
      }

      .footer__description {
        color: var(--color-text-footer);
        margin: 0;
        font-size: 16px;
      }
    }

    .footer__right {
      a {
        padding: 20px 40px;
        color: inherit;
        border-radius: var(--radius-md);
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        white-space: nowrap;
        font-weight: 600;
        background: var(--color-bg-btn);
        color: inherit;
        transition: var(--transition);

        &:hover {
          background-color: var(--color-bg-hover-btn);
        }
      }
    }
  }

  /* ===============================
       RESPONSIVE — Ajustes móviles
       =============================== */

  @media (width <= 930px) {
    .footer__container {
      flex-wrap: wrap;
      gap: 40px;
    }
  }
  @media (width <= 768px) {
    .hero {
      .hero__top {
        padding-top: 20px;

        .hero__logo {
          max-width: 200px;
        }

        span {
          font-size: 0.65rem;
        }
      }

      .hero__bottom {
        padding: 80px 0;

        .hero__subtitle {
          color: var(--color-title);
          font-size: 34px;
          font-weight: 800;
        }

        .hero__description {
          font-size: 16px;
        }
      }
    }

    .servicio-card {
      .card {
        padding: 25px 20px;
      }

      .card-label {
        top: 25px;
        right: 20px;
      }
    }

    .footer__container {
      .footer__left {
        .footer__title {
          font-size: 25px;
        }
      }

      .footer__right {
        a {
          padding: 15px 30px;
          font-size: 12px;
        }
      }
    }
  }
}