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

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


}
}

/* Introducción a la categoría */
.machinery-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) */
.machinery-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: "Fotografía de categoría";
      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;
  }
}


}
}

/* Guía de Selección */
.machinery-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-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);

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


}

.guide-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);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-4);

@media (min-width: 640px) {
  flex-direction: row;
  align-items: center;
}

.guide-content {
  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;
  }
}

.btn {
  white-space: nowrap;
  align-self: flex-start;

  @media (min-width: 640px) {
    align-self: center;
  }
}


}
}

/* Fabricación a Medida */
.machinery-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);
}
}

/* Cuadro Informativo para Cotizaciones */
.machinery-quote-info {
padding: var(--space-12) var(--space-4);

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

.quote-info-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;

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

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


}
}

/* FAQ de Maquinaria */
.machinery-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);
}
}