/* Home v4 · 28/09/2026. Se apoya en fraimes-base.css (tokens, fuentes, cabecera, pie). */
:root{--g6:#6E6A63;--g9:#141414;--r:8px;--gap:clamp(12px,1.6vw,24px)}
body{background:var(--ink)}
.disp em,h1 em,h2 em{font-style:italic;font-weight:inherit}

/* ---------- Hero ---------- */
.h4-hero{background:var(--ink);color:var(--cream);padding:clamp(96px,9vw,120px) 0 clamp(72px,9vw,128px)}
.h4-hero .frame-clip{overflow:hidden;border-radius:clamp(8px,1vw,14px)}
.h4-hero .frame{aspect-ratio:2.81/1;border-radius:0;background:var(--g9)}
.h4-hero .frame video,.h4-hero .frame .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h4-hero .frame .gl{top:-1px;bottom:-1px;width:36.2%}
.h4-hero .frame .gl.l{left:-1px}.h4-hero .frame .gl.r{right:-1px}
.h4-copy{display:grid;grid-template-columns:repeat(12,1fr);gap:24px var(--gap);margin-top:clamp(32px,4vw,56px);align-items:end}
.h4-copy > div:first-child{grid-column:1/span 7}
.h4-copy h1{font-weight:900;font-size:clamp(52px,7.6vw,128px);line-height:.95}
.h4-side{grid-column:9/span 4}
.h4-side p{color:var(--g2);font-size:clamp(17px,1.35vw,20px);line-height:1.45;max-width:36ch}
.h4-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.h4-ctas .btn{color:var(--cream);min-height:44px}
.h4-ctas .btn.solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
html.js .h4-copy > *{transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
html.js .h4-copy:not(.in) > *{opacity:0;transform:translateY(12px)}
html.js .h4-copy > :nth-child(2){transition-delay:80ms}

/* ---------- Trabajos ---------- */
.h4-work{background:var(--ink);color:var(--cream);padding:0 0 clamp(96px,11vw,160px)}
.h4-group-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(28px,3vw,40px)}
.h4-group-head h2{font-weight:800;font-size:clamp(40px,5vw,72px);line-height:1}
.h4-group-head p{color:var(--g3);font-size:15px;text-align:right;max-width:28ch}
.h4-group + .h4-group{margin-top:clamp(80px,9vw,128px);padding-top:clamp(40px,4vw,56px);border-top:1px solid #222}
.h4-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(36px,4vw,56px) var(--gap)}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.h4-card{display:flex;flex-direction:column;gap:16px;color:inherit;border-radius:var(--r);transition:transform var(--d-press) var(--ease-out)}
.h4-card:active{transform:scale(.99)}
.h4-media{position:relative;height:clamp(240px,28vw,440px);border-radius:var(--r);overflow:hidden;background:var(--g9)}
.s12 .h4-media{height:clamp(280px,38vw,600px)}
.h4-media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out),opacity 400ms ease}
html.js .h4-media img:not(.ld){opacity:0}
.h4-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.h4-meta h3{font-weight:700;font-size:clamp(24px,2vw,30px);line-height:1.1}
.h4-meta p{color:var(--g3);font-size:15px;margin-top:6px}
.h4-go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--g4);font-size:16px;transition:background-color var(--d-ui) ease,border-color var(--d-ui) ease,color var(--d-ui) ease}
@media(hover:hover) and (pointer:fine){
  .h4-card:hover .h4-media img{transform:scale(1.03)}
  .h4-card:hover .h4-go{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
}
.h4-card:focus-visible{outline-offset:6px}
.h4-card:focus-visible .h4-go{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}

/* ---------- Estudio ---------- */
.h4-studio{background:var(--cream);color:var(--ink);padding:clamp(96px,11vw,168px) 0}
.h4-manifesto{display:grid;grid-template-columns:repeat(12,1fr);gap:32px var(--gap);align-items:end}
.h4-manifesto h2{grid-column:1/span 7;font-weight:800;font-size:clamp(40px,5.2vw,84px);line-height:1}
.h4-manifesto p{grid-column:9/span 4;font-size:18px;line-height:1.5;max-width:40ch}
.h4-services{display:grid;grid-template-columns:repeat(12,1fr);gap:32px var(--gap);margin-top:clamp(96px,10vw,152px)}
.h4-h2-sans{grid-column:1/span 3;font:500 clamp(28px,2.4vw,36px)/1.1 var(--text);letter-spacing:-.02em}
.h4-svc{grid-column:5/span 8;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap);list-style:none;margin:0;padding:0}
.h4-svc li{border-top:1px solid var(--g2);padding:24px 0 36px}
.h4-svc h3{font:600 20px/1.25 var(--text);letter-spacing:0}
.h4-svc p{margin-top:8px;color:var(--g4);font-size:16px;max-width:38ch}
.h4-process{margin:clamp(64px,7vw,104px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);counter-reset:step}
.h4-process li{border-top:2px solid var(--ink);padding-top:16px;font:500 17px/1.3 var(--text)}
.h4-process li::before{counter-increment:step;content:counter(step);display:block;font:500 13px/1 var(--text);color:var(--g6);margin-bottom:10px;font-variant-numeric:tabular-nums}
.h4-process-note{margin-top:24px;color:var(--g6);font-size:16px}

