/* motor 3 · composiciones de arte para la serie B (sin 3D): tarjetas, arcos, mosaico, tipografía, pantalla */
.a-cards{position:relative;height:clamp(340px,44vw,560px)}
.ac{position:absolute;width:min(300px,62%);padding:22px 24px;border-radius:var(--r,20px);background:var(--card);border:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(0,0,0,.5);transform:rotate(var(--rot));transition:transform .5s}
.ac small{display:block;font:700 11.5px var(--bd);letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}.ac b{display:block;font:var(--hdw,700) clamp(22px,2.4vw,32px)/1.15 var(--hd);margin:8px 0}.ac span{color:var(--mut);font-size:15px}
.ac0{left:0;top:2%}.ac1{right:0;top:20%;background:var(--ac);color:var(--on)}.ac1 small,.ac1 span{color:var(--on);opacity:.85}.ac2{left:12%;bottom:8%}.ac3{right:6%;bottom:0;background:var(--ac2);color:var(--on2,var(--on))}.ac3 small,.ac3 span{color:inherit;opacity:.85}
.a-cards:hover .ac0{transform:rotate(-8deg) translate(-8px,-6px)}.a-cards:hover .ac1{transform:rotate(6deg) translate(8px,-4px)}
.a-arch{position:relative;height:clamp(340px,44vw,560px);display:flex;align-items:flex-end;justify-content:center;gap:14px}
.a-arch i{display:block;border-radius:999px 999px 0 0;flex:1;max-width:150px}.a-arch .r1{height:62%;background:var(--ac)}.a-arch .r2{height:92%;background:var(--ac2)}.a-arch .r3{height:74%;background:color-mix(in srgb,var(--ink) 14%,var(--bg2))}
.a-arch .am{position:absolute;left:6%;right:6%;bottom:8%;padding:20px 24px;border-radius:var(--r,20px);background:var(--bg);border:1px solid var(--line);box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}.a-arch .am b{display:block;font:var(--hdw,700) clamp(24px,2.8vw,38px)/1.1 var(--hd)}.a-arch .am span{color:var(--mut)}
.a-mos{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(100px,13vw,170px);gap:12px}
.mt{display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;border-radius:var(--r,20px);background:var(--card);border:1px solid var(--line);transition:transform .3s}.mt:hover{transform:translateY(-4px)}.mt span{font-size:clamp(26px,3vw,40px);color:var(--ac)}.mt small{font:700 13.5px var(--bd);color:var(--mut)}
.mt.t0{grid-row:span 2;background:var(--ac);color:var(--on)}.mt.t0 span,.mt.t0 small{color:var(--on)}.mt.t3{grid-column:span 2;background:var(--ac2);color:var(--on2,var(--on))}.mt.t3 span,.mt.t3 small{color:inherit}
.a-type{display:flex;flex-direction:column;justify-content:center;min-height:clamp(300px,40vw,520px)}.a-type b{font:var(--gw,800) clamp(110px,17vw,260px)/.86 var(--gf,var(--hd));letter-spacing:var(--gls,-.02em);text-transform:uppercase;color:transparent;background:linear-gradient(135deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text}.a-type i{font:italic 400 clamp(20px,2.2vw,30px)/1.3 var(--hde,var(--hd));color:var(--mut);margin-top:12px}
.a-dev{position:relative;min-height:clamp(320px,42vw,540px);display:grid;place-items:center}
.dv{width:min(430px,100%);padding:20px 22px 24px;border-radius:calc(var(--r,20px)*1.2);background:var(--card);border:1px solid var(--line);box-shadow:0 40px 80px -34px rgba(0,0,0,.55)}.dv .bar{display:flex;gap:6px;margin-bottom:14px}.dv .bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}.dv h4{font:700 20px var(--hd);margin-bottom:12px}
.dr{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15px}.dr span{color:var(--mut)}.dr b{color:var(--ink)}.dv .gr{display:flex;align-items:flex-end;gap:10px;height:110px;margin-top:18px}.dv .gr u{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--ac),var(--ac2));text-decoration:none}
.a-dev .pill{position:absolute;right:2%;bottom:8%;padding:12px 18px;border-radius:999px;background:var(--ac);color:var(--on);font:800 14px var(--bd);box-shadow:0 18px 36px -12px var(--ac);animation:fl 5s ease-in-out infinite}@keyframes fl{50%{transform:translateY(-8px)}}
@media (max-width:900px){.ac{width:min(250px,66%)}.a-mos{grid-template-columns:1fr 1fr}.mt.t3{grid-column:span 2}}
.heroB .grid>*{min-width:0}.a-type b{font-size:clamp(80px,13vw,210px);max-width:100%}
@media (max-width:900px){.a-type{min-height:200px}.a-type b{font-size:21vw}}