:root{--motion:cubic-bezier(.22,1,.36,1)}
.how{padding:48px var(--gutter) 64px;display:grid;grid-template-columns:1fr 1fr;gap:9vw;background:#080808;border-top:1px solid #2c2c2c}.how h2{font-size:clamp(44px,5.3vw,76px)}.how-heading>p{font-size:17px;line-height:1.6;color:#aaa9a5;max-width:310px;margin-top:24px}.how-steps{padding:0;margin:0;list-style:none}.how-steps li{display:grid;grid-template-columns:28px 1fr;gap:20px;padding:23px 0;border-bottom:1px solid #333}.how-steps li:first-child{padding-top:0}.how-steps li>span{font-size:11px;color:#d54848;letter-spacing:.1em;padding-top:7px}.how h3{font-size:25px;font-weight:400;letter-spacing:-.035em;margin:0 0 10px}.how-steps p{font-size:15px;line-height:1.6;color:#aaa9a5;max-width:390px}.contact-dialog{max-height:90svh;overflow:auto}.contact-dialog form input,.contact-dialog form textarea,.contact-dialog form select{font-size:16px}.contact-dialog h2{font-size:clamp(38px,5vw,60px)}
.reveal-pending{opacity:0;transform:translateY(15px)}.reveal-in{opacity:1;transform:translateY(0);transition:opacity .8s var(--motion),transform .8s var(--motion)}
.lightbox[open]{animation:viewer-in .3s var(--motion)}.lightbox[open]::backdrop{animation:backdrop-in .3s ease}#photo-frame{transition:opacity .16s ease,transform .3s var(--motion)}#photo-frame.photo-changing{opacity:.2;transform:scale(.99)}@keyframes viewer-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@media(hover:hover){.photo-button:hover img{transform:scale(1.015)}.under-link svg,.text-link svg{transition:transform .3s var(--motion)}.under-link:hover svg,.text-link:hover svg{transform:translateX(5px)}}
@media(max-width:700px){.how{grid-template-columns:1fr;gap:30px;padding:32px var(--gutter) 42px}.how-heading>p{max-width:100%;font-size:16px}.how h2{font-size:48px}.how h3{font-size:24px}.contact-dialog{max-height:calc(100svh - 30px)}}
@media(prefers-reduced-motion:reduce){.reveal-pending,.reveal-in{opacity:1;transform:none;transition:none}.lightbox[open],.lightbox[open]::backdrop{animation:none}#photo-frame{transition:none}.photo-button:hover img{transform:none}}

/* Negro absoluto: continuidad entre la fotografía de portada y la página. */
:root{--ink:#000}
html,body,.hero-v2,.hero-portrait,.work,.services,.how,.contact-dialog,.lightbox{background:#000}

/* Títulos sin numeración ni columnas vacías. */
.chapter-heading{grid-template-columns:1fr auto}
.how-steps li{display:block}
@media(max-width:700px){.chapter-heading{grid-template-columns:1fr}.chapter-heading p{grid-column:1}}