:root {
  --bg:     #080807;
  --bg2:    #0f0f0e;
  --bg3:    #161513;
  --off:    #ede9e1;
  --warm:   #c8c0b0;
  --muted:  #a09890;
  --faint:  #3a3630;
  --accent: #b5956a;
  --rule:   rgba(237,233,225,.07);
  --lbg:    #f4f0e8;
  --lbg2:   #ece8df;
  --ink:    #111010;
  --lmuted: #7a7570;
  --rl:     rgba(17,16,16,.11);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--off); font-family:'EB Garamond',Georgia,serif; overflow-x:hidden; cursor:none; }

body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.038'/%3E%3C/svg%3E");
  opacity:.55;
}


/* ── CURSOR ── */
.cur {
  position:fixed; width:6px; height:6px; background:#ffffff;
  border-radius:50%; pointer-events:none; z-index:9000;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
}
.cur-o {
  position:fixed; width:34px; height:34px;
  border:1px solid #ffffff; border-radius:50%;
  pointer-events:none; z-index:8999;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 5vw;
  transition:background .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled { background:rgba(8,8,7,.9); backdrop-filter:blur(16px); border-color:var(--rule); }
.nav-logo svg { height:52px; width:auto; display:block; }
.nav-logo svg .lf { fill:var(--off); }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a { font-family:'Inconsolata',monospace; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .25s; }
.nav-links a:hover { color:var(--off); }

/* ── HERO ── */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 5vw 4.5rem; position:relative; overflow:hidden; }
.hero-video { position:absolute; inset:0; z-index:0; background:var(--bg); }
.hero-video video { width:100%; height:100%; object-fit:cover; filter:grayscale(100%) brightness(.38) contrast(1.1); }
.hero-video::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(8,8,7,.0) 0%,rgba(8,8,7,.0) 35%,rgba(8,8,7,.45) 70%,rgba(8,8,7,.82) 100%); }
.hero-bg-word { font-family:'Cormorant Garamond',serif; font-size:clamp(18rem,32vw,48rem); font-weight:300; font-style:italic; color:transparent; -webkit-text-stroke:1px rgba(237,233,225,.038); white-space:nowrap; user-select:none; letter-spacing:-.04em; line-height:.85; position:absolute; right:-2vw; top:50%; transform:translateY(-52%); pointer-events:none; z-index:1; }
.hero-content { position:relative; z-index:2; }
.hero-eyebrow { font-family:'Inconsolata',monospace; font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); margin-bottom:1.8rem; opacity:0; animation:fup .8s ease forwards .3s; }
.hero-h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(3.8rem,9vw,11rem); font-weight:300; line-height:.91; letter-spacing:-.025em; color:var(--off); margin-bottom:2.8rem; opacity:0; animation:fup 1.1s ease forwards .5s; }
.hero-h1 em { font-style:italic; color:var(--accent); }
.hero-foot { display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid var(--rule); padding-top:2rem; opacity:0; animation:fup .9s ease forwards .85s; }
.hero-desc { max-width:400px; font-family:'EB Garamond',serif; font-size:1.15rem; line-height:1.72; color:var(--warm); font-style:italic; }
.hero-index { display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }
.hero-index-line { display:flex; align-items:center; gap:.9rem; font-family:'Inconsolata',monospace; font-size:.57rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
.hero-index-line::before { content:''; display:block; width:18px; height:1px; background:var(--faint); }

/* ── MARQUEE ── */
.marquee-wrap { overflow:hidden; padding:1.3rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--bg2); }
.marquee-track { display:flex; width:max-content; animation:marquee 30s linear infinite; }
.marquee-item { display:flex; align-items:center; gap:2rem; padding-right:2rem; font-family:'Cormorant Garamond',serif; font-size:.95rem; font-style:italic; color:var(--muted); white-space:nowrap; letter-spacing:.04em; }
.marquee-dot { font-size:.38rem; color:var(--faint); }

