/* ═══════════════════════════════════════════
   HALUM STUDIO — halumstudio.com
   ═══════════════════════════════════════════ */

:root{
  --ink:      #08090b;
  --ink-2:    #0e1013;
  --paper:    #f3f0ea;
  --amber:    #e0a244;
  --muted:    rgba(243,240,234,.56);
  --line:     rgba(243,240,234,.12);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --pad:  clamp(1.5rem, 5vw, 5rem);
  --wrap: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  scroll-snap-type: y proximity;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,picture{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }

::selection{ background:var(--amber); color:var(--ink) }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

/* ─── Grano ─────────────────────────────── */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.038; mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Tipografía ────────────────────────── */
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.015em }
h1{ font-size:clamp(2.9rem, 8.5vw, 6.2rem) }
h2{ font-size:clamp(2.2rem, 5.5vw, 4rem) }
h3{ font-size:1.375rem; line-height:1.2 }
em{ font-style:italic; color:var(--amber) }

.eyebrow{
  font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.5rem;
}
.lede{ font-size:clamp(1rem,1.6vw,1.125rem); color:var(--muted); max-width:46ch; margin-top:1.75rem }

/* ─── Marca ─────────────────────────────── */
.mark{ display:inline-flex; align-items:baseline; gap:.45rem; line-height:1 }
.mark__star{ width:1.15em; height:1.15em; fill:var(--amber); align-self:center; flex:none }
.mark__word{ font-size:1.05rem; font-weight:500; letter-spacing:.02em }
.mark__sub{ font-size:.62rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:var(--muted) }

/* ─── Nav ───────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.4rem var(--pad);
  transition:background .4s ease, backdrop-filter .4s ease, padding .4s ease;
}
.nav.is-stuck{
  padding-block:.9rem;
  background:rgba(8,9,11,.72);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.nav__links{ display:flex; align-items:center; gap:1.75rem; font-size:.8rem; letter-spacing:.08em }
.nav__links a{ color:var(--muted); transition:color .25s }
.nav__links a:hover{ color:var(--paper) }
.nav__cta{
  color:var(--paper) !important; border:1px solid var(--line);
  padding:.5rem 1.05rem; border-radius:100px; transition:border-color .25s, background .25s;
}
.nav__cta:hover{ border-color:var(--amber); background:rgba(224,162,68,.1) }

/* ─── Botones ───────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.7rem; border-radius:100px;
  font-size:.83rem; font-weight:500; letter-spacing:.06em;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s, border-color .25s, color .25s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px) }
.btn--solid{ background:var(--amber); color:#1a1206 }
.btn--solid:hover{ background:#eeb45c }
.btn--ghost{ border:1px solid var(--line); color:var(--paper) }
.btn--ghost:hover{ border-color:rgba(243,240,234,.4) }

/* ═══ HERO ═══════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:0 var(--pad) clamp(4.5rem,11vh,8rem);
  overflow:hidden;
  scroll-snap-align:start;
}
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1) translate3d(0,0,0) } to{ transform:scale(1.09) translate3d(-1%,-1%,0) } }

.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(8,9,11,.97) 0%, rgba(8,9,11,.78) 26%, rgba(8,9,11,.4) 52%, rgba(8,9,11,.18) 72%, rgba(8,9,11,.62) 100%),
    radial-gradient(95% 75% at 12% 88%, rgba(8,9,11,.88), transparent 64%);
}
.hero__body{ position:relative; width:100%; max-width:var(--wrap); margin-inline:auto }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem }

.cue{
  position:absolute; bottom:1.75rem; left:50%; translate:-50% 0;
  width:22px; height:34px; border:1px solid var(--line); border-radius:100px;
  display:grid; place-items:start center; padding-top:6px;
}
.cue span{ width:2px; height:6px; border-radius:2px; background:var(--amber); animation:cue 1.9s ease-in-out infinite }
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:1 } 60%{ transform:translateY(11px); opacity:0 } }
@media (max-height:640px){ .cue{ display:none } }

/* ═══ PORTAFOLIO ═════════════════════════ */
.slide{
  position:relative; height:100svh; overflow:hidden;
  scroll-snap-align:start;
}
.slide picture{ position:absolute; inset:0; display:block; z-index:1 }
.slide img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:var(--focus,center);
  transform:scale(1.06); transition:transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.slide.is-in img{ transform:scale(1) }

/* Encuadre por foto: cada slide puede fijar su punto de interés
   con la variable --focus (por defecto, el centro). */
.slide::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(8,9,11,.94) 0%, rgba(8,9,11,.66) 18%, rgba(8,9,11,.24) 38%, transparent 58%);
}
.slide figcaption{
  position:absolute; z-index:3; left:var(--pad); right:var(--pad); bottom:clamp(2.5rem,7vh,4.5rem);
  text-shadow:0 1px 26px rgba(8,9,11,.85);
  max-width:var(--wrap); margin-inline:auto;
  display:grid; gap:.3rem;
  opacity:0; transform:translateY(18px); transition:opacity .9s ease .15s, transform .9s cubic-bezier(.2,.7,.2,1) .15s;
}
.slide.is-in figcaption{ opacity:1; transform:none }
.slide__n{ font-size:.68rem; letter-spacing:.28em; color:var(--amber) }
.slide figcaption b{ font-family:var(--serif); font-weight:400; font-size:clamp(1.75rem,4.5vw,3rem); line-height:1.05 }
.slide figcaption i{ font-style:normal; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted) }

/* ═══ SERVICIOS ══════════════════════════ */
.servicios{ background:var(--ink-2); padding-block:clamp(5.5rem,14vh,9rem); border-top:1px solid var(--line) }
.cards{
  display:grid; gap:0; margin-top:clamp(3rem,7vh,4.5rem);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
/* Las líneas de la retícula son box-shadow de cada tarjeta: así no dependen
   del fondo del contenedor y no se asoman durante la animación de entrada. */
.card{
  background:var(--ink-2); box-shadow:0 0 0 1px var(--line);
  padding:clamp(1.75rem,3.5vw,2.5rem);
  display:grid; gap:.9rem; align-content:start; transition:background .35s;
}
.card:hover{ background:#14171c }
.card__n{ font-size:.68rem; letter-spacing:.28em; color:var(--amber) }
.card p{ font-size:.94rem; color:var(--muted) }

/* ═══ CONTACTO ═══════════════════════════ */
.contacto{ padding-block:clamp(6rem,16vh,10rem); border-top:1px solid var(--line) }
.social{ display:flex; flex-wrap:wrap; gap:1.75rem; margin-top:3.5rem }
.social a{ display:inline-flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--muted); transition:color .25s }
.social a:hover{ color:var(--paper) }
.social svg{ width:19px; height:19px; fill:currentColor }

/* ═══ FOOTER ═════════════════════════════ */
.foot{ border-top:1px solid var(--line); padding-block:2.25rem; font-size:.76rem; color:var(--muted) }
.foot__in{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between }
.mark--foot{ opacity:.85 }

/* ═══ Reveal ═════════════════════════════ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1) }
.reveal.is-in{ opacity:1; transform:none }
.reveal:nth-child(2){ transition-delay:.06s }
.reveal:nth-child(3){ transition-delay:.12s }
.reveal:nth-child(4){ transition-delay:.18s }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; scroll-snap-type:none }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important }
  .reveal,.slide figcaption{ opacity:1; transform:none }
  .slide img{ transform:none }
}