@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img,video{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

:root{
  --w:    #f5f2ed;
  --w2:   #ece8df;
  --w3:   #e0dbd0;
  --ink:  #0d0d0b;
  --ink2: #3a3830;
  --ink3: #8c8678;
  --red:  #c41e1e;
  --line: rgba(13,13,11,.1);
  --B:    'Bebas Neue',sans-serif;
  --S:    'Libre Baskerville',Georgia,serif;
  --M:    'DM Mono',monospace;
}

body{background:var(--w);color:var(--ink);font-family:var(--S);font-size:17px;line-height:1.75;overflow-x:hidden}
::selection{background:var(--ink);color:var(--w)}
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-thumb{background:var(--ink)}

/* ── GRAIN ── */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.032'/%3E%3C/svg%3E");
  background-size:256px;opacity:.65;mix-blend-mode:multiply}

/* ── PRELOADER ── */
#preloader{
  position:fixed;inset:0;z-index:9999;background:#0d0d0b;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}
/* Sprocket holes top & bottom */
.pre-strip-top,.pre-strip-bot{
  position:absolute;left:0;right:0;height:28px;background:#0a0a08;
  display:flex;align-items:center;gap:0;
}
.pre-strip-top{top:0;border-bottom:1px solid rgba(255,255,255,.06)}
.pre-strip-bot{bottom:0;border-top:1px solid rgba(255,255,255,.06)}
.pre-strip-top::before,.pre-strip-bot::before{
  content:'';display:block;width:14px;height:10px;border-radius:2px;
  background:#1a1a18;border:1px solid rgba(255,255,255,.08);flex-shrink:0;
  box-shadow:28px 0 #1a1a18,56px 0 #1a1a18,84px 0 #1a1a18,112px 0 #1a1a18,140px 0 #1a1a18,168px 0 #1a1a18,196px 0 #1a1a18,224px 0 #1a1a18,252px 0 #1a1a18,280px 0 #1a1a18,308px 0 #1a1a18,336px 0 #1a1a18,364px 0 #1a1a18,392px 0 #1a1a18,420px 0 #1a1a18,448px 0 #1a1a18,476px 0 #1a1a18,504px 0 #1a1a18,532px 0 #1a1a18,560px 0 #1a1a18,588px 0 #1a1a18,616px 0 #1a1a18,644px 0 #1a1a18,672px 0 #1a1a18,700px 0 #1a1a18,728px 0 #1a1a18,756px 0 #1a1a18,784px 0 #1a1a18,812px 0 #1a1a18,840px 0 #1a1a18,868px 0 #1a1a18,896px 0 #1a1a18,924px 0 #1a1a18,952px 0 #1a1a18,980px 0 #1a1a18,1008px 0 #1a1a18,1036px 0 #1a1a18,1064px 0 #1a1a18,1092px 0 #1a1a18,1120px 0 #1a1a18,1148px 0 #1a1a18,1176px 0 #1a1a18,1204px 0 #1a1a18,1232px 0 #1a1a18,1260px 0 #1a1a18,1288px 0 #1a1a18,1316px 0 #1a1a18,1344px 0 #1a1a18,1372px 0 #1a1a18,1400px 0 #1a1a18,1428px 0 #1a1a18,1456px 0 #1a1a18,1484px 0 #1a1a18,1512px 0 #1a1a18,1540px 0 #1a1a18;
}
/* Film frame counter box */
.pre-frame-box{
  position:relative;
  width:340px;height:260px;
  border:2px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  overflow:hidden;
}
.pre-frame-box::before{
  content:'';position:absolute;inset:8px;
  border:1px solid rgba(255,255,255,.05);pointer-events:none;
}
/* Corner marks like a film frame */
.pre-frame-box::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px) 12px 12px,
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px) 12px calc(100% - 12px),
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px) calc(100% - 12px) 12px,
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px) calc(100% - 12px) calc(100% - 12px),
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px) 12px 12px,
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px) 12px calc(100% - 12px),
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px) calc(100% - 12px) 12px,
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px) calc(100% - 12px) calc(100% - 12px);
  background-repeat:no-repeat;
  background-size:20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px;
  pointer-events:none;
}
/* Flicker animation */
.pre-frame-box{animation:flicker 4s infinite}
@keyframes flicker{
  0%,100%{opacity:1}2%{opacity:.85}4%{opacity:1}50%{opacity:.97}52%{opacity:.88}54%{opacity:1}
}
.pre-number{
  font-family:var(--B);font-size:140px;color:rgba(255,255,255,.9);
  line-height:1;letter-spacing:.02em;
  position:relative;z-index:1;
  text-shadow:0 0 60px rgba(255,255,255,.08);
  transition:opacity .08s;
}
.pre-number.flash{opacity:.3}
.pre-cross{
  position:absolute;width:100%;height:100%;z-index:0;pointer-events:none;
}
.pre-cross::before,.pre-cross::after{
  content:'';position:absolute;background:rgba(255,255,255,.04);
}
.pre-cross::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.pre-cross::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
/* Red frame mark */
.pre-red-dot{
  position:absolute;top:12px;right:12px;
  width:16px;height:16px;border-radius:50%;
  background:var(--red);z-index:2;
  box-shadow:0 0 12px rgba(196,30,30,.8);
}
.pre-label-top{
  position:absolute;top:14px;left:18px;
  font-family:var(--M);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.2);z-index:2;
}
.pre-label-bot{
  position:absolute;bottom:14px;left:18px;
  font-family:var(--M);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.2);z-index:2;
}
.pre-title{
  font-family:var(--B);font-size:22px;letter-spacing:.3em;
  color:rgba(255,255,255,.35);margin-top:28px;text-transform:uppercase;
}
.pre-bar-wrap{
  width:340px;height:2px;background:rgba(255,255,255,.08);margin-top:20px;
  overflow:hidden;
}
.pre-bar{
  height:100%;background:var(--red);width:0%;
  transition:width .15s linear;
}
.pre-sound{
  display:flex;align-items:flex-end;gap:2px;height:20px;margin-top:16px;
}
.pre-sound span{
  width:3px;background:rgba(255,255,255,.2);border-radius:1px;
  animation:soundWave 1.2s ease-in-out infinite;
}
.pre-sound span:nth-child(1){height:6px;animation-delay:0s}
.pre-sound span:nth-child(2){height:14px;animation-delay:.1s}
.pre-sound span:nth-child(3){height:20px;animation-delay:.2s}
.pre-sound span:nth-child(4){height:10px;animation-delay:.3s}
.pre-sound span:nth-child(5){height:16px;animation-delay:.4s}
.pre-sound span:nth-child(6){height:8px;animation-delay:.5s}
.pre-sound span:nth-child(7){height:18px;animation-delay:.6s}
.pre-sound span:nth-child(8){height:4px;animation-delay:.7s}
@keyframes soundWave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.25)}}
#preloader.out{animation:preOut .5s forwards}
@keyframes preOut{to{opacity:0;visibility:hidden}}

