/* ========================================================================== pasto-sintetico.css Estilos específicos de la página Pasto Artificial. Reutiliza clases ya existentes en el proyecto (section-title, features-boxes-two, feature-box-two, latest-post-box, post-img, about-section, contact-hubspot-section, modelos-grid/modelo-card de vigas-pvc.css). Aquí solo se agregan reglas que no están cubiertas por esas hojas: - imagen real en modelo-card (en vez de color plano) + badge "Agotado" - subgrupos dentro de una sola sección de "Modelos y Presentaciones" - lista de beneficios en línea sobre el formulario de contacto (1 columna) - carrusel de imágenes de producto (Slick) en la sección de introducción, usando assets/css/slick.css ya enlazado en el ========================================================================== */ /* Card de modelo con imagen de textura real (en vez del bloque de color sólido usado en vigas-pvc.css) */ .modelos-seccion .modelo-img { position: relative; width: 100%; padding-top: 70%; background-size: cover; background-position: center; border-radius: 8px 8px 0 0; } /* Badge "Agotado" sobre la imagen del modelo */ .modelo-card .badge-agotado { position: absolute; top: 12px; right: 12px; background-color: #e63946; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; z-index: 2; } /* Atenúa la card marcada como agotada para reforzar el estado sin ocultar la info */ .modelo-card.modelo-agotado .modelo-img { filter: grayscale(35%); opacity: 0.85; } .modelo-card.modelo-agotado .modelo-sku, .modelo-card.modelo-agotado h5 { color: #9aa1a6; } /* --------------------------------------------------------------------- Grupos de modelos consolidados en una sola sección (Tipo Alfombra / Residencial y Deportivo / Pasto de Color) Reemplaza el patrón de 3 secciones completas con section-title propio por subtítulos ligeros dentro de una misma sección, reduciendo repetición visual y espacio vertical. --------------------------------------------------------------------- */ .modelos-grupo { margin-bottom: 55px; } .modelos-grupo:last-child { margin-bottom: 0; } .modelos-grupo-title { font-size: 20px; font-weight: 700; color: #17332b; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .modelos-grupo-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #5a8f6b; background-color: #eaf4ec; padding: 4px 10px; border-radius: 20px; } .modelos-grupo-desc { color: #6c7a76; font-size: 14px; margin-bottom: 20px; } /* --------------------------------------------------------------------- Beneficios en línea sobre el formulario de contacto (una sola columna) --------------------------------------------------------------------- */ .contact-benefits-inline { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding: 0; margin: 0 0 35px; text-align: center; } .contact-benefits-inline li { font-size: 14px; font-weight: 600; color: #17332b; } .contact-benefits-inline li i { color: #5a8f6b; margin-right: 6px; } .hubspot-form-wrapper { max-width: 640px; margin: 0 auto; } /* --------------------------------------------------------------------- Carrusel de imágenes del producto (Sección "Introducción") Usa Slick (assets/js/slick.min.js + assets/css/slick.css, ya enlazado en el ). Estas reglas solo dan estilo de marca a flechas y puntos; el comportamiento base del track/slides lo resuelve slick.css. --------------------------------------------------------------------- */ .product-carousel-wrapper { padding: 0; overflow: hidden; } .product-carousel img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; } /* Flechas */ .product-carousel .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border: none; border-radius: 50%; background-color: #fff; color: #17332b; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .product-carousel .slick-arrow i { font-size: 16px; color: #17332b; line-height: 1; } .product-carousel .slick-prev { left: 16px; } .product-carousel .slick-next { right: 16px; } .product-carousel .slick-arrow:hover { background-color: #5a8f6b; } .product-carousel .slick-arrow:hover i { color: #fff; } /* Puntos (dots) */ .product-carousel .slick-dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; z-index: 2; } .product-carousel .slick-dots li { line-height: 0; } .product-carousel .slick-dots button { font-size: 0; width: 9px; height: 9px; border-radius: 50%; border: none; background-color: rgba(255, 255, 255, 0.6); padding: 0; cursor: pointer; } .product-carousel .slick-dots li.slick-active button { background-color: #fff; box-shadow: 0 0 0 2px #5a8f6b; }