/* RESET Y VARIABLES DE ESTILO INDUSTRIAL */
:root {
  --primary-color: #ff6b00;
  --dark-color: #2b2a28;
  --light-bg: #f0f0ef;
  --card-bg: #ffffff;
  --text-color: #333333;
  --text-muted: #666666;
  --border-color: #e0e0e0;
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-family); background-color: #f9f9f9; color: var(--text-color); line-height: 1.6; }
a { text-decoration: none; color: inherit; }

/* BANNER PRINCIPAL */
.hero {
  background: linear-gradient(rgba(43,42,40,.88),rgba(43,42,40,.88)),
    url('https://picsum.photos/1600/600?grayscale') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 2.2rem 1rem;
}
.hero h1 { font-size: 2.1rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .5rem; }
.hero p { font-size: 1rem; max-width: 700px; margin: 0 auto; color: #ccc; }

/* TITULOS */
.section-title { text-align: center; font-size: 1.6rem; text-transform: uppercase; color: var(--dark-color); margin-bottom: 1.5rem; position: relative; }
.section-title::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--primary-color); margin: .5rem auto 0; }

/* CARRUSEL, AHORA DEBAJO DEL BANNER */
.secondary-section { width: 100%; margin: 0; padding: 1.5rem 0; background-color: #efefee; overflow: hidden; }
.marquee-container { width: 100%; overflow: hidden; position: relative; }
.marquee-track { display: flex; gap: 1.2rem; width: max-content; animation: scrollMarquee 25s linear infinite; }
.marquee-container:hover .marquee-track { animation-play-state: paused; }
.secondary-card { width: 220px; flex-shrink: 0; background-color: #fff; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.05); transition: transform .2s ease, box-shadow .2s ease; }
.secondary-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.secondary-card img { width: 100%; height: 110px; object-fit: cover; }
.secondary-info { padding: .75rem; }
.secondary-info h4 { font-size: .9rem; color: var(--dark-color); margin-bottom: .2rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secondary-info p { font-size: .78rem; color: var(--text-muted); line-height: 1.2; }
@keyframes scrollMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 0.6rem)); } }

/* CATALOGO PRINCIPAL */
.catalog-section { width: 95%; max-width: 1600px; margin: 1.5rem auto 3rem; padding: 0 .5rem; }
.filter-buttons { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.filter-btn { background-color: #fff; border: 2px solid var(--dark-color); color: var(--dark-color); padding: .6rem 1.4rem; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: all .3s ease; }
.filter-btn:hover, .filter-btn.active { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.machinery-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 1.5rem; }
.machine-card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,.05); transition: transform .3s ease, box-shadow .3s ease; display: flex; flex-direction: column; }
.machine-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,.15); }
.machine-card img { width: 100%; height: 240px; object-fit: cover; object-position: center; }
.machine-info { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.machine-info .category { font-size: .75rem; text-transform: uppercase; color: var(--primary-color); font-weight: 700; margin-bottom: .5rem; }
.machine-info h3 { font-size: 1.3rem; margin-bottom: .75rem; color: var(--dark-color); }
.machine-info p { font-size: .95rem; color: var(--text-muted); margin-bottom: 1.2rem; flex-grow: 1; }
.btn-detail { align-self: start; background-color: var(--dark-color); color: #fff; padding: .6rem 1.2rem; font-size: .85rem; font-weight: 600; border: none; cursor: pointer; text-transform: uppercase; transition: background-color .3s ease; }
.btn-detail:hover { background-color: var(--primary-color); }

/* MODAL DE DETALLES */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.75); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; }
.modal.active { display: flex; }
.modal-content { background-color: #fff; max-width: 650px; width: 100%; padding: 2rem; position: relative; border-radius: 4px; max-height: 95vh; overflow-y: auto; }
.modal-close { position: absolute; top: .8rem; right: 1rem; font-size: 1.8rem; background: none; border: none; cursor: pointer; color: var(--text-muted); }
.modal-content img { width: 100%; height: 300px; object-fit: cover; margin-bottom: 1rem; border-radius: 2px; }
.modal-content p { margin-top: 1rem; color: #555; }

/* PIE DE PAGINA */
footer { background-color: var(--dark-color); color: #aaa; text-align: center; padding: 2rem 1rem; margin-top: 4rem; font-size: .9rem; }
@media (max-width: 600px) {
  .hero h1 { font-size: 1.5rem; }
  .machinery-grid { grid-template-columns: 1fr; }
  .modal-content { padding: 1.5rem; }
}

/* Fichas técnicas del carrusel y visualización completa de imágenes */
.secondary-card { cursor: pointer; }
.secondary-card:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.secondary-card:hover { border-color: var(--primary-color); }
.modal-content { max-width: 900px; width: 95%; max-height: 95vh; overflow-y: auto; }
.modal-content img { width: 100%; height: auto; max-height: 65vh; object-fit: contain; object-position: center; display: block; }
.modal-content p { white-space: pre-line; line-height: 1.7; }

/* Imágenes principales clicables */
.machine-card img {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Efecto visual al pasar el mouse */
.machine-card img:hover {
    opacity: 0.85;
}