/* ── SECTIONS ── */
.sec { padding:5rem 5vw; }
.sec-dark  { background:var(--bg); }
.sec-dark2 { background:var(--bg2); }
.sec-dark3 { background:var(--bg3); }
.sec-light  { background:var(--lbg);  color:var(--ink); }
.sec-light2 { background:var(--lbg2); color:var(--ink); }

.sec-tag { font-family:'Inconsolata',monospace; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:1rem; margin-bottom:2.8rem; }
.sec-dark  .sec-tag, .sec-dark2 .sec-tag, .sec-dark3 .sec-tag { color:var(--muted); }
.sec-dark  .sec-tag::before, .sec-dark2 .sec-tag::before, .sec-dark3 .sec-tag::before { content:''; display:block; width:22px; height:1px; background:var(--faint); }
.sec-light .sec-tag, .sec-light2 .sec-tag { color:var(--lmuted); }
.sec-light .sec-tag::before, .sec-light2 .sec-tag::before { content:''; display:block; width:22px; height:1px; background:#ccc; }
.ciencia   .sec-tag { color:var(--muted); }
.ciencia   .sec-tag::before { content:''; display:block; width:22px; height:1px; background:var(--faint); }
.contacto  .sec-tag { color:var(--muted); justify-content:center; }
.contacto  .sec-tag::before { display:none; }
.filosofia-inner .sec-tag { color:var(--lmuted); justify-content:center; }
.filosofia-inner .sec-tag::before { display:none; }

/* ── RELATO — light ── */
.relato-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:6rem; align-items:start; }
.relato-left h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.5rem,4.5vw,5rem); font-weight:300; line-height:1.1; letter-spacing:-.02em; color:var(--ink); }
.relato-left h2 em { font-style:italic; }
.body-text { font-family:'EB Garamond',serif; font-size:1.12rem; line-height:1.78; color:#3a3530; margin-bottom:1.3rem; }
.body-text:last-child { margin-bottom:0; }
.body-text strong { font-weight:500; color:var(--ink); }
.pull { margin:2.2rem 0; padding:1.8rem 0; border-top:1px solid var(--rl); border-bottom:1px solid var(--rl); }
.pull p { font-family:'Cormorant Garamond',serif; font-size:clamp(1.35rem,2.1vw,1.95rem); font-weight:300; font-style:italic; line-height:1.48; color:var(--ink); }

/* ── ÁMBITOS — dark ── */
.ambitos-header { display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-bottom:3rem; align-items:end; }
.ambitos-header h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.5rem,4.5vw,5rem); font-weight:300; line-height:1.05; letter-spacing:-.02em; color:var(--off); }
.ambitos-header h2 em { font-style:italic; color:var(--accent); }
.ambitos-header p { font-family:'EB Garamond',serif; font-size:1.05rem; line-height:1.7; color:var(--warm); font-style:italic; }
.ambito-list { list-style:none; }
.ambito-item { display:grid; grid-template-columns:2.2rem 1fr 2fr auto; align-items:start; gap:2.5rem; padding:1.8rem 0; border-top:1px solid var(--rule); cursor:none; }
.ambito-item:last-child { border-bottom:1px solid var(--rule); }
.ambito-num  { font-family:'Inconsolata',monospace; font-size:.58rem; letter-spacing:.15em; color:var(--faint); padding-top:.3rem; }
.ambito-name { font-family:'Cormorant Garamond',serif; font-size:clamp(1.4rem,2.4vw,2.1rem); font-weight:300; letter-spacing:-.01em; line-height:1.1; color:var(--off); transition:color .3s; }
.ambito-item:hover .ambito-name { color:var(--accent); }
.ambito-desc { font-family:'EB Garamond',serif; font-size:.97rem; font-style:italic; color:var(--warm); line-height:1.65; padding-top:.3rem; }
.ambito-arr  { font-size:1rem; color:var(--muted); padding-top:.3rem; transition:transform .3s, color .3s; }
.ambito-item:hover .ambito-arr { transform:translateX(4px); color:var(--off); }

