.detail-page{padding:70px 6vw}.detail-head{text-align:center;max-width:820px;margin:0 auto 38px}.detail-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1180px;margin:auto}.detail-photo{height:250px;border-radius:10px;background-size:300% 200%;background-repeat:no-repeat;box-shadow:0 10px 25px rgba(20,48,33,.15);opacity:0;transform:translateY(24px) scale(.97);transition:opacity .55s ease,transform .55s ease}.detail-photo.show{opacity:1;transform:translateY(0) scale(1)}.detail-photo:hover{transform:translateY(-7px) scale(1.02);box-shadow:0 18px 34px rgba(20,48,33,.25)}.p1{background-position:0 0}.p2{background-position:50% 0}.p3{background-position:100% 0}.p4{background-position:0 100%}.p5{background-position:50% 100%}.p6{background-position:100% 100%}.tech-card{max-width:1000px;margin:54px auto 0;background:#fff;padding:38px;box-shadow:0 13px 32px rgba(20,48,33,.1);border-left:5px solid #c79746;opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}.tech-card.show{opacity:1;transform:translateY(0)}.tech-card h2{color:#205c42}.tech-card p{margin:15px 0}@media(max-width:700px){.detail-page{padding:54px 24px}.detail-gallery{grid-template-columns:1fr 1fr}.detail-photo{height:180px}.tech-card{padding:27px}}@media(max-width:440px){.detail-gallery{grid-template-columns:1fr}.detail-photo{height:230px}}

.tech-summary {
  max-width: 820px;
  font-size: 1.08rem;
  color: #314b3e;
}

body.wood-detail {
  background:
    linear-gradient(rgba(246, 242, 232, .70), rgba(246, 242, 232, .84)),
    url('assets/fondo-maderas-v2.jpg') center / cover fixed;
}

body.wood-detail .topbar {
  background: rgba(246, 242, 232, .78);
  border-bottom: 1px solid rgba(199, 151, 70, .35);
  box-shadow: 0 8px 24px rgba(24, 49, 38, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.detail-photo.single-photo {
  background-size: cover;
  background-position: center;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0;
}

.tech-item {
  padding: 20px;
  background: #f8f5ed;
  border-top: 3px solid #c79746;
  border-radius: 6px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.tech-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(20, 48, 33, .12);
}

.tech-item h3 {
  margin: 0 0 10px;
  color: #205c42;
  font-size: 1.2rem;
}

.tech-item p {
  margin: 0;
}

.tech-note {
  margin: 4px 0 26px !important;
  padding: 15px 18px;
  background: rgba(199, 151, 70, .13);
  border-left: 3px solid #c79746;
}

.detail-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.detail-actions .quote-button{margin-top:0;border-color:#205c42;background:#205c42;color:#fff}
.detail-actions .quote-button:hover,.detail-actions .quote-button:focus-visible{background:#174a35;color:#fff}

.detail-photo[role="img"]:focus-visible{outline:3px solid #c79746;outline-offset:4px}

@media (max-width: 700px) {
  .tech-grid {
    grid-template-columns: 1fr;
  }
  .detail-actions{align-items:stretch;flex-direction:column}
  .detail-actions .button,.detail-actions .quote-button{width:100%;text-align:center}
}

@media (prefers-reduced-motion: reduce) {
  .tech-item {
    transition: none;
  }
}