/* ═══════════════════════════════════════════════════════════
   VOLTA · Estudio de diseño
   Universo: brutalista editorial — papel, tinta y vermellón
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:  #F3F0E9;
  --paper-2:#E9E4D9;
  --ink:    #0B0B0B;
  --ink-2:  #1C1C1A;
  --grey:   #6E6A63;
  --red:    #FF3B00;
  --line:   #0B0B0B;

  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --serif: "Playfair Display", Georgia, serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px;
  --s5:64px; --s6:96px; --s7:140px;

  --pad: clamp(18px, 4vw, 64px);
  --ease: cubic-bezier(.16,1,.3,1);
  --bd: 2px solid var(--line);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* La nav es fija: sin este margen, saltar a un ancla esconde el titular debajo. */
section[id], [id^="ancla"]{ scroll-margin-top: 96px; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--red); color:var(--paper); }
:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }

/* Textura de papel */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── Cursor magnético ────────────────────────────────────── */
.cursor{
  position:fixed; top:0; left:0; z-index:120; pointer-events:none;
  width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:var(--red);
  mix-blend-mode:difference;
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .2s;
  display:none; opacity:0;
}
.cursor.is-live{ opacity:1; }
.cursor span{
  position:absolute; inset:0; display:grid; place-items:center;
  font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); opacity:0; transition:opacity .25s;
  white-space:nowrap;
}
.cursor.is-big{ width:78px; height:78px; margin:-39px 0 0 -39px; }
.cursor.is-big span{ opacity:1; }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block; } }

/* ── Tipografía ──────────────────────────────────────────── */
.h2{
  font-family:var(--display);
  font-size:clamp(2.7rem, 8vw, 7rem);
  line-height:.86; letter-spacing:-.035em;
  text-transform:uppercase;
}
.h2 em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.01em; color:var(--red);
  font-size:.62em;
}
.tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red);
  display:inline-block; margin-bottom:var(--s3);
}
.tag--light{ color:var(--red); }

/* ── Nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:14px var(--pad);
  border-bottom:2px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.nav.is-stuck{ background:var(--paper); border-bottom-color:var(--line); }
.nav__brand{
  font-family:var(--display); font-size:1.15rem; letter-spacing:-.02em;
}
.nav__brand sup{ font-size:.5em; vertical-align:super; }
.nav__links{ display:flex; gap:var(--s4); }
.nav__links a, .nav__cta{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase;
}
.nav__links a{ position:relative; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px;
  background:var(--red); transition:width .3s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  border:var(--bd); padding:9px 18px; background:var(--ink); color:var(--paper);
  box-shadow:4px 4px 0 var(--red);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.nav__cta:hover{ transform:translate(4px,4px); box-shadow:0 0 0 var(--red); }

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  min-height:100svh; padding:104px var(--pad) var(--s4);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s4);
}
.hero__meta{
  display:flex; justify-content:space-between; gap:var(--s2); flex-wrap:wrap;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey);
  border-bottom:var(--bd); padding-bottom:12px;
}
.hero__clock{ color:var(--red); font-variant-numeric:tabular-nums; }

.hero__title{
  font-family:var(--display);
  font-size:clamp(3.6rem, 17.5vw, 16.5rem);
  line-height:.8; letter-spacing:-.045em; text-transform:uppercase;
  margin:auto 0;
}
/* El recorte necesita holgura para los descendentes de la itálica (la q de «que»);
   el margen negativo devuelve el espacio para que el interlineado no cambie. */
.hero__title .line{
  display:block; overflow:hidden;
  padding-bottom:.18em; margin-bottom:-.18em;
}
.hero__title .line__in{ display:block; }
.hero__title .line--alt{
  font-family:var(--serif); font-style:italic; font-weight:400;
  text-transform:none; color:var(--red);
  font-size:.52em; letter-spacing:-.01em;
  padding-left:.1em;
}
.hero__title em{ font-style:italic; }

.hero__bottom{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--s4); flex-wrap:wrap;
  border-top:var(--bd); padding-top:var(--s3);
}
.hero__lead{ max-width:46ch; font-size:1.02rem; color:var(--ink-2); }
.arrowlink{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase;
  border:var(--bd); padding:14px 22px; background:var(--paper);
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
  white-space:nowrap;
}
.arrowlink:hover{
  transform:translate(5px,5px); box-shadow:0 0 0 var(--ink);
  background:var(--red); color:var(--paper);
}
.arrowlink svg{ transition:transform .3s var(--ease); }
.arrowlink:hover svg{ transform:translateX(4px); }

