:root{--blue:#1010ee;
--ease-out:cubic-bezier(.22,1,.36,1);
--ease-in-out:cubic-bezier(.76,0,.24,1);
--ease-soft:cubic-bezier(.33,1,.68,1);
--t-press:140ms;
--t-hover:180ms;
--t-ui:260ms;
--t-reveal:850ms;
--paper:#f4f1e9;
--ink:#080808;
--gutter:clamp(24px,13.8vw,240px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;
scroll-padding-top:95px}
body{margin:0;
font-family:Arial,Helvetica,sans-serif;
color:var(--ink);
background:var(--paper)}
a{color:inherit;
text-decoration:none}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ffb900;
outline-offset:6px}
button{color:inherit}
.skip{position:fixed;
top:-100px;
left:20px;
padding:16px;
background:white;
z-index:100}
.skip:focus{top:15px}
.header{position:fixed;
z-index:50;
top:0;
left:0;
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:23px var(--gutter);
color:white}
.logo{display:block;
width:122px;
height:auto}
.header nav{display:flex;
gap:30px}
.header nav a,.nav-contact{text-transform:uppercase;
font-size:12px;
letter-spacing:.035em}
.header nav a{position:relative}
.header nav a:after{content:'';
position:absolute;
bottom:-6px;
left:0;
height:1px;
background:currentColor;
width:100%;
transform:scaleX(0);
transform-origin:left;
transition:transform .3s}
.header nav a:hover:after{transform:scaleX(1)}
.nav-contact{border-bottom:1px solid #ffffff80;
padding-bottom:5px}
.menu-toggle{display:none}
.mobile-nav[hidden]{display:none}
.hero{padding:142px var(--gutter) 80px;
background:var(--blue);
color:white;
min-height:720px}
.eyebrow{display:flex;
justify-content:space-between;
text-transform:uppercase;
font-size:11px;
letter-spacing:.11em;
margin-bottom:64px}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(64px,9.25vw,170px);
line-height:.83;
letter-spacing:-.065em;
font-weight:950;
text-transform:uppercase}
h1 span{display:block}
em{font-family:Georgia,'Times New Roman',serif;
font-weight:400;
text-transform:none;
letter-spacing:-.065em}
h1 em{display:block;
line-height:.94;
font-size:1.06em}
.hero-bottom{display:flex;
align-items:end;
justify-content:space-between;
margin-top:45px}
.hero-bottom p{max-width:365px;
font-size:15px;
line-height:1.5;
letter-spacing:-.02em}
.round-link{display:grid;
place-items:center;
width:50px;
height:50px;
border:1px solid #ffffff60;
border-radius:50%;
font-size:29px;
transition:background .2s,transform .3s}
.round-link:hover{background:#ffffff20;
transform:translateY(5px)}
.work{background:var(--ink);
color:white;
padding-bottom:25px;
overflow:hidden}
.ticker{overflow:hidden;
padding:15px 0 30px;
font-size:14px;
text-transform:uppercase;
font-weight:900;
white-space:nowrap}
.ticker>div{width:max-content;
animation:marquee 35s linear infinite}
.project-track{display:flex;
width:max-content}
.project-track.second{margin-top:8px}
.project{position:relative;
overflow:hidden;
width:clamp(185px,20vw,380px);
height:clamp(210px,23vw,410px);
display:block;
background:#161616}
.project:nth-child(even){width:clamp(240px,28vw,460px)}
.project img{width:100%;
height:100%;
object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s}
.project>span{position:absolute;
inset:auto 14px 14px;
background:var(--blue);
padding:12px;
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
font-size:14px;
transform:translateY(140%);
transition:transform .35s}
.project small{font-size:11px}
.project:hover img{transform:scale(1.055)}
.project:hover>span,.project:focus-visible>span{transform:none}
.project-track:hover,.project-track:focus-within{animation-play-state:paused}
.work-meta{display:flex;
justify-content:space-between;
align-items:center;
padding:26px var(--gutter) 0;
font-size:10px;
text-transform:uppercase;
letter-spacing:.06em;
color:#aaa}
.work-meta button{background:none;
border:0;
border-bottom:1px solid #555;
padding:5px 0;
font-size:11px}
.motion-paused .project-track,.motion-paused .ticker>div{animation-play-state:paused}
footer{background:var(--blue);
color:white;
padding:60px var(--gutter)}
footer>p{font-size:11px;
text-transform:uppercase;
letter-spacing:.1em;
margin-bottom:55px}
footer h2{font-size:clamp(64px,9.5vw,165px);
text-transform:uppercase;
letter-spacing:-.065em;
line-height:.85}
footer h2 em{display:block;
font-size:1.05em}
.email{display:inline-block;
font-size:clamp(20px,3.4vw,54px);
letter-spacing:-.045em;
border-bottom:1px solid #ffffff80;
margin-top:65px;
padding-bottom:8px}
@keyframes enter{from{opacity:0;
transform:translateY(45px)}
to{opacity:1;
transform:none}
}
@keyframes marquee{to{transform:translateX(-25%)}
}

@media(min-width:1700px){.hero{padding-top:170px;
padding-bottom:110px}
}
@media(max-width:700px){:root{--gutter:24px}
.header{padding-top:20px}
.logo{width:98px}
.header nav,.nav-contact{display:none}
.menu-toggle{display:flex;
gap:14px;
align-items:center;
border:0;
background:none;
font-size:14px;
padding:8px}
.menu-toggle span{font-size:22px}
.mobile-nav{position:fixed;
inset:78px 12px auto;
background:var(--blue);
z-index:30;
padding:26px;
box-shadow:0 12px 30px #0004;
color:white}
.mobile-nav a{display:block;
font-size:30px;
letter-spacing:-.04em;
padding:12px 0}
.hero{min-height:660px;
padding-top:123px;
padding-bottom:55px}
.eyebrow{font-size:10px;
margin-bottom:72px}
h1{font-size:clamp(50px,12vw,84px)}
.hero-bottom{margin-top:50px;
gap:22px;
align-items:center}
.hero-bottom p{font-size:14px;
max-width:270px}
.round-link{flex-shrink:0;
width:42px;
height:42px}
.project-track{animation:none!important;
width:100%;
overflow:auto;
scroll-snap-type:x mandatory;
padding:0 16px}
.project{flex-shrink:0;
scroll-snap-align:center;
width:66vw;
height:75vw}
.project:nth-child(even){width:78vw}
.project>span{transform:none;
background:#000b;
font-size:12px}
.work-meta{gap:20px;
font-size:10px}
.ticker{padding-bottom:20px}
footer{padding-top:45px;
padding-bottom:35px}
footer h2{font-size:14vw}
.email{margin-top:45px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;
transition:none!important}
.project-track{width:100%;
overflow:auto}
.project{flex-shrink:0}
}

@font-face{font-family:Luxora;
src:url('assets/fonts/luxora-regular.woff2') format('woff2');
font-weight:400;
font-display:swap}
@font-face{font-family:Luxora;
src:url('assets/fonts/luxora-heavy.woff2') format('woff2');
font-weight:800 950;
font-display:swap}
@font-face{font-family:Thames;
src:url('assets/fonts/thames-italic.woff2') format('woff2');
font-style:italic;
font-weight:400;
font-display:swap}
body{font-family:Luxora,Arial,sans-serif}
h1,h2,h3{font-weight:900}
em{font-family:Thames,Georgia,serif}
.section{padding:90px var(--gutter)}
.label{display:block;
text-transform:uppercase;
font-size:11px;
letter-spacing:.08em;
line-height:1.4}
.team{color:var(--blue);
padding-top:80px;
padding-bottom:70px}
.team h2{text-transform:uppercase;
font-size:clamp(25px,3.9vw,65px);
line-height:1.02;
letter-spacing:-.05em}
.team h2 em{font-size:1.35em}
.inline-logo{width:2.85em;
height:auto;
vertical-align:-.12em;
filter:brightness(0) saturate(100%) invert(10%) sepia(100%) saturate(6600%) hue-rotate(244deg)}
.team-image{display:block;
width:100%;
height:auto;
margin:50px auto 25px;
mix-blend-mode:multiply}
.team-caption{border-top:1px solid #1010ee55;
display:grid;
grid-template-columns:1fr 2fr;
gap:35px;
padding-top:15px}
.team-caption h3{font-size:22px;
letter-spacing:-.04em;
line-height:1.05}
.team-caption p{border-left:1px solid #1010ee55;
padding-left:30px;
font-size:14px;
line-height:1.4;
max-width:470px}
.services{background:var(--ink);
color:#f8f8f8}
.section-heading{display:grid;
grid-template-columns:1fr 2.1fr;
gap:35px;
margin-bottom:55px}
.section-heading>.label{padding-top:8px}
.section-heading h2{font-size:clamp(38px,5.15vw,88px);
line-height:.95;
text-transform:uppercase;
letter-spacing:-.045em}
.section-heading h2 em{white-space:nowrap;
font-size:1.15em}
.section-heading .heading-line{display:block;
white-space:nowrap}
.section-heading .heading-line+.heading-line{margin-top:-.1em}
.service{display:grid;
grid-template-columns:.6fr 1.25fr 1.4fr;
align-items:center;
gap:40px;
padding:45px 0;
border-top:1px solid #ffffff26;
min-height:270px}
.service-number{font-family:Thames,Georgia,serif;
font-style:italic;
font-size:clamp(45px,6vw,86px);
line-height:1}
.service-media{position:relative;
aspect-ratio:1.3;
overflow:hidden;
align-self:stretch;
min-height:180px;
background:#111}
.service-media video{display:block;
width:100%;
height:100%;
object-fit:cover}
.video-toggle{position:absolute;
right:9px;
bottom:9px;
background:#000b;
border:1px solid #ffffff50;
border-radius:20px;
padding:7px 12px;
font-size:11px;
color:white;
z-index:1}
.service-copy>.label{color:#aaaaff;
margin-bottom:6px}
.service-copy h3{font-size:clamp(22px,2.4vw,40px);
line-height:1;
letter-spacing:-.05em}
.service-copy p{font-size:14px;
line-height:1.45;
color:#bfbfbf;
margin-top:14px;
max-width:370px}
.service-copy>a{font-size:12px;
display:inline-block;
margin-top:22px;
border-bottom:1px solid #ffffff40;
padding-bottom:5px;
transition:color .2s}
.service-copy>a:hover{color:#b3b3ff}
.studio{position:relative;
margin:24px;
overflow:hidden;
min-height:650px;
background:#222;
color:white;
isolation:isolate}
.studio-background{position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2}
.studio:after{content:'';
position:absolute;
inset:0;
background:#0003;
z-index:-1}
.studio-content{min-height:650px;
padding:55px;
position:relative;
display:flex;
align-items:center;
justify-content:center}
.studio-content>.label{position:absolute;
left:40px;
top:35px}
.studio h2{font-size:clamp(54px,8vw,130px);
line-height:.9;
letter-spacing:-.05em;
position:relative;
z-index:2;
pointer-events:none;
mix-blend-mode:normal;
text-shadow:0 1px 25px #0005}
.studio h2 em{font-size:1.15em}
.studio-card{display:block;
width:185px;
transform:rotate(9deg);
margin-left:45px;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
position:relative;
z-index:3;
flex-shrink:0}
.studio-card img{display:block;
width:100%;
height:250px;
object-fit:cover;
box-shadow:0 20px 70px #0006}
.studio-card span{display:flex;
justify-content:space-between;
font-size:13px;
border-bottom:1px solid white;
padding:12px 0}
.studio-card:hover{transform:rotate(0) translateY(-12px)}
.faq{display:grid;
grid-template-columns:1fr 1.4fr;
gap:75px;
background:#fff}
.faq h2{font-size:clamp(32px,4vw,65px);
line-height:.95;
letter-spacing:-.05em;
margin-top:30px}
.faq h2 em{font-size:1.2em}
.faq details{border-bottom:1px solid #ddd}
.faq summary{display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
padding:24px 0;
list-style:none;
cursor:pointer;
font-size:15px;
line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary>span{font-size:25px;
font-weight:400;
transition:transform .3s;
color:var(--blue)}
.faq details[open] summary>span{transform:rotate(45deg)}
.faq details p{color:#555;
font-size:15px;
line-height:1.6;
padding:0 25px 25px 0;
animation:enter .35s both}
.about{display:grid;
grid-template-columns:1.2fr 1fr;
align-items:center;
gap:95px}
.about h2{font-size:clamp(38px,4.6vw,76px);
text-transform:uppercase;
line-height:.95;
letter-spacing:-.055em;
margin-top:27px}
.about h2 em{font-size:1.14em}
.about p{font-size:15px;
line-height:1.5;
margin-top:30px;
max-width:420px}
.about>img{width:100%;
height:auto;
border-radius:3px}
.values{display:flex;
flex-wrap:wrap;
gap:24px;
margin-top:35px}
.values span{border-top:1px solid #bbb;
font-size:12px;
padding-top:9px}
.contact-layout{display:grid;
grid-template-columns:1fr 1.1fr;
gap:70px;
margin-top:65px}
.email{font-size:clamp(19px,2.45vw,39px);
margin-top:0;
line-height:1.25;
letter-spacing:-.025em}
.contact-intro{font-size:14px;
line-height:1.55;
margin-top:24px;
max-width:300px;
color:#ddd}
form{font-size:14px}
form label{display:block;
line-height:1.4}
.form-row{display:grid;
grid-template-columns:1fr 1fr;
gap:25px}
input,select,textarea{display:block;
width:100%;
color:white;
background:transparent;
border:0;
border-bottom:1px solid #ffffff65;
border-radius:0;
padding:14px 0;
margin:0 0 26px;
font-size:15px;
outline-offset:5px}
textarea{resize:vertical;
min-height:95px}
input::placeholder,textarea::placeholder{color:#c3c3ff;
opacity:1}
select{appearance:auto}
select option{background:white;
color:#080808}
input:focus,select:focus,textarea:focus{outline:2px solid #ffffff90}
form .privacy-note{font-size:12px;
line-height:1.5;
color:#e1e1ff;
margin-bottom:20px}
.privacy-note a{text-decoration:underline;
text-underline-offset:3px}
.submit-button{background:white;
color:var(--blue);
border:1px solid white;
width:100%;
padding:17px 20px;
display:flex;
align-items:center;
justify-content:space-between;
transition:background .25s,color .25s;
font-size:16px}
.submit-button:hover{background:transparent;
color:white}
.submit-button:disabled{opacity:.65;
cursor:wait}
#form-status{font-size:14px;
margin-top:15px;
line-height:1.5}
.honeypot{display:none}
.footer-bottom{border-top:1px solid #ffffff45;
padding-top:22px;
margin-top:75px;
display:flex;
gap:25px;
align-items:center;
font-size:11px}
.footer-bottom img{display:block;
width:90px;
height:auto}
.footer-bottom>span{margin-right:auto;
color:#ddd}
.footer-bottom a:last-child{margin-left:20px}
.reveal-ready .reveal{opacity:0;
transform:translateY(32px);
transition:opacity .9s,transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-ready .reveal.visible{opacity:1;
transform:none}
.dialog-open{overflow:hidden}
dialog{background:var(--paper);
color:var(--ink);
border:0;
width:calc(100% - 48px);
max-width:1250px;
max-height:calc(100dvh - 48px);
padding:30px;
overscroll-behavior:contain}
dialog::backdrop{background:#000c;
backdrop-filter:blur(9px)}
dialog[open]{animation:enter .4s both}
.dialog-top{display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px}
.dialog-close{border:1px solid #bbb;
background:none;
padding:10px 15px;
font-size:14px}
.dialog-content{display:grid;
grid-template-columns:1.5fr 1fr;
gap:45px;
align-items:center}
.dialog-image-wrap{background:#e5e5e5;
display:grid;
place-items:center;
min-height:350px}
.dialog-image-wrap img{display:block;
width:100%;
height:min(66vh,700px);
object-fit:contain}
.dialog-info h2{font-size:clamp(36px,5vw,65px);
line-height:1;
letter-spacing:-.05em;
margin:20px 0}
.dialog-info p{font-size:16px;
line-height:1.5;
max-width:370px}
.dialog-cta{display:inline-block;
border-bottom:1px solid var(--ink);
padding-bottom:6px;
margin-top:30px;
font-size:14px}
.dialog-navigation{display:flex;
gap:10px;
margin-top:55px}
.dialog-navigation button{background:var(--blue);
color:white;
border:0;
width:48px;
height:48px;
font-size:24px}
.legal-page{background:var(--paper);
max-width:840px;
margin:auto;
padding:65px 24px;
min-height:100vh}
.legal-page h1{font-size:clamp(40px,7vw,75px);
line-height:1;
letter-spacing:-.05em;
margin:60px 0 35px;
text-transform:none}
.legal-page h2{font-size:22px;
margin:30px 0 10px}
.legal-page p{font-size:16px;
line-height:1.65;
margin-bottom:20px}
.legal-page a{text-decoration:underline;
text-underline-offset:5px}
.legal-page>.back{font-size:14px;
color:var(--blue)}

@media(min-width:701px) and (max-width:1100px){:root{--gutter:7vw}
.header nav{gap:18px}
.section-heading h2{font-size:5.8vw}
.service{gap:24px}
.contact-layout{gap:35px}
.about{gap:50px}
.faq{gap:45px}
}

@media(max-width:700px){.section{padding-top:60px;
padding-bottom:60px}
.team h2{font-size:6vw;
line-height:1.08}
.team-image{width:calc(100% + 32px);
max-width:none;
margin:30px -16px 20px}
.team-caption{grid-template-columns:1fr;
gap:16px}
.team-caption h3{font-size:22px}
.team-caption p{border-left:0;
padding-left:0;
font-size:14px}
.section-heading{display:block;
margin-bottom:35px}
.section-heading>.label{margin-bottom:30px}
.section-heading h2{font-size:7.8vw;
line-height:.92}
.service{grid-template-columns:42px 1fr;
gap:18px;
padding:28px 0;
align-items:start}
.service-number{font-size:40px;
padding-top:8px}
.service-media{aspect-ratio:1.4;
min-height:0}
.service-copy{grid-column:2}
.service-copy h3{font-size:29px}
.service-copy p{font-size:14px}
.service-copy>a{font-size:12px}
.studio{margin:12px;
min-height:560px}
.studio-content{min-height:560px;
padding:65px 24px;
display:block}
.studio-content>.label{left:24px;
top:25px;
font-size:10px}
.studio h2{font-size:14vw;
margin-top:30px;
z-index:4}
.studio-card{width:135px;
margin:25px 20px 0 auto;
transform:rotate(8deg)}
.studio-card img{height:180px}
.studio-card span{font-size:12px}
.faq{grid-template-columns:1fr;
gap:30px}
.faq h2{font-size:44px;
margin-top:20px}
.faq summary{font-size:15px;
padding:20px 0}
.about{grid-template-columns:1fr;
gap:40px}
.about h2{font-size:12vw}
.about>img{max-height:480px;
object-fit:cover}
.contact-layout{grid-template-columns:1fr;
gap:45px;
margin-top:45px}
.email{font-size:28px}
.contact-intro{font-size:14px}
.form-row{gap:18px}
.footer-bottom{flex-wrap:wrap;
gap:20px;
margin-top:50px}
.footer-bottom>span{margin-right:0;
flex:1}
.footer-bottom a:last-child{margin-left:auto}
dialog{width:calc(100% - 20px);
max-height:calc(100dvh - 20px);
padding:18px}
.dialog-content{grid-template-columns:1fr;
gap:25px}
.dialog-image-wrap{min-height:200px}
.dialog-image-wrap img{height:42vh}
.dialog-info h2{font-size:38px;
margin-top:12px}
.dialog-navigation{margin-top:25px}
.dialog-top{margin-bottom:18px}
.dialog-top .label{font-size:10px}
.dialog-close{padding:8px 12px}
.dialog-info p{font-size:15px}
}

@media(prefers-reduced-motion:reduce){.reveal-ready .reveal{opacity:1;
transform:none}
.studio-card{transform:none}
}
.motion-paused .reveal{transition:none;
opacity:1;
transform:none}
.motion-paused .studio-card{transition:none}



h1,footer h2{letter-spacing:-.04em}
h1 em,footer h2 em{letter-spacing:-.065em}
.header nav a,.nav-contact{font-size:14px}
.label{font-size:12px}
.eyebrow{font-size:12px}
.hero-bottom p,.team-caption p,.service-copy p,.about p,.contact-intro{font-size:16px}
.work-meta{font-size:12px}
.work-meta button,.service-copy>a,.video-toggle{font-size:12px}
.values span{font-size:14px}
.footer-bottom{font-size:12px}
.project small{font-size:12px}
@media(max-width:700px){.eyebrow{font-size:10px;
gap:18px}
.eyebrow>span:last-child{text-align:right;
max-width:150px}
.hero-bottom p{font-size:15px}
.work-meta{font-size:10px}
.hero h1{font-size:11.7vw}
.form-row{grid-template-columns:1fr;
gap:0}
.service-copy p{font-size:15px}
}

@media(max-width:700px){.hero h1{font-size:14vw;
line-height:.9}
.hero h1 em{line-height:1.05}
.hero{min-height:660px}
.hero-bottom{margin-top:42px}
}


/* V2 — La fotografía y la sección comparten una sola superficie. */
.team.section {
  --team-paper: #f9f6ee;
  padding: clamp(55px, 6vw, 105px) 0 65px;
  background: var(--team-paper);
  overflow: hidden;
}
.team h2, .team-caption {
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}
.team h2 { position: relative; z-index: 1; }
.team-image {
  width: 100%;
  max-width: 1600px;
  height: auto;
  margin: 20px auto 0;
  mix-blend-mode: normal;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 91%, transparent 100%);
}
.team-image.reveal {
  transform-origin: 50% 60%;
  transition: opacity 1.1s, transform 1.5s cubic-bezier(.16,1,.3,1);
}
.reveal-ready .team-image.reveal:not(.visible) {
  transform: translateY(35px) scale(1.035);
}
.team-caption { margin-top: 10px; }
/* Las imágenes de los proyectos responden a la dirección del puntero. */
@media (hover: hover) and (pointer: fine) {
  .project:hover img {
    transform: scale(1.075) translate(var(--pointer-x, 0px), var(--pointer-y, 0px));
  }
  .service-media {
    transition: transform .7s var(--ease-out);
  }
  .service:hover .service-media { transform: translateY(-7px); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .studio-background {
      height: 115%; top: -8%;
      animation: studio-travel linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .studio-card {
      animation: card-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 65%;
    }
  }
}
@keyframes studio-travel {
  from { transform: translateY(-3%); }
  to { transform: translateY(6%); }
}
@keyframes card-arrive {
  from { transform: translateY(65px) rotate(15deg); }
  to { transform: translateY(-10px) rotate(-5deg); }
}
.motion-paused .studio-background,
.motion-paused .studio-card { animation: none !important; }
@media (max-width: 700px) {
  .team.section { padding-top: 55px; padding-bottom: 45px; }
  .team h2 { font-size: 6.2vw; }
  .team-image { width: 100%; max-width: none; margin: 20px auto 0; }
  .team-caption { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-image.reveal, .service:hover .service-media, .project:hover img { transform: none !important; }
}

/* V2 — Intro «Enfocando», inspirada en el prototipo 03. */
.intro[hidden] { display: none; }
.intro {
  position: fixed; inset: 0; z-index: 1000;
  background: #080808; color: #fff;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(24px, 4vw, 60px);
  opacity: 1; transform: translateY(0);
  transition: transform .55s cubic-bezier(.76,0,.24,1), visibility .55s;
}
body.intro-active { overflow: hidden; }
.intro-top, .intro-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: 12px; letter-spacing: .04em;
}
.intro-top { text-transform: uppercase; }
.intro-top > span { color: #a2a2a2; }
#intro-skip {
  background: transparent; color: white; border: 0; border-bottom: 1px solid #686868;
  padding: 10px 0; font-size: 13px; white-space: nowrap;
}
.intro-center { align-self: center; justify-self: center; width: min(72vw, 420px); text-align: center; }
.intro-wordmark { position: relative; width: 100%; height: auto; margin-bottom: 36px; }
.intro-wordmark img { display: block; width: 100%; height: auto; animation: intro-focus 1.6s cubic-bezier(.16,1,.3,1) both; }
.intro-echo {
  position: absolute; inset: 0;
  background: url('assets/logo.png') center / contain no-repeat;
  opacity: 0; pointer-events: none;
}
.echo-one { clip-path: inset(18% 0 47%); animation: echo-right 1.45s ease-out both; }
.echo-two { clip-path: inset(61% 0 12%); animation: echo-left 1.45s ease-out both; }
.intro-caption { position: relative; height: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: .13em; }
.intro-caption span { position: absolute; left: 0; right: 0; opacity: 0; }
.intro-caption span:nth-child(1) { animation: intro-copy-a 2.45s both; }
.intro-caption span:nth-child(2) { animation: intro-copy-b 2.45s both; }
.intro-caption span:nth-child(3) { animation: intro-copy-c 2.45s both; }
.intro-line { width: 64%; height: 2px; background: #272727; margin: 13px auto 0; overflow: hidden; }
.intro-line span { display: block; height: 100%; background: #3636ff; transform-origin: left; animation: intro-line 2.4s cubic-bezier(.55,.1,.25,1) both; }
.intro-bottom { color: #858585; }
.intro-signature { font-size: 14px; letter-spacing: 0; }
.intro-signature em { font-size: 20px; color: #fff; }
.intro.intro-leaving { transform: translateY(-100%); visibility: hidden; pointer-events: none; }
.replay-intro { background: none; border: none; padding: 0; font: inherit; color: inherit; }
@keyframes intro-focus {
  0% { opacity: 0; filter: blur(15px); transform: scaleX(1.16); }
  25% { opacity: .8; filter: blur(6px); transform: scaleX(1.07); }
  65%,100% { opacity: 1; filter: blur(0); transform: scaleX(1); }
}
@keyframes echo-right {
  0% { opacity: 0; transform: translateX(-40px); filter: blur(12px); }
  20% { opacity: .6; transform: translateX(28px); filter: blur(3px); }
  55% { opacity: .18; transform: translateX(-9px); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes echo-left {
  0% { opacity: 0; transform: translateX(50px); filter: blur(8px); }
  25% { opacity: .65; transform: translateX(-24px); filter: blur(3px); }
  60% { opacity: .15; transform: translateX(6px); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes intro-copy-a { 0%,25% { opacity: 1; } 33%,100% { opacity: 0; } }
@keyframes intro-copy-b { 0%,28% { opacity: 0; } 36%,62% { opacity: 1; } 70%,100% { opacity: 0; } }
@keyframes intro-copy-c { 0%,65% { opacity: 0; } 75%,100% { opacity: 1; } }
@keyframes intro-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 700px) {
  .intro-top > span { max-width: 130px; line-height: 1.5; font-size: 10px; }
  .intro-bottom { font-size: 10px; align-items: flex-end; }
  .intro-bottom > span:first-child { max-width: 130px; line-height: 1.6; }
  .intro-signature { max-width: 120px; text-align: right; line-height: 1.5; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { transition: opacity .1s; }
  .intro-wordmark img { opacity: 1; filter: none; transform: none; }
  .intro-echo { display: none; }
  .intro-caption span { display: none; }
  .intro-caption span:last-child { display: block; opacity: 1; }
  .intro-line span { transform: scaleX(1); }
  .intro.intro-leaving { transform: none; opacity: 0; }
}

@media(max-width:700px){.team h2{font-size:5.2vw;line-height:1.12}}

/* ================================================================
   V4 — Movimiento con intención. Cada bloque se puede quitar entero.
   ================================================================ */

/* — Cabecera fija que toma el color del capítulo que hay debajo — */
.header{
  --h-bg:transparent;--h-ink:#fff;
  background:var(--h-bg);color:var(--h-ink);
  padding-top:18px;padding-bottom:18px;
  transition:background-color var(--t-ui) ease,color var(--t-ui) ease,box-shadow var(--t-ui) ease;
}
.header.is-scrolled{box-shadow:0 1px 0 color-mix(in srgb,currentColor 16%,transparent)}
.logo{width:122px;height:auto;aspect-ratio:1200/376;background:currentColor;
  -webkit-mask:url('assets/logo.png') center/contain no-repeat;mask:url('assets/logo.png') center/contain no-repeat}
.brand{display:block;padding:6px 0}
.header nav a{padding:10px 0}
.header nav a:after{bottom:4px;transition:transform var(--t-hover) var(--ease-out)}
.nav-contact{border-bottom-color:color-mix(in srgb,currentColor 50%,transparent);padding:10px 0 5px}
.mobile-nav{transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out);transform-origin:top right}
.mobile-nav:not(.is-open){opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none}
.menu-toggle span{display:inline-block;transition:transform var(--t-ui) var(--ease-out)}
.menu-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
@media(max-width:700px){.header{padding-top:14px;padding-bottom:14px}.logo{width:98px}.mobile-nav{inset:70px 12px auto}}

/* — Portada: titular que sube desde detrás de su línea — */
.hero{position:relative}
.hero-title{position:relative}
@media(min-width:1000px){.hero-title{font-size:clamp(64px,9.25vw,170px)}.hero-title h1{font-size:1em}}
.lines .line{display:block;padding-bottom:.12em;margin-bottom:-.12em;clip-path:inset(-1em -1em 0 -1em)}
.lines .line>*{display:block}
@media(prefers-reduced-motion:no-preference){
  .lines .line>*{animation:line-up .95s var(--ease-out) both}
  .lines .line:nth-child(2)>*{animation-delay:.11s}
  .lines .line:nth-child(3)>*{animation-delay:.22s}
  .hero .eyebrow,.hero-bottom{animation:rise .8s var(--ease-out) .45s both}
  .intro-active .lines .line>*,.intro-active .hero .eyebrow,.intro-active .hero-bottom{animation:none;transform:translateY(110%)}
  .intro-active .hero .eyebrow,.intro-active .hero-bottom{transform:translateY(18px);opacity:0}
}
@keyframes line-up{from{transform:translateY(110%)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* — Portfolio: bucle continuo, sin ida y vuelta — */
.project{margin-right:8px}
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
  .project-track.is-looping{animation:loop 70s linear infinite}
  .project-track.second.is-looping{animation-duration:80s;animation-direction:reverse}
}
@keyframes loop{to{transform:translateX(-50%)}}
.project>span{transition:transform .45s var(--ease-out)}
.project img{transition:transform .7s var(--ease-out),opacity var(--t-ui) ease}
@media(hover:hover) and (pointer:fine){
  .project-track:hover .project:not(:hover) img{opacity:.5}
}
.project.is-clone{display:none}
.project-track.is-looping .project.is-clone{display:block}
@media(max-width:700px){.project-track.is-looping .project.is-clone{display:none}.project{margin-right:0}.project-track{gap:8px}}

/* — Pulsación: todo lo que se pulsa responde — */
button,.round-link,.submit-button,.dialog-cta,.studio-card span,.nav-contact{transition-property:transform,background-color,color,opacity;transition-duration:var(--t-press);transition-timing-function:var(--ease-out)}
button:active,.round-link:active,.submit-button:active,.nav-contact:active{transform:scale(.97)}

/* — Zonas táctiles más cómodas — */
.service-copy>a{padding:12px 0 5px;margin-top:10px}
.footer-bottom a,.footer-bottom button{padding:12px 0}
.team-label{margin:0 var(--gutter) 22px;color:var(--blue)}

.motion-paused .project-track{animation-play-state:paused}

/* ==========================================================
   V5 · Portada con el punto (efecto firma: el punto rebota por
   las letras con el scroll, se coloca y se abre en blanco) y
   proyectos en tres bandas diagonales. Para quitarlo: borrar este
   bloque, las secciones .fin y .arch del HTML y punto.js.
   ========================================================== */
.fin{position:relative;height:320vh;height:320svh;background:var(--blue);color:#fff}
.fin-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.fin-logo{--w:min(78vw,1080px);width:var(--w);transform:translateY(4vh)}
.fin-logo svg{display:block;width:100%;height:auto;overflow:visible;shape-rendering:geometricPrecision}
.fin-l{fill:#fff;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);opacity:0}
.fin-dot{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:#fff;transform:translate3d(-200px,-200px,0)}
.fin-paper{position:absolute;left:0;top:0;border-radius:50%;background:#fff;transform:scale(0);transform-origin:50% 50%;visibility:hidden}
.fin-start{position:absolute;left:0;right:0;top:calc(50% + 4vh + min(78vw,1080px)*.157 + 40px);text-align:center;font-size:clamp(17px,1.6vw,24px);letter-spacing:-.01em}
.fin-start em{font-family:'Thames',serif;font-style:italic}
.fin-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,3vh,36px);padding:90px 0 calc(var(--band) + 20px);text-align:center;color:var(--ink);pointer-events:none;--band:58px}
.fin-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:0}
.fin-copy{font-size:clamp(30px,min(4.6vw,7.4vh),84px);line-height:1.02;letter-spacing:-.035em;max-width:19ch;padding:0 22px;font-weight:900;text-transform:uppercase}
.fin-copy em{text-transform:lowercase;font-weight:400;letter-spacing:-.02em}
.fin-copy em{font-family:'Thames',serif;font-style:italic;color:var(--blue);text-transform:lowercase}
.fin-line{display:inline-block;opacity:0;transform:translateY(.6em)}
.fin .fin-ticker{position:absolute;left:0;right:0;bottom:0;height:var(--band);display:flex;align-items:center;padding:0;font-size:15px;background:var(--blue);color:#fff;opacity:0}
.fin-hint{position:absolute;left:50%;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transform:translateX(-50%)}
.fin-hint i{display:block;width:120px;height:2px;background:rgba(255,255,255,.28);overflow:hidden}
.fin-hint b{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
@media(max-width:700px){
 .fin{height:270vh;height:270svh}
 .fin-logo{--w:86vw}
 .fin-start{top:calc(50% + 4vh + 86vw*.157 + 32px)}
 .fin-copy{font-size:min(9.4vw,5.2vh);max-width:none}
 .fin-text{--band:48px}
 .fin .fin-ticker{font-size:13px}
}
/* Sin movimiento: logo completo y texto, sin recorrido largo. */
.fin.is-static{height:auto}
.fin.is-static .fin-stage{position:relative;height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:48px;padding:120px 0 80px}
.fin.is-static .fin-l,.fin.is-static .fin-line,.fin.is-static .fin-label,.fin.is-static .fin-ticker{opacity:1;transform:none}
.fin.is-static .fin-logo{transform:none}
.fin.is-static .fin-paper,.fin.is-static .fin-hint,.fin.is-static .fin-start{display:none}
.fin.is-static .fin-text{position:static;color:#fff}
.fin.is-static .fin-copy em{color:#fff}
.fin.is-static .fin-ticker{position:static;height:auto;padding:16px 0;background:#fff;color:var(--blue)}
.fin.is-static .fin-text{padding:0}

/* Proyectos: tres bandas en diagonal que se deslizan y la palabra que aparece. */
.arch{position:relative;height:240vh;height:240svh;background:var(--ink);color:#fff}
.arch-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.arch-grid{position:absolute;left:50%;top:50%;width:min(124vw,1900px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;transform:translate(-50%,-50%) scale(.6)}
.arch-col{display:flex;flex-direction:column;gap:18px}
.arch-card{position:relative;display:block;overflow:hidden;background:#161616}
.arch-card img{display:block;width:100%;height:auto}
.arch-shade{position:absolute;inset:0;background:#080808;opacity:0;pointer-events:none}
.arch-word{position:absolute;inset:0;display:grid;place-items:center;margin:0;pointer-events:none}
.arch-word span{display:block;font-size:clamp(54px,12.5vw,230px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;clip-path:inset(100% 0 0 0);transform:translateY(.12em)}
.arch-meta{position:absolute;left:0;right:0;bottom:0;padding:18px var(--gutter);background:linear-gradient(transparent,#080808cc);color:#ccc}
@media(max-width:700px){
 .arch{height:200vh;height:200svh}
 .arch-grid{width:175vw;gap:10px}
 .arch-col{gap:10px}
 .arch-meta{padding:16px 20px}
}
.arch.is-static .arch-shade{opacity:.5}
.arch.is-static .arch-word span{clip-path:none;transform:none}