/* ==========================================================
   DURATECFRANCE · sections
   Impacto, Quiénes somos, Ventajas
   ========================================================== */

/* IMPACT */
.impact{padding-block:clamp(40px,6vw,80px);background:var(--band)}
.impact-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,72px);align-items:center}
.impact-num{position:relative;min-height:300px}
.impact-num .block{left:0;right:18%;top:10%;bottom:-8%}
.impact-num .titlebox{position:absolute;left:12%;top:0;right:-4%;z-index:3;padding:clamp(20px,3vw,40px)}
.bignum{white-space:nowrap;font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,6.4vw,5.2rem);letter-spacing:-.04em;line-height:.9;color:var(--copper)}
.impact-num .lab{position:absolute;left:0;bottom:10%;top:auto;transform:none;z-index:4;margin:0}
.impact-txt p{font-size:1.04rem;max-width:56ch}
.impact-txt .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.impact-txt .cards div{background:var(--gold);color:var(--on-gold);padding:16px}
.impact-txt .cards h4{font-size:1.02rem;margin-bottom:6px}
.impact-txt .cards p{font-size:.84rem;line-height:1.45}
@media(max-width:820px){.impact-grid{grid-template-columns:1fr}.impact-num{min-height:190px;margin-bottom:34px}.impact-txt .cards{grid-template-columns:1fr}}

/* ABOUT */
.about{padding-block:clamp(48px,7vw,96px);background:var(--beige);color:#0B0C0E;--fg:#0B0C0E;--muted:#4B4F56}
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:center}
.about-art{grid-column:1/7;position:relative;min-height:520px}
.about-art .block{left:22%;top:12%;right:-6%;bottom:-4%;background:var(--ink)}
.about-art .plate{position:absolute}
.about-art .p1{left:0;top:0;width:42%;aspect-ratio:1}
.about-art .p2{left:36%;top:14%;width:42%;aspect-ratio:1.1;z-index:2}
.about-art .p3{left:8%;bottom:0;width:48%;aspect-ratio:1.4;z-index:2}
.about-art .p4{right:0;bottom:8%;width:34%;aspect-ratio:1;z-index:2}
.about-txt{grid-column:8/13}
.about-txt h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:20px}
.about-txt p+p{margin-top:14px}
.about-txt .sig{text-decoration:none;cursor:pointer;margin-top:22px;display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:.78rem;font-weight:700;color:var(--copper)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}.about-art,.about-txt{grid-column:1}.about-art{min-height:420px;margin-bottom:30px}}

/* ATOUTS */
.atouts{background:#000;color:var(--on-navy);padding-block:clamp(44px,6vw,84px)}
.atouts h2{font-size:clamp(1.8rem,3.4vw,2.7rem);max-width:18ch;margin-bottom:34px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tiles>div{padding:26px 22px 30px;display:flex;flex-direction:column;gap:14px;min-height:240px}
.tiles>div:nth-child(1){background:#fff;color:#0B0C0E}
.tiles>div:nth-child(2){background:var(--gold);color:#0B0C0E;z-index:2}
.tiles>div:nth-child(3){background:var(--navy-soft);color:#F4F1EA;box-shadow:inset 0 0 0 1px #2A2D33}
.tiles>div:nth-child(4){background:var(--beige);color:#0B0C0E}
.tiles svg{width:38px;height:38px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tiles h3{font-size:1.2rem}
.tiles p{font-size:.88rem;line-height:1.5;opacity:.92}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tiles{grid-template-columns:1fr}}
.about-txt .sig svg{transition:transform .3s ease}
.about-txt .sig:hover span,.about-txt .sig:focus-visible span{text-decoration:underline;text-underline-offset:5px}
.about-txt .sig:hover svg,.about-txt .sig:focus-visible svg{transform:translateX(8px)}

/* Cuadros de ventajas: movimiento */
.tiles>div{position:relative;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;-webkit-tap-highlight-color:transparent;outline:none}
.tiles>div:hover,.tiles>div.on,.tiles>div:focus-visible{transform:translateY(-14px) rotate(-1.4deg) scale(1.04);box-shadow:0 24px 44px rgba(0,0,0,.5);z-index:5}
.tiles>div:nth-child(even):hover,.tiles>div.on:nth-child(even),.tiles>div:nth-child(even):focus-visible{transform:translateY(-14px) rotate(1.4deg) scale(1.04)}
.tiles>div:hover svg,.tiles>div.on svg{animation:tileIcon .7s ease}
.tiles.in>div{animation:tileIn .8s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*110ms)}
.tiles.in>div.bump{animation:tileBump .45s cubic-bezier(.3,1.6,.5,1);animation-delay:0s}
@keyframes tileIn{from{opacity:0;transform:translateY(46px) scale(.94)}}
@keyframes tileIcon{0%,100%{transform:none}25%{transform:rotate(-14deg) scale(1.18)}60%{transform:rotate(10deg) scale(1.12)}}
@keyframes tileBump{0%{transform:scale(.95)}100%{transform:translateY(-14px) rotate(-1.4deg) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.tiles>div,.tiles>div:hover,.tiles>div.on{transition:none;transform:none;animation:none!important}}