/* ── Marquee ─────────────────────────────────────────────── */
.marquee{
  border-block:var(--bd); background:var(--ink); color:var(--paper);
  overflow:hidden; padding:14px 0;
}
.marquee__track{
  display:flex; gap:var(--s4); align-items:center; width:max-content;
  font-family:var(--display); font-size:clamp(1.3rem,3.4vw,2.6rem);
  text-transform:uppercase; letter-spacing:-.02em;
  will-change:transform;
}
.marquee__track i{ color:var(--red); font-style:normal; font-size:.55em; }

/* ── Trabajo (scroll horizontal) ─────────────────────────── */
.work{ background:var(--paper); }
.work__pin{
  height:100svh; display:flex; flex-direction:column;
  padding:86px 0 20px; overflow:hidden;
}
.work__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s3); padding:0 var(--pad) var(--s3);
}
.work__head .tag{ margin:0; }
.work__hint{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey);
  display:flex; align-items:center; gap:10px;
}
.work__hint i{ width:30px; height:2px; background:var(--red); display:block; }

.work__track{
  display:flex; gap:var(--s3); padding:0 var(--pad);
  align-items:stretch; flex:1; will-change:transform;
}
.card{
  flex:0 0 clamp(280px, 34vw, 470px);
  border:var(--bd); background:var(--paper);
  display:flex; flex-direction:column;
  box-shadow:8px 8px 0 var(--ink);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:nth-child(even){ margin-top:var(--s4); }
.card:hover{ transform:translate(-3px,-3px); box-shadow:12px 12px 0 var(--red); }
.card__img{ overflow:hidden; border-bottom:var(--bd); flex:1; min-height:0; }
.card__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.12);
  transition:filter .45s var(--ease), transform .7s var(--ease);
}
.card:hover .card__img img{ filter:grayscale(0) contrast(1.02); transform:scale(1.05); }
.card__body{ padding:var(--s3); position:relative; }
.card__body h3{
  font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.1rem);
  text-transform:uppercase; letter-spacing:-.03em; line-height:1;
}
.card__kind{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); margin-top:8px;
}
.card__desc{ font-size:.9rem; color:var(--ink-2); margin-top:12px; max-width:38ch; }
.card__year{
  position:absolute; top:var(--s3); right:var(--s3);
  font-family:var(--mono); font-size:.72rem; color:var(--grey);
}

.work__bar{
  height:6px; background:var(--paper-2); border-top:var(--bd);
  margin-top:var(--s2); flex:none;
}
/* Pantallas bajas: comprimir para que la ficha no toque el borde inferior */
@media (max-height: 860px){
  .work__head{ padding-bottom:var(--s2); }
  .card__body{ padding:var(--s2); }
  .card__desc{ font-size:.84rem; margin-top:8px; }
}
.work__bar i{ display:block; height:100%; width:0%; background:var(--red); }

/* ── Servicios ───────────────────────────────────────────── */
.serv{
  padding:var(--s7) var(--pad);
  border-top:var(--bd);
}
.serv__head{ margin-bottom:var(--s6); }
.serv__list{ border-top:var(--bd); }
.serv__item{
  display:grid;
  grid-template-columns:88px minmax(180px, 1fr) 2fr 150px;
  gap:var(--s3); align-items:start;
  padding:var(--s4) 0; border-bottom:var(--bd);
  position:relative;
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.serv__item:hover{ background:var(--ink); color:var(--paper); padding-left:var(--s3); }
.serv__item:hover .serv__n, .serv__item:hover .serv__from{ color:var(--red); }
.serv__n{ font-family:var(--mono); font-size:.82rem; color:var(--grey); padding-top:8px; }
.serv__item h3{
  font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.9rem);
  text-transform:uppercase; letter-spacing:-.03em; line-height:.94;
}
.serv__item p{ font-size:.95rem; max-width:46ch; }
.serv__from{
  font-family:var(--mono); font-size:.82rem; color:var(--grey);
  text-align:right; padding-top:8px; white-space:nowrap;
}
.serv__not{
  margin-top:var(--s5);
  border:var(--bd); border-left:8px solid var(--red);
  padding:var(--s3) var(--s4);
  background:var(--paper-2);
}
.serv__not p{ max-width:74ch; font-size:1rem; }
.serv__not b{ font-weight:700; }