/* ---------- Playground ---------- */
.h4-play{background:var(--purple);color:var(--ink);padding:clamp(96px,10vw,152px) 0}
.h4-play-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.h4-play h2{font-weight:900;font-size:clamp(48px,11vw,144px);line-height:.9}
.h4-play-head p{margin-top:16px;font-size:18px}
.h4-play .btn.solid{background:var(--ink);color:var(--cream);border-color:var(--ink);min-height:44px}
.h4-play-grid{display:grid;grid-template-columns:5fr 3fr 4fr;gap:var(--gap);margin-top:clamp(40px,4vw,64px)}
.h4-play-grid a{display:block;border-radius:var(--r);overflow:hidden;height:clamp(220px,24vw,380px);background:#bfa9dc}
.h4-play-grid img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){.h4-play-grid a:hover img{transform:scale(1.03)}}

/* ---------- Contacto ---------- */
.h4-contact{background:var(--ink);color:var(--cream);padding:clamp(96px,11vw,168px) 0}
.h4-contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:48px var(--gap)}
.h4-contact-intro{grid-column:1/span 5}
.h4-contact h2{font-weight:800;font-size:clamp(44px,5.4vw,84px);line-height:.98}
.h4-contact-intro p{margin-top:24px;color:var(--g2);font-size:18px;max-width:34ch}
.h4-mail{display:inline-block;margin-top:32px;font-size:20px;font-weight:500;border-bottom:1px solid var(--g4);padding-bottom:2px;transition:border-color var(--d-ui) ease,color var(--d-ui) ease}
@media(hover:hover) and (pointer:fine){.h4-mail:hover{color:var(--cyan);border-color:var(--cyan)}}
.h4-city{margin-top:12px;color:var(--g3);font-size:15px}
.h4-contact form{grid-column:7/span 6;display:grid;grid-template-columns:1fr 1fr;gap:28px var(--gap);align-content:start}
.h4-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.h4-field.full{grid-column:1/-1}
.h4-field label{display:block;font-size:14px;font-weight:500;letter-spacing:0;color:var(--g2)}
.h4-field input,.h4-field textarea,.h4-field select{font-size:17px;line-height:1.4;border-bottom:1px solid var(--g4);transition:border-color var(--d-ui) ease}
.h4-field select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F9F8F6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 4px center}
.h4-field select option{background:var(--ink);color:var(--cream)}
.h4-field.bad input,.h4-field.bad textarea{border-bottom-color:#ff8a7a}
.h4-err{font-size:14px;color:#ff8a7a}
.h4-err:empty{display:none}
.h4-hp{position:absolute;left:-9999px}
.h4-send-row{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.h4-send{min-height:44px;background:var(--cream);color:var(--ink);border-color:var(--cream)}
.h4-send .lbl-in{display:inline-block;transition:filter var(--d-ui) ease,opacity var(--d-ui) ease}
.h4-send.swap .lbl-in{filter:blur(3px);opacity:0}
.h4-send[data-state="sent"]{background:var(--green);border-color:var(--green);color:var(--ink);pointer-events:none}
.h4-send[data-state="sending"]{pointer-events:none}
.h4-privacy{font-size:14px;color:var(--g3)}
.h4-status{grid-column:1/-1;font-size:16px}
.h4-status[hidden]{display:none}
.h4-status a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Diálogo del film ---------- */
dialog.h4-film{border:0;padding:0;background:var(--ink);color:var(--cream);width:min(1100px,94vw);max-height:94dvh;border-radius:12px;overflow:hidden;
  opacity:0;transform:scale(.97);transition:opacity 150ms ease,transform 150ms var(--ease-out),overlay 150ms allow-discrete,display 150ms allow-discrete}
dialog.h4-film[open]{opacity:1;transform:none;transition-duration:220ms}
@starting-style{dialog.h4-film[open]{opacity:0;transform:scale(.97)}}
dialog.h4-film::backdrop{background:rgb(0 0 0 / 0);transition:background-color 150ms ease,overlay 150ms allow-discrete,display 150ms allow-discrete}
dialog.h4-film[open]::backdrop{background:rgb(0 0 0 / .86)}
@starting-style{dialog.h4-film[open]::backdrop{background:rgb(0 0 0 / 0)}}
.h4-film .dialog-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px 14px 20px;margin:0}
.h4-film .dialog-head h2{font:600 18px/1.2 var(--text);letter-spacing:0}
.h4-film .dialog-head button{font:500 14px/1 var(--text);color:var(--cream);background:none;border:1px solid currentColor;border-radius:999px;padding:10px 16px;cursor:pointer}
.h4-film video{display:block;width:100%;max-height:78dvh;background:#000}

/* ---------- Pie ---------- */
footer ul{flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .h4-copy > div:first-child{grid-column:1/-1}.h4-side{grid-column:1/span 8}
  .h4-manifesto h2,.h4-manifesto p{grid-column:1/-1}
  .h4-h2-sans,.h4-svc{grid-column:1/-1}
  .h4-contact-intro,.h4-contact form{grid-column:1/-1}
}
@media(max-width:860px){
  .h4-hero{padding-top:140px}
  .h4-hero .frame{aspect-ratio:2.81/1}
}
@media(max-width:760px){
  .h4-hero .frame-clip{margin-inline:calc(var(--pad) * -1);border-radius:0}
  .h4-side{grid-column:1/-1}
  .s4,.s5,.s7,.s8,.s12{grid-column:1/-1}
  .h4-media,.s12 .h4-media{height:62vw}
  .h4-group-head{flex-direction:column;gap:8px}
  .h4-group-head p{text-align:left}
  .h4-svc{grid-template-columns:1fr}
  .h4-process{grid-template-columns:1fr;gap:0}
  .h4-process li{border-top-width:1px;padding:14px 0;display:flex;gap:16px;align-items:baseline}
  .h4-process li::before{margin:0;min-width:1ch}
  .h4-play-grid{grid-template-columns:1fr 1fr}
  .h4-play-grid a:first-child{grid-column:1/-1;height:56vw}
  .h4-play-grid a{height:44vw}
  .h4-contact form{grid-template-columns:1fr}
}

/* ---------- Movimiento reducido: alternativa, no apagón ---------- */
@media(prefers-reduced-motion:reduce){
  html.js .h4-copy > *{transition:opacity 200ms ease;transform:none!important}
  .h4-media img,.h4-play-grid img{transition:opacity 200ms ease}
  .h4-card:hover .h4-media img,.h4-play-grid a:hover img{transform:none}
  .h4-card:active{transform:none}
  dialog.h4-film,dialog.h4-film[open]{transform:none}
}