/* ── CIENCIA ── */
.ciencia { background:var(--bg); padding:5rem 5vw; position:relative; overflow:hidden; border-top:1px solid var(--rule); }
.ciencia::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 55% 60% at 75% 50%,rgba(181,149,106,.05) 0%,transparent 70%); }
.ciencia-inner { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.ciencia-left h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.2rem,4vw,4.5rem); font-weight:300; line-height:1.1; letter-spacing:-.02em; color:var(--off); margin-bottom:2rem; }
.ciencia-left h2 em { font-style:italic; color:var(--accent); }
.ciencia-left p { font-family:'EB Garamond',serif; font-size:1.05rem; line-height:1.75; color:var(--warm); font-style:italic; margin-bottom:1.2rem; }
.ciencia-left p strong { color:var(--off); font-weight:500; font-style:normal; }
.ciencia-right { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.ctag { padding:1.5rem 2rem; background:var(--bg); border-bottom:1px solid var(--rule); transition:background .3s; }
.ctag:last-child { border-bottom:none; }
.ctag:hover { background:var(--bg2); }
.ctag-num  { font-family:'Inconsolata',monospace; font-size:.58rem; letter-spacing:.18em; color:var(--faint); margin-bottom:.5rem; }
.ctag-name { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:300; color:var(--off); }
.ctag-desc { font-family:'EB Garamond',serif; font-size:.9rem; font-style:italic; color:var(--muted); line-height:1.5; margin-top:.3rem; }

/* ── TRABAJOS ── */
.trabajos-home { background:var(--bg2); padding:5rem 5vw; }
.trabajos-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2.8rem; padding-bottom:1.8rem; border-bottom:1px solid var(--rule); }
.trabajos-header h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.5rem,4.5vw,5rem); font-weight:300; line-height:1; letter-spacing:-.02em; color:var(--off); }
.trabajos-header h2 em { font-style:italic; color:var(--accent); }
.ver-todos { display:inline-flex; align-items:center; gap:.7rem; font-family:'Inconsolata',monospace; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .25s; padding-bottom:.2rem; position:relative; }
.ver-todos::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--muted); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.ver-todos:hover { color:var(--off); }
.ver-todos:hover::after { transform:scaleX(1); }
.works-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-bottom:2.5rem; }
.wcard { background:var(--bg2); padding:2.5rem; display:flex; flex-direction:column; justify-content:space-between; min-height:200px; cursor:none; text-decoration:none; color:inherit; transition:background .35s; }
.wcard:hover { background:var(--bg3); }
.wcard:hover .wcard-arr { transform:translate(3px,-3px); color:var(--off); }
.wcard-year { font-family:'Inconsolata',monospace; font-size:.58rem; letter-spacing:.15em; color:var(--muted); margin-bottom:1.2rem; }
.wcard-name { font-family:'Cormorant Garamond',serif; font-size:clamp(1.5rem,2.5vw,2.2rem); font-weight:300; letter-spacing:-.01em; line-height:1.15; margin-bottom:.35rem; color:var(--off); }
.wcard-type { font-family:'Inconsolata',monospace; font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--warm); }
.wcard-arr  { font-size:.95rem; color:var(--muted); align-self:flex-end; transition:transform .3s, color .3s; }
.trabajos-cta { text-align:center; }
.btn-line { display:inline-flex; align-items:center; gap:.8rem; font-family:'Inconsolata',monospace; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:.9rem 0; border-bottom:1px solid var(--faint); transition:color .3s, border-color .3s; }
.btn-line:hover { color:var(--off); border-color:var(--off); }

