/* flots · css/paginas/acceso.css
   Acceso clientes (/acceso) — Ingreso (1440) y MIngreso (390).
   Desktop (≥1200): texto + paso a la izquierda y carpeta de 560 × 440 a la derecha, centrados en
   el alto disponible. Tablet y celular: título, carpeta y paso apilados (orden de MIngreso).
   La carpeta es CarpetaProyecto variante "acceso" (componentes.css).
   ========================================================================== */

.acceso{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - var(--alto-banner));
}

/* Las filas 1fr de arriba y abajo reparten el espacio sobrante: el bloque de texto queda
   centrado en vertical junto a la carpeta, como el align-items:center del artboard. */
.acceso-main{
  flex:1 0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 560px;
  grid-template-rows:1fr auto auto 1fr;
  grid-template-areas:
    ".     carpeta"
    "intro carpeta"
    "paso  carpeta"
    ".     carpeta";
  column-gap:72px;
  row-gap:0;
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding:16px var(--gutter) 72px;
}

/* ---------- Título ---------- */
.acceso-intro{
  grid-area:intro;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
  container-type:inline-size;
}
/* Con la columna angosta (1200–1399) el título se achica para que cada renglón entre entero
   ("to your folder" es el más largo). */
.acceso-titulo{
  font-size:var(--fs-display);
  font-size:min(var(--fs-display), 18cqi);
  line-height:.9;
  letter-spacing:-0.05em;
}
.acceso-bajada{
  max-width:460px;
  font-size:18px;
  line-height:1.55;
  color:var(--muted);
}

/* ---------- Carpeta ---------- */
.acceso-carpeta{
  grid-area:carpeta;
  align-self:center;
  width:100%;
  max-width:560px;
  min-width:0;
}
.acceso-carpeta-escala{
  width:560px;
  transform-origin:0 0;
}

/* ---------- Paso (cerrado / enviado / abierto) ---------- */
.acceso-paso{
  grid-area:paso;
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  max-width:460px;
  min-width:0;
  margin-top:36px; /* gap 36 entre el título y el paso (solo desktop; apilado usa row-gap) */
}

.acceso-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.acceso-ayuda{
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}
.acceso-error{
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  color:var(--danger);
}
.acceso-aviso{ align-items:flex-start; }

/* Enviado: tarjeta blanca */
.acceso-enviado{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:28px;
  background:var(--surface);
}
.acceso-enviado-titulo{
  font-size:20px;
  font-weight:500;
  line-height:1.25;
}
.acceso-enviado-texto{
  font-size:16px;
  line-height:1.5;
  color:var(--muted);
}
.acceso-enviado-mail{
  display:block;
  margin-top:4px;
  font-weight:500;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.acceso-simular{
  align-self:flex-start;
  height:48px;
  padding:0 22px;
  font-size:15px;
}

/* Abierto: botón de acento + "Salir" / "Volver a empezar" */
.acceso-abierto{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  max-width:none;
}
.acceso-entrar{
  height:60px;
  padding:0 40px;
  font-size:17px;
}
/* Botón de texto: sin el alto/padding que .btn toma en celular (componentes.css). */
.acceso-secundario{ align-self:flex-start; height:auto; min-height:24px; padding:2px 0; }
.acceso-abierto .acceso-secundario{ align-self:center; }

/* Atajos de la demo (solo en modo demo) */
.acceso-demo{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
  padding-top:18px;
  border-top:1px dashed var(--dashed);
}
.acceso-demo-titulo{
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.acceso-demo-botones{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.acceso-demo-botones .btn{ background:transparent; }
.acceso-demo-botones .btn:hover{ background:var(--surface); }

/* ==========================================================================
   Tablet (768–1199): apilado — título, carpeta, paso
   ========================================================================== */
@media (max-width: 1199px){
  .acceso-main{
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto;
    grid-template-areas:
      "intro"
      "carpeta"
      "paso";
    align-content:start;
    row-gap:40px;
    padding-top:8px;
  }
  .acceso-paso{ margin-top:0; }
  .acceso-carpeta{ justify-self:start; }
}

/* ==========================================================================
   Celular (≤767) — MIngreso
   ========================================================================== */
@media (max-width: 767px){
  .acceso-main{
    row-gap:32px;
    padding:16px 20px 48px;
  }
  .acceso-intro{ gap:12px; }
  .acceso-titulo{ font-size:calc(var(--fs-display) + 4px); line-height:.92; }
  .acceso-bajada{ font-size:16px; line-height:1.5; }

  .acceso-carpeta{ max-width:350px; margin:16px 0 8px; }
  .acceso-carpeta-escala{ width:350px; }

  .acceso-paso{ gap:12px; max-width:none; }
  .acceso-form{ gap:12px; }
  .acceso-campo .campo-control{ height:52px; padding:0 16px; }
  .acceso-enviar{ height:54px; }
  .acceso-ayuda{ font-size:14px; }

  .acceso-enviado{ gap:12px; padding:20px; }
  .acceso-enviado-titulo{ font-size:18px; }
  .acceso-enviado-texto{ font-size:15px; }
  .acceso-simular{ height:44px; padding:0 16px; font-size:14px; }

  .acceso-abierto{ flex-direction:column; align-items:stretch; gap:12px; }
  .acceso-entrar{ width:100%; height:56px; padding:0 24px; font-size:16px; }
  .acceso-secundario,
  .acceso-abierto .acceso-secundario{ align-self:center; font-size:14px; }
}