/* ============================================================
   Portada "productos primero" (elegida por Alessandro el 20 sep 2026 sobre el hero con foto)
   Sin hero de foto: una franja verde compacta con el título y el
   toggle de unidades, y las tres tarjetas de producto montadas
   sobre la franja, visibles de entrada. El resto de la página es
   idéntico a index.html.
   ============================================================ */

/* Header siempre sobre fondo verde (no hay hero transparente debajo) */
.v2 .site-header { background: rgba(59, 104, 61, 0.97); border-bottom-color: var(--line-on-dark); }

/* ---------- franja ---------- */
.pf { position: relative; overflow: hidden; background: var(--forest); color: var(--white); padding: 122px 0 300px; } /* el fondo verde llega hasta la mitad de la foto de las tarjetas (300 = 150 de solape + 150 de media foto) */
.pf-bg { position: absolute; inset: 0; background-size: cover; background-position: center 40%; opacity: .16; filter: saturate(.6); }
.pf::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(59,104,61,0) 0%, rgba(59,104,61,.55) 100%); }
.pf .container { position: relative; z-index: 1; }
.pf-head { display: grid; grid-template-columns: 7fr 5fr; column-gap: 48px; align-items: end; }
.pf .eyebrow { color: var(--lime); margin-bottom: 12px; }
.pf h1 { color: var(--white); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.02em; margin: 0; max-width: 19ch; }
.pf h1 .word { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.pf h1 .word > span { display: inline-block; }
.pf-side p { color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.5; margin: 0 0 16px; }
.pf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pf .unit-toggle { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.pf .unit-toggle button { color: rgba(255,255,255,.8); }
.pf .unit-toggle button.on { background: var(--lime); color: var(--ink); }
.pf .count { display: none; } /* redundante con el toggle; el id #count lo sigue usando js/catalogo.js */
.pf-tools .btn { margin-left: 4px; }

/* ---------- tarjetas montadas sobre la franja ---------- */
.pf-products.section { padding: 0 0 56px; display: flow-root; } /* flow-root: que el margen negativo de #grid no "colapse" y arrastre la sección (y su fondo blanco) sobre la franja verde */
.pf-products #grid { position: relative; z-index: 2; margin-top: -150px; }
.pf-products .prod { box-shadow: 0 30px 60px -30px rgba(16, 22, 12, .45), 0 2px 0 rgba(255,255,255,.6) inset; }
.pf-products #grid .prod .art { height: 300px; background: linear-gradient(160deg, #ffffff, #f2f6f0); }
.pf-products #grid .prod .art img { height: 262px; }
.pf-products .prod-intro { margin-top: 34px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .pf { padding: 104px 0 240px; }
  .pf-head { grid-template-columns: 1fr; row-gap: 18px; }
  .pf h1 { max-width: none; }
  .pf-products #grid { margin-top: -120px; }
  .pf-products #grid .prod .art { height: 240px; }
  .pf-products #grid .prod .art img { height: 208px; }
}
@media (max-width: 640px) {
  .pf { padding: 92px 0 145px; }
  .pf h1 { font-size: 1.7rem; }
  .pf-side p { font-size: .92rem; }
  .pf-tools .btn { margin-left: 0; }
  .pf-products #grid { margin-top: -70px; }
  .pf-products #grid .prod .art { height: 150px; }
  .pf-products #grid .prod .art img { height: 124px; }
}

/* ---------- fondo de "Productos y servicios": la bodega de bloques (foto de Nosotros recortada sin techo,
   assets/photos/bodega-bloques.jpg) con filtro blanco, como el hero pero en claro (Alessandro, 20 sep 2026) ---------- */
.pf-products.section--soft { position: relative; background: var(--paper-soft); }
.pf-products::before { content: ""; position: absolute; inset: 0; background: url("../assets/photos/bodega-bloques.jpg") center center / cover no-repeat; z-index: 0; }
.pf-products::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.84); z-index: 0; }
.pf-products > .container { position: relative; z-index: 1; }
.pf-products .prod-intro .section-hint { background: rgba(255,255,255,.7); }