/* Bang para artistas — se carga después de style.css y reutiliza todo lo de la landing.
   El acento (--ac) sale de la paleta elegida en <body data-pal="…"> (ver style.css). */
body.art{--blue:var(--ac);--blue-dark:var(--ac-dark);--soft:var(--ac-soft);--line:var(--ac-line)}
.art .nav{--blue:#005AFF;--blue-dark:#0041BD;--soft:#F3F6FF;--line:#E3E8F5}
.art .nav__menu a.is-here{color:var(--ac-ink);font-weight:700}
.art .nav__menu a.is-here::after{width:100%;background:var(--ac-ink)}

.art .hero h1{max-width:20ch;font-size:clamp(2.1rem,4.6vw,3.9rem)}
.art .hero .lead{max-width:560px}
.art .about__title h2{font-size:clamp(2rem,4vw,3.1rem)}

.art .section h2{font-size:clamp(2.2rem,5vw,3.4rem)}
.art .sec-head{margin-bottom:clamp(28px,4vw,48px);max-width:720px}
.art .sec-head .plans__sub{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.25}
.art .sec-head .plans__lead{margin-top:14px}
.art .sec-head--ink h2,.art .about h2 span,.art .sec-title--blue,.art .contact__list a,.art .foot__links a,.art .form__status.is-ok{color:var(--ac-ink)}
.art .sec-head--ink .plans__sub{color:var(--ink)}
.art .sec-head--ink .plans__lead{color:var(--muted)}
.art .group-label{display:block;font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;opacity:.9}

/* Grillas de 4 */
.art-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}

/* Tarjetas glass con hover en el acento */
.art .card{padding:26px 24px;display:flex;flex-direction:column;box-shadow:0 6px 18px -10px var(--ac-shadow),inset 0 1px 0 rgba(255,255,255,.25)}
.art .card:hover{background:linear-gradient(145deg,var(--ac-hov-a),var(--ac-hov-b));box-shadow:0 8px 22px -10px var(--ac-shadow),inset 0 1px 0 rgba(255,255,255,.35)}
.art .card svg{width:44px;height:44px;margin-bottom:16px}
.art .card h3{font-size:1.15rem;margin-bottom:8px;line-height:1.15}
.art .card p{font-size:.95rem;line-height:1.5}
.art .card--cta{justify-content:space-between;gap:18px}
.art .card--cta p{font-size:1.02rem;font-weight:500;color:#fff}
.art .card--cta .btn{align-self:flex-start}
.art .btn--white{color:var(--ac)}
.art .btn--white:hover{background:var(--ac-soft);border-color:var(--ac-soft)}

/* Producción: fichas claras que se pintan con el acento */
.tile{display:flex;flex-direction:column;padding:26px 24px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--line);color:var(--ink);transition:transform .25s,background .25s,color .25s,border-color .25s}
.tile svg{width:44px;height:44px;margin-bottom:16px;fill:none;stroke:var(--ac);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.tile h3{font-size:1.15rem;line-height:1.15;margin-bottom:8px;letter-spacing:-.01em}
.tile p{font-size:.95rem;line-height:1.5;color:var(--muted);transition:color .25s}
.tile:not(.tile--cta):hover{transform:translateY(-4px);background:var(--ac);border-color:var(--ac);color:#fff}
.tile:not(.tile--cta):hover svg{stroke:#fff}
.tile:not(.tile--cta):hover p{color:rgba(255,255,255,.92)}
.tile.reveal.in:not(.tile--cta):hover{transform:translateY(-4px)}
.tile--cta{background:var(--ac);border-color:var(--ac);color:#fff;justify-content:space-between;gap:18px}
.tile--cta p{font-size:1.02rem;font-weight:500;color:#fff}
.tile--cta .btn{align-self:flex-start}

/* Cierre */
.close{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,6vw,80px);align-items:start}
.close h2{max-width:12ch}
.close__txt p{font-size:1.12rem;color:rgba(255,255,255,.92);margin-bottom:16px}
.close__txt p.strong{font-size:1.4rem;font-weight:800;color:#fff;margin:22px 0 26px;line-height:1.25}
.close__cta{display:flex;flex-wrap:wrap;gap:14px}

.art .field input:focus,.art .field select:focus,.art .field textarea:focus{box-shadow:0 0 0 3px var(--ac-glow)}
.art .field input,.art .field select,.art .field textarea{border-color:var(--ac-line)}

@media (max-width:1100px){.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.close{grid-template-columns:1fr}.close h2{max-width:none}}
@media (max-width:600px){.art-grid{grid-template-columns:1fr}}

.close__lead{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.close__lead .vinyl{width:clamp(150px,20vw,240px)}
body[data-pal="verde"] .ticker{color:var(--ac)}