/* ==========================================================================
   07-ACCESO.CSS · "Muro suave" y ventana de registro (la "puerta")
   --------------------------------------------------------------------------
   Funcionamiento (igual que el sitio actual):
   - Sin registro  → <html class="visitante">: se ve la portada y UN proyecto;
                     lo demás aparece difuminado con el botón "Registrar".
   - Con registro  → <html class="acceso-total">: se ve todo.
   Quién pone esas clases: js/acceso-temprano.js y js/03-acceso.js
   ========================================================================== */

/* ---------- El muro ---------- */
#bloqueo{position:relative}
.bloqueo-cta{display:none}
html.visitante #bloqueo{max-height:480px;overflow:hidden}
html.visitante .bloqueo-inner{
  max-height:480px;overflow:hidden;
  filter:blur(7px);opacity:.55;pointer-events:none;user-select:none;
}
html.visitante .bloqueo-cta{
  display:flex;position:absolute;inset:0;z-index:5;align-items:center;justify-content:center;padding:16px;
}
html.visitante .bloqueo-cta::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,30,21,0) 0%,rgba(11,30,21,.72) 55%,var(--ink) 100%);
}
html.visitante body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.cta-tarjeta{
  position:relative;background:var(--papel);color:var(--sobre-papel);color-scheme:light;
  border-radius:var(--radio);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  padding:26px 28px;text-align:center;max-width:440px;
}
.cta-candado{width:48px;height:48px;border-radius:14px;background:var(--papel-2);display:grid;place-items:center;margin:0 auto 12px}
.cta-candado svg{width:24px;height:24px;stroke:var(--verde);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cta-tarjeta h3{font-family:var(--f-titulo);font-weight:400;font-size:1.6rem;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.cta-tarjeta p{font-size:.98rem;color:var(--suave-papel);margin-bottom:18px}

/* ---------- La puerta (ventana de registro) ---------- */
html.bloqueado{overflow:hidden}
#puerta{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;background:rgba(11,30,21,.62);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .45s var(--suave),visibility 0s .45s;
}
#puerta.abierta{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .45s var(--suave)}
.puerta-caja{
  position:relative;width:100%;max-width:440px;margin:auto;border-radius:var(--radio);
  padding:clamp(24px,5vw,34px) clamp(20px,4.5vw,30px);
  background:rgba(18,56,42,.74);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(241,244,236,.26);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);color:var(--sobre-oscuro);
}
#puerta-cerrar{
  position:absolute;top:12px;right:14px;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(241,244,236,.28);background:rgba(241,244,236,.08);
  font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
#puerta-cerrar:hover{background:rgba(241,244,236,.18)}
.puerta-caja .ojo{
  display:block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--lima);margin-bottom:10px;padding-right:44px;
}
.puerta-caja h2{
  font-family:var(--f-titulo);font-weight:400;line-height:1.1;letter-spacing:-.02em;
  font-size:clamp(1.8rem,6vw,2.3rem);margin-bottom:12px;
}
.puerta-caja .sub{font-size:.98rem;line-height:1.55;color:rgba(241,244,236,.86);margin-bottom:20px}
.puerta-campos{display:flex;flex-direction:column;gap:10px}
.puerta-campos input{
  width:100%;min-height:52px;padding:0 16px;border-radius:12px;outline:none;
  background:rgba(241,244,236,.08);border:1px solid rgba(241,244,236,.3);
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.puerta-campos input::placeholder{color:rgba(241,244,236,.66)}
.puerta-campos input:focus{border-color:var(--lima);background:rgba(241,244,236,.14);box-shadow:0 0 0 3px rgba(169,208,107,.25)}
.puerta-check{display:flex;gap:12px;align-items:flex-start;margin:16px 0 18px}
.puerta-check input{margin-top:2px;flex:none;width:20px;height:20px;accent-color:var(--accion)}
.puerta-check label{font-size:.82rem;line-height:1.55;color:rgba(241,244,236,.84)}
.puerta-check a{color:var(--sobre-oscuro);text-decoration:underline}
#puerta-btn{width:100%;min-height:56px;font-size:1.02rem}
.puerta-pie{
  display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;
  font-size:.8rem;color:rgba(241,244,236,.74);
}
.puerta-pie svg{width:14px;height:14px;fill:none;stroke:rgba(241,244,236,.85);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#puerta-msg{font-size:.88rem;margin-top:12px;text-align:center;min-height:1.2em}
#puerta-msg.error{color:#ffcdc0}
#puerta-msg.ok{color:#d8f2c9}

@media (prefers-reduced-motion:reduce){
  #puerta,#puerta.abierta{transition:none}
}