/* ── PROCESO ── */
.proceso-header { display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-bottom:3.5rem; align-items:end; }
.proceso-header h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.5rem,4.5vw,5rem); font-weight:300; line-height:1.05; letter-spacing:-.02em; color:var(--off); }
.proceso-header h2 em { font-style:italic; color:var(--accent); }
.proceso-header p { font-family:'EB Garamond',serif; font-size:1.05rem; line-height:1.7; color:var(--warm); font-style:italic; }
.proceso-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.step { background:var(--bg3); padding:2rem 2rem 2.5rem; transition:background .4s; }
.step:hover { background:var(--bg2); }
.step-n     { font-family:'Cormorant Garamond',serif; font-size:3.8rem; font-weight:300; font-style:italic; color:rgba(237,233,225,.05); line-height:1; margin-bottom:1.4rem; }
.step-title { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:500; letter-spacing:-.01em; margin-bottom:.6rem; color:var(--off); }
.step-text  { font-family:'EB Garamond',serif; font-size:.97rem; font-style:italic; color:var(--warm); line-height:1.65; }

/* ── FILOSOFÍA — light ── */
.filosofia-inner { max-width:780px; margin:0 auto; text-align:center; }
.filosofia-inner blockquote { font-family:'Cormorant Garamond',serif; font-size:clamp(1.7rem,3vw,2.8rem); font-weight:300; font-style:italic; line-height:1.42; letter-spacing:-.01em; color:var(--ink); margin-bottom:2.2rem; }
.filosofia-inner p { font-family:'EB Garamond',serif; font-size:1.08rem; line-height:1.75; color:var(--lmuted); font-style:italic; max-width:580px; margin:0 auto 1.2rem; }

/* ── CONTACTO ── */
.contacto {
  padding:6.5rem 5vw 5.5rem;
  background:var(--bg);
  text-align:center;
  position:relative;
  overflow:hidden;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
/* imagen de fondo — se activa cuando existe .contacto-img-bg */
.contacto-img-bg {
  position:absolute; inset:0; z-index:0;
}
.contacto-img-bg img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(100%) brightness(.38) contrast(1.05);
}
.contacto-img-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(8,8,7,.25) 0%, rgba(8,8,7,.15) 40%, rgba(8,8,7,.7) 75%, rgba(8,8,7,.96) 100%);
}
/* todos los hijos directos de .contacto van encima de la imagen */
.contacto > *:not(.contacto-img-bg):not(.contacto-bg) { position:relative; z-index:1; }
.contacto-bg { position:absolute; bottom:-3rem; left:50%; transform:translateX(-50%); font-family:'Cormorant Garamond',serif; font-size:clamp(10rem,18vw,26rem); font-weight:300; font-style:italic; color:transparent; -webkit-text-stroke:1px rgba(237,233,225,.035); white-space:nowrap; pointer-events:none; user-select:none; letter-spacing:-.04em; }
.contacto h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(3rem,7vw,8rem); font-weight:300; line-height:.93; letter-spacing:-.025em; margin-bottom:1.2rem; color:var(--off); }
.contacto h2 em { font-style:italic; color:var(--accent); }
.contacto-sub { font-family:'EB Garamond',serif; font-size:1.1rem; font-style:italic; color:var(--warm); margin-bottom:3rem; }
.btn { display:inline-block; padding:1rem 3.8rem; border:1px solid rgba(237,233,225,.25); font-family:'Inconsolata',monospace; font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--off); text-decoration:none; position:relative; overflow:hidden; transition:color .4s; }
.btn::before { content:''; position:absolute; inset:0; background:var(--off); transform:translateY(100%); transition:transform .4s; }
.btn:hover { color:var(--ink); }
.btn:hover::before { transform:translateY(0); }
.btn span { position:relative; z-index:1; }

