/* ===================================================
   Minchán Studio — Página Próximamente
   Paleta oficial: negro #0A0A0A · crema #F5F3EE · borgoña #5C1F28
   =================================================== */

/* ─── Fuentes ─── */
@font-face {
  font-family: 'NeueMontreal';
  src: url('fonts/neue-montreal/NeueMontreal-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NeueMontreal';
  src: url('fonts/neue-montreal/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NeueMontreal';
  src: url('fonts/neue-montreal/NeueMontreal-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NeueMontreal';
  src: url('fonts/neue-montreal/NeueMontreal-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ─── Variables ─── */
:root {
  --black:    #0A0A0A;
  --dark:     #111111;
  --cream:    #F5F3EE;
  --muted:    rgba(245,243,238,.55);
  --subtle:   rgba(245,243,238,.12);
  --burgundy: #5C1F28;
  --burg-deep:#3A1218;
  --burg-glow:rgba(92,31,40,.35);
  --font:     'NeueMontreal', system-ui, sans-serif;
  --ease:     cubic-bezier(0.16,1,0.3,1);
}

/* ─── Reset ─── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; cursor:none; }
html, body {
  height:100%;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
@media (max-width:768px) { html,body { overflow:auto; } }
::selection { background: var(--burgundy); color: var(--cream); }

/* ─── Cursor ─── */
#cursor {
  width:8px; height:8px;
  background: var(--cream);
  border-radius:50%;
  position:fixed; transform:translate(-50%,-50%);
  pointer-events:none; z-index:9999;
  transition: width .2s, height .2s, background .2s;
}
#cursor-ring {
  width:36px; height:36px;
  border:1.5px solid rgba(245,243,238,.3);
  border-radius:50%;
  position:fixed; transform:translate(-50%,-50%);
  pointer-events:none; z-index:9998;
  transition: width .25s, height .25s, border-color .25s;
}
body.hov #cursor { width:12px; height:12px; background:var(--burgundy); }
body.hov #cursor-ring { width:52px; height:52px; border-color:var(--burg-glow); }
@media(max-width:768px){ #cursor,#cursor-ring{display:none} *{cursor:auto!important} }

/* ─── Fondo ─── */
.bg-wrap {
  position:fixed; inset:0; z-index:0;
}
.bg-image {
  position:absolute; inset:0;
  background: url('assets/brand_bg_mac.png') center/cover no-repeat;
  animation: bgPulse 20s ease-in-out infinite alternate;
}
@keyframes bgPulse {
  0%   { transform: scale(1); }
  100% { transform: scale(1.04); }
}
.bg-overlay {
  position:absolute; inset:0;
  background:
    /* Parte superior oscura para que el header sea legible */
    linear-gradient(to bottom,
      rgba(10,10,10,.85) 0%,
      rgba(10,10,10,.35) 30%,
      rgba(10,10,10,.25) 55%,
      rgba(10,10,10,.75) 80%,
      rgba(10,10,10,.97) 100%
    );
}

/* ─── Partículas ─── */
.particles {
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
}
.particle {
  position:absolute;
  border-radius:50%;
  background: var(--burgundy);
  animation: floatUp linear infinite;
  opacity:0;
}
@keyframes floatUp {
  0%   { transform:translateY(0) scale(0); opacity:0; }
  10%  { opacity:.6; }
  90%  { opacity:.2; }
  100% { transform:translateY(-100vh) scale(1.5); opacity:0; }
}

/* ─── Layout principal ─── */
.main-wrap {
  position:relative; z-index:2;
  min-height:100vh;
  display:grid;
  grid-template-rows: auto 1fr auto;
  padding: 0 2rem;
  max-width:800px;
  margin:0 auto;
}

/* ─── Header / Logo ─── */
.cs-header {
  padding:3rem 0 0;
  display:flex;
  justify-content:center;
  animation: fadeDown .9s var(--ease) .1s both;
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}

.logo-wrap {
  display:flex;
  align-items:center;
  gap:1.2rem;
}

.logo-isotipo {
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.logo-isotipo img {
  width:100%; height:auto;
  mix-blend-mode:screen;
  filter: brightness(1.1) saturate(1.2);
}

.logo-wordmark {
  font-family: var(--font);
  font-weight:700;
  font-size:clamp(1.4rem,3vw,1.9rem);
  letter-spacing:.18em;
  color: var(--cream);
  text-transform:uppercase;
  line-height:1.2;
  display:flex;
  flex-direction:column;
  gap:.2em;
}
.logo-top-line {
  display:block;
  white-space:nowrap;
}
.a-mark {
  color: var(--burgundy);
}
.studio-word {
  font-size:.52em;
  letter-spacing:.38em;
  color: var(--muted);
  font-weight:400;
  display:block;
  white-space:nowrap;
}

/* ─── Centro ─── */
.cs-center {
  display:flex;
  flex-direction:column;
  align-items:center;
  /* Empujamos el contenido hacia arriba para dejar espacio
     al logo del wallpaper de marca visible en el centro */
  justify-content:flex-start;
  padding-top: 4vh;
  text-align:center;
  gap:1.8rem;
}

/* Tag line */
.tag-line {
  display:flex;
  align-items:center;
  gap:.9rem;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color: var(--burgundy);
  animation: fadeUp .9s var(--ease) .3s both;
}
.tag-dot {
  width:5px; height:5px;
  border-radius:50%;
  background:var(--burgundy);
  display:inline-block;
}

/* Título */
.cs-title {
  font-size:clamp(3.5rem, 10vw, 7rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
  color: var(--cream);
  animation: fadeUp 1s var(--ease) .45s both;
  /* Sutil gradiente de letras */
  background: linear-gradient(135deg, var(--cream) 0%, rgba(245,243,238,.75) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Subtítulo */
.cs-subtitle {
  font-size:clamp(.95rem,2vw,1.15rem);
  font-weight:300;
  color: var(--muted);
  line-height:1.8;
  animation: fadeUp 1s var(--ease) .55s both;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── Countdown ─── */
.countdown {
  display:flex;
  align-items:flex-start;
  gap:1rem;
  animation: fadeUp 1s var(--ease) .65s both;
}
.countdown-block {
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  min-width:70px;
}
.count-num {
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:700;
  color: var(--cream);
  line-height:1;
  font-variant-numeric:tabular-nums;
  /* Glassmorphism sutil */
  background: rgba(245,243,238,.04);
  border:1px solid rgba(245,243,238,.08);
  border-radius:12px;
  padding:.6rem 1rem;
  min-width:80px;
  text-align:center;
  backdrop-filter:blur(4px);
  transition:border-color .3s, background .3s;
}
.countdown-block:hover .count-num {
  border-color: rgba(92,31,40,.5);
  background: rgba(92,31,40,.07);
}
.count-label {
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--muted);
}
.count-sep {
  font-size:2.5rem;
  font-weight:300;
  color: var(--burgundy);
  margin-top:.4rem;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ─── Formulario ─── */
.notify-form {
  width:100%;
  max-width:480px;
  animation: fadeUp 1s var(--ease) .78s both;
}
.notify-input-wrap {
  display:flex;
  gap:.8rem;
  border:1.5px solid rgba(245,243,238,.12);
  border-radius:9999px;
  padding:.45rem .45rem .45rem 1.5rem;
  background:rgba(245,243,238,.03);
  backdrop-filter:blur(8px);
  transition:border-color .3s, box-shadow .3s;
}
.notify-input-wrap:focus-within {
  border-color:rgba(92,31,40,.6);
  box-shadow:0 0 0 4px rgba(92,31,40,.1);
}
.notify-input {
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--cream);
  font-family:var(--font);
  font-size:.95rem;
  font-weight:300;
}
.notify-input::placeholder { color: var(--muted); }
.notify-btn {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.6rem;
  background:var(--burgundy);
  color:var(--cream);
  border:none;
  border-radius:9999px;
  font-family:var(--font);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background .3s, transform .2s, box-shadow .3s;
  white-space:nowrap;
  box-shadow:0 4px 20px rgba(92,31,40,.4);
}
.notify-btn:hover {
  background:#7a2a35;
  transform:translateX(2px);
  box-shadow:0 6px 28px rgba(92,31,40,.55);
}
.notify-btn i { font-size:.8rem; }

.notify-hint {
  text-align:center;
  margin-top:1rem;
  font-size:.8rem;
  color:rgba(245,243,238,.3);
  letter-spacing:.04em;
}
.notify-success {
  display:none;
  text-align:center;
  margin-top:1.2rem;
  color:#6fcf97;
  font-size:.9rem;
  font-weight:500;
  gap:.5rem;
}
.notify-success.show { display:flex; align-items:center; justify-content:center; }

/* ─── Footer ─── */
.cs-footer {
  padding:2rem 0 3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
  animation: fadeUp 1s var(--ease) .9s both;
}
/* Subtítulo reubicado en el footer, debajo del logo de fondo */
.cs-subtitle-footer {
  font-size:clamp(.9rem,1.8vw,1.05rem);
  font-weight:300;
  color: var(--muted);
  line-height:1.8;
  text-align:center;
  margin-bottom:.4rem;
}
.social-row { display:flex; gap:1rem; }
.soc-btn {
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(245,243,238,.1);
  color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem;
  text-decoration:none;
  transition:border-color .3s, color .3s, background .3s, transform .3s;
}
.soc-btn:hover {
  border-color:var(--burgundy);
  color:var(--cream);
  background:rgba(92,31,40,.15);
  transform:translateY(-3px);
}

.cs-copy {
  font-size:.78rem;
  color:rgba(245,243,238,.25);
  letter-spacing:.05em;
}
.cs-copy a {
  color:rgba(245,243,238,.4);
  text-decoration:none;
  transition:color .2s;
}
.cs-copy a:hover { color:var(--cream); }

/* ─── Responsive móvil ─── */
@media (max-width: 768px) {
  /* Permitir scroll vertical en móvil */
  html, body { overflow-x: hidden; overflow-y: auto; }

  /* El fondo utiliza el wallpaper móvil oficial */
  .bg-image {
    background-image: url('assets/brand_bg_mobile.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: none; /* sin zoom en móvil para mejor rendimiento */
  }

  /* Overlay más uniforme en móvil */
  .bg-overlay {
    background: linear-gradient(to bottom,
      rgba(10,10,10,.88) 0%,
      rgba(10,10,10,.45) 35%,
      rgba(10,10,10,.38) 58%,
      rgba(10,10,10,.82) 80%,
      rgba(10,10,10,.97) 100%
    );
  }

  /* Layout: sin altura fija, que crezca con el contenido */
  .main-wrap {
    min-height: 100svh; /* svh = small viewport height, ideal en móvil */
    padding: 0 1.4rem;
    grid-template-rows: auto 1fr auto;
  }

  /* Header más compacto */
  .cs-header {
    padding: 2.2rem 0 0;
  }

  /* Logo isotipo más pequeño */
  .logo-isotipo { width: 38px; height: 38px; }

  /* Logo wordmark más pequeño */
  .logo-wordmark { font-size: 1.1rem; letter-spacing: .14em; }
  .studio-word  { letter-spacing: .28em; }

  /* Sección central: menos padding arriba para no tapar el fondo */
  .cs-center {
    padding-top: 2.5vh;
    gap: 1.2rem;
  }

  /* Tag line */
  .tag-line {
    font-size: .7rem;
    letter-spacing: .2em;
    gap: .6rem;
  }

  /* Título "Próximamente" más grande en móvil */
  .cs-title {
    font-size: clamp(3rem, 14vw, 5rem);
    letter-spacing: -.02em;
  }

  /* Footer apilado y centrado */
  .cs-footer {
    padding: 1.8rem 0 2.5rem;
    gap: 1rem;
  }

  .cs-subtitle-footer {
    font-size: .9rem;
    padding: 0 .5rem;
  }

  /* Botones RRSS un poco más grandes en móvil (más fácil de pulsar) */
  .soc-btn {
    width: 48px; height: 48px;
    font-size: 1.05rem;
  }

  .cs-copy {
    font-size: .72rem;
    text-align: center;
    padding: 0 1rem;
  }
}

/* Pantallas muy pequeñas (iPhone SE, etc.) */
@media (max-width: 380px) {
  .logo-wordmark { font-size: .95rem; }
  .logo-isotipo  { width: 32px; height: 32px; }
  .cs-title      { font-size: 2.6rem; }
}