/* Punto 1: directorio por industria y aplicación. */
.product-directory-container { width: min(100%, 1312px); margin-inline: auto; padding-inline: 32px; }
.product-directory { padding-block: 32px 48px; }
.product-directory-heading { margin-bottom: 0; }
.product-directory-heading > h2 { margin-inline: auto; text-align: center; color: #1a2a3a; font-size: clamp(26px, 2.5vw, 34px); font-weight: 700; line-height: 1.2; }
.product-group { margin-top: 32px; scroll-margin-top: 80px; }
.product-group + .product-group { margin-top: 80px; }
.product-group-heading { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 24px; text-align: center; }
.product-group-heading h2 { flex-shrink: 0; color: #1a2a3a; font-size: 24px; font-weight: 700; line-height: 1.3; }
.product-group-heading::before, .product-group-heading::after { content: ''; height: 1px; flex: 1; background: #e0e7e3; }
.product-directory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.product-directory-grid > .product-entry { grid-column: span 2; }
.product-directory .product-entry { position: relative; display: flex; align-items: end; isolation: isolate; min-width: 0; min-height: 320px; overflow: hidden; background: #1a2a3a; color: white; text-decoration: none; }
.product-entry-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-entry::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26,42,58,.44) 0%, rgba(26,42,58,.56) 60%, rgba(16,31,45,.95) 100%); }
.product-entry::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #1a2a3a; opacity: 0; transition: opacity .25s ease; }
.product-entry-content { width: 100%; padding: 26px; }
.product-entry-content h3 { margin: 0; color: white; font-size: 19px; line-height: 1.3; font-weight: 600; text-wrap: balance; }
.product-entry-reveal { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .3s ease, opacity .25s ease; }
.product-entry-detail { min-height: 0; overflow: hidden; }
.product-entry-detail p { margin: 14px 0 18px; color: #fff; font-size: 14px; line-height: 1.5; }
.product-entry-cta { display: inline-flex; align-items: center; gap: 30px; min-height: 40px; padding: 9px 19px; border-radius: 22px; background: #39754c; color: #fff; font-size: 14px; font-weight: 600; }
.product-directory .product-entry:focus-visible { outline: 3px solid #66ac7c; outline-offset: 3px; z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .product-entry-reveal { grid-template-rows: 0fr; opacity: 0; }
  .product-entry:hover::after, .product-entry:focus::after { opacity: .98; }
  .product-entry:hover .product-entry-reveal, .product-entry:focus .product-entry-reveal { grid-template-rows: 1fr; opacity: 1; }
  .product-entry:hover .product-entry-image { transform: scale(1.045); }
}
@media (hover: none), (pointer: coarse) {
  .product-entry::before { background: linear-gradient(180deg, rgba(26,42,58,.44), rgba(16,31,45,.9) 50%, #1a2a3a); }
}
.product-directory-grid > .product-entry:last-child:where(:nth-child(odd)) { grid-column: 2 / span 2; }
/* Dos celdas por tarjeta permiten centrar la fila incompleta sin cambiar tamaños. */
@media (min-width: 1100px) {
  .product-directory-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .product-directory-grid > .product-entry:nth-child(n) { grid-column: span 2; }
}
@media (max-width: 639px) {
  .product-directory-container { padding-inline: 16px; }
  .product-directory { padding-block: 28px 40px; }
  .product-group { margin-top: 24px; scroll-margin-top: 24px; }
  .product-group + .product-group { margin-top: 56px; }
  .product-group-heading { margin-bottom: 16px; gap: 12px; }
  .product-group-heading h2 { flex-shrink: 1; font-size: 21px; }
  .product-directory-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .product-directory-grid > .product-entry:nth-child(n) { grid-column: auto; }
  .product-directory .product-entry { min-height: 310px; }
  .product-entry-content { padding: 22px; }
  .product-entry-content h3 { font-size: 20px; }
  .product-entry-reveal { grid-template-rows: 1fr; opacity: 1; }
  .product-entry::before { background: linear-gradient(180deg, rgba(26,42,58,.44), rgba(16,31,45,.88) 48%, #1a2a3a); }
}

/* Encuadre de jardinería: priorizar el uso visible a la derecha. */
[aria-labelledby="tile-jardineria-title"] .product-entry-image { object-position: right center; }

/* Encuadre de ductos: mostrar el caño expuesto y el comienzo de la protección. */
[aria-labelledby="tile-proteccion-ductos-title"] .product-entry-image { object-position: right center; }

/* Automotriz: dar más lugar al habitáculo y las puertas sin perder el frente. */
[aria-labelledby="tile-automotriz-title"] .product-entry-image { object-position: 65% center; }

/* Hospitalaria: cubrir toda la tarjeta sin franjas vacías. */
[aria-labelledby="tile-hospitalaria-title"] .product-entry-image { object-fit: cover; object-position: center center; }

/* Encabezado breve: presentación de soluciones antes del directorio. */
.product-overview-hero { padding-block: 48px; }
.product-overview-description { max-width: 850px; margin-top: 20px; font-size: 20px; line-height: 1.55; }
@media (max-width: 639px) {
  .product-overview-hero { padding-block: 32px; }
  .product-overview-hero h1 { font-size: 32px; line-height: 1.15; }
  .product-overview-description { margin-top: 16px; font-size: 17px; }
}