/* Using system Helvetica — no @font-face needed */

:root{
  --ink:#0B0B10;
  --ink-soft:#15151d;
  --paper:#EFEBE2;
  --pink:#FF3080;
  --lime:#B4FF00;
  --teal:#10B0C0;
  --red:#F02030;
  --line:#2A2A33;
  --line-on-paper:#d8d2c4;
  /* legacy aliases so the rest of the sheet needs no renaming */
  --violet:var(--pink);
  --flame:var(--red);

  --font-display:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gap:clamp(1.25rem, 3vw, 2.5rem);
}

*{box-sizing:border-box; margin:0; padding:0;}
img,svg{display:block; max-width:100%;}
html{background:var(--ink);}
html.lenis{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto;}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.mono{font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.02em;}

/* subtle grain overlay for texture, avoids flat-gradient default */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- topbar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.25rem var(--gap);
  mix-blend-mode:difference;
  transition:background-color 0.25s ease;
}
/* el blend del header arrastraba también al desplegable: al abrirlo se desactiva */
.topbar.is-solid{
  mix-blend-mode:normal;
  background:rgba(11,11,16,0.96);
  backdrop-filter:blur(8px);
}
.mark{display:flex; align-items:center; gap:0.5rem;}
.mark-lens{width:22px; height:22px; object-fit:contain;}
.mark-text{font-family:var(--font-display); font-weight:700; font-size:0.95rem; letter-spacing:0.02em;}
.topnav{display:flex; align-items:center; gap:clamp(1rem,3vw,2rem); font-size:0.9rem;}
.topnav a{opacity:0.8; transition:opacity 0.2s ease;}
.topnav a:hover{opacity:1;}
.topnav a.is-active{opacity:1;}
.topnav a.is-active::after{
  content:''; display:block; height:1px; margin-top:3px;
  background:currentColor; opacity:0.9;
}
.nav-dropdown{position:relative;}
.nav-dropdown-btn{
  font-family:inherit; font-size:inherit; color:inherit;
  background:none; border:none; cursor:pointer; opacity:0.8; padding:0;
}
.nav-dropdown-btn:hover, .nav-dropdown-btn[aria-expanded="true"]{opacity:1;}
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 1rem); left:50%; transform:translateX(-50%);
  background:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:0.5rem 0; min-width:10rem;
  display:none; flex-direction:column;
  mix-blend-mode:normal;
}
.nav-dropdown-menu.is-open{display:flex;}
.nav-dropdown-menu a{
  padding:0.5rem 1.1rem; opacity:0.75; white-space:nowrap; font-size:0.85rem;
}
.nav-dropdown-menu a:hover{opacity:1; background:rgba(239,235,226,0.06);}
.lang-btn{
  font-family:var(--font-mono); font-size:0.8rem;
  background:transparent; color:var(--paper);
  border:1px solid var(--line); border-radius:999px;
  padding:0.3rem 0.7rem; cursor:pointer;
  opacity:0.85;
}
.lang-btn:hover{opacity:1; border-color:var(--paper);}
.lang-btn--mobile{
  align-self:flex-start;
  border-color:rgba(239,235,226,0.3);
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gap);
  overflow:hidden;
}
.hero-grid{max-width:56rem; position:relative; z-index:2;}
.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  line-height:1.02;
  letter-spacing:-0.02em;
}
.hero-title .line{display:block;}
.hero-title .line-accent{color:var(--lime);}
.hero-tags{
  margin-top:1.25rem;
  opacity:0.7;
}
.hero-bio{
  margin-top:1.5rem;
  max-width:32rem;
  font-size:1.05rem;
  color:rgba(239,235,226,0.75);
}
.hero-bio strong{color:var(--paper);}

.hero-lens{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.hero-signature{
  width:min(70%, 46rem);
  height:auto;
  opacity:0.07;
  transform:rotate(-4deg);
}

.scroll-cue{
  position:absolute; left:var(--gap); bottom:2.5rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:0.5rem;
  opacity:0.6;
}
.scroll-line{width:1px; height:2.5rem; background:var(--paper); opacity:0.5;}

/* ---------- brands strip ---------- */
.brands[hidden]{display:none;}   /* el atributo hidden debe ganar al display:flex de abajo */
.brands{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.5rem var(--gap);
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.5rem;
}
.brands-label{opacity:0.55; white-space:nowrap;}
.brands-list{display:flex; flex-wrap:wrap; gap:2.5rem; font-family:var(--font-display); font-size:1.1rem;}
.brands-list .placeholder{opacity:0.3; font-family:var(--font-mono); font-size:0.85rem;}

/* ---------- section head ---------- */
.section-head{
  display:flex; align-items:baseline; gap:1rem;
  padding:0 var(--gap);
  margin-bottom:2.5rem;
}
.section-head .index{opacity:0.4;}
.section-head h2, .dth-copy h2, .contact-copy h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
}