/* ── FILM STRIP DIVIDER ── */
.film-strip{
  width:100%;height:18px;background:var(--ink);
  position:relative;overflow:hidden;flex-shrink:0;
}
.film-strip::before{
  content:'';position:absolute;top:50%;transform:translateY(-50%);
  left:4px;display:block;
  width:12px;height:8px;border-radius:1px;background:var(--w2);
  box-shadow:22px 0 var(--w2),44px 0 var(--w2),66px 0 var(--w2),88px 0 var(--w2),110px 0 var(--w2),132px 0 var(--w2),154px 0 var(--w2),176px 0 var(--w2),198px 0 var(--w2),220px 0 var(--w2),242px 0 var(--w2),264px 0 var(--w2),286px 0 var(--w2),308px 0 var(--w2),330px 0 var(--w2),352px 0 var(--w2),374px 0 var(--w2),396px 0 var(--w2),418px 0 var(--w2),440px 0 var(--w2),462px 0 var(--w2),484px 0 var(--w2),506px 0 var(--w2),528px 0 var(--w2),550px 0 var(--w2),572px 0 var(--w2),594px 0 var(--w2),616px 0 var(--w2),638px 0 var(--w2),660px 0 var(--w2),682px 0 var(--w2),704px 0 var(--w2),726px 0 var(--w2),748px 0 var(--w2),770px 0 var(--w2),792px 0 var(--w2),814px 0 var(--w2),836px 0 var(--w2),858px 0 var(--w2),880px 0 var(--w2),902px 0 var(--w2),924px 0 var(--w2),946px 0 var(--w2),968px 0 var(--w2),990px 0 var(--w2),1012px 0 var(--w2),1034px 0 var(--w2),1056px 0 var(--w2),1078px 0 var(--w2),1100px 0 var(--w2),1122px 0 var(--w2),1144px 0 var(--w2),1166px 0 var(--w2),1188px 0 var(--w2),1210px 0 var(--w2),1232px 0 var(--w2),1254px 0 var(--w2),1276px 0 var(--w2),1298px 0 var(--w2),1320px 0 var(--w2),1342px 0 var(--w2),1364px 0 var(--w2),1386px 0 var(--w2),1408px 0 var(--w2),1430px 0 var(--w2),1452px 0 var(--w2),1474px 0 var(--w2),1496px 0 var(--w2),1518px 0 var(--w2),1540px 0 var(--w2),1562px 0 var(--w2),1584px 0 var(--w2),1606px 0 var(--w2),1628px 0 var(--w2),1650px 0 var(--w2),1672px 0 var(--w2),1694px 0 var(--w2),1716px 0 var(--w2),1738px 0 var(--w2),1760px 0 var(--w2),1782px 0 var(--w2),1804px 0 var(--w2),1826px 0 var(--w2),1848px 0 var(--w2),1870px 0 var(--w2),1892px 0 var(--w2),1914px 0 var(--w2),1936px 0 var(--w2),1958px 0 var(--w2),1980px 0 var(--w2),2002px 0 var(--w2),2024px 0 var(--w2),2046px 0 var(--w2),2068px 0 var(--w2);
}