/* ── FOOTER ── */
footer { padding:2rem 5vw; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; background:var(--bg); }
.footer-logo svg { height:22px; width:auto; display:block; }
.footer-logo svg .lf { fill:var(--muted); }
.footer-c { font-family:'Inconsolata',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.footer-links { display:flex; gap:1.8rem; list-style:none; }
.footer-links a { font-family:'Inconsolata',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:lowercase; color:var(--muted); text-decoration:none; transition:color .25s; }
.footer-links a:hover { color:var(--off); }

/* ── HAMBURGER ── */
.nav-hamburger {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none;
  cursor:none; padding:0; z-index:600;
}
.nav-hamburger span {
  display:block; width:100%; height:1px;
  background:var(--off); transition:transform .3s ease, opacity .3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ── MOBILE MENU ── */
.nav-mobile {
  display:none;
  position:fixed; inset:0; z-index:550;
  background:var(--bg);
  flex-direction:column; justify-content:center; align-items:center; gap:2.5rem;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.nav-mobile.open { opacity:1; pointer-events:all; }
.nav-mobile a {
  font-family:'Cormorant Garamond',serif; font-size:clamp(2.5rem,8vw,4rem);
  font-weight:300; letter-spacing:-.02em; font-style:italic;
  color:var(--off); text-decoration:none; transition:color .25s;
}
.nav-mobile a:hover { color:var(--accent); }
.nav-mobile-sub {
  display:flex; gap:2rem; margin-top:1rem;
}
.nav-mobile-sub a {
  font-family:'Inconsolata',monospace; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; font-style:normal;
  color:var(--muted); font-size:.72rem;
}

/* ── ANIMATIONS ── */
@keyframes fup     { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes marquee { from { transform:translateX(0); }               to { transform:translateX(-50%); } }

/* Scroll animations — safe default: visible. JS adds .pre to hide, removes on scroll */
.anim   { opacity:1; transform:none; transition:opacity .75s ease, transform .75s ease; }
.anim-l { opacity:1; transform:none; transition:opacity .75s ease, transform .75s ease; }
.anim.pre   { opacity:0; transform:translateY(24px); }
.anim-l.pre { opacity:0; transform:translateX(-24px); }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  /* NAV */
  nav { padding:1.2rem 6vw; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-mobile { display:flex; }

  /* HERO */
  .hero { padding:0 6vw 3.5rem; }
  .hero-h1 { font-size:clamp(3rem,12vw,6rem); margin-bottom:2rem; }
  .hero-foot { flex-direction:column; gap:2rem; align-items:flex-start; }
  .hero-desc { max-width:100%; font-size:1rem; }
  .hero-index { align-items:flex-start; }
  .hero-bg-word { font-size:clamp(10rem,40vw,20rem); }

  /* SECTIONS */
  .sec { padding:4rem 6vw; }
  .relato-grid { grid-template-columns:1fr; gap:2.5rem; }
  .ciencia-inner { grid-template-columns:1fr; gap:3rem; }
  .proceso-header { grid-template-columns:1fr; gap:2rem; }
  .ambitos-header { grid-template-columns:1fr; gap:2rem; }
  .ambito-item { grid-template-columns:1.8rem 1fr auto; gap:1.2rem; }
  .ambito-desc { display:none; }
  .proceso-steps { grid-template-columns:repeat(2,1fr); }
  .works-grid { grid-template-columns:1fr; }

  /* TRABAJOS HEADER */
  .trabajos-header { flex-direction:column; align-items:flex-start; gap:1.5rem; }

  /* FOOTER */
  footer { flex-direction:column; gap:1.5rem; text-align:center; padding:2.5rem 6vw; }
  .footer-links { flex-wrap:wrap; justify-content:center; gap:1rem 1.5rem; }
}

@media(max-width:600px) {
  .proceso-steps { grid-template-columns:1fr; }
  .sec { padding:3.5rem 6vw; }
  .contacto { padding:5rem 6vw 4rem; }
  .contacto h2 { font-size:clamp(2.5rem,12vw,5rem); }
}