/* ---------- services ---------- */
.services{padding:7rem 0 6rem;}
.services-tags{
  display:flex; flex-wrap:wrap; gap:0.75rem;
  padding:0 var(--gap);
}
.services-tags li{
  font-family:var(--font-display); font-size:1rem;
  border:1px solid var(--line); border-radius:999px;
  padding:0.6rem 1.25rem;
}

/* ---------- work ---------- */
.work{padding:6rem 0 7rem; background:var(--paper); color:var(--ink);}
.work .mono{opacity:0.55;}
.work-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--line-on-paper);
  margin:0 var(--gap);
}
.work-box{
  background:var(--paper);
  aspect-ratio:4/5;
  display:flex; align-items:flex-end;
  padding:1.5rem;
  position:relative;
}
.work-box--wide{grid-column:1 / -1; aspect-ratio:16/5;}
.work-box--filled{background:var(--ink); color:var(--paper);}
.work-box--filled .mono{opacity:0.6; color:var(--paper);}
.work-box-inner h3{font-family:var(--font-display); font-size:1.2rem; margin-top:0.4rem;}

.work-box--image{overflow:hidden;}
.work-box-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.work-box--image .work-box-inner{
  position:relative; z-index:1; width:100%;
  background:linear-gradient(180deg, transparent, rgba(11,11,16,0.85) 70%);
  margin:-1.5rem; padding:1.5rem; color:var(--paper);
}
.work-box--image .work-box-inner .mono{color:var(--lime); opacity:0.9;}

/* ---------- process ---------- */
.process{padding:6rem 0 7rem; border-top:1px solid var(--line);}
.process-sub{padding:0 var(--gap); margin:-1.5rem 0 2.5rem; opacity:0.6;}
.process-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line);
  margin:0 var(--gap);
}
.process-step{background:var(--ink); padding:1.5rem;}
.process-step .mono{opacity:0.4;}
.process-step h3{font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin:0.5rem 0 1rem;}
.process-box{
  aspect-ratio:4/3;
  border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
}
.placeholder-text{opacity:0.35;}

/* ---------- customization ---------- */
.customization{padding:6rem 0 7rem; background:var(--paper); color:var(--ink); border-top:1px solid var(--line-on-paper);}
.customization .process-sub{opacity:0.6;}
.customization .work-grid{grid-template-columns:repeat(3, 1fr);}
.customization .work-box{opacity:0.5;}

/* ---------- sketches ---------- */
.sketches{padding:6rem 0 7rem; border-top:1px solid var(--line);}
.sketches .process-sub{padding:0 var(--gap); margin:-1.5rem 0 2.5rem; opacity:0.5;}
.sketches-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line);
  margin:0 var(--gap);
}
.sketches-box{
  background:var(--ink); aspect-ratio:3/4;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- about ---------- */
.about{position:relative; padding:6rem 0 7rem; border-top:1px solid var(--line); overflow:hidden;}
.about-bg{
  position:absolute; inset:0;
  background:url('img/about-bg.jpg') right center / 340px auto no-repeat;
  filter:grayscale(1) contrast(1.05);
  opacity:0.35;
}
.about-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, rgba(11,11,16,0.4) 70%, rgba(11,11,16,0.15) 100%);
}
.about .section-head, .about-body{position:relative; z-index:1;}
.about-body{padding:0 var(--gap); max-width:44rem;}
.about-body p{font-size:1.05rem; line-height:1.6; color:rgba(239,235,226,0.8); margin-bottom:1.25rem;}
.about-contact{margin-top:1.5rem; opacity:0.8;}
.about-contact a{border-bottom:1px solid currentColor;}

/* ---------- shop ---------- */
.shop{padding:6rem 0 7rem; border-top:1px solid var(--line);}
.shop-body{padding:0 var(--gap);}
.shop-body p{opacity:0.7; margin-bottom:1.5rem; max-width:32rem;}
.shop-link{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  color:var(--lime); border-bottom:1px solid currentColor; padding-bottom:3px;
}

