/* ==========================================================================
   MHKM — portada de "en proceso".
   La web completa está archivada en /sitio y no se publica: ver README.
   ========================================================================== */

:root{
  --ink:   #000000;
  --paper: #FFFFFF;
  --dim:   #8A8A8A;
  --font: "Poppins", "Century Gothic", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

html,body{ height:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

svg{ display:block; }
p{ margin:0; }

/* ---------------------------------------------------------------- lienzo --- */

.soon{
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(34px,7vh,68px);
  padding:clamp(28px,6vw,64px) 20px;
  text-align:center;
}

/* halo muy tenue detrás del logotipo */
.soon::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:radial-gradient(60% 50% at 50% 42%, rgba(255,255,255,.07), transparent 70%);
}

/* ----------------------------------------------------------------- marca --- */

.soon__logo{ animation:rise 1s cubic-bezier(.2,.7,.3,1) both; }

.soon__mark{
  width:clamp(96px,20vw,190px); height:clamp(96px,20vw,190px);
  margin:0 auto;
  color:var(--paper);
}
.soon__name{
  margin-top:clamp(18px,3vh,30px);
  font-size:clamp(38px,9vw,80px); font-weight:700;
  letter-spacing:.04em; line-height:1;
}
.soon__tag{
  margin-top:clamp(10px,1.6vh,16px);
  font-size:clamp(9px,1.5vw,12px); font-weight:400;
  letter-spacing:.42em; text-indent:.42em; color:var(--dim);
}

/* ---------------------------------------------------------------- redes --- */

.soon__social{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(18px,3.4vw,26px);
  margin-top:clamp(-14px,-2vh,-8px);
  animation:rise 1s cubic-bezier(.2,.7,.3,1) .08s both;
}
.soon__social a{
  color:var(--dim);
  display:grid; place-items:center;
  width:34px; height:34px;
  transition:color .2s ease, transform .2s ease;
}
.soon__social a:hover,
.soon__social a:focus-visible{ color:var(--paper); transform:translateY(-2px); }
.soon__social svg{ width:19px; height:19px; }

.soon__peek{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:-14px;
  background:none; border:0; padding:8px 10px; cursor:pointer;
  color:var(--dim); font:inherit;
  font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  transition:color .2s ease;
  animation:rise 1s cubic-bezier(.2,.7,.3,1) .12s both;
}
.soon__peek:hover{ color:var(--paper); }
.soon__peek svg{ width:13px; height:13px; transition:transform .25s ease; }
.soon__peek[aria-expanded="true"] svg{ transform:rotate(180deg); }

/* panel de "lo último" */
.peek{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(6px);
  animation:fade .25s ease both;
}
.peek[hidden]{ display:none; }
.peek__box{ width:min(880px,100%); position:relative; }
.peek__frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#0A0A0A; border:1px solid rgba(255,255,255,.16); border-radius:4px;
  overflow:hidden;
}
.peek__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.peek__close{
  position:absolute; top:-44px; right:-4px;
  background:none; border:0; cursor:pointer;
  color:var(--paper); font-size:30px; line-height:1; padding:6px 10px;
}
.peek__link{
  display:inline-block; margin-top:14px;
  color:var(--dim); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
}
.peek__link:hover{ color:var(--paper); }

@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

/* ---------------------------------------------------------------- frases --- */

.soon__phrase{
  min-height:1.6em;
  font-size:clamp(15px,2.6vw,22px); font-weight:500;
  letter-spacing:.02em;
  animation:rise 1s cubic-bezier(.2,.7,.3,1) .15s both;
  transition:opacity .55s ease, transform .55s ease;
}
.soon__phrase.is-out{ opacity:0; transform:translateY(-8px); }

/* --------------------------------------------------------------- progreso --- */

.soon__progress{
  display:flex; flex-direction:column; align-items:center; gap:clamp(12px,2vh,20px);
  animation:rise 1s cubic-bezier(.2,.7,.3,1) .3s both;
}

.soon__pct{
  font-size:clamp(54px,13vw,140px); font-weight:700;
  letter-spacing:-.045em; line-height:1;
  background:linear-gradient(100deg,
    #5E5E5E 0%, #FFFFFF 20%, #9A9A9A 38%, #FFFFFF 56%, #6A6A6A 78%, #5E5E5E 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:shimmer 5s linear infinite;
}

.soon__bar{
  width:min(320px,64vw); height:2px;
  background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden;
}
.soon__bar span{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(100deg,
    #5E5E5E 0%, #FFFFFF 20%, #9A9A9A 38%, #FFFFFF 56%, #6A6A6A 78%, #5E5E5E 100%);
  background-size:300% 100%;
  animation:shimmer 5s linear infinite;
}

.soon__state{
  font-size:clamp(9px,1.4vw,11px); font-weight:600;
  letter-spacing:.36em; text-indent:.36em; text-transform:uppercase;
  color:var(--dim);
}

/* ------------------------------------------------------------ animación --- */

@keyframes shimmer{
  from{ background-position:150% 0; }
  to  { background-position:-150% 0; }
}

@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .soon__pct{
    background:none; -webkit-text-fill-color:var(--paper); color:var(--paper);
  }
  .soon__bar span{ background:var(--paper); }
}

/* pantallas muy bajas (móvil apaisado) */
@media (max-height:520px){
  .soon{ gap:20px; }
  .soon__mark{ width:72px; height:72px; }
  .soon__name{ font-size:30px; }
  .soon__pct{ font-size:44px; }
}