/* 05 Materiales */

.materials { background: var(--bg-alt) !important; }
.materials__grid {
  margin-top: clamp(40px, 7vh, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 20px;
}
/* Separador entre lana y filtro de celulosa */
.materials__grid::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  background: var(--line);
}
.material--pead { grid-column: 1; grid-row: 1; }
.material--wool { grid-column: 2; grid-row: 1; }
.material--cellulose { grid-column: 4; grid-row: 1; }
.material {
  position: relative;
  min-height: clamp(380px, 58vh, 600px);
  border-radius: var(--radius-l);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03), 0 20px 50px rgba(0, 0, 0, 0.07);
}
.material:nth-child(2) { --d: 120ms; }
.material:nth-child(3) { --d: 240ms; }
.material__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: transform 1400ms var(--ease-out);
}
@media (hover: hover) {
  .material:hover .material__texture { transform: scale(1.04); }
}
.material__copy {
  width: 100%;
  padding: 120px 32px 32px;
}
.material--pead .material__copy,
.material--cellulose .material__copy { background: linear-gradient(to top, rgba(3, 24, 42, 0.78), transparent); color: #fff; }
.material--pead .material__copy p,
.material--cellulose .material__copy p { color: rgba(255, 255, 255, 0.88); }
.material--wool .material__copy { background: linear-gradient(to top, rgba(251, 246, 238, 0.95), transparent); }
.material--wool .material__copy p { color: #5e574d; }
.material h3 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.4vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.material p {
  margin-top: 10px;
  max-width: 34ch;
  font-size: 1.0625rem;
  line-height: 1.47;
}
@media (max-width: 1100px) {
  /* El PEAD ocupa dos filas a la izquierda; lana y celulosa apiladas a la derecha */
  .materials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .materials__grid::after { grid-column: 2; grid-row: 2; height: 1px; }
  .material--pead { grid-row: 1 / 4; }
  .material--wool,
  .material--cellulose { grid-column: 2; min-height: clamp(300px, 34vh, 420px); }
  .material--cellulose { grid-row: 3; }
}
@media (max-width: 760px) {
  /* PEAD arriba a todo el ancho; lana y celulosa lado a lado debajo */
  .materials__grid { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 16px 12px; }
  .material { min-height: 340px; }
  .material--pead { grid-column: 1 / -1; grid-row: 1; }
  .materials__grid::after { grid-column: 2; grid-row: 2; height: auto; }
  .material--wool,
  .material--cellulose { grid-row: 2; min-height: 300px; }
  .material--wool { grid-column: 1; }
  .material--cellulose { grid-column: 3; }
  .material__copy { padding: 100px 24px 26px; }
  .material--wool .material__copy,
  .material--cellulose .material__copy { padding: 72px 14px 16px; }
  /* El texto de la celulosa llega casi arriba: degradado más alto para que se lea */
  .material--cellulose .material__copy { background: linear-gradient(to top, rgba(3, 24, 42, 0.82) 55%, transparent); }
  .material--wool h3,
  .material--cellulose h3 { font-size: 1.25rem; }
  .material--wool p,
  .material--cellulose p { margin-top: 6px; font-size: 0.8125rem; line-height: 1.4; }
}