/* ---------- dth ---------- */
.dth{position:relative; padding:7rem 0; background:var(--ink); color:var(--paper); overflow:hidden;}
.dth-bg{
  position:absolute; inset:0;
  background:url('img/dth-banner.jpg') center/cover no-repeat;
  opacity:0.28;
}
.dth-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(11,11,16,0.55) 40%, var(--ink) 100%);
}
.dth-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--gap);
  align-items:center;
  padding:0 var(--gap);
}
.dth-copy p{margin:1.25rem 0 1.5rem; max-width:28rem; color:rgba(239,235,226,0.75);}
.dth-copy h2{color:var(--red);}
.dth-copy .index{opacity:0.5;}
.text-link{font-family:var(--font-mono); font-size:0.9rem; color:var(--lime); border-bottom:1px solid currentColor; padding-bottom:2px;}
.text-link--soon{color:rgba(239,235,226,0.5); border-bottom-style:dashed; cursor:default;}

.dth-visual{display:flex; justify-content:center;}
.dth-portrait{
  width:100%; max-width:20rem; height:auto;
  border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

/* ---------- contact / email ---------- */
.contact{position:relative; padding:7rem 0 8rem; overflow:hidden;}
.contact-bg{
  position:absolute; inset:0;
  background:url('img/work-dthgraf.jpg') center/cover no-repeat;
}
.contact-bg::after{
  content:''; position:absolute; inset:0;
  background:rgba(11,11,16,0.92);
}
.contact-inner{
  position:relative; z-index:1;
  max-width:32rem; margin:0 auto; padding:0 var(--gap);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.contact-inner .index{opacity:0.5;}
.contact-inner h2{margin-top:0.5rem;}
.contact-inner p{margin:1rem 0 2rem; color:rgba(239,235,226,0.75);}
.contact-email{
  margin-top:1.75rem;
  font-family:var(--font-display); font-size:1.2rem;
  border-bottom:1px solid var(--paper); padding-bottom:2px;
}
.contact-form{display:flex; flex-direction:column; gap:1.1rem; width:100%; text-align:left;}
.contact-form label{display:flex; flex-direction:column; gap:0.4rem; font-size:0.85rem; opacity:0.7;}
.contact-form input, .contact-form textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--paper); font-family:var(--font-body); font-size:1rem; padding:0.5rem 0;
  resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-bottom-color:var(--lime);
}
.gotcha{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.form-status{
  margin-top:0.25rem; text-align:center; min-height:1.2em;
  color:var(--lime); opacity:0;  transition:opacity 0.25s ease;
}
.form-status.is-visible{opacity:0.9;}
.form-status.is-error{color:var(--red);}
.contact-form button[disabled]{opacity:0.5; cursor:default;}
.contact-form button{
  align-self:center; margin-top:0.5rem;
  background:var(--lime); color:var(--ink);
  border:none; padding:0.85rem 2.5rem;
  font-family:var(--font-display); font-weight:700; font-size:0.95rem;
  border-radius:999px;
  cursor:pointer;
}

/* ---------- footer ---------- */
.footer{
  display:flex; justify-content:space-between;
  padding:2rem var(--gap);
  border-top:1px solid var(--line);
  opacity:0.55;
}

/* ---------- accesibilidad ---------- */
.skip-link{
  position:absolute; left:var(--gap); top:-100px; z-index:70;
  background:var(--lime); color:var(--ink);
  padding:0.6rem 1rem; border-radius:999px; font-size:0.85rem;
  transition:top 0.2s ease;
}
.skip-link:focus{top:1rem;}
:focus-visible{outline:2px solid var(--lime); outline-offset:3px;}

/* el header es fijo: las anclas se paran un poco antes para no quedar tapadas */
section[id]{scroll-margin-top:5.5rem;}

/* con el menú móvil abierto se bloquea el scroll del fondo */
body.nav-open{overflow:hidden;}

/* ---------- reveal state (set up for JS) ---------- */
[data-reveal]{opacity:0; transform:translateY(24px);}

/* ---------- mobile menu (base state: hidden, desktop) ---------- */
.menu-btn{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; cursor:pointer;
  z-index:60;
}
.menu-btn span{display:block; width:100%; height:1.5px; background:var(--paper);}
.mobile-nav{
  position:fixed; inset:0; z-index:55;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:1.75rem;
  padding:2rem;
  overflow-y:auto;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform 0.4s ease, visibility 0s linear 0.4s;
}
.mobile-nav.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform 0.4s ease, visibility 0s linear 0s;
}
.mobile-nav a{
  font-family:var(--font-display); font-weight:700; font-size:2rem;
}

/* ---------- responsive (comes after base rules, so it wins the cascade) ---------- */
@media (max-width: 860px){
  .work-grid{grid-template-columns:1fr;}
  .work-box--wide{aspect-ratio:16/7;}
  .customization .work-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .sketches-grid{grid-template-columns:repeat(2,1fr);}
  .dth-grid{grid-template-columns:1fr;}
  .dth-visual{order:-1;}
  .topnav{display:none;}
  .menu-btn{display:flex;}
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1; transform:none;}
}