/* ==========================================================
   DURATECFRANCE · hero
   Portada
   ========================================================== */

/* HERO */
.hero{padding-block:clamp(32px,6vw,72px) clamp(40px,7vw,90px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 16px;align-items:start}
.hero-note{grid-column:1/4;grid-row:1;padding-top:18px;display:flex;flex-direction:column;gap:18px}
.hero-art{grid-column:4/13;grid-row:1;position:relative;min-height:560px}
.hero-art .block.a{background:var(--gold);right:-3%;top:10%;width:40%;height:90%}
.hero-art .plate.main{position:absolute;left:8%;top:0;width:86%;height:80%}
.hero-art .plate.side1{position:absolute;right:6%;top:6%;width:25%;aspect-ratio:1;z-index:2}
.hero-art .plate.side2{position:absolute;right:15%;bottom:2%;width:30%;aspect-ratio:1.15;z-index:2}
.hero-art .titlebox{position:absolute;left:0;bottom:8%;width:min(60%,520px)}
.hero-art .titlebox h1{font-size:clamp(1.9rem,4.4vw,3.4rem)}
.hero-art .titlebox p{margin-top:12px;font-family:var(--f-mono);font-size:.74rem;color:var(--copper);font-weight:700;letter-spacing:.06em}
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .hero-note{grid-column:1;grid-row:2;padding-top:26px}
  .hero-art{grid-column:1;grid-row:1;min-height:480px}
  .hero-art .plate.main{left:0;width:94%;height:62%}
  .hero-art .plate.side1{width:30%;right:0;top:4%}
  .hero-art .plate.side2{width:36%;right:4%;bottom:12%}
  .hero-art .titlebox{width:84%;bottom:0}
}