@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--paper:#242628;--ink:#f1f0eb;--muted:#b2b4b1;--surface:#2d3032;--line:#44474a;--accent:#c6ec83;--space:clamp(22px,5vw,76px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit}
header,main,footer{max-width:1480px;margin-inline:auto;padding-inline:var(--space)}
header{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{font-size:17px;font-weight:600;letter-spacing:-.4px;line-height:1.25}
nav{display:flex;gap:30px;font-size:14px}
nav a{display:inline-flex;align-items:center;min-height:44px}
nav a:hover,.back:hover,.source-link a:hover,footer a:hover{text-decoration:underline;text-underline-offset:5px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-weight:500}
.hero{padding:24px 0 44px}
.hero h1{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:clamp(60px,8vw,100px);font-weight:600;letter-spacing:-.025em;line-height:.98;margin:0 0 24px}
.hero h1 span{display:block}
.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:20px}
.hero-bottom p{font-size:clamp(18px,2vw,25px);margin:0}
.jump{font-size:14px;padding:10px 0;border-bottom:1px solid var(--accent);color:var(--accent)}
.jump:hover{color:var(--ink);border-color:var(--ink)}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:25px}
.section-heading h2{font-size:28px;letter-spacing:-.7px;margin:0}
.section-heading>span{font-size:13px;color:var(--muted)}
.about{margin-top:110px;padding:68px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:28px}
.about h2{font-size:clamp(30px,3.5vw,46px);letter-spacing:-1.5px;line-height:1.15;margin:0}
.about p{font-size:20px;line-height:1.65;max-width:54ch;margin-bottom:0}
.contact{margin:16px 0 80px;padding:40px 0 0;border-top:1px solid var(--line)}
.eyebrow{font-size:14px;color:var(--muted);margin:0;font-weight:400}
.contact .mail-cta{display:inline-block;font-size:clamp(42px,7vw,86px);line-height:1.2;letter-spacing:-.045em;color:var(--accent);margin:16px 0 24px}
.mail-cta:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:9px}
.contact-details{font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.contact-details p{margin:2px 0}
.contact-details a{display:inline-block;padding:5px 0}
.contact-details a:hover{text-decoration:underline;text-underline-offset:4px}
footer{border-top:1px solid var(--line);padding-top:25px;padding-bottom:30px;display:flex;justify-content:space-between;gap:24px;font-size:12px}
footer>span{color:var(--muted)}
.back{display:inline-block;font-size:14px;margin:26px 0 46px;min-height:44px;padding-block:10px;color:var(--muted)}
.project-top h1{font-size:clamp(36px,6.5vw,88px);letter-spacing:-.055em;line-height:1.08;margin:17px 0 28px;overflow-wrap:break-word}
.project-copy{display:flex;justify-content:space-between;gap:30px;margin-bottom:36px}
.project-copy>p{font-size:19px;line-height:1.6;max-width:58ch;margin:0}
.project-copy>p:empty{display:none}
.credits{min-width:125px;font-size:13px;line-height:1.8;color:var(--muted)}
.player{background:#191919;aspect-ratio:16/9;width:100%}
.player iframe{width:100%;height:100%;border:0;display:block}
.playlist{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.piece{color:var(--ink);cursor:pointer;border:1px solid var(--line);border-radius:4px;background:transparent;padding:12px 20px;min-height:46px;font-size:14px}
.piece.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.piece:hover:not(.active){border-color:var(--accent)}
.source-link{font-size:13px;color:var(--muted);margin:26px 0 0}
.source-link a{text-decoration:underline;text-underline-offset:4px}
.next{display:block;border-top:1px solid var(--line);margin:80px 0 55px;padding-top:28px}
.next strong{font-size:clamp(28px,4vw,50px);letter-spacing:-1.5px;font-weight:500;display:block;margin-top:10px;line-height:1.2}
.next:hover strong{text-decoration:underline;text-underline-offset:7px}
.skip{position:absolute;left:20px;top:-80px;padding:12px;background:var(--accent);color:#242628;z-index:99}
.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
@media(max-width:700px){
 header{min-height:88px;gap:16px}.brand{font-size:16px;max-width:155px}nav{gap:17px;font-size:13px}
 .hero{padding:20px 0 36px}.hero h1{font-size:clamp(52px,10vw,70px);margin-bottom:20px}.hero-bottom{margin-top:20px}
 .section-heading h2{font-size:25px}
 .about{grid-template-columns:1fr;gap:25px;margin-top:64px;padding:40px 0}.about p{font-size:18px}
 .contact{padding-top:30px;margin-bottom:48px}.contact-details{font-size:14px}
 footer{flex-wrap:wrap;justify-content:space-between;gap:16px}footer>span{order:3;width:100%}
 .back{margin:14px 0 25px}.project-copy{display:block}.project-copy>p{font-size:17px}.credits{margin-top:18px}
 .next{margin-top:52px}.piece{padding:11px 16px}
}
@media(max-width:420px){header{flex-wrap:wrap;padding-top:20px;padding-bottom:12px;gap:10px}.brand{max-width:none}nav{width:100%;justify-content:space-between}.hero{padding-top:18px}.hero h1{font-size:clamp(48px,12vw,52px)}.hero-bottom{gap:12px}.hero-bottom p{font-size:17px}.jump{font-size:13px}.count{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Full-width project mosaic; surrounding sections retain their original width. */
main.home{max-width:none;padding-inline:0}
.home>section:not(#trabajos),.home #trabajos>.section-heading{width:calc(min(100%,1480px) - 2 * var(--space));margin-inline:auto}
.project-mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.project-cover{position:relative;display:block;aspect-ratio:1;min-width:0;overflow:hidden;background:var(--surface)}
.project-cover>img{width:100%;height:100%;display:block;object-fit:cover}
.cover-caption{position:absolute;inset:0;background:linear-gradient(to bottom,rgb(20 22 24 / 94%) 0,rgb(20 22 24 / 82%) 100px,rgb(20 22 24 / 25%) 180px,transparent 260px);color:var(--ink);padding:clamp(14px,2vw,28px);opacity:0;transition:opacity 180ms ease;pointer-events:none}
.cover-caption h3{font-size:clamp(22px,2vw,30px);font-weight:600;line-height:1.25;letter-spacing:-.4px;margin:0;max-width:20ch}
.project-cover:focus-visible{outline-offset:-4px;z-index:1}
.project-cover:focus-visible .cover-caption{opacity:1}
@media(hover:hover) and (pointer:fine){.project-cover:hover .cover-caption{opacity:1}}
@media(max-width:900px){.project-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.cover-caption{padding:14px}.cover-caption h3{font-size:clamp(18px,4.5vw,22px)}}
@media(hover:none),(pointer:coarse),(max-width:700px){
 .cover-caption{inset:auto 0 0;padding:28px 12px 12px;opacity:1;background:linear-gradient(to top,rgb(20 22 24 / 88%) 0,rgb(20 22 24 / 64%) 48%,transparent 100%);text-align:left}
 .project-mosaic.scroll-reveal .cover-caption{opacity:0}
 .project-mosaic.scroll-reveal .project-cover.is-visible .cover-caption,.project-mosaic.scroll-reveal .project-cover:focus-visible .cover-caption{opacity:1}
}
@media(prefers-reduced-motion:reduce){.cover-caption{transition:none}}

.about p+p{margin-top:1em}