/* ==========================================================================
   Chapinya — páginas del miembro: entrar y «Mi membresía».
   Usa los tokens de chapinya.css; acá solo lo propio de estas pantallas.
   ========================================================================== */

body.miembro { background: var(--papel); min-height: 100vh; }

/* ---------------------------------------------------------------- entrar */
.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: stretch;
}
.acceso__marca {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s5);
  padding: var(--s8) var(--s7);
  background: var(--negro);
  color: var(--blanco);
  overflow: hidden;
}
.acceso__marca img { width: min(440px, 100%); height: auto; }
.acceso__marca p { margin: 0; font-size: 1.125rem; color: #CFCFCF; max-width: 32ch; }
/* Los colores del ave, como en la portada. */
.acceso__marca::after {
  content: '';
  position: absolute; right: -90px; bottom: -90px;
  width: 320px; height: 320px; border-radius: 50%;
  background: conic-gradient(var(--turquesa) 0 20%, var(--verde) 0 40%, var(--marca) 0 60%, var(--rojo) 0 80%, #1E6FB8 0);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
          mask: radial-gradient(circle, transparent 54%, #000 55%);
}

.acceso__caja {
  display: grid;
  align-content: center;
  gap: var(--s4);
  padding: var(--s7) var(--s6);
  background: var(--blanco);
}
.acceso__caja .marcador { justify-self: start; }
.acceso__titulo { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.acceso__form { display: grid; gap: var(--s2); }
.acceso__form label { margin-top: var(--s3); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.acceso__form input {
  padding: 13px var(--s4);
  border: 2px solid var(--negro);
  border-radius: 6px;
  font: inherit;
  background: var(--blanco);
}
.acceso__form input:focus { outline: 0; box-shadow: 0 0 0 3px var(--marca); }
.acceso__form .boton { margin-top: var(--s4); }
.acceso__error, .acceso__aviso, .acceso__ok {
  margin: 0; padding: var(--s3) var(--s4); border-radius: 6px; font-weight: 600; font-size: .9375rem;
}
.acceso__error { background: #FDE7EA; color: #9B0019; }
.acceso__aviso { background: var(--marca-tenue); color: #5C4300; margin-bottom: var(--s5); }
.acceso__ok    { background: #E4F4DC; color: #245C12; }
.acceso__pie { margin: var(--s3) 0 0; font-size: .875rem; color: var(--tinta-2); }
.acceso__pie a, .acceso__secundario { text-decoration: underline; font-weight: 600; }
.acceso__secundario { justify-self: center; font-size: .875rem; }

/* -------------------------------------------------------- mi membresía -- */
.miembro__barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--negro); color: var(--blanco);
}
.miembro__logo img { height: 46px; width: auto; }
.miembro__barra nav { display: flex; gap: var(--s5); font-weight: 600; font-size: .9375rem; }
.miembro__barra nav a:hover { color: var(--marca); }

.miembro__cuerpo { padding-block: var(--s7) var(--s8); display: grid; gap: var(--s5); }

.tarjeta-plan {
  display: grid; justify-items: start; gap: var(--s3);
  padding: var(--s6);
  background: var(--negro); color: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 4px 4px 0 var(--marca);
}
.tarjeta-plan h1 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); color: var(--marca); }
.tarjeta-plan p { margin: 0; color: #D6D6D6; }
.tarjeta-plan strong { color: var(--blanco); }
.tarjeta-plan--vencida { box-shadow: 4px 4px 0 var(--rojo); }
.tarjeta-plan--vencida h1 { color: var(--blanco); }

.miembro__reja { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
.caja-miembro {
  padding: var(--s5) var(--s6);
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
}
.caja-miembro h2 { margin: 0 0 var(--s3); font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.pista-miembro { margin: var(--s2) 0 0; font-size: .875rem; color: var(--tinta-2); }

.datos-miembro { margin: 0; display: grid; gap: var(--s2); }
.datos-miembro div { display: grid; grid-template-columns: 110px 1fr; gap: var(--s3); }
.datos-miembro dt { color: var(--tinta-2); font-size: .875rem; }
.datos-miembro dd { margin: 0; font-weight: 600; }

.historial { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); font-size: .9375rem; }
.historial li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--linea); }
.historial span { color: var(--tinta-2); font-size: .875rem; }

.tabla-miembro { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla-miembro th, .tabla-miembro td { padding: 10px var(--s2); border-bottom: 1px solid var(--linea); text-align: left; }
.tabla-miembro th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.tabla-miembro .num { text-align: right; }

@media (max-width: 860px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso__marca { padding: var(--s6) var(--s5); }
  .acceso__marca img { width: 240px; }
  .acceso__marca::after { width: 180px; height: 180px; right: -60px; bottom: -60px; }
  .acceso__caja { padding: var(--s6) var(--s5); }
  .miembro__reja { grid-template-columns: 1fr; }
}