/* ==========================================================================
   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);
}

/* ---------------------------------------------------------------- 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; }
}