/* ==========================================================================
PÁGINA SOLUCIONES - INDUAGAR S.A.S.
Uso de CSS Nesting nativo y variables del proyecto
========================================================================== */

/* Hero Soluciones */
.solutions-hero {
  background-color: rgb(var(--color-grey-lite));
  padding: var(--space-12) var(--space-4);

  .hero-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .hero-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: rgb(var(--color-blue-2));
    line-height: 1.2;
    margin-bottom: var(--space-4);
  }

  .hero-description {
    font-size: var(--size-medium);
    color: rgb(var(--color-black-page));
    margin-bottom: var(--space-6);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .hero-media {
    width: 100%;
    border-radius: var(--border-radius-large);
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }

    &.media-placeholder {
      min-height: 320px;
      background-color: rgb(var(--color-grey-lite-3));
      display: flex;
      align-items: center;
      justify-content: center;

      &::after {
        content: "INDUAGAR S.A.S. - Soluciones";
        color: rgb(var(--color-grey));
        font-weight: 600;
      }
    }
  }
}

/* Introducción */
.solutions-intro {
  padding: var(--space-12) var(--space-4) var(--space-6);

  .intro-container {
    max-width: var(--container-xl);
    margin: 0 auto;
  }

  .intro-text {
    max-width: var(--container-md);
    margin: 0 auto;
    text-align: center;

    p {
      font-size: var(--size-medium);
      color: rgb(var(--color-black-page));
      line-height: 1.6;
    }
  }
}

/* Tarjetas de Soluciones */
.solutions-lines {
  padding: var(--space-6) var(--space-4) var(--space-12);

  .lines-container {
    max-width: var(--container-xl);
    margin: 0 auto;
  }

  .lines-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);

    @media (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .solution-card {
    background-color: rgb(var(--color-white));
    border: 1px solid rgb(var(--color-border-grey));
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--box-shadow-1);
    transition:
      box-shadow var(--transition-fast),
      transform var(--transition-fast);

    &:hover,
    &:focus-within {
      box-shadow: var(--box-shadow-3);
      transform: translateY(-2px);
    }

    .card-media {
      height: 200px;
      background-color: rgb(var(--color-grey-lite-3));
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      &.card-media-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;

        &::after {
          content: "Línea de Solución";
          font-size: var(--font-small);
          color: rgb(var(--color-grey));
        }
      }
    }

    .card-body {
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      flex-grow: 1;

      .card-title {
        font-size: 1.25rem;
        color: rgb(var(--color-blue-2));
        margin-bottom: var(--space-3);
      }

      .card-desc {
        font-size: var(--font-medium);
        color: rgb(var(--color-grey));
        margin-bottom: var(--space-4);
        line-height: 1.5;
      }

      .card-list {
        list-style: none;
        padding: 0;
        margin: 0 0 var(--space-6) 0;
        flex-grow: 1;

        li {
          font-size: var(--font-medium);
          color: rgb(var(--color-black-page));
          padding-left: var(--space-4);
          position: relative;
          margin-bottom: var(--space-2);

          &::before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--color-primary);
            font-weight: bold;
          }
        }
      }

      .line-link {
        color: rgb(var(--color-blue));
        font-weight: 600;
        font-size: var(--font-medium);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: color var(--transition-fast);

        span {
          margin-left: var(--space-2);
          transition: transform var(--transition-fast);
        }

        &:hover,
        &:focus {
          color: var(--color-primary);
          text-decoration: underline;

          span {
            transform: translateX(4px);
          }
        }
      }
    }
  }
}

/* Guía de Selección */
.solutions-guide {
  background-color: rgb(var(--color-grey-lite));
  padding: var(--space-12) var(--space-4);

  .guide-container {
    max-width: var(--container-xl);
    margin: 0 auto;
  }

  .guide-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);

    @media (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .guide-box {
    background-color: rgb(var(--color-white));
    border: 1px solid rgb(var(--color-border-grey));
    border-radius: var(--border-radius-medium);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    h3 {
      font-size: 1.15rem;
      color: rgb(var(--color-blue-2));
      margin-bottom: var(--space-3);
    }

    p {
      font-size: var(--font-medium);
      color: rgb(var(--color-grey));
      margin-bottom: var(--space-6);
      line-height: 1.5;
    }

    .btn {
      align-self: flex-start;
    }
  }
}

/* Puente a Cotización */
.solutions-quote-bridge {
  padding: var(--space-12) var(--space-4);

  .bridge-container {
    max-width: var(--container-md);
    margin: 0 auto;
  }

  .bridge-card {
    background-color: rgb(var(--color-white));
    border: 1px solid rgb(var(--color-border-grey));
    border-left: 5px solid var(--color-primary);
    border-radius: var(--border-radius-medium);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--box-shadow-2);
    text-align: center;

    .bridge-title {
      font-size: var(--font-title);
      color: rgb(var(--color-blue-2));
      margin-bottom: var(--space-3);
    }

    .bridge-desc {
      font-size: var(--size-medium);
      color: rgb(var(--color-grey));
      margin-bottom: var(--space-6);
      line-height: 1.6;
    }

    .bridge-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--space-3);
    }
  }
}

/* Animaciones sutiles con Observer */
.fade-in-section {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}

@media (prefers-reduced-motion: no-preference) {
  .fade-in-section:not(.is-visible) {
    opacity: 0;
    transform: translateY(12px);
  }
}