/* ==========================================================================
   CHASQUI — ingreso.css
   Las vistas públicas de la app: entrar, crear cuenta, la demostración y la
   invitación. Sin barra lateral ni menú: una ficha de papel al centro, como
   el registro de la landing, y al lado los otros caminos.
   La invitación (módulo equipo) usa los mismos bloques: .ingreso y .ingreso__ficha.
   ========================================================================== */

/* El marco público (lo arma el enrutador) */
.publico{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(ellipse 70% 50% at 100% 0,var(--sodio-tinte),transparent 70%),
    var(--fondo);
}
.publico__cab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding:calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
}
.publico__cuerpo{
  flex:1;
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding:8px var(--gutter) calc(48px + env(safe-area-inset-bottom));
}
.publico__cuerpo:focus{outline:none}

/* La ficha y sus caminos */
.ingreso{
  display:grid;
  gap:1.4rem;
  align-items:start;
  max-width:480px;
  margin-inline:auto;
}
@media (min-width:900px){
  .ingreso{
    grid-template-columns:minmax(0,440px) minmax(0,300px);
    justify-content:center;
    gap:2.5rem;
    max-width:none;
    padding-top:4vh;
  }
  .ingreso--ancho{grid-template-columns:minmax(0,520px) minmax(0,320px)}
}

.ingreso__ficha{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
  padding:clamp(1.4rem,4vw,2.1rem);
  border:1px solid var(--brd-2);
  border-radius:var(--radio-lg);
  background:linear-gradient(180deg,var(--sup-2),var(--sup-1));
  box-shadow:var(--sombra-3);
}
/* El filo naranjo de arriba, igual que la ficha de registro de la landing */
.ingreso__ficha::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  border-radius:var(--radio-lg) var(--radio-lg) 0 0;
  background:linear-gradient(90deg,var(--sodio-hondo),var(--sodio),var(--sodio-claro));
}
.ingreso__ficha .vacio{border:0;background:transparent;padding-block:1rem}

.ingreso__antetitulo{
  font-family:var(--f-mono);
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sodio-texto);
}
.ingreso__titulo{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:112%;
  font-size:clamp(1.75rem,5vw,2.35rem);
  line-height:1;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.ingreso__titulo:focus{outline:none}
.ingreso__bajada{color:var(--tx-2);text-wrap:pretty}

.ingreso__nota,
.ingreso__legal{font-size:.84rem;line-height:1.55;color:var(--tx-3)}
.ingreso__nota a,
.ingreso__legal a{color:var(--sodio-texto);text-decoration:underline;text-decoration-color:var(--sodio-borde);text-underline-offset:3px}
.ingreso__nota a:hover,
.ingreso__legal a:hover{text-decoration-color:currentColor}

/* Lo que se gana: la lista con vistos */
.ingreso__vale{display:flex;flex-direction:column;gap:.65rem}
.ingreso__vale li{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:.6rem;
  align-items:start;
  color:var(--tx-2);
  font-size:.94rem;
  line-height:1.5;
}
.ingreso__vale .icono{
  margin-top:.18em;
  padding:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--sodio-tinte);
  color:var(--sodio-texto);
}
.ingreso__vale b{color:var(--tx);font-weight:600}

/* Los otros caminos: demostración, crear cuenta, entrar */
.ingreso__otras{display:flex;flex-direction:column;gap:1rem;min-width:0}
.ingreso__camino{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:1.05rem 1.15rem 1.15rem;
  border:1px dashed var(--brd-2);
  border-radius:var(--radio);
  background:var(--sup-1);
}
.ingreso__camino-titulo{font-weight:700;letter-spacing:-.01em}
.ingreso__camino-texto{font-size:.9rem;line-height:1.5;color:var(--tx-2)}

/* La demostración: el botón manda */
.ingreso--demo .boton--lg{margin-top:.2rem}