:root{
  --navy:#1E2A52; --marfil:#F2EDE3; --dorado:#C09A2E; --dorado-2:#D9B459;
  --suave:#A9AFC4; --linea:rgba(242,237,227,.16);
  --gut:clamp(18px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--navy)}
body{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  overflow-x:hidden; color:var(--marfil);
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(192,154,46,.14), transparent 55%),
    radial-gradient(90% 70% at 10% 100%, rgba(0,0,0,.35), transparent 60%),
    var(--navy);
  font-family:Inter,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.5;
}
.mono{font-family:"Space Mono",ui-monospace,Consolas,monospace}

/* ---------- cabecera ---------- */
.top{
  flex:none; display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--gut) 0;
}
.marca{width:clamp(130px,17vw,230px); height:auto; display:block}
.meta{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--suave); text-align:right; line-height:1.7}
.meta b{color:var(--marfil); font-weight:700}

/* ---------- escena: ocupa todo el hueco y centra el bloque ---------- */
.escena{
  flex:1 1 auto; position:relative; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--gut);
}
.fondo{position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none}
.ghost{
  position:absolute; right:-2vw; bottom:0; pointer-events:none; user-select:none;
  font-family:"DM Serif Display",Georgia,serif; line-height:.8; letter-spacing:-.04em;
  font-size:clamp(160px,40svh,560px); color:var(--marfil); opacity:.055;
}
.ghost b{color:var(--dorado); font-weight:400; opacity:.9}
.ghost.izq{right:auto; left:-2vw}

/* ---------- el bloque: TODO se mide con --s (el tamaño del titular) ---------- */
.stage{
  --s:min(11svh,13vw,140px);
  width:min(100%,max(760px,calc(var(--s)*8.2)));
}
.js .stage{opacity:0}
.js .stage.on{opacity:1}

.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:max(10px,calc(var(--s)*.085)); letter-spacing:.26em; text-transform:uppercase;
  color:var(--dorado-2); font-weight:700; margin-bottom:calc(var(--s)*.16);
}
.carga{position:relative; width:min(160px,28vw); height:1px; background:var(--linea); overflow:hidden; flex:none}
.carga::after{content:""; position:absolute; inset:0; width:40%; background:var(--dorado); animation:carga 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes carga{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}
.ok{display:inline-grid; place-items:center; width:1.7em; height:1.7em; border:1.5px solid var(--dorado-2); border-radius:50%; flex:none}
.ok svg{width:.9em; height:.9em}

.titular{
  font-family:"DM Serif Display",Georgia,serif; font-weight:400;
  font-size:var(--s); line-height:.9; letter-spacing:-.025em; color:var(--marfil);
}
.titular .acento{font-family:Courgette,cursive; color:var(--dorado); font-size:.92em; display:inline-block; transform:translateY(.04em)}
.w{display:inline-block; white-space:nowrap}
.ch{display:inline-block; will-change:transform,opacity}

.sub{
  max-width:52ch; color:var(--suave);
  font-size:clamp(14px,calc(var(--s)*.15),20px); line-height:1.5;
  margin-top:calc(var(--s)*.2);
}
.sub strong{color:var(--marfil); font-weight:600}

/* ---------- formulario ---------- */
form{margin-top:calc(var(--s)*.24); width:min(620px,100%); display:grid; gap:8px}
.lbl{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--suave)}
.fila{display:flex; border:1.5px solid var(--marfil)}
.fila:focus-within{border-color:var(--dorado-2)}
input[type=email]{
  flex:1; min-width:0; height:clamp(46px,calc(var(--s)*.44),60px); padding:0 16px; border:0;
  background:transparent; color:var(--marfil); font:inherit; font-size:16px; outline:none;
}
input[type=email]::placeholder{color:rgba(242,237,227,.5)}
input[aria-invalid="true"]{box-shadow:inset 0 -2px 0 #E07A3A}
button{
  height:clamp(46px,calc(var(--s)*.44),60px); padding:0 26px; border:0; background:var(--dorado); color:var(--navy);
  font:inherit; font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
button:hover{background:var(--dorado-2)}
button:active{transform:scale(.98)}
button:disabled{opacity:.7; cursor:wait}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--dorado-2); outline-offset:2px}
.fino{font-size:12px; color:var(--suave)}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}

/* ---------- gracias ---------- */
.pasos{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--linea); border:1px solid var(--linea); margin-top:calc(var(--s)*.22);
}
.pasos div{background:var(--navy); padding:12px 14px}
.pasos .n{font-size:10px; letter-spacing:.2em; color:var(--dorado-2); font-weight:700; display:block; margin-bottom:4px}
.pasos .t{font-size:13px; color:var(--marfil); line-height:1.4; display:block}
.redes-btn{display:flex; gap:10px; flex-wrap:wrap; margin-top:calc(var(--s)*.22)}
.redes-btn a{
  display:inline-flex; align-items:center; gap:10px; height:clamp(46px,calc(var(--s)*.4),54px); padding:0 22px;
  border:1.5px solid var(--marfil); color:var(--marfil); text-decoration:none; font-weight:600; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; transition:background .18s,color .18s;
}
.redes-btn a:hover{background:var(--marfil); color:var(--navy)}
.redes-btn a.oro{background:var(--dorado); border-color:var(--dorado); color:var(--navy)}
.redes-btn a.oro:hover{background:var(--dorado-2); border-color:var(--dorado-2)}
.redes-btn svg{width:18px; height:18px}

/* ---------- pie ---------- */
.pie{
  flex:none; margin:0 var(--gut); padding:10px 0;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  border-top:1px solid var(--linea);
}
.frase{font-family:"DM Serif Display",Georgia,serif; font-style:italic; font-size:clamp(14px,1.9svh,18px); color:var(--marfil)}
.frase span{font-family:Courgette,cursive; font-style:normal; color:var(--dorado)}
.redes{display:flex; gap:18px; font-size:11px; letter-spacing:.2em; text-transform:uppercase}
.redes a,.volver{color:var(--suave); text-decoration:none; transition:color .15s; font-size:11px; letter-spacing:.2em; text-transform:uppercase}
.redes a:hover,.volver:hover{color:var(--marfil)}

/* ---------- cinta ---------- */
.cinta{
  flex:none; background:var(--marfil); color:var(--navy); overflow:hidden; white-space:nowrap;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:700;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.cinta.oro{background:var(--dorado)}
.cinta div{display:inline-block; padding:7px 0; animation:cinta 28s linear infinite}
.cinta span{padding:0 22px}
.cinta i{font-style:normal; color:var(--dorado)}
.cinta.oro i{color:var(--marfil)}
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .meta{display:none}
  .fila{flex-direction:column; border:0; gap:8px}
  input[type=email]{border:1.5px solid var(--marfil)}
  button{width:100%}
  .pie{flex-direction:column; align-items:flex-start; gap:4px}
  .pasos{grid-template-columns:1fr}
  .pasos div{padding:8px 12px}
  .redes-btn a{flex:1; justify-content:center}
  .ghost{right:-8vw; font-size:clamp(150px,30svh,300px)}
}
@media (max-width:640px) and (max-height:760px){ .pasos{display:none} }
@media (max-height:620px){ .pasos{display:none} }
@media (max-height:540px){ .sub{display:none} }
@media (prefers-reduced-motion:reduce){ .carga::after,.cinta div{animation:none} }