/* =====================================================================
   Entrar (participar/entrar) — versión 2: pantalla dividida.
   Izquierda, la noche con el mapa de México; derecha, la tarjeta de acceso.
   ===================================================================== */
body:has(.acceso2) { background: var(--mr-papel); }
body:has(.acceso2) .eval-contenedor-acceso { max-width: none; padding: 0 !important; }
body:has(.acceso2) .eval-volver {
  position: absolute; z-index: 5; top: 1.25rem; left: 1.25rem; margin: 0 !important;
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body:has(.acceso2) .eval-volver:hover { background: #fff; color: var(--mr-morado); }

.acceso2 { display: grid; min-height: 100vh; min-height: 100dvh; }
@media (min-width: 992px) { .acceso2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

/* Lado de la noche */
.acceso2-arte {
  position: relative; overflow: hidden; color: #f4f1f8; display: flex; flex-direction: column; justify-content: center;
  padding: 5.5rem clamp(1.5rem, 5vw, 5rem) 2.5rem;
  background:
    radial-gradient(40rem 30rem at 90% 10%, rgba(116, 68, 180, .45), transparent 70%),
    radial-gradient(30rem 24rem at 0% 100%, rgba(242, 165, 65, .14), transparent 70%),
    var(--mr-noche);
}
.acceso2-arte .liston { position: absolute; inset: 0 0 auto 0; height: 4px; }
.acceso2-mapa { position: absolute; right: -18%; bottom: -12%; width: min(48rem, 120%); opacity: .22; pointer-events: none; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 75%); mask-image: linear-gradient(100deg, transparent 30%, #000 75%); }
.acceso2-arte-cuerpo { position: relative; max-width: 34rem; }
.acceso2-marca { display: flex; width: fit-content; align-items: center; gap: .65rem; margin-bottom: clamp(1.75rem, 5vh, 3rem); color: #fff; text-decoration: none; font-family: var(--mr-serif); font-size: 1.15rem; font-weight: 600; }
.acceso2-marca img { width: 44px; height: 44px; filter: brightness(0) invert(1); } /* árbol completamente blanco sobre la noche */
.acceso2-marca em { color: var(--mr-cempa); }
.acceso2-etiqueta { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffd59a; }
.acceso2-etiqueta::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mr-cempa); box-shadow: 0 0 0 4px rgba(242, 165, 65, .22); }
.acceso2-arte h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4.1rem); line-height: 1.04; letter-spacing: -.03em; margin: 0; }
.acceso2-arte h1 em { font-style: italic; color: #ffd59a; }
.acceso2-intro { margin: 1.1rem 0 0; color: #cfc6dd; font-size: 1.08rem; line-height: 1.6; max-width: 30rem; }
.acceso2-lista { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.acceso2-lista li { display: flex; gap: .9rem; align-items: flex-start; }
.acceso2-lista li > i, .acceso2-lista li > span {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #cebaf5; font-style: normal; font-weight: 700;
}
.acceso2-lista strong { display: block; color: #fff; font-weight: 650; }
.acceso2-lista small { display: block; color: #b9b0c8; font-size: .9rem; line-height: 1.5; margin-top: .1rem; }
.acceso2-lema { position: relative; margin: 2.5rem 0 0; font-family: var(--mr-serif); font-style: italic; color: #8e84a3; font-size: .95rem; }

/* Lado de la tarjeta */
.acceso2-lado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: clamp(2rem, 5vw, 4rem) 1.25rem; }
.acceso2-tarjeta {
  width: 100%; max-width: 27rem; background: #fff; border: 1px solid var(--mr-linea); border-radius: 26px;
  padding: clamp(1.6rem, 4vw, 2.4rem); box-shadow: 0 1px 2px rgba(21, 18, 43, .05), 0 30px 60px -24px rgba(43, 24, 84, .28);
}
.acceso2-simbolo { width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.1rem; background: var(--mr-noche); color: var(--mr-cempa); font-size: 1.15rem; box-shadow: 0 8px 20px -8px rgba(21, 18, 43, .6); }
.acceso2-tarjeta h2 { font-size: clamp(1.6rem, 2.6vw, 1.95rem); margin: 0 0 .4rem; }
.acceso2-tarjeta .acceso-ayuda { color: var(--mr-piedra); margin-bottom: 1.5rem; }
.acceso2-botones { display: grid; gap: .7rem; }
.acceso2-botones .eval-login-boton { display: flex; align-items: center; gap: .85rem; min-height: 3.5rem; padding: .8rem 1.15rem; border-radius: 14px; font-weight: 650; text-align: left; transition: transform .15s ease, box-shadow .15s ease; }
.acceso2-botones .eval-login-boton > span:first-of-type { flex: 1; }
.acceso2-botones .eval-login-boton:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(21, 18, 43, .5); }
.acceso2-botones .eval-login-google { background: #fff; border: 1.5px solid var(--mr-linea-2); color: var(--mr-tinta); }
.acceso2-botones .eval-login-google .fa-google { color: #1967d2; }
.acceso2-botones .eval-login-x { background: #17131b; border: 1.5px solid #17131b; color: #fff; }
.acceso2-sello { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.1rem 0 0; font-size: .86rem; color: var(--mr-piedra); }
.acceso2-sello i { color: var(--mr-verde, #2f7d4f); }
.acceso2-datos { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--mr-linea); }
.acceso2-datos summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--mr-morado); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.acceso2-datos summary::-webkit-details-marker { display: none; }
.acceso2-datos summary i { font-size: .7rem; transition: transform .2s; }
.acceso2-datos[open] summary i { transform: rotate(180deg); }
.acceso2-datos .acceso-garantias { border-top: 0; margin-top: .75rem; padding-top: 0; }
.acceso2-pie { margin: 0; font-size: .86rem; color: var(--mr-piedra); text-align: center; }
.acceso2 .acceso-contexto { margin-bottom: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .acceso2-botones .eval-login-boton { transition: none; } }

/* Celular y tableta: la noche arriba, la tarjeta sube sobre ella. */
@media (max-width: 991.98px) {
  .acceso2-arte { padding: 4.75rem 1.25rem 6.5rem; }
  .acceso2-marca { margin-bottom: 1.5rem; font-size: 1.02rem; }
  .acceso2-marca img { width: 36px; height: 36px; }
  .acceso2-arte h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .acceso2-intro { font-size: 1rem; }
  .acceso2-lista, .acceso2-lema { display: none; }
  .acceso2-mapa { width: 120%; right: -35%; bottom: -10%; opacity: .16; }
  .acceso2-lado { justify-content: flex-start; padding-top: 0; }
  .acceso2-tarjeta { margin-top: -4.5rem; position: relative; }
}