/* ============================================================
   PROXIMAMENTE.CSS — estilos propios del módulo "proximamente"
   Autocontenido a propósito: esta página se sube y se usa sola,
   antes de que el resto del sitio esté listo.
   ============================================================ */

:root{
  --bg:#0c0c0d;
  --ivory:#f4efe4;
  --ivory-dim:rgba(244,239,228,0.62);
  --brass:#b3924f;
  --brass-light:#d9c088;
  --line:rgba(244,239,228,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(179,146,79,0.14), transparent 55%),
    var(--bg);
  color:var(--ivory);
  font-family:'Inter', sans-serif;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow-x:hidden; position:relative;
}
body::before, body::after{
  content:""; position:fixed; top:28px; bottom:28px; width:1px; background:var(--line);
}
body::before{left:28px;}
body::after{right:28px;}
.rule-h{position:fixed; left:28px; right:28px; height:1px; background:var(--line);}
.rule-h.top{top:28px;}
.rule-h.bottom{bottom:28px;}

.frame-label{
  position:fixed; font-family:'Inter', sans-serif; font-size:10.5px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ivory-dim);
}
.frame-label.tl{top:44px; left:44px;}
.frame-label.tr{top:44px; right:44px;}
.frame-label.bl{bottom:44px; left:44px;}
.frame-label.br{bottom:44px; right:44px;}

main{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:120px 24px 100px; max-width:640px;
  animation:rise 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

.crest{
  width:132px; height:132px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:40px; position:relative;
}
.crest::before{content:""; position:absolute; inset:8px; border-radius:50%; border:1px solid var(--line);}
.crest svg{width:46px; height:46px; stroke:var(--ivory);}

.eyebrow{font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--brass-light); margin-bottom:22px;}

h1{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:clamp(2.6rem, 7vw, 4.6rem); line-height:1; letter-spacing:-0.01em;
}
h1 em{
  font-style:italic; font-weight:400; font-size:0.42em; display:block;
  color:var(--brass-light); margin-top:14px; letter-spacing:0.02em;
}

.tagline{
  margin-top:30px; font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(1.05rem, 2.4vw, 1.35rem); color:var(--ivory-dim); max-width:460px; line-height:1.5;
}

.divider{width:52px; height:1px; background:var(--brass); margin:38px 0;}

.sub{font-size:14.5px; line-height:1.75; color:var(--ivory-dim); max-width:420px; font-weight:300;}
.sub strong{color:var(--ivory); font-weight:500;}

.notify{
  margin-top:44px; display:flex; width:100%; max-width:400px;
  border-bottom:1px solid var(--line); padding-bottom:12px; gap:14px;
}
.notify input{
  flex:1; background:transparent; border:none; outline:none; color:var(--ivory);
  font-family:'Inter', sans-serif; font-size:14px; letter-spacing:0.01em;
}
.notify input::placeholder{color:rgba(244,239,228,0.38);}
.notify button{
  background:none; border:none; color:var(--brass-light); font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; cursor:pointer;
  white-space:nowrap; padding:4px 0; transition:color .2s;
}
.notify button:hover{color:var(--ivory);}
.notify-msg{margin-top:14px; font-size:12.5px; color:var(--brass-light); min-height:16px;}

.location{margin-top:56px; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ivory-dim);}
.location span{color:var(--brass-light);}

.socials{margin-top:22px; display:flex; gap:22px;}
.socials a{
  color:var(--ivory-dim); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:all .2s;
}
.socials a:hover{color:var(--ivory); border-color:var(--brass);}

@media (max-width:520px){
  .frame-label, body::before, body::after, .rule-h{display:none;}
  main{padding:80px 22px 70px;}
  .notify{flex-direction:column; gap:10px; border-bottom:none;}
  .notify input{border-bottom:1px solid var(--line); padding-bottom:10px;}
  .notify button{align-self:flex-start;}
}
@media (prefers-reduced-motion: reduce){ main{animation:none;} }