/* ==========================================================================
   BAHÍA DUNAS · ventana de acceso para asesores (includes/nd-acceso.php)
   Se monta sobre la página, que queda borrosa detrás. Usa las variables
   de estilos.css.

   La puerta se viste como la página que tiene detrás. Por defecto va en
   claro, con la paleta pública —papel, arena y coral—, porque es lo que
   se ve en inicio y en etapas-1-y-2. En capacitación, donde el <body>
   lleva la clase «interno», se pone en oscuro para no romper el cambio
   de tono: al final de esta hoja están las reglas de ese caso.
   ========================================================================== */
.portico{
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  padding: 1.2rem; overflow-y: auto;
  background: rgba(245,227,208,.72);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
.portico[hidden]{ display: none; }
body.portico-abierto{ overflow: hidden; }

.portico__caja{
  width: min(28rem, 100%);
  padding: clamp(1.8rem, 5vw, 2.8rem);
  text-align: center; color: var(--tinta);
  background: var(--papel);
  border: 1px solid rgba(74,43,32,.1);
  border-radius: var(--radio);
  box-shadow: 0 30px 80px rgba(74,43,32,.22);
}
.portico__logo{ display: block; width: 116px; height: auto; margin: 0 auto 1.5rem; }
.portico__rotulo{
  margin: 0 0 .7rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--coral);
}
.portico__titulo{
  margin: 0 0 .8rem;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); line-height: 1.05;
}
.portico__texto{ margin: 0 0 1.6rem; font-size: .88rem; line-height: 1.6; color: rgba(74,43,32,.72); }

.portico__campo{ display: grid; gap: .35rem; margin: 0 0 .9rem; text-align: left; }
.portico__etiqueta{ font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(74,43,32,.7); }
.portico__grupo{ position: relative; display: block; }
.portico .portico__entrada{
  width: 100%; padding: .85rem 1rem;
  border-radius: var(--radio-chico); border: 1px solid rgba(74,43,32,.2);
  background: #fff; color: var(--tinta);
  font: inherit; font-size: 1rem;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.portico .portico__grupo .portico__entrada{ padding-right: 3.1rem; }
.portico .portico__entrada:focus{
  outline: none; border-color: var(--coral); background: #fff;
  box-shadow: 0 0 0 4px rgba(224,109,78,.16);
}
.portico__ver{
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  display: grid; place-items: center; color: rgba(74,43,32,.55);
}
.portico__ver:hover, .portico__ver[aria-pressed="true"]{ color: var(--coral); }

.portico__boton{
  width: 100%; margin-top: .6rem; padding: .95rem 1.5rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--coral); color: #fff;
  font: inherit; font-weight: 700; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.portico__boton:hover{ background: var(--coral-oscuro); transform: translateY(-1px); }

.portico__error{
  margin: 0 0 1rem; padding: .65rem .9rem; border-radius: var(--radio-chico);
  background: rgba(224,109,78,.12); border: 1px solid rgba(224,109,78,.45);
  color: var(--coral-oscuro); font-size: .85rem;
}
.portico__error[hidden]{ display: none; }

.portico__enlaces{ margin: 1.4rem 0 0; font-size: .74rem; color: rgba(74,43,32,.6); }
.portico .portico__enlaces a, .portico .portico__enlaces a:hover{ color: var(--coral); }