/* ── Proceso ─────────────────────────────────────────────── */
.proc{
  padding:var(--s6) var(--pad) var(--s7);
  background:var(--ink); color:var(--paper);
}
.proc .tag{ color:var(--red); }
.proc__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--paper); border:var(--bd); }
.proc__step{ background:var(--ink); padding:var(--s4) var(--s3); }
.proc__step b{
  font-family:var(--mono); font-size:.8rem; color:var(--red); display:block; margin-bottom:var(--s3);
}
.proc__step h4{
  font-family:var(--display); font-size:1.55rem; text-transform:uppercase;
  letter-spacing:-.02em; margin-bottom:10px;
}
.proc__step p{ font-size:.9rem; color:#B9B5AC; }

/* ── Estudio ─────────────────────────────────────────────── */
.studio{
  padding:var(--s7) var(--pad);
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s6); align-items:center;
}
.studio__imgs{ position:relative; }
.studio__fig{ margin:0; border:var(--bd); overflow:hidden; }
.studio__fig img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1);
  transition:filter .5s var(--ease);
}
.studio__fig:hover img{ filter:grayscale(0); }
.studio__fig--big{ aspect-ratio:4/3; box-shadow:10px 10px 0 var(--red); }
.studio__fig--small{
  position:absolute; right:-6%; bottom:-16%;
  width:46%; aspect-ratio:1; background:var(--paper);
  box-shadow:8px 8px 0 var(--ink);
}
.studio__copy p{ color:var(--ink-2); max-width:44ch; margin-top:var(--s3); }
.studio__facts{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3);
  margin-top:var(--s5); border-top:var(--bd); padding-top:var(--s3);
}
.studio__facts li{ display:flex; align-items:baseline; gap:12px; }
.studio__facts b{
  font-family:var(--display); font-size:2.3rem; letter-spacing:-.03em; line-height:1;
  color:var(--red);
}
.studio__facts span{ font-size:.82rem; color:var(--grey); max-width:14ch; }

/* ── Cita ────────────────────────────────────────────────── */
.quote{
  padding:var(--s7) var(--pad);
  border-block:var(--bd); background:var(--paper-2);
}
.quote blockquote{ margin:0; max-width:1100px; margin-inline:auto; }
.quote p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,4vw,3.2rem); line-height:1.16;
  letter-spacing:-.02em;
}
.quote .w{ display:inline-block; }
.quote footer{
  display:flex; align-items:baseline; gap:14px; margin-top:var(--s4);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em;
}
.quote footer b{ text-transform:uppercase; }
.quote footer span{ color:var(--grey); }

