/* =========================================================
   MANHOOD CO. — Coming soon
   ========================================================= */
:root{
  --ink:#0A0A0A; --ink-2:#121110;
  --gold:#96774A; --gold-lt:#C9A46B; --gold-dk:#6E5533;
  --cream:#E9E0D1;
  --serif:"Playfair Display","Bodoni MT","Didot","Times New Roman",serif;
  --sans:"Jost","Inter","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(1.4rem,5vw,4.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-weight:350; line-height:1.65;
  min-height:100svh; overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
h1{font-family:var(--serif); font-weight:500; margin:0; line-height:1.04; letter-spacing:-.025em}
p{margin:0}
::selection{background:var(--gold); color:var(--ink)}

/* grano */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- escenario ---------- */
.stage{position:relative; min-height:100svh; display:flex; align-items:center; padding-block:clamp(3rem,8vh,6rem)}
.stage__bg{
  position:absolute; inset:0; z-index:0;
  background-image:url("../assets/cover.jpg"), url("../assets/cover.png");
  background-size:cover; background-position:72% center; background-repeat:no-repeat;
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1.04) translateX(0)} to{transform:scale(1.1) translateX(-1.4%)}}
.stage__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 4%, rgba(10,10,10,.93) 34%, rgba(10,10,10,.55) 62%, rgba(10,10,10,.72) 100%),
    linear-gradient(to bottom, rgba(10,10,10,.7), transparent 26%, rgba(10,10,10,.6));
}
.wrap{
  position:relative; z-index:1; width:100%; max-width:1180px;
  margin-inline:auto; padding-inline:var(--gut);
}

/* ---------- marca ---------- */
.brand{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.brand__mark{height:66px; width:auto}
.brand__word{height:26px; width:auto}
.brand__claim{
  width:100%; margin-top:.9rem; font-family:var(--serif); font-style:italic;
  font-size:1.05rem; color:var(--gold-lt); letter-spacing:.06em;
}

.eyebrow{
  margin-top:clamp(1.5rem,4vh,2.4rem); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold-lt);
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::before{content:""; width:34px; height:1px; background:currentColor; opacity:.6}

h1{font-size:clamp(2.4rem,5.4vw,4.2rem); margin:.9rem 0 1.2rem; text-shadow:0 4px 30px rgba(0,0,0,.6)}
.lede{
  max-width:46ch; color:color-mix(in srgb,var(--cream) 74%,transparent);
  font-size:clamp(.95rem,1.4vw,1.05rem); text-shadow:0 2px 16px rgba(0,0,0,.75);
}

/* ---------- cuenta regresiva ---------- */
.count{display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.4rem); margin-top:2rem}
.count > div{min-width:64px}
.count strong{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(2rem,4.4vw,3rem); line-height:1; color:var(--cream);
  font-variant-numeric:tabular-nums;
}
.count span{
  display:block; margin-top:.5rem; font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-lt);
}
.count.is-done{gap:0}
.count.is-done > div:not(:first-child){display:none}
.count.is-done strong{font-size:clamp(1.6rem,3vw,2.2rem)}


/* ---------- pie ---------- */
.foot{margin-top:clamp(1.8rem,5vh,3rem); display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2.2rem}
.foot__lbl{font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:color-mix(in srgb,var(--cream) 45%,transparent)}
.foot__marks{display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem}
.foot__marks span{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--serif);
  font-size:1rem; color:color-mix(in srgb,var(--cream) 80%,transparent);
}
.foot__marks svg{width:18px; height:18px; fill:var(--gold-lt)}
.foot__ig{
  display:inline-flex; align-items:center; gap:.55rem; margin-left:auto;
  font-size:.78rem; letter-spacing:.12em; color:color-mix(in srgb,var(--cream) 60%,transparent);
  text-decoration:none; transition:color .3s;
}
.foot__ig svg{width:17px; height:17px; fill:currentColor}
.foot__ig:hover{color:var(--gold-lt)}

/* ---------- idioma ---------- */
.lang{
  position:fixed; top:clamp(1rem,3vw,1.8rem); right:clamp(1rem,3vw,1.8rem); z-index:50;
  padding:.55rem 1rem; background:rgba(10,10,10,.5); color:var(--cream);
  border:1px solid color-mix(in srgb,var(--cream) 30%,transparent); border-radius:2px;
  font:inherit; font-size:.7rem; letter-spacing:.18em; cursor:pointer;
  backdrop-filter:blur(8px); transition:.3s var(--ease);
}
.lang:hover{border-color:var(--gold); color:var(--gold-lt)}

/* ---------- entrada ---------- */
.brand,.eyebrow,h1,.lede,.count,.foot{
  opacity:0; transform:translateY(18px);
  animation:rise .9s var(--ease) forwards;
}
.eyebrow{animation-delay:.12s} h1{animation-delay:.2s} .lede{animation-delay:.3s}
.count{animation-delay:.4s} .foot{animation-delay:.5s}
@keyframes rise{to{opacity:1; transform:none}}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .stage{text-align:center; padding-top:5.5rem}
  .stage__bg{background-position:66% center}
  .stage__bg::after{
    background:linear-gradient(to bottom, rgba(10,10,10,.86) 0%, rgba(10,10,10,.8) 50%, var(--ink) 97%);
  }
  .brand{justify-content:center}
  .eyebrow{justify-content:center}
  .eyebrow::after{content:""; width:34px; height:1px; background:currentColor; opacity:.6}
  .lede{margin-inline:auto}
  .count{justify-content:center}
  .foot{justify-content:center; flex-direction:column; gap:1.2rem}
  .foot__ig{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important}
  .brand,.eyebrow,h1,.lede,.count,.foot{opacity:1; transform:none}
}