/* ==========================================================================
   GRAN MANTRA · puerta de acceso para asesores (includes/nd-acceso.php)

   Misma pieza que en Bahía Dunas, vestida con los tokens de la remasterización
   (css/gm-base.css): navy, noche, bronce dorado y crema. Botón en cápsula y
   en mayúsculas, como el resto del sitio.
   ========================================================================== */
.portico{
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  padding: 1.2rem; overflow-y: auto;
  background: rgba(14,21,64,.55);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}
.portico[hidden]{ display: none; }
body.portico-abierto{ overflow: hidden; }

.portico__caja{
  position: relative; overflow: hidden;
  width: min(28rem, 100%);
  padding: clamp(1.8rem, 5vw, 2.8rem);
  text-align: center; color: var(--gm-tinta);
  background: var(--gm-papel);
  border: 1px solid var(--gm-linea-oro);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(14,21,64,.35);
  font-family: var(--gm-texto);
}
.portico__caja::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--gm-bronce), var(--gm-oro-claro), var(--gm-bronce));
}
.portico__logo{ display: block; width: 140px; height: auto; margin: 0 auto 1.4rem; }
.portico__rotulo{
  margin: 0 0 .7rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gm-bronce-dk);
}
.portico__titulo{
  margin: 0 0 .8rem;
  font-family: var(--gm-display); font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.05;
  color: var(--gm-navy);
}
.portico__texto{ margin: 0 0 1.6rem; font-size: .88rem; line-height: 1.6; color: var(--gm-tinta-suave); }

.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: var(--gm-tinta-suave); }
.portico__grupo{ position: relative; display: block; }
.portico .portico__entrada{
  width: 100%; padding: .85rem 1rem;
  border-radius: 14px; border: 1px solid var(--gm-linea);
  background: #fff; color: var(--gm-tinta);
  font: inherit; font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.portico .portico__grupo .portico__entrada{ padding-right: 3.1rem; }
.portico .portico__entrada:focus{
  outline: none; border-color: var(--gm-bronce);
  box-shadow: 0 0 0 4px rgba(183,131,80,.16);
}
.portico__ver{
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--gm-tinta-suave);
}
.portico__ver .ico{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.portico__ver:hover, .portico__ver[aria-pressed="true"]{ color: var(--gm-bronce-dk); }

.portico__boton{
  width: 100%; margin-top: .6rem; padding: .95rem 1.5rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--gm-bronce), var(--gm-oro-claro) 50%, var(--gm-bronce));
  background-size: 200% 100%;
  color: var(--gm-noche);
  font: inherit; font-weight: 700; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  transition: background-position .4s ease, transform .2s ease, box-shadow .2s ease;
}
.portico__boton:hover{ background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(183,131,80,.35); }
.portico__boton:disabled{ opacity: .7; cursor: progress; transform: none; }

.portico__error{
  margin: 0 0 1rem; padding: .65rem .9rem; border-radius: 12px;
  background: rgba(176,58,46,.08); border: 1px solid rgba(176,58,46,.35);
  color: #8e2f25; font-size: .85rem;
}
.portico__error[hidden]{ display: none; }

.portico__enlaces{ margin: 1.4rem 0 0; font-size: .74rem; color: var(--gm-tinta-suave); }
.portico .portico__enlaces a, .portico .portico__enlaces a:hover{ color: var(--gm-navy); }