/* ── Contacto ────────────────────────────────────────────── */
.contact{
  padding:var(--s7) var(--pad) var(--s6);
  background:var(--ink); color:var(--paper);
}
.contact__mail{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.9rem, 8.4vw, 7.4rem);
  line-height:.9; letter-spacing:-.04em; text-transform:lowercase;
  word-break:break-word;
  transition:color .3s var(--ease), transform .4s var(--ease);
}
.contact__mail:hover{ color:var(--red); }
.contact__cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  margin-top:var(--s6); padding-top:var(--s3); border-top:2px solid #303030;
}
.contact__cols h4{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); margin-bottom:10px;
}
.contact__cols p{ font-size:.92rem; color:#B9B5AC; line-height:1.75; }

/* ── Footer ──────────────────────────────────────────────── */
.foot{ background:var(--ink); color:var(--paper); padding:0 var(--pad) var(--s2); overflow:hidden; }
.foot__mark{
  font-family:var(--display);
  font-size:clamp(4rem, 25vw, 24rem); line-height:.76;
  letter-spacing:-.05em; text-align:center;
  color:transparent; -webkit-text-stroke:2px #3A3A38;
  user-select:none;
}
.foot__bar{
  display:flex; justify-content:space-between; gap:var(--s2); flex-wrap:wrap;
  border-top:2px solid #303030; padding-top:var(--s2); margin-top:var(--s3);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:#8A8781;
}
.foot__bar a:hover{ color:var(--red); }

[data-reveal]{ opacity:0; transform:translateY(26px); }

/* ═══ Responsive ═══════════════════════════════════════════ */
@media (max-width:1080px){
  .serv__item{ grid-template-columns:60px 1fr; }
  .serv__item p{ grid-column:2; }
  .serv__from{ grid-column:2; text-align:left; padding-top:0; }
  .proc__grid{ grid-template-columns:repeat(2,1fr); }
  .studio{ grid-template-columns:1fr; gap:var(--s7); }
  .studio__fig--small{ right:0; bottom:-12%; width:40%; }
  .contact__cols{ grid-template-columns:repeat(2,1fr); gap:var(--s4); }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .hero{ padding-top:92px; }
  .hero__meta span:nth-child(2){ display:none; }
  .hero__bottom{ flex-direction:column; align-items:stretch; }
  .arrowlink{ justify-content:space-between; }
  .work__pin{ height:auto; padding-bottom:var(--s5); }
  .work__track{
    flex-direction:column; transform:none !important;
  }
  .card{ flex:none; }
  .card:nth-child(even){ margin-top:0; }
  .card__img{ aspect-ratio:4/3; flex:none; }
  .work__bar{ display:none; }
  .work__hint{ display:none; }
  .proc__grid{ grid-template-columns:1fr; }
  .studio__facts{ grid-template-columns:1fr; }
  .studio__fig--small{ position:static; width:100%; margin-top:var(--s3); aspect-ratio:16/10; }
  .contact__cols{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  /* Sin animación de scroll el carrusel pasa a arrastre nativo, no a un
     bloque que se sale de la pantalla. */
  .work__pin{ height:auto; padding-bottom:var(--s5); }
  .work__track{ transform:none !important; overflow-x:auto; padding-bottom:var(--s3); }
  .card{ flex:0 0 clamp(280px,34vw,470px); }
}


/* ── Contacto del autor ─────────────────────────────────────
   Bloque propio del autor de la demo. Va deliberadamente aparte
   del pie del sitio: los datos de contacto de arriba pertenecen a
   la marca inventada, estos son reales. */
.mk{
  position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px);
  z-index:100;
  /* El contenedor no debe interceptar clics: sólo lo hacen la pastilla y el
     panel. Sin esto quedaría un bloque invisible tapando la esquina. */
  pointer-events:none;
}
.mk__toggle{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  pointer-events:auto;
}
/* El panel se coloca ENCIMA de la pastilla y en posición absoluta: si formara
   parte del flujo, ocuparía sitio incluso cerrado y la pastilla flotaría a
   media altura en vez de quedarse en la esquina. */
.mk__panel{
  position:absolute; right:0; bottom:calc(100% + 10px);
  width:min(310px, calc(100vw - 34px));
  pointer-events:auto;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mk.is-open .mk__panel{ opacity:1; visibility:visible; transform:none; }
.mk__link{ display:flex; align-items:center; gap:11px; }
.mk__link svg{ width:18px; height:18px; flex:none; }
.mk__link span{ display:flex; flex-direction:column; }

.mk__toggle{
  background:var(--ink); color:var(--paper); border:var(--bd); padding:12px 18px;
  box-shadow:5px 5px 0 var(--red);
  font-family:var(--mono); font-size:.73rem; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.mk__toggle:hover{ transform:translate(5px,5px); box-shadow:0 0 0 var(--red); }
.mk__dot{ width:8px; height:8px; background:var(--red); flex:none; display:block; }
.mk__panel{ background:var(--paper); border:var(--bd); box-shadow:8px 8px 0 var(--ink); padding:18px; }
.mk__lead{ font-size:.86rem; color:var(--ink-2); margin-bottom:14px; }
.mk__link{ padding:10px 12px; margin-bottom:8px; border:2px solid var(--ink); color:var(--ink);
  transition:background .2s var(--ease), color .2s var(--ease); }
.mk__link:hover{ background:var(--red); color:var(--paper); }
.mk__link span{ font-family:var(--mono); font-size:.63rem; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.6; }
.mk__link b{ font-family:var(--sans); font-size:.86rem; font-weight:600; letter-spacing:0; text-transform:none; }
.mk__sign{ font-family:var(--display); font-size:.82rem; letter-spacing:-.02em; text-transform:uppercase;
  text-align:right; margin-top:12px; }

@media (max-width:640px){
  .mk__toggle{ font-size:.70rem; padding:10px 14px; }
  .mk__panel{ padding:15px; }
}
@media (prefers-reduced-motion: reduce){ .mk__dot{ animation:none; } }