/* ── NAV ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 56px;transition:all .45s;
}
#nav.scrolled{
  background:rgba(245,242,237,.96);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:13px 56px;
}
.nav-logo{font-family:var(--B);font-size:20px;letter-spacing:.15em;color:var(--ink);line-height:1}
.nav-logo .dot{color:var(--red)}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{font-family:var(--M);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);transition:color .3s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--ink);transition:width .3s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}

/* ── HERO ── */
#hero{position:relative;height:100vh;overflow:hidden;display:flex;align-items:flex-end;background:var(--ink)}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media iframe,.hero-media .no-video{width:100%;height:100%;object-fit:cover;border:none}
.hero-media iframe{
  pointer-events:none;
  position:absolute;
  top:50%;left:50%;
  width:100vw;
  height:56.25vw; /* 16:9 */
  min-height:100vh;
  min-width:177.78vh;
  transform:translate(-50%,-50%);
  border:none;
}
.hero-media .no-video{background:var(--ink);display:flex;align-items:center;justify-content:center}
.hero-vignette{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(13,13,11,.2) 0%,transparent 35%,rgba(13,13,11,.8) 100%);
}
/* Side film strips on hero */
.hero-side-l,.hero-side-r{
  position:absolute;top:0;bottom:0;width:18px;z-index:2;background:rgba(13,13,11,.7);
}
.hero-side-l{left:0}.hero-side-r{right:0}
.hero-content{position:relative;z-index:3;padding:0 56px 80px;max-width:1000px}
.hero-pre{
  font-family:var(--M);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(245,242,237,.4);margin-bottom:14px;display:flex;align-items:center;gap:14px;
  opacity:0;animation:up .8s .2s forwards;
}
.hero-pre .rc{color:var(--red)}
.hero-pre::before{content:'';width:20px;height:1px;background:var(--red);display:block}
.hero-title{
  font-family:var(--B);font-size:clamp(80px,14vw,190px);
  line-height:.88;letter-spacing:.04em;color:var(--w);
  opacity:0;animation:up .9s .35s forwards;
}
.hero-title span{display:block}
.hero-sub{
  font-family:var(--S);font-style:italic;font-size:clamp(14px,1.6vw,19px);
  color:rgba(245,242,237,.55);margin-top:18px;max-width:480px;
  opacity:0;animation:up .8s .6s forwards;
}
.hero-frame-num{
  position:absolute;right:56px;bottom:80px;z-index:3;
  font-family:var(--M);font-size:9px;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(245,242,237,.2);display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.hero-frame-num .fn{font-size:14px;color:rgba(245,242,237,.15);font-style:normal}

@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.4,0,.2,1),transform .85s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ── SECTIONS ── */
section{padding:110px 0;border-bottom:1px solid var(--line)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:56px}
.lbl{font-family:var(--M);font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:12px;margin-bottom:48px}
.lbl::before{content:'';width:18px;height:1px;background:var(--red);display:block}
.lbl .n{color:var(--ink3)}
.ttl{font-family:var(--B);font-size:clamp(44px,6.5vw,88px);line-height:.95;letter-spacing:.04em;color:var(--ink)}
.ttl em{font-style:italic;font-family:var(--S);font-size:.75em;color:var(--ink2);display:block;letter-spacing:.01em}

