/* La entrada. Hereda los tokens del panel: es el mismo producto.
 *
 * Deliberadamente NO menciona /plataforma/. Esa es la puerta del dueño del
 * SaaS, no de quien usa el sistema, y no tiene por que aparecer donde entra un
 * cajero. Sigue estando en su URL, con su propio acceso.
 *
 * Dos puertas con distinto peso: la del mostrador es oscura porque es la que
 * se cruza todos los dias; la del panel, blanca, es la de de vez en cuando. */

.entrada {
  max-width: 46rem; margin: 0 auto; padding: 5rem 1.5rem 4rem;
  display: grid; gap: 2.5rem;
}
.entrada header { display: grid; gap: .75rem; justify-items: start; }
.entrada .sello-marca { width: 3rem; height: 3rem; border-radius: var(--radio); margin-bottom: .5rem; }
.entrada h1 {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  margin: 0; max-width: 16ch;
}
.entrada .ayuda { font-size: 1.0625rem; margin: 0; }

.puertas { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }

.puerta {
  display: grid; gap: .5rem; align-content: start;
  background: var(--superficie); border-radius: var(--radio);
  padding: 1.75rem; min-height: 15rem;
  color: inherit; text-decoration: none; position: relative;
  box-shadow: var(--sombra-chica);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.puerta:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.puerta:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.puerta-quien {
  font: 600 .6875rem/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--acento);
}
.puerta-que { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.puerta .ayuda { margin: .25rem 0 0; font-size: .9375rem; }

/* La flecha vive abajo a la derecha y se mueve un poco al pasar: dice "esto
 * es un enlace" sin subrayar nada. */
.puerta-flecha {
  position: absolute; right: 1.5rem; bottom: 1.5rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--borde-fuerte); color: var(--tenue);
  transition: transform .15s ease-out;
}
.puerta:hover .puerta-flecha { transform: translateX(2px); }

/* La puerta principal, al reves: fondo oscuro y la etiqueta en el verde del
 * mostrador, que es el color con el que esa pantalla recibe. */
.puerta.principal { background: #141418; color: #f4f4f6; }
.puerta.principal .puerta-quien { color: #b8ff2e; }
.puerta.principal .ayuda { color: #a4a4ad; }
.puerta.principal .puerta-flecha { border-color: #3a3a44; color: #f4f4f6; }
.puerta.principal:hover { box-shadow: var(--sombra-grande); }

.pie { margin: 0; max-width: 48ch; }

@media (max-width: 34rem) {
  .puertas { grid-template-columns: 1fr; }
  .puerta { min-height: 0; padding-bottom: 4.25rem; }
  .entrada { padding: 3rem 1rem 2.5rem; gap: 2rem; }
}