/* A · La idea toma forma. Composition windows are in reference-art.css.
   All interaction is progressive: no essential content depends on motion. */
.art-direction { background:var(--ink); }
.art-direction .section-shell { width:min(1440px,calc(100% - 96px)); margin-inline:auto; }
.art-direction .section-space { padding-block:90px; }
.art-direction h2 { font-size:clamp(34px,3.4vw,54px); line-height:1.04; letter-spacing:-2px; text-wrap:initial; }
.art-direction .eyebrow { color:var(--white); font-size:12px; margin-bottom:24px; }
.art-direction .hero { position:relative; padding:0; overflow:hidden; background:radial-gradient(ellipse at 94% 25%,color-mix(in srgb,var(--blue) 72%,var(--ink)),var(--ink) 75%); }
.art-direction .hero-grid { position:relative; display:grid; grid-template-columns:44% 56%; min-height:clamp(570px,43vw,720px); gap:0; padding:48px 0 56px; align-items:center; }
.art-direction .hero-copy { z-index:2; min-width:0; pointer-events:none; }
.art-direction .hero-copy a { pointer-events:auto; }
.art-direction .hero-copy .hero-topline { color:var(--white); font:12px 'Courier New',monospace; letter-spacing:2px; margin:0 0 28px; max-width:none; }
.art-direction .hero h1 { font-size:clamp(57px,6.1vw,93px); line-height:.98; letter-spacing:-4.6px; margin:0; }
.art-direction .hero-last-line { white-space:nowrap; }
.art-direction .hero h1 em { display:inline; }
.art-direction .hero h1 em::after { display:none; }
.art-direction .hero-copy>p:not(.hero-topline) { max-width:430px; font-size:17px; line-height:1.5; margin:26px 0; color:var(--white); }
.art-direction .hero .button { font-size:15px; min-height:54px; }
.art-direction .hero-discover { display:block; width:fit-content; margin-top:36px; padding-bottom:7px; border-bottom:2px solid var(--blue); font-size:14px; }
.art-direction .hero-visual { position:relative; min-width:0; width:112%; margin-left:-4%; }
.art-direction .formation-scene { position:relative; width:100%; aspect-ratio:625/402; perspective:1000px; isolation:isolate; }
.art-direction .formation-layers { position:absolute; inset:0; transform:rotateY(var(--view-x,0deg)) rotateX(var(--view-y,0deg)); transition:transform .25s ease-out; }
.art-direction .formation-layer { transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .6s; }
.art-direction .formation-video { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; mask-image:linear-gradient(to right,transparent 4%,#000 12%,#000 95%,transparent); }
.art-direction .formation-scene[data-video=playing]:not([data-manual]) .formation-video { opacity:1; }
.art-direction .formation-scene[data-video=playing]:not([data-manual]) .formation-layers { opacity:0; }
.art-direction .formation-scene[data-phase=sketch] .formation-sketch { transform:translate(18%,0) rotate(4deg) scale(1.06); }
.art-direction .formation-scene[data-phase=sketch] :is(.formation-lime,.formation-structure,.formation-web,.formation-note) { transform:translate(12%,8%); opacity:0; }
.art-direction .formation-scene[data-phase=structure] .formation-web { transform:translate(12%,8%); opacity:0; }
.art-direction .formation-scene[data-phase=structure] .formation-note { transform:translate(0,-8%); opacity:0; }
.art-direction .formation-controls { position:relative; display:flex; align-items:center; justify-content:flex-end; gap:6px; padding-right:30px; margin-top:14px; }
.art-direction .formation-controls button { background:transparent; color:var(--white); border:0; padding:10px 8px; min-height:44px; font-size:12px; }
.art-direction .formation-controls button[data-formation] { border-bottom:1px solid var(--line); }
.art-direction .formation-controls button[aria-pressed=true][data-formation] { border-bottom-color:var(--lime); color:var(--lime); }
.art-direction .formation-controls .motion-toggle { margin-left:16px; }
.art-direction .motion-toggle::before { content:'Ⅱ'; margin-right:8px; }
.art-direction .motion-toggle[aria-pressed=true]::before { content:'▷'; }
.art-direction .idea-lab { display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); grid-template-areas:'choice image' 'benefit image'; align-items:start; gap:0 24px; }
.art-direction .lab-copy { grid-area:choice; }
.art-direction .lab-copy h2 { font-size:clamp(31px,2.7vw,43px); letter-spacing:-1.4px; }
.art-direction .lab-copy>p:not(.eyebrow) { margin:14px 0 22px; color:var(--white); font-size:16px; }
.art-direction .lab-controls { display:grid; gap:9px; max-width:450px; margin:0; }
.art-direction .lab-controls button { width:100%; min-height:56px; padding:12px 17px; border-radius:6px; background:var(--surface); font-size:14px; gap:18px; }
.art-direction .lab-controls svg { flex-shrink:0; }
.art-direction .lab-controls button>.lab-accordion-symbol { margin-left:auto; }
.art-direction .lab-controls button[aria-pressed=true] { background:var(--ink); border-color:var(--lime); color:var(--white); transform:none; }
.art-direction .lab-controls button[aria-pressed=true]>.lab-accordion-symbol { font-size:24px; width:auto; height:auto; border:0; border-radius:0; }
.art-direction .lab-stage { grid-area:benefit; max-width:450px; margin-top:20px; }
.art-direction .scene-copy { border-top:1px solid var(--line); padding:15px 0 0; min-height:0; }
.art-direction .scene-copy h3 { font-size:25px; line-height:1.12; letter-spacing:-.7px; margin:0 0 10px; }
.art-direction .scene-copy p { color:var(--white); font-size:16px; line-height:1.5; }
.art-direction .scene-cta { display:inline-flex; color:var(--lime); border:0; border-bottom:1px solid var(--lime); padding:8px 0 5px; font-size:14px; gap:12px; }
.art-direction .needs-visual { grid-area:image; min-width:0; width:100%; align-self:center; }
.art-direction .need-panel { animation:need-enter .6s cubic-bezier(.22,1,.36,1); }
.art-direction .need-idea { width:55%; margin:auto; }
.art-direction .need-conexion { width:91%; margin:auto; }
@keyframes need-enter { from { opacity:0; transform:translateY(18px) rotate(-2deg); } to { opacity:1; transform:none; } }
.art-direction .services { display:grid; grid-template-columns:.62fr 2fr; gap:36px; border-top:1px solid var(--line); }
.art-direction .services .section-heading { display:block; align-self:start; margin:24px 0 0; }
.art-direction .section-heading { margin-bottom:34px; gap:24px; }
.art-direction .services .section-heading h2 { font-size:clamp(34px,3.25vw,50px); }
.art-direction .section-heading>p { color:var(--white); font-size:16px; line-height:1.55; }
.art-direction .services .section-heading>p { margin-top:25px; }
.art-direction .service-grid { grid-template-columns:362fr 400fr; gap:28px; }
.art-direction .service-card { background:transparent; border:0; border-radius:0; padding:0; display:flex; flex-direction:column; overflow:visible; }
.art-direction .card-kicker { display:none; }
.art-direction .service-card .reference-art { margin:0 0 17px; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.art-direction .service-card:hover .reference-art,.art-direction .service-card:focus-within .reference-art { transform:translateY(-6px) rotate(-1deg); }
.art-direction .service-card h3 { font-size:clamp(22px,2vw,30px); line-height:1.1; letter-spacing:-.8px; margin-bottom:10px; }
.art-direction .service-card>p { color:var(--white); font-size:16px; line-height:1.45; }
.art-direction .tag-list { margin:16px 0; gap:4px 10px; }
.art-direction .tag-list li { padding:0; border:0; border-radius:0; color:var(--white); font-size:12px; }
.art-direction .tag-list li+li::before { content:'·'; margin-right:10px; }
.art-direction .service-card .text-link,.art-direction .about-copy .text-link { display:inline-flex; width:fit-content; justify-content:flex-start; border:0; padding:13px 18px; margin-top:auto; gap:15px; background:var(--lime); color:var(--ink); border-radius:3px; font-size:14px; min-height:48px; }
.art-direction .service-card .text-link span,.art-direction .about-copy .text-link span { color:var(--ink); font-size:18px; }
.art-direction .service-note { grid-column:1/-1; display:flex; justify-content:center; margin:0; }
.art-direction .service-note>span { display:none; }
.art-direction .service-note a { margin-left:0; }
.art-direction .process { background:linear-gradient(115deg,var(--ink),color-mix(in srgb,var(--blue) 13%,var(--ink))); border-block:1px solid var(--line); }
.art-direction .process .section-heading { display:block; }
.art-direction .process .section-heading>p { max-width:none; margin-top:14px; }
.art-direction .process .section-heading>p br { display:none; }
.art-direction .process-steps { gap:26px; }
.art-direction .process-steps li { display:grid; grid-template-columns:42px 1fr; align-content:start; border:0; padding:0; position:relative; }
.art-direction .process-steps .art-step { grid-column:1/-1; height:205px; width:100%; margin-bottom:24px; position:relative; z-index:1; transition:transform .6s; }
.art-direction .process-steps li:hover .art-step { transform:translateY(-7px) rotate(-2deg); }
.art-direction .process-steps li::before { content:''; top:100px; left:-12px; width:9px; height:9px; background:var(--lime); box-shadow:none; }
.art-direction .process-steps li::after { content:''; position:absolute; left:0; right:-26px; height:2px; top:104px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .7s; }
.art-direction .process-steps li:last-child::after { right:0; }
.art-direction .process-steps li.step-reached::after { transform:scaleX(1); }
.art-direction .step-number { font-size:32px; color:var(--white); line-height:1; margin:0; letter-spacing:-2px; }
.art-direction .process-steps h3 { font-size:19px; line-height:1.12; letter-spacing:-.5px; min-height:0; margin:0 0 8px; }
.art-direction .process-steps p { grid-column:2; font-size:15px; line-height:1.45; color:var(--white); margin:0; }
.art-direction .step-deliverable { display:none; }
.art-direction .process-cta { display:flex; width:fit-content; margin:38px auto 0; }
.art-direction .projects { isolation:isolate; display:grid; grid-template-columns:.92fr 1.9fr; grid-template-rows:1fr auto; gap:30px 40px; position:relative; }
.art-direction .projects::before,.art-direction .faq::before { content:''; position:absolute; inset:0 calc((min(1440px,100vw - 96px) - 100vw)/2); z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 95% 45%,color-mix(in srgb,var(--blue) 26%,var(--ink)),var(--ink) 75%); }
.art-direction .projects .section-heading { display:block; margin:28px 0 0; }
.art-direction .projects .section-heading>p { margin-top:25px; }
.art-direction .project-grid { grid-column:2; grid-row:1/3; gap:26px; }
.art-direction .project-cover { border-radius:0; min-height:310px; aspect-ratio:1.16; padding:26px; box-shadow:5px 6px 0 color-mix(in srgb,var(--blue) 22%,var(--ink)); }
.art-direction .gbs-cover { background:color-mix(in srgb,var(--white) 94%,var(--muted)); }
.art-direction .diesmi-cover { background:color-mix(in srgb,var(--blue) 8%,var(--white)); }
.art-direction .project-cover::before,.art-direction .project-cover::after { display:none; }
.art-direction .project-logo { transform:scale(1.3); width:100%; height:auto; max-height:180px; object-fit:contain; }
.art-direction .project-cover-top,.art-direction .project-cover-bottom { color:var(--ink); font-size:10px; letter-spacing:.3px; }
.art-direction .project-meta { margin-top:20px; }
.art-direction .project-meta h3 { font-size:23px; }
.art-direction .project-meta>span { font-size:14px; color:var(--white); border-bottom:2px solid var(--lime); padding-bottom:5px; }
.art-direction .project-disclosure { grid-column:1; font-size:12px; color:var(--white); align-self:end; }
.art-direction .about { grid-template-columns:minmax(0,.43fr) minmax(0,.57fr); gap:15px; overflow:hidden; }
.art-direction .about-copy h2 { font-size:clamp(36px,3.5vw,53px); }
.art-direction .about-copy>p:not(.eyebrow) { color:var(--white); font-size:17px; line-height:1.55; max-width:470px; margin-top:24px; }
.art-direction .about-copy .text-link { margin-top:30px; }
.art-direction .about-visual { order:2; min-width:0; width:110%; }
.art-direction .faq { position:relative; grid-template-columns:minmax(0,.4fr) minmax(0,.6fr); gap:28px; border-top:1px solid var(--line); isolation:isolate; }
.art-direction .faq h2 { font-size:clamp(44px,5vw,72px); }
.art-direction .faq h2+p { color:var(--white); font-size:17px; max-width:340px; margin-top:24px; }
.art-direction .faq-list { display:grid; gap:8px; border:0; align-self:start; }
.art-direction .faq details { background:color-mix(in srgb,var(--surface) 90%,transparent); border:1px solid var(--line); border-radius:6px; padding:0 22px; }
.art-direction .faq details[open] { border-color:var(--lime); }
.art-direction .faq summary { padding:18px 0; font-size:16px; line-height:1.4; gap:16px; }
.art-direction .faq summary>span { transition:transform .3s; }
.art-direction .faq details[open] summary>span { transform:rotate(45deg); }
.art-direction .faq details p { font-size:16px; color:var(--white); padding:0 0 20px; }
.art-direction .contact-form-section { background:var(--ink); border-top:1px solid var(--line); }
.art-direction .contact-form-section::before { background:radial-gradient(ellipse at 85% 30%,color-mix(in srgb,var(--blue) 20%,transparent),transparent 75%); }
.art-direction .contact-layout { grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:48px; }
.art-direction .contact-form-section .contact-intro h2 { font-size:clamp(43px,4.3vw,66px); line-height:1.03; letter-spacing:-2.5px; }
.art-direction .contact-intro>p:not(.eyebrow) { font-size:17px; line-height:1.55; }
.art-direction .contact-form-card { min-width:0; background:var(--surface); border-color:var(--line); border-top-color:var(--lime); border-radius:8px; padding:30px; box-shadow:none; }
.art-direction .form-heading { margin-bottom:24px; }
.art-direction .form-heading h3 { font-size:27px; }
.art-direction .form-heading p { font-size:13px; }
.art-direction .form-grid { gap:20px; }
.art-direction .form-grid input,.art-direction .form-grid select { padding:15px; font-size:16px; }
.art-direction .form-grid textarea { font-size:16px; padding:15px; min-height:115px; }
.art-direction .contact-form-card .privacy-check { font-size:13px; line-height:1.55; align-items:flex-start; }
.art-direction .privacy-check input { flex-shrink:0; width:20px; height:20px; }
.art-direction .form-data-note,.art-direction .form-hint { font-size:13px; }
@media (max-width:1100px) {
 .art-direction .section-shell { width:calc(100% - 64px); }
 .art-direction .hero h1 { font-size:6.2vw; letter-spacing:-3px; }
 .art-direction .hero-grid { min-height:540px; }
 .art-direction .hero-copy>p:not(.hero-topline) { font-size:16px; max-width:350px; }
 .art-direction .services { grid-template-columns:1fr; }
 .art-direction .services .section-heading { display:flex; align-items:end; }
 .art-direction .services .section-heading h2 { max-width:500px; }
 .art-direction .project-cover { min-height:230px; padding:18px; }
 .art-direction .project-cover-top,.art-direction .project-cover-bottom { font-size:8px; }
 .art-direction .process-steps { gap:18px; }
 .art-direction .process-steps .art-step { height:155px; }
 .art-direction .process-steps li::before { top:77px; }
 .art-direction .process-steps li::after { top:81px; }
 .art-direction .process-steps h3 { font-size:17px; }
 .art-direction .process-steps li { grid-template-columns:33px 1fr; }
 .art-direction .step-number { font-size:26px; }
 .art-direction .contact-layout { grid-template-columns:minmax(0,.36fr) minmax(0,.64fr); gap:25px; }
 .art-direction .contact-form-card { padding:24px; }
}
@media (max-width:760px) {
 .art-direction .section-shell { width:calc(100% - 40px); }
 .art-direction .section-space { padding-block:60px; }
 .art-direction h2 { font-size:36px; letter-spacing:-1.5px; }
 .art-direction .eyebrow { font-size:11px; margin-bottom:18px; }
 .art-direction .hero { background:linear-gradient(var(--ink) 48%,color-mix(in srgb,var(--blue) 38%,var(--ink))); }
 .art-direction .hero-grid { grid-template-columns:1fr; gap:24px; padding:35px 0 10px; min-height:0; }
 .art-direction .hero h1 { font-size:clamp(51px,12.5vw,85px); letter-spacing:-2.8px; line-height:.97; }
 .art-direction .hero-last-line { white-space:normal; }
 .art-direction .hero h1 em { display:block; }
 .art-direction .hero-copy .hero-topline { font-size:10px; letter-spacing:1px; margin-bottom:20px; }
 .art-direction .hero-copy>p:not(.hero-topline) { max-width:480px; font-size:16px; margin:18px 0; }
 .art-direction .hero .button { font-size:14px; padding:15px 18px; min-height:50px; }
 .art-direction .hero-discover { margin-top:22px; font-size:13px; }
 .art-direction .hero-visual { width:calc(100% + 40px); margin-left:-20px; }
 .art-direction .formation-controls { justify-content:center; flex-wrap:wrap; gap:0; padding:0 10px 8px; margin:0; }
 .art-direction .formation-controls .motion-toggle { margin-left:8px; }
 .art-direction .formation-controls button { font-size:11px; }
 .art-direction .idea-lab { grid-template-columns:1fr; grid-template-areas:'choice' 'image' 'benefit'; gap:24px; }
 .art-direction .lab-copy h2 { font-size:32px; max-width:480px; }
 .art-direction .lab-copy>p:not(.eyebrow) { font-size:16px; margin:14px 0 20px; }
 .art-direction .lab-controls { max-width:none; }
 .art-direction .lab-controls button { font-size:13px; min-height:52px; padding:10px 13px; gap:12px; }
 .art-direction .lab-stage { margin:0; max-width:none; }
 .art-direction .scene-copy { border:0; padding:0; }
 .art-direction .scene-copy h3 { font-size:25px; }
 .art-direction .need-idea { width:50%; }
 .art-direction .services { gap:26px; }
 .art-direction .services .section-heading { display:block; margin:0; }
 .art-direction .services .section-heading h2 { font-size:36px; }
 .art-direction .services .section-heading>p { margin-top:15px; }
 .art-direction .service-grid { grid-template-columns:1fr; gap:36px; }
 .art-direction .service-card .reference-art { margin-bottom:16px; }
 .art-direction .service-card h3 { font-size:27px; }
 .art-direction .service-card>p { font-size:16px; }
 .art-direction .service-note { display:block; }
 .art-direction .service-note p { margin-bottom:12px; }
 .art-direction .process .section-heading { margin-bottom:28px; }
 .art-direction .process .section-heading h2 { max-width:400px; }
 .art-direction .process-steps { display:grid; grid-template-columns:1fr; gap:28px; }
 .art-direction .process-steps li { grid-template-columns:84px 32px 1fr; gap:0 9px; padding:0 0 0 18px; margin:0; border:0; }
 .art-direction .process-steps .art-step { grid-column:1; grid-row:1/3; width:84px; height:84px; margin:0; }
 .art-direction .step-number { grid-column:2; grid-row:1/3; font-size:24px; }
 .art-direction .process-steps h3 { font-size:17px; grid-column:3; margin-bottom:7px; }
 .art-direction .process-steps p { font-size:14px; grid-column:3; }
 .art-direction .process-steps li::before { left:0; top:7px; }
 .art-direction .process-steps li::after { left:3px; top:17px; bottom:-35px; width:2px; height:auto; right:auto; transform:scaleY(0); transform-origin:top; }
 .art-direction .process-steps li.step-reached::after { transform:scaleY(1); }
 .art-direction .process-steps li:last-child::after { display:none; }
 .art-direction .process-cta { margin-top:30px; }
 .art-direction .projects { display:block; }
 .art-direction .projects .section-heading { margin:0 0 28px; }
 .art-direction .projects .section-heading>p { margin-top:16px; }
 .art-direction .project-grid { grid-template-columns:1fr; gap:32px; }
 .art-direction .project-cover { min-height:240px; padding:22px; aspect-ratio:1.4; }
 .art-direction .project-cover-top,.art-direction .project-cover-bottom { font-size:10px; }
 .art-direction .project-logo { max-height:155px; }
 .art-direction .project-meta h3 { font-size:23px; }
 .art-direction .project-disclosure { margin-top:26px; }
 .art-direction .about { grid-template-columns:1fr; gap:26px; }
 .art-direction .about-copy h2 { font-size:36px; }
 .art-direction .about-copy>p:not(.eyebrow) { font-size:16px; margin-top:18px; }
 .art-direction .about-visual { width:100%; }
 .art-direction .faq { grid-template-columns:1fr; gap:28px; }
 .art-direction .faq h2 { font-size:41px; }
 .art-direction .faq h2+p { font-size:16px; margin-top:18px; max-width:none; }
 .art-direction .faq details { padding-inline:15px; }
 .art-direction .faq summary,.art-direction .faq details p { font-size:15px; }
 .art-direction .contact-layout { grid-template-columns:1fr; gap:30px; }
 .art-direction .contact-form-section .contact-intro h2 { font-size:44px; }
 .art-direction .contact-details { margin-top:24px; }
 .art-direction .contact-form-card { padding:24px 18px; }
 .art-direction .form-heading h3 { font-size:27px; }
 .art-direction .form-grid { grid-template-columns:1fr; gap:20px; }
}
@media (prefers-reduced-motion:reduce) {
 .art-direction .reveal { opacity:1!important; transform:none!important; }
 .art-direction .formation-layer,.art-direction .formation-layers,.art-direction .need-panel { animation:none!important; transition:none!important; }
 .art-direction .process-steps li::after { transform:none; transition:none; }
}
.motion-paused .art-direction :is(.formation-layer,.formation-layers,.need-panel) { animation:none; transition:none; }
.motion-paused .art-direction .process-steps li::after { transform:none; transition:none; }

.art-direction .scene-copy p { white-space:pre-line; }