/* ── ABOUT ── */
#about{background:var(--w)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.about-text .ttl{margin-bottom:32px}
.about-text p{font-size:16px;color:var(--ink2);line-height:1.9;margin-bottom:20px}
.about-img{position:relative}
.about-img-inner{aspect-ratio:4/5;overflow:hidden;position:relative}
.about-img-inner img,.about-img-inner .img-ph{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.about-img-inner .img-ph{background:var(--w3);display:flex;align-items:center;justify-content:center}
.about-img::before{
  content:'';position:absolute;top:-10px;left:-10px;right:10px;bottom:10px;
  border:1px solid var(--line);z-index:-1;
}
.about-cap{font-family:var(--M);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin-top:12px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tag{font-family:var(--M);font-size:9px;letter-spacing:.15em;text-transform:uppercase;padding:5px 12px;border:1px solid var(--line);color:var(--ink3);transition:all .3s}
.tag:hover{border-color:var(--ink);color:var(--ink)}

/* ── VIDEO HERO SECTION ── */
#video-principal{background:var(--ink);padding:0}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.video-wrap iframe,.video-wrap video{position:absolute;inset:0;width:100%;height:100%;border:none;object-fit:cover}
.video-wrap iframe{pointer-events:none}
.video-wrap .vid-ph{position:absolute;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.play-icon{width:72px;height:72px;border:2px solid rgba(245,242,237,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(245,242,237,.3);font-size:24px}
.vid-ph-txt{font-family:var(--M);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,242,237,.2)}

/* ── ANTROPOS ── */
#antropos{background:var(--w2)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:56px}
.card{background:var(--w);padding:36px 28px;transition:background .3s}
.card:hover{background:var(--w2)}
.card-n{font-family:var(--M);font-size:9px;letter-spacing:.2em;color:var(--red);margin-bottom:18px;display:block}
.card-t{font-family:var(--B);font-size:22px;letter-spacing:.05em;color:var(--ink);margin-bottom:10px;line-height:1}
.card-p{font-size:14px;color:var(--ink3);line-height:1.7}

/* ── PROYECTOS ── */
#proyectos{background:var(--w)}
.proj-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px}
.proj-cnt{font-family:var(--B);font-size:clamp(64px,9vw,120px);color:transparent;-webkit-text-stroke:1px rgba(13,13,11,.12);line-height:1}
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line)}
.proj-card{position:relative;overflow:hidden;aspect-ratio:16/9;cursor:pointer;background:var(--w3)}
.proj-card img,.proj-card video,.proj-card .proj-ph{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:transform .9s cubic-bezier(.4,0,.2,1),filter .6s}
.proj-card .proj-ph{display:flex;align-items:center;justify-content:center}
.proj-card:hover img,.proj-card:hover video{transform:scale(1.05);filter:grayscale(.4) contrast(1.1)}
.proj-over{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(13,13,11,.92) 0%,transparent 55%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:24px;
  transition:background .4s;
}
.proj-card:hover .proj-over{background:linear-gradient(to top,rgba(13,13,11,.97) 35%,rgba(13,13,11,.15) 100%)}
.proj-cat{font-family:var(--M);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(245,242,237,.4);margin-bottom:5px}
.proj-t{font-family:var(--B);font-size:clamp(18px,2.8vw,32px);color:var(--w);line-height:1;letter-spacing:.04em}
.proj-y{font-family:var(--M);font-size:9px;letter-spacing:.15em;color:rgba(245,242,237,.3);margin-top:6px}
.proj-arr{position:absolute;top:18px;right:18px;width:36px;height:36px;border:1px solid rgba(245,242,237,.2);display:flex;align-items:center;justify-content:center;color:var(--w);opacity:0;transform:translateX(-6px);transition:all .4s;z-index:3;font-size:13px}
.proj-card:hover .proj-arr{opacity:1;transform:none}
/* Film number corner on project cards */
.proj-num{position:absolute;top:14px;left:16px;font-family:var(--M);font-size:10px;letter-spacing:.2em;color:rgba(245,242,237,.18);z-index:3}

