/* =====================================================================
   productos.css - toldos-hospitalet-productos(c).html y donde-estamos(c).html
   Cargar DESPUÉS de responsive.css y contacto.css.
   ===================================================================== */
/* ---------- Productos ---------- */
.productos {max-width:1040px}
.prod-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin:0; padding:0}
.prod-grid li {display:block; min-width:0}
.prod {display:block; height:100%; background:#fff; border:1px solid #e3dccf; border-radius:12px; overflow:hidden; color:#262626; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.06); transition:transform .15s, box-shadow .15s, border-color .15s}
.prod:hover, .prod:focus-visible {transform:translateY(-3px); border-color:#ff9601; box-shadow:0 8px 20px rgba(0,0,0,.16)}
.prod-img {display:block; aspect-ratio:243/174; overflow:hidden; background:#eee9e0}
.prod-img img {display:block; width:100%; height:100%; object-fit:cover}
.prod-name {display:block; padding:12px 12px 14px; border-top:3px solid #ff9601; text-align:center; font:700 15px/1.3 Arial, Helvetica, sans-serif; letter-spacing:.01em}
.prod:hover .prod-name {color:#950916}
.prod-cta {display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:36px; padding:24px 28px; background:#f7f5f1; border:1px solid #ebe5da; border-radius:12px}
.prod-cta-text {color:#444; font-size:17px; line-height:1.5}
.prod-cta .btn-inline {flex:0 0 auto; margin:0; text-decoration:none}
.btn-inline {display:inline-flex; align-items:center; justify-content:center; text-decoration:none}

/* ---------- Dónde estamos ---------- */
.donde {max-width:1040px}
.map-box {align-self:stretch; position:relative; min-height:420px; border-radius:12px; overflow:hidden; background:#eee9e0; box-shadow:0 6px 22px rgba(0,0,0,.2)}
.map-box iframe {position:absolute; inset:0; width:100%; height:100%; border:0}
.map-btn {height:auto; min-height:50px; margin-top:16px; padding:10px 14px; text-align:center; line-height:1.25; text-decoration:none}
.nb {white-space:nowrap}
.hrs-call {margin-top:14px}

@media (max-width:1019px) {
    .prod-grid {grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
}
@media (max-width:768px) {
    .prod-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
    .prod-name {padding:10px 8px 12px; font-size:14px}
    .prod-cta {flex-direction:column; align-items:stretch; text-align:center; padding:20px; gap:16px}
    .prod-cta .btn-inline {width:100%}
    .map-box {min-height:0; height:340px}
}
@media (prefers-reduced-motion:reduce) {.prod {transition:none}}