/* ==========================================================================
PÁGINA PRINCIPAL DE ACERO INOXIDABLE - INDUAGAR S.A.S.
Uso de CSS Nesting nativo y variables existentes del sistema
========================================================================== */

/* Hero Acero Inoxidable */
.steel-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. - Acero Inoxidable";
        color: rgb(var(--color-grey));
        font-weight: 600;
      }
    }
  }
}

/* Introducción a la línea */
.steel-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;
    }
  }
}

/* Cuadrícula de Categorías (Catálogo) */
.steel-categories {
  padding: var(--space-6) var(--space-4) var(--space-12);

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

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

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

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

  .category-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: "Mobiliario Acero Inoxidable";
          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-6);
        flex-grow: 1;
        line-height: 1.5;
      }
    }
  }
}

/* Fabricación a Medida */
.steel-custom {
  padding: var(--space-12) var(--space-4) 0;

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

  .custom-card {
    background-color: rgb(var(--color-grey-lite));
    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);

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

    .custom-description {
      font-size: var(--size-medium);
      color: rgb(var(--color-grey));
      margin-bottom: var(--space-6);
      max-width: var(--container-md);
      line-height: 1.6;
    }

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

/* Beneficios Constructivos */
.steel-benefits {
  padding: var(--space-12) var(--space-4);

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

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

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

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

  .benefit-item {
    background-color: rgb(var(--color-white));
    border: 1px solid rgb(var(--color-border-grey));
    border-radius: var(--border-radius-medium);
    padding: var(--space-6);

    .benefit-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.2rem;
      height: 2.2rem;
      background-color: var(--color-primary);
      color: rgb(var(--color-white));
      font-weight: 700;
      border-radius: var(--border-radius-circle);
      margin-bottom: var(--space-3);
    }

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

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

/* FAQ de Acero Inoxidable */
.steel-faq {
  background-color: rgb(var(--color-grey-lite));
  padding: var(--space-12) var(--space-4);

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

  .faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .faq-item {
    background-color: rgb(var(--color-white));
    border: 1px solid rgb(var(--color-border-grey));
    border-radius: var(--border-radius-medium);
    padding: var(--space-4);

    summary {
      font-weight: 600;
      color: rgb(var(--color-black-page));
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }
    }

    .faq-answer {
      margin-top: var(--space-3);
      font-size: var(--font-medium);
      color: rgb(var(--color-grey));
    }
  }
}

/* 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);
  }
}