/* ── SLIDER DE IMÁGENES ── */
#galeria{background:var(--w2);padding:0}
.slider-wrap{position:relative;overflow:hidden;aspect-ratio:21/9;background:var(--ink)}
.slider-track{display:flex;height:100%;transition:transform .8s cubic-bezier(.77,0,.175,1)}
.slide-item{flex:0 0 100%;height:100%;position:relative}
.slide-item img,.slide-item .slide-ph{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.slide-item .slide-ph{display:flex;align-items:center;justify-content:center;background:var(--w3)}
.slide-over{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,11,.6) 0%,transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:32px 40px;z-index:2}
.slide-cap{font-family:var(--S);font-style:italic;font-size:15px;color:rgba(245,242,237,.7);max-width:500px}
.slide-loc{font-family:var(--M);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(245,242,237,.35);margin-bottom:8px}
.slider-nav{position:absolute;bottom:0;right:0;display:flex;z-index:3}
.snav-btn{width:52px;height:52px;background:rgba(13,13,11,.6);border:none;color:rgba(245,242,237,.6);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.snav-btn:hover{background:var(--red);color:var(--w)}
.slider-dots{position:absolute;bottom:20px;left:40px;display:flex;gap:6px;z-index:3}
.sdot{width:20px;height:2px;background:rgba(245,242,237,.25);border:none;cursor:pointer;transition:all .3s;padding:0}
.sdot.on{background:var(--w);width:36px}
.slider-counter{position:absolute;top:20px;right:120px;font-family:var(--M);font-size:10px;letter-spacing:.2em;color:rgba(245,242,237,.25);z-index:3}
/* Film strip on slider top */
.slider-strip{position:absolute;top:0;left:0;right:0;height:14px;background:rgba(13,13,11,.8);z-index:3;overflow:hidden}
.slider-strip::before{content:'';position:absolute;top:50%;transform:translateY(-50%);left:2px;width:9px;height:5px;border-radius:1px;background:rgba(245,242,237,.12);box-shadow:16px 0 rgba(245,242,237,.12),32px 0 rgba(245,242,237,.12),48px 0 rgba(245,242,237,.12),64px 0 rgba(245,242,237,.12),80px 0 rgba(245,242,237,.12),96px 0 rgba(245,242,237,.12),112px 0 rgba(245,242,237,.12),128px 0 rgba(245,242,237,.12),144px 0 rgba(245,242,237,.12),160px 0 rgba(245,242,237,.12),176px 0 rgba(245,242,237,.12),192px 0 rgba(245,242,237,.12),208px 0 rgba(245,242,237,.12),224px 0 rgba(245,242,237,.12),240px 0 rgba(245,242,237,.12),256px 0 rgba(245,242,237,.12),272px 0 rgba(245,242,237,.12),288px 0 rgba(245,242,237,.12),304px 0 rgba(245,242,237,.12),320px 0 rgba(245,242,237,.12),336px 0 rgba(245,242,237,.12),352px 0 rgba(245,242,237,.12),368px 0 rgba(245,242,237,.12),384px 0 rgba(245,242,237,.12),400px 0 rgba(245,242,237,.12),416px 0 rgba(245,242,237,.12),432px 0 rgba(245,242,237,.12),448px 0 rgba(245,242,237,.12),464px 0 rgba(245,242,237,.12),480px 0 rgba(245,242,237,.12),496px 0 rgba(245,242,237,.12),512px 0 rgba(245,242,237,.12),528px 0 rgba(245,242,237,.12),544px 0 rgba(245,242,237,.12),560px 0 rgba(245,242,237,.12),576px 0 rgba(245,242,237,.12),592px 0 rgba(245,242,237,.12),608px 0 rgba(245,242,237,.12),624px 0 rgba(245,242,237,.12),640px 0 rgba(245,242,237,.12),656px 0 rgba(245,242,237,.12),672px 0 rgba(245,242,237,.12),688px 0 rgba(245,242,237,.12),704px 0 rgba(245,242,237,.12),720px 0 rgba(245,242,237,.12),736px 0 rgba(245,242,237,.12),752px 0 rgba(245,242,237,.12),768px 0 rgba(245,242,237,.12),784px 0 rgba(245,242,237,.12),800px 0 rgba(245,242,237,.12)}

/* ── LABORATORIO ── */
#laboratorio{background:var(--w)}
.lab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:56px}
.lab-item{background:var(--w);padding:40px 24px;transition:background .3s}
.lab-item:hover{background:var(--w2)}
.lab-n{font-family:var(--B);font-size:56px;color:rgba(13,13,11,.07);line-height:1;margin-bottom:20px}
.lab-t{font-family:var(--B);font-size:17px;letter-spacing:.06em;color:var(--ink);margin-bottom:10px;line-height:1}
.lab-p{font-size:13px;color:var(--ink3);line-height:1.7}

/* ── MANIFIESTO ── */
#manifiesto{background:var(--ink);padding:140px 0}
.mani-wrap{max-width:820px;margin:0 auto;padding-inline:56px}
.mani-lbl{font-family:var(--M);font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:rgba(245,242,237,.2);display:flex;align-items:center;gap:12px;margin-bottom:60px}
.mani-lbl::before{content:'';width:18px;height:1px;background:var(--red);display:block}
.mani-item{padding:40px 0;border-bottom:1px solid rgba(245,242,237,.07);display:grid;grid-template-columns:48px 1fr;gap:20px}
.mani-item:first-of-type{border-top:1px solid rgba(245,242,237,.07)}
.mani-n{font-family:var(--M);font-size:9px;letter-spacing:.2em;color:var(--red);padding-top:8px}
.mani-q{font-family:var(--B);font-size:clamp(24px,3.5vw,44px);letter-spacing:.03em;color:var(--w);line-height:1}

/* ── REDES ── */
#redes{background:var(--w2);padding:64px 0;border-bottom:1px solid var(--line)}
.redes-inner{max-width:1180px;margin:0 auto;padding-inline:56px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.redes-lbl{font-family:var(--M);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink3)}
.redes-list{display:flex;gap:10px;flex-wrap:wrap}
.red-a{font-family:var(--M);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:10px 20px;border:1px solid var(--line);color:var(--ink2);transition:all .3s}
.red-a:hover{border-color:var(--ink);color:var(--ink);background:var(--w3)}

/* ── CONTACTO ── */
#contacto{background:var(--w)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact-info p{font-size:16px;color:var(--ink2);line-height:1.85;margin-top:20px;max-width:380px}
.contact-email{display:block;margin-top:28px;font-family:var(--B);font-size:clamp(22px,3.5vw,42px);letter-spacing:.04em;color:var(--ink);transition:color .3s}
.contact-email:hover{color:var(--red)}
.cf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.cf-field label{font-family:var(--M);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
.cf-field input,.cf-field textarea{background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--S);font-size:16px;padding:10px 0;outline:none;transition:border-color .3s}
.cf-field input:focus,.cf-field textarea:focus{border-bottom-color:var(--ink)}
.cf-field textarea{resize:none;min-height:90px}
.btn-send{font-family:var(--B);font-size:16px;letter-spacing:.1em;text-transform:uppercase;padding:14px 40px;background:var(--ink);color:var(--w);border:none;cursor:pointer;transition:background .3s;margin-top:8px}
.btn-send:hover{background:var(--red)}

/* ── FOOTER ── */
#footer{background:var(--ink);padding:36px 56px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.ft-brand{font-family:var(--B);font-size:18px;letter-spacing:.15em;color:var(--w)}
.ft-brand .dot{color:var(--red)}
.ft-copy{font-family:var(--M);font-size:9px;letter-spacing:.15em;color:rgba(245,242,237,.25)}

/* ── PROJECT MODAL ── */
#pmodal{position:fixed;inset:0;z-index:2000;display:none;background:rgba(13,13,11,.97);overflow-y:auto}
#pmodal.open{display:block}
.pmodal-close{position:fixed;top:24px;right:40px;font-family:var(--M);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,237,.35);background:none;border:1px solid rgba(245,242,237,.1);padding:8px 18px;cursor:pointer;z-index:10;transition:all .3s}
.pmodal-close:hover{color:var(--w);border-color:rgba(245,242,237,.35)}
.pmodal-inner{max-width:900px;margin:0 auto;padding:90px 48px 80px}
.pm-cat{font-family:var(--M);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,242,237,.25);margin-bottom:12px}
.pm-title{font-family:var(--B);font-size:clamp(40px,7vw,80px);letter-spacing:.04em;color:var(--w);line-height:.95;margin-bottom:8px}
.pm-year{font-family:var(--M);font-size:9px;letter-spacing:.2em;color:rgba(245,242,237,.2);margin-bottom:44px}
.pm-video{width:100%;aspect-ratio:16/9;background:rgba(255,255,255,.04);margin-bottom:36px;overflow:hidden}
.pm-video iframe,.pm-video video{width:100%;height:100%;border:none}
.pm-text{font-family:var(--S);font-style:italic;font-size:17px;color:rgba(245,242,237,.6);line-height:1.9}

/* ── TOAST ── */
.toast{position:fixed;bottom:32px;right:32px;background:var(--ink);color:var(--w);font-family:var(--M);font-size:10px;letter-spacing:.12em;padding:12px 20px;border-left:3px solid var(--red);opacity:0;transform:translateY(8px);transition:all .35s;pointer-events:none;z-index:9999}
.toast.show{opacity:1;transform:none}
.toast.ok{border-left-color:#3a7a4a}

/* ── RESPONSIVE ── */
@media(max-width:1024px){.cards{grid-template-columns:repeat(2,1fr)}.lab-grid{grid-template-columns:repeat(2,1fr)}.about-grid{grid-template-columns:1fr}}
@media(max-width:768px){
  #nav{padding:14px 24px}#nav.scrolled{padding:11px 24px}
  .nav-links{display:none}
  .wrap,.mani-wrap,.redes-inner,.pmodal-inner{padding-inline:24px}
  .hero-content{padding:0 24px 60px}
  .hero-side-l,.hero-side-r{width:8px}
  section{padding:80px 0}
  .proj-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .lab-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  #footer{padding:28px 24px;flex-direction:column;align-items:flex-start}
  .redes-inner{flex-direction:column;align-items:flex-start}
}

/* ── YOUTUBE BRANDING BLOCKER ── */
/* Covers the channel name/avatar that YouTube shows on embed */
.video-wrap{position:relative}
.yt-cover{
  position:absolute;
  top:0;left:0;right:0;
  height:80px;          /* covers the top banner area */
  z-index:10;
  background:transparent;
  pointer-events:none;
}
/* Also block bottom bar area */
.yt-cover-bot{
  position:absolute;
  bottom:0;left:0;right:0;
  height:50px;
  z-index:10;
  background:transparent;
  pointer-events:none;
}
/* For hero video */
.hero-yt-cover{
  position:absolute;
  top:0;left:0;right:0;
  height:80px;
  z-index:10;
  pointer-events:none;
}