.studio{background:var(--green);color:var(--bg);padding:46px 5.5% 30px}.studio-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;min-height:570px}.studio-copy{padding:10px 0 36px;position:relative;z-index:2}.studio h2{font-size:clamp(48px,5.2vw,76px)}.studio h2>span{color:#186b47}.studio-copy>p{max-width:325px;font-size:14px;line-height:1.65;margin-top:25px}.studio-hint{display:flex;align-items:center;gap:50px;margin-top:27px;font-size:12px}.studio-hint>span{font-size:32px}.workbench{position:relative;min-height:550px;isolation:isolate;overflow:hidden}.bench-word{font-family:Proxima,sans-serif;font-size:clamp(60px,8.5vw,125px);line-height:.8;letter-spacing:-.04em;color:#186b47;position:absolute;top:20px;left:10px;opacity:.45}.bench-cross{position:absolute;right:12px;top:2px;font-size:100px;line-height:1;transform:rotate(10deg);color:var(--bg);z-index:2;transition:transform .24s var(--ease)}.workbench:has([data-visual=social].is-active) .bench-cross{transform:rotate(55deg)}.workbench:has([data-visual=campaign].is-active) .bench-cross{transform:rotate(100deg)}.visual-set{position:absolute;inset:0;animation:piece-in .24s var(--ease) both}.piece{background:var(--fg);padding:7px 7px 0;box-shadow:0 13px 24px #14251c24;position:absolute}.piece img{display:block;width:100%;height:auto}.piece figcaption{font-size:10px;color:var(--bg);padding:10px 4px}.piece-one{width:49%;max-width:255px;top:70px;left:10%;transform:rotate(-11deg)}.piece-two{width:57%;max-width:300px;top:244px;left:37%;transform:rotate(10deg)}.bench-caption{position:absolute;bottom:18px;left:14px;font-size:12px;transform:rotate(-3deg)}[data-visual=campaign] .piece-one{max-width:224px;left:14%;top:93px}[data-visual=campaign] .piece-two{max-width:224px;left:48%;top:232px}[data-visual=social] .piece-one{max-width:215px;top:73px}[data-visual=social] .piece-two{max-width:215px;left:49%;top:203px}
.studio-services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #186b47;border-bottom:1px solid #186b47}.studio-services button{position:relative;background:transparent;border:0;text-align:left;color:var(--bg);padding:24px 22px;transition:background .2s var(--ease),color .2s var(--ease)}.studio-services button+button{border-left:1px solid #186b47}.studio-services button[aria-pressed=true]{background:var(--bg);color:var(--green)}.studio-services button>span{font-family:Proxima,sans-serif;font-size:26px;letter-spacing:-.025em}.studio-services small{display:block;font-size:13px;line-height:1.6;margin-top:13px}.studio-services b{position:absolute;right:16px;bottom:20px;font-weight:400;font-size:26px}.studio-services button:hover b{transform:translate(2px,-2px)}

.studio{max-width:1800px;margin:auto}.studio h2{font-family:Proxima,sans-serif;letter-spacing:-.035em;line-height:.94}.studio figure{margin:0}.studio .piece img{aspect-ratio:auto;object-fit:contain}.studio .extras{padding-top:24px;display:flex;justify-content:space-between;gap:20px;font-size:12px;line-height:1.7}.studio .extras i{font-style:normal;opacity:.5;margin-inline:12px}
.service-playback{display:flex;justify-content:flex-end;align-items:center;gap:18px;padding-top:16px;font-size:11px}.service-playback button{color:var(--bg);background:transparent;border:1px solid #186b47;border-radius:3px;padding:9px 13px;min-height:42px;display:flex;align-items:center;gap:12px}.studio :focus-visible{outline:2px solid var(--bg);outline-offset:4px}.studio-services button[aria-pressed=true]:focus-visible{outline-color:var(--green);outline-offset:-5px}.visual-set.is-active{animation:service-piece-in .24s var(--ease) both}
@keyframes service-piece-in{from{opacity:0;transform:translateY(8px) rotate(-1deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(max-width:1000px){.studio .extras{display:block}.studio .extras p{margin-top:8px}.studio-grid{grid-template-columns:1fr 1fr;min-height:540px}.studio-services button{padding:20px 14px}.studio-services button>span{font-size:22px}.studio-services small{font-size:12px}.piece-two{left:33%;top:220px}.studio-copy>p{font-size:13px}.workbench{min-height:520px}}
@media(max-width:650px){.studio{padding:35px 6% 28px}.studio-grid{display:block;min-height:0}.studio h2{font-size:50px;max-width:340px}.studio h2 br{display:none}.studio h2>span{display:block;margin-top:5px}.studio-copy{padding:0}.studio-copy>p{font-size:13px;max-width:310px;margin-top:22px}.studio-hint{display:none}.workbench{min-height:425px;margin-top:25px}.bench-word{font-size:90px}.bench-cross{font-size:80px}.piece-one{top:56px;max-width:170px;left:10%}.piece-two{top:185px;left:35%;max-width:205px}.bench-caption{bottom:16px;left:0;font-size:11px}.studio-services{display:block}.studio-services button{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px 12px}.studio-services button+button{border-left:0;border-top:1px solid #186b47}.studio-services button>span{font-size:23px;line-height:1.05}.studio-services small{font-size:11px;margin:0;padding-right:12px}.studio-services b{right:7px;bottom:18px;font-size:20px}[data-visual=campaign] .piece-one{max-width:160px;top:57px;left:8%}[data-visual=campaign] .piece-two{max-width:160px;top:160px;left:44%}[data-visual=social] .piece-one{max-width:160px;top:46px;left:7%}[data-visual=social] .piece-two{max-width:160px;top:144px;left:44%}.studio .extras{font-size:11px}.studio .extras i{margin-inline:6px}.service-playback{justify-content:space-between;gap:12px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.studio *,.studio *::before,.studio *::after{animation:none!important;transition:none!important}}
[data-visual=social] .piece-one{max-width:180px}[data-visual=social] .piece-two{max-width:150px;top:180px}
@media(max-width:650px){[data-visual=social] .piece-one{max-width:140px;top:46px}[data-visual=social] .piece-two{max-width:110px;top:145px}}

/* Dejar legibles las palabras de fondo en los tres servicios. */
.studio-grid{min-height:650px}.workbench{min-height:650px}
.piece-one{top:180px}.piece-two{top:330px}
[data-visual=social] .piece-one{top:180px}[data-visual=social] .piece-two{top:270px}
[data-visual=campaign] .piece-one{top:180px}[data-visual=campaign] .piece-two{top:320px}
@media(max-width:650px){.studio-grid{min-height:0}.workbench{min-height:540px}.piece-one{top:170px}.piece-two{top:280px}[data-visual=social] .piece-one{top:160px}[data-visual=social] .piece-two{top:245px}[data-visual=campaign] .piece-one{top:170px}[data-visual=campaign] .piece-two{top:290px}}

.bench-cross{width:70px;height:100px;display:grid;place-items:center}.bench-cross img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain}@media(max-width:650px){.bench-cross{